/* ==========================================================================
   ARQUIBANCADA — COMPONENTES  (reescrito do zero em 2026-08-25)

   POR QUE FOI REESCRITO
   A versão anterior empilhava foto e texto no hero, então a altura era a
   SOMA das duas — e o CTA caía fora da dobra. Eu respondi com degraus de
   media query por altura de tela, cada um contradizendo o anterior. Ficou
   inconsistente porque o layout não era flexível: era rígido com remendos.

   OS TRÊS PRINCÍPIOS DESTA VERSÃO

   1. SOBREPOR EM VEZ DE EMPILHAR. No hero, foto e texto dividem a mesma
      célula de grid. A altura vira o MAIOR dos dois, não a soma. O CTA cabe
      por construção, sem nenhuma media query de altura.

   2. DIMENSIONAMENTO INTRÍNSECO EM VEZ DE BREAKPOINT. `clamp`, `min` e
      `flex-wrap` resolvem a adaptação. Breakpoint só onde a COMPOSIÇÃO muda
      de ideia, nunca para consertar tamanho.

   3. FLUXO EM VEZ DE CAIXA. O ritmo vertical vem de um utilitário único
      (`.fluxo`). Itens não vivem presos em trilhas fixas: eles declaram a
      largura que preferem e se acomodam.

   Tudo em rem. Contrastes anotados foram medidos.
   ========================================================================== */


/* ==========================================================================
   FLUXO E CONTINÊNCIA
   ========================================================================== */

.container {
  inline-size: min(100% - (var(--pad-container) * 2), var(--largura-container));
  margin-inline: auto;
}

/* Ritmo vertical. Um lugar, uma regra. `--fluxo` sobrescreve por bloco. */
.fluxo > * + * { margin-block-start: var(--fluxo, var(--e-5)); }
.fluxo-apertado { --fluxo: var(--e-3); }
.fluxo-largo { --fluxo: var(--e-7); }

.secao { padding-block: var(--espaco-secao); }
.secao--sutil { background: var(--color-surface-sutil); }

/* Medida de linha: o texto não usa a largura toda porque pode. */
.prosa { max-inline-size: 46ch; }
.prosa-curta { max-inline-size: 34ch; }


/* ==========================================================================
   TIPOGRAFIA DE COMPOSIÇÃO
   Escala fluida: um valor cobre de 320px a ultrawide sem breakpoint.
   ========================================================================== */

.display {
  /* A escala responde à LARGURA e à ALTURA. Só com `vw`, um notebook HD
     (1900×790) renderizava 104px de display e o hero comia 585px dos 790 —
     tela larga não significa tela alta. `svh` no meio do `min()` faz a tela
     baixa reduzir o título em vez de empurrar o resto para fora. */
  font-size: clamp(2.25rem, min(8vw, 14svh), 6rem);
  line-height: 1.1;              /* piso medido da Archivo: 1,08 */
  font-variation-settings: "wdth" var(--wdth-display), "wght" 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.titulo-secao {
  font-size: clamp(1.75rem, min(5vw, 9svh), 3.25rem);
  line-height: 1.12;
  font-variation-settings: "wdth" var(--wdth-display), "wght" 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  /* Em REM, nao em `ch`.

     O `ch` mede o avanco do algarismo `0`, e num display em CAIXA ALTA
     condensado ele mente: medido na Archivo `wdth 75` peso 800, `15ch` rende
     13,7 caracteres reais, ~9% a menos que o numero sugere. Era o que fazia
     "O que dizem nossos visitantes" quebrar em TRES linhas com 1120px de
     container disponivel: o titulo estava travado em 411,84px, 37% do
     espaco, e "NOSSOS VISITANTES" sozinho pede 450px.

     32rem foi escolhido por varredura, nao por gosto: 30rem e o limiar onde
     os cinco titulos da pagina caem em duas linhas, e 34rem ja colapsa
     "O museu abre em 2027" para uma linha so. 32rem fica no meio, com folga
     para traducao mais longa em EN e ES sem sair das duas linhas. */
  max-inline-size: 32rem;
}

.texto-guia {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
}


/* ==========================================================================
   CABEÇALHO
   Flex com wrap: sem media query e sem menu falso. Em tela estreita a nav
   quebra de linha sozinha.
   ========================================================================== */

.cabecalho {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--color-surface);
  border-block-end: 2px solid var(--color-regua);
  /* O desfoque fica aqui, estático, e não na camada de movimento: enquanto o
     fundo é opaco ele não faz diferença nenhuma, e quando a camada 2 troca o
     fundo para `--color-header-rolado` (86% de branco) ele já está no lugar.
     Pôr o desfoque dentro do keyframe faria o cabeçalho piscar ao começar. */
  -webkit-backdrop-filter: blur(0.75rem) saturate(1.1);
  backdrop-filter: blur(0.75rem) saturate(1.1);
}

.cabecalho .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-6);
  padding-block: var(--e-3);
}

.marca {
  font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
  font-variation-settings: "wdth" var(--wdth-display), "wght" 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* A nav NÃO quebra linha: rola na horizontal quando não cabe.
   Medido em 320px com wrap: a nav ia para três linhas e o cabeçalho ficava
   com 208px — 37% da tela gasta em navegação, e o hero era empurrado para
   fora da dobra. O culpado era o header, não o hero.
   No site real isto vira menu mobile via shadcn; aqui a tira rolável é a
   degradação honesta, e não finge ter um menu que não existe. */
.nav { overflow-x: auto; scrollbar-width: thin; max-inline-size: 100%; }
.nav ul { display: flex; flex-wrap: nowrap; gap: var(--e-5); }

.nav a {
  display: inline-flex;
  align-items: center;
  color: var(--color-fg);
  text-decoration: none;
  font-size: var(--text-meta);
  font-variation-settings: "wdth" var(--wdth-corpo), "wght" 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
  white-space: nowrap;
  min-block-size: var(--altura-alvo-conforto);
}
.nav a:hover { color: var(--color-enfase); text-decoration: underline; }


/* ==========================================================================
   HERO — uma FAIXA: bloco de cor vizinho da foto, unidos por uma costura

   Refeito do zero em 2026-08-26, sobre `docs/research/hero-referencias-futebol.md`.

   A VERSÃO ANTERIOR e por que ela não cumpria o papel. Ela punha o texto SOBRE
   a foto e viabilizava o contraste com duas camadas translúcidas (um degradê
   por cima da foto inteira e um piso liso sob o texto). Medido a 1442×732: o
   painel cobria **83% do hero** e a foto aparecia em **92px de céu**. A 390×844
   sobravam 49% de foto descoberta, quase toda céu vazio. E a diagonal separava
   **foto de foto** — dois pedaços do mesmo céu com opacidades diferentes — o que
   não forma aresta nenhuma: lê como artefato de renderização.

   O dilema era de mecanismo, não de ajuste: texto sobre foto obriga a inventar
   uma camada para viabilizar o contraste, e é essa camada que apaga a foto.
   Tirar a camada perde o contraste; manter perde a foto. Medição do extremo
   desse caminho, no Barça: título amarelo sobre foto clara, **1,59:1**.

   OS QUATRO PRINCÍPIOS DESTA VERSÃO (H1–H5 da pesquisa)

   1. FAIXA, NÃO CORTINA. A altura é um número declarado (`--altura-hero`), não
      `100vh` e não o que a foto pediu. Allianz: 226px. Museu do Futebol: 360px.

   2. O BLOCO É VIZINHO DA FOTO. O texto vive sobre `--color-bloco`, a foto
      ocupa a outra parte da faixa e corre por baixo do bloco. A diagonal é a
      costura entre dois materiais — é isso que a faz ler como assinatura.

   3. CONTRASTE NUNCA ENCOSTA NA FOTO. Sem véu, sem degradê, sem
      `backdrop-filter`. Branco sobre `#0F2143` = 15,92:1, sempre, e trocar a
      foto não obriga a revalidar nada. (Os limiares de translucidez medidos na
      ADR-0011 continuam válidos — o hero é que deixou de precisar deles.)

   4. O DADO OPERACIONAL É O SEGUNDO ELEMENTO MAIS ALTO. 20px em ambas as
      referências, contra 14–16px da descrição.

   Mobile-first: a faixa empilha com a FOTO EM CIMA (medido no Museu do Futebol
   a 390px, e já aprovado para 375px na Parte 3.6 da pesquisa anterior).
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  /* `clip` nos dois eixos: a costura é feita com margem negativa, e sem o clip
     o bloco vazaria por cima da faixa de aviso. */
  overflow: clip;
  background: var(--color-bloco);
  display: grid;
  /* Empilhado: foto em cima com altura própria, bloco embaixo com a altura do
     conteúdo. A foto NUNCA dita a altura do bloco (regra 4 da linguagem).

     UMA coluna, declarada. O bloco e o texto ocupam a MESMA célula da linha 2,
     e sem a coluna explícita o auto-placement do grid dava a cada um a sua:
     medido em 390px, o hero saía com trilhas de 88px e 302px, a foto espremida
     num canto e o texto empurrado para a direita. */
  grid-template-columns: 1fr;
  /* `1fr auto`: o BLOCO pede a altura do conteúdo dele e a foto fica com o
     resto. É a ordem certa da dependência — a foto nunca dita a altura do
     bloco (regra 4 da linguagem), e o texto nunca é espremido por ela. */
  grid-template-rows: 1fr auto;
  min-block-size: var(--altura-hero);
}

.hero__foto {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Enquadramento ajustado por foto. Nesta, o assunto é a bacia — gramado e
     cadeiras — no terço médio. Puxar para 52% tira o guindaste de obra que
     aparece no céu (a foto é de abril de 2013, antes da reabertura) e mantém
     o gramado inteiro. */
  object-position: center 52%;
}

/* Puro grafismo: a costura. É `aria-hidden` no HTML porque não é conteúdo.
   Em tela estreita a aresta é FULL-BLEED e por isso usa o outro ângulo da
   linguagem (`--corte-diagonal`, ~3,4°), não `--diag-tan` (18,17°). Um corte
   de 18° numa largura de 390px desceria 128px e viraria a faixa inteira —
   a distinção entre os dois ângulos já está registrada em `tokens.css`. */
.hero__bloco {
  grid-area: 2 / 1;
  /* Translucido, mas SUTIL. `--color-painel` e alfa 0,90 -- o token existe com
     este nome e este valor justamente porque, nas palavras do proprio
     `tokens.css`, "o painel do hero carrega texto grande e CTA e nao pode
     ficar no limite".

     O que a translucidez custa em contraste, medido no pior caso (foto branca
     por baixo): branco cai de 15,92:1 para **11,89:1** e o ambar do titulo de
     7,49:1 para **5,59:1**. Os dois continuam longe do minimo. A 0,72 -- o
     alfa do veu -- o ambar cairia para ~4,3:1 e reprovaria.

     No mobile o bloco fica ABAIXO da foto, sobre o fundo opaco do proprio
     hero, entao a translucidez nao tem o que revelar e o painel le como
     solido. E o comportamento certo: nao ha foto ali para mostrar. */
  background: var(--color-painel);
  -webkit-backdrop-filter: blur(0.25rem) saturate(1.05);
  backdrop-filter: blur(0.25rem) saturate(1.05);
  clip-path: polygon(0 var(--corte-diagonal), 100% 0, 100% 100%, 0 100%);
  /* Sobe por cima da foto para a diagonal comer a foto, e não deixar frincha. */
  margin-block-start: calc(var(--corte-diagonal) * -1);
}

/* O texto ocupa a mesma célula do bloco e usa `.container`: alinha exatamente
   com a marca do cabeçalho e com todas as seções abaixo. Alinhar pelo padding
   do bloco daria um alinhamento parecido, e parecido é o que se enxerga. */
.hero__texto {
  grid-area: 2 / 1;
  z-index: 1;
  align-self: center;
  display: grid;
  justify-items: start;
  gap: var(--e-4);
  padding-block: calc(var(--corte-diagonal) + var(--e-5)) var(--e-7);
  color: var(--color-fg-invertido);
}

/* Display próprio do hero, um degrau abaixo do `.display` global.
   Medido: com o `.display` global (96px a 1442px) o conteúdo pedia 477px numa
   faixa de 448 e estourava. A assinatura da Arquibancada é o CONTRASTE de
   escala entre o display e a meta de 13px, não o valor absoluto do display. */
.hero__titulo {
  margin: 0;
  font-size: clamp(2.75rem, 6.6vw, 5.75rem);
  line-height: 1.1;              /* piso da linguagem; tinta da Archivo: 1,08 */
  font-variation-settings: "wdth" var(--wdth-display), "wght" 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  /* Trava a medida para o texto nunca cruzar a costura no desktop. Medido:
     46px de folga ate a costura na linha mais larga.

     Aqui o `ch` FICA, ao contrario do `.titulo-secao`, e a razao e que ele
     escala junto com o `font-size` do `clamp` -- que e exatamente o que uma
     medida de titulo deve fazer. Trocar por `rem` fixo quebraria esse
     acoplamento.

     Mas nao leia `15ch` como "15 caracteres": em caixa alta condensada isto
     rende **13,7 caracteres reais** (medido na Archivo `wdth 75` peso 800).
     Quem for escrever copy para esta caixa usa 13,7, nao 15. */
  max-inline-size: 15ch;
}

/* Kicker. Nomeia a categoria do produto, que o titulo nao diz.

   DIVERGE do item 3 da revisao de 25/08 da ADR-0011, que cortou o rotulo por
   ser tique de template. A objecao de la era a rotulo VAZIO -- "Rio de Janeiro"
   embaixo do nome do Maracana nao informa ninguem. Este informa: diz que o que
   esta a venda e um tour. Registrado na ADR, nao contrabandeado.

   Vive em SEGUNDO PLANO. Recuar contraste e legitimo; recuar abaixo do minimo
   nao e. Branco a 62% compoe 6,87:1 sobre o bloco -- calculado, nao escolhido
   no olho. Ele nao concorre com o display; so situa. */
.hero__kicker {
  margin: 0;
  font-size: var(--text-meta);
  line-height: 1.2;
  font-variation-settings: "wdth" var(--wdth-corpo), "wght" 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
  color: var(--color-fg-invertido-suave);
}

/* Linha de apoio. Existe na pagina de PRODUTO, onde o titulo e o nome do
   produto e nao diz o que ele e. Na Home ela foi cortada (Opcao A da pesquisa
   de copy); aqui ela e o unico lugar que descreve o passeio acima da dobra. */
/* Tudo que e link dentro do hero vive sobre o bloco escuro. Sem isto a
   trilha herda a cor de texto de superficie clara e some. */
.hero__texto a:not(.botao) { color: var(--color-fg-invertido); }
.hero__texto .trilha { color: var(--color-fg-invertido-suave); }

.hero__apoio {
  margin: 0;
  font-size: var(--text-corpo);
  line-height: 1.6;
  max-inline-size: 38ch;
  color: var(--color-fg-invertido);
}

/* So a palavra de destaque leva cor. Verde, nao ambar: o ambar daria 7,49:1 e
   passaria, mas ele e a cor de ACAO e e so o CTA. Se a palavra do titulo tambem
   for ambar, o botao deixa de ser a unica coisa ambar da tela e perde o sinal.
   Ver o token `--color-enfase-sobre-bloco`. */
.hero__enfase { color: var(--color-enfase-sobre-bloco); }

/* Os fatos operacionais.

   Mecanismo transcrito do Booking.com, via Mobbin, com as imagens conferidas:
   fato operacional e UMA UNIDADE com icone -- `(relogio) Duration: 6 hours
   30 minutes` -- nunca uma string corrida com middots, que era o que estava
   aqui. Na pagina de produto deles os atributos aparecem como badges logo
   abaixo do titulo, e e essa a forma adotada.

   Continua valendo o H4 da pesquisa de hero: o dado operacional e o segundo
   elemento mais alto da faixa, acima da descricao. O que muda e a FORMA, nao
   o peso na hierarquia.

   Sem media query: o `flex-wrap` poe uma unidade por linha quando as duas nao
   cabem lado a lado. Verificado em 390px. */
.hero__fatos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
}

.hero__fatos li {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.2;
  font-variation-settings: "wdth" var(--wdth-titulo), "wght" 600;
  color: var(--color-fg-invertido);
  /* Contorno de leitura, nao superficie de componente interativo: o 1.4.11 nao
     se aplica. O que precisa passar e o TEXTO, branco sobre o bloco. A lamina
     a 6% escurece o fundo em vez de clarear, entao o par so melhora. */
  background: rgba(255, 255, 255, 0.10);
  border-radius: var(--raio);
}

/* --- Sombra lateral: escurece um lado da foto, deixa o outro limpo ---
   Usada no hero da pagina de produto. Nao ha bloco, nao ha diagonal e nao ha
   fio: e uma lamina preta sobre a foto inteira, chapada do lado do texto e
   aberta do outro. Ver o comentario de `--sombra-lateral` em `tokens.css`
   para o motivo do plato e para o contraste medido. */
.hero__sombra {
  grid-area: 1 / 1;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--sombra-lateral);
  pointer-events: none;
}

.hero__fatos svg {
  inline-size: 1.125em;
  block-size: 1.125em;
  flex: none;
  fill: var(--color-enfase-sobre-bloco);
}

/* O kicker cola no titulo. Com o `gap` uniforme do `.hero__texto` os tres
   elementos ficam equidistantes, e ai leem como uma lista de tres coisas do
   mesmo peso -- que e justamente o que a Opcao A existe para desfazer.
   O kicker pertence ao titulo; o dado e que e o segundo bloco. */
.hero__kicker { margin-block-end: calc(var(--e-4) * -1); }

.hero__texto > .botao { margin-block-start: var(--e-2); }



@media (min-width: 768px) {
  /* Lado a lado. A faixa tem altura declarada e o bloco ocupa 58% dela —
     a mesma proporção medida na Allianz (bloco de 742 numa faixa de 1280). */
  .hero {
    grid-template-rows: none;
    grid-template-columns: 1fr;
    block-size: var(--altura-hero);
    align-items: center;
  }

  /* `grid-area: 1 / 1` nos três filhos é o que faz a faixa virar UMA célula.
     Sem isto, o bloco continua com o `grid-row: 2` do mobile — e o bloco de
     contenção de um filho absoluto de grid é a ÁREA DE GRID dele, não o
     padding box do pai. Medido antes da correção: o bloco vinha 14,6px mais
     baixo que o hero, e como o deslocamento da costura é calculado sobre a
     altura da FAIXA, o ângulo saía 18,72° em vez de 18,17°. Errar o ângulo
     por meio grau é errar a constante que a linguagem existe para fixar. */
  .hero__foto {
    grid-area: 1 / 1;
    position: absolute;
    inset: 0;
    z-index: 0;
    object-position: center 55%;
  }

  /* A costura vertical. O deslocamento é derivado da ALTURA da faixa pela
     tangente da linguagem, então o ângulo é exatamente 18,17° e não depende
     da largura da tela. É o mesmo caminho da Allianz, que fixa a altura em
     226px e o deslocamento em 72px (tan = 0,3186 → 17,66°).

     Em porcentagem isto não funcionaria: o ângulo passaria a variar com a
     altura do bloco, que é o defeito registrado em M3. */
  .hero__bloco {
    grid-area: 1 / 1;
    position: absolute;
    z-index: 1;
    /* So o topo e ancorado. A altura e declarada COM transbordo, para o
       parallax nunca expor a borda de baixo do bloco - ver o comentario do
       `--hero-transbordo` em `tokens.css`. O excedente morre no
       `overflow: clip` do hero. */
    inset-block-start: 0;
    block-size: calc(var(--altura-hero) * var(--hero-transbordo));
    inset-inline-start: 0;
    inline-size: var(--largura-bloco-hero);
    margin-block-start: 0;
    clip-path: polygon(
      0 0,
      100% 0,
      calc(100% - var(--costura-hero)) 100%,
      0 100%
    );
  }

  .hero__texto {
    grid-area: 1 / 1;
    position: relative;
    z-index: 3;
    padding-block: var(--e-6);
    gap: var(--e-5);
  }
}

/* ==========================================================================
   BOTÕES
   Dois CTAs: o contraste do PREENCHIMENTO contra o que está atrás muda com a
   superfície (1.4.11). Sobre claro, verde 5,45:1. Dentro do bloco escuro,
   âmbar 7,49:1 — o verde ali daria 2,92:1 e reprovaria.
   ========================================================================== */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  min-block-size: var(--altura-alvo-conforto);
  background: var(--color-cta);
  color: var(--color-cta-fg);
  font-size: var(--text-meta);
  font-variation-settings: "wdth" var(--wdth-corpo), "wght" 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 0;
  border-radius: var(--raio);
  text-decoration: none;
  cursor: pointer;
}
.botao:hover { background: var(--color-cta-hover); }

.sobre-bloco .botao { background: var(--color-cta-no-bloco); color: var(--color-cta-no-bloco-fg); }
.sobre-bloco .botao:hover { background: var(--color-cta-no-bloco-hover); }

.botao--contorno {
  background: transparent;
  color: var(--color-enfase);
  border: 2px solid var(--color-enfase);
}
.botao--contorno:hover { background: var(--color-surface-sutil); }

.botao--icone {
  padding: var(--e-3);
  min-inline-size: var(--altura-alvo-conforto);
  background: transparent;
  color: var(--color-fg);
  border: 2px solid var(--color-regua);
}
.botao--icone:hover { background: var(--color-surface-sutil); }
.botao--icone:disabled { opacity: 0.35; cursor: not-allowed; }

.icone-externo { inline-size: 1em; block-size: 1em; fill: currentColor; flex: none; }


/* ==========================================================================
   RÉGUA — um dos três elementos do contraste de escala
   ========================================================================== */

.regua {
  block-size: var(--regua-pesada);
  inline-size: 7.5rem;
  max-inline-size: 40%;
  background: var(--color-grafismo);
  border: 0;
  margin: 0;
  transform-origin: left center;
}


/* ==========================================================================
   CARTÕES — itens de fluxo, não trilhas de grid

   `flex: 1 1 min(100%, 20rem)` deixa cada cartão pedir a largura que quer e
   se acomodar. Com 1, 2, 3 ou 4 itens o resultado é equilibrado sem tocar em
   CSS — o pedido da Tainã na ADR-0005 — e sem trilha fixa forçando um item
   solitário a esticar pela largura toda.
   ========================================================================== */

.cartoes { display: flex; flex-wrap: wrap; gap: var(--gap-grid); align-items: stretch; }

.cartao {
  flex: 1 1 min(100%, 20rem);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--espaco-card);
  background: var(--color-surface);
  border: var(--regua-fina) solid var(--color-borda);
  border-block-start: 2px solid var(--color-regua);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
}

.cartao__figura {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-surface-sutil);
}
.cartao__figura img,
.destaque__figura img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.cartao h3 { margin: 0; }
.cartao > :last-child { margin-block-start: auto; }

.preco {
  font-size: 1.0625rem;
  font-variation-settings: "wdth" var(--wdth-titulo), "wght" 700;
}


/* ==========================================================================
   DESTAQUE — o adicional
   Um item só não deve esticar como se fosse três.
   ========================================================================== */

.destaque {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-5) var(--e-6);
  padding-block-start: var(--e-5);
  border-block-start: 2px solid var(--color-regua);
}
.destaque__figura {
  flex: 0 1 12rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--color-surface-sutil);
}
.destaque__texto { flex: 1 1 min(100%, 22rem); display: grid; gap: var(--e-2); }


/* ==========================================================================
   SEÇÃO VELADA — foto de fundo com véu liso
   Texto medido contra o véu (6,43:1), nunca contra a foto.
   ========================================================================== */

.velada {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--color-fg-invertido);
  background: var(--color-bloco);
}
.velada__fundo { position: absolute; inset: 0; z-index: -2; }
.velada__fundo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Véu liso (a garantia) + degradê por cima (o efeito). Mesma divisão de
   trabalho do hero. */
.velada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-veu);
}
.velada__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--degrade-foto);
}
.velada .titulo-secao,
.velada .texto-guia { color: var(--color-fg-invertido); }

/* Corte diagonal reaproveitável entre seções.

   A PADDING TEM DE CRESCER JUNTO COM O CORTE, e isto não é ajuste de gosto —
   é a geometria do clip. A aresta de cima vai de `y = corte` em x=0 até
   `y = 0` em x=100%. O texto não mora em x=0 nem em x=100%: mora na coluna
   do `.container`, que a 1442px começa em x=181. Ali a aresta está em
   `corte × (1 − 181/1427)` = 76px — e a padding de seção, de 96px, deixava
   só **53px de folga no topo e −11px na base**. Negativo: a última linha do
   parágrafo passava 11px POR BAIXO da aresta, ou seja, entrava no corte.

   Somar o corte inteiro à padding resolve os dois lados de uma vez e mantém
   a simetria, porque a aresta de baixo é a mesma reta espelhada. Medido
   depois: 107px de folga em cima e 107px embaixo.

   Vale para qualquer seção que use estes utilitários, hoje e depois: quem
   corta a caixa na diagonal devolve na padding o que o corte tirou. */
.corte-topo {
  margin-block-start: calc(-1 * var(--corte-diagonal));
  clip-path: polygon(0 var(--corte-diagonal), 100% 0, 100% 100%, 0 100%);
  padding-block-start: calc(var(--espaco-secao) + var(--corte-diagonal));
}
.corte-base {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--corte-diagonal)));
  padding-block-end: calc(var(--espaco-secao) + var(--corte-diagonal));
}
.corte-topo.corte-base {
  clip-path: polygon(0 var(--corte-diagonal), 100% 0, 100% 100%, 0 calc(100% - var(--corte-diagonal)));
}


/* ==========================================================================
   DEPOIMENTOS — citação dominante, sem caixa
   Estrutura vista no Mobbin (Airbnb). Descartados de lá: estrela, avatar e
   data — puxam para o genérico, e estrela flerta com a marcação `Review`,
   proibida neste projeto.
   ========================================================================== */

.depoimentos { display: flex; flex-wrap: wrap; gap: 0; }

.depoimento {
  flex: 1 1 min(100%, 18rem);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--e-4);
  padding: var(--e-6) var(--e-5) var(--e-6) 0;
  border-block-start: 2px solid var(--color-regua);
}
.depoimento + .depoimento {
  border-inline-start: var(--regua-fina) solid var(--color-borda);
  padding-inline-start: var(--e-5);
}

.depoimento blockquote { margin: 0; }
.depoimento blockquote p {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.45;
  font-variation-settings: "wdth" 92, "wght" 500;
  letter-spacing: -0.01em;
  max-inline-size: none;
}
.depoimento cite {
  font-style: normal;
  font-size: var(--text-meta);
  font-variation-settings: "wdth" var(--wdth-corpo), "wght" 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
  color: var(--color-fg-suave);
}


/* ==========================================================================
   GALERIA — scroll-snap com botões
   2.5.7 Dragging Movements (AA) exige alternativa a arrastar.
   ========================================================================== */

.galeria__trilho {
  display: flex;
  gap: var(--gap-grid);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block-end: var(--e-2);
  scroll-padding-inline: var(--pad-container);
}
.galeria__item {
  flex: 0 0 min(82%, 26rem);
  scroll-snap-align: start;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--color-surface-sutil);
  box-shadow: var(--sombra-1);
}
.galeria__item img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.galeria__controles { display: flex; gap: var(--e-2); margin-block-start: var(--e-3); }


/* ==========================================================================
   FAIXA DE AVISO OPERACIONAL
   Fica DEPOIS do hero: Bruno Rodrigues registrou no kickoff que abrir o site
   com uma negativa prejudica a experiência, e medindo ela custava altura de
   dobra. Nunca sticky — 2.4.11.
   ========================================================================== */

.aviso {
  background: var(--color-bloco);
  color: var(--color-fg-invertido);
  font-size: var(--text-meta);
  font-variation-settings: "wdth" var(--wdth-corpo), "wght" 600;
}
.aviso .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  padding-block: var(--e-3);
}
.aviso a { color: var(--color-cta-no-bloco); }

/* --- A variante que vive DENTRO do hero, por cima da foto ---
   Fica aqui, e não junto do hero, porque é um modificador de `.aviso` e
   precisa vir DEPOIS na cascata. As duas regras têm a mesma especificidade
   (0,1,1 e 0,1,0), então quem vence é a ordem no arquivo. Escrita lá em cima,
   ela era silenciosamente anulada pelas duas linhas acima — medido: o fundo
   computava `rgb(15,33,67)` opaco e o link continuava âmbar.

   `align-self: start` põe no topo da faixa; `grid-area: 1 / 1` vale nos dois
   breakpoints, porque a linha 1 é a foto no mobile e a célula única no
   desktop. NUNCA `position: fixed` nem `sticky` — 2.4.11. */
.hero__aviso {
  grid-area: 1 / 1;
  align-self: start;
  z-index: 3;
  inline-size: 100%;
  /* Camada LISA de cor conhecida. Verde de acento por decisão do Marcos em
     2026-08-26 — antes era o véu azul. Alfa 0,90, medido em 6,30:1 com texto
     branco no PIOR caso, que é foto branca por baixo. Ver o comentário do
     token: a 0,72 este verde cairia para ~4,4:1 e reprovaria o 1.4.3. */
  background: var(--color-aviso-no-hero);
  -webkit-backdrop-filter: blur(0.5rem) saturate(1.1);
  backdrop-filter: blur(0.5rem) saturate(1.1);
  border-block-end: 1px solid rgba(255, 255, 255, 0.16);
}

/* Branco, não âmbar. Sobre o bloco sólido o âmbar dá 7,49:1; sobre este véu
   com foto clara embaixo o fundo composto vira ~#526078 e o âmbar cai para
   3,02:1 — reprova o 1.4.3. O sublinhado fica porque cor não pode ser o
   único sinal de link (1.4.1). */
/* O botao de fechar. `margin-inline-start: auto` empurra para a ponta sem
   precisar de um wrapper: o container do aviso ja e flex. */
.aviso__fechar {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px, o alvo de conforto. O piso da norma e 24px (2.5.8 AA), mas um X
     no canto e o controle mais facil de errar no toque. */
  inline-size: var(--altura-alvo-conforto);
  block-size: var(--altura-alvo-conforto);
  padding: 0;
  border: 0;
  border-radius: var(--raio);
  background: transparent;
  color: var(--color-fg-invertido);
  cursor: pointer;
}

.aviso__fechar svg {
  inline-size: 1rem;
  block-size: 1rem;
  fill: currentColor;
}

.aviso__fechar:hover { background: rgba(255, 255, 255, 0.16); }

/* O foco global e verde-700 -- a MESMA cor da faixa. Ali ele seria invisivel,
   e indicador de foco invisivel reprova o 2.4.7, que e AA. Sobre a faixa o
   anel passa a ser branco: 6,30:1 contra o verde composto. */
.hero__aviso :focus-visible { outline-color: var(--color-fg-invertido); }

.hero__aviso a {
  color: var(--color-fg-invertido);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}


/* ==========================================================================
   TRILHA (breadcrumb)
   Promovida de `produto.html` para ca em 2026-08-26, no SEGUNDO uso, que e
   `creditos.html` -- a regra que o proprio arquivo de rota declara.
   Sem `display: flex` os `<li>` voltam a ser `list-item` e a trilha empilha
   uma linha por item, que foi como ela nasceu na pagina nova.
   ========================================================================== */

.trilha { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.trilha a { color: var(--color-fg-suave); }


/* ==========================================================================
   RODAPÉ
   O símbolo de acessibilidade linkando para a página de Acessibilidade é
   texto expresso de lei — art. 63 § 1º da Lei 13.146/2015.
   ========================================================================== */

.rodape {
  border-block-start: 2px solid var(--color-regua);
  padding-block: var(--espaco-bloco);
}
.rodape__grade { display: flex; flex-wrap: wrap; gap: var(--e-6) var(--e-8); }
.rodape__grade > * { flex: 1 1 min(100%, 14rem); }
.rodape a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-block-size: var(--altura-alvo-conforto);
  color: var(--color-fg);
  text-decoration: none;
}
.rodape a:hover { text-decoration: underline; }
.rodape__legal { color: var(--color-fg-suave); font-size: var(--text-meta); }

.simbolo-acessibilidade { inline-size: 1.5rem; block-size: 1.5rem; fill: currentColor; flex: none; }