/*
  COMPONENTES — Nova Home Scuderia Bandeiras
  Um arquétipo de seção por bloco abaixo (hero, mídia+texto, ficha numérica,
  trilho, statement, deck de cards) — reaproveitado entre as dobras que
  compartilham o mesmo papel narrativo, nunca um layout novo por dobra.
*/

@layer components {

  /* ============================================================ BOTÕES */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: 48px;
    padding: var(--space-xs) var(--space-m);
    font-family: var(--ff-text);
    font-weight: 600;
    font-size: var(--t-small);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: transform var(--dur-fast) var(--ease-brake),
      background var(--dur-fast) var(--ease-brake),
      border-color var(--dur-fast) var(--ease-brake);
  }
  .btn:active { transform: scale(0.98); }

  .btn--primary {
    background: var(--vermelho);
    color: var(--asfalto); /* §9.2: texto escuro sobre vermelho real passa AA (5,70:1) */
  }
  .btn--primary:hover { background: var(--luz); }

  .btn--ghost {
    background: transparent;
    color: var(--luz);
    border: 1px solid var(--luz-2);
  }
  .btn--ghost:hover { border-color: var(--luz); background: rgba(255, 255, 255, 0.08); }

  /* CTA da Caterham: borda branca em repouso, vira o lima da marca no hover. */
  .btn--ghost-lime:hover {
    border-color: #cad302;
    background: #cad302;
    color: var(--asfalto);
  }

  /* Terciário — peso mínimo: link sublinhado, sem fundo nem borda. Usado
     quando um CTA precisa existir mas não pode competir com o primário. */
  .btn--tertiary {
    background: transparent;
    color: var(--luz-2);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--luz-2);
    padding-inline: var(--space-2xs);
  }
  .btn--tertiary:hover { color: var(--luz); text-decoration-color: var(--luz); }

  /* ============================================================ PLACEHOLDER DE IMAGEM
     Reserva a proporção e o espaço reais do layout quando falta um asset
     definitivo — nunca skeleton "carregando", nunca caixa cinza sem contexto. */
  .placeholder-img {
    position: relative;
    display: flex;
    align-items: flex-end;
    background:
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px),
      var(--asfalto-2);
    border: 1px solid var(--divisor);
  }
  .placeholder-img::before {
    content: attr(data-label);
    display: block;
    width: 100%;
    padding: var(--space-s);
    font-family: var(--ff-text);
    font-size: var(--t-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--luz-2);
  }

  /* ============================================================ SECTION HEAD
     Assinatura gráfica repetida em toda a página: índice tabular grande +
     eyebrow + título. É o dispositivo que substitui "eyebrow solto em cima
     do H2" por uma peça de direção de arte reconhecível seção após seção. */
  .section-head {
    display: flex;
    gap: var(--space-m);
    align-items: flex-start;
    margin-block-end: var(--space-l);
  }
  .section-head__index {
    flex-shrink: 0;
    font-family: var(--ff-display);
    font-size: var(--t-xl);
    line-height: 0.8;
    color: var(--vermelho);
    font-feature-settings: "tnum";
  }
  .section-head .eyebrow { margin-block-end: var(--space-2xs); }
  .section-head h2 { margin: 0; }

  /* ============================================================ EIXO DO CONTEÚDO (seções numeradas)
     A abertura (.section-head: numeral + eyebrow + título) é intocada — é
     peça de direção de arte, não régua. O que se alinha é o que vem DEPOIS
     dela: texto, listas, imagens do grid, cards e CTA começam onde começa o
     título, não na borda do container.
     Eixo = largura do numeral (caixa de 0.94em em --t-xl = largura dos 2 dígitos
     tabulares, como já renderizava) + o mesmo --space-m que separa numeral e
     título. Só em desktop: em telas estreitas o recuo comeria a coluna de
     texto, e ali o conteúdo segue na margem do container.
     Mecânica: os blocos recuam --axis e o .section-head devolve -axis, então
     a abertura fica exatamente onde sempre esteve. A .intro-split (03, 04)
     é a própria abertura em duas colunas e não recua. Faixas full-bleed
     (scrollseq, frames do 07) continuam de borda a borda. */
  @media (max-width: 1023.98px) {
    /* texto de .media-split e galerias roláveis na mesma margem do container,
       sem abrir um segundo alinhamento (--gutter) a poucos px do primeiro */
    .section:has(.section-head) :is(.media-split > :not(.media-split__media), .ecossistema__mosaico, .pilotos-time__cards) {
      padding-inline: var(--container-margin);
    }
    .section:has(.section-head) :is(.ecossistema__mosaico, .pilotos-time__cards) {
      scroll-padding-inline: var(--container-margin);
    }
  }
  @media (min-width: 1024px) {
    .section:has(.section-head) { --axis: var(--index-col); }
    .section-head__index { min-inline-size: 0.94em; } /* = largura natural de 2 dígitos tabulares */

    .section:has(.section-head) .media-split > :has(> .section-head) { padding-inline-start: var(--axis); }
    .section:has(.section-head) .container:not(.intro-split) {
      padding-inline-start: calc(var(--container-margin) + var(--axis));
    }
    .section:has(.section-head) :not(.intro-split) > .section-head {
      margin-inline-start: calc(var(--axis) * -1);
    }
    .section:has(.section-head) .media-split > :not(.media-split__media):first-child {
      padding-inline-start: calc(var(--content-inset) + var(--axis));
    }
  }

  /* ============================================================ INTRO-SPLIT
     Abertura editorial em duas colunas (dobras 03 e 04): manifesto
     (.section-head) à esquerda, conteúdo institucional à direita — uma
     composição só, sem o vão vertical entre título e texto. Os dois blocos
     centralizam no eixo vertical um do outro, para nenhum lado pesar. */
  .intro-split__corpo { max-width: 40rem; }
  .intro-split__lead { max-width: 34ch; line-height: 1.35; }
  .intro-split__statement {
    width: fit-content; /* régua vermelha do tamanho do texto, não da caixa */
    max-width: 16ch;
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-s);
    border-block-start: 2px solid var(--vermelho);
    font-family: var(--ff-display);
    font-size: var(--t-l);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }

  @media (min-width: 1024px) {
    .intro-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: var(--space-xl);
      align-items: center;
    }
    .intro-split .section-head { margin-block-end: 0; }
  }

  /* ============================================================ STATEMENT
     Pausa narrativa tipográfica — usada como fecho de seção (não só na
     Caterham). Sempre Special Gothic caixa-alta, largura controlada. */
  .statement {
    max-width: 20ch;
    margin-block: var(--space-l);
    padding-block-start: var(--space-m);
    border-block-start: 2px solid var(--vermelho);
    font-family: var(--ff-display);
    font-size: var(--t-xl);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }
  .statement--wide { max-width: 32ch; }

  /* ============================================================ GRIFO
     Marcador editorial animado nos títulos grandes. Estado-base (fora de
     .js-motion, definido aqui) já é o final visível: barra pintada, texto
     escuro sobre vermelho — igual ao par .btn--primary (AA garantido).
     O estado "apagado" que anima ao entrar/sair de cena só existe dentro de
     .js-motion, em css/base.css @layer motion-base — mesma regra de
     "CSS renderiza o final visível primeiro" usada em [data-reveal].
     box-decoration-break: clone é o que faz cada linha de uma expressão
     quebrada ganhar sua própria barra (efeito de marcador visto quando
     "PRINCIPAIS ECOSSISTEMAS" cai em duas linhas).

     background-color: transparent mata o amarelo padrão do <mark> do
     navegador — sem isso, no instante em que background-size é 0% (estado
     "apagado" antes de animar, em .js-motion .grifo) a cor de fundo nativa
     do <mark> aparecia por baixo. background-size na vertical fica em 72%
     (não 100%) porque os títulos usam line-height bem apertado (0.9–0.98):
     medindo a caixa natural do <mark> (getBoundingClientRect) contra o
     line-height real do H1 do hero, a caixa de fonte tem ~239px enquanto o
     avanço de linha é só ~166px (0.9×184px) — uma barra de 100% da caixa
     de fonte invade a linha vizinha. 72% centralizado (background-position
     50% no eixo vertical) fecha essa conta e cobre o texto sem tocar a
     linha acima/abaixo. */
  .grifo {
    background-image: linear-gradient(var(--vermelho), var(--vermelho));
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 var(--grifo-y, 50%);
    background-size: 100% var(--grifo-h, 68%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-inline: 0.14em;
    /* margin-inline: 0 (antes -0.14em): a barra não invade o espaço entre
       palavras — no condensado ele é estreito e a barra encostava nas
       vizinhas. Com 0 dos dois lados: distância igual à esquerda e à
       direita, pontuação ("pistas.") encosta na barra, e a linha que quebra
       dentro do grifo começa rente à margem da coluna. */
    margin-inline: 0;
    color: var(--grifo-ink, var(--asfalto));
  }
  /* Variáveis do grifo (--grifo-h altura, --grifo-y posição vertical,
     --grifo-ink cor do texto) existem para que um contexto possa pedir um
     marcador fino em vez da barra cheia sem brigar com a camada
     motion-base, que vence components por ordem de @layer. */

  /* ============================================================ CARD
     Sistema único de cartão — usado em "Também no escopo" e nas ofertas de
     Conteúdo. Acento vermelho no topo, numeral tabular, mesma proporção. */
  .card-grid {
    display: grid;
    gap: 1px;
    background: var(--divisor);
    border: 1px solid var(--divisor);
    margin-block: var(--space-l);
  }
  /* Wrapper full-bleed do .card-grid--4/.card-grid--3 ("Também no escopo",
     "Uma estrutura pensada..."): mesmo tratamento de .frentes/
     .experiencias__cena — 100vw no desktop em vez de preso ao .container
     (ver comentário no HTML). */
  .card-grid-bleed {
    padding-inline: var(--container-margin);
  }
  @media (min-width: 1024px) {
    .card-grid-bleed { padding-inline: 0; }
  }
  .card {
    position: relative;
    background: var(--asfalto);
    padding: var(--space-m);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    transition: background var(--dur-medium) var(--ease-brake);
  }
  .section--paper .card { background: var(--papel); }
  .card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 32px;
    height: 3px;
    background: var(--vermelho);
    transition: width var(--dur-slow) var(--ease-brake);
  }
  .card__index {
    font-family: var(--ff-text);
    font-size: var(--t-label);
    font-weight: 600;
    font-feature-settings: "tnum";
    color: var(--luz-2);
    transition: color var(--dur-medium) var(--ease-brake);
  }
  .card__media {
    display: block;
    aspect-ratio: 1 / 1;
    margin-block-end: var(--space-2xs);
  }
  .card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .card h3, .card h5 {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: var(--t-l);
    margin: 0;
  }
  .card p { font-size: var(--t-small); color: var(--luz-2); }
  .card h3, .card h5, .card p {
    transition: transform var(--dur-slow) var(--ease-brake);
  }

  /* Hover padrão do sistema de cartão (validado em "O que oferecemos" e
     estendido aqui a todo .card, ex.: "Também no escopo"): acento do topo
     corre a largura inteira, o numeral acende em vermelho e o bloco de
     texto avança alguns pixels — mesma mecânica de .conteudo__ofertas
     abaixo, só generalizada como comportamento padrão do componente. */
  @media (hover: hover) and (pointer: fine) {
    .card:hover { background: var(--asfalto-2); }
    .section--paper .card:hover { background: var(--papel-2); }
    .card:hover::before { width: 100%; }
    .card:hover .card__index { color: var(--vermelho); }
    .card:hover h3,
    .card:hover h5,
    .card:hover p { transform: translateX(6px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .card,
    .card::before,
    .card__index,
    .card h3,
    .card h5,
    .card p { transition: none; }
  }

  @media (min-width: 640px) {
    .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1024px) {
    .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  /* 4 colunas só a partir de 1200px: entre 1024 e 1199 o recuo do eixo
     (--axis) deixa a coluna estreita demais para "Personalizados" em --t-l. */
  @media (min-width: 1200px) {
    .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* ============================================================ NAVBAR */
  .nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    background: transparent;
    transition: background var(--dur-fast) var(--ease-brake), transform var(--dur-medium) var(--ease-brake);
  }
  .nav.is-solid { background: var(--asfalto); }
  .nav.is-hidden { transform: translateY(-100%); }

  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding-block: var(--space-2xs);
    height: 64px;
  }

  .nav__logo {
    display: inline-flex;
    flex-shrink: 0;
  }
  .nav__logo-img {
    display: block;
    width: 130px;
  }
  .nav__logo-img img { display: block; width: 100%; height: auto; }

  .nav__links {
    display: none;
    align-items: center;
    gap: var(--space-l);
    font-size: var(--t-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .nav__group { display: flex; gap: var(--space-s); }
  .nav__links a {
    white-space: nowrap;
    padding-block: var(--space-3xs);
    border-bottom: 2px solid transparent;
    transition: border-color var(--dur-fast) var(--ease-brake), color var(--dur-fast) var(--ease-brake);
  }
  .nav__links a:hover {
    border-color: var(--luz-2);
  }
  .nav__links a[aria-current="true"] {
    border-color: var(--vermelho);
    font-weight: 600;
  }

  .nav__cta {
    display: none;
    background: var(--vermelho);
    color: var(--asfalto);
    padding: var(--space-3xs) var(--space-s);
    font-weight: 600;
    font-size: var(--t-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-brake);
  }
  .nav__cta:hover { background: var(--luz); }

  .nav__menu-btn {
    width: 44px; height: 44px;
    display: grid; place-items: center;
  }
  .nav__menu-icon, .nav__menu-icon::before, .nav__menu-icon::after {
    content: ""; display: block;
    width: 22px; height: 2px;
    background: var(--luz);
  }
  .nav__menu-icon { position: relative; }
  .nav__menu-icon::before { position: absolute; inset-block-start: -7px; }
  .nav__menu-icon::after { position: absolute; inset-block-start: 7px; }

  @media (min-width: 1280px) {
    .nav__links { display: flex; }
    .nav__cta { display: inline-flex; }
    .nav__menu-btn { display: none; }
  }

  .nav__dialog {
    border: 0;
    padding: 0;
    margin: 0;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    background: var(--asfalto);
    color: var(--luz);
  }
  .nav__dialog::backdrop { background: transparent; }
  .nav__dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-s) var(--gutter);
  }
  .nav__dialog-head img { width: 110px; }
  .nav__dialog-head button {
    width: 44px; height: 44px;
    font-size: 1.2rem;
    color: var(--luz);
  }
  .nav__dialog nav {
    display: flex;
    flex-direction: column;
    padding: var(--space-m) var(--gutter);
    font-family: var(--ff-display);
    font-size: var(--t-xl);
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }
  .nav__dialog nav a { padding-block: var(--space-2xs); }
  .nav__dialog-whatsapp {
    display: block;
    margin: var(--space-l) var(--gutter);
    padding: var(--space-s);
    text-align: center;
    background: var(--vermelho);
    color: var(--asfalto);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background var(--dur-fast) var(--ease-brake);
  }
  .nav__dialog-whatsapp:hover { background: var(--luz); }

  /* ============================================================ 01 · HERO */
  .hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: clip;
    text-align: center;
  }
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  .hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }
  /* Vida sutil no fundo: respiração lentíssima (18s), nunca um zoom que se
     perceba como "animação" — só profundidade. object-fit:cover garante que
     a escala >1 nunca revela borda. */
  @media (prefers-reduced-motion: no-preference) {
    .hero__bg img { animation: hero-bg-respira 18s ease-in-out infinite alternate; }
  }
  @keyframes hero-bg-respira {
    from { transform: scale(1.02); }
    to   { transform: scale(1.07); }
  }
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: none;
  }
  .hero__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: var(--space-2xl);
  }
  .hero__title {
    font-size: var(--t-mega);
    line-height: 0.9;
    margin-block: var(--space-xs) var(--space-m);
  }
  .hero__copy { max-width: 58rem; }
  .hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-m);
    margin-block-start: var(--space-l);
  }

  .hero__scroll {
    position: absolute;
    inset-inline-end: var(--container-margin);
    inset-block-end: var(--space-l);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--luz-2);
    font-size: var(--t-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
  }
  .hero__scroll::after {
    content: "";
    display: block;
    width: 1px;
    height: 56px;
    background: linear-gradient(var(--luz-2), transparent);
  }

  @media (max-width: 1023px) {
    .hero__scroll { display: none; }
  }
  @media (max-width: 767px) {
    .hero { min-height: 100svh; }
    .hero__bg img { object-position: center 20%; }
    .hero__body { padding-inline: var(--gutter); }
  }
  /* Mobile: hierarquia 1-2-3 também na forma — primário e secundário viram
     blocos de largura cheia (alvo de toque generoso), o terciário fica como
     link centralizado abaixo, sem competir com os dois primeiros. */
  @media (max-width: 480px) {
    .hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
    .hero__ctas .btn--primary,
    .hero__ctas .btn--ghost { width: 100%; }
    .hero__ctas .btn--tertiary { align-self: center; }
  }

  /* ============================================================ TRANSIÇÃO HERO → SOBRE
     Faixa fina, sem numeral — mesmo arquétipo de conector que a FAIXA DE
     AUTORIDADE usa entre 02/03. Reaproveita .statement (a "pausa narrativa"
     já usada no resto da página) só que centralizada e mais compacta: soa
     como o gancho "por trás disso existe um ecossistema", não uma nova
     seção de conteúdo. */
  .transicao {
    border-block-end: 1px solid var(--divisor);
    padding-block: var(--space-l);
    text-align: center;
  }
  .transicao__risco {
    display: block;
    width: 64px;
    height: 2px;
    margin-inline: auto;
    margin-block-end: var(--space-m);
    background: var(--vermelho);
  }
  .transicao__frase {
    margin-inline: auto;
    margin-block: 0;
  }
  /* O risco "se traça" (0 → 64px) em vez de só aparecer — eco mínimo de
     movimento de pista/bandeirada. Só a largura: opacidade/translateY do
     risco já vêm do [data-reveal] genérico (base.css, layer motion-base). */
  .js-motion .transicao__risco { width: 0; }
  .js-motion .transicao__risco.is-in {
    width: 64px;
    transition: width var(--dur-slow) var(--ease-drive);
  }

  /* ============================================================ MÍDIA + TEXTO (padrão reaproveitado nas dobras 02, 04, 06, 07, 09, 10)
     Full-bleed: a coluna de imagem quebra o container e vai até a borda da
     viewport; a coluna de texto continua alinhada ao grid do site via
     --content-inset. Estas divs NÃO levam a classe .container — a própria
     .media-split ocupa 100% da largura disponível. */
  .media-split {
    display: grid;
    gap: var(--space-l);
  }
  .media-split > :not(.media-split__media) {
    padding-inline: var(--gutter);
  }
  .media-split__media picture { display: block; overflow: clip; }
  .media-split__media img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-drive);
  }
  .media-split__media:hover img { transform: scale(1.05); }

  @media (min-width: 1024px) {
    .media-split {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2xl);
      align-items: stretch;
    }
    .media-split > :not(.media-split__media) {
      padding-inline: 0;
      align-self: center; /* texto no centro vertical da foto, não colado no topo */
    }
    .media-split > :not(.media-split__media):first-child {
      padding-inline-start: var(--content-inset);
    }
    .media-split > :not(.media-split__media):last-child {
      padding-inline-end: var(--content-inset);
    }
    .media-split__media,
    .media-split__media picture {
      height: 100%;
    }
    .media-split__media img {
      height: 100%;
      aspect-ratio: auto;
    }
    /* Proporções assimétricas: variação de peso entre a 1ª e a 2ª coluna,
       na ordem em que aparecem no HTML (nunca sempre 50/50 como antes).
       Precisa vir depois da regra geral acima (mesma especificidade —
       quem definir grid-template-columns por último vence a cascata). */
    .media-split--60-40 { grid-template-columns: 7fr 5fr; }
    .media-split--40-60 { grid-template-columns: 5fr 7fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .media-split__media:hover img { transform: none; }
  }

  /* .media-split__media quando o slot ainda não tem foto real (asset
     pendente) — mesma proporção que o <img> teria, para o placeholder
     ocupar o espaço real do layout em vez de colapsar para a altura do
     texto do rótulo. */
  .media-split__media.placeholder-img { aspect-ratio: 4/5; }
  @media (min-width: 1024px) {
    .media-split__media.placeholder-img { height: 100%; aspect-ratio: auto; }
  }

  /* ============================================================ 02 · SOBRE
     Composição institucional/sólida: título no topo, depois imagem da sede
     lado a lado com o texto (.media-split, mesmo padrão das dobras 04/06/
     07/09/10) — sem imagem full-width empurrando o texto para baixo. O
     texto fica todo do mesmo lado da composição: lead em corpo maior,
     apoio abaixo sob um filete, hierarquia mais leve. */
  .sobre__split { margin-block-start: var(--space-xl); }
  .sobre__split .media-split__media img {
    aspect-ratio: 4/3;
    object-position: 50% 55%;
  }
  .sobre__texto {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }
  .sobre__lead {
    font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.875rem);
    line-height: 1.32;
    letter-spacing: -0.01em;
    text-wrap: pretty;
  }
  .sobre__apoio {
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--divisor);
    color: var(--luz-2);
  }
  .sobre__apoio p + p { margin-block-start: var(--space-s); }
  /* statement fecha a dobra: o padding da .section já dá o respiro de baixo,
     então a margem sai de baixo e vai para cima — conteúdo centrado no vão */
  .sobre .statement {
    margin-block: var(--space-xl) 0;
  }

  /* ============================================================ FAIXA DE AUTORIDADE
     Retrato de cada nome, não quatro colunas de texto soltas: foto de
     ficha + legenda em degradê (mesma lógica de figure/figcaption do
     mosaico do Ecossistema), e no desktop as fotos ganham o corte-r —
     a única forma não-retangular do sistema (ver tokens.css) — para as
     quatro peças lerem como um único bloco gráfico, não cards soltos. */
  .autoridade {
    border-block: 1px solid var(--divisor);
    padding-block: var(--space-l);
  }
  .autoridade__eyebrow { margin-block-end: var(--space-m); }
  .autoridade__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--space-xs);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--gutter);
    margin-block-end: var(--space-m);
    scrollbar-width: none;
  }
  .autoridade__grid::-webkit-scrollbar { display: none; }
  .autoridade__item {
    scroll-snap-align: start;
    position: relative;
  }
  .autoridade__item .autoridade__foto,
  .autoridade__item img { aspect-ratio: 3/4; object-fit: cover; width: 100%; display: block; }
  .autoridade__item::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: linear-gradient(0deg, rgba(6,6,6,.92) 0%, rgba(6,6,6,0) 100%);
    pointer-events: none;
  }
  .autoridade__legenda {
    position: absolute;
    z-index: 1;
    inset-block-end: var(--space-s);
    inset-inline-start: var(--space-s);
    inset-inline-end: var(--space-s);
  }
  .autoridade__cargo {
    font-family: var(--ff-text);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vermelho);
    margin-block-end: var(--space-3xs);
  }
  .autoridade__nome { font-family: var(--ff-display); font-size: var(--t-l); line-height: 1; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
  .autoridade__credencial { color: var(--luz-2); font-size: var(--t-small); margin-block-start: var(--space-3xs); }
  .autoridade__link { font-weight: 600; border-bottom: 1px solid currentColor; }

  @media (min-width: 1024px) {
    .autoridade__grid {
      grid-auto-columns: unset;
      grid-template-columns: repeat(4, 1fr);
      overflow: visible;
      padding-inline: var(--container-margin);
      gap: 2px;
    }
    .autoridade__item .autoridade__foto,
    .autoridade__item picture,
    .autoridade__item::after { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
  }

  /* ============================================================ 02 · ECOSSISTEMA — DUAS FRENTES
     Composição de dois painéis full-bleed (Scuderia Bandeiras / Bandeiras
     Empresarial), border-a-border como .scrollseq/.conteudo__frames — não
     recua ao eixo (ver comentário em EIXO DO CONTEÚDO acima), porque não há
     coluna de texto para alinhar: as duas fotos SÃO a composição. Substitui
     o antigo mosaico de 5 peças + lista de 8 itens. */
  /* Microline institucional — discreta de propósito: não é mais um "lead"
     (parágrafo grande) competindo com o H2, só um registro rápido (sede +
     fundador) antes de ir direto às duas frentes. */
  .ecossistema__microline {
    margin-block-start: var(--space-2xs);
    font-size: var(--t-small);
    color: var(--luz-2);
    letter-spacing: 0.02em;
  }

  .frentes {
    position: relative;
    display: grid;
    margin-block-start: var(--space-l);
  }
  .frentes__eixo { display: none; }
  .frentes__painel {
    position: relative;
    overflow: clip;
    background: var(--asfalto-2);
  }
  .frentes__media { position: absolute; inset: 0; }
  .frentes__media picture { display: block; height: 100%; }
  .frentes__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-drive); }
  .frentes__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6,6,6,.82) 0%, rgba(6,6,6,.4) 24%, rgba(6,6,6,.06) 46%, transparent 62%);
  }
  .frentes__painel--scuderia .frentes__media img { object-position: 50% 65%; }
  .frentes__conteudo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    height: 100%;
    justify-content: flex-end;
    padding: var(--space-m) var(--gutter);
  }
  .frentes__label {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    margin: 0;
    font-family: var(--ff-display);
    font-size: var(--t-l);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--luz);
    text-shadow: 0 2px 16px rgba(0,0,0,.6);
  }
  .frentes__num { color: var(--vermelho); font-feature-settings: "tnum"; }
  .frentes__tags {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.3em;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.625rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--luz-2);
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
  }
  .frentes__tags li { white-space: nowrap; }
  .frentes__tags li:not(:last-child)::after { content: "·"; margin-inline: 0.3em; color: var(--vermelho); }
  .frentes__link {
    font-weight: 600;
    font-size: var(--t-small);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--luz);
    border-bottom: 1px solid currentColor;
    padding-block-end: 2px;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
    transition: color var(--dur-fast) var(--ease-brake);
  }
  .frentes__link:hover { color: var(--vermelho); }

  @media (min-width: 1024px) {
    .frentes { grid-template-columns: 1fr 1fr; }
    .frentes__painel { min-height: 78vh; }
    .frentes__eixo {
      display: block;
      position: absolute;
      inset-block: 0;
      inset-inline-start: 50%;
      width: 2px;
      z-index: 2;
      background: var(--vermelho);
      transform: translateX(-50%);
    }
    .frentes__conteudo { padding: var(--space-xl); max-width: 34rem; }
    .frentes__tags {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      font-size: 0.75rem;
    }
    .frentes__tags::-webkit-scrollbar { display: none; }
  }

  /* <1024px: cada frente vira um bloco vertical fechado — número/título →
     palavras-chave → CTA → imagem (nessa ordem, já é a ordem do DOM), sem
     overlay: foto limpa, proporção fixa, conteúdo em fluxo normal. Espaço
     GRANDE entre as duas frentes (unidades distintas) e espaço PEQUENO
     dentro de cada uma (a imagem "gruda" no bloco de texto acima dela, não
     fica solta) — mesmo gutter inscreve texto e imagem na mesma coluna. */
  @media (max-width: 1023.98px) {
    .frentes { gap: var(--space-xl); }
    .frentes__painel { overflow: visible; background: none; padding-inline: var(--gutter); }
    .frentes__conteudo { position: relative; height: auto; padding: 0 0 var(--space-s); }
    .frentes__media { position: relative; aspect-ratio: 4 / 3; overflow: clip; }
    .frentes__media::after { display: none; }
    .frentes__label,
    .frentes__tags,
    .frentes__link { text-shadow: none; }
  }

  @media (hover: hover) and (pointer: fine) {
    .frentes__painel:hover .frentes__media img { transform: scale(1.06); }
  }
  @media (prefers-reduced-motion: reduce) {
    .frentes__media img { transition: none; }
    .frentes__painel:hover .frentes__media img { transform: none; }
  }

  /* ============================================================ 04 · EXPERIÊNCIAS
     Redesenho 2026-09-24, 3ª rodada: os 5 princípios deixam de ser uma faixa
     horizontal ABAIXO do vídeo e passam a ocupar o espaço negativo à DIREITA
     dele, como uma coluna de 5 cards editoriais empilhados (mesma técnica de
     poster de .conteudo__frame — foto full-bleed + scrim + número/título no
     pé — só que em coluna, não em trilho horizontal). .experiencias__cena é
     o wrapper que guarda vídeo + cards juntos: em mobile é só empilhamento
     de bloco (vídeo, depois carrossel); a partir de 1024px vira grid de 2
     colunas com a mesma altura (vídeo cobre a esquerda, os 5 cards dividem
     a direita em 5 linhas iguais). bastidores.jpg segue como banner abaixo,
     sem mudança nesta rodada. */
  .experiencias__cena {
    margin-block: var(--space-xl) 0;
  }
  .experiencias__momento {
    position: relative;
    overflow: clip;
    aspect-ratio: 3 / 4;
    max-height: 620px;
    background: var(--asfalto);
  }
  .experiencias__momento-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .experiencias__momento-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(15, 15, 15, 0.42) 72%, rgba(15, 15, 15, 0.86) 92%, var(--asfalto) 100%);
  }
  .experiencias__momento-overlay {
    /* Race Experience tem mais a ver com Caterham que com o vermelho geral
       da marca — mesma técnica de .card--caterham: sobrepõe --vermelho por
       lima só neste escopo (eyebrow e o .grifo do título herdam sozinhos). */
    --vermelho: #cad302;
    --vermelho-escuro: #a8b002;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: var(--space-l) var(--gutter);
  }
  .experiencias__momento-overlay .eyebrow { color: var(--vermelho); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
  .experiencias__momento-titulo {
    font-family: var(--ff-display);
    font-size: var(--t-xl);
    line-height: 0.98;
    text-transform: uppercase;
    max-width: 16ch;
    margin-block: var(--space-2xs) var(--space-s);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
  }
  .experiencias__momento-lead {
    max-width: 32ch;
    font-size: var(--t-body);
    line-height: 1.4;
    color: var(--luz);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  }

  /* Cards dos princípios — poster editorial (foto + scrim + número/título no
     pé), mesma técnica visual de .conteudo__frame. Mobile/tablet: carrossel
     horizontal com scroll-snap, 1 card dominante + ponta do próximo (sem
     autoplay, swipe nativo). Desktop (≥1024px, ver .experiencias__cena):
     coluna de 5 linhas iguais ao lado do vídeo. */
  .experiencias__cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78vw;
    gap: 2px;
    margin-block-start: 2px;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    list-style: none;
  }
  .experiencias__cards::-webkit-scrollbar { display: none; }
  .experiencias__cards:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 4px; }

  .experiencias__card {
    position: relative;
    isolation: isolate;
    aspect-ratio: 4 / 5;
    overflow: clip;
    scroll-snap-align: start;
    background: var(--asfalto-2);
  }
  .experiencias__card picture { display: block; height: 100%; }
  .experiencias__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--foco, 50% 50%);
    transition: transform var(--dur-settle) var(--ease-brake);
  }
  .experiencias__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(6, 6, 6, 0.88) 0%, rgba(6, 6, 6, 0.58) 32%, rgba(6, 6, 6, 0) 66%);
  }
  .experiencias__card-legenda {
    position: absolute;
    z-index: 2;
    inset: auto var(--space-s) var(--space-s) var(--space-s);
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
  }
  .experiencias__card-num {
    font-family: var(--ff-display);
    font-size: var(--t-label);
    color: var(--vermelho);
    flex-shrink: 0;
    font-feature-settings: "tnum";
  }
  .experiencias__card-titulo {
    font-family: var(--ff-display);
    font-size: clamp(1.05rem, 0.85rem + 0.9vw, 1.375rem);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: var(--luz);
    text-shadow: 0 1px 10px rgba(6, 6, 6, 0.6);
  }

  @media (min-width: 768px) {
    .experiencias__momento { aspect-ratio: 16 / 9; max-height: 74vh; }
    .experiencias__momento-overlay { max-width: 44rem; }
  }

  @media (min-width: 1024px) {
    .experiencias__cena {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      gap: 2px;
      height: clamp(560px, 52vw, 720px);
    }
    .experiencias__momento { height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; }
    .experiencias__cards {
      grid-auto-flow: row;
      grid-auto-columns: unset;
      grid-template-rows: repeat(5, 1fr);
      height: 100%;
      min-height: 0;
      margin-block-start: 0;
      padding-inline: 0;
      overflow: visible;
      scroll-snap-type: none;
    }
    /* min-height:0 é o pulo do gato: sem isso, o min-height:auto padrão de
       item de grid deixa a proporção intrínseca da <img> (replaced element)
       vazar como "conteúdo mínimo" do card, e a linha de 1fr cresce além
       da altura do container em vez de respeitar os 5 quinhões iguais. */
    .experiencias__card { aspect-ratio: auto; height: 100%; min-height: 0; }
    .experiencias__card-legenda { inset: auto var(--space-m) var(--space-s) var(--space-m); }
  }

  @media (hover: hover) and (pointer: fine) {
    .experiencias__card:hover img { transform: scale(1.04); }
    .experiencias__card:hover .experiencias__card-titulo { letter-spacing: 0.01em; }
  }
  @media (prefers-reduced-motion: reduce) {
    .experiencias__card img { transition: none; }
    .experiencias__card:hover img { transform: none; }
  }

  .mini-head { border-block-start: 1px solid var(--divisor); padding-block-start: var(--space-l); margin-block-start: var(--space-l); }
  .experiencias__nota { color: var(--luz-2); font-size: var(--t-small); }

  /* ============================================================ CATERHAM (card)
     Redesenho 2026-09-24: Caterham deixou de ser um módulo full-viewport
     (logo + ficha com 2 vídeos + fecho com foto/HUD, quase 2 telas de
     altura) e passa a ser 1 card dentro do grid "Também no escopo" — pedido
     explícito do usuário ("módulo, não seção gigante"; o HUD de cantos e
     régua de telemetria também caía no "gamer" que ele pediu para evitar).
     .card--caterham só sobrepõe --vermelho/--vermelho-escuro para lima (o
     resto do token system e do componente .card não muda). id="caterham"
     fica no card para o crossfade de cursor em js/cursor-trail.js — a área
     de crossfade agora é o card, não a seção inteira. */
  .card--caterham {
    --vermelho: #cad302;
    --vermelho-escuro: #a8b002;
    /* Fundo puxando pro verde-lima do Caterham, não só o acento/tipografia
       — pra se reconhecer o card mesmo antes de ler o texto. */
    background: color-mix(in srgb, var(--asfalto) 82%, var(--vermelho) 18%);
  }
  @media (hover: hover) and (pointer: fine) {
    .card--caterham:hover {
      background: color-mix(in srgb, var(--asfalto-2) 80%, var(--vermelho) 20%);
    }
  }
  .card--caterham__cta.btn {
    align-self: flex-start;
    margin-block-start: var(--space-s);
    /* Fixa o texto em --asfalto (escuro): o fundo do .btn--primary aqui é o
       lima local do Caterham (--vermelho sobreposto acima), então o texto
       precisa continuar escuro por contraste — explícito para não depender
       da ordem de cascata com .btn--primary. */
    color: var(--asfalto);
  }

  /* ============================================================ 06 · BANDEIRAS EMPRESARIAL
     Única dobra em registro claro (.section--paper no <section>, ver base.css)
     — muda de temperatura em relação ao resto da página escura, ecoando o
     material real (tijolo/concreto/âmbar) e sinalizando "outro tipo de visita".

     Redesenho 2026-09-24: capítulo enxugado para 3 camadas — 1) abertura
     (split + trio de números, preenche a presença da headline) — 2) os
     espaços, grade FULL-BLEED com o sistema .card/.card-grid padrão do
     site (2026-09-25, padronização com "Também no escopo"), com uma linha
     de introdução curta acima, ainda dentro do container normal — 3) VIDEO-01
     real (vídeo institucional do complexo) + CTA único da frente. PETRONAS
     saiu daqui: passa a existir uma única vez, em 07 · MARCAS & PARCEIROS. */
  .bandeiras__intro { margin-block-end: var(--space-l); }
  .bandeiras__intro-texto {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }
  .bandeiras__title { display: flex; flex-direction: column; gap: var(--space-2xs); }
  .bandeiras__title-a { font-size: var(--t-l); }
  .bandeiras__title-b { font-size: var(--t-xxl); line-height: 0.9; }

  /* Trio de números — segundo ponto de destaque da abertura, em diálogo com
     a headline: mesma família display, escala logo abaixo do --t-xxl do
     título-b (≈ 5/6 dele), para equilibrar o peso sem competir.
     3 colunas fixas em qualquer largura (grid, não wrap) — o número escala
     com a coluna. Unidades em Inter, bem menores e em tinta secundária:
     "+" sobe para a linha de topo dos numerais (expoente editorial);
     "m²" senta na linha de base. Divisória: fio de 1px que esmaece nas
     pontas (gradiente), só entre colunas. Count-up: initStatCounters()
     em js/motion.js — uma vez, ao entrar na viewport. */
  .bandeiras__stats {
    /* teto em cqi: a coluna de texto é só ~40% do split, então o número
       escala pela largura do próprio trio (não da viewport) — "350m²"
       sempre cabe na terceira coluna. */
    container-type: inline-size;
    --stat-size: min(clamp(3.75rem, 1.8rem + 8vw, 10rem), 21cqi);
    --stat-col-pad: clamp(12px, 2.2vw, 28px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bandeiras__stats li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 16px);
    padding-inline-start: var(--stat-col-pad);
  }
  .bandeiras__stats li:first-child { padding-inline-start: 0; }
  .bandeiras__stats li + li::before {
    content: "";
    position: absolute;
    inset-block: 0.35em 0;
    inset-inline-start: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--divisor) 18%, var(--divisor) 82%, transparent);
  }
  .bandeiras__stats .num {
    display: flex;
    align-items: baseline;
    font-size: var(--stat-size);
    line-height: 0.82;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .bandeiras__stats .num .unit {
    font-size: 0.3em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: var(--luz-2);
    margin-inline-start: 0.12em;
  }
  /* "+" como expoente: alinhado ao topo dos numerais, não à base */
  .bandeiras__stats .num .unit--sup {
    align-self: flex-start;
    font-size: 0.36em;
    margin-inline-start: 0.03em;
    transform: translateY(-0.02em);
  }
  .bandeiras__stats-label {
    font-size: var(--t-small);
    line-height: 1.45;
    color: var(--luz-2);
    max-width: 22ch;
  }

  @media (min-width: 1024px) {
    .bandeiras__intro-texto { justify-content: center; gap: calc(var(--space-xl) * 1.2); }
  }

  /* ---- 2 · OS ESPAÇOS — carrossel 2026-09-25: mesmo componente .card de
     "Também no escopo" (mesma animação de hover: acento no topo, numeral,
     texto), mas sempre 1 linha só, com affordance explícita de carrossel
     (setas + contador em bolinha) em vez de grid/scroll-snap mudo.
     2026-09-26: layout igualado ao de "Também no escopo" — full-bleed de
     verdade a partir de 1024 (mesmo .card-grid-bleed, ignora o eixo de
     conteúdo em telas muito largas) e a mesma linha fina entre os cards
     (gap de 1px revelando --divisor por baixo, técnica de .card-grid, no
     lugar do espaço vazio de --space-m). Clique infinito: ver goTo() em
     js/carrossel.js (dá a volta em vez de travar nas pontas). */
  .bandeiras__espacos { margin-block-end: var(--space-xl); }
  .bandeiras__espacos > .container { margin-block-end: var(--space-l); }
  /* Introdução curta — só deixa claro quem a frente recebe, sem repetir os
     números da abertura nem abrir uma 2ª dobra de texto abaixo da galeria. */
  .bandeiras__lede { margin-block: var(--space-m) 0; }

  .carrossel { position: relative; border-block: 1px solid var(--divisor); }
  .carrossel__track {
    display: flex;
    gap: 1px;
    background: var(--divisor);
    padding-inline: var(--container-margin);
    scroll-padding-inline: var(--container-margin);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .carrossel__track::-webkit-scrollbar { display: none; }
  .carrossel__item {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  @media (min-width: 640px) {
    .carrossel__item { flex-basis: 46%; }
  }
  @media (min-width: 1024px) {
    .carrossel__track { padding-inline: 0; scroll-padding-inline: 0; }
    .carrossel__item { flex-basis: 29%; }
  }

  /* Setas: mesmo par claro/escuro do .card (asfalto/papel conforme a
     seção), hover acende vermelho com texto escuro — igual .btn--primary,
     já validado AA. Posição fixa nos cantos do carrossel (não acompanha o
     scroll do track), alinhada ao mesmo eixo do 1º/último card. */
  .carrossel__seta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--divisor);
    background: var(--asfalto-2);
    color: var(--luz);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-brake),
      border-color var(--dur-fast) var(--ease-brake),
      color var(--dur-fast) var(--ease-brake),
      opacity var(--dur-fast) var(--ease-brake);
  }
  .section--paper .carrossel__seta { background: var(--papel-2); }
  .carrossel__seta--prev { inset-inline-start: var(--space-2xs); }
  .carrossel__seta--next { inset-inline-end: var(--space-2xs); }
  .carrossel__seta:hover,
  .carrossel__seta:focus-visible {
    background: var(--vermelho);
    border-color: var(--vermelho);
    color: var(--asfalto);
  }
  @media (min-width: 640px) {
    .carrossel__seta { width: 44px; height: 44px; }
    .carrossel__seta--prev { inset-inline-start: var(--space-m); }
    .carrossel__seta--next { inset-inline-end: var(--space-m); }
  }

  /* Contador em bolinha: única affordance de progresso no mobile (onde as
     setas somem pra não competir com o swipe); no desktop reforça as
     setas. Alvo de toque real 44px via ::after, disco visível só 8px. */
  .carrossel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    margin-block-start: var(--space-l);
  }
  .carrossel__dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--divisor);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-brake), transform var(--dur-fast) var(--ease-brake);
  }
  .carrossel__dot::after {
    content: "";
    position: absolute;
    inset: -14px;
  }
  .carrossel__dot.is-active {
    background: var(--vermelho);
    transform: scale(1.4);
  }
  @media (prefers-reduced-motion: reduce) {
    .carrossel__seta,
    .carrossel__dot { transition: none; }
  }

  /* ---- 3 · VÍDEO INSTITUCIONAL — vídeo real (não mais placeholder), frame
     simples (sem cantoneiras/REC/tempo do .video-frame — esse continua
     reservado para os placeholders "a inserir", como o case PETRONAS em 07):
     controls nativos, então a legenda vive ABAIXO do frame, nunca sobreposta
     (evita disputar espaço com a barra de controle do player). */
  .bandeiras__video { margin-block-start: var(--space-l); }
  .bandeiras__video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: clip;
    background: var(--asfalto);
    margin-block-start: var(--space-l);
  }
  .bandeiras__video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Botão de som sobreposto — o vídeo entra mudo/autoplay (nenhum navegador
     libera autoplay com áudio), então precisa de um jeito visível de ativar
     a narração sem sair do fluxo do vídeo. */
  .video-sound-toggle {
    position: absolute;
    z-index: 1;
    inset-block-end: var(--space-s);
    inset-inline-end: var(--space-s);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(6, 6, 6, .55);
    backdrop-filter: blur(4px);
    color: var(--luz);
    transition: background var(--dur-fast) var(--ease-brake);
  }
  .video-sound-toggle:hover,
  .video-sound-toggle:focus-visible { background: rgba(6, 6, 6, .8); }
  .video-sound-toggle__icon--on { display: none; }
  .video-sound-toggle[aria-pressed="true"] .video-sound-toggle__icon--off { display: none; }
  .video-sound-toggle[aria-pressed="true"] .video-sound-toggle__icon--on { display: block; }
  .bandeiras__video-legenda {
    margin-block-start: var(--space-xs);
    font-family: "JetBrains Mono", monospace;
    font-size: var(--t-label);
    letter-spacing: 0.02em;
    color: var(--luz-2);
  }
  .bandeiras__cta { margin-block-start: var(--space-l); }

  /* ============================================================ CASE PETRONAS (07 · MARCAS & PARCEIROS)
     Não faz mais parte de 06 · BANDEIRAS EMPRESARIAL (o case saiu de lá —
     ver comentário no topo da dobra). Case em destaque, dentro do grid do
     site (não mais full-bleed): vídeo à esquerda, texto à direita com o
     topo do eyebrow alinhado ao topo do frame. Um filete fino separa o case
     da faixa de logos acima, com --space-2xl de respiro de cada lado. */
  .case {
    display: grid;
    gap: var(--space-l);
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-xl);
    /* filete como background (não border) para medir só a área de conteúdo
       do .container — uma border atravessaria o padding até a borda da tela */
    background: linear-gradient(var(--divisor), var(--divisor)) top center / calc(100% - 2 * var(--container-margin)) 1px no-repeat;
  }
  .case__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .case__texto .eyebrow { margin-block-end: var(--space-s); }
  .case__titulo {
    max-width: 20ch; /* 3 linhas: A PETRONAS JÁ REALIZOU / SUA CONVENÇÃO / DE VENDAS AQUI. */
    margin: 0;
    font-size: clamp(2.25rem, 1.3rem + 2.2vw, 3.25rem);
    line-height: 0.94;
    text-wrap: balance;
  }
  .case__apoio {
    max-width: 46ch;
    margin-block: var(--space-s) var(--space-m);
    color: var(--luz-2);
    line-height: 1.6;
  }

  /* Composição equilibrada: o vídeo dita a altura da linha e o texto
     preenche exatamente essa altura — eyebrow no topo do frame, botão
     (margin-top: auto) na base do frame. Se em alguma largura o texto
     ainda for mais alto que o vídeo, o frame centraliza verticalmente
     (align-self: center) e a sobra se divide igual em cima e embaixo,
     em vez de o botão cair sozinho abaixo do vídeo. */
  @media (min-width: 1024px) {
    .case {
      grid-template-columns: 7fr 5fr;
      column-gap: var(--space-xl);
      align-items: stretch;
    }
    .case__media { align-self: center; }
    .case__texto .btn { margin-block-start: auto; }
  }

  /* ============================================================ VIDEO-FRAME
     Placeholder de vídeo com cara de mídia de verdade: 16:9, fundo asfalto
     fixo (não herda o --papel da dobra clara), cantos técnicos na linguagem
     do POV da Caterham, play discreto e legenda/tempo de player. Cores
     escritas com tokens fixos (--asfalto/--papel), nunca --luz, porque
     dentro de .section--paper --luz vira tinta escura. */
  .video-frame {
    --vf-ink: var(--papel);
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: clip;
    color: var(--vf-ink);
    background:
      radial-gradient(120% 90% at 50% 45%, rgba(255, 255, 255, 0.07), transparent 60%),
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 14px),
      var(--asfalto);
  }
  /* cantos técnicos (4 cantoneiras em um único pseudo, via gradientes) */
  .video-frame::before {
    content: "";
    position: absolute;
    inset: var(--space-s);
    pointer-events: none;
    --c: rgba(242, 237, 228, 0.55);
    --l: 22px;
    background:
      linear-gradient(var(--c), var(--c)) top left / var(--l) 1px,
      linear-gradient(var(--c), var(--c)) top left / 1px var(--l),
      linear-gradient(var(--c), var(--c)) top right / var(--l) 1px,
      linear-gradient(var(--c), var(--c)) top right / 1px var(--l),
      linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px,
      linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l),
      linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px,
      linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l);
    background-repeat: no-repeat;
  }
  .video-frame__tag,
  .video-frame__legenda,
  .video-frame__tempo {
    position: absolute;
    font-family: "JetBrains Mono", monospace;
    font-size: var(--t-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.72;
  }
  .video-frame__tag {
    inset-block-start: calc(var(--space-s) + 14px);
    inset-inline-start: calc(var(--space-s) + 14px);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .video-frame__tag::before { /* ponto "REC" no vermelho da marca */
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vermelho-escuro);
    box-shadow: 0 0 0 3px rgba(200, 30, 30, 0.25);
  }
  .video-frame__legenda {
    inset-block-end: calc(var(--space-s) + 14px);
    inset-inline-start: calc(var(--space-s) + 14px);
    max-width: 60%;
    text-transform: none;
    letter-spacing: 0.02em;
  }
  .video-frame__tempo {
    inset-block-end: calc(var(--space-s) + 14px);
    inset-inline-end: calc(var(--space-s) + 14px);
    font-feature-settings: "tnum";
  }
  .video-frame__play {
    position: absolute;
    inset: 50% auto auto 50%;
    width: clamp(56px, 6vw, 80px);
    aspect-ratio: 1;
    translate: -50% -50%;
    border: 1px solid rgba(242, 237, 228, 0.5);
    border-radius: 50%;
    transition: border-color var(--dur-fast) var(--ease-brake), scale var(--dur-fast) var(--ease-brake);
  }
  .video-frame__play::after { /* triângulo do play, ligeiramente à direita do centro óptico */
    content: "";
    position: absolute;
    inset: 50% auto auto 54%;
    translate: -50% -50%;
    border-block: 8px solid transparent;
    border-inline-start: 13px solid var(--vf-ink);
  }
  .video-frame:hover .video-frame__play { border-color: var(--vf-ink); scale: 1.04; }
  .video-frame video,
  .video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
  }
  @media (max-width: 639px) {
    .video-frame__legenda { display: none; } /* no mobile o frame é pequeno demais para 3 rótulos */
  }
  @media (prefers-reduced-motion: reduce) {
    .video-frame__play { transition: none; }
  }

  /* ============================================================ 06 · CONTEÚDO
     Reconstrução 2026-09-24: seção mais curta, prova social viva —
     bastidores, público, vídeo, Instagram — sem repetir pilotos (03) /
     experiências (04) / bandeiras empresarial (05). Duas peças novas:
     .conteudo__showcase (texto curto + CTA de um lado, vídeo pessoas.mp4 do
     outro) e .conteudo__bastidores (trio de fotos + destaque de Instagram).
     A galeria de 4 quadros (Oficina/Auditório/Truck Lounge/Box) e o retrato
     solto da rodada anterior saíram do HTML — CSS removido junto. */
  .conteudo__cta { margin-block-start: var(--space-m); }

  .conteudo__abertura {
    max-width: 24ch;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.75rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  /* Vitrine: texto+CTA de um lado, vídeo do outro. Mobile: o vídeo sobe
     para o topo via order (a leitura do DOM continua texto → vídeo). */
  .conteudo__showcase {
    display: grid;
    gap: var(--space-l);
    margin-block-end: var(--space-xl);
  }
  .conteudo__editorial {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
  }
  .conteudo__editorial p:not(.conteudo__abertura) { max-width: 42ch; color: var(--luz-2); }
  .conteudo__video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: clip;
    background: var(--asfalto-2);
  }
  .conteudo__video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .conteudo__video-legenda {
    margin-block-start: var(--space-xs);
    font-family: "JetBrains Mono", monospace;
    font-size: var(--t-label);
    letter-spacing: 0.02em;
    color: var(--luz-2);
  }
  @media (max-width: 1023.98px) {
    .conteudo__video { order: -1; }
  }
  @media (min-width: 1024px) {
    .conteudo__showcase {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      column-gap: var(--space-2xl);
      align-items: center;
    }
  }

  /* ============================================================ NOS BASTIDORES · HUB DE REDES
     Redesenho 2026-09-25 (pedido direto do usuário): Instagram como
     protagonista — grade editorial ~70% da faixa + coluna lateral ~30%
     para as demais redes. Cabeçalho (eyebrow + lead) segue o container
     normal da seção; o hub em si (grade + coluna) é a peça full-bleed,
     mesma técnica de .frentes/.card-grid-bleed (ver --bleed abaixo). */
  .conteudo__social-lede { max-width: 46ch; color: var(--luz-2); margin-block-start: var(--space-2xs); }

  .conteudo__social-hub {
    display: grid;
    gap: var(--space-l);
    margin-block-start: var(--space-xl);
  }
  .conteudo__social-hub--bleed {
    padding-inline: var(--container-margin);
  }
  @media (min-width: 1024px) {
    .conteudo__social-hub--bleed { padding-inline: 0; }
    .conteudo__social-hub {
      grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
      gap: 0;
    }
  }

  /* Grade do feed: bento editorial, não grid uniforme de widget — 1 card
     em destaque (2x2) + 1 card largo (2x1) quebram a repetição de módulos
     idênticos. gap 2px + fundo --asfalto-2 = mesma costura fina de
     .conteudo__foto (herança direta do trio antigo). */
  .conteudo__feed {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas:
      "a a"
      "b c"
      "d e"
      "f f"
      "g h";
    aspect-ratio: 2 / 5;
    gap: 2px;
    background: var(--asfalto-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .conteudo__feed-item { position: relative; overflow: clip; background: var(--asfalto-2); }
  .conteudo__feed-item:nth-child(1) { grid-area: a; }
  .conteudo__feed-item:nth-child(2) { grid-area: b; }
  .conteudo__feed-item:nth-child(3) { grid-area: c; }
  .conteudo__feed-item:nth-child(4) { grid-area: d; }
  .conteudo__feed-item:nth-child(5) { grid-area: e; }
  .conteudo__feed-item:nth-child(6) { grid-area: f; }
  .conteudo__feed-item:nth-child(7) { grid-area: g; }
  .conteudo__feed-item:nth-child(8) { grid-area: h; }
  .conteudo__feed-link { display: block; position: relative; width: 100%; height: 100%; }
  .conteudo__feed-link picture { display: block; width: 100%; height: 100%; }
  .conteudo__feed-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-drive);
  }
  .conteudo__feed-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6, 6, 6, .85) 0%, rgba(6, 6, 6, 0) 55%);
    opacity: 0;
    transition: opacity var(--dur-medium) var(--ease-brake);
  }
  .conteudo__feed-badge {
    display: none;
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-end: var(--space-2xs);
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(6, 6, 6, .55);
    color: var(--luz);
    backdrop-filter: blur(2px);
  }
  .conteudo__feed-badge--on { display: flex; }

  /* Métricas estilo rede social (curtidas/comentários) — sempre visíveis,
     não só no hover: no touch não existe hover, e o pedido era "bem visual",
     não escondido atrás de interação. Canto oposto ao badge de reel (que
     fica --inline-end) pra nunca colidir. */
  .conteudo__feed-meta {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 3px var(--space-2xs);
    background: rgba(6, 6, 6, .55);
    backdrop-filter: blur(2px);
    color: var(--luz);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.6875rem;
    line-height: 1;
  }
  .conteudo__feed-meta-item { display: inline-flex; align-items: center; gap: 3px; }
  .conteudo__feed-meta svg { flex-shrink: 0; }
  .conteudo__feed-cap {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: var(--space-2xs) var(--space-s);
    font-size: var(--t-small);
    line-height: 1.3;
    color: var(--luz);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur-medium) var(--ease-brake), transform var(--dur-medium) var(--ease-brake);
  }
  @media (hover: hover) and (pointer: fine) {
    .conteudo__feed-link:hover .conteudo__feed-media,
    .conteudo__feed-link:focus-visible .conteudo__feed-media { transform: scale(1.05); }
    .conteudo__feed-link:hover .conteudo__feed-scrim,
    .conteudo__feed-link:focus-visible .conteudo__feed-scrim,
    .conteudo__feed-link:hover .conteudo__feed-cap,
    .conteudo__feed-link:focus-visible .conteudo__feed-cap { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .conteudo__feed-media { transition: none; }
  }

  /* Coluna lateral: painel compacto, separado do feed por um fio — mesma
     linguagem de --divisor usada em toda a página, nunca um card "gamer".
     Redesenho 2026-09-25 (pedido direto do usuário): a coluna vira
     .conteudo__redes-corpo (lista + 1 painel único de preview) — nada de 4
     sub-painéis abrindo em acordeão. */
  .conteudo__redes {
    padding: var(--space-l) var(--gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }
  .conteudo__redes-titulo {
    font-family: var(--ff-text);
    font-weight: 700;
    font-size: var(--t-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .conteudo__redes-handle {
    color: var(--luz-2);
    font-family: "JetBrains Mono", monospace;
    font-size: var(--t-small);
    margin-block-end: var(--space-s);
  }

  .conteudo__redes-corpo { display: flex; flex-direction: column; gap: var(--space-m); }

  .conteudo__redes-lista { list-style: none; margin: 0; padding: 0; }
  .conteudo__redes-link {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding-block: var(--space-xs);
    border-block-start: 1px solid var(--divisor);
    color: var(--luz);
    font-weight: 600;
    font-size: var(--t-small);
    letter-spacing: 0.02em;
    transition: color var(--dur-fast) var(--ease-brake);
  }
  .conteudo__redes-lista li:last-child .conteudo__redes-link { border-block-end: 1px solid var(--divisor); }
  .conteudo__redes-link svg { flex-shrink: 0; color: var(--luz-2); transition: color var(--dur-fast) var(--ease-brake); }
  .conteudo__redes-link span:not(.conteudo__redes-seta) { flex-grow: 1; }
  .conteudo__redes-seta {
    color: var(--luz-2);
    transition: transform var(--dur-fast) var(--ease-brake), color var(--dur-fast) var(--ease-brake);
  }
  /* .is-ativo = a rede que o painel ao lado está mostrando agora (ver
     js/redes-preview.js) — mesmo tratamento visual do :hover/:focus-visible,
     só que dirigido pelo JS (toque, ou o estado inicial no Instagram). */
  .conteudo__redes-link:hover,
  .conteudo__redes-link:focus-visible,
  .conteudo__redes-link.is-ativo {
    color: var(--rede-accent, var(--vermelho));
  }
  .conteudo__redes-link:hover svg,
  .conteudo__redes-link:focus-visible svg,
  .conteudo__redes-link.is-ativo svg,
  .conteudo__redes-link:hover .conteudo__redes-seta,
  .conteudo__redes-link:focus-visible .conteudo__redes-seta,
  .conteudo__redes-link.is-ativo .conteudo__redes-seta {
    color: var(--rede-accent, var(--vermelho));
  }
  .conteudo__redes-link:hover .conteudo__redes-seta,
  .conteudo__redes-link:focus-visible .conteudo__redes-seta,
  .conteudo__redes-link.is-ativo .conteudo__redes-seta {
    transform: translateX(4px);
  }
  @media (prefers-reduced-motion: reduce) {
    .conteudo__redes-link:hover .conteudo__redes-seta,
    .conteudo__redes-link.is-ativo .conteudo__redes-seta { transform: none; }
  }

  /* Acento de marca — só aparece aqui (link ativo + rodapé do painel), nunca
     no resto do site (mono+vermelho). Casa com [data-rede] (link/rodapé) e
     [data-preview] (a peça do painel). */
  [data-rede="instagram"], [data-preview="instagram"] { --rede-accent: #e1306c; }
  [data-rede="linkedin"], [data-preview="linkedin"] { --rede-accent: #0a66c2; }
  [data-rede="tiktok"], [data-preview="tiktok"] { --rede-accent: #25f4ee; }
  [data-rede="youtube"], [data-preview="youtube"] { --rede-accent: #ff0000; }

  /* Painel único: as 4 peças ficam empilhadas na mesma célula (inset:0) e
     só a .is-active tem opacidade — crossfade puro, sem nenhuma delas
     alterar a altura do painel (teria "pulo" entre Instagram/YouTube/etc).
     aspect-ratio:1/1 é o compromisso neutro entre o vertical do
     Instagram/TikTok e o 16:9 de um embed do YouTube (que letterboxa, o que
     é normal pra embed oficial). */
  .conteudo__redes-painel {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: clip;
    background: var(--asfalto-2);
  }
  .conteudo__redes-preview {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity var(--dur-medium) var(--ease-brake);
  }
  .conteudo__redes-preview.is-active { opacity: 1; }
  .conteudo__redes-preview-media { flex: 1 1 auto; min-height: 0; }
  .conteudo__redes-preview-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* LinkedIn institucional e os placeholders pendentes de TikTok/YouTube
     compartilham o mesmo tratamento: ícone grande + 1 linha de texto,
     tingido na cor da marca — nunca um post/print inventado. */
  .conteudo__redes-preview-institucional,
  .conteudo__redes-preview-pendente-box {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    padding: var(--space-l);
    text-align: center;
    background: color-mix(in srgb, var(--rede-accent) 12%, var(--asfalto-2));
    border-block-start: 2px solid var(--rede-accent);
    color: var(--luz-2);
  }
  .conteudo__redes-preview-institucional svg,
  .conteudo__redes-preview-pendente-box svg { color: var(--rede-accent); flex-shrink: 0; }
  .conteudo__redes-preview-institucional p,
  .conteudo__redes-preview-pendente-box p { margin: 0; max-width: 26ch; font-size: var(--t-small); line-height: 1.4; }
  /* Quando o embed oficial (YouTube iframe / TikTok oEmbed) entra por JS,
     ele substitui o placeholder e ocupa o quadro inteiro. */
  .conteudo__redes-preview-pendente-box.is-embed {
    padding: 0;
    background: #000;
    border-block-start: none;
  }
  .conteudo__redes-preview-pendente-box.is-embed iframe,
  .conteudo__redes-preview-pendente-box.is-embed blockquote { width: 100%; height: 100%; border: 0; display: block; }

  .conteudo__redes-preview-rodape {
    flex: 0 0 auto;
    padding: var(--space-xs) var(--space-s);
    background: rgba(6, 6, 6, .55);
    backdrop-filter: blur(2px);
  }
  .conteudo__redes-preview-id {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-family: "JetBrains Mono", monospace;
    font-size: var(--t-label);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--luz);
  }
  .conteudo__redes-preview-id svg { color: var(--rede-accent); }
  .conteudo__redes-preview-rodape p {
    margin: var(--space-3xs) 0 0;
    font-size: var(--t-small);
    color: var(--luz-2);
    line-height: 1.3;
  }
  .conteudo__redes-preview-pendente {
    display: block;
    margin-block-start: var(--space-3xs);
    font-family: "JetBrains Mono", monospace;
    font-size: var(--t-label);
    color: var(--luz-2);
    letter-spacing: 0.02em;
  }
  @media (prefers-reduced-motion: reduce) {
    .conteudo__redes-preview { transition: none; }
  }

  @media (min-width: 1024px) {
    .conteudo__feed {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-template-areas:
        "a a b c"
        "a a d e"
        "f f g h";
      aspect-ratio: 4 / 3;
    }
    .conteudo__redes {
      justify-content: center;
      border-inline-start: 1px solid var(--divisor);
    }
    /* ≥1024px: painel "ao lado" da lista, de verdade — linha, não coluna.
       A lista fica com largura de conteúdo (4 nomes curtos) e o painel
       toma o resto, mas cada um guarda sua própria altura (não é
       align-items:stretch — o painel é grande por causa do aspect-ratio,
       não porque foi esticado até a altura da lista). */
    .conteudo__redes-corpo { flex-direction: row; align-items: flex-start; gap: var(--space-l); }
    .conteudo__redes-lista { flex: 0 1 9.5rem; min-width: 0; }
    .conteudo__redes-painel { flex: 1 1 auto; }
  }

  .btn--xl {
    min-height: 64px;
    padding-inline: clamp(24px, 3vw, 44px);
    gap: var(--space-s);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.1em;
  }
  /* Filete no lugar da seta — mesma reta das legendas, estica no hover. */
  .btn--xl::after {
    content: "";
    flex-shrink: 0;
    width: 28px;
    height: 2px;
    background: currentColor;
    transition: width var(--dur-slow) var(--ease-brake);
  }
  @media (hover: hover) and (pointer: fine) {
    .btn--xl:hover::after { width: 48px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn--xl::after { transition: none; }
  }

  /* ============================================================ 03 · PILOTOS & TIME
     Card-poster compacto (foto de fundo + scrim + texto sobreposto no
     rodapé) — mesma técnica de .frentes__painel/.frentes__media (dobra 02),
     em escala de card, não de painel full-height. Mobile: rail horizontal
     com scroll-snap (grid-auto-columns, 1 card dominante + respiro do
     próximo). Desktop (≥1024px): os 4 lado a lado num grid de 4 colunas,
     mesma altura, sem scroll — nunca 4 blocos de página inteira.
     Estado padrão (2026-09-24, revisão): reportado como "feio" ter todo o
     texto (cargo + nome + credenciais) permanentemente sobre a foto,
     escurecendo o retrato o tempo todo. Agora o padrão mostra só cargo +
     nome, num scrim baixo/discreto; hover (mouse), foco (teclado) ou toque
     (.is-active, ver js/pilotos.js) sobem um scrim mais escuro e revelam
     as credenciais — a foto fica limpa até alguém interagir. */
  .pilotos-time__cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    gap: var(--space-s);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-block: var(--space-l) var(--space-xl);
    scrollbar-width: none;
  }
  .pilotos-time__cards::-webkit-scrollbar { display: none; }

  .piloto-card {
    position: relative;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 3 / 4;
    overflow: clip;
    background: var(--asfalto-2);
  }
  .piloto-card__num {
    position: absolute;
    z-index: 2;
    inset-block-start: var(--space-xs);
    inset-inline-start: var(--space-xs);
    font-family: var(--ff-display);
    font-size: var(--t-small);
    color: var(--vermelho);
    font-feature-settings: "tnum";
    text-shadow: 0 2px 8px rgba(0,0,0,.7);
  }
  .piloto-card__media { position: absolute; inset: 0; }
  .piloto-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-drive);
  }
  .piloto-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6,6,6,.9) 0%, rgba(6,6,6,.5) 20%, rgba(6,6,6,0) 42%, transparent 100%);
    transition: background var(--dur-medium) var(--ease-brake);
  }
  .piloto-card__conteudo {
    position: relative;
    z-index: 1;
    padding: var(--space-s);
  }
  .piloto-card__cargo {
    margin: 0 0 var(--space-3xs);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--luz-2);
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
  }
  .piloto-card__nome {
    margin: 0;
    font-size: var(--t-l);
    line-height: 0.95;
    text-transform: uppercase;
    max-width: none;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
  }
  /* Credenciais: escondidas por padrão (só cargo + nome ficam visíveis
     sobre a foto). max-height anima a "subida" do texto junto com o scrim
     mais escuro — só aparecem em hover/foco/toque (ver seletores abaixo). */
  .piloto-card__creds {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-small);
    color: var(--luz-2);
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--dur-medium) var(--ease-brake), opacity var(--dur-fast) var(--ease-brake), margin-block-start var(--dur-medium) var(--ease-brake);
  }

  .piloto-card:focus-visible { outline: 2px solid var(--vermelho); outline-offset: -2px; }

  .piloto-card.is-active .piloto-card__media::after,
  .piloto-card:focus-visible .piloto-card__media::after {
    background: linear-gradient(0deg, rgba(6,6,6,.97) 0%, rgba(6,6,6,.85) 45%, rgba(6,6,6,.25) 78%, transparent 100%);
  }
  .piloto-card.is-active .piloto-card__creds,
  .piloto-card:focus-visible .piloto-card__creds {
    max-height: 6em;
    opacity: 1;
    margin-block-start: var(--space-2xs);
  }

  @media (hover: hover) and (pointer: fine) {
    .piloto-card:hover .piloto-card__media img { transform: scale(1.06); }
    .piloto-card:hover .piloto-card__media::after {
      background: linear-gradient(0deg, rgba(6,6,6,.97) 0%, rgba(6,6,6,.85) 45%, rgba(6,6,6,.25) 78%, transparent 100%);
    }
    .piloto-card:hover .piloto-card__creds {
      max-height: 6em;
      opacity: 1;
      margin-block-start: var(--space-2xs);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .piloto-card__media img { transition: none; }
    .piloto-card:hover .piloto-card__media img { transform: none; }
  }

  @media (min-width: 1024px) {
    .pilotos-time__cards {
      grid-auto-columns: unset;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-m);
      overflow: visible;
      padding-inline: calc(var(--content-inset) + var(--axis)) var(--content-inset);
    }
    .piloto-card { aspect-ratio: 3 / 3.9; }
    .piloto-card__conteudo { padding: var(--space-m); }
    .piloto-card__num { inset-block-start: var(--space-s); inset-inline-start: var(--space-s); }
    .piloto-card__nome { font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.5rem); }
  }

  /* Bastidor: módulo compacto de Palestras (ex-seção própria, extinta),
     layout original preservado — título (+ eyebrow) à esquerda, texto de
     apoio à direita, 2 colunas alinhadas pela base (≥1024px); empilhado
     no mobile. Funciona como fecho do grid de pilotos logo acima
     (2026-09-25: conteúdo trocado de lugar com o que antes vivia dentro
     do mosaico — "o que eles aprenderam correndo" comunica melhor logo
     após os 4 cards). Sem CTA aqui — o botão vive só dentro do mosaico. */
  .pilotos-time__bastidor {
    display: grid;
    gap: var(--space-s);
    padding-block-start: var(--space-l);
    border-block-start: 1px solid var(--divisor);
  }
  .pilotos-time__bastidor-eyebrow { margin-block-end: var(--space-m); color: var(--luz-2); }
  .pilotos-time__bastidor-titulo { font-size: var(--t-xl); line-height: 0.95; max-width: 14ch; margin: 0; }
  .pilotos-time__bastidor-texto { max-width: 52ch; color: var(--luz-2); }

  @media (min-width: 1024px) {
    .pilotos-time__bastidor {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      align-items: end;
      column-gap: var(--space-xl);
    }
  }

  /* ------------------------------------------------ MOSAICO DO TIME
     Redesenho 2026-09-26 (pedido explícito do usuário: voltar ao layout
     de 2 recortes + painel de texto separado — a versão anterior com
     imagem única full-bleed + vão escuro embutido não dava respiro
     nítido entre o texto e os retratos). Desktop (≥1024): grid de 3
     colunas foto|painel|foto, altura igual nas 3 (stretch do grid) — as
     fotos são a MESMA foto (.time-mosaico-foto), só com object-position
     oposto em cada flanco, então cada lado mostra um recorte diferente
     do mosaico. Painel tem fundo sólido próprio (nunca sobrepõe foto).
     Mobile (<1024): empilha em coluna única, foto → texto → foto, cada
     bloco full-width, foto com altura fixa em clamp. */
  .time-mosaico {
    display: flex;
    flex-direction: column;
    margin-block-start: var(--space-xl);
    background: var(--asfalto-2);
  }
  .time-mosaico__foto {
    margin: 0;
    display: block;
    height: clamp(180px, 46vw, 280px);
    overflow: clip;
  }
  .time-mosaico__foto picture,
  .time-mosaico__foto img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .time-mosaico__foto img {
    object-fit: cover;
    filter: brightness(0.9) saturate(0.94);
  }
  .time-mosaico__foto--esquerda img { object-position: 20% 22%; }
  .time-mosaico__foto--direita img { object-position: 80% 78%; }
  .time-mosaico__centro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-xl) var(--gutter);
  }
  /* Filete vermelho no canto do painel — a "largada" que assina o bloco. */
  .time-mosaico__centro::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--gutter);
    width: 48px;
    height: 2px;
    background: var(--vermelho);
  }
  .time-mosaico__titulo {
    max-width: 18ch;
    font-family: var(--ff-display);
    font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0;
  }
  .time-mosaico__texto {
    max-width: 42ch;
    margin-block-start: var(--space-s);
    color: var(--luz-2);
  }
  .time-mosaico__nota { margin-block-start: var(--space-m); }
  .time-mosaico__cta { margin-block-start: var(--space-l); }

  @media (max-width: 639px) {
    .time-mosaico__cta { width: 100%; }
  }

  @media (min-width: 1024px) {
    .time-mosaico {
      --mosaico-centro: clamp(420px, 36vw, 640px);
      display: grid;
      grid-template-columns: 1fr var(--mosaico-centro) 1fr;
      align-items: stretch;
    }
    .time-mosaico__foto { height: auto; }
    .time-mosaico__centro {
      padding: var(--space-2xl) clamp(28px, 3vw, 56px);
    }
    .time-mosaico__centro::before { inset-inline-start: clamp(28px, 3vw, 56px); }
    .time-mosaico__titulo { font-size: clamp(2rem, 0.6rem + 2.3vw, 3.5rem); }
    .time-mosaico__cta { padding-inline: clamp(24px, 2vw, 44px); }
  }

  @media (min-width: 1440px) {
    .time-mosaico__cta { white-space: nowrap; }
  }

  /* ============================================================ LEGADO · INGO HOFFMANN
     Pausa emocional full-bleed logo após Pilotos & Time (ver comentário no
     HTML). Fora do sistema .section de propósito — mas a seção ANTERIOR
     (.pilotos-time) é um .section normal e carrega padding-block no fim
     (espaço depois de .time-mosaico); pedido do usuário: zero respiro aqui,
     o vídeo cola direto no mosaico. margin-block-start negativo do tamanho
     exato desse padding cancela o espaço sem mexer em .section (usado por
     várias outras dobras). Scrim em duas faixas (topo/base), nunca a cena
     inteira: no mobile .legado__conteudo é flex column com space-between
     (cabeçalho no topo, texto na base, miolo do quadro limpo); no desktop
     os dois se juntam na base (justify-content:flex-end) e o scrim do topo
     some — não precisa mais, o cabeçalho desceu. */
  .legado {
    position: relative;
    margin-block-start: calc(-1 * var(--space-2xl));
    background: var(--asfalto);
  }
  .legado__frame {
    position: relative;
    overflow: clip;
    aspect-ratio: 4 / 5;
  }
  .legado__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .legado__scrim-top {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 36%;
    background: linear-gradient(180deg, rgba(15, 15, 15, .8) 0%, transparent 100%);
    pointer-events: none;
  }
  .legado__scrim-bottom {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 42%;
    background: linear-gradient(0deg, rgba(15, 15, 15, .92) 0%, rgba(15, 15, 15, .5) 55%, transparent 100%);
    pointer-events: none;
  }
  /* pointer-events:none aqui é o que faz o botão de som funcionar: sem
     isso, essa div (z-index:1, inset:0 — cobre o quadro inteiro, mesmo nas
     áreas "vazias" entre eyebrow/título/texto) fica acima de
     .video-sound-toggle na pilha (z-index:auto sempre perde pra z-index:1
     positivo, não importa a ordem no DOM) e rouba todo clique no quadro
     antes de chegar no botão — o toggle nunca disparava, por isso o som
     "não fazia nada". Não precisa reativar pointer-events nos filhos: nenhum
     deles é interativo (só texto). */
  .legado__conteudo {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--gutter);
    pointer-events: none;
  }
  .legado__cabecalho { display: flex; flex-direction: column; gap: var(--space-xs); }
  .legado__eyebrow { color: var(--vermelho); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
  /* Fonte própria (não var(--t-xxl) puro) até 1024px: --t-xxl foi calibrado
     pensando numa coluna quase full-bleed (.h2--statement); aqui o título
     mora dentro de .legado__conteudo com padding, então o mesmo clamp virava
     grande demais em telas médias (~600-1000px) — "LEGADO NÃO"/"FICA
     PARADO." estourava a largura, cada span (bloco fixo) quebrava dentro de
     si mesmo e o overflow-wrap:break-word global (base.css) chegava a
     partir "PARADO." ao meio, e o texto vazava para fora de .legado__frame
     (overflow:clip cortava o topo). .legado__titulo-linha só vira bloco (a
     quebra de linha exata do briefing) a partir de 1024px, onde já cabe —
     abaixo disso o título flui como texto normal e quebra sozinho onde
     houver espaço, nunca no meio de uma palavra. */
  .legado__titulo {
    margin: 0;
    font-size: clamp(2rem, 1.15rem + 5vw, 3rem);
    line-height: 0.98;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .55);
  }
  .legado__lead {
    max-width: 34ch;
    color: var(--luz-2);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
  }

  @media (min-width: 1024px) {
    .legado__frame { aspect-ratio: auto; height: 80vh; min-height: 600px; }
    .legado__scrim-top { display: none; }
    .legado__scrim-bottom { height: 58%; }
    .legado__conteudo {
      justify-content: flex-end;
      gap: var(--space-m);
      padding: var(--space-2xl) var(--content-inset);
    }
    /* max-width em ch some daqui: .legado__cabecalho não tem font-size
       próprio (herda o do body, ~17px) — um 20ch nele computava contra ESSE
       tamanho, não o do título (120px), e travava a coluna em ~240px,
       forçando "LEGADO NÃO"/"FICA PARADO." a quebrar letra a letra. O limite
       de largura certo já é o max-width:14ch do próprio .legado__titulo,
       que carrega seu próprio font-size e computa o ch correto. */
    .legado__titulo { font-size: var(--t-xxl); max-width: 14ch; }
    .legado__titulo-linha { display: block; }
    .legado__lead { font-size: var(--t-m); }
  }

  /* ============================================================ 09 · PALESTRAS */
  /* Os pilotos são o produto; o auditório é o palco. Desktop: palco sticky
     à esquerda (auditório → retrato do piloto em hover/foco, js/palestras.js),
     lista editorial à direita. Mobile: o palco fica só com o auditório e a
     lista vira carrossel de cards com foto (scroll-snap + barra de progresso). */
  .palestras {
    --palco-ease: var(--ease-brake);
    --palco-in: 1100ms;
    background: var(--asfalto-2);
  }

  /* ---- Palco */
  .palestras__palco {
    position: relative;
    overflow: clip;
    aspect-ratio: 16 / 10;
    background: var(--asfalto);
  }
  .palestras__camada {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    /* A camada que SAI espera a que ENTRA cobrir o palco (delay) — crossfade
       de verdade, sem "mergulho" no preto do fundo no meio da troca. */
    transition: opacity 700ms var(--ease-trail) 380ms;
  }
  .palestras__camada.is-active {
    z-index: 2;
    opacity: 1;
    transition: opacity 820ms var(--palco-ease);
  }
  .palestras__camada picture { display: block; height: 100%; }
  .palestras .palestras__camada img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 38%;
    transform: scale(1.045);
    filter: contrast(1.14) brightness(0.78) saturate(0.85);
    transition:
      transform var(--palco-in) var(--palco-ease),
      filter var(--palco-in) var(--palco-ease);
  }
  .palestras .palestras__camada.is-active img {
    transform: scale(1);
    filter: contrast(1) brightness(1) saturate(1);
  }
  .palestras .palestras__camada[data-palco-camada="auditorio"] img { object-position: 42% center; }
  /* Mobile/tablet: só o auditório existe no palco (retratos moram nos cards). */
  .palestras__camada:not([data-palco-camada="auditorio"]) { display: none; }

  /* Sombra de base + legenda do piloto ativo, só quando há piloto no palco. */
  .palestras__palco::after {
    content: "";
    position: absolute;
    inset: 45% 0 0 0;
    z-index: 3;
    background: linear-gradient(0deg, rgba(6, 6, 6, 0.86) 0%, rgba(6, 6, 6, 0) 100%);
    opacity: 0;
    transition: opacity var(--dur-slow) var(--palco-ease);
    pointer-events: none;
  }
  .palestras__palco-legenda {
    position: absolute;
    z-index: 4;
    inset: auto var(--space-l) var(--space-l) var(--space-l);
    display: none;
    align-items: baseline;
    gap: var(--space-s);
    margin: 0;
    font-family: var(--ff-display);
    line-height: 0.85;
    text-transform: uppercase;
    pointer-events: none;
  }
  .palestras__palco-num { color: var(--vermelho); font-size: var(--t-xl); font-feature-settings: "tnum"; }
  .palestras__palco-nome { font-size: var(--t-l); letter-spacing: 0.005em; }
  .palestras__palco.is-piloto::after { opacity: 1; }
  .palestras__palco.is-piloto .palestras__palco-legenda { animation: palco-legenda 900ms var(--palco-ease) both; }
  @keyframes palco-legenda {
    from { opacity: 0; transform: translateY(14px); clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
  }

  /* ---- Título e abertura */
  .palestras__titulo { max-width: none; text-wrap: balance; }
  .palestras__intro { max-width: 36rem; }
  .palestras__intro p + p { margin-block-start: var(--space-2xs); }
  .palestras__intro p:last-child { color: var(--luz-2); }

  /* ---- Lista → carrossel de cards (mobile/tablet) */
  .palestras__lista {
    display: flex;
    gap: var(--space-xs);
    margin-block: var(--space-l) var(--space-s);
    margin-inline: calc(var(--container-margin) * -1);
    padding-inline: var(--container-margin);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-margin);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .palestras__lista::-webkit-scrollbar { display: none; }
  .palestras__piloto {
    position: relative;
    flex: 0 0 min(78%, 22rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    scroll-snap-align: start;
  }
  .palestras__piloto-foto { display: block; overflow: clip; margin-block-end: var(--space-s); background: var(--asfalto); }
  .palestras__piloto-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }
  .palestras__piloto-num {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-start: var(--space-xs);
    font-family: var(--ff-display);
    font-size: var(--t-l);
    line-height: 0.8;
    color: var(--vermelho);
    font-feature-settings: "tnum";
  }
  .palestras__piloto-nome {
    font-family: var(--ff-display);
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
    line-height: 0.92;
    text-transform: uppercase;
    text-wrap: balance;
  }
  .palestras__piloto-temas {
    margin-block-start: var(--space-2xs);
    font-size: var(--t-small);
    line-height: 1.45;
    color: var(--luz-2);
  }

  .palestras__progresso {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-block-end: var(--space-l);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--luz-2);
    font-feature-settings: "tnum";
  }
  .palestras__progresso-num:first-child { color: var(--luz); min-width: 2ch; }
  .palestras__progresso-trilho {
    position: relative;
    flex: 1;
    height: 1px;
    background: var(--divisor);
  }
  .palestras__progresso-trilho > span {
    position: absolute;
    inset: -1px 0;
    background: var(--vermelho);
    transform-origin: left center;
    transform: scaleX(var(--progresso, 0.25));
    transition: transform var(--dur-medium) var(--ease-brake);
  }

  .palestras__nota { color: var(--luz-2); margin-block-end: var(--space-l); }

  @media (min-width: 640px) and (max-width: 1023.98px) {
    .palestras__piloto { flex-basis: min(44%, 22rem); }
  }
  @media (max-width: 639px) {
    .palestras .btn { width: 100%; }
  }

  /* ---- Desktop: split editorial com palco sticky */
  @media (min-width: 1024px) {
    .palestras { padding-block-start: 0; }
    .palestras__grid {
      grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
      gap: clamp(48px, 5vw, 112px);
      align-items: start;
    }
    .palestras__media {
      position: sticky;
      top: 0;
      height: 100svh;
    }
    .palestras__palco { height: 100%; aspect-ratio: auto; }
    .palestras__camada:not([data-palco-camada="auditorio"]) { display: block; }
    .palestras__palco-legenda { display: flex; }
    .palestras .palestras__media:hover .palestras__camada img { transform: scale(1.045); }
    .palestras .palestras__media:hover .palestras__camada.is-active img { transform: scale(1); }

    .palestras__coluna {
      align-self: start;
      padding-block-start: var(--space-2xl);
    }
    .palestras__titulo { font-size: clamp(2.75rem, 0.5rem + 3.6vw, 4.75rem); line-height: 0.92; }
    .palestras__titulo > span { display: block; }

    /* Lista editorial: uma linha grande por piloto, largura total da coluna. */
    .palestras__lista {
      display: block;
      margin: var(--space-xl) 0 var(--space-l);
      padding: 0;
      overflow: visible;
      border-block-start: 1px solid var(--divisor);
    }
    .palestras__piloto {
      grid-template-columns: clamp(3rem, 3.6vw, 4.25rem) minmax(0, 1fr);
      grid-template-areas: "num nome" "num temas";
      column-gap: 0;
      padding-block: clamp(20px, 2.2vw, 36px);
      border-block-end: 1px solid var(--divisor);
      cursor: default;
      outline-offset: -2px;
    }
    /* Filete vermelho que "corre" da esquerda sobre a divisória. */
    .palestras__piloto::after {
      content: "";
      position: absolute;
      inset: auto 0 -1px 0;
      height: 1px;
      background: var(--vermelho);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform var(--dur-slow) var(--ease-drive);
    }
    .palestras__piloto-foto { display: none; }
    .palestras__piloto-num {
      grid-area: num;
      position: static;
      padding-block-start: 0.35em;
      font-family: var(--ff-text);
      font-size: var(--t-small);
      font-weight: 600;
      letter-spacing: 0.08em;
      line-height: 1;
      color: var(--luz-2);
      transition: color var(--dur-medium) var(--ease-brake), transform var(--dur-medium) var(--ease-brake);
    }
    .palestras__piloto-nome {
      grid-area: nome;
      justify-self: start;
      font-size: clamp(2.25rem, 0.9rem + 2.5vw, 4rem);
      line-height: 0.9;
      text-wrap: nowrap;
      transform-origin: left bottom;
      transition:
        transform var(--dur-slow) var(--ease-brake),
        color var(--dur-medium) var(--ease-brake);
    }
    .palestras__piloto-temas {
      grid-area: temas;
      margin-block-start: var(--space-xs);
      font-size: var(--t-body);
      color: rgba(255, 255, 255, 0.52);
      transition: color var(--dur-medium) var(--ease-brake);
    }

    /* Com um piloto em foco, os demais recuam — a lista lê como índice. */
    .palestras__lista.has-active .palestras__piloto:not(.is-active) .palestras__piloto-nome { color: rgba(255, 255, 255, 0.4); }

    .palestras__piloto.is-active .palestras__piloto-num { color: var(--vermelho); transform: translateX(4px); }
    .palestras__piloto.is-active .palestras__piloto-nome { transform: scale(1.045); color: var(--luz); }
    .palestras__piloto.is-active .palestras__piloto-temas { color: var(--luz); }
    .palestras__piloto.is-active::after { transform: scaleX(1); }

    .palestras__progresso { display: none; }
  }

  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .palestras__piloto { cursor: pointer; }
  }

  /* ============================================================ 10 · MARCAS / PETRONAS
     Prova antes de decoração: a foto documenta o case (o endereço onde a
     convenção aconteceu), não é mais um retrato repetido de piloto. */
  /* Composição de case: texto começa colado no título e alinha com o topo
     da foto; a foto sangra até a borda direita (protagonista); a placa de
     marcas fecha a dobra como segundo bloco visual, na largura do container. */
  /* Case premium: o endereço do case (a fachada noturna) em faixa larga de
     borda a borda, e o painel da PETRONAS sobe por cima da borda inferior
     da foto — prova e relato numa peça só. Único ponto da página com
     sobreposição conteúdo/imagem em caixa sólida: é o que dá ao 10 peso de
     "case", distinto dos splits das dobras anteriores. */
  .marcas .section-head { margin-block-end: var(--space-l); }
  .marcas__case {
    display: grid;
    margin-block-end: var(--space-xl);
  }
  .marcas__painel-wrap { position: relative; z-index: 1; width: 100%; } /* .container como item de grid: com margin auto encolheria até o conteúdo */
  .marcas__texto {
    display: grid;
    gap: var(--space-m);
    margin-block-start: calc(var(--space-xl) * -1);
    /* mobile: caixa de borda a borda, texto na margem do container */
    margin-inline: calc(var(--container-margin) * -1);
    padding: var(--space-l) var(--container-margin);
    background: var(--asfalto);
    border-block-start: 2px solid var(--vermelho);
  }
  .marcas__lead {
    margin: 0;
    font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.012em;
    text-wrap: pretty;
    max-width: 30ch;
    color: var(--luz);
  }
  .marcas__apoio {
    margin: 0;
    font-size: var(--t-body);
    line-height: 1.7;
    color: var(--luz-2);
    max-width: 48ch;
  }

  .marcas__media { position: relative; margin: 0; overflow: clip; }
  .marcas__media picture { display: block; overflow: clip; }
  .marcas__media img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: 55% 60%;
    transition: transform var(--dur-slow) var(--ease-drive);
  }
  .marcas__media:hover img { transform: scale(1.03); }
  .marcas__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(0deg, rgba(6, 6, 6, 0.9) 0%, rgba(6, 6, 6, 0.4) 30%, rgba(6, 6, 6, 0) 55%),
      linear-gradient(180deg, rgba(6, 6, 6, 0.45) 0%, rgba(6, 6, 6, 0) 25%);
    pointer-events: none;
  }
  /* Legenda no topo da foto: a base fica para o painel que sobe. */
  .marcas__media figcaption {
    position: absolute;
    z-index: 1;
    inset-block-start: var(--space-m);
    inset-inline: var(--container-margin);
    display: grid;
    gap: var(--space-3xs);
    padding-inline-start: var(--space-xs);
    border-inline-start: 2px solid var(--vermelho);
    font-size: var(--t-small);
    line-height: 1.35;
    color: var(--luz-2);
  }
  .marcas__media figcaption strong {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--luz);
  }

  /* Faixa de marcas: a arte é PNG transparente e pousa direto no fundo da
     página — sem caixa, sem fundo próprio. O título fica fora da arte, como
     cabeçalho da faixa, sobre um filete que atravessa o container. */
  .marcas__faixa { display: grid; gap: var(--space-l); }
  .marcas__faixa .container { inline-size: 100%; }
  .marcas__subtitulo {
    position: relative;
    margin: 0;
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--divisor);
    font-size: var(--t-l);
    line-height: 0.95;
  }
  .marcas__subtitulo::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline-start: 0;
    inline-size: 64px;
    block-size: 2px;
    background: var(--vermelho);
  }
  /* Estreito: a arte (7 colunas) encolheria os logos a ~40px — vira uma
     faixa rolável na lateral, com os logos da borda cortados sinalizando
     que há mais. */
  .marcas__logos-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .marcas__logos-wrap::-webkit-scrollbar { display: none; }
  .marcas__logos { display: block; }
  .marcas__logos img {
    display: block;
    box-sizing: content-box;
    width: 760px;
    max-width: none;
    height: auto;
    padding-inline: var(--container-margin);
  }

  @media (min-width: 1024px) {
    /* Foto alta de borda a borda; o painel (7/12 do eixo) sobe ~um terço
       da própria altura sobre a base da foto; a legenda vai para o canto
       superior direito, longe do painel. */
    .marcas__media img { aspect-ratio: auto; height: clamp(30rem, 44vw, 46rem); }
    .marcas__media figcaption {
      inset-block-start: var(--space-l);
      inset-inline: auto var(--content-inset);
      max-width: 22rem;
    }
    .marcas__texto {
      grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
      column-gap: var(--space-l);
      align-items: start;
      width: min(100%, 60rem);
      margin-block-start: calc(clamp(7rem, 11vw, 11rem) * -1);
      /* a caixa avança --space-l à esquerda; o TEXTO fica no eixo do título */
      margin-inline-start: calc(var(--space-l) * -1);
      padding: var(--space-l);
    }

    /* A faixa usa a largura cheia do container (do numeral 10 até a borda
       direita da foto): é o gesto largo que assenta a dobra depois do case
       em duas colunas. A arte já traz respiro interno nos logos, então o
       gap até o título fica curto. */
    .marcas__faixa { gap: var(--space-m); }
    .marcas__logos-wrap { overflow: visible; padding-inline: var(--content-inset); }
    .marcas__logos img {
      width: 100%;
      padding-inline: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .marcas__media:hover img { transform: none; }
  }

  /* ============================================================ 12 · CTA FINAL
     Bookend do Hero: mesma família de imagem, agora quieta — a página fecha
     em clímax controlado, não num bloco vazio de texto sobre nada. */
  .cta-final {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80svh;
    text-align: center;
    overflow: clip;
  }
  .cta-final__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  .cta-final__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3); }
  .cta-final__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.86) 45%, rgba(8,8,8,.94) 100%);
  }
  /* Bloco largo: a largura é ditada pela headline, não pelo texto de apoio
     (antes 52ch em corpo de texto ≈ 500px espremia a H2 em uma palavra/linha). */
  .cta-final__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: var(--space-2xl);
  }
  .cta-final__titulo {
    font-size: clamp(2.5rem, 0.9rem + 6.2vw, 7.25rem);
    line-height: 0.92;
    max-width: none;
    margin-block: var(--space-s) var(--space-m);
  }
  /* Mobile: texto corrido com balance → 3–4 linhas equilibradas.
     A partir de 48rem: duas linhas fixas "QUAL PROJETO SUA EMPRESA / QUER CRIAR?". */
  @media (min-width: 48rem) {
    .cta-final__titulo span { display: block; }
  }
  .cta-final__inner .lead { max-width: 40ch; margin-inline: auto; }
  .cta-final__ctas { display: flex; flex-direction: column; gap: var(--space-m); align-items: center; margin-block-start: var(--space-l); }
  .cta-final__ctas .btn--ghost {
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--luz-2);
  }
  .cta-final__ctas .btn--ghost:hover { background: transparent; text-decoration-color: var(--luz); }

  /* ============================================================ MICRO-INTERAÇÕES · zoom em imagens ao passar o mouse */
  .ecossistema__peca picture {
    overflow: clip;
  }
  .ecossistema__peca img {
    transition: transform var(--dur-slow) var(--ease-drive);
  }
  .ecossistema__peca:hover img {
    transform: scale(1.06);
  }
  @media (prefers-reduced-motion: reduce) {
    .ecossistema__peca:hover img {
      transform: none;
    }
  }

  /* ============================================================ FOOTER */
  .footer { padding-block: var(--space-2xl); background: var(--asfalto); border-block-start: 1px solid var(--divisor); }
  .footer__marca { margin-block-end: var(--space-s); }
  .footer__marca img { width: 160px; height: auto; }
  .footer__slogan { color: var(--luz-2); margin-block-end: var(--space-l); }
  .footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
    margin-block-end: var(--space-l);
    padding-block-end: var(--space-l);
    border-block-end: 1px solid var(--divisor);
    font-size: var(--t-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .footer__links a { color: var(--luz-2); transition: color var(--dur-fast) var(--ease-brake); }
  .footer__links a:hover { color: var(--luz); }
  .footer__contato { display: grid; gap: var(--space-s); font-size: var(--t-small); color: var(--luz-2); margin-block-end: var(--space-l); }
  .footer__contato a { color: var(--luz); }
  .footer__social {
    display: flex;
    gap: var(--space-s);
    margin-block-end: var(--space-l);
    list-style: none;
    padding: 0;
  }
  .footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--divisor);
    color: var(--luz-2);
    transition: color var(--dur-fast) var(--ease-brake),
      border-color var(--dur-fast) var(--ease-brake),
      transform var(--dur-medium) cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .footer__social a:hover,
  .footer__social a:focus-visible {
    color: var(--vermelho);
    border-color: var(--vermelho);
    transform: translateY(-4px) scale(1.15);
  }
  @media (prefers-reduced-motion: reduce) {
    .footer__social a {
      transition: color var(--dur-fast) var(--ease-brake), border-color var(--dur-fast) var(--ease-brake);
    }
    .footer__social a:hover,
    .footer__social a:focus-visible {
      transform: none;
    }
  }
  .footer__copy { font-size: var(--t-label); color: var(--luz-2); }

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

/* ============================================================ HERO · cascata de entrada
   Fora de @layer components de propósito: a ordem de layers (tokens.css)
   é reset, base, layout, type, components, motion-base, utilities — regras
   de motion-base sempre vencem components no mesmo elemento/propriedade
   (transition-delay incluso, via o shorthand `transition` do reveal
   genérico em base.css). Para o hero entrar em cascata (eyebrow → título →
   texto → CTAs 1-2-3) sem alterar o reveal genérico de nenhuma outra seção,
   o override precisa estar neste MESMO layer, com seletor mais específico
   (prefixo .hero) que a regra genérica `.js-motion [data-reveal].is-in`. */
@layer motion-base {
  .js-motion .hero .eyebrow.is-in { transition-delay: 0ms; }
  .js-motion .hero .hero__title.is-in { transition-delay: 90ms; }
  .js-motion .hero .hero__copy.is-in { transition-delay: 170ms; }
  .js-motion .hero .hero__ctas .btn:nth-child(1).is-in { transition-delay: 260ms; }
  .js-motion .hero .hero__ctas .btn:nth-child(2).is-in { transition-delay: 330ms; }
  .js-motion .hero .hero__ctas .btn:nth-child(3).is-in { transition-delay: 400ms; }
}

/* ============================================================ ECOSSISTEMA · DUAS FRENTES
   Mesmo motivo do risco da transição do Hero: o eixo central "se traça" ao
   entrar em cena, as fotos assentam com leve escala (não só fade) e as
   palavras-chave entram em sequência curta — motion só onde ajuda a
   explicar a relação entre os dois universos (nunca decoração solta). */
@layer motion-base {
  .js-motion .frentes__eixo { height: 0; }
  .js-motion .frentes__eixo.is-in {
    height: 100%;
    transition: height var(--dur-slow) var(--ease-drive);
  }

  .js-motion .frentes__media { transform: scale(1.05); }
  .js-motion .frentes__media.is-in {
    transform: scale(1);
    transition: opacity var(--dur-slow) var(--ease-brake), transform var(--dur-slow) var(--ease-brake);
  }

  .js-motion .frentes__tags li:nth-child(1).is-in { transition-delay: 0ms; }
  .js-motion .frentes__tags li:nth-child(2).is-in { transition-delay: 60ms; }
  .js-motion .frentes__tags li:nth-child(3).is-in { transition-delay: 120ms; }
  .js-motion .frentes__tags li:nth-child(4).is-in { transition-delay: 180ms; }
  .js-motion .frentes__tags li:nth-child(5).is-in { transition-delay: 240ms; }
  .js-motion .frentes__tags li:nth-child(6).is-in { transition-delay: 300ms; }
  .js-motion .frentes__tags li:nth-child(7).is-in { transition-delay: 360ms; }

  .js-motion .piloto-card:nth-child(1).is-in { transition-delay: 0ms; }
  .js-motion .piloto-card:nth-child(2).is-in { transition-delay: 80ms; }
  .js-motion .piloto-card:nth-child(3).is-in { transition-delay: 160ms; }
  .js-motion .piloto-card:nth-child(4).is-in { transition-delay: 240ms; }
}