/* ─────────────────────────────────────────────────────────────────────────────
   modelo_seccoes.css: as secções de modelo da Mitsubishi, para qualquer modelo
   ─────────────────────────────────────────────────────────────────────────────
   Uma folha só, partilhada pelas secções /exterior, /interior, /tecnologia e
   /ficha-tecnica de cada modelo. Quem a carrega são os controllers, através do
   `model_assets_css()` do `_modelo_page.php`.

   DE ONDE VEIO. É o `outlander_seccoes.css` generalizado: as mesmas medidas, os
   mesmos degraus de espaçamento, os mesmos contrastes medidos, com o prefixo
   `model-` em vez de `ol-`. O que ficou de fora foi o que só serve o Outlander
   PHEV: o mostrador dos sete modos de condução, a escala de regeneração, os
   cinco sistemas do S-AWC e o pedal. Essas continuam na folha dele, que não se
   tocou.

   O QUE ESTE FICHEIRO NÃO FAZ

   Não redefine uma única classe do site. O herói, os separadores
   (`.page-secondary-nav`), a grelha (`.row`/`.col-*`), o `.model-intro-section`
   e os botões (`.bt-filled`/`.bt-outline`) são os do site e ficam como estão. A
   única excepção é o escurecimento do herói, documentada onde acontece e presa
   a `.model-hero`.

   MOBILE FIRST. O que está fora de media query é o telemóvel. As media queries
   são todas `min-width` e só acrescentam.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Escala ──────────────────────────────────────────────────────────────────
   Um sítio só para as medidas que se repetem. Os degraus do espaçamento são os
   mesmos em toda a página: sem isto, cada secção acaba com o seu padding
   inventado e o ritmo vertical não existe.

   PORQUE A LISTA É DE NOMES, E NÃO DE `[class^="model-"]`.
   Esta lista está escrita quatro vezes, uma por breakpoint, e um bloco novo que
   não entre nas quatro recebe zero tokens: o padding fica a zero, as cores caem
   para o valor herdado, e o bloco parece partido sem uma única regra errada. A
   tentação é trocar os nomes por `[class^="model-"], [class*=" model-"]`, que
   apanha tudo de uma vez. NÃO SE FAZ, e a razão é esta: esse selector aterra em
   CADA elemento do kit, incluindo a própria `.model-eyebrow`. Um token definido
   no próprio elemento ganha ao que vem do antepassado, e as secções claras
   deixam de conseguir re-apontar o `--model-eyebrow-color` para o cinzento
   escuro. A etiqueta ficava a `#a0a5a8` sobre o cinzento claro, a 1,9:1.
   Os oito nomes são os blocos de PRIMEIRO NÍVEL, e é a lista inteira: medida no
   Playwright, o que fica de fora nas catorze páginas de conteúdo é só
   `model-hero`, `model-image` e `model-label`, que vivem no herói e não usam
   nada desta folha. Um bloco novo entra aqui, nos quatro sítios. */
.model-section,
.model-more,
.model-colors,
.model-spec-sheet,
.model-cta,
.model-panel,
.model-banner,
.model-intro-section {
    --model-ink: #000000;
    --model-paper: #ffffff;
    --model-light: #e3e5e6;
    /* Medidos, não escolhidos a olho. O #6b7075 que aqui estava dava 3,96:1
       sobre o cinzento claro das secções, abaixo dos 4,5:1 que um texto
       pequeno precisa. Este dá 5,11:1 sobre o claro e 6,46:1 sobre o branco. */
    --model-grey: #5a5f63;
    --model-rule: rgba(0, 0, 0, .12);
    --model-rule-on-dark: rgba(255, 255, 255, .16);
    /* O vermelho da Mitsubishi (#ED0000) tem 4,60:1 sobre preto, passa, mas
       só 3,61:1 sobre o cinzento claro das secções. A sobrancelha é texto de
       11px: sobre fundo claro escurece para #C50000 (4,92:1), que é o mesmo
       vermelho, mais fechado. Ver o bloco das secções claras abaixo. */
    --model-red: var(--mitsubishi-red, #ED0000);
    --model-eyebrow-color: #a0a5a8;   /* etiqueta sobre tinta ,  8,4:1 */

    --model-space-1: 8px;
    --model-space-2: 16px;
    --model-space-3: 24px;
    --model-space-4: 40px;
    --model-space-5: 64px;
    --model-space-6: 88px;

    --model-radius: 6px;
    --model-gutter: 20px;      /* respiro lateral no telemóvel */
    --model-max-width: 1400px;   /* mesma coluna de conteúdo do resto do site */

    /* ── Cinzentos do texto ──────────────────────────────────────────────
       Havia nove valores literais espalhados pelo ficheiro, e dois deles
       (#3d4245 e #4a4f52) faziam o MESMO trabalho com dois cinzentos
       diferentes, ninguém vê a diferença, e é por aí que uma folha começa a
       deixar de ser um sistema. Os que sobrevivem são cinco, e todos foram
       medidos contra o fundo em que aterram. */
    --model-text-on-dark: #cfd2d4;   /* corpo sobre tinta     , 13,8:1 */
    --model-meta-on-dark:  #9aa0a4;   /* secundário sobre tinta,  7,9:1 */
    --model-text-on-light:  #3d4245;   /* corpo sobre claro     ,  8,1:1 */
    --model-stripe:        #f4f5f6;   /* a linha ímpar da tabela */
    --model-card-bg:       #111315;   /* o fundo dos cartões */
    --model-cta-background:    #404040;   /* a barra da chamada para a acção */
    --model-yes-color:          #1f7a3d;   /* o visto do equipamento */

    /* ── Corpo de letra ──────────────────────────────────────────────────
       Nove degraus, cada um com um trabalho. Os que mudam com o ecrã
       (`--model-text-base`, `--model-text-title`, `--model-text-title-2`, `--model-text-stat`) mudam nas
       media queries lá abaixo, num sítio só, e não em quinze regras. */
    --model-text-micro: 11px;   /* rótulo em maiúsculas, muito espaçado */
    --model-text-mini:  12px;   /* cabeçalho de tabela, nota legal, o mínimo do site */
    --model-text-meta:  13px;   /* linha secundária, em caixa normal */
    --model-text-small:   14px;   /* legenda e célula de tabela */
    --model-text-base:  15px;   /* corpo */
    --model-text-strong: 16px;   /* rótulo com peso: título de pormenor, nome do ficheiro */
    --model-text-title-2:  20px;   /* título secundário: «mais para ver», chamada à acção */
    --model-text-stat:   30px;   /* o algarismo grande */
    --model-text-title:   26px;   /* título de secção */

    /* ── Altura de linha ─────────────────────────────────────────────────
       Quatro, e não onze. Um `1.45` ao lado de um `1.4` não é uma decisão:
       é o resto de outra decisão. */
    --model-leading-title:  1.15;   /* títulos grandes */
    --model-leading-tight:  1.25;   /* títulos pequenos e rótulos */
    --model-leading-medium:  1.4;    /* linhas secundárias */
    --model-leading-body:  1.6;    /* corpo */
}

@media (min-width: 700px) {
    .model-section,
    .model-more,
    .model-colors,
    .model-spec-sheet,
    .model-cta,
    .model-panel,
    .model-banner,
    .model-intro-section {
        --model-text-title-2: 24px;
    }
}

@media (min-width: 768px) {
    .model-section,
    .model-more,
    .model-colors,
    .model-spec-sheet,
    .model-cta,
    .model-panel,
    .model-banner,
    .model-intro-section {
        --model-space-5: 88px;
        --model-space-6: 120px;
        --model-gutter: 40px;

        --model-text-base: 16px;
        --model-text-small:  15px;
        --model-text-title:  34px;
        --model-text-stat:  40px;
    }
}

@media (min-width: 1200px) {
    .model-section,
    .model-more,
    .model-colors,
    .model-spec-sheet,
    .model-cta,
    .model-panel,
    .model-banner,
    .model-intro-section {
        --model-gutter: 56px;

        --model-text-base: 17px;
        --model-text-title:  42px;
        --model-text-stat:  48px;
    }
}

/* ── A secção ────────────────────────────────────────────────────────────── */

.model-section {
    padding: var(--model-space-5) var(--model-gutter);
    background-color: var(--model-ink);
    color: var(--model-paper);
}

.model-section--light {
    background-color: var(--model-light);
    color: var(--model-ink);
    --model-red: #C50000;
    --model-eyebrow-color: #4f5457;   /* etiqueta sobre claro ,  6,1:1 */
}

.model-section--white {
    background-color: var(--model-paper);
    color: var(--model-ink);
    --model-red: #C50000;
    --model-eyebrow-color: #4f5457;   /* etiqueta sobre branco,  7,7:1 */
}

/* Uma secção que é só uma fotografia de bordo a bordo não leva respiro nenhum:
   o respiro é a fotografia. */
.model-section--flush {
    padding-left: 0;
    padding-right: 0;
}

.model-section__inner {
    margin: 0 auto;
    width: 100%;
    max-width: var(--model-max-width);
}

/* ── Cabeçalho de secção ─────────────────────────────────────────────────── */

.model-heading {
    margin: 0 0 var(--model-space-4) 0;
    max-width: 760px;
}

.model-heading--centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* A sobrancelha. Maiúsculas pequenas muito espaçadas com um traço curto à
   frente: é o que diz «começa aqui uma secção» sem gastar um título. */
.model-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--model-space-1);
    margin: 0 0 var(--model-space-2) 0;
    font-size: var(--model-text-micro);
    line-height: var(--model-leading-tight);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    /* CINZENTA, E NÃO VERMELHA. O vermelho da marca é a cor de uma decisão, e
       uma etiqueta de secção não é uma decisão: é o nome do capítulo que se
       está a ler. Repetido em cada secção, o vermelho deixava de destacar
       coisa nenhuma e passava a ser o fundo visual da página.
       Medida em cada superfície: 8,4:1 sobre o preto das secções escuras e
       6,1:1 sobre o cinzento claro, num texto de 12 px em maiúsculas. */
    color: var(--model-eyebrow-color);
}

.model-eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background-color: currentColor;
}

.model-heading--centered .model-eyebrow {
    justify-content: center;
}

.model-title {
    margin: 0;
    font-size: var(--model-text-title);
    line-height: var(--model-leading-title);
    font-weight: 700;
    letter-spacing: -.01em;
}

.model-text {
    margin: var(--model-space-2) 0 0 0;
    font-size: var(--model-text-base);
    line-height: var(--model-leading-body);
    font-weight: 300;
    color: inherit;
}

.model-section .model-text {
    color: var(--model-text-on-dark);
}

.model-section--light .model-text,
.model-section--white .model-text {
    color: var(--model-text-on-light);
}

.model-text strong {
    font-weight: 600;
    color: inherit;
}

.model-section .model-text strong {
    color: var(--model-paper);
}

.model-section--light .model-text strong,
.model-section--white .model-text strong {
    color: var(--model-ink);
}

.model-text + .model-text {
    margin-top: var(--model-space-2);
}

/* ── Par texto + fotografia ──────────────────────────────────────────────── */

.model-pair {
    display: grid;
    gap: var(--model-space-3);
    align-items: center;
}

.model-pair + .model-pair {
    margin-top: var(--model-space-5);
}

.model-pair__media img,
.model-pair__media picture {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--model-radius);
}

@media (min-width: 900px) {
    .model-pair {
        grid-template-columns: 1fr 1fr;
        gap: var(--model-space-4);
    }
    /* Alterna o lado da fotografia. O `order` só existe a partir de duas
       colunas: em coluna única a ordem tem de ser a de leitura, senão o texto
       aparece depois da imagem que descreve. */
    .model-pair--reversed .model-pair__media { order: -1; }
}

/* ── Grelha de pormenores ────────────────────────────────────────────────── */

.model-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--model-space-3);
    margin: var(--model-space-4) 0 0 0;
    padding: 0;
    list-style: none;
}

/* Uma proporção só por grelha. As fontes oficiais chegam em 3:2 (as
   fotografias), em 16:9 (os esquemas técnicos) e em 2:1 (o painel de
   instrumentos): deixadas em `height:auto`, os títulos das três colunas
   apareciam a alturas diferentes e a grelha lia-se como um erro. O recorte é do
   CSS; o `ol_img()` continua a declarar as medidas reais do ficheiro, ou a
   página saltava enquanto as imagens chegam. */
.model-detail picture {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--model-radius);
}

.model-detail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Os esquemas técnicos da Mitsubishi vêm quase todos em 1,97:1, quase 16:9.
   Recortá-los a 3:2 comeria o carro pelas pontas. */
.model-details--wide .model-detail picture { aspect-ratio: 16 / 9; }

.model-detail__title {
    margin: var(--model-space-2) 0 var(--model-space-1) 0;
    font-size: var(--model-text-strong);
    line-height: var(--model-leading-tight);
    font-weight: 600;
}

.model-detail__text {
    margin: 0;
    font-size: var(--model-text-small);
    line-height: var(--model-leading-body);
    font-weight: 300;
    color: var(--model-text-on-dark);
}

.model-section--light .model-detail__text,
.model-section--white .model-detail__text {
    color: var(--model-text-on-light);
}

@media (min-width: 620px) {
    .model-details { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
    .model-details { grid-template-columns: repeat(3, 1fr); gap: var(--model-space-4); }
    .model-details--two   { grid-template-columns: repeat(2, 1fr); }
    .model-details--four { grid-template-columns: repeat(4, 1fr); }
}

/* ── Números ─────────────────────────────────────────────────────────────── */

/* O algarismo grande com a unidade pequena ao lado. `font-variant-numeric:
   tabular-nums` para os algarismos terem todos a mesma largura: sem isso, uma
   linha de números alinhados à esquerda fica com os dígitos a dançar. */
.model-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--model-space-3);
    margin: var(--model-space-4) 0 0 0;
    padding: 0;
    list-style: none;
}

.model-stat {
    padding: var(--model-space-2) 0 0 0;
    border-top: 1px solid var(--model-rule-on-dark);
}

.model-section--light .model-stat,
.model-section--white .model-stat {
    border-top-color: var(--model-rule);
}

.model-stat__value {
    display: block;
    font-size: var(--model-text-stat);
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.model-stat__unit {
    margin-left: 4px;
    font-size: var(--model-text-small);
    font-weight: 500;
    letter-spacing: 0;
}

.model-stat__label {
    display: block;
    margin: var(--model-space-1) 0 0 0;
    font-size: var(--model-text-micro);
    line-height: var(--model-leading-medium);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--model-meta-on-dark);
}

.model-section--light .model-stat__label,
.model-section--white .model-stat__label {
    color: var(--model-grey);
}

@media (min-width: 768px) {
    .model-stats { grid-template-columns: repeat(4, 1fr); gap: var(--model-space-4); }
}

/* ── Selector de cores ───────────────────────────────────────────────────── */

.model-colors {
    padding: var(--model-space-5) var(--model-gutter);
    background-color: var(--model-light);
    color: var(--model-ink);
    --model-red: #C50000;
    --model-eyebrow-color: #4f5457;
}

.model-colors__inner {
    margin: 0 auto;
    width: 100%;
    max-width: var(--model-max-width);
}

/* O palco.
   A altura é reservada por uma proporção fixa, sem isto a página salta de cada
   vez que se muda de cor, porque a fotografia nova chega depois do clique.

   E é `cover`, não `contain`. Os renders oficiais vêm em 4:3 com o automóvel a
   ocupar 48% da altura: metade da caixa era margem branca, e ao lado de um
   título de 42px o carro ficava a parecer uma miniatura. O recorte central
   corta a margem e não corta o carro, foram medidas as 116 fotografias, e a
   que sobe mais alto começa aos 19,4% e a que desce mais baixo acaba aos 84,3%;
   a janela 16:9 sobre uma fonte 4:3 mostra dos 12,5% aos 87,5%. Mudar a
   proporção obriga a refazer esta conta. */
.model-colors__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--model-radius);
    background-color: var(--model-paper);
}

/* O PALCO CABE NO ECRÃ, E OS CÍRCULOS DAS CORES TAMBÉM.
   ─────────────────────────────────────────────────────────────────────────
   O `aspect-ratio` sozinho pedia 915 px numa janela de 900, onde o ecrã útil
   são 744 depois do cabeçalho e da barra de separadores: entre dois e cinco
   círculos de cor ficavam fora da vista, e para trocar de cor era preciso rolar
   para longe do carro que se estava a comparar.

   O `max-height` trava a altura no que resta da janela. A proporção continua a
   ser 3/2 enquanto couber; quando não cabe, o palco fica mais panorâmico e o
   `object-fit: cover` da fotografia trata do enquadramento.

   As três variáveis são medidas pelo JS (ver `medirCoresModelo`). Os valores de reserva
   são os do computador: sem JavaScript a conta faz-se na mesma, com menos
   precisão. O último degrau é o respiro entre os comandos e a ilha de atalhos.

   `svh` e não `vh`: no telemóvel, `100vh` conta com a barra do browser que se
   esconde ao rolar. */
.model-colors__stage[data-pronto] {
    max-height: calc(100svh
        - var(--model-top, 140px)
        - var(--model-dock, 56px)
        - var(--model-colors-fora, 44px)
        - var(--model-space-5));
}

.model-colors__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .28s ease;
}

.model-colors__photo.is-visivel {
    opacity: 1;
}

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

@media (min-width: 900px) {
    .model-colors__stage { aspect-ratio: 16 / 9; }
}

/* Sem recorte quando é galeria (sem JavaScript): aí não há caixa de proporção
   fixa e a fotografia inteira é o que se quer ver. */
.model-colors__stage:not([data-pronto]) .model-colors__photo { object-fit: contain; }

/* Os ângulos. Quatro botões pequenos por baixo do palco. */
.model-colors__angles {
    display: flex;
    justify-content: center;
    gap: var(--model-space-1);
    margin: var(--model-space-2) 0 0 0;
    padding: 0;
    list-style: none;
}

/* O traço tem 3px; o BOTÃO tem 28. O alvo de toque não é o que se vê, é o que
   o dedo apanha, e um traço de 3px não se acerta com o polegar. */
.model-angle {
    position: relative;              /* contém o texto só-para-leitores */
    display: flex;
    align-items: center;
    width: 34px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.model-angle::before {
    width: 100%;
}

.model-angle::before {
    content: "";
    display: block;
    height: 3px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, .18);
    transition: background-color .2s ease;
}

/* `aria-pressed` e não `aria-selected`: o botão é de dois estados, e não um
   separador. Ver o cabeçalho do modelo.js. */
.model-angle[aria-pressed="true"]::before {
    background-color: var(--model-ink);
}

.model-angle:focus-visible {
    outline: 2px solid var(--model-red);
    outline-offset: 3px;
}

/* Os círculos. */
.model-colors__group + .model-colors__group {
    margin-top: var(--model-space-4);
}

.model-colors__legend {
    margin: 0 0 var(--model-space-2) 0;
    font-size: var(--model-text-micro);
    line-height: var(--model-leading-tight);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--model-grey);
}

.model-colors__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--model-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.model-color {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

/* O disco da tinta. Fica num pseudo-elemento para o anel de selecção poder
   crescer por fora sem mexer no tamanho do alvo de toque. */
.model-color::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--model-color-a);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

/* Bicolor: a segunda tinta é o tejadilho, e desenha-se como tal, o terço de
   cima do disco, não uma metade na diagonal. É assim que o carro é. */
.model-color--two-tone::before {
    background: linear-gradient(180deg,
        var(--model-color-b) 0%, var(--model-color-b) 34%,
        var(--model-color-a) 34%, var(--model-color-a) 100%);
}

.model-color::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color .2s ease;
}

.model-color[aria-pressed="true"]::after {
    border-color: var(--model-ink);
}

.model-color:focus-visible {
    outline: 2px solid var(--model-red);
    outline-offset: 2px;
}

/* O nome da cor escolhida. A altura é fixa para a linha de baixo não saltar
   quando se passa de «Cosmic Blue» para «Black Diamond + Sterling Silver». */
.model-colors__name {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 52px;
    margin: var(--model-space-3) 0 0 0;
}

.model-colors__name b {
    font-size: var(--model-text-strong);
    line-height: var(--model-leading-tight);
    font-weight: 600;
}

.model-colors__name span {
    font-size: var(--model-text-meta);
    line-height: var(--model-leading-medium);
    font-weight: 400;
    color: var(--model-grey);
}

@media (min-width: 900px) {
    /* `align-items: start` encostava os círculos ao topo, e o palco tem 640 px
       de altura: sobravam quatrocentos pixels de nada por baixo deles, e a
       secção lia-se como duas coisas soltas em vez de uma. Centrados, os
       círculos e o nome da cor ficam à altura do carro, que é onde o olho já
       está quando se decide carregar num deles. */
    .model-colors__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--model-space-4);
        align-items: center;
    }
    .model-colors__name { min-height: 0; }
}

/* Sem JavaScript, o palco não muda de fotografia. Em vez de um botão que não
   faz nada, o palco vira galeria: UMA fotografia por cor, em fila.
   Só o primeiro ângulo, as quarenta que o servidor escreve dariam vinte e
   sete mil pixels de página a quem já está a ter um mau dia. */
.model-colors__stage:not([data-pronto]) {
    aspect-ratio: auto;
}

.model-colors__stage:not([data-pronto]) .model-colors__photo {
    position: static;
    opacity: 1;
    height: auto;
}

.model-colors__stage:not([data-pronto]) .model-colors__photo:not([data-angulo="0"]) {
    display: none;
}

/* ── Modos de condução ───────────────────────────────────────────────────── */

.model-modes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--model-space-3);
    margin: var(--model-space-4) 0 0 0;
    padding: 0;
    list-style: none;
}

/* Os seis painéis de instrumentos vêm todos em 2160x1024, exactamente 2,11:1.
   A proporção fixa é a garantia de que continuam alinhados no dia em que a
   Mitsubishi publicar um sétimo modo noutra medida. */
.model-mode picture {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: var(--model-radius);
}

.model-mode img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.model-mode__name {
    display: block;
    margin: var(--model-space-2) 0 4px 0;
    font-size: var(--model-text-mini);
    line-height: var(--model-leading-tight);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.model-mode__text {
    margin: 0;
    font-size: var(--model-text-small);
    line-height: var(--model-leading-body);
    font-weight: 300;
    color: var(--model-text-on-dark);
}

@media (min-width: 620px) {
    .model-modes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
    .model-modes { grid-template-columns: repeat(3, 1fr); gap: var(--model-space-4); }
}

/* ── Ficha técnica ───────────────────────────────────────────────────────── */

.model-spec-sheet {
    padding: var(--model-space-5) var(--model-gutter);
    background-color: var(--model-paper);
    color: var(--model-ink);
    --model-red: #C50000;
    --model-eyebrow-color: #4f5457;
}

.model-spec-sheet__inner {
    margin: 0 auto;
    width: 100%;
    max-width: var(--model-max-width);
}

.model-group + .model-group {
    margin-top: var(--model-space-5);
}

.model-group__title {
    margin: 0 0 var(--model-space-2) 0;
    padding: 0 0 var(--model-space-1) 0;
    font-size: var(--model-text-mini);
    line-height: var(--model-leading-tight);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* Um traço fino, e não os dois pixéis de antes: o título já se destaca pelo
       peso e pelas maiúsculas, e a barra grossa fazia dele uma segunda régua
       numa página que já é toda feita de réguas. */
    border-bottom: 1px solid var(--model-rule);
}

/* A tabela larga rola dentro da sua própria caixa. Nunca é o corpo da página
   que rola de lado, uma página que anda para o lado num telemóvel dá a
   sensação de estar partida, mesmo quando não está. */
.model-table-box {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* E DIZ-SE que rola. Numa janela de 390px a tabela mostra duas das quatro
   versões e corta a direito na terceira: sem um sinal, quem lá está não sabe
   que há mais e não experimenta arrastar. O degradê é o sinal, e só aparece do
   lado em que HÁ mais para ver, um degradê permanente ao chegar ao fim é uma
   promessa por cumprir.
   A moldura existe só para o ancorar: um pseudo-elemento na própria caixa que
   rola andaria com o conteúdo, e o degradê saía do ecrã ao primeiro arrasto. */
.model-table-frame {
    position: relative;
}

/* Do lado DIREITO, um degradê: ali há conteúdo cortado, e o degradê diz que o
   corte é do ecrã e não da tabela.
   Do lado ESQUERDO, NÃO. Ali está a coluna do nome, colada, e um degradê por
   cima dela come as primeiras letras de cada linha, foi experimentado, e
   ficava «arras de tejadilho». O sinal desse lado é o que já se usa em qualquer
   folha de cálculo: uma sombra curta à direita da coluna presa. */
.model-table-frame::after {
    content: "";
    position: absolute;
    /* Acima de tudo o que é `sticky` na tabela: o cabeçalho das versões está no
       3 e a coluna do nome no 1. Sem isto, o degradê existia e ficava por baixo
       das células opacas, invisível exactamente onde tinha de aparecer. */
    z-index: 4;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    opacity: 0;
    /* UMA FAIXA. Eram duas enquanto o cabeçalho das versões era uma barra preta:
       um degradê branco por cima dele desenhava uma mancha clara no canto. Com
       o cabeçalho no mesmo branco do resto, a tabela é toda do mesmo fundo e um
       degradê só chega. */
    background: linear-gradient(to left, var(--model-paper), rgba(255, 255, 255, 0));
    transition: opacity .2s ease;
}

.model-table-frame[data-rola~="direita"]::after {
    opacity: 1;
}

.model-table-frame[data-rola~="esquerda"] .model-table th[scope="row"] {
    box-shadow: 6px 0 7px -5px rgba(0, 0, 0, .28);
}

@media (prefers-reduced-motion: reduce) {
    .model-table-frame::after { transition: none; }
}

/* O `styles.css` do site tem regras próprias para `table`, centra tudo, põe as
   células de cabeçalho em MAIÚSCULAS e, abaixo dos 600 px, desmonta a tabela em
   blocos empilhados com `content: attr(data-label)`. Isso serve as tabelas de
   duas colunas do site; não serve uma comparação de quatro versões, que
   empilhada repete o nome do equipamento quatro vezes e perde a comparação, que
   é a única razão para a tabela existir.
   Por isso estas regras são todas de classe (0-1-1 contra os 0-0-2 do site) e
   incluem o que anular. */
/* A LARGURA MINIMA DEPENDE DE QUANTAS VERSOES HA.
   Estava em `520px` fixos, e com `table-layout: fixed` isso dava, num telemóvel
   de 390 px e numa gama de quatro versões, 44 px por coluna: os regimes de
   rotação e o binário saíam cortados a meio, e uma ficha técnica com números
   cortados não é uma ficha técnica.
   Agora a tabela pede o espaço de que precisa (170 px para o nome da linha,
   112 por versão) e rola de lado quando não cabe, com a coluna do nome colada.
   O `--model-columns` vem do PHP, do `count($modelVersions)`. */
.model-table {
    position: relative;              /* contém o <caption> só-para-leitores */
    width: 100%;
    min-width: calc(170px + var(--model-columns, 2) * 112px);
    border: 0;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

/* O `styles.css` esconde TODOS os <caption> com `display: none`, e o que está
   escondido assim também não é lido por ninguém. O título da tabela volta a
   existir para quem ouve a página, escondido só à vista. */
.model-table caption {
    display: table-caption;
}

.model-table th,
.model-table td {
    position: relative;              /* contém o texto só-para-leitores */
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--model-rule);
    font-size: var(--model-text-small);
    line-height: var(--model-leading-medium);
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    vertical-align: top;
}

/* SEM RISCAS, E O SITE TAMBEM NAO AS POE. O `styles.css` da um fundo cinzento a
   toda a `table tr` do site, e tirar a regra daqui nao chegava: a risca voltava
   pela regra global. Esta linha desliga-a, e ganha por ser de classe. */
.model-table tr {
    background-color: transparent;
}

/* SEM RISCAS. Alternar o fundo das linhas era o que segurava o olho quando o
   cabecalho era uma barra preta e as celulas iam ao centro; com a linha fina a
   separar cada uma, a risca passa a ser um segundo separador a dizer o mesmo, e
   duas maneiras de separar a mesma coisa lem-se como ruido. E o desenho da
   tabela de comparacoes do /mitsubishi, que e a mesma leitura. */

.model-table th[scope="row"] {
    width: 46%;
    font-weight: 400;
    color: var(--model-text-on-light);
}

/* O valor nao precisa de negrito para se distinguir do rotulo: distingue-se
   pela cor, que e a tinta cheia contra o cinzento do rotulo. */
.model-table td {
    font-weight: 400;
    color: var(--model-ink);
}

/* O cabeçalho das versões cola ao topo enquanto se rola uma tabela de sessenta
   linhas: sem isto, a meio da lista já ninguém sabe que coluna é qual. */
/* O CABECALHO DEIXOU DE SER UMA BARRA PRETA. Era o que mais pesava na pagina:
   uma faixa cheia, em maiusculas e com entrelinha aberta, para dizer quatro
   nomes de versao. Fica o nome, a negrito, sobre o mesmo fundo da pagina, com a
   linha por baixo a fechar. O `background-color` continua opaco de proposito:
   e ele que impede o conteudo de transparecer quando o cabecalho cola ao topo. */
.model-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: var(--model-text-small);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--model-ink);
    background-color: var(--model-paper);
    border-bottom: 1px solid var(--model-ink);
}

/* O `styles.css` põe `table-layout: fixed` em todas as tabelas do site. Com
   isso, a largura das colunas sai da PRIMEIRA linha e só dela, uma largura
   escrita numa célula do corpo é ignorada. Daí estas irem no <thead>. */
/* Tudo à esquerda, como na tabela de comparações. Ao centro, cada coluna tinha
   o seu próprio eixo e os números de linhas seguidas não assentavam uns nos
   outros, que é a única coisa que uma tabela de comparação tem de fazer bem. */
.model-table--versions thead th:first-child { width: 40%; }
.model-table--versions thead th + th { width: 15%; text-align: left; }
.model-table--versions td { text-align: left; }

/* Telemóvel: a tabela continua tabela e rola de lado, mas a coluna do nome fica
   colada à esquerda. Sem ela, ao terceiro deslize já não se sabe de que
   equipamento é o ✓ que se está a ver. O `z-index` da primeira célula do
   cabeçalho tem de ser o maior: ela é sticky nos DOIS eixos e cruza-se com as
   outras duas camadas. */
@media (max-width: 767px) {
    .model-table th[scope="row"] {
        position: sticky;
        left: 0;
        z-index: 1;
        width: 170px;
        background-color: var(--model-paper);
        box-shadow: 1px 0 0 var(--model-rule);
    }

    .model-table tbody tr:nth-child(odd) th[scope="row"] {
        background-color: var(--model-stripe);
    }

    .model-table thead th:first-child {
        left: 0;
        z-index: 3;
    }

    /* Em px e não em percentagem: a percentagem resolvia contra a largura da
       tabela, que aqui é maior do que o ecrã, e a coluna do nome comia 302 px
       dos 390 disponíveis. */
    .model-table--versions thead th:first-child,
    .model-table--versions th[scope="row"] { width: 170px; }
    .model-table--versions thead th + th,
    .model-table--versions td { width: 112px; }
}

/* E anula-se o modo empilhado do site, que abaixo dos 600 px esconderia o
   cabeçalho e transformaria cada célula num bloco. */
@media screen and (max-width: 600px) {
    .model-table thead {
        position: static;
        clip: auto;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
    }

    .model-table tr {
        display: table-row;
        margin: 0;
        border-bottom: 0;
    }

    .model-table td {
        display: table-cell;
        font-size: var(--model-text-small);
        text-align: center;
        border-bottom: 1px solid var(--model-rule);
    }

    .model-table td::before { content: none; }
}

/* ── Lista de peças ──────────────────────────────────────────────────────────
   O que se mostra quando há nomes e descrições e mais nada: os acessórios de um
   modelo, por exemplo, que deixaram de trazer referência e preço. Uma tabela de
   uma coluna é uma lista com molduras a mais, e a moldura come o espaço do
   texto no telemóvel. Vive dentro do `.model-spec-sheet`, e é de lá que herda
   os tokens: não entra na lista dos blocos de primeiro nível. */
.model-list {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A linha por baixo, e não à volta: separa sem desenhar uma caixa por peça. */
.model-list__item {
    padding: var(--model-space-2) 0;
    border-bottom: 1px solid var(--model-rule);
}

.model-list__name {
    margin: 0;
    font-size: var(--model-text-strong);
    line-height: var(--model-leading-tight);
    font-weight: 600;
}

.model-list__text {
    margin: var(--model-space-1) 0 0 0;
    /* Numa só coluna a 1400px, uma frase de catálogo atravessava o ecrã todo. */
    max-width: 62ch;
    font-size: var(--model-text-small);
    line-height: var(--model-leading-body);
    font-weight: 300;
    color: var(--model-grey);
}

@media (min-width: 768px) {
    .model-list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--model-space-4);
    }
}

/* O ✓ e o, do equipamento. O símbolo é decorativo: quem ouve a página recebe
   o texto do .model-sr-only (visualmente escondido, não escondido do leitor). */
.model-yes,
.model-no {
    font-size: var(--model-text-base);
    line-height: 1;
}

.model-yes { color: var(--model-yes-color); }
.model-no { color: var(--model-meta-on-dark); }

/* O texto que só os leitores de ecrã ouvem.
   `position: absolute` sem um antepassado posicionado resolve contra o bloco
   inicial, e um <span> destes no fim de uma tabela de 520px dentro de uma
   caixa que rola punha a PÁGINA INTEIRA a andar para o lado no telemóvel
   (508px de conteúdo numa janela de 390). O <td> e o <th> passam a
   `position: relative` mais abaixo, e o span fica onde nasceu. */
.model-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.model-source {
    margin: var(--model-space-4) 0 0 0;
    font-size: var(--model-text-mini);
    line-height: var(--model-leading-body);
    font-weight: 400;
    color: var(--model-grey);
}

/* O `--model-grey` foi medido contra fundo CLARO: sobre preto da 3,25:1, e a nota
   de fonte e' texto de 12px. Numa seccao escura passa ao cinzento de fundo
   escuro (7,9:1). Vale para qualquer nota de fonte que aterre numa seccao preta. */
.model-section .model-source { color: var(--model-meta-on-dark); }
.model-section--light .model-source,
.model-section--white .model-source { color: var(--model-grey); }

@media (min-width: 768px) {
    .model-table th,
    .model-table td { padding: 14px 18px; }
}

/* ── Chamada para a acção ────────────────────────────────────────────────── */

/* Porque não é o `.model-section-separator` do site: as regras dele vivem todas
   dentro de `.model-intro-section` (`styles.css`, linha 2245) e fora dessa
   caixa a classe não tem estilo nenhum, o título saía a preto sobre preto e os
   botões encostados à esquerda. As páginas de entrada que o vêem certo têm uma cópia das regras
   na folha delas, e essa folha é da entrada: carregá-la aqui era carregar o CSS
   de outro módulo.
   Os BOTÕES continuam a ser os do site (`.bt-filled` / `.bt-outline`). */
.model-cta {
    padding: var(--model-space-5) var(--model-gutter);
    text-align: center;
    background-color: var(--model-cta-background);
    color: var(--model-paper);
}

.model-cta__title {
    margin: 0 auto;
    max-width: 700px;
    font-size: var(--model-text-title-2);
    line-height: var(--model-leading-tight);
    font-weight: 700;
    color: var(--model-paper);
}

.model-cta__text {
    margin: var(--model-space-2) auto 0 auto;
    max-width: 620px;
    font-size: var(--model-text-base);
    line-height: var(--model-leading-body);
    font-weight: 300;
    color: var(--model-text-on-dark);
}

/* Os botões em coluna no telemóvel e lado a lado a partir do tablet. Um
   `flex-wrap` com `gap` em vez das margens negativas do site: aqui há dois
   botões e nunca mais do que dois. */
.model-cta__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--model-space-1);
    margin: var(--model-space-2) 0 0 0;
}

.model-cta__buttons .bt-filled,
.model-cta__buttons .bt-outline {
    margin: 0 !important;
}

@media (min-width: 620px) {
    .model-cta__buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* ── Documentos ──────────────────────────────────────────────────────────── */

.model-files {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--model-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.model-files a {
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px var(--model-space-2);
    padding: var(--model-space-2);
    border: 1px solid var(--model-rule-on-dark);
    border-radius: var(--model-radius);
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}

.model-files a:hover {
    border-color: rgba(255, 255, 255, .4);
    background-color: rgba(255, 255, 255, .04);
}

.model-files a:focus-visible {
    outline: 2px solid var(--model-red);
    outline-offset: 3px;
}

.model-files i {
    grid-row: 1 / 3;
    font-size: 24px;    /* o ícone não é texto: mede-se pelo desenho */
    line-height: 1;
    color: var(--model-red);
}

.model-file__name {
    font-size: var(--model-text-strong);
    line-height: var(--model-leading-tight);
    font-weight: 600;
}

.model-file__note {
    font-size: var(--model-text-meta);
    line-height: var(--model-leading-medium);
    font-weight: 300;
    color: var(--model-meta-on-dark);
}

@media (min-width: 760px) {
    .model-files { grid-template-columns: repeat(3, 1fr); gap: var(--model-space-3); }
}

/* ── «Mais para ver» ─────────────────────────────────────────────────────── */

.model-more {
    padding: var(--model-space-5) var(--model-gutter);
    background-color: var(--model-ink);
    color: var(--model-paper);
}

.model-more__title {
    margin: 0 auto var(--model-space-4) auto;
    max-width: var(--model-max-width);
    font-size: var(--model-text-title-2);
    line-height: var(--model-leading-tight);
    font-weight: 600;
    text-align: center;
}

.model-more__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--model-space-3);
    margin: 0 auto;
    max-width: var(--model-max-width);
}

.model-card {
    display: block;
    overflow: hidden;
    border-radius: var(--model-radius);
    color: inherit;
    text-decoration: none;
    background-color: var(--model-card-bg);
}

/* Uma proporção só para os três cartões. As fotografias de origem vêm em 3:2 e
   em 2:1, deixadas em `height:auto`, as três colunas ficavam com alturas
   diferentes e os títulos desalinhados a meio da grelha. O recorte é do CSS,
   não da escolha do ficheiro: o `ol_img()` continua a declarar as medidas
   reais, ou a página saltava. */
.model-card picture {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.model-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.model-card:hover img { transform: scale(1.03); }

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

.model-card:focus-visible {
    outline: 2px solid var(--model-red);
    outline-offset: 3px;
}

.model-card__text {
    display: block;
    padding: var(--model-space-2) var(--model-space-2) var(--model-space-3) var(--model-space-2);
}

.model-card__title {
    display: block;
    font-size: var(--model-text-strong);
    line-height: var(--model-leading-tight);
    font-weight: 600;
}

.model-card__sub {
    display: block;
    margin: 4px 0 0 0;
    font-size: var(--model-text-meta);
    line-height: var(--model-leading-medium);
    font-weight: 300;
    color: var(--model-meta-on-dark);
}

@media (min-width: 700px) {
    .model-more__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Pastilhas ───────────────────────────────────────────────────────────── */

.model-pills__group + .model-pills__group { margin-top: var(--model-space-2); }

.model-pills__legend {
    margin: 0 0 var(--model-space-1) 0;
    font-size: var(--model-text-micro);
    line-height: var(--model-leading-tight);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--model-meta-on-dark);
}

.model-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--model-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.model-pill {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--model-rule-on-dark);
    border-radius: 999px;
    background: none;
    color: var(--model-text-on-dark);
    font-family: inherit;
    font-size: var(--model-text-meta);
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.model-pill:hover { border-color: rgba(255, 255, 255, .45); color: var(--model-paper); }

.model-pill[aria-pressed="true"] {
    border-color: #ffc700;
    background-color: rgba(255, 199, 0, .14);
    color: var(--model-paper);
}

.model-pill:focus-visible { outline: 2px solid var(--model-paper); outline-offset: 2px; }

/* ─────────────────────────────────────────────────────────────────────────────
   O ALTERNADOR, pastilhas que trocam a imagem e o texto por baixo
   ─────────────────────────────────────────────────────────────────────────────
   Serve qualquer conjunto de estados que se comparem entre si: modos híbridos,
   posições de um seletor, acabamentos de um interior. É sempre a mesma
   pergunta, «e se for este?», e por isso é sempre a mesma peça.

   As imagens estão TODAS no HTML, empilhadas em posição absoluta, e trocam por
   opacidade. Por isso o contentor precisa de proporção própria: sem ela, um
   filho absoluto não tem quem lhe dê altura e a caixa fecha-se a zero.
   ─────────────────────────────────────────────────────────────────────────── */

.model-switcher { margin-top: var(--model-space-4); }

.model-switcher__body {
    display: grid;
    gap: var(--model-space-3);
    margin-top: var(--model-space-3);
}

/* O chão das imagens. Os esquemas do guia vêm sobre BRANCO opaco e os painéis
   de instrumentos sobre PRETO: cada um leva o chão da sua cor, ou fica a
   flutuar sobre a secção com uma moldura que não é dele. */
.model-switcher__media {
    position: relative;
    width: 100%;
    aspect-ratio: 951 / 761;
    overflow: hidden;
    border-radius: var(--model-radius);
    background-color: var(--model-paper);
}

.model-switcher__photo {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
}

.model-switcher__photo.is-visivel { opacity: 1; }

.model-switcher__photo picture,
.model-switcher__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.model-switcher__short {
    margin: 0 0 var(--model-space-1) 0;
    font-size: var(--model-text-micro);
    line-height: var(--model-leading-tight);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--model-red);
}

.model-switcher__title {
    margin: 0;
    font-size: var(--model-text-title-2);
    line-height: var(--model-leading-title);
    font-weight: 700;
    letter-spacing: -.01em;
}

.model-switcher__note {
    margin: var(--model-space-3) 0 0 0;
    padding-top: var(--model-space-2);
    border-top: 1px solid var(--model-rule-on-dark);
    font-size: var(--model-text-mini);
    line-height: var(--model-leading-tight);
    font-weight: 300;
    color: var(--model-meta-on-dark);
}

.model-section--light .model-switcher__note,
.model-section--white .model-switcher__note {
    border-top-color: var(--model-rule);
    color: var(--model-grey);
}

/* O painel de instrumentos é largo e baixo (3:1). Espremido para metade da
   largura ficava ilegível, os nomes dos quatro modos têm de se ler NA
   fotografia, é esse o ponto. Fica de bordo a bordo, com o texto por baixo. */
/* No telemovel, o painel inteiro a 350px de largura punha o menu do modo EV,
   que e' o assunto, a ler-se com dificuldade. Recorta-se ao meio: a caixa fica
   com a proporcao do MENU e o `cover` mostra so' a parte central da fotografia,
   com as palavras ao dobro do tamanho. Os dois mostradores das pontas ficam de
   fora, e nao fazem falta nenhuma para o que aqui se explica. */
.model-switcher--panel .model-switcher__media {
    aspect-ratio: 660 / 396;
    background-color: #000000;
}

.model-switcher--panel .model-switcher__photo img { object-fit: cover; }

.model-switcher--panel .model-switcher__text { max-width: 760px; }

@media (min-width: 900px) {
    .model-switcher__body {
        grid-template-columns: 1.3fr 1fr;
        gap: var(--model-space-4);
        align-items: center;
    }
    .model-switcher--panel .model-switcher__body {
        grid-template-columns: 1fr;
        gap: var(--model-space-3);
    }
    .model-switcher--panel .model-switcher__media { aspect-ratio: 1200 / 396; }
    .model-switcher--panel .model-switcher__photo img { object-fit: contain; }
}

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

/* ── As pastilhas em fundo claro ─────────────────────────────────────────────
   A `.model-pill` nasceu para um seletor que vive em fundo preto.
   Numa secção clara os mesmos valores davam um contorno quase invisível e um
   texto cinzento-claro sobre cinzento-claro. Aqui a pastilha activa é preta e
   cheia: máximo contraste, e sem estrear uma cor só para isto.

   `.is-activo` é o estado que o JavaScript escreve; o `[aria-pressed]` é o do
   alternador. Dois idiomas de ARIA, um botão de dois estados, um
   separador entre painéis, com o mesmo aspecto, porque para quem vê são a
   mesma coisa. */
.model-pill.is-activo,
.model-pill[aria-pressed="true"],
.model-pill[aria-selected="true"] {
    border-color: #ffc700;
    background-color: rgba(255, 199, 0, .14);
    color: var(--model-paper);
}

.model-section--light .model-pill,
.model-section--white .model-pill {
    border-color: rgba(0, 0, 0, .28);
    color: var(--model-text-on-light);
}

.model-section--light .model-pill:hover,
.model-section--white .model-pill:hover {
    border-color: var(--model-ink);
    color: var(--model-ink);
}

.model-section--light .model-pill.is-activo,
.model-section--light .model-pill[aria-selected="true"],
.model-section--white .model-pill.is-activo,
.model-section--white .model-pill[aria-selected="true"] {
    border-color: var(--model-ink);
    background-color: var(--model-ink);
    color: var(--model-paper);
}

.model-section--light .model-pill:focus-visible,
.model-section--white .model-pill:focus-visible {
    outline-color: var(--model-ink);
}

/* ═════════════════════════════════════════════════════════════════════════════
   MOVIMENTO
   ═════════════════════════════════════════════════════════════════════════════
   Duas coisas, e só duas: revelar o que entra no ecrã, e deslocar um pouco as
   imagens de fundo ao rolar. Nada de entradas encadeadas em listas, nada de
   contadores a girar, nada que se mexa sem ajudar a perceber o que mudou.

   O MOVIMENTO É OPCIONAL. As regras que escondem estão presas a
   `.js-model-motion`, uma classe que o `modelo.js` só põe no elemento raiz
   quando o GSAP está de pé. Sem ele, ou com movimento reduzido, nada disto
   existe e a página aparece de uma vez. Não há uma segunda animação em CSS a
   duplicar a de JavaScript: duas implementações da mesma revelação divergem no
   dia em que alguém mexe numa e esquece a outra.
   ══════════════════════════════════════════════════════════════════════════ */

/* O estado ANTES de o observador chegar ao elemento. É a única regra que
   esconde, e cai toda se a classe não estiver lá. */
.js-model-motion [data-model-reveal] {
    opacity: 0;
}

.js-model-motion [data-model-reveal="linhas"] > *,
.js-model-motion [data-model-reveal="cortina"] > :first-child {
    opacity: 0;
}

/* O `data-model-reveal="linhas"` fica visível e são os filhos que se revelam: sem
   isto o bloco inteiro apareceria de uma vez e a escada não se via. */
.js-model-motion [data-model-reveal="linhas"] {
    opacity: 1;
}

/* Quem pediu menos movimento vê tudo, imediatamente. Vale mais do que a regra
   acima porque vem depois e tem a mesma especificidade. */
@media (prefers-reduced-motion: reduce) {
    .js-model-motion [data-model-reveal],
    .js-model-motion [data-model-reveal] > *,
    .js-model-motion [data-model-reveal="cortina"] > :first-child {
        opacity: 1 !important;  /* vence o `opacity` inline que o GSAP escreve */
        transform: none !important;
    }
}

/* A paralaxe. O JavaScript escreve `--model-parallax` e mais nada; a
   transformação é daqui. A escala dá a folga sem a qual deslocar a imagem
   descobria a borda do contentor. */
[data-model-parallax] > img,
[data-model-parallax] > picture img {
    transform: translate3d(0, var(--model-parallax, 0px), 0) scale(1.12);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    [data-model-parallax] > img,
    [data-model-parallax] > picture img {
        transform: none;
        will-change: auto;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   SECÇÕES DE DESTAQUE
   ═════════════════════════════════════════════════════════════════════════════
   Três formas de dar peso a uma ideia, para uma página não ser uma sequência de
   blocos todos com a mesma importância. Vêm do microsite do Pajero, onde foram
   desenhadas e medidas; aqui perdem a identidade dele e ficam com os tokens do
   kit, para servirem qualquer modelo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Faixa a toda a largura ───────────────────────────────────────────────────
   Uma fotografia que sai do bloco e ocupa a janela inteira. É o corte que
   separa dois capítulos de uma página e o que evita que se leia tudo como uma
   lista. */
.model-banner {
    position: relative;
    width: 100%;
    margin: var(--model-space-5) 0;
    overflow: hidden;
}

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

/* ── Painel: imagem de fundo com texto por cima ───────────────────────────────
   O texto assenta num véu medido, e não numa cor plana: um véu plano mata a
   fotografia toda, e o que estraga a leitura é o pedaço mais claro que calha
   por baixo de uma letra. Os valores são os mesmos que o herói usa, pela mesma
   razão e com a mesma medição. */
.model-panel {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 60vh;
    margin: var(--model-space-5) 0;
    overflow: hidden;
    isolation: isolate;
}

.model-panel__background {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.model-panel__background img,
.model-panel__background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.model-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .55) 0%,
        rgba(0, 0, 0, .18) 34%,
        rgba(0, 0, 0, .62) 100%);
}

.model-panel__text {
    position: relative;
    width: 100%;
    max-width: 640px;
    padding: var(--model-space-5) var(--model-gutter);
    color: var(--model-paper);
}

.model-panel__text .model-title,
.model-panel__text .model-eyebrow,
.model-panel__text .model-text {
    color: var(--model-paper);
}

/* ── Mosaico: uma imagem grande e duas pequenas ───────────────────────────────
   Serve para mostrar três pormenores sem lhes dar a mesma importância. Em
   telemóvel empilha, porque três colunas de 130px não são um mosaico, são um
   friso. */
.model-mosaic {
    display: grid;
    gap: var(--model-space-2);
    margin: var(--model-space-5) 0;
}

.model-mosaic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.model-mosaic__piece {
    overflow: hidden;
}

@media (min-width: 768px) {
    .model-mosaic {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .model-mosaic__piece:first-child {
        grid-row: span 2;
    }
}

/* ── Acessórios: a grelha da Loja dentro de um grupo ─────────────────────────
   A página de acessórios põe os cartões da Loja, tal e qual, dentro do
   `.model-group` do kit. */
.model-group .acv-grid {
    margin-top: clamp(16px, 1.6vw, 24px);
}

/* A ÚNICA COISA QUE SE CALA NO CARTÃO É A CATEGORIA. Na montra da Loja ela é
   necessária, porque a grelha é uma só e mistura tudo; aqui os cartões estão
   agrupados por categoria e o título do grupo já a diz, três centímetros acima.
   A mesma palavra duas vezes no mesmo bloco lê-se como erro. O cartão continua
   a ser o mesmo, com o mesmo markup: o que muda é a composição da página. */
.model-group .acv-grid .acv-card-cat {
    display: none;
}