/* ============================================================ */
/* O DESTAQUE DO MODELO                                         */
/* ============================================================ */

/* UMA FOLHA, DUAS PÁGINAS (Jorge, 2026-09-22): a entrada do site e a do
   Eclipse Cross EV mostram esta secção, e mexer numa é mexer nas duas. O
   markup é o parcial `templates/partials/model-spotlight.php` e o movimento o
   `assets/js/Public/model-spotlight.js`. Viveu no `homepage.css` enquanto foi
   de uma página só. */

/* Três camadas no mesmo enquadramento: a fotografia de rua, a frase e o carro
   recortado. As duas imagens partilham o enquadramento de 1920 por 1080 e
   encaixam pixel a pixel enquanto tiverem a mesma caixa e o mesmo
   `object-fit: cover`. A frase vive no HTML, entre as duas, e a assinatura
   assenta na estrada, por baixo do carro.

   A SECÇÃO SÃO DUAS COLUNAS a partir de 1025px (Jorge, 2026-09-22): a cena com
   70% e o painel com o que sobra. Abaixo disso empilham-se, a cena primeiro.

   A ESCALA É A DA FOTOGRAFIA, NÃO A DA JANELA. Com `cover`, a imagem é
   ampliada por `max(largura/1920, altura/1080)`, e o texto tem de crescer pelo
   mesmo factor para ficar sempre do mesmo tamanho em relação ao carro. É isso
   que o `--u` diz: um por cento da altura do enquadramento, à escala a que a
   fotografia está a ser mostrada. As medidas abaixo são as da referência,
   lidas em percentagem dos 1080: a sobrancelha a 15%.

   A CENA NÃO LEVA TECTO EM ALTURA (Jorge, 2026-09-22). A assinatura fica
   dentro da fotografia mas NUNCA em cima do carro, e é o enquadramento inteiro
   que lhe dá a estrada por baixo dele: a sombra acaba a 81% da altura, e os
   19% que sobram são dela. Um tecto cortava a fotografia em cima e em baixo e
   empurrava-a para cima das rodas; e com a largura em `auto` o browser ainda o
   transferia para a largura e deixava faixas de betão dos lados.

   MOBILE FIRST. No telemóvel a caixa é quadrada: a fotografia corta-se pelos
   lados, onde só há fachada, e o carro fica inteiro e grande. Só o texto leva
   um tecto em largura, porque «625 km» à escala do carro não cabia em 390px. */
.model-spotlight {
    position: relative;
    /* A cor do betão da marca, que é a da fachada: é o que se vê enquanto a
       fotografia não chegou, e a secção a seguir assenta na mesma cor. */
    background-color: var(--mitsubishi-concrete-gray);
    /* O `--u` para um browser sem unidades de contentor: a mesma medida em
       unidades da janela, exacta a menos da barra de rolamento, porque sem
       tecto a caixa tem sempre a proporção do degrau (quadrada, 4:3, 16:9)
       da largura toda. A cena volta a declará-lo abaixo, em unidades de
       contentor, e é essa que os browsers de hoje lêem. */
    --u: 1vw;
}

.model-spotlight__scene {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    container-type: size;
}

@supports (container-type: size) {
    .model-spotlight__scene {
        --u: max(0.5625cqw, 1cqh);
    }
}

.model-spotlight__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* O VÉU DO TOPO, onde a frase vive. O texto é branco e grande, e a cena que o
   recebe tanto pode ser a fachada clara de um edifício como a chapa branca de
   um armazém: sem isto, a frase lê-se numa e desaparece noutra. É a mesma
   prática dos heróis do site, que escurecem a parte de cima da fotografia
   (ver o cabeçalho do `modelo_heroi.css`), e acaba antes de chegar ao carro,
   para não lhe tirar o brilho nem sujar a estrada. */
.model-spotlight__scene::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(14, 14, 18, 0.42) 0%, rgba(14, 14, 18, 0.22) 34%, rgba(14, 14, 18, 0) 56%); /* ds-ok: o véu do texto sobre a fotografia, e o site público não lê o tokens.css do CMS */
    pointer-events: none;
}

/* O que fica POR CIMA do véu: a frase, o carro, os marcadores e a assinatura.
   O fundo é o único que fica por baixo. */
.model-spotlight__messages,
.model-spotlight__vehicle,
.model-spotlight__dots,
.model-spotlight__foot {
    z-index: 2;
}

/* A cena leva 3% de folga para o paralaxe a poder deslocar sem mostrar a
   margem. O carro não precisa: à volta dele é transparente. */
.model-spotlight__background {
    transform: scale(1.03);
}

/* AS VIATURAS EMPILHAM-SE no mesmo enquadramento, uma por versão, e esbatem-se
   uma na outra quando o cartaz muda (o ASX mostra duas). Com uma só, que é o
   caso dos outros quatro sítios, isto é uma camada com `opacity: 1` e mais
   nada. A que está por baixo não recebe rato: senão o paralaxe media a
   posição pela camada errada. */
.model-spotlight__vehicle {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s var(--bt-mov);
    pointer-events: none;
}

.model-spotlight__vehicle.is-active {
    opacity: 1;
}

.model-spotlight__messages {
    position: absolute;
    inset-inline: 0;
    top: calc(15 * var(--u));
    display: grid;
    text-align: center;
    color: #ffffff;
    pointer-events: none;
}

/* Todas na mesma célula: a que está activa vê-se, as outras esperam por baixo
   dela, sem `position: absolute` e sem a caixa mudar de altura a cada troca. */
.model-spotlight__message {
    grid-area: 1 / 1;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translate3d(0, 6%, 0);
    transition: opacity 0.6s var(--bt-mov), transform 0.6s var(--bt-mov);
}

.model-spotlight__message.is-active {
    opacity: 1;
    transform: none;
}

/* A que sai vai para cima, a que entra vem de baixo: lê-se como a mesma linha a
   avançar, e não como duas frases a piscar no mesmo sítio. E sai em metade do
   tempo, senão a meio da troca liam-se as duas sobrepostas. */
.model-spotlight__message.is-leaving {
    transform: translate3d(0, -6%, 0);
    transition-duration: 0.3s;
}

/* O SELO POR CIMA DAS FRASES: o segmento do modelo, numa pastilha amarela de
   cantos redondos com tinta escura fixa (Jorge, 2026-09-22). Vive dentro do
   bloco das frases, para andar com elas no paralaxe, mas assenta ACIMA dele,
   pendurado no topo: a sobrancelha fica nos 15% da referência e o selo ocupa
   a fachada, onde não há nada.

   Duas animações, as duas só quando a secção está à vista e só para quem não
   pediu movimento reduzido: a pastilha abre-se da esquerda para a direita e
   o texto entra a seguir; depois um brilho passa-lhe por cima de seis em seis
   segundos, uma vez, e fica quieto o resto do tempo. Sem JS, e sem
   `is-armed`, o selo está simplesmente lá, inteiro. */
.model-spotlight__badge {
    position: absolute;
    inset-inline: 0;
    bottom: calc(100% + 2.2 * var(--u));
    display: flex;
    justify-content: center;
    margin: 0;
    /* Um selo por versão, no mesmo sítio: o da viatura à vista é que se vê. */
    opacity: 0;
    transition: opacity 0.45s var(--bt-mov);
}

.model-spotlight__badge.is-active {
    opacity: 1;
}

.model-spotlight__badge span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.55em 1.1em 0.55em 0.95em;
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--accent-yellow);
    color: var(--main-background-color);
    /* À escala do carro em computador; no telemóvel a escala dava 8px, e o
       mínimo é o que ainda se lê. */
    font-size: max(12px, calc(2 * var(--u)));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* O brilho: uma faixa de luz inclinada que atravessa a pastilha. Fica fora dela,
   à esquerda, até a animação a mandar passar. */
.model-spotlight__badge span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.65) 50%, transparent 65%); /* ds-ok: é a luz que atravessa o selo, e o site público não lê o tokens.css do CMS */
    transform: translateX(-130%);
    pointer-events: none;
}

/* Armado pelo JS: a pastilha começa fechada e o texto invisível. */
.model-spotlight.is-armed .model-spotlight__badge span {
    clip-path: inset(0 100% 0 0 round 999px);
    color: transparent;
}

/* À vista: abre-se, e o texto chega quando a pastilha já vai a meio. */
.model-spotlight.is-armed.is-in .model-spotlight__badge span {
    clip-path: inset(0 0 0 0 round 999px);
    color: var(--main-background-color);
    transition: clip-path 0.9s var(--bt-mov), color 0.45s 0.4s;
}

.model-spotlight.is-in .model-spotlight__badge span::after {
    animation: model-spotlight-sheen 6s var(--bt-mov) 1.1s infinite;
}

/* A passagem dura os primeiros 22% do ciclo (1,3 s) e o resto é espera. */
@keyframes model-spotlight-sheen {
    0%   { transform: translateX(-130%); }
    22%  { transform: translateX(130%); }
    100% { transform: translateX(130%); }
}

/* O ícone antes do texto, na tinta do selo. O raio é a forma do widget de
   meteorologia do CMS e relampeja com os tempos do `wx-flash` (weather.css):
   dois tremeluzires de 60 ms no fim de cada ciclo de 3 s, em degraus. Os
   outros (a bomba, a folha, a tomada) são quadrados e ficam quietos: uma folha
   a piscar seria enfeite. */
.model-spotlight__bolt,
.model-spotlight__badge-icon {
    flex: none;
    height: 1.05em;
    fill: currentColor;
}

.model-spotlight__bolt {
    width: 0.6em;
}

.model-spotlight__badge-icon {
    width: 1.05em;
}

.model-spotlight.is-in .model-spotlight__bolt {
    animation: model-spotlight-flash 3s steps(1) infinite;
}

@keyframes model-spotlight-flash {
    0%, 84%, 100% { opacity: 1; }
    86%           { opacity: 0.15; }
    88%           { opacity: 1; }
    90%           { opacity: 0.25; }
    92%           { opacity: 1; }
}

.model-spotlight__eyebrow {
    font-size: min(calc(7 * var(--u)), 4.6vw);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.model-spotlight__headline {
    font-size: min(calc(31 * var(--u)), 19vw);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

/* O rodapé da cena: a assinatura e, debaixo dela, o botão, na estrada por
   baixo do carro. Sobe 4 `--u` do fundo; a sombra do carro acaba a 19 do
   fundo, e o que fica entre os dois é o rodapé inteiro. */
.model-spotlight__foot {
    position: absolute;
    inset-inline: 0;
    /* A LINHA DE BAIXO DA CENA É DOS MARCADORES, e a assinatura assenta acima
       deles: no telemóvel, com os dois à mesma altura, os pontos passavam por
       cima do «ECLIPSE CROSS». Os 34px são a altura de um marcador mais a
       folga entre ambos. */
    bottom: calc(4 * var(--u) + 34px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(3 * var(--u));
}

.model-spotlight__signature {
    margin: 0;
    /* Duas reduções de 25% sobre a referência, onde media 92 `--u`: 69 na
       primeira e 51,75 na segunda (Jorge, 2026-09-22). O tecto em largura é
       o do telemóvel, reduzido na mesma proporção. */
    width: min(calc(51.75 * var(--u)), 49.5vw);
    /* O SVG é branco; a referência mostra-o cinzento sobre o asfalto, e a
       opacidade dá isso sem um segundo ficheiro. Subiu de 0,45 para 0,6 a
       pedido do Jorge (2026-09-22): um pouco mais claro sobre a estrada.

       SEM SOMBRA (Jorge, 2026-09-23): chegou a ter uma, para se ler no chão
       claro do deserto, e o desenho da casa não a quer. Quem trata do contraste
       é o véu do topo e a escolha da cena. */
    opacity: 0.6;
    color: #ffffff;
    font-size: clamp(1rem, 2.5vw, 2rem);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
}

.model-spotlight__signature img {
    display: block;
    width: 100%;
    height: auto;
}

/* Com o paralaxe armado, o browser prepara as camadas para se mexerem. Só
   nesse caso: em telemóvel nada se mexe e não há razão para pagar por isso.
   A assinatura entra; os marcadores e o painel não, que são controlos, e um
   alvo que foge ao rato não é cenário (Jorge, 2026-09-22). */
.model-spotlight[data-parallax="on"] .model-spotlight__layer,
.model-spotlight[data-parallax="on"] .model-spotlight__messages,
.model-spotlight[data-parallax="on"] .model-spotlight__signature {
    will-change: transform;
}

/* ── Os marcadores das frases ───────────────────────────────────────────────
   NA BASE DA CENA, AO CENTRO E SEMPRE ABAIXO DA ASSINATURA (Jorge,
   2026-09-22). O ponto da frase à vista é branco cheio, os outros ficam
   esbatidos, e à volta do activo fecha-se um anel que é o tempo até à troca.
   Servem para duas coisas: dizer que a frase muda sozinha, e deixar mudá-la à
   mão.

   A ordem vertical é a mesma em todas as larguras: o nome do modelo em cima,
   os marcadores debaixo dele. Por baixo deles passa o asfalto, e por isso o
   branco chega; o que não chega é quando calha uma linha branca da estrada, e
   para isso o conjunto leva sombra própria.

   O alvo tem 28 por 28, acima do mínimo do WCAG 2.2, e o ponto vive ao meio
   dele: a área de toque cresce sem o desenho engrossar. */
.model-spotlight__dots {
    position: absolute;
    inset-inline: 0;
    bottom: calc(4 * var(--u));
    display: flex;
    justify-content: center;
    gap: 4px;
    z-index: 2;
}

.model-spotlight__dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* O ponto. O que está à vista distingue-se por DUAS coisas, o tamanho e a cor
   cheia, e não só pela cor: por baixo deles passa asfalto cinzento, onde um
   branco esbatido a 45% media 2,4:1 e a 70% chega aos 3:1, mas a essa altura
   já quase não se distinguia do branco cheio. Com o ponto maior a diferença
   lê-se sempre, e a cor só a confirma. */
.model-spotlight__dot::before {
    content: "";
    display: block;
    /* PAR, e o botão também: num alvo de 28 com um ponto de 11 sobra meio
       pixel de cada lado, e meio pixel num círculo branco de 11 vê-se. Com 10,
       a conta dá 9 exactos e o ponto cai no mesmo centro do anel. */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.72); /* ds-ok: 3,1:1 sobre o asfalto; o site público não lê o tokens.css do CMS */
    transform: scale(0.8);
    transition: background-color var(--bt-dur) var(--bt-mov), transform var(--bt-dur) var(--bt-mov);
}

.model-spotlight__dot:hover::before {
    background-color: #ffffff;
}

.model-spotlight__dot.is-active::before {
    background-color: #ffffff;
    transform: scale(1);
}

/* O foco leva um anel branco com contorno escuro à volta, porque por trás dele
   tanto passa asfalto escuro como a linha branca da estrada, e um anel de uma
   cor só desaparecia numa delas. */
.model-spotlight__dot:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(14, 14, 18, 0.5); /* ds-ok: o contorno do anel de foco sobre a fotografia */
}

/* O anel do tempo, à volta do ponto activo. Começa aberto (o traço todo fora
   do círculo) e fecha-se ao longo da espera; nos outros pontos não existe. O
   `rotate` põe o início do arco em cima, que é onde o olho o espera. */
.model-spotlight__dot-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

/* O ANEL E O PONTO PARTILHAM O CENTRO, e o alinhamento não é de confiança: o
   ponto é um `::before` centrado por flex no botão, e o anel um `<circle>` no
   meio do `viewBox`. Para os dois caírem no mesmo pixel, o botão tem um número
   PAR de pixéis de lado (28), o `viewBox` é o mesmo número (0 0 28 28) e o
   ponto tem um número ímpar (11) que o flex centra sem meio pixel. */
.model-spotlight__dot-ring circle {
    fill: none;
    stroke: #ffffff;
    /* Metade da espessura de antes (Jorge, 2026-09-23): o anel conta o tempo,
       não é a moldura do ponto. */
    stroke-width: 1;
    stroke-linecap: round;
    /* 2 x pi x 9, o perímetro do círculo que o SVG desenha. */
    stroke-dasharray: 56.55;
    stroke-dashoffset: 56.55;
    /* Começa em cima, que é onde o olho espera um relógio. O `transform-box`
       diz ao `center` que o centro é o do `viewBox` e não o da caixa do traço,
       que com o traço quase todo escondido ficaria fora do sítio. */
    transform: rotate(-90deg);
    transform-box: view-box;
    transform-origin: center;
}

/* Com o JavaScript, o anel do ponto activo conta o tempo até à troca. A
   animação nasce EM PAUSA, e uma animação em pausa no instante zero desenha o
   primeiro fotograma, que é o anel ainda por fechar; quem a põe a andar é a
   marca `is-playing`, que só existe com a secção à vista e o separador à
   frente. Sem JavaScript não há anel nenhum, e o ponto cheio chega para dizer
   qual é a frase. */
.model-spotlight.is-armed .model-spotlight__dot.is-active .model-spotlight__dot-ring {
    opacity: 1;
}

.model-spotlight.is-armed .model-spotlight__dot.is-active .model-spotlight__dot-ring circle {
    animation: model-spotlight-dot 5s linear forwards;
    animation-play-state: paused;
}

.model-spotlight.is-armed.is-playing .model-spotlight__dot.is-active .model-spotlight__dot-ring circle {
    animation-play-state: running;
}

@keyframes model-spotlight-dot {
    from { stroke-dashoffset: 56.55; }
    to   { stroke-dashoffset: 0; }
}

/* ── O painel ───────────────────────────────────────────────────────────────
   O que sobra à direita da cena (Jorge, 2026-09-22): o preço, a frase do
   modelo, duas linhas sobre o carro e a acção. No telemóvel fica debaixo da
   cena, que é a ordem por que se lê.

   Assenta na cor de fundo da própria secção, o betão da marca, que é também a
   cor da fachada e a da secção a seguir: o painel não é um cartão pousado em
   cima, é a página a continuar ao lado da fotografia. */
.model-spotlight__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* A tinta escura do site, a mesma que o selo usa sobre o amarelo. */
    color: var(--main-background-color);
    padding: clamp(26px, 6vw, 38px) clamp(16px, 5vw, 40px) clamp(32px, 7vw, 44px);
}

.model-spotlight__price {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.model-spotlight__price-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    color: rgba(14, 14, 18, 0.68); /* ds-ok: 6,1:1 sobre o betão; o site público não lê o tokens.css do CMS */
}

.model-spotlight__price-value {
    margin-top: 10px;
    font-size: clamp(30px, 6.5vw, 40px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
}

.model-spotlight__price-note {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(14, 14, 18, 0.68); /* ds-ok: ver acima */
}

/* Os textos das viaturas ocupam a MESMA célula, para a troca ser um
   esbatimento e a altura do painel ser a do texto mais longo: com eles em
   fluxo, o botão saltava de sítio a cada troca. */
.model-spotlight__panel-texts {
    display: grid;
    width: 100%;
}

.model-spotlight__panel-text {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.45s var(--bt-mov);
}

.model-spotlight__panel-text.is-active {
    opacity: 1;
}

/* O salto entre o preço e o resto é o maior do painel: são duas coisas
   diferentes, e é a hierarquia que as separa, não uma linha. */
.model-spotlight__slogan {
    margin: clamp(22px, 5vw, 32px) 0 0;
    font-size: clamp(19px, 4vw, 23px);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.model-spotlight__summary {
    margin: 10px 0 0;
    max-width: 44ch;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(14, 14, 18, 0.72); /* ds-ok: 7:1 sobre o betão; o site público não lê o tokens.css do CMS */
}

/* O botão do sistema não parte a legenda, e aqui tem de a poder partir: o
   rótulo traz o nome do modelo («Conhecer o Novo Eclipse Cross EV») e o painel
   é estreito. Duas linhas centradas lêem-se; meia palavra fora da coluna,
   não. */
.model-spotlight__cta {
    margin-top: clamp(22px, 5vw, 30px);
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

@media (min-width: 641px) {
    .model-spotlight {
        --u: 0.75vw;
    }

    .model-spotlight__scene {
        aspect-ratio: 4 / 3;
    }
}

@media (min-width: 1025px) {
    /* A CENA FICA COM 70% E O PAINEL COM O QUE SOBRA (Jorge, 2026-09-22). A
       cena continua 16:9, e por isso a altura da secção é a dela: 70% da
       largura a dividir por 16 e a multiplicar por 9. */
    /* O PAINEL TEM UM MÍNIMO, e é ele que manda quando os 30% não chegam: a
       1025px de janela os 30% davam 307px, e lá dentro o slogan, o resumo e o
       botão saíam pela borda fora. Com o `minmax` o painel fica com os 340px
       de que precisa e a cena cede o resto; a partir de 1140px de janela os
       30% já são maiores do que isso e a divisão é a pedida, 70 e 30. */
    .model-spotlight {
        display: grid;
        grid-template-columns: minmax(0, 70%) minmax(340px, 1fr);
        /* O `--u` de recurso, para um browser sem unidades de contentor: a
           cena deixou de ser a janela toda, e 0,5625 de 70% dá isto. Os
           browsers de hoje lêem o `max(0.5625cqw, 1cqh)` declarado na cena, e
           esse acerta também nas larguras em que o mínimo do painel manda. */
        --u: 0.39375vw;
    }

    .model-spotlight__scene {
        aspect-ratio: 16 / 9;
    }

    /* Em computador a cena tem a altura da janela ou quase, e quando o fundo
       dela coincide com o fundo da janela a barra de atalhos do site
       (`.island-links`, fixa, 56px) tapava o que lá está em baixo. Os dois
       sobem o suficiente para ficarem acima dela, e continuam abaixo da sombra
       do carro nas larguras correntes. Em telemóvel a cena é muito mais baixa
       do que a janela e esse encontro não acontece.

       Os marcadores ficam onde estão, na base, e a assinatura sobe: os dois ao
       centro, um debaixo do outro. */
    .model-spotlight__foot {
        bottom: max(calc(4 * var(--u) + 34px), 76px);
    }

    /* O painel tem a altura da cena ao lado, e o conteúdo dele é curto: ao
       meio lê-se como um bloco, encostado ao topo ficava a flutuar com meio
       painel vazio por baixo. */
    .model-spotlight__panel {
        justify-content: center;
        padding: clamp(32px, 3.4vw, 56px) clamp(28px, 3vw, 48px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .model-spotlight__message {
        transition: none;
        transform: none;
    }

    /* O JS não arma nada com movimento reduzido; isto cobre quem o liga com a
       página já aberta: o selo inteiro, quieto, sem brilho. */
    .model-spotlight .model-spotlight__badge span {
        clip-path: none;
        color: var(--main-background-color);
        transition: none;
    }

    .model-spotlight .model-spotlight__badge span::after,
    .model-spotlight .model-spotlight__bolt {
        animation: none;
    }

    .model-spotlight .model-spotlight__vehicle,
    .model-spotlight .model-spotlight__badge,
    .model-spotlight .model-spotlight__panel-text {
        transition: none;
    }

    /* Sem rotação não há tempo a contar: fica o ponto da frase à vista cheio e
       os outros esbatidos, e continuam a servir para trocar de frase. */
    .model-spotlight .model-spotlight__dot::before {
        transition: none;
    }



    .model-spotlight .model-spotlight__dot-ring {
        opacity: 0;
    }

    .model-spotlight .model-spotlight__dot-ring circle {
        animation: none;
    }
}