/* Landing /bpc-loas-autismo · estilo e animação exclusivos desta página. Namespace: au- */

/* ===== Freio de movimento ===== */
/* animation e transition são mortas globalmente por esta regra, para qualquer propriedade
   animada, inclusive translate, scale e rotate isolados (que "transform: none" não alcança
   e por isso não está aqui). animation-timeline não precisa de override próprio: sem
   animation-name (zerado por "animation: none"), não existe animação para uma timeline reger.
   Todo efeito que dependa de um deslocamento estático (por exemplo, translate para centralizar
   uma camada) precisa trazer o próprio override sob html[data-motion="reduced"]. */
html[data-motion="reduced"] .au-anim,
html[data-motion="reduced"] .au-anim * {
  animation: none !important;
  transition: none !important;
}

.au-motion-toggle {
  position: fixed;
  right: 1rem;
  bottom: 5.5rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  /* Discreto de proposito: e um controle de conforto, nao um CTA. 32px atende o alvo
     minimo de ponteiro do WCAG 2.2 (24px) no desktop; no mobile os 44px de toque voltam
     na media query. Meio transparente em repouso, inteiro no hover e no foco. */
  min-height: 32px;
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--creme);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(42,16,19,.08);
  opacity: .55;
  transition: opacity .2s ease;
}
.au-motion-toggle:hover { opacity: 1; }
.au-motion-toggle:focus-visible {
  opacity: 1;
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}
/* No mobile o botao deixa de ser fixo: fixo a viewport, qualquer canto que ele ocupe acaba
   cobrindo texto em algum ponto de scroll (a versao anterior, bottom 5rem + left 1rem,
   pousava exatamente sobre a primeira linha do h1 na posicao de carga em 375px). Em fluxo,
   no fim do hero, ele nunca cobre nada e continua com os mesmos 44px de altura de toque.
   margin-top de 1.5rem (24px) porque .au-camada-3 vaza 20px abaixo do hero (bottom: -20px)
   e, como elemento posicionado com blend multiply, pintaria por cima do topo do botao. */
@media (max-width: 900px) {
  .au-motion-toggle {
    position: static;
    display: flex;
    width: fit-content;
    margin: 1.5rem auto var(--space-3);
  }
}

/* ===== CTA visível sem JS ===== */
/* style.css (imutável) zera .hero-cta com opacity: 0 em qualquer página do site;
   o padrão pressupõe que o main.js vai revelar o bloco (montagem do hero). Nesta
   página a mesma classe é reaproveitada em quatro blocos (hero, relógio, quatro
   direitos, trilha do adulto), e nenhum deles depende de JS para funcionar: os
   CTAs são links com href, não handlers. Sem esta regra, com JavaScript
   desativado ou o main.js falhando, esses botões ficariam invisíveis para
   sempre. autismo.css carrega depois de style.css, então a ordem já bastaria,
   mas a regra fica explícita para não depender de ordem de carregamento. Não
   renomear .hero-cta: main.js também usa esse seletor para esconder o balão
   flutuante de WhatsApp quando um CTA de contato está visível. */
/* sem !important: declaracao !important venceria a animacao de entrada na cascata.
   autismo.css carrega depois de style.css, entao a ordem ja decide. */
.hero-cta { opacity: 1; }

/* ===== Hero: entrada coreografada e respiracao continua ===== */
/* A pagina precisa estar VIVA sem depender de scroll. Duas pecas:
   1. entrada: o hero se monta na frente da pessoa ao carregar (copy em cascata, foto
      subindo). Tudo CSS por tempo, sem JS: toca sempre, e o freio mata na hora
      (a regra global zera animation, e o estado base de tudo e o final visivel).
   2. respiracao: as ondas flutuam em ciclos longos e dessincronizados, via a
      propriedade `translate`, que compoe com o `transform` do parallax de scroll
      sem conflito (sao propriedades separadas). */
@keyframes au-entrar {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.au-hero-copy .eyebrow  { animation: au-entrar .55s cubic-bezier(.2, .7, .2, 1) both .05s; }
.au-hero-copy h1        { animation: au-entrar .65s cubic-bezier(.2, .7, .2, 1) both .18s; }
.au-hero-copy .au-hero-sub { animation: au-entrar .6s cubic-bezier(.2, .7, .2, 1) both .34s; }
.au-hero-copy .hero-cta { animation: au-entrar .6s cubic-bezier(.2, .7, .2, 1) both .48s; }
.au-hero-copy .au-hero-oab { animation: au-entrar .55s cubic-bezier(.2, .7, .2, 1) both .6s; }
.au-hero-foto { animation: au-entrar .8s cubic-bezier(.2, .7, .2, 1) both .22s; }

/* amplitude e ritmo calibrados pra percepcao: 14px em 13s dava ~1px/s, invisivel.
   26px em ciclos de 7 a 12s da 4 a 6px/s no meio do ciclo, movimento que o olho pega
   sem virar parque de diversao. O pulso da luz respira o brilho junto. */
@keyframes au-respirar-a { from { translate: 0 0; } to { translate: 0 26px; } }
@keyframes au-respirar-b { from { translate: 0 0; } to { translate: 0 -22px; } }
@keyframes au-pulsar-luz { from { opacity: .48; } to { opacity: .78; } }
/* a respiracao e aplicada junto com o parallax DENTRO do bloco @supports do hero,
   porque o shorthand animation reseta animation-timeline: as duas animacoes precisam
   ser declaradas juntas, cada uma com a sua timeline (scroll pro parallax, tempo pra
   respiracao). Ver o bloco "parallax" mais abaixo. */

/* ===== Hero, três planos ===== */
.au-hero {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  padding: var(--space-5) 0 var(--space-6);
  isolation: isolate;
}

/* Fix round 1: as camadas usavam width em % e height:auto, entao a altura
   renderizada crescia junto com a largura do viewport (aspect ratio da
   imagem preservado). O bloco de texto tem altura quase fixa (nao escala
   com a largura), entao a partir de ~600-680px as camadas cresciam pra
   dentro do texto, derrubando o contraste. Correcao estrutural: cada
   camada agora tem largura 100% (cobre a horizontal por definicao, sem
   precisar de sobra) e ALTURA PROPRIA em px, independente da largura do
   viewport. object-fit:cover corta a imagem pra preencher essa altura fixa
   sem distorcer nem esticar; object-position ancora o corte no lado certo
   da arte (a onda da frente sempre mostra a base da arte, por exemplo).
   Como a altura nao depende mais da largura, essa mesma regra vale para
   todas as larguras, do mobile ao desktop grande, sem precisar de override
   na media query de 900px. */
.au-hero-camadas {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}

.au-camada {
  position: absolute;
  left: 0;
  width: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
/* object-position em cada camada mira onde a arte de fato tem tinta: as
   ondas (fundo/meio/frente) concentram o desenho perto da base do proprio
   viewBox, entao "bottom" mostra a arte de verdade em vez de recortar so
   a margem vazia de cima. A luz e um glow radial espalhado pelo canvas
   inteiro, entao a posicao nao muda muito o resultado; deixei no centro. */
/* Profundidade em vez de listra. Tres coisas separam os planos, e nenhuma inventa cor:
   1) opacidade em degraus mais largos (.22 / .40 / .58 no lugar de .30 / .55 / .85), o que
      derruba a dominancia da camada da frente, que era a mais pesada de todas;
   2) perspectiva atmosferica: o fundo entra desfocado e um pouco mais largo, o meio quase
      nao, e a frente fica nitida. Distancia le como falta de foco, nao como cinza;
   3) mais respiro vertical entre as duas camadas de cima, para elas nao correrem coladas.
   A camada do fundo ainda foi espelhada no eixo X (scale negativo): a diagonal dela passou
   a correr no sentido contrario as outras duas, entao as faixas se cruzam de leve em vez de
   atravessarem o quadro paralelas. O espelho e do FUNDO de proposito. Espelhar a do meio
   jogaria a parte densa da arte para o lado da coluna de texto, e espelhar a da frente
   deixava um platô reto e longo na base do hero, que era a propria queixa da listra.
   Medido pixel a pixel numa captura do Chrome (texto escondido, so o fundo composto), o
   pior fundo sob o h1 saiu de 3,76:1 para 5,59:1. */
.au-camada-1 { top: -56px; height: 212px; object-position: bottom center; opacity: .22; scale: -1.12 1; filter: blur(2.5px); }
/* top 240, nao 84: a faixa cruzava exatamente na linha dos olhos da foto e disputava
   atencao com o olhar. No ombro ela emoldura em vez de cortar. A mascara horizontal
   resolve o efeito colateral da descida: atras do subtitulo (coluna esquerda) a faixa
   cai pra 30% da forca e o contraste do texto passa; atras da foto segue cheia. */
.au-camada-2 {
  top: 240px; height: 190px; object-position: bottom center; opacity: .40; filter: blur(.6px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.20) 0 42%, #000 62%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.20) 0 42%, #000 62%);
}
.au-luz      { top: -70px; height: 300px; object-position: center;        opacity: .62; mix-blend-mode: screen; }
.au-camada-3 {
  position: absolute;
  left: 0; bottom: -20px;
  width: 100%; height: 140px;
  object-fit: cover; object-position: bottom center;
  z-index: 1;
  opacity: .58;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* parallax: cada plano em velocidade propria, amarrado ao scroll da pagina */
@supports (animation-timeline: scroll()) {
  /* O percurso inteiro acontece nos primeiros 800px de scroll, que e o trecho em que o hero
     ainda esta na tela. Sem o range, a timeline e o documento inteiro (~7000px) e o movimento
     dilui a ~0,03px por pixel de scroll: parallax imperceptivel, foi a queixa do cliente.
     Direcao: fundo e luz sobem, as duas ondas da frente descem. Os planos se separam de
     verdade, e as camadas descendo se AFASTAM do texto do hero, entao o contraste medido em
     repouso so melhora durante o scroll. */
  /* duas animacoes por camada: o parallax na timeline de scroll e a respiracao na
     timeline de tempo (ciclos longos, dessincronizados). O parallax anima transform,
     a respiracao anima translate: propriedades separadas, compoem sem conflito.
     As listas de timeline e range sao posicionais e acompanham a ordem do shorthand. */
  .au-camada-1 { animation: au-parallax-lento  linear both, au-respirar-a 9s ease-in-out infinite alternate;
                 animation-timeline: scroll(), auto; animation-range: 0px 1500px, normal; }
  .au-camada-2 { animation: au-parallax-desce  linear both, au-respirar-b 7s ease-in-out infinite alternate;
                 animation-timeline: scroll(), auto; animation-range: 0px 1500px, normal; }
  .au-luz      { animation: au-parallax-medio  linear both, au-respirar-b 11s ease-in-out infinite alternate,
                 au-pulsar-luz 8s ease-in-out infinite alternate;
                 animation-timeline: scroll(), auto, auto; animation-range: 0px 1500px, normal, normal; }
  .au-camada-3 { animation: au-parallax-mergulha linear both, au-respirar-a 12s ease-in-out infinite alternate;
                 animation-timeline: scroll(), auto; animation-range: 0px 1500px, normal; }
}
@keyframes au-parallax-lento    { to { transform: translateY(-70px); } }
@keyframes au-parallax-medio    { to { transform: translateY(-140px); } }
@keyframes au-parallax-desce    { to { transform: translateY(110px); } }
@keyframes au-parallax-mergulha { to { transform: translateY(190px); } }

.au-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-4);
  align-items: center;
}

.au-hero-copy h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--vinho);
  margin: .4rem 0 1.1rem;
  text-wrap: balance;
}
.au-hero-sub {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.au-hero-oab {
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* O eyebrow do hero herda color: var(--bronze) de style.css (imutavel), pensado para o creme
   liso. Sobre as camadas de onda o fundo nunca e creme liso: medindo o pixel mais escuro
   dentro da caixa do rotulo, a razao dava 4,04:1, abaixo do piso de 4,5:1 para texto normal
   (o rotulo tem .72rem). Mesmo tom escurecido ja usado neste arquivo em .au-card-num e nos
   marcadores de mito x verdade: #6E5530, que sobe a razao para 5,59:1 no mesmo pixel. */
.au-hero-copy .eyebrow { color: #6E5530; }

.au-hero-visual { position: relative; }
.au-hero-foto {
  position: relative;
  z-index: 1; /* a foto passa NA FRENTE do fio dourado, que corre por tras dela */
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(42,16,19,.22));
}

/* Imagem que nao carrega nao deixa buraco: o alt fica legivel na tipografia da marca.
   Sem background-color em lugar nenhum: sara-recorte.webp e transicao-organica.svg sao
   recortes com canal alpha, e pintar a caixa preenche a transparencia com um retangulo
   visivel atras do recorte, anulando justamente o recorte. A protecao contra imagem
   quebrada aqui e tipografica, nao pintada: so a foto tem alt de verdade (as camadas e a
   onda sao decorativas, alt vazio, e nao mostram nada quando falham). */
.au-hero-foto {
  color: var(--ink);
  font-family: var(--mono);
  font-size: .8rem;
}

/* A linha continua que se desenha. Ela nao e um enfeite pousado sobre a advogada: entra
   pela esquerda, atravessa POR TRAS da foto (z-index abaixo dela) e sai pelo outro lado,
   costurando a coluna da imagem ao resto do bloco. O laco unico no meio ecoa o monograma
   dela, um S de traco unico, e o simbolo do infinito. Fica na altura do terco inferior da
   foto, que no desktop cai no vao entre as colunas, abaixo dos botoes e a direita da linha
   da OAB, sem passar por tras de nenhum texto. */
.au-linha {
  position: absolute;
  left: -18%; right: -26%;
  bottom: 14%;
  width: auto;
  translate: none;
  z-index: 0;
  overflow: visible;
}
.au-linha-traco {
  stroke-dasharray: 1440;
  stroke-dashoffset: 1440;
}
/* O fio do hero se desenha por TEMPO, no carregamento, nao por scroll. Amarrado a view()
   ele so completava conforme o hero saia da tela: a animacao acontecia fora da vista, e o
   cliente reclamou (com razao) que nao via animacao nenhuma. Above the fold, entrada por
   tempo e o unico jeito de a pessoa assistir ao traco correr. O fecho da pagina continua
   scroll-driven, la faz sentido porque o elemento entra na tela rolando. */
.au-linha-traco {
  animation: au-desenhar 1.9s cubic-bezier(.55, 0, .25, 1) .5s both;
}
@keyframes au-desenhar { to { stroke-dashoffset: 0; } }

/* sem suporte a scroll-driven: linha ja desenhada, camadas paradas.
   Dois guards separados de proposito: um navegador pode suportar
   animation-timeline: scroll() sem suportar view() (guards nao sao a
   mesma feature), e sem esse segundo guard a linha ficaria com
   stroke-dashoffset cheio (invisivel) pra sempre nesse navegador. */
@supports not (animation-timeline: scroll()) {
  .au-linha-traco { stroke-dashoffset: 0; }
}
@supports not (animation-timeline: view()) {
  .au-linha-traco { stroke-dashoffset: 0; }
}
/* freio ligado: idem */
html[data-motion="reduced"] .au-linha-traco { stroke-dashoffset: 0 !important; }

@media (max-width: 900px) {
  .au-hero-grid { grid-template-columns: 1fr; }
  /* A copy vem primeiro no mobile, e a foto depois. A pagina e destino de anuncio pago:
     quem chega precisa ler a promessa antes de ver a imagem, senao a primeira dobra
     nao comunica nada. Sem `order`, a ordem visual acompanha a ordem do DOM. */
  .au-hero-visual { max-width: 340px; margin-inline: auto; }

  /* Com a copy no topo, a camada do meio caia em cima do subtitulo e derrubava o
     contraste para 2,99:1, abaixo do minimo AA de 4,5:1. Ela desce para a metade de
     baixo do hero, onde mora a foto, e o bloco de texto fica sobre creme limpo. */
  .au-camada-2 { top: 55%; }
}

/* ===== O relógio ===== */
.au-relogio {
  padding: var(--space-6) 0;
  background: var(--greige);
  position: relative;
}
.au-relogio h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  color: var(--vinho);
  max-width: 22ch;
  margin: .4rem 0 1rem;
}
.au-relogio-intro { max-width: 54ch; color: var(--ink-soft); }

.au-trilho {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.au-marco {
  /* mesmo motivo dos cards: o fio cruza a secao e passa atras dos marcos */
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--creme);
  min-width: 12ch;
}
.au-marco-rotulo {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vinho);
}
.au-marco-nota { font-size: .88rem; color: var(--ink-soft); }

.au-vao { text-align: center; }
.au-barras {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  height: 92px;
}
.au-barras i {
  display: block;
  width: 100%;
  max-width: 26px;
  height: 100%;
  background: var(--bronze-soft);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
  /* estado padrao e CHEIO: sem JavaScript nao ha quem anime, entao nada pode nascer vazio */
  scale: 1 1;
  opacity: .95;
}
.au-vao-legenda {
  margin-top: .6rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* As barras tocam por TEMPO, disparadas quando a secao entra na tela (autismo.js poe
   .is-contando no #relogio). Scroll-driven aqui era ilegivel: quem rola em velocidade
   normal atravessa o range num instante e encontra as 12 barras ja formadas, que foi
   exatamente a queixa do cliente. Com tempo, a sequencia dura ~2,6s e e assistivel
   em qualquer velocidade de dedo. Sem JS a classe au-js nao existe no <html> e as
   barras nascem cheias (o estado padrao das barras e o cheio). */
html.au-js #relogio:not(.is-contando) .au-barras i { scale: 1 0; opacity: .35; }
#relogio.is-contando .au-barras i { animation: au-brotar .55s cubic-bezier(.2, .7, .2, 1) both; }
#relogio.is-contando .au-barras i:nth-child(1)  { animation-delay: .10s; }
#relogio.is-contando .au-barras i:nth-child(2)  { animation-delay: .28s; }
#relogio.is-contando .au-barras i:nth-child(3)  { animation-delay: .46s; }
#relogio.is-contando .au-barras i:nth-child(4)  { animation-delay: .64s; }
#relogio.is-contando .au-barras i:nth-child(5)  { animation-delay: .82s; }
#relogio.is-contando .au-barras i:nth-child(6)  { animation-delay: 1.00s; }
#relogio.is-contando .au-barras i:nth-child(7)  { animation-delay: 1.18s; }
#relogio.is-contando .au-barras i:nth-child(8)  { animation-delay: 1.36s; }
#relogio.is-contando .au-barras i:nth-child(9)  { animation-delay: 1.54s; }
#relogio.is-contando .au-barras i:nth-child(10) { animation-delay: 1.72s; }
#relogio.is-contando .au-barras i:nth-child(11) { animation-delay: 1.90s; }
#relogio.is-contando .au-barras i:nth-child(12) { animation-delay: 2.08s; }
/* from explicito obrigatorio: com .is-contando aplicado o estado base da barra ja e o
   cheio, entao um keyframe so com "to" herdaria from = cheio e nada animaria */
@keyframes au-brotar {
  from { scale: 1 0; opacity: .35; }
  to   { scale: 1 1; opacity: .95; }
}

/* freio: barras ja cheias, sem sequencia */
html[data-motion="reduced"] .au-barras i { scale: 1 1 !important; opacity: .95 !important; animation: none !important; }

@media (max-width: 900px) {
  .au-trilho { grid-template-columns: 1fr; }
  .au-barras { height: 72px; }
}

/* ===== Pilha grudada ===== */
.au-pilha { padding: var(--space-6) 0; }
.au-pilha h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  color: var(--vinho);
  max-width: 24ch;
  margin: .4rem 0 var(--space-4);
}

.au-cards { display: grid; gap: var(--space-3); }

.au-card {
  /* z-index 2 poe o card ACIMA do fio da pagina (z 1): e o que faz o fio mergulhar
     atras dos cards e reaparecer embaixo. Entre cards, a ordem do DOM continua
     decidindo, porque todos tem o mesmo z. */
  z-index: 2;
  position: sticky;
  top: 96px;
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--creme);
  box-shadow: 0 -6px 24px rgba(42,16,19,.06);
}
.au-card:nth-child(1) { top: 96px; }
.au-card:nth-child(2) { top: 112px; }
.au-card:nth-child(3) { top: 128px; }
.au-card:nth-child(4) { top: 144px; }

/* --bronze (#8C6B3E) sobre --creme mede 4,70:1: passa AA (4,5:1) mas com folga de só 4,4%.
   Texto pequeno (.72rem), então escurecido só aqui: #6E5530 sobre --creme mede 6,71:1
   (49% de folga). --bronze original continua intacto para os usos maiores, onde é
   identidade da marca (style.css não foi tocado). */
.au-card-num {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: #6E5530;
}
.au-card h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  color: var(--vinho);
  margin: .3rem 0 .6rem;
}
.au-card p { max-width: 62ch; color: var(--ink-soft); margin: 0; }

/* em telas baixas sticky vira armadilha: o card mais alto que a viewport trava o scroll */
@media (max-height: 620px), (max-width: 900px) {
  .au-card { position: static; box-shadow: none; }
}
html[data-motion="reduced"] .au-card { position: static; box-shadow: none; }

/* ===== Mito x verdade ===== */
.au-mito { padding: var(--space-6) 0; background: var(--greige); }
.au-mito h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  color: var(--vinho);
  max-width: 24ch;
  margin: .4rem 0 var(--space-4);
}
/* achado na verificacao final: .au-adulto-onda (imagem decorativa da secao seguinte,
   position:absolute, translate -46% no eixo Y para cobrir a emenda entre as secoes)
   e um elemento POSICIONADO, entao pinta por cima de todo conteudo em fluxo normal
   do documento, independente da ordem no DOM. Na largura testada isso cobria o
   terceiro par (o ultimo antes da secao do adulto), escondendo o texto de verdade
   por tras da onda. position + z-index aqui colocam a lista no mesmo grupo de
   pintura da onda, na frente dela, sem mudar a cobertura visual da onda sobre o
   fundo vazio da emenda (que continua coberto nas 4 larguras validadas na Task 8). */
.au-mito-lista { display: grid; gap: var(--space-3); position: relative; z-index: 1; }

.au-par {
  display: grid;
  gap: .5rem;
  padding: var(--space-3);
  background: var(--creme);
  border-left: 3px solid var(--bronze-soft);
  border-radius: var(--radius);
}
.au-falso {
  margin: 0;
  color: var(--vinho);
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: var(--bronze-soft);
  text-decoration-thickness: 2px;
}
.au-certo {
  margin: 0;
  color: var(--ink);
  /* máscara horizontal: a verdade cobre o mito, de fora para dentro */
  clip-path: inset(0 100% 0 0);
}
/* mesmo caso do .au-card-num acima: --bronze sobre --creme mede 4,70:1 aqui (marcadores
   de certo/errado, texto pequeno). Escurecido para #6E5530, 6,71:1, sem tocar --bronze. */
.au-falso span, .au-certo span {
  font-family: var(--mono);
  margin-right: .4rem;
  color: #6E5530;
}

@supports (animation-timeline: view()) {
  .au-certo {
    animation: au-revelar linear both;
    animation-timeline: view();
    /* cover em vez de entry, pelo mesmo motivo das barras do relogio: a mascara corre
       enquanto a linha esta sob o olhar, nao antes de chegar la */
    animation-range: cover 8% cover 42%;
  }
}
@keyframes au-revelar { to { clip-path: inset(0 0 0 0); } }

@supports not (animation-timeline: view()) {
  .au-certo { clip-path: inset(0 0 0 0); }
}
html[data-motion="reduced"] .au-certo { clip-path: inset(0 0 0 0) !important; animation: none !important; }

/* o eyebrow herda color: var(--bronze) de style.css (imutável), desenhado para o fundo
   creme das outras seções (razão 4,7:1, ok). Sobre o fundo greige destes dois blocos
   a razão cai para 3,9:1, abaixo do piso de 4,5:1 para texto normal. Reaproveito
   var(--ink-soft), o mesmo tom já usado sobre greige no relógio (au-relogio-intro),
   que passa com folga (6,17:1) e mantém o eyebrow discreto, sem repetir a cor do h2. */
.au-mito .eyebrow,
.au-relogio .eyebrow { color: var(--ink-soft); }

/* ===== Trilha do adulto, a página inverte ===== */
.au-adulto {
  position: relative;
  /* Altura da onda de transicao, presa aqui como variavel porque o respiro do topo da
     secao e calculado a partir dela. Com height: auto a onda crescia junto com a largura
     da viewport (2560x900 renderizada em 120% da largura dava 608px de altura a 1440px),
     e como ela sobe uma fracao da PROPRIA altura, a base descia 364px para dentro da
     secao: por cima do eyebrow, do h2 e do primeiro paragrafo. Com a altura limitada, a
     onda para de escalar sem freio e a crista fica mais suave, de quebra. */
  --onda-altura: clamp(150px, 20vw, 290px);
  /* au-onda-sobe leva a onda de -61% a -69% da propria altura, entao no pior caso (-61%)
     a base da caixa fica a 39% da altura abaixo do topo da secao. O padding usa .48 (folga
     sobre os .39) mais var(--space-4), entao o texto comeca sempre abaixo da caixa inteira
     da onda. A crista sobe no maximo 45% da altura acima da emenda (ponta em 23,6% da caixa
     com translate -69%), o que cabe no respiro de 128px do bloco de mitos nas larguras
     validadas sem passar por tras do ultimo card. */
  padding: calc(var(--onda-altura) * .48 + var(--space-4)) 0 var(--space-6);
  background: var(--vinho);
  color: var(--creme);
  overflow-x: clip;
}
.au-adulto-onda {
  position: absolute;
  top: -1px; left: 50%;
  width: 120%; max-width: none; height: var(--onda-altura);
  /* A crista da arte (o desenho de verdade, com o traco bronze) vive entre 23,6% e 59,6%
     da altura da caixa. O translate vertical diz quanto da caixa fica ACIMA da emenda:
     precisa ser sempre maior que 59,6% para a crista inteira ficar acima da emenda e o
     preenchimento solido cobrir a junta em toda a largura. Por isso a faixa animada foi
     puxada de -52%/-66% para -61%/-69% (e o repouso para -64%): com -52%, a ponta direita
     da crista mergulhava 7% da altura abaixo da emenda e a junta reta greige/vinho
     aparecia por cima dela justamente quando a secao entrava na tela. */
  translate: -50% -64%;
  display: block;
  pointer-events: none;
}
/* o eyebrow herda color: var(--bronze) de style.css (imutável), desenhado para fundo claro.
   Sobre o vinho a razão medida seria 3,05:1, bem abaixo do piso de 4,5:1. var(--bronze-soft)
   sobre var(--vinho) mede 4,83:1, passa o piso AA para texto normal com folga pequena e
   verificada. */
.au-adulto .eyebrow { color: var(--bronze-soft); }
.au-adulto h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  color: var(--creme);
  max-width: 22ch;
  margin: .4rem 0 1.2rem;
}
/* contraste: #F2E3D6 sobre #53080C mede 11,89:1, folgado no AA e no AAA */
.au-adulto p { max-width: 62ch; color: #F2E3D6; }
.au-adulto .btn-primary {
  background: var(--creme);
  color: var(--vinho);
  border-color: var(--creme);
}

@supports (animation-timeline: view()) {
  .au-adulto-onda {
    animation: au-onda-sobe linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }
}
@keyframes au-onda-sobe {
  from { translate: -50% -61%; }
  to   { translate: -50% -69%; }
}
html[data-motion="reduced"] .au-adulto-onda { animation: none !important; translate: -50% -64% !important; }

/* ===== Sobre ===== */
.au-sobre { padding: var(--space-6) 0; }
.au-sobre .container {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--space-4);
  align-items: center;
}
.au-sobre-foto img {
  width: 100%; height: auto;
  border-radius: var(--radius);
}
.au-sobre h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  color: var(--vinho);
  margin: .4rem 0 1rem;
}
@media (max-width: 900px) {
  .au-sobre .container { grid-template-columns: 1fr; }
}

/* ===== O contador de meses ===== */
/* O spec original previa um contador subindo junto com as barras e ele tinha se perdido
   na implementacao: barra sem numero e decoracao muda, ninguem sabe que sao meses.
   O numero conta de 0 a 12 no mesmo trecho de scroll em que as barras sobem.
   Leitor de tela ouve o "12" estatico do .au-sr-only, nunca o contador animado. */
@property --au-meses {
  syntax: '<integer>';
  initial-value: 12;
  inherits: false;
}
.au-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.au-contador {
  display: block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--vinho);
  counter-reset: au-meses var(--au-meses);
}
.au-contador::after { content: counter(au-meses); }
html.au-js #relogio:not(.is-contando) .au-contador { --au-meses: 0; }
#relogio.is-contando .au-contador { animation: au-contar 2.6s linear both .1s; }
@keyframes au-contar {
  from { --au-meses: 0; }
  to   { --au-meses: 12; }
}
/* freio: numero final direto, sem contagem */
html[data-motion="reduced"] .au-contador { animation: none !important; --au-meses: 12 !important; }

/* ===== O fio que costura a pagina ===== */
/* O caminho atravessa o conteudo: e gerado por JS (tecerFio) a partir das posicoes
   reais dos blocos, entao acompanha qualquer layout. O svg cobre o main inteiro em
   coordenadas 1:1 (viewBox = pixels), sem esticamento, entao a espessura e a curva
   sao exatamente as desenhadas. z-index 1 poe o fio ACIMA dos fundos de secao
   (greige e vinho pintariam por cima sem isso) e ABAIXO dos cards posicionados que
   vem depois no DOM, o que cria o mergulho atras deles de graca. O caminho e
   roteado por areas sem texto; a verificacao visual confere isso a cada mudanca. */
#conteudo { position: relative; }
.au-fio-pagina { display: none; }
.au-fio-logo { display: none; }
@media (min-width: 1280px) {
  .au-fio-pagina {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: .9;
  }
  .au-fio-pagina-traco,
  .au-fio-cometa {
    stroke-width: 3px;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }
  /* O cometa: um segmento claro de 60/1000 do caminho colado na ponta que esta sendo
     desenhada. dasharray "60 940" poe o segmento em [k*1000 - offset, +60]; para a
     ponta em p, offset = 1000*(1-p) + 60, entao anima de 1060 a 60 no mesmo range. */
  .au-fio-cometa {
    stroke-width: 5px;
    stroke-dasharray: 60 940;
    stroke-dashoffset: 1060;
    filter: drop-shadow(0 0 6px rgba(217, 188, 139, .8));
  }
  @supports (animation-timeline: scroll()) {
    .au-fio-pagina-traco {
      animation: au-fio-descer linear both;
      animation-timeline: scroll();
      animation-range: 500px 98%;
    }
    .au-fio-cometa {
      animation: au-cometa-correr linear both;
      animation-timeline: scroll();
      animation-range: 500px 98%;
    }
  }
  @supports not (animation-timeline: scroll()) {
    .au-fio-pagina-traco { stroke-dashoffset: 0; }
    .au-fio-cometa { stroke-dashoffset: 60; }
  }
  html[data-motion="reduced"] .au-fio-pagina-traco {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  html[data-motion="reduced"] .au-fio-cometa {
    animation: none !important;
    stroke-dashoffset: 60 !important;
    filter: none !important;
  }
  /* O finale: o fio inteiro brilha e se dissolve conforme o scroll atravessa o range
     (setado inline pelo tecerFio), e o monograma real nasce do brilho. Scroll-driven
     dos dois lados: rolar de volta desfaz a troca, o fio volta e a logo some. */
  @supports (animation-timeline: scroll()) {
    .au-fio-pagina {
      animation: au-fio-dissolver linear both;
      animation-timeline: scroll();
    }
    .au-fio-logo {
      animation: au-logo-nascer linear both;
      animation-timeline: scroll();
    }
    .au-fio-clarao {
      animation: au-clarao linear both;
      animation-timeline: scroll();
    }
  }
  /* o clarao: a energia do fio se condensa num flash dourado e a marca nasce dele */
  .au-fio-clarao {
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(255, 241, 214, .95) 0%,
      rgba(217, 188, 139, .65) 32%,
      rgba(176, 141, 87, .25) 58%,
      rgba(176, 141, 87, 0) 75%);
    opacity: 0;
  }
  html[data-motion="reduced"] .au-fio-clarao { animation: none !important; opacity: 0 !important; }
  .au-fio-logo {
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    width: 96px;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(217, 188, 139, .45));
  }
  html[data-motion="reduced"] .au-fio-pagina { animation: none !important; opacity: .9 !important; }
  html[data-motion="reduced"] .au-fio-logo { animation: none !important; opacity: 1 !important; filter: none !important; }
}
@keyframes au-fio-descer { to { stroke-dashoffset: 0; } }
@keyframes au-cometa-correr { from { stroke-dashoffset: 1060; } to { stroke-dashoffset: 60; } }
@keyframes au-fio-dissolver {
  0%   { opacity: .9; filter: none; }
  35%  { opacity: 1;  filter: drop-shadow(0 0 16px rgba(217, 188, 139, .95)); }
  100% { opacity: 0;  filter: none; }
}
@keyframes au-logo-nascer {
  from { opacity: 0; scale: .4; rotate: -10deg; filter: blur(9px) drop-shadow(0 0 26px rgba(217, 188, 139, 1)); }
  60%  { opacity: 1; scale: 1.06; rotate: 2deg; filter: blur(1px) drop-shadow(0 0 18px rgba(217, 188, 139, .8)); }
  to   { opacity: 1; scale: 1; rotate: 0deg; filter: blur(0px) drop-shadow(0 0 10px rgba(217, 188, 139, .5)); }
}
@keyframes au-clarao {
  0%   { opacity: 0; scale: .3; }
  45%  { opacity: 1; scale: 1.15; }
  100% { opacity: 0; scale: 1.7; }
}