/* =============================================================================
   ASX BLACK EDITION — folha própria do microsite /mitsubishi/asx/black-edition
   =============================================================================
   Tudo tem prefixo `abe-` e nada aqui toca fora do microsite. Os botões, os
   separadores (`.page-secondary-nav`) e o cabeçalho continuam a ser os do site:
   esta folha não os redefine, só lhes dá onde viver.

   A LINGUAGEM
   -----------
   A Mitsubishi assina os seus documentos com uma barra vermelha vertical à
   esquerda do título — está assim na Ficha de Produto ASX Black Edition MY26.5,
   página a página. É a assinatura que esta folha adopta: `.abe-titulo::before`.
   Não se inventou um motivo gráfico; usou-se o que a marca já usa.

   O vermelho NUNCA assina texto. Um #E60012 sobre a tinta dá 4,1:1 — passa em
   corpo grande e falha em corpo normal, e o texto pequeno desta página é
   precisamente onde vivem as notas legais. O vermelho é uma barra, um traço,
   um sublinhado de foco; o texto é branco, em três degraus medidos.

   REGRAS DA CASA QUE ESTA FOLHA CUMPRE
   ------------------------------------
   • Uma só fonte: a Inter do site (`--main-font-family`). Sem tipos importados.
   • Botões: manda o design system (`.bt-filled`, `.bt-outline`). Aqui só se
     define `.abe-link`, que é um link de texto e não um botão.
   • Mobile-first: o corpo da folha é o telemóvel; os `@media (min-width:)`
     acrescentam, nunca desfazem.
   • 12px é o texto mais pequeno desta folha — o mínimo que o site fixou.
   • Tudo em `rem`/`em` e `clamp()`. Nenhum tamanho de texto em pixels fixos.

   ORGANIZAÇÃO
   -----------
   01 Fichas técnicas (tokens)     07 Números
   02 Alicerces e grelha           08 Cores
   03 Tipografia                   09 Equipamento
   04 Herói                        10 Ficha técnica
   05 Cabeçalho das páginas        11 Cartões «Mais» e rodapé
   06 Blocos de conteúdo           12 Movimento e acessibilidade
   ============================================================================= */

/* ── 01 · FICHAS TÉCNICAS ─────────────────────────────────────────────────── */

.abe {
    /* Tinta. Um preto NEUTRO, e não o quente do Pajero: aquele carro é terra e
       poeira, este é laca e verniz. O fundo sobe um fio acima do #000 para o
       conteúdo não parecer colado ao fundo do browser, e as superfícies
       empilham-se em quatro degraus — mais do que isso ninguém distingue. */
    --abe-ink: #0A0A0B;
    --abe-ink-2: #121214;
    --abe-ink-3: #1A1A1D;
    --abe-ink-4: #24242A;

    /* Texto, em três degraus MEDIDOS contra o degrau mais claro (`--abe-ink-4`),
       que é onde vivem as tabelas e os cartões. Medir contra a base seria medir
       contra o fundo mais favorável e passar por engano:
         --abe-text     15,1:1 sobre a tinta   ·  12,4:1 sobre o degrau claro
         --abe-text-2    8,0:1                 ·   6,6:1
         --abe-text-3    5,8:1                 ·   4,8:1
       O mínimo da WCAG AA para texto normal é 4,5:1, e o terceiro degrau é o que
       assina as etiquetas, as unidades e as notas de rodapé — o texto mais
       pequeno da página, logo o que menos podia falhar. */
    --abe-text: #F4F4F5;
    --abe-text-2: #A9A9AF;
    --abe-text-3: #909097;

    /* Fios. Dois pesos: o de separar (fraco) e o de marcar (forte). */
    --abe-linha: rgba(255, 255, 255, .09);
    --abe-linha-2: rgba(255, 255, 255, .20);

    /* O vermelho da marca. Barras, traços e marcas gráficas — nunca texto.
       Ver o cabeçalho. */
    --abe-marca: #E60012;

    /* O anel de foco é um token à parte, e não o vermelho. Um foco não é
       decoração: é a única coisa que diz a quem navega por teclado onde está,
       e a 4,1:1 o vermelho não chegava. Branco cheio, a 15,1:1. */
    --abe-foco: #F4F4F5;

    /* Ritmo vertical. Uma só escala, usada em todo o lado. */
    --abe-r1: .5rem;
    --abe-r2: 1rem;
    --abe-r3: 1.5rem;
    --abe-r4: 2.5rem;
    --abe-r5: 4rem;
    --abe-r6: 6rem;

    /* Altura da ilha de atalhos do site. É medida pelo JS e escrita aqui; o
       valor abaixo é só o que vale antes de o JS correr. */
    --abe-ilha: 74px;

    /* Cantos. O carro é anguloso e a ficha oficial não tem um canto redondo;
       2px é o suficiente para não parecer um erro de renderização. */
    --abe-canto: 2px;

    background: var(--abe-ink);
    color: var(--abe-text);
    font-family: var(--main-font-family, 'Inter', system-ui, sans-serif);
    /* `clip` e não `hidden`: com `hidden`, os `position: sticky` lá dentro
       deixam de colar. */
    overflow-x: clip;
}

/* ── 02 · ALICERCES E GRELHA ──────────────────────────────────────────────── */

.abe *,
.abe *::before,
.abe *::after { box-sizing: border-box; }

.abe img,
.abe picture,
.abe video { display: block; max-width: 100%; }

.abe picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--abe-foco-img, center);
}

.abe a { color: inherit; }

.abe :focus-visible {
    outline: 2px solid var(--abe-foco);
    outline-offset: 3px;
}

/* O contentor. 1440px é o limite de conteúdo desta casa; o padding lateral
   cresce com o ecrã em vez de saltar em degraus. */
.abe-wrap {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(1.125rem, 5vw, 3.5rem);
}

.abe-seccao { padding-block: var(--abe-r5); }

@media (min-width: 768px) {
    .abe-seccao { padding-block: var(--abe-r6); }
}

.abe-seccao--fina { padding-block: var(--abe-r4); }

/* Um fio que separa secções sem lhes pôr uma caixa à volta. */
.abe-fio {
    border: 0;
    border-top: 1px solid var(--abe-linha);
    margin: 0;
}

/* Saltar para o conteúdo: visível só com o teclado. */
.abe-saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: .75rem 1.25rem;
    background: var(--abe-text);
    color: var(--abe-ink);
    font-size: .875rem;
    font-weight: 600;
}

.abe-saltar:focus {
    left: 1rem;
    top: 1rem;
}

/* ── 03 · TIPOGRAFIA ──────────────────────────────────────────────────────── */

.abe-etiqueta {
    display: block;
    margin: 0 0 var(--abe-r2);
    color: var(--abe-text-3);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* O título com a barra vermelha da Mitsubishi. */
.abe-titulo {
    position: relative;
    margin: 0 0 var(--abe-r3);
    padding-left: 1rem;
    font-size: clamp(1.75rem, 5.5vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
}

.abe-titulo::before {
    content: '';
    position: absolute;
    left: 0;
    top: .12em;
    bottom: .12em;
    width: 4px;
    background: var(--abe-marca);
}

.abe-titulo--grande { font-size: clamp(2.125rem, 8vw, 4.25rem); }

.abe-subtitulo {
    margin: 0 0 var(--abe-r2);
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.abe-texto {
    margin: 0 0 var(--abe-r2);
    max-width: 62ch;
    color: var(--abe-text-2);
    font-size: clamp(1rem, 1.9vw, 1.0625rem);
    line-height: 1.65;
}

.abe-texto:last-child { margin-bottom: 0; }

.abe-texto--forte { color: var(--abe-text); }

.abe-nota {
    margin: var(--abe-r2) 0 0;
    max-width: 78ch;
    color: var(--abe-text-3);
    font-size: .75rem;
    line-height: 1.6;
}

.abe-link {
    color: var(--abe-text);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--abe-linha-2);
    padding-bottom: 1px;
    transition: border-color .2s;
}

.abe-link:hover,
.abe-link:focus-visible { border-bottom-color: var(--abe-text); }

/* A fila de botões. `flex-wrap` porque no telemóvel dois botões lado a lado
   partem as palavras ao meio. */
.abe-accoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abe-r2);
    margin-top: var(--abe-r3);
}

/* ── 04 · O HERÓI DA ENTRADA ──────────────────────────────────────────────

   NÃO ESTÁ AQUI, E É DE PROPÓSITO.
   A entrada usa o herói do site (`.hero.model-hero`, `hero.css` mais o
   `_modelo/assets/css/modelo_heroi.css`), como o ASX, o Grandis e os outros
   modelos. O que aqui viveu era um segundo sistema, com palco próprio, três
   degradês por breakpoint e um véu que seguia o bloco de texto. Saiu a
   2026-09-04: uma edição especial do ASX não precisa do seu próprio herói, e o
   escurecimento passou a ser o do site em todas as páginas de modelo.

   A única coisa que se mantém desta edição é o alinhamento À ESQUERDA, e essa
   consegue-se sem CSS nenhum: basta não pôr `.center` no `.hero-container` nem
   no `.hero-content`.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 05 · CABEÇALHO DAS PÁGINAS ───────────────────────────────────────────── */

/* Um painel com fotografia por baixo do título. Mais baixo do que o herói: é
   uma página interior, não uma entrada. */
.abe-painel {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(58svh, 30rem);
    overflow: hidden;
    isolation: isolate;
}

/* O bloco de texto do painel. Esta regra vivia numa lista partilhada com a do
   herói da entrada, e foi-se com ela quando o herói passou a ser o do site: o
   painel ficou sem `padding-block` e o título encostava à barra de separadores.
   O véu que a acompanhava não volta, por decisão de 2026-09-04. */
.abe-painel__conteudo {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: var(--abe-r4);
}

.abe-painel__fundo {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.abe-painel__fundo picture,
.abe-painel__fundo img { width: 100%; height: 100%; }

/* O OVERLAY É O DO SITE, com as duas camadas: a plana a 0.5 e o gradiente de
   topo a 64%, que é o que o `.hero-overlay` dá a todos os heróis. O cabeçalho
   destas páginas tinha desenho próprio, com um topo mais curto (30%) e um
   degradê de baixo, e lia-se mais claro do que a entrada, que é o mesmo carro
   na página ao lado. O de baixo saiu com a decisão de 2026-09-04: nos heróis, o
   degradê é o de topo e mais nenhum. */
.abe-painel__fundo::before,
.abe-painel__fundo::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.abe-painel__fundo::before {
    background-color: rgba(10, 10, 11, .5);
}

.abe-painel__fundo::after {
    background: linear-gradient(180deg,
        rgba(10, 10, 11, 1) 0%,
        rgba(10, 10, 11, 0) 64%);
}

.abe-painel__titulo {
    margin: 0 0 var(--abe-r2);
    font-size: clamp(2rem, 7vw, 3.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.025em;
}

.abe-painel__sub {
    margin: 0;
    max-width: 52ch;
    color: var(--abe-text);
    font-size: clamp(1rem, 2.4vw, 1.1875rem);
    line-height: 1.55;
}

/* Migalhas: onde estou e como volto. */
.abe-migalhas {
    margin: 0 0 var(--abe-r2);
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    color: var(--abe-text-2);
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.abe-migalhas li + li::before {
    content: '/';
    margin-right: .5rem;
    color: var(--abe-text-3);
}

.abe-migalhas a { text-decoration: none; }

.abe-migalhas a:hover,
.abe-migalhas a:focus-visible { color: var(--abe-text); text-decoration: underline; }

/* ── 06 · BLOCOS DE CONTEÚDO ──────────────────────────────────────────────── */

/* Texto ao lado da imagem. No telemóvel empilha, e a imagem vem primeiro:
   quem chega a um bloco novo quer ver antes de ler. */
.abe-duo {
    display: grid;
    gap: var(--abe-r3);
    align-items: center;
}

.abe-duo__figura {
    margin: 0;
    background: var(--abe-ink-2);
    overflow: hidden;
    border-radius: var(--abe-canto);
}

.abe-duo__figura picture {
    aspect-ratio: var(--abe-racio, 3 / 2);
}


@media (min-width: 860px) {
    .abe-duo {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 5vw, 4.5rem);
    }
    /* A inversão é só no computador: no telemóvel a ordem visual é sempre
       imagem → texto, e trocá-la a meio da página confundia a leitura. */
    .abe-duo--trocado .abe-duo__figura { order: 2; }
}

/* Uma tira de cartões. `auto-fit` com um mínimo: o número de colunas sai da
   largura disponível, e não de pontos de quebra escritos à mão. */
.abe-grelha {
    display: grid;
    gap: var(--abe-r3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.abe-cartao {
    display: flex;
    flex-direction: column;
    background: var(--abe-ink-2);
    border: 1px solid var(--abe-linha);
    border-radius: var(--abe-canto);
    overflow: hidden;
}

.abe-cartao__figura {
    margin: 0;
    background: var(--abe-ink-3);
}

.abe-cartao__figura picture { aspect-ratio: var(--abe-racio, 3 / 2); }

.abe-cartao__corpo {
    padding: var(--abe-r3);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.abe-cartao__titulo {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.abe-cartao__texto {
    margin: 0;
    color: var(--abe-text-2);
    font-size: .9375rem;
    line-height: 1.6;
}

/* Uma imagem que atravessa a página inteira, sem caixa. */
.abe-larga picture {
    aspect-ratio: var(--abe-racio, 21 / 9);
    background: var(--abe-ink-2);
}

@media (max-width: 599px) {
    /* Numa fotografia panorâmica a 21:9 vista em 360 px de largura, o carro
       fica com 150 px de altura e não se vê nada. No telemóvel aperta-se para
       3:2 e deixa-se o `object-fit` recortar. */
    .abe-larga picture { aspect-ratio: 3 / 2; }
}

/* ── 07 · NÚMEROS ─────────────────────────────────────────────────────────── */

.abe-numeros {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    background: var(--abe-linha);
    border: 1px solid var(--abe-linha);
    border-radius: var(--abe-canto);
    overflow: hidden;
    list-style: none;
}

@media (min-width: 700px) { .abe-numeros { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .abe-numeros { grid-template-columns: repeat(6, 1fr); } }

.abe-numero {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: var(--abe-r3) var(--abe-r2);
    background: var(--abe-ink-2);
}

.abe-numero__valor {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    font-size: clamp(1.75rem, 5vw, 2.375rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    /* Algarismos de largura fixa: numa fila de seis números, os que mudam de
       largura fazem a linha dançar. */
    font-variant-numeric: tabular-nums;
}

.abe-numero__unidade {
    color: var(--abe-text-3);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
}

.abe-numero__rotulo {
    color: var(--abe-text-3);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ── 08 · CORES ───────────────────────────────────────────────────────────── */

.abe-cores { display: grid; gap: var(--abe-r3); }

.abe-cores__palco {
    position: relative;
    /* O palco não acompanha a largura do contentor até aos 1440px. Os renders
       são de 1200 px e o carro ocupa 77 % da largura deles: esticados a 1440,
       a caixa passava de 800 px de altura e o carro ficava a nadar lá dentro,
       com mais fundo preto do que automóvel. 62rem é a largura a que o carro
       fica com o tamanho a que se lê um automóvel numa página. */
    width: 100%;
    max-width: 62rem;
    margin-inline: auto;
    background: var(--abe-ink-2);
    border: 1px solid var(--abe-linha);
    border-radius: var(--abe-canto);
    overflow: hidden;
}

/* A caixa NÃO muda de altura entre cores. As imagens vêm todas da mesma janela
   de recorte (ver asx_be_media_build.py), mas a da quinta cor é mais pequena —
   551 px em vez de 1200 — e sem uma proporção fixa aqui a página saltava ao
   trocar de círculo. O `object-fit: contain` mostra o carro inteiro; `cover`
   cortava-lhe as rodas. */
.abe-cores__vista {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid;
}

.abe-cores__vista picture {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    /* Só a imagem activa se vê. A transição é de opacidade e não de
       `display`: trocar `display` corta a transição e a imagem aparece de
       repente. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease;
}

.abe-cores__vista picture img { object-fit: contain; }

.abe-cores__vista picture.is-ativa {
    opacity: 1;
    visibility: visible;
}

/* Sem JS não há troca, e nesse caso mostram-se todas empilhadas seria ilegível.
   A primeira fica visível e as outras ficam onde estão: a lista de círculos
   transforma-se em âncoras que não fazem nada, e por isso esconde-se. */
.abe-cores:not(.is-pronta) .abe-cores__vista picture:first-child {
    opacity: 1;
    visibility: visible;
}

.abe-cores:not(.is-pronta) .abe-cores__angulos { display: none; }

.abe-cores__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--abe-r2);
}

.abe-cores__nome {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.abe-cores__preco {
    display: block;
    margin-top: .125rem;
    color: var(--abe-text-3);
    font-size: .8125rem;
    font-weight: 400;
}

/* Os círculos. 44px de alvo — o mínimo confortável para um dedo — com o disco
   de cor a 34px lá dentro. */
.abe-cores__lista {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.abe-cor {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.abe-cor__disco {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* DOIS contornos, e ambos fazem falta. TRÊS das cinco cores desta gama são
       pretas ou quase, e um disco de #141516 sobre uma tinta de #0A0A0B é um
       buraco: sem contorno não se vê que ali está um botão. O de dentro (0.42)
       desenha a borda do disco; o de fora (0.10) separa-o do fundo mesmo quando
       o disco é branco e o anel de dentro se perde nele. */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .42),
        0 0 0 1px rgba(255, 255, 255, .10);
    /* Bicolor: o tejadilho é a metade de cima. Não é decoração — é o que
       distingue «Sunrise Red» de «Sunrise Red + Onyx Black», que de outro modo
       seriam dois círculos vermelhos iguais. */
    background:
        linear-gradient(to bottom,
            var(--abe-cor-2, var(--abe-cor-1)) 0 38%,
            var(--abe-cor-1) 38% 100%);
}

.abe-cor::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: border-color .18s;
}

.abe-cor:hover::after { border-color: var(--abe-linha-2); }

.abe-cor[aria-pressed="true"]::after { border-color: var(--abe-text); }

/* Os ângulos: quatro botões de texto, discretos. */
.abe-cores__angulos {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.abe-angulo {
    /* 44 px de altura mínima: é o alvo confortável para um dedo, e estes
       botões vivem numa fila onde é fácil acertar no vizinho. No computador o
       `padding` já lá chegava; no telemóvel ficavam a 34, e foi a bateria de
       verificação que os apanhou. */
    min-height: 44px;
    padding: .625rem .875rem;
    background: none;
    color: var(--abe-text-3);
    border: 1px solid var(--abe-linha);
    border-radius: var(--abe-canto);
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .18s, border-color .18s;
}

.abe-angulo:hover { color: var(--abe-text); border-color: var(--abe-linha-2); }

.abe-angulo[aria-pressed="true"] {
    color: var(--abe-ink);
    background: var(--abe-text);
    border-color: var(--abe-text);
}

.abe-angulo[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

/* ── 09 · EQUIPAMENTO ─────────────────────────────────────────────────────── */

.abe-equipa { display: grid; gap: var(--abe-r4); }

.abe-equipa__grupo { margin: 0; }

.abe-equipa__nome {
    display: flex;
    align-items: baseline;
    gap: .625rem;
    margin: 0 0 var(--abe-r2);
    padding-bottom: .625rem;
    border-bottom: 1px solid var(--abe-linha-2);
    font-size: 1.125rem;
    font-weight: 600;
}

.abe-equipa__conta {
    color: var(--abe-text-3);
    font-size: .8125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.abe-equipa__lista {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 900px) {
    .abe-equipa__lista { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); }
}

.abe-equipa__item {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: .625rem;
    padding-block: .875rem;
    border-bottom: 1px solid var(--abe-linha);
}

/* O visto. É um pseudo-elemento e não um caractere no HTML: um leitor de ecrã
   não tem nada a ganhar em ouvir «marca de verificação» quarenta e cinco vezes
   seguidas numa lista que já se chama «de série». */
.abe-equipa__item::before {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .1875rem;
    background: currentColor;
    color: var(--abe-text-2);
    -webkit-mask: var(--abe-visto) center / 1rem 1rem no-repeat;
    mask: var(--abe-visto) center / 1rem 1rem no-repeat;
}

.abe {
    --abe-visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 5.7 9 17l-5.3-5.3 1.4-1.4L9 14.2l9.9-9.9z'/%3E%3C/svg%3E");
}

.abe-equipa__titulo {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.45;
}

.abe-equipa__texto {
    margin: .25rem 0 0;
    color: var(--abe-text-2);
    font-size: .875rem;
    line-height: 1.6;
}

/* A marca dos itens exclusivos da edição. */
.abe-marca-edicao {
    display: inline-block;
    margin-left: .5rem;
    padding: .0625rem .375rem;
    border: 1px solid var(--abe-marca);
    border-radius: var(--abe-canto);
    color: var(--abe-text);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    vertical-align: .1em;
    white-space: nowrap;
}

/* ── 10 · FICHA TÉCNICA ───────────────────────────────────────────────────── */

.abe-ficha { display: grid; gap: var(--abe-r4); }

.abe-ficha__grupo { margin: 0; }

.abe-ficha__nome {
    margin: 0 0 var(--abe-r1);
    padding-bottom: .625rem;
    border-bottom: 1px solid var(--abe-linha-2);
    font-size: 1.125rem;
    font-weight: 600;
}

.abe-ficha__nota {
    margin: .75rem 0 0;
    color: var(--abe-text-3);
    font-size: .8125rem;
    line-height: 1.6;
}

.abe-ficha__lista { margin: 0; }

.abe-ficha__linha {
    display: grid;
    gap: .125rem .75rem;
    padding-block: .8125rem;
    border-bottom: 1px solid var(--abe-linha);
}

.abe-ficha__chave {
    margin: 0;
    color: var(--abe-text-3);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.abe-ficha__valor {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
    .abe-ficha__linha {
        grid-template-columns: minmax(12rem, 2fr) 3fr;
        align-items: baseline;
    }
    .abe-ficha__chave { text-transform: none; letter-spacing: 0; font-size: .9375rem; font-weight: 400; }
}

/* ── 11 · CARTÕES «MAIS» E RODAPÉ ─────────────────────────────────────────── */

.abe-mais {
    padding-block: var(--abe-r5);
    border-top: 1px solid var(--abe-linha);
}

.abe-mais__titulo {
    margin: 0 0 var(--abe-r3);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--abe-text-3);
}

.abe-mais__lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--abe-r2);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 860px) {
    .abe-mais__lista { grid-template-columns: repeat(4, 1fr); }
}

.abe-mais__link {
    display: grid;
    gap: .625rem;
    text-decoration: none;
}

.abe-mais__moldura {
    display: block;
    overflow: hidden;
    background: var(--abe-ink-2);
    border-radius: var(--abe-canto);
}

.abe-mais__moldura picture {
    aspect-ratio: 4 / 3;
    transition: transform .4s ease;
}

.abe-mais__link:hover .abe-mais__moldura picture,
.abe-mais__link:focus-visible .abe-mais__moldura picture { transform: scale(1.04); }

.abe-mais__nome {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
}

/* O bloco de pedido, no fim de cada página. */
.abe-pedido {
    padding-block: var(--abe-r5);
    background: var(--abe-ink-2);
    border-top: 1px solid var(--abe-linha);
}

.abe-pedido__titulo {
    margin: 0 0 var(--abe-r2);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.abe-legal {
    padding-block: var(--abe-r4);
    border-top: 1px solid var(--abe-linha);
    color: var(--abe-text-3);
    font-size: .75rem;
    line-height: 1.65;
}

.abe-legal p { margin: 0 0 .625rem; max-width: 90ch; }
.abe-legal p:last-child { margin-bottom: 0; }

/* ── 12 · MOVIMENTO E ACESSIBILIDADE ──────────────────────────────────────── */

/* A entrada dos blocos. É a única animação da folha, e é feita por uma classe
   que o JS acrescenta quando o bloco chega ao ecrã. Sem JS, `.abe-entra` nunca
   ganha `.is-dentro` — e por isso o estado de repouso é o VISÍVEL, com o JS a
   esconder o que vai animar. Ao contrário, uma falha do JS deixava a página em
   branco. */
.abe-entra { will-change: auto; }

.abe--anima .abe-entra {
    opacity: 0;
    transform: translateY(12px);
}

.abe--anima .abe-entra.is-dentro {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease, transform .55s ease;
}

@media (prefers-reduced-motion: reduce) {
    .abe *,
    .abe *::before,
    .abe *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .abe--anima .abe-entra { opacity: 1; transform: none; }
    .abe-mais__link:hover .abe-mais__moldura picture { transform: none; }
}

.abe-so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}