/* =============================================================================
   Pajero 2027, folha própria do microsite  /mitsubishi/pajero
   =============================================================================
   Substitui o `pajero_teaser.css` (239 KB do bundle da Mitsubishi, com os
   seletores originais prefixados à mão). Aqui não há nada herdado: o vocabulário
   é nosso, tem prefixo `pj-` e não toca em nada fora do microsite.

   A LINGUAGEM
   -----------
   O Pajero tem um instrumento que o define, o Triple Multi Meter, herdado dos
   ralis: altitude, inclinação, rumo. A página fala essa língua. Fios de 1px com
   marcas de escala, etiquetas maiúsculas de 12px muito espaçadas, números
   grandes com a unidade pequena ao lado, valores em algarismos de largura fixa.
   Nada de cantos redondos generosos: o carro é direito e a página também.

   REGRAS DA CASA QUE ESTA FOLHA CUMPRE
   ------------------------------------
   • Uma só fonte: a Inter do site (`--main-font-family`). Sem tipos importados.
   • Botões: o design system manda (`.bt-filled`, `.bt-outline`). Aqui só se
     define o `.pj-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 que aparece nesta folha. Não é uma preferência:
     é o mínimo que o site fixou em `default/hero.css`, no dia em que o texto
     legal da homepage subiu de 9px para 12px. As etiquetas de instrumento
     começaram a 11px e subiram; continuam a ler-se como etiquetas por serem
     maiúsculas e muito espaçadas, não por serem minúsculas.
   • Tudo em `rem`/`em` e `clamp()`. Não há um único tamanho fixo de texto.

   ORGANIZAÇÃO
   -----------
   01 Fichas técnicas (tokens)      06 Leitura (números e fichas)
   02 Alicerces e grelha            07 Galerias
   03 Tipografia                    08 Cronologia
   04 Escala e fios                 09 Filme e janela modal
   05 Herói (vídeo único)         10 Movimento (GSAP) e acessibilidade
   ============================================================================= */

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

.pj {
    /* Tinta. O preto do site é #000; aqui o fundo sobe um fio para o conteúdo
       não parecer colado ao fundo do browser, e as superfícies empilham-se em
       três degraus só, mais do que isso ninguém distingue.

       QUENTE, E NÃO FRIA. Começou em #08080A, que tem mais azul do que vermelho:
       um preto de ecrã. O Jorge pediu fundos mais convidativos, e um preto frio
       é exactamente o contrário, endurece a página e faz a fotografia parecer
       recortada. Estes têm o vermelho à frente, como o couro e o metal escovado
       de um interior caro, e sobem um grau: a luminância da base passou de
       0,0025 para 0,0034. Não é uma diferença que se aponte; é uma diferença
       que se sente ao fim de dois minutos de leitura. */
    --pj-ink: #0C0B09;
    --pj-ink-2: #141210;
    --pj-ink-3: #1C1A17;
    --pj-ink-4: #262320;

    /* Texto quente: o branco puro sobre preto arde. #F2F0ED é branco com um
       grão de areia dentro, que é onde este carro vive.
       Os três degraus foram medidos contra `--pj-ink`, e não escolhidos a olho:
         --pj-text    17,3:1
         --pj-text-2   8,0:1
         --pj-text-3   5,8:1
       O terceiro começou em #706B65, que dava 3,8:1. Ficava bonito no escritório
       e ilegível ao sol, e é ele que assina TODAS as etiquetas de instrumento,
       as unidades dos números e as notas de rodapé, o texto mais pequeno da
       página inteira, logo o que menos podia falhar. O mínimo da WCAG AA para
       texto normal é 4,5:1.

       E MEDE-SE CONTRA O FUNDO MAIS CLARO, não contra a base. O `--pj-text-3`
       estava em #89847E: 5,4:1 sobre `--pj-ink`, que passava, mas 4,4:1 sobre
       `--pj-ink-4`, que não passa, e é justamente sobre os degraus claros que
       vivem as tabelas e os cartões onde este tom assina. Ninguém tinha dado por
       isso porque a conta fora feita uma vez, contra o fundo mais escuro. Agora
       o mínimo dos quatro é que manda: 4,62:1. */
    --pj-text: #F3F0EA;
    --pj-text-2: #ABA49A;
    --pj-text-3: #918B80;

    /* Fios. Dois pesos: o de separar (fraco) e o de marcar (forte). */
    --pj-line: rgba(255, 255, 255, .09);
    --pj-line-2: rgba(255, 255, 255, .18);

    /* Acento. Era um laranja (#F26A1B), herdado do teaser de Agosto. Saiu a
       pedido do Jorge, e o que entrou não foi outra cor escolhida a olho.

       UM ACENTO TEM DE SE DESTACAR DE DUAS COISAS: do fundo, para se ver, e do
       CORPO DO TEXTO, para significar alguma coisa. A primeira tentativa foi um
       champanhe claro (#D6C9B4), 12,2:1 sobre a tinta, um brilho lindo, e
       1,43:1 contra o texto. Ou seja: deixava de ser um acento e passava a ser
       texto com outro nome. Mediu-se, e caiu.

       O taupe fica a 15 % de saturação, longe de qualquer coisa que se pareça
       com laranja, e nos números que interessam:
         7,1:1  sobre a tinta          (o cobre dava 6,5)
         5,7:1  sobre o degrau claro   (o cobre dava 5,3)
         2,43:1 contra o corpo         (o cobre dava 2,69)
       Faz o mesmo trabalho, com metade do ruído.

       O FOCO É UM TOKEN À PARTE, e não o acento. Um anel de foco não é
       decoração: é a única coisa que diz a quem navega por teclado onde está.
       Estava no laranja, a 6,5:1 sobre a tinta; passou ao texto cheio, a
       17,3:1. Foi a paleta a ficar mais sóbria e o foco a ficar mais visível.

       (Saiu também um `--pj-bronze` que estava declarado e nunca foi usado.) */
    --pj-acento: #A8998A;
    --pj-acento-suave: rgba(168, 153, 138, .16);
    /* O ANEL DE FOCO. Chamava-se `--pj-foco`, e havia um segundo `--pj-foco`
       escrito em linha pelo `pj_img()` com um `object-position` lá dentro. Como
       o `.pj` é antepassado de tudo, o `var(--pj-foco, 50% 50%)` do
       enquadramento nunca caía no valor de reserva: herdava esta cor, que é
       inválida como posição, e só por sorte o browser revertia para o meio.
       E ao contrário: dentro de um elemento com o enquadramento escrito em
       linha, o anel de foco ficava com uma cor inválida.
       Dois trabalhos, dois nomes. */
    --pj-foco-anel: #F3F0EA;

    /* Ritmo vertical. Uma só escala, usada em todo o lado. */
    --pj-s1: .25rem;
    --pj-s2: .5rem;
    --pj-s3: .75rem;
    --pj-s4: 1rem;
    --pj-s5: 1.5rem;
    --pj-s6: 2rem;
    --pj-s7: 3rem;
    --pj-s8: 4.5rem;
    --pj-s9: 6.5rem;

    /* Espaço entre secções: cresce com o ecrã, mas nunca colapsa no telemóvel. */
    --pj-secao: clamp(4rem, 9vw, 9rem);

    /* Largura da coluna de conteúdo e a margem que a segura nas bordas. */
    --pj-max: 1440px;
    --pj-gutter: clamp(1.25rem, 5vw, 4rem);

    /* Cantos. 2px é o máximo: o carro é direito. */
    --pj-raio: 2px;

    /* Curvas. Uma para entradas, uma para saídas. */
    --pj-ease: cubic-bezier(.22, .61, .36, 1);
    --pj-ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

.pj {
    position: relative;
    background: var(--pj-ink);
    color: var(--pj-text);
    font-family: var(--main-font-family);
    /* `clip` e não `hidden`: os elementos com `position:sticky` lá dentro
       continuam a funcionar, o que com `overflow:hidden` deixaria de acontecer. */
    overflow-x: clip;
}

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

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

/* O RESET DOS PARÁGRAFOS VAI DENTRO DE `:where()`, e a razão importa.
   Escrito como `.pj p`, este reset vale 0-1-1 e ganhava a `.pj-eyebrow`, que
   vale 0-1-0. Resultado: a margem inferior que a sobrancelha declara nunca
   chegou a existir, e as 102 sobrancelhas das nove páginas estavam coladas ao
   título que anunciam. Um reset não deve competir com os componentes que vêm a
   seguir: `:where()` não conta para a especificidade e devolve-lhes a decisão. */
.pj :where(p) {
    margin: 0;
}

/* O RITMO ENTRE BLOCOS DE TEXTO, por omissão.
   ─────────────────────────────────────────────────────────────────────────
   Com o reset acima a zerar as margens, dois blocos de texto seguidos só
   ficavam separados se alguém escrevesse a margem à mão na view. Onde essa
   margem faltava, o texto colava: na /interior, um parágrafo nascia agarrado à
   lista das seis leituras do Multi Meter.

   O `.pj` à frente é o que empata com o reset (0-1-0); vindo depois, ganha. Os
   nomes vão em `:where()` para não somarem nada: um estilo em linha ou uma
   regra de componente continua a decidir por cima disto sem precisar de
   `!important`. É um chão, não uma imposição. */
.pj :where(.pj-body, .pj-lead, .pj-lista, .pj-nota)
+ :where(.pj-body, .pj-lead, .pj-lista, .pj-nota) {
    margin-top: var(--pj-s4);
}

/* A coluna. `--pj-gutter` de cada lado, nunca mais larga do que `--pj-max`. */
.pj-wrap {
    width: 100%;
    max-width: calc(var(--pj-max) + var(--pj-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--pj-gutter);
}

/* Coluna estreita, para texto corrido: 62 caracteres é onde o olho ainda
   encontra o início da linha seguinte sem se perder. */
.pj-wrap.is-narrow {
    max-width: 62ch;
    margin-inline: auto;
}

/* Sangria: sai da coluna e ocupa o ecrã todo. Usa-se em fotografias que têm de
   respirar e nas secções escuras que separam capítulos. */
.pj-bleed {
    width: 100%;
    margin-inline: 0;
}

/* NENHUMA FOTOGRAFIA PASSA DO ECRÃ.
   ─────────────────────────────────────────────────────────────────────────
   As de bordo a bordo mediam 960 px de altura contra os 760 de ecrã útil que
   sobram depois do cabeçalho e da barra de separadores; a do atrelado, numa
   coluna de 8, media 908. Quem chegava a uma delas via meia fotografia, e nada
   lhe dizia que havia mais por baixo.

   O travão é o mesmo da galeria e do selector de cores: `100svh` menos o que
   está colado ao ecrã. `--pj-topo` e `--pj-rodape` são medidos pelo
   `pajero.js`; os valores de reserva são os do computador.

   `object-fit: cover` para a fotografia continuar a preencher a caixa quando o
   travão morde, em vez de deixar ver o que está por trás. */
/* Descendente e não filho directo: a fotografia do atrelado vive dentro de um
   `<div>` com paralaxe, e um `>` deixava-a de fora. */
.pj-bleed img,
.pj-bleed video,
.pj-figura img,
.pj-figura video {
    max-height: calc(100svh - var(--pj-topo, 140px) - var(--pj-rodape, 56px));
    object-fit: cover;
}

/* ── A ESCALA TIPOGRÁFICA DO TEXTO CORRENTE ──────────────────────────────
   QUATRO degraus, e só quatro:

       12px  .75rem      etiquetas, sobretítulos, notas de instrumento
       14px  .875rem     meta, legendas, rótulos, ligações pequenas
       16px  1rem        corpo e valores
       19px  1.1875rem   entradas e subtítulos

   Havia SETE entre os 13 e os 19, 13, 14, 15, 16, 17, 18 e 19, que não é uma
   escala, é uma rampa de um pixel de cada vez. Ninguém distingue um rótulo de
   14 de um valor de 15; o que se nota é a hesitação. E cada degrau a mais é uma
   decisão que alguém tem de voltar a tomar no dia em que acrescentar um bloco.

   O CORPO É FIXO, e não fluido. Estava em `clamp(.9375rem, 1.05vw, 1.0625rem)`,
   ou seja, entre 15 e 17 conforme a janela. Nenhum leitor vê essa diferença, e
   16px é o tamanho em que a Web toda leu melhor durante vinte anos. A fluidez
   fica para os títulos, onde meia dúzia de pixels muda mesmo a página.

   Os 12px são o mínimo desta casa e não se descem. Ver o `default/hero.css`.

   E ACIMA DO CORPO, a mesma disciplina. Os títulos são todos `clamp()`, e a
   rampa repetia-se nos dois extremos: pisos de 17, 17, 17, 18, 18 e 20 no
   telemóvel, tectos de 21, 22, 22, 24, 30 e 32 no ecrã grande. Sete por cento
   de diferença não se vê, sente-se como indecisão. A escada ficou

       18px → 22px → 26px → 32px → 38px → 44px → 64px → 84px → 120px

   com saltos entre 1,16 e 1,45. Um `.pj-h4` e um `.pj-lead` partilham os 22:
   distinguem-se pelo peso e pela cor, que é como se distinguem numa página
   impressa há quinhentos anos.

   QUEM PARTILHA UM DEGRAU PARTILHA O COEFICIENTE `vw`. O `.pj-h4` tinha 1,5vw
   e o `.pj-lead` 1,55vw, com o mesmo piso e o mesmo tecto: a 1440px aterravam
   em 21,6 e em 22, e voltava a haver dois degraus a dois por cento um do outro
   sem ninguém os ter escrito. Um degrau só é um degrau se for o mesmo em toda a
   largura da janela. */

/* ── Regra-base das imagens ──────────────────────────────────────────────
   UMA IMAGEM RESPONDE SEMPRE EM ALTURA. Sem isto, o `max-width: 100%` que o
   site aplica a tudo encolhe a LARGURA para caber no contentor e deixa a altura
   no valor do atributo `height`, e a fotografia sai esticada.

   Não é hipótese: o `perfil-estudio` da entrada, o `tablier` do interior, as
   `rochas` da tecnologia e o `perfil-cotado` da ficha técnica estavam servidos
   a 1440x960 dentro de uma caixa de 1440x1707. Quarenta e quatro por cento de
   distorção, num carro visto de perfil, que é onde ela mais se nota. Escapou
   porque as regras `height: auto` estavam em `.pj-figura` e no herói antigo,
   e estas quatro vivem em `.pj-bleed`, que não tinha nenhuma.

   FICA AQUI, NO INÍCIO, de propósito. É uma base, e as regras que impõem uma
   proporção com `object-fit: cover` (painéis, cartões, mosaico, galerias) têm a
   mesma especificidade que esta, (0,1,1), por isso ganham por virem depois.
   Mover este bloco para baixo desfaz todas elas em silêncio. */
.pj img {
    max-width: 100%;
    height: auto;
}

.pj-secao {
    padding-block: var(--pj-secao);
}

.pj-secao.is-tight {
    padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* «Sem respiro em cima» não quer dizer colado: a seguir a uma fotografia de
   bordo a bordo, um título encostado à imagem lê-se como legenda dela. Fica um
   degrau da escala, que é o suficiente para separar sem abrir um capítulo. */
.pj-secao.is-flush-top {
    padding-top: var(--pj-s6);
}

.pj-secao.is-flush-bottom {
    padding-bottom: 0;
}

/* Grelha de 12. No telemóvel é sempre uma coluna; a partir dos 768px a grelha
   entra e as classes `.pj-col-*` passam a valer. */
.pj-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pj-s6) var(--pj-s5);
}

/* A COLUNA CURTA AO LADO DA COLUNA ALTA.
   ─────────────────────────────────────────────────────────────────────────
   Um título com três linhas ao lado de uma coluna de 1100 px deixa 780 px de
   nada por baixo dele: é o que se vê na /exterior, no «O que muda de nível
   para nível», e na /tecnologia, no S-AWC. A coluna estica com o grid, mas o
   conteúdo dela fica em cima e não volta a aparecer.

   `.pj-cola` no conteúdo faz o mesmo que a `.pj-colada` já faz na galeria de
   legenda fixa: o texto acompanha a coluna alta enquanto ela passa. Só a partir
   dos 992 px, porque abaixo disso as colunas empilham e não há vazio nenhum
   para preencher. */
@media (min-width: 992px) {
    /* O `.pj` à frente sobe a especificidade a 0-2-0: sem ele, a `.pj-figura`,
       que declara `position: relative` mais abaixo no ficheiro, ganhava por
       empate e a figura da entrevista não colava. */
    .pj .pj-cola {
        position: sticky;
        top: calc(var(--pj-topo, 140px) + var(--pj-s5));
    }
}

@media (min-width: 768px) {
    .pj-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: clamp(2rem, 4vw, 4.5rem) clamp(1.5rem, 3vw, 3rem);
    }

    /* `grid-column-END: span N`, e não o atalho `grid-column: span N`.
       O atalho escreve os DOIS lados (`start: span N; end: auto`), e depois um
       `.pj-start-7` sobrepõe-se ao start e deixa o end em `auto`, que vale
       span 1: a coluna de seis encolhia para uma, e o texto saía uma palavra
       por linha. Com o longhand, o span é do lado do fim e o início fica livre
       para quem o quiser marcar. */
    /* A SÉRIE VAI COMPLETA, e não só até onde alguém precisou.
       Faltavam a `.pj-col-10` e a `.pj-start-5`, e as duas estavam no HTML: a
       coluna de dez da /exterior ficava com `grid-column-end: auto`, que vale
       span 1, e a citação da gama australiana era servida numa faixa de 70 px;
       o `start-5` de dezassete blocos da /estreia e da /interior não fazia
       nada e eles começavam onde calhasse. Um degrau que falta numa série
       destas não avisa: o bloco encolhe e ninguém liga o efeito à causa. */
    .pj-col-1 { grid-column-end: span 1; }
    .pj-col-2 { grid-column-end: span 2; }
    .pj-col-3 { grid-column-end: span 3; }
    .pj-col-4 { grid-column-end: span 4; }
    .pj-col-5 { grid-column-end: span 5; }
    .pj-col-6 { grid-column-end: span 6; }
    .pj-col-7 { grid-column-end: span 7; }
    .pj-col-8 { grid-column-end: span 8; }
    .pj-col-9 { grid-column-end: span 9; }
    .pj-col-10 { grid-column-end: span 10; }
    .pj-col-11 { grid-column-end: span 11; }
    .pj-col-12 { grid-column-end: span 12; }

    .pj-start-2 { grid-column-start: 2; }
    .pj-start-3 { grid-column-start: 3; }
    .pj-start-4 { grid-column-start: 4; }
    .pj-start-5 { grid-column-start: 5; }
    .pj-start-6 { grid-column-start: 6; }
    .pj-start-7 { grid-column-start: 7; }
    .pj-start-8 { grid-column-start: 8; }
    .pj-start-9 { grid-column-start: 9; }
    .pj-start-10 { grid-column-start: 10; }
}

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

/* Etiqueta de instrumento. É o elemento que dá o tom à página inteira: 11px,
   maiúsculas, muito espaçada, precedida de um travessão curto. Aparece antes de
   cada título e em cada legenda de dado. */
/* SEM TRAÇO. Havia aqui um `::before` de 1,5rem em cor de acento antes de cada
   etiqueta. Um traço decorativo à frente de um rótulo é um maneirismo de
   template: aparece setenta vezes na mesma página, não distingue nada de nada, e
   a única coisa que acrescenta é a sensação de que alguém escolheu um enfeite em
   vez de compor.

   O que separa agora o número da etiqueta é ESPAÇO, que é o instrumento de
   composição mais antigo que há. O número fica tabular e em cor de acento, a
   etiqueta em maiúsculas espaçadas: lê-se a hierarquia sem um único adorno. */
.pj-eyebrow {
    display: flex;
    align-items: baseline;
    gap: var(--pj-s5);
    margin: 0 0 var(--pj-s4);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pj-text-3);
}

/* O número de capítulo (01, 02, ...) vive dentro do eyebrow e é o único sítio
   onde os algarismos aparecem em cor de acento fora dos dados. */
.pj-eyebrow .pj-num {
    color: var(--pj-acento);
    font-variant-numeric: tabular-nums;
}

.pj-display {
    margin: 0;
    font-size: clamp(2.5rem, 8.5vw, 7.5rem);
    font-weight: 600;
    line-height: .94;
    letter-spacing: -.035em;
    text-wrap: balance;
}

/* A COR DOS TÍTULOS É DECLARADA, e não herdada.
   Herdar funciona enquanto o contexto for o esperado. Basta pôr o mesmo `.pj-h2`
   dentro de um bloco cujo pai tenha texto esbatido (uma nota, uma legenda, um
   painel) e o título sai a cinzento sobre escuro, sem ninguém ter mudado nada.
   Um título é a coisa que menos pode depender de onde calhou estar. */
.pj-h1,
.pj-h2,
.pj-h3,
.pj-h4,
.pj-display,
.pj-declaracao {
    color: var(--pj-text);
}

.pj-h2 {
    margin: 0;
    font-size: clamp(1.875rem, 4.6vw, 4rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.pj-h3 {
    margin: 0;
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.02em;
}

.pj-h4 {
    margin: 0;
    font-size: clamp(1.125rem, 1.55vw, 1.375rem);
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -.01em;
}

/* Entrada: o parágrafo que segue um título grande. */
.pj-lead {
    font-size: clamp(1.125rem, 1.55vw, 1.375rem);
    line-height: 1.55;
    letter-spacing: -.005em;
    color: var(--pj-text-2);
    text-wrap: pretty;
}

.pj-body {
    font-size: 1rem;
    line-height: 1.72;
    color: var(--pj-text-2);
    text-wrap: pretty;
}

.pj-body + .pj-body,
.pj-lead + .pj-body,
.pj-body + .pj-lead {
    margin-top: var(--pj-s4);
}

.pj-body strong,
.pj-lead strong {
    color: var(--pj-text);
    font-weight: 600;
}

/* Nota de rodapé: as ressalvas legais e as notas de mercado. */
.pj-nota {
    display: block;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--pj-text-3);
}

/* Link de texto. NÃO é botão, os botões são os do design system. */
.pj-link {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    color: var(--pj-text);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    padding-block: .35em;
    border-bottom: 1px solid var(--pj-line-2);
    transition: color .25s var(--pj-ease), border-color .25s var(--pj-ease);
}

.pj-link:hover,
.pj-link:focus-visible {
    /* O foco é o foco, não o acento: o mesmo token dos anéis. */
    color: var(--pj-foco-anel);
    border-bottom-color: var(--pj-acento);
    text-decoration: none;
}

.pj-link i {
    font-size: .9em;
    transition: transform .25s var(--pj-ease);
}

.pj-link:hover i {
    transform: translateX(.2em);
}

.pj-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pj-s4) var(--pj-s5);
    margin-top: var(--pj-s6);
}

/* ── 04 · ESCALA E FIOS ──────────────────────────────────────────────────── */

/* O fio com marcas de escala. É o motivo gráfico da página: separa capítulos e
   assina o vocabulário de instrumento sem precisar de uma imagem.
   As marcas são um gradiente repetido, zero elementos extra no DOM. */
.pj-escala {
    position: relative;
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--pj-line);
}

.pj-escala::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 6px;
    background-image: repeating-linear-gradient(to right,
            var(--pj-line-2) 0 1px,
            transparent 1px 40px);
}

.pj-escala.is-acento::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3.5rem;
    height: 1px;
    background: var(--pj-acento);
}

/* ── 05 · HERÓI ──────────────────────────────────────────────────────────── */

/* UM vídeo, a ecrã inteiro, e o conteúdo por cima. Nada de carrossel: era um,
   com setas e barra de instrumentos, e um carrossel no herói pede ao visitante
   que espere para ver o que vem a seguir, precisamente no momento em que ele
   ainda está a decidir se fica.

   `100svh` e não `100vh`: no telemóvel, o `vh` conta com a barra do browser
   recolhida, e com ela aberta o fundo do herói fica cortado. */
/* ── 05 Herói ─────────────────────────────────────────────────────────────
   O HERÓI SAIU DAQUI a 2026-09-03. Eram 140 linhas para um herói só deste
   microsite: alinhado à esquerda, título fluido até 84 px, coluna de 832 px
   encostada ao gutter e um subtítulo a cinzento próprio. Ao lado do Grandis e
   do Outlander, que são centrados e têm o título a 30 px, lia-se como outro
   sítio.

   A entrada passou a usar o `.hero` do design system, com o escurecimento
   medido do `_modelo/assets/css/modelo_heroi.css`, como as outras quatro
   páginas de entrada de modelo. Os heróis das restantes oito páginas deste
   microsite são `.pj-painel` e não passavam por aqui.
   ─────────────────────────────────────────────────────────────────────────── */

/* Tabela de comparação: dois valores para o mesmo rótulo, com cabeçalho de
   coluna. Nasceu com o quadro que põe a quarta geração ao lado da nova, e é o
   único sítio do microsite onde há duas séries de números a comparar. A
   `.pj-ficha` não serve porque é `1fr auto`, feita para um valor por rótulo.

   Rola dentro do seu contentor e nunca empurra a página: três colunas com
   números longos passam dos 390px de um telemóvel, e um scroll lateral na
   página inteira é um defeito, não uma adaptação.

   `tabular-nums` porque a comparação faz-se pela casa das unidades: sem ele, o
   1 estreito da fonte desalinha 2 315 de 3 030 e a coluna deixa de se ler de
   cima a baixo. */
.pj-tabela-comparacao {
    margin-top: var(--pj-s6);
    overflow-x: auto;
}

/* AS TINTAS DO SITE ENTRAM AQUI PELA PORTA DO ELEMENTO.
   O `styles.css` pinta `table tr` de `#f8f8f8` e dá `1px solid #ccc` à `table`,
   porque as tabelas do site vivem em páginas de fundo branco. Neste microsite,
   que é preto, a primeira versão saiu com texto claro sobre um bloco quase
   branco e não se lia. Não é uma variante nova: é repor a tinta do sítio onde a
   peça está. */
.pj-tabela-comparacao table {
    width: 100%;
    min-width: 24rem;
    border: 0;
    border-collapse: collapse;
    table-layout: auto;
    font-variant-numeric: tabular-nums;
}

.pj-tabela-comparacao tr {
    background: transparent;
    border: 0;
}

.pj-tabela-comparacao th,
.pj-tabela-comparacao td {
    padding: var(--pj-s4) var(--pj-s3);
    text-align: right;
    border-bottom: 1px solid var(--pj-line);
}

.pj-tabela-comparacao thead th {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pj-text-3);
    border-bottom-color: var(--pj-text-3);
}

.pj-tabela-comparacao tbody th {
    font-size: .9375rem;
    font-weight: 400;
    text-align: left;
    color: var(--pj-text-2);
}

.pj-tabela-comparacao td {
    font-size: clamp(1.125rem, 2.4vw, 1.5rem);
    font-weight: 300;
    color: var(--pj-text-3);
}

/* A coluna da geração nova é a que se lê primeiro. A diferença é o peso e a
   tinta, e não a cor: uma coluna a cobre roubava o destaque aos títulos e
   passava a dizer «promoção» em vez de «é este». */
.pj-tabela-comparacao td.is-nova {
    font-weight: 400;
    color: var(--pj-text);
}

/* Abaixo dos 600px o site esconde o `thead` e empilha as células, com o
   `data-label` de cada uma a sair no `::before`. Segue-se essa estratégia, que é
   a única do site, e acerta-se só o que ela pinta: os fios a `#ddd` e o rótulo,
   que sem isto sairia em maiúsculas a negro sobre preto. A `<th>` de cada linha
   passa a fazer de título da célula empilhada. */
@media screen and (max-width: 600px) {
    /* O `min-width` existe para a tabela de três colunas não se esmagar. Aqui já
       não há três colunas: as células empilham, e mantê-lo punha a tabela 30px
       mais larga do que um telemóvel de 390, com as unidades cortadas na margem. */
    .pj-tabela-comparacao table {
        min-width: 0;
    }

    .pj-tabela-comparacao tr {
        border-bottom: 1px solid var(--pj-line);
        margin-bottom: var(--pj-s4);
    }

    .pj-tabela-comparacao tbody th {
        display: block;
        padding-bottom: var(--pj-s2);
        color: var(--pj-text);
    }

    .pj-tabela-comparacao td {
        border-bottom: 0;
        font-size: 1.125rem;
    }

    .pj-tabela-comparacao td::before {
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .12em;
        color: var(--pj-text-3);
    }
}

/* ── 06 · LEITURA (números e fichas) ─────────────────────────────────────── */

/* A régua de números. É o Multi Meter da página: valores lado a lado, separados
   por fios, com a unidade a meia força e a legenda em maiúsculas por baixo. */
.pj-leitura {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--pj-line);
    border-left: 1px solid var(--pj-line);
}

.pj-leitura__item {
    padding: var(--pj-s5) var(--pj-s4);
    border-right: 1px solid var(--pj-line);
    border-bottom: 1px solid var(--pj-line);
}

.pj-leitura__valor {
    display: flex;
    align-items: baseline;
    gap: .25em;
    font-size: clamp(1.75rem, 4.2vw, 2.75rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--pj-text);
}

.pj-leitura__unidade {
    /* `max()` e não só `.4em`: a unidade acompanha o número, mas no telemóvel o
       número trava no mínimo do `clamp` e 0,4em dele dava 11,2px, abaixo dos
       12px que esta folha fixou. */
    font-size: max(.75rem, .4em);
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--pj-text-3);
}

.pj-leitura__rotulo {
    margin-top: var(--pj-s3);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--pj-text-3);
}

@media (min-width: 640px) {
    .pj-leitura { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .pj-leitura { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    .pj-leitura__item { padding: var(--pj-s6) var(--pj-s5); }
}

/* Ficha de dados: rótulo à esquerda, valor à direita, fio a ligar os dois.
   É a ficha técnica de sempre, mas sem a tabela zebrada que ninguém lê. */
.pj-ficha {
    border-top: 1px solid var(--pj-line);
}

.pj-ficha__grupo + .pj-ficha__grupo {
    margin-top: var(--pj-s7);
}

.pj-ficha__titulo {
    display: flex;
    align-items: baseline;
    gap: var(--pj-s3);
    padding-block: var(--pj-s4);
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pj-acento);
    border-bottom: 1px solid var(--pj-line-2);
}

/* Um bloco de fala: rótulo curto à esquerda, prosa à direita, separados por um
   fio. É o mesmo desenho da ficha técnica, mas com a coluna do texto a poder
   crescer, na ficha o valor é «4 920 mm» e cabe em `auto`; aqui é um parágrafo,
   e `auto` dava-lhe a largura de uma palavra. */
.pj-bloco-fala {
    padding-block: var(--pj-s5);
    border-bottom: 1px solid var(--pj-line);
}

.pj-bloco-fala:first-child {
    border-top: 1px solid var(--pj-line);
}

.pj-ficha__linha {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--pj-s3);
    padding-block: var(--pj-s4);
    border-bottom: 1px solid var(--pj-line);
}

.pj-ficha__rotulo {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--pj-text-2);
}

.pj-ficha__valor {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--pj-text);
}

/* Lista de características: sem bolinhas, com um traço curto em cor de acento. */
.pj-lista {
    margin: var(--pj-s5) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--pj-s3);
}

.pj-lista li {
    position: relative;
    padding-left: 1.75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pj-text-2);
}

.pj-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .75em;
    width: .875rem;
    height: 1px;
    background: var(--pj-acento);
}

/* ── 07 · GALERIAS E BLOCOS DE IMAGEM ────────────────────────────────────── */

/* SEM FUNDO PRÓPRIO. Tinha `background: var(--pj-ink-2)`, uma tinta a mais do
   que a da página: enquanto a fotografia não pintava, e em qualquer sítio onde
   ela não preenchesse a caixa, via-se um rectângulo de outra cor. Uma figura é
   uma moldura, não uma superfície. */
.pj-figura {
    margin: 0;
    position: relative;
    overflow: hidden;
}

/* O `video` entra no selector com o `img` porque a secção das câmaras pôs um
   filme dentro de uma figura pela primeira vez. Sem isto, o `<video>` fica com o
   tamanho intrínseco do ficheiro e ignora a coluna onde vive. */
.pj-figura img,
.pj-figura video {
    width: 100%;
    height: auto;
}

.pj-figura figcaption {
    margin-top: var(--pj-s3);
    font-size: .75rem;
    line-height: 1.5;
    letter-spacing: .04em;
    color: var(--pj-text-3);
}

/* Retrato: recorta a fotografia para vertical sem a esticar. Serve as colunas
   estreitas onde uma paisagem 16:9 ficaria com a altura de um selo. */
.pj-figura.is-retrato img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.pj-figura.is-quadrada img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.pj-figura.is-panorama img {
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

/* Painel de ecrã inteiro com texto por cima: os capítulos que separam secções. */
/* A ALTURA VEM DO CONTEÚDO, com um mínimo, e não ao contrário.
   Estava em `min-height: clamp(30rem, 78svh, 52rem)`: numa janela de 900 px dava
   702 px de caixa para 364 px de conteúdo, quase o dobro. Uma imagem esticada a
   ocupar ecrã por ocupar, com o texto colado a uma borda, é o oposto de uma
   secção composta.

   O mínimo desce para 56svh, que chega para a fotografia ter presença, e o
   conteúdo passa a mandar quando é maior. E `align-items: center`, porque
   `flex-end` dava exactamente zero pixels de folga por baixo do texto. */
.pj-painel {
    position: relative;
    min-height: clamp(22rem, 56svh, 36rem);
    display: flex;
    align-items: center;
    isolation: isolate;
    overflow: hidden;
    background: #000;
}

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

.pj-painel__fundo img,
.pj-painel__fundo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pj-foco-imagem, 50% 50%);
}

.pj-painel__fundo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
            rgba(4, 4, 5, .9) 0%,
            rgba(4, 4, 5, .45) 34%,
            rgba(4, 4, 5, .05) 66%);
}

/* O escurecimento do cabeçalho é SÓ EM CIMA, e é para o CABEÇALHO DO SITE, que
   é branco, transparente, e fica por cima da fotografia. Numa fotografia clara
   (o Pajero ao sol da página da ficha técnica) os links do menu ficavam brancos
   sobre branco.

   Saíram daqui, a 2026-09-04 e por decisão do Jorge, o véu de baixo e o véu
   lateral que acompanhava a coluna do texto. É a mesma decisão que passou pelos
   outros modelos: em todos os heróis, o degradê é o de topo e mais nenhum.
   O que isto custa: medido a 390 px, o sobretítulo da estreia dava 3,51:1 sem
   estas camadas. */
header.pj-painel .pj-painel__fundo::after {
    background:
        linear-gradient(180deg,
            rgba(4, 4, 5, 1) 0%,
            rgba(4, 4, 5, 0) 64%);
}

/* A CAMADA PLANA, a mesma que o `.hero-overlay::before` do site dá a todos os
   heróis. O cabeçalho das páginas interiores tinha só o gradiente de topo e
   ficava mais claro do que a entrada, que é o mesmo herói noutra página. Com as
   duas camadas, o overlay é o mesmo em todo o lado. */
header.pj-painel .pj-painel__fundo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: rgba(4, 4, 5, .5);
}

/* O respiro do cabeçalho do site vive no PAINEL e não no texto: feito no texto,
   empurrava-o para baixo e destruía a centragem. */
header.pj-painel {
    padding-top: var(--main-header-height);
}

header.pj-painel .pj-painel__texto {
    padding-block: var(--pj-s8);
}

/* NÃO HÁ VÉU POR TRÁS DO TEXTO DOS PAINÉIS, e a decisão é de 2026-09-04.
   ─────────────────────────────────────────────────────────────────────────
   Havia aqui duas coisas, e as duas saíram por decisão do Jorge:

   1. `.pj-painel__fundo:has(video)::after`, um degradê de uma ponta à outra
      sobre o filme, para o texto pequeno se ler no pior fotograma.
   2. Uma regra que subia a etiqueta e as notas ao texto cheio sobre imagem.

   A segunda tinha um defeito que ninguém via: perdeu a chaveta em alguma
   passagem e os seus dois selectores ficaram pendurados na regra do degradê. A
   etiqueta e a nota não recebiam cor nenhuma; recebiam um `background` com um
   degradê de ponta a ponta atrás das palavras. Era isso que se via na página.

   O que fica: o `.pj-painel__fundo::after` das fotografias, que é o véu do
   painel e não do texto. A etiqueta e as notas voltam aos cinzentos da escala.

   O QUE ISTO CUSTA, medido antes: o sobretítulo dava 1,25:1 nas entrevistas,
   1,3 na estreia e 1,94 na ficha técnica; sobre filme, 4,59:1 aos 9 s e 1,89:1
   aos 29 s. Um texto sobre imagem sem véu depende da imagem, e é essa a escolha
   que passa a valer aqui. */
header.pj-painel .pj-painel__fundo:has(video)::after {
    background:
        linear-gradient(180deg,
            rgba(4, 4, 5, 1) 0%,
            rgba(4, 4, 5, 0) 64%);
}

@media (min-width: 768px) {
    header.pj-painel .pj-painel__fundo:has(video)::after {
        background:
            linear-gradient(180deg,
                rgba(4, 4, 5, 1) 0%,
                rgba(4, 4, 5, 0) 64%);
    }
}

.pj-painel__texto {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: var(--pj-s8);
}

/* O painel de fecho leva UMA frase e um link. Herdava o mínimo de 56svh dos
   painéis-cabeçalho e ficava com 504 px de caixa para 117 px de texto, quatro
   vezes e meia. Uma fotografia esticada a ocupar ecrã por ocupar, com uma linha
   de texto perdida ao meio, é o que faz uma página parecer gerada.

   Aqui o mínimo desce ao que uma imagem precisa para ter presença, e o conteúdo
   manda a partir daí. */
.pj-painel.is-centro {
    align-items: center;
    min-height: clamp(16rem, 38svh, 26rem);
}

.pj-painel.is-centro .pj-painel__fundo::after {
    background: linear-gradient(0deg,
            rgba(4, 4, 5, .82) 0%,
            rgba(4, 4, 5, .58) 50%,
            rgba(4, 4, 5, .72) 100%);
}

/* Declaração: o texto isolado num campo escuro, sem fotografia a competir.
   As linhas revelam-se uma a uma (ver secção 10). */
.pj-declaracao {
    text-align: center;
    font-size: clamp(1.25rem, 2.9vw, 2.375rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.02em;
    color: var(--pj-text);
    text-wrap: balance;
}

.pj-declaracao p + p {
    margin-top: 1.2em;
}

.pj-declaracao .is-forte {
    color: var(--pj-acento);
}

.pj-declaracao .is-pequeno {
    display: block;
    margin-top: 1.4em;
    font-size: .5em;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--pj-text-3);
}

/* Grelha de cartões de navegação. Cada cartão é uma fotografia com o título por
   cima; ao passar o rato a fotografia aproxima-se um fio e o fio de baixo
   percorre a largura toda. Sem sombras, sem elevação: o cartão é uma janela. */
.pj-cartoes {
    display: grid;
    gap: var(--pj-s5);
}

@media (min-width: 640px) {
    .pj-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .pj-cartoes.is-quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pj-cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(18rem, 34vw, 26rem);
    padding: var(--pj-s5);
    overflow: hidden;
    isolation: isolate;
    background: var(--pj-ink-2);
    color: inherit;
    text-decoration: none;
}

.pj-cartao__fundo {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.pj-cartao__fundo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--pj-ease-out);
}

.pj-cartao::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg,
            rgba(4, 4, 5, .9) 0%,
            rgba(4, 4, 5, .3) 55%,
            rgba(4, 4, 5, .12) 100%);
    transition: opacity .5s var(--pj-ease);
}

.pj-cartao:hover .pj-cartao__fundo img,
.pj-cartao:focus-visible .pj-cartao__fundo img {
    transform: scale(1.045);
}

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

.pj-cartao__titulo {
    margin: 0 0 var(--pj-s2);
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--pj-text);
}

.pj-cartao__desc {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--pj-text-2);
}

/* O fio que corre por baixo do cartão ao passar o rato. */
.pj-cartao__fio {
    position: relative;
    height: 1px;
    margin-top: var(--pj-s4);
    background: rgba(255, 255, 255, .22);
}

.pj-cartao__fio::after {
    content: "";
    position: absolute;
    inset: 0 100% 0 0;
    background: var(--pj-acento);
    transition: inset-inline-end .55s var(--pj-ease-out);
}

.pj-cartao:hover .pj-cartao__fio::after,
.pj-cartao:focus-visible .pj-cartao__fio::after {
    inset-inline-end: 0;
}

/* Galeria com legenda fixa: as fotografias passam, a legenda fica. Só a partir
   dos 992px, no telemóvel `sticky` numa coluna curta não tem onde colar, e a
   legenda passa a preceder cada imagem. */
.pj-colada {
    display: grid;
    gap: var(--pj-s6);
}

.pj-colada__fixo > * {
    position: static;
}

@media (min-width: 992px) {
    /* SEM `align-items: start`, e é isso que faz o `sticky` funcionar.
       Com `start`, a coluna da legenda ficava com a altura do texto (268 px) e
       o filho `sticky` não tinha onde colar: ao rolar, o título saía de vista e
       o lado esquerdo ficava 1400 px em branco ao lado das fotografias. Com o
       `stretch` que o grid dá por omissão, a coluna acompanha a lista e o
       título fica à vista durante as três fotografias, que era o que a peça
       prometia desde o princípio. */
    .pj-colada {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(2.5rem, 5vw, 5rem);
    }

    .pj-colada__fixo > * {
        position: sticky;
        /* Cola abaixo do cabeçalho E da barra de separadores. O `--pj-topo` é
           medido pelo `pajero.js`; sem ele, a conta usa os 140 px do
           computador. */
        top: calc(var(--pj-topo, 140px) + var(--pj-s5));
    }

    .pj-colada.is-invertida .pj-colada__fixo { order: 2; }
}

.pj-colada__lista {
    display: grid;
    gap: var(--pj-s6);
}

/* Tira horizontal: rola de lado, com encaixe. Serve os pormenores de desenho :
   ver dez recortes em fila conta melhor a história do que uma grelha de dez. */
.pj-tira {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 78vw);
    gap: var(--pj-s4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pj-gutter);
    padding-inline: var(--pj-gutter);
    padding-bottom: var(--pj-s4);
    /* A barra nativa aqui é informação: diz que há mais para o lado. */
    scrollbar-width: thin;
}

.pj-tira > * {
    scroll-snap-align: start;
}

/* Numa tira, todas as fotografias têm de ter a MESMA altura, ou a fila fica
   com dentes. As fontes oficiais misturam 3:2 com 16:9, por isso o recorte é
   aqui, no CSS, e não na escolha do ficheiro: o `pj_img()` continua a declarar
   as medidas reais (que é o que faz o browser reservar a caixa certa) e é o
   `object-fit` que decide o que se vê. */
.pj-tira .pj-figura img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* E as legendas alinham entre si: uma de uma linha ao lado de outra de duas
   deixava as fotografias a saltar. */
.pj-tira .pj-figura figcaption {
    min-height: 3.4em;
}

@media (min-width: 768px) {
    .pj-tira { grid-auto-columns: minmax(18rem, 34vw); }
}

@media (min-width: 1400px) {
    .pj-tira { grid-auto-columns: minmax(20rem, 26vw); }
}

/* ── 08 · CRONOLOGIA ─────────────────────────────────────────────────────── */

/* A história do Pajero, de 1982 a 2027. Um eixo vertical no telemóvel (que é
   como se lê uma cronologia num ecrã estreito) e o mesmo eixo no computador,
   com a fotografia à direita e o ano a marcar a escala à esquerda. */
.pj-crono {
    position: relative;
    display: grid;
    gap: var(--pj-s8);
    /* O invólucro do texto repete por dentro as duas primeiras colunas do marco,
       e o gap tem de ser o MESMO nos dois sítios ou o texto desalinha da coluna
       do ano. Daí viver aqui, e não escrito duas vezes. */
    --pj-crono-gap: clamp(1.5rem, 3vw, 3rem);
}

.pj-crono__eixo {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--pj-line);
}

.pj-crono__marco {
    position: relative;
    padding-left: var(--pj-s6);
}

.pj-crono__marco::before {
    content: "";
    position: absolute;
    left: -3px;
    top: .55rem;
    width: 7px;
    height: 7px;
    background: var(--pj-acento);
}

.pj-crono__ano {
    display: block;
    margin-bottom: var(--pj-s3);
    font-size: clamp(1.5rem, 3.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--pj-text);
}

.pj-crono__marco.is-geracao .pj-crono__ano {
    color: var(--pj-acento);
}

.pj-crono__figura {
    margin: var(--pj-s5) 0 0;
}

@media (min-width: 900px) {
    .pj-crono__marco {
        display: grid;
        grid-template-columns: minmax(0, 6rem) minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--pj-crono-gap);
        align-items: start;
        padding-left: var(--pj-s7);
    }

    /* O ANO E O TEXTO ATRAVESSAM O MARCO EM BLOCO.
       Ocupa as duas primeiras colunas do marco e reproduz lá dentro as mesmas
       duas colunas, por isso a geometria é a de sempre: 6rem para o ano, o
       resto para o texto, e a fotografia entra sozinha na terceira coluna, que
       fica livre.

       O invólucro existe por causa do desprendimento. Colados em separado, o
       ano e o texto largavam cada um no seu momento (o mais alto larga
       primeiro) e o texto saía de cena com o ano ainda parado. Num só bloco há
       um só momento de largar.

       Nos marcos da `/adn` não há invólucro nenhum, e é de propósito: aqueles
       não passam dos 300 px e não têm travessia para acompanhar. */
    .pj-crono__texto {
        grid-column: 1 / 3;
        display: grid;
        grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
        gap: var(--pj-crono-gap);
        align-items: start;
    }

    .pj-crono__marco.is-so-texto .pj-crono__texto { grid-column: 1 / -1; }

    .pj-crono__ano { margin-bottom: 0; }

    .pj-crono__figura { margin-top: 0; }

    /* Um marco sem fotografia deixa a coluna da direita vazia; o texto ocupa-a. */
    .pj-crono__marco.is-so-texto .pj-crono__corpo { grid-column: 2 / -1; }
}

/* A ALTURA DO ECRÃ É CONDIÇÃO, e não um pormenor.
   Um bloco colado que não caiba no ecrã fica com o fim cortado durante toda a
   travessia, e isso é pior do que não colar. O texto mais longo da cronologia
   (o de 1991) mede 402 px a 1600 px de largura, 482 a 1280 e 699 a 900: quanto
   mais estreita a coluna, mais alto o texto. Somando os 164 px a que cola e uma
   folga em baixo, a janela precisa de 590 px de altura a 1600, 670 a 1280 e
   887 a 900.

   Daí os dois degraus, e não um só: acima de 1200 px de largura bastam 700 px
   de altura (a conta pede 696), e entre os 900 e os 1200 são precisos 900 (a
   conta pede 887 no pior caso). Fora disto o bloco rola com a página, como
   rolava antes. */
@media (min-width: 1200px) and (min-height: 700px),
       (min-width: 900px) and (min-height: 900px) {
    /* Cola abaixo do cabeçalho E da barra de separadores, como a `.pj-colada`
       e a `.pj-cola`. O `--pj-topo` é medido pelo `pajero.js`; sem ele, a conta
       usa os 140 px do computador. */
    .pj-crono__texto {
        position: sticky;
        top: calc(var(--pj-topo, 140px) + var(--pj-s5));
    }
}

/* ── 07b · GRELHA METRO ──────────────────────────────────────────────────── */

/* A grelha de mosaicos do sítio especial da Mitsubishi, na linguagem desta casa.
   É uma grelha de células quadradas em que cada peça ocupa uma, duas ou quatro:
   o que dá o ritmo não é a moldura de cada fotografia, é o contraste entre
   tamanhos. Daí a distância de 2px entre peças e não a folga generosa do resto
   da página: os mosaicos leem-se como UMA superfície partida, não como cartões
   soltos.

   Duas colunas no telemóvel, quatro a partir dos 768px. `grid-auto-flow: dense`
   para as peças pequenas irem preencher os buracos que as grandes deixam. */
.pj-metro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    grid-auto-flow: dense;
    gap: 2px;
    background: var(--pj-line);
}

@media (min-width: 768px) {
    .pj-metro {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.pj-metro__peca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 1;
    overflow: hidden;
    isolation: isolate;
    padding: var(--pj-s4);
    background: var(--pj-ink-2);
    color: inherit;
    text-decoration: none;
}

/* Uma peça larga vale duas células ao lado; uma alta, duas em baixo; uma
   grande, quatro. As proporções acompanham para a fotografia não deformar. */
.pj-metro__peca.is-larga  { grid-column: span 2; aspect-ratio: 2 / 1; }
.pj-metro__peca.is-alta   { grid-row: span 2;    aspect-ratio: 1 / 2; }
.pj-metro__peca.is-grande { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }

/* No telemóvel, uma peça grande ocuparia a largura toda e duas alturas: fica
   demasiado alta para o polegar. Passa a larga, que é meia altura. */
@media (max-width: 767px) {
    .pj-metro__peca.is-grande { grid-row: span 1; aspect-ratio: 1 / 1; }
    .pj-metro__peca.is-alta   { grid-row: span 1; aspect-ratio: 1; }
}

.pj-metro__peca picture,
.pj-metro__peca img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pj-metro__peca img {
    transition: transform .8s var(--pj-ease-out);
}

/* Escurecimento só na base, onde vive a legenda. Uma peça de mosaico com um véu
   por cima da fotografia inteira deixa de ser fotografia. */
.pj-metro__peca::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg,
            rgba(4, 4, 5, .86) 0%,
            rgba(4, 4, 5, .34) 42%,
            rgba(4, 4, 5, 0) 72%);
}

a.pj-metro__peca:hover img,
a.pj-metro__peca:focus-visible img {
    transform: scale(1.05);
}

a.pj-metro__peca:focus-visible {
    outline: 2px solid var(--pj-foco-anel);
    outline-offset: -3px;
}

.pj-metro__rotulo {
    margin: 0;
    font-size: clamp(.875rem, 1.4vw, 1.1875rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--pj-text);
    text-wrap: balance;
}

.pj-metro__nota {
    margin-top: var(--pj-s2);
    font-size: .75rem;
    line-height: 1.4;
    color: var(--pj-text-2);
}

/* A peça grande carrega o nome da secção em corpo maior: é o que faz o mosaico
   ter uma leitura e não ser uma manta de retalhos. */
.pj-metro__peca.is-grande .pj-metro__rotulo {
    font-size: clamp(1.25rem, 2.6vw, 2rem);
    letter-spacing: -.02em;
}

/* Uma peça sem ligação (as que são só fotografia) não recebe indicação de
   clique nenhuma. */
.pj-metro__peca:not(a) { cursor: default; }

/* ── 07c · GALERIA ───────────────────────────────────────────────────────── */

/* O carrossel das galerias: exterior, interior, pormenores, fichas. Um plano
   de cada vez, com pontos e duas setas.
   As setas são de contorno e do tamanho de um alvo de toque; os pontos são
   traços de 2px, não bolas. É o mesmo vocabulário de escala do resto da
   página. */
.pj-galeria {
    position: relative;
}

.pj-galeria .swiper {
    overflow: hidden;
}

.pj-galeria__slide {
    height: auto;
}

.pj-galeria__figura {
    margin: 0;
    position: relative;
    overflow: hidden;
    background: var(--pj-ink-2);
}

/* A FOTOGRAFIA CABE NO ECRÃ, E OS COMANDOS TAMBÉM.
   ─────────────────────────────────────────────────────────────────────────
   O `aspect-ratio` sozinho dava 933 px de altura numa coluna de 1400, e numa
   janela de 900 sobram 760 depois do cabeçalho e da barra de separadores: a
   fotografia ficava 284 px fora do ecrã e as setas nunca estavam à vista ao
   mesmo tempo que ela.

   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, a fotografia fica mais panorâmica e
   o `object-fit: cover` trata do enquadramento. O que NÃO acontece é a imagem
   deixar de caber.

   As duas variáveis são medidas pelo `pajero.js` (ver `medirGaleria`). Os
   valores de reserva do `var()` são os do computador com a barra a uma linha:
   sem JavaScript a conta continua a fazer-se, só com menos precisão.

   `svh` e não `vh`: no telemóvel, `100vh` conta com a barra do browser que se
   esconde ao rolar, e a fotografia ficava sempre um pouco maior do que o ecrã
   que existe naquele momento. */
.pj-galeria__figura img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* O travão só vale com a galeria montada. Sem Swiper os planos ficam empilhados
   e todos legíveis, e cortar a altura de cada um deixava vinte fotografias
   achatadas numa fila que ninguém pediu.
   O `--pj-s7` no fim é o respiro entre a barra de comando e a ilha de atalhos:
   sem ele a barra encostava à ilha, e um botão que toca noutro lê-se como parte
   dele. */
.pj-galeria.is-pronta .pj-galeria__figura img {
    max-height: calc(100svh
        - var(--pj-topo, 140px)
        - var(--pj-rodape, 56px)
        - var(--pj-galeria-fora, 200px)
        - var(--pj-s7));
}

.pj-galeria__legenda {
    padding-top: var(--pj-s4);
    max-width: 62ch;
}

.pj-galeria__nome {
    margin: 0;
    font-size: clamp(1.125rem, 1.55vw, 1.375rem);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--pj-text);
}

.pj-galeria__texto {
    margin-top: var(--pj-s3);
    font-size: .875rem;
    line-height: 1.7;
    color: var(--pj-text-2);
}

.pj-galeria__texto + .pj-galeria__texto {
    margin-top: var(--pj-s3);
}

/* A barra de comando: índice, pontos e setas. Fica POR BAIXO da fotografia e
   não por cima dela: setas sobrepostas a uma imagem tapam sempre a parte que
   interessa, e num ecrã de telemóvel ficam onde o polegar já está a tocar para
   rolar a página. */
.pj-galeria__barra {
    display: flex;
    align-items: center;
    gap: var(--pj-s4);
    margin-top: var(--pj-s5);
    padding-top: var(--pj-s4);
    border-top: 1px solid var(--pj-line);
}

.pj-galeria__pontos {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--pj-s2) var(--pj-s2);
    align-items: center;
}

/* `min-width` de 24px, e a fila quebra em vez de encolher.
   Sem ele, uma galeria de nove planos num ecrã de 390px dava traços de 14px de
   largura: continuam a ver-se, mas deixam de se conseguir tocar. 24px é o
   mínimo da WCAG 2.2 AA, e a altura já vinha do `::after`. Quebrar para uma
   segunda linha é mais honesto do que fingir um alvo que o dedo não acerta. */
.pj-galeria__ponto {
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    max-width: 3.5rem;
    height: 2px;
    padding: 0;
    border: 0;
    background: var(--pj-line-2);
    cursor: pointer;
    position: relative;
    transition: background .3s var(--pj-ease);
}

/* Alvo de toque de 24px sem engordar o traço. */
.pj-galeria__ponto::after {
    content: "";
    position: absolute;
    inset: -11px 0;
}

.pj-galeria__ponto.is-ativo {
    background: var(--pj-acento);
}

.pj-galeria__ponto:focus-visible {
    outline: 2px solid var(--pj-foco-anel);
    outline-offset: 6px;
}

.pj-galeria__setas {
    display: flex;
    flex: 0 0 auto;
    gap: var(--pj-s2);
}

.pj-galeria__seta {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--pj-line-2);
    background: transparent;
    color: var(--pj-text-2);
    font-size: .875rem;
    cursor: pointer;
    transition: color .25s var(--pj-ease), border-color .25s var(--pj-ease);
}

.pj-galeria__seta:hover:not(:disabled) {
    color: var(--pj-text);
    border-color: var(--pj-text-2);
}

.pj-galeria__seta:disabled,
.pj-galeria__seta.swiper-button-disabled {
    opacity: .3;
    cursor: default;
}

.pj-galeria__indice {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--pj-text-3);
    font-variant-numeric: tabular-nums;
}

.pj-galeria__indice b {
    font-weight: 600;
    color: var(--pj-text);
}

/* SEM JAVASCRIPT, A GALERIA TEM DE SE LER TODA.
   ─────────────────────────────────────────────────────────────────────────
   O comentário que aqui estava dizia que sem JS os planos se empilhavam e se
   liam todos. Não se liam. O `swiper-bundle.min.css` entra na página quer o
   Swiper arranque quer não, e declara `.swiper { overflow: hidden }`,
   `.swiper-wrapper { display: flex }` e `.swiper-slide { flex-shrink: 0;
   width: 100% }`. Com isso, sem JS via-se o PRIMEIRO plano e mais nenhum: os
   outros ficavam ao lado, cortados e inalcançáveis, sem uma seta e sem um
   ponto para lá chegar.
   As três regras a seguir desfazem exactamente essas três, e só enquanto o JS
   não ligou. A barra de comando continua escondida: uns pontos que não
   respondessem a nada seriam pior do que não os ter. */
.pj-galeria:not(.is-pronta) .swiper { overflow: visible; }
.pj-galeria:not(.is-pronta) .swiper-wrapper { display: block; }
.pj-galeria:not(.is-pronta) .swiper-slide { width: auto; }

.pj-galeria:not(.is-pronta) .pj-galeria__barra { display: none; }

.pj-galeria:not(.is-pronta) .pj-galeria__slide + .pj-galeria__slide {
    margin-top: var(--pj-s6);
}

/* ── 08b · ADN: citações, perfis e texto que se abre ─────────────────────── */

/* A citação de um piloto ou de um engenheiro. É o único sítio da página onde o
   texto sai em corpo grande sem ser um título: a frase é a peça, e o nome de
   quem a disse vem por baixo, pequeno. */
.pj-citacao {
    position: relative;
    padding-left: var(--pj-s5);
    border-left: 1px solid var(--pj-acento);
}

.pj-citacao__numero {
    display: block;
    margin-bottom: var(--pj-s3);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--pj-acento);
    font-variant-numeric: tabular-nums;
}

.pj-citacao__frase {
    margin: 0;
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    font-weight: 500;
    line-height: 1.34;
    letter-spacing: -.02em;
    color: var(--pj-text);
    text-wrap: pretty;
}

.pj-citacao__quem {
    display: block;
    margin-top: var(--pj-s4);
    font-size: .75rem;
    line-height: 1.5;
    color: var(--pj-text-3);
}

.pj-citacao__quem b {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pj-text-2);
}

/* Perfil: retrato pequeno, cargo, nome, biografia. */
.pj-perfil {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--pj-s4);
    align-items: start;
}

.pj-perfil__retrato {
    width: 4.5rem;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--pj-ink-3);
    border-radius: 50%;
}

.pj-perfil__cargo {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pj-text-3);
}

.pj-perfil__nome {
    margin: var(--pj-s1) 0 var(--pj-s3);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* O texto longo que se abre. Era um carrossel em janela modal, com 8 KB de JS
   por trás; passou a `<details>` nativo: abre sem JS nenhum, o conteúdo está no
   DOM (para quem procura e para quem lê com leitor de ecrã) e o teclado navega-o
   de graça. */
.pj-abrir {
    border-top: 1px solid var(--pj-line);
}

.pj-abrir > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pj-s4);
    padding-block: var(--pj-s4);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pj-text-2);
    cursor: pointer;
    list-style: none;
    transition: color .25s var(--pj-ease);
}

/* O triângulo nativo sai: o sinal é o mais/menos à direita. */
.pj-abrir > summary::-webkit-details-marker { display: none; }
.pj-abrir > summary::marker { content: ""; }

.pj-abrir > summary:hover,
.pj-abrir[open] > summary {
    color: var(--pj-acento);
}

.pj-abrir__sinal {
    position: relative;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
}

.pj-abrir__sinal::before,
.pj-abrir__sinal::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1px;
    background: currentColor;
    transition: transform .3s var(--pj-ease);
}

.pj-abrir__sinal::after {
    transform: rotate(90deg);
}

.pj-abrir[open] .pj-abrir__sinal::after {
    transform: rotate(0deg);
}

.pj-abrir__corpo {
    padding-bottom: var(--pj-s5);
    max-width: 68ch;
}

.pj-abrir__corpo > * + * {
    margin-top: var(--pj-s4);
}

/* ── 09 · FILME E JANELA MODAL ───────────────────────────────────────────── */

.pj-filme {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
}

.pj-filme img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .8s var(--pj-ease-out), opacity .5s var(--pj-ease);
    opacity: .78;
}

.pj-filme:hover img,
.pj-filme:focus-visible img {
    transform: scale(1.035);
    opacity: 1;
}

.pj-filme__play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--pj-s4);
    color: #fff;
    pointer-events: none;
}

.pj-filme__disco {
    width: clamp(3.5rem, 7vw, 5rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    font-size: clamp(1rem, 1.8vw, 1.375rem);
    transition: background .35s var(--pj-ease), border-color .35s var(--pj-ease);
}

.pj-filme:hover .pj-filme__disco {
    background: var(--pj-acento);
    border-color: var(--pj-acento);
}

.pj-filme__rotulo {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}

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

/* A janela do filme. Não usa o `Modal.js` do site: aquele é feito para
   formulários dentro de um cartão claro, e aqui o que se quer é o ecrã todo
   preto com um vídeo. */
.pj-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pj-gutter);
    background: rgba(0, 0, 0, .94);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--pj-ease), visibility .4s;
}

.pj-modal.is-aberta {
    opacity: 1;
    visibility: visible;
}

.pj-modal__caixa {
    position: relative;
    width: min(100%, 76rem);
    aspect-ratio: 16 / 9;
    background: #000;
}

.pj-modal__caixa video {
    width: 100%;
    height: 100%;
}

.pj-modal__fechar {
    position: absolute;
    top: calc(var(--main-header-height) * -1 + -.5rem);
    right: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .3);
    background: transparent;
    color: #fff;
    font-size: 1.125rem;
    cursor: pointer;
    transition: background .25s var(--pj-ease), border-color .25s var(--pj-ease);
}

.pj-modal__fechar:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .7);
}

/* ── 10 · MOVIMENTO E ACESSIBILIDADE ─────────────────────────────────────── */

/* O JS marca `.js-pj-motion` no elemento raiz APENAS quando o GSAP está de pé e
   o utilizador não pediu menos movimento. Sem essa classe, tudo o que se segue
   não existe e a página aparece inteira, estática, que é o comportamento
   correcto, não um plano B degradado.
   O `will-change` NÃO fica cravado no CSS: o JS põe-no antes de animar e
   tira-o no fim. Deixá-lo aqui obrigaria o browser a manter uma camada de
   composição por elemento durante a vida toda da página. */
.js-pj-motion [data-pj-reveal] {
    opacity: 0;
}

.js-pj-motion [data-pj-reveal="linhas"] > * {
    opacity: 0;
}

/* Fatia de imagem que entra por baixo de uma máscara. A máscara é o próprio
   contentor com `overflow:hidden`; o que se move é a imagem. */
.js-pj-motion [data-pj-reveal="cortina"] {
    opacity: 1;
    overflow: hidden;
}

.js-pj-motion [data-pj-reveal="cortina"] > * {
    opacity: 0;
}

/* Paralaxe: o JS escreve `--pj-parallax` em px e o CSS trata do resto. Assim a
   propriedade animada é sempre `transform`, e o cálculo pode acontecer fora do
   caminho crítico do desenho. */
[data-pj-parallax] {
    will-change: auto;
}

.js-pj-motion [data-pj-parallax] > img,
.js-pj-motion [data-pj-parallax] > video,
.js-pj-motion [data-pj-parallax] > picture > img {
    transform: translate3d(0, var(--pj-parallax, 0px), 0) scale(1.12);
}

/* Quem pediu menos movimento não recebe nenhum, incluindo o carrossel, que o
   JS deixa parado, e o traço do herói. */
@media (prefers-reduced-motion: reduce) {
    .pj *,
    .pj *::before,
    .pj *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .js-pj-motion [data-pj-reveal],
    .js-pj-motion [data-pj-reveal] > *,
    .js-pj-motion [data-pj-reveal="cortina"] > * {
        opacity: 1 !important;
        transform: none !important;
    }

    .js-pj-motion [data-pj-parallax] > img,
    .js-pj-motion [data-pj-parallax] > video,
    .js-pj-motion [data-pj-parallax] > picture > img {
        transform: none;
    }
}

/* Foco visível em tudo o que é interativo dentro do microsite. O site não
   define um anel de foco próprio, e sem ele quem navega por teclado fica cego. */
.pj a:focus-visible,
.pj button:focus-visible {
    outline: 2px solid var(--pj-foco-anel);
    outline-offset: 3px;
}

/* Salto para o conteúdo: o herói tem um carrossel, e quem navega por teclado
   não deve ser obrigado a atravessá-lo. */
.pj-saltar {
    position: absolute;
    left: -9999px;
    z-index: 5;
}

.pj-saltar:focus {
    left: var(--pj-gutter);
    top: calc(var(--main-header-height) + .5rem);
    padding: .75rem 1.25rem;
    background: var(--pj-acento);
    color: #000;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

/* Impressão: a ficha técnica é o que alguém quer levar em papel. */
@media print {
    .pj-filme,
    .pj-modal { display: none !important; }

    .pj {
        background: #fff;
        color: #000;
    }

    .pj-ficha__valor,
    .pj-ficha__rotulo,
    .pj-h2,
    .pj-h3 { color: #000; }
}