/* =============================================================
   PAPO DE CRIMINALISTA — style.css
   Direção visual da V2 entregue pelo cliente em 08/09/2026:
   editorial, tipografia grande, hairlines, fundo papel quente,
   grades assimétricas com rótulo lateral. Neutros por decisão do
   WIREFRAME.md, que define a paleta só numa etapa posterior.
   Fonte Geologica vendorada em assets/fonts (sem CDN).
   ============================================================= */

@font-face {
  font-family: 'Geologica';
  src: url('../assets/fonts/geologica-latin.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geologica';
  src: url('../assets/fonts/geologica-latin-ext.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0b0b0b;
  --paper: #f1f0ec;
  --line: #c9c8c2;
  --line-dark: rgba(255, 255, 255, .18);
  --muted: #66665f;      /* 4,8:1 sobre o papel: os rotulos de 11px passam em AA */
  --muted-dark: rgba(248, 247, 243, .55);
  --white: #f8f7f3;
  --erro: #a33c33;       /* 5,66:1 sobre o papel */
  /* O formulário saiu do modal e foi morar na seção escura em 10/09/2026. Ali
     o --erro mede 3,05:1 e reprova em AA, que exige 4,5:1 para 12px. Mesma
     história do --ouro, que precisou de dois tons pelo mesmo motivo. */
  --erro-claro: #de7268; /* 6,29:1 sobre a tinta */

  /* ACENTO: o dourado vem da moldura da própria logo (#98805C amostrado da
     arte). Duas variantes porque o tom original só passa em contraste sobre
     fundo escuro: sobre o papel ele dá 3,3:1 e reprova para texto pequeno.
     Onde o acento aparece: rótulos [ ... ], setas, foco e o marco "Hoje".
     Ou seja, só em elementos de orientação. Título e corpo seguem neutros. */
  --ouro:        #98805C;   /* cor da marca, para traços e detalhes */
  --ouro-claro:  #B2966C;   /* 7,00:1 sobre a tinta */
  --ouro-escuro: #7E6A4C;   /* 4,54:1 sobre o papel */
  /* ESCALA DE ESPAÇAMENTO. Todo margin, padding e gap da folha usa um
     destes degraus: 4 8 12 16 20 24 32 40 48 64 80 96 112 128 144 160.
     Antes havia 35 valores distintos, incluindo 13, 15, 25, 26, 34, 45 e
     92px, o que não é escala: é ajuste no olho, um de cada vez. Ao criar
     regra nova, escolher um degrau em vez de medir na tela. */
  --pad: clamp(24px, 4vw, 64px);
  /* Um respiro vertical só para todas as seções. Antes havia 12vh, 14vh e
     16vh convivendo, diferença que ninguém percebe como intenção, só como
     desalinho. */
  --sec: clamp(80px, 12vh, 144px);

  /* ESCALA DE DISPLAY, quatro níveis com salto de ~1,3 entre eles.
     Antes havia sete tamanhos entre 46px e 115px, nove deles espremidos
     entre 79 e 115: diferença pequena demais para criar hierarquia e
     numerosa demais para parecer decisão. */
  --d1: clamp(44px, 6.1vw, 88px);   /* abertura e fecho: os dois momentos de marca */
  --d2: clamp(34px, 4.7vw, 68px);   /* declarações: manifesto, comunidade, experiências, captação */
  --d3: clamp(28px, 3.6vw, 52px);   /* títulos de seção e nomes de produto */
  --d4: clamp(24px, 2.8vw, 40px);   /* título ao lado de mídia */
  --d5: clamp(20px, 2.1vw, 31px);   /* título dentro de card ou linha */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* -------------------------------------------------------------
   RESET E BASE
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Geologica', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; cursor: pointer; }
button, input, select { font: inherit; }
/* Os atributos width/height reservam espaço e evitam salto de layout.
   Sem height:auto o navegador os trata como altura fixa e atropela
   todo aspect-ratio das composições. */
img { display: block; max-width: 100%; height: auto; }

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

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  transform: translateY(-160%);
  transition: transform 220ms var(--ease);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* -------------------------------------------------------------
   TEMA ESCURO POR SEÇÃO
   ------------------------------------------------------------- */
.section-dark { background: var(--ink); color: var(--white); }

/* Rótulo lateral, a marca gráfica da direção: [ texto ] pequeno.
   É aqui que o acento mora: um por seção, nunca no título nem no corpo. */
.side-label { display: block; margin-bottom: 24px; color: var(--ouro-escuro); }
.section-dark .side-label,
.section-dark .kicker { color: var(--ouro-claro); }
.side-label, .kicker, .tags, .path-no,
.metrics small, .metrics p, .channel-name,
.experiences-foot, .footer-col__title {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------
   CABEÇALHO
   ------------------------------------------------------------- */
.site-header {
  position: fixed;
  z-index: 30;
  top: 0; left: 0; right: 0;
  height: 78px;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.5vw, 40px);
  color: var(--white);
  border-bottom: 1px solid var(--line-dark);
  transition: background 350ms var(--ease), color 350ms var(--ease),
              border-color 350ms var(--ease), height 350ms var(--ease);
}
.site-header.scrolled {
  height: 66px;
  background: rgba(241, 240, 236, .94);
  backdrop-filter: blur(14px);
  color: var(--ink);
  border-color: var(--line);
}
/* A logo é uma placa em duas linhas com moldura, proporção ~3,7:1.
   No cabeçalho ela é limitada pela ALTURA disponível, não pela largura. */
.brand { display: block; flex: 0 0 auto; }
.brand-img {
  display: block;
  height: 46px;
  width: auto;
  transition: height 350ms var(--ease);
}
.site-header.scrolled .brand-img { height: 40px; }
.brand-img--escuro { display: none; }
.site-header.scrolled .brand-img--claro { display: none; }
.site-header.scrolled .brand-img--escuro { display: block; }

.site-nav {
  margin-left: auto;
  display: flex;
  gap: clamp(16px, 2.2vw, 32px);
  font-size: 13px;
}
.site-nav a { opacity: .75; transition: opacity 200ms var(--ease); }

.enter {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 12px 16px;
  white-space: nowrap;
  transition: background 220ms var(--ease), color 220ms var(--ease);
}

.menu-toggle {
  display: none;
  margin-left: auto;
  padding: 12px 4px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { opacity: 1; }
  .enter:hover { background: var(--white); color: var(--ink); }
  .site-header.scrolled .enter:hover { background: var(--ink); color: var(--paper); }
}

/* Menu compacto -------------------------------------------------- */
.menu-mobile[hidden] { display: none; }
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: var(--ink);
  color: var(--white);
  display: grid;
  place-items: center;
}
.menu-mobile nav { display: grid; text-align: center; gap: 4px; }
.menu-mobile a {
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 350;
  letter-spacing: -.05em;
  padding-block: 12px;
}
.menu-mobile__enter {
  margin-top: 24px;
  font-size: 12px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

/* -------------------------------------------------------------
   01. HERO
   ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 144px var(--pad) 64px;
  display: grid;
  align-content: center;
  overflow: hidden;
}
/* Véu sobre o vídeo: sem ele o texto branco morre nos trechos claros.
   Pesado à esquerda, onde mora a tipografia, e leve à direita, onde a
   imagem precisa respirar. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(11,11,11,.86) 0%, rgba(11,11,11,.64) 55%,
                    rgba(11,11,11,.38) 100%),
    linear-gradient(to top, rgba(11,11,11,.62) 0%, rgba(11,11,11,0) 46%);
}
.hero-copy { position: relative; z-index: 2; max-width: min(100%, 1000px); }
.kicker span { color: var(--muted-dark); }
.hero h1 {
  font-size: var(--d1);
  line-height: .9;
  letter-spacing: -.07em;
  font-weight: 400;
  margin: 7vh 0 6vh;
}
/* A15: um mecanismo só para a palavra rebaixada dos títulos.
   Antes o manifesto usava <span> com cor própria e o resto usava <em>
   com opacidade, o que lia como variação acidental. */
.hero h1 em, .manifesto h2 em, .mario h2 em, .community h2 em,
.experiences h2 em, .closing h2 em {
  font-style: normal;
  font-weight: 300;
  opacity: .48;
}
/* Sobre vídeo a ênfase reduzida some: no hero ela sobe um pouco */
.hero h1 em { opacity: .62; }

/* =============================================================
   BRILHO QUE VARRE O TÍTULO DA HERO (pedido do cliente, 10/09/2026)
   Veio de um componente React com Tailwind e a biblioteca `motion`.
   Não instalado: é gradiente animado com background-clip, que o
   navegador faz sozinho. Zero dependência.

   TRÊS COISAS QUE TIVERAM QUE MUDAR EM RELAÇÃO AO ORIGINAL:

   1. O componente deixa o texto TRANSPARENTE e pinta pelo fundo. Num
      texto branco sobre vídeo escuro, uma faixa branca sobre branco
      seria invisível, e escurecer a faixa derrubaria o contraste
      justo onde ela passa. Aqui é o contrário: a base fica um degrau
      abaixo do branco e a faixa é o branco cheio. O brilho PASSA, e o
      pior caso de contraste é a base, que segue medida.
   2. O `<em>` continua com opacidade reduzida por cima do recorte, que
      é o que mantém a ênfase da abertura funcionando.
   3. `prefers-reduced-motion` congela no branco cheio, sem animação.

   PARA REMOVER: apagar este bloco inteiro. Nada mais depende dele.
   ============================================================= */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .hero h1 {
      /* 50%, ou seja, 50% de delta entre a base e a faixa. O cliente pediu
         mais visível em 10/09/2026 e abriu mão da regra "zero ornamento".
         Medido sobre o pior quadro do vídeo: título em 4,1:1 e ênfase em
         3,5:1, os dois passando AA para texto grande (exige 3:1).
         90% de delta, que foi o pedido literal, daria 1,3:1: o título
         desapareceria entre as passadas. 50% é o teto real. */
      background-color: rgba(248, 247, 243, .68);
      /* Faixa LARGA com borda difusa, não um lampejo estreito. Sete paradas
         em vez de quatro: a luz entra e sai em rampa, sem aresta. É o que
         separa um brilho suave de um flash. Como a faixa é mais larga que o
         próprio título (130%), a passagem inteira demora, e a área em brilho
         pleno é maior, o que ainda ajuda a leitura. */
      background-image: linear-gradient(105deg,
        transparent 0%,
        rgba(248, 247, 243, .14) 20%,
        rgba(248, 247, 243, .42) 34%,
        rgba(248, 247, 243, .80) 45%,
        var(--white) 50%,
        rgba(248, 247, 243, .80) 55%,
        rgba(248, 247, 243, .42) 66%,
        rgba(248, 247, 243, .14) 80%,
        transparent 100%);
      background-size: 130% 200%;
      background-repeat: no-repeat;
      background-position: -130% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      /* Curva própria, e o motivo está na do projeto: --ease é
         cubic-bezier(.22,1,.36,1), um ease-out forte, feito para um elemento
         que chega e assenta. Numa faixa de luz atravessando, ele dispara no
         começo e rasteja no fim, que é o oposto de suave. Esta entra e sai em
         rampa, com o trecho do meio quase constante.
         7s de ciclo: 3,4s de passagem e 3,6s de descanso. O intervalo longo é
         metade do efeito; brilho que insiste vira enfeite piscando. */
      animation: brilho-hero 7s cubic-bezier(.4, 0, .2, 1) 1.6s infinite;
    }
    /* A ênfase tem 0.62 de opacidade POR CIMA da base. Com a base em 50%,
       0.62 a levaria para 2,5:1 e reprovaria. Sobe para 0.88 enquanto o
       brilho roda: a ênfase deixa de vir da opacidade e passa a vir do
       lampejo, que é o que o efeito faz de qualquer forma. */
    .hero h1 em { opacity: .88; }
  }
}
@keyframes brilho-hero {
  0%   { background-position: -130% 0; }
  49%  { background-position: 235% 0; }
  100% { background-position: 235% 0; }
}
.hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
}
.hero-bottom p {
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.45;
  max-width: 430px;
}
/* Setas dos links: o acento indica para onde se vai */
.path-cta span, .now-cta span, .experiences-foot a span { color: var(--ouro-escuro); }
.section-dark .path-cta span,
.section-dark .experiences-foot a span,
.content .path-cta span { color: var(--ouro-claro); }
.enter span { color: var(--ouro-claro); }
.site-header.scrolled .enter span { color: var(--ouro-escuro); }

/* O vídeo é o fundo da seção inteira, não um retângulo ao lado */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #161616;
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* O vídeo é textura, não a mensagem: escurecer na fonte dá margem de
     legibilidade em todo o quadro, inclusive nos trechos mais claros. */
  filter: brightness(.52) saturate(.92);
}

@media (hover: hover) and (pointer: fine) {
}

/* -------------------------------------------------------------
   02. ESCALA
   ------------------------------------------------------------- */
/* A escala continua o campo escuro do hero: os números viram parte da
   abertura em vez de uma faixa solta. */
.metrics { padding-block: clamp(64px, 8vh, 96px); }
.metrics > .side-label { padding-inline: var(--pad); }
.metrics-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}
.metrics.section-dark .metrics-row { border-block-color: var(--line-dark); }
.metrics.section-dark .metrics-row > div { border-right-color: var(--line-dark); }
.metrics.section-dark small { color: var(--muted-dark); }
/* Recuo curto para o número encostar na própria divisória. O primeiro
   alinha com a margem da página e o último respeita a borda da tela. */
.metrics-row > div {
  min-height: 260px;
  padding: 24px clamp(20px, 2vw, 32px);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.metrics-row > div:first-child { padding-left: var(--pad); }
.metrics-row > div:last-child { padding-right: var(--pad); border-right: 0; }
.metrics small { color: var(--muted); }
.metrics-row strong {
  margin-top: auto;
  font-size: var(--d1);
  font-weight: 350;
  letter-spacing: -.07em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metrics-row strong span { font-size: .35em; margin-left: 4px; letter-spacing: -.02em; }
.metrics-row p { margin-top: 12px; }

/* -------------------------------------------------------------
   03. MANIFESTO
   ------------------------------------------------------------- */
.manifesto { padding: var(--sec) var(--pad); }
.manifesto h2 {
  font-size: var(--d2);
  line-height: .95;
  letter-spacing: -.065em;
  font-weight: 350;
}

.manifesto-copy > p {
  margin: 48px 0 0;
  max-width: 46ch;
  font-size: clamp(17px, 2vw, 29px);
  line-height: 1.35;
}

/* -------------------------------------------------------------
   04. JORNADA
   ------------------------------------------------------------- */
/* Sem régua no topo: manifesto e jornada são as duas claras, e nenhuma outra
   transição de clara para clara desta página usa linha (mário->comunidade,
   linha do tempo->conteúdo, captação->fechamento). Era exceção, não padrão. */
.journey { padding: var(--sec) var(--pad); }
.section-head { margin-bottom: 96px; }
.section-head h2 {
  text-wrap: balance;
  font-size: var(--d2);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 350;
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.path:nth-child(n+3) { border-top: 1px solid var(--line); }
.path { padding: 20px 0 64px; min-width: 0; }
.path:nth-child(odd) { padding-right: 4vw; border-right: 1px solid var(--line); }
.path:nth-child(even) { padding-left: 4vw; }
.path-no { margin-bottom: 20px; color: var(--muted); }

.path-media {
  height: 390px;
  margin-bottom: 24px;
  overflow: hidden;
  background: #e6e5e0;
}
.path:nth-child(2) .path-media,
.path:nth-child(3) .path-media { height: 300px; }
.path-media img { width: 100%; height: 100%; object-fit: cover; }


.path h3 {
  margin: 4px 0 16px;
  font-size: var(--d3);
  letter-spacing: -.055em;
  line-height: 1.02;
  font-weight: 350;
  text-wrap: balance;
}
.path-body { max-width: 570px; font-size: 17px; line-height: 1.45; }
/* Sem régua aqui: eram quatro linhas na mesma seção que não separavam
   informação nenhuma, só repetiam o desenho. O respiro faz o trabalho. */
.tags {
  margin: 40px 0 32px;
  color: var(--muted);
}
.path-cta {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: opacity 220ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .path-cta:hover { opacity: .55; }
}

/* -------------------------------------------------------------
   05. PROFESSORES
   ------------------------------------------------------------- */
.faculty { padding: var(--sec) var(--pad); }
/* A grade é quem sustenta o título grudado: o sticky vale até o fim deste
   container e não invade o que vier depois. */
.faculty-grade {
  display: grid;
  grid-template-columns: 1.25fr 2fr;
  gap: 5vw;
}
.faculty-title { position: sticky; top: 128px; align-self: start; }
.faculty h2 {
  margin-top: 24px;
  font-size: var(--d3);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 350;
  text-wrap: balance;
}
/* columns empacota em duas colunas e escalona sozinho: com grid, as
   alturas alternadas abriam buracos de 150px por fileira. */
.portraits { columns: 2; column-gap: 16px; }
.portrait { break-inside: avoid; margin-bottom: 16px; }
.portrait > img { width: 100%; height: 320px; object-fit: cover; }
.portrait.tall > img { height: 470px; }
.portrait span {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted-dark);
}
.faculty-proof {
  grid-column: 2;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  align-items: end;
  gap: 24px;
}
.faculty-proof b {
  font-size: var(--d4);
  font-weight: 300;
  letter-spacing: -.07em;
  line-height: .9;
}
.faculty-proof span {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* -------------------------------------------------------------
   06. MÁRIO
   ------------------------------------------------------------- */
.mario {
  padding: var(--sec) var(--pad);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7vw;
  align-items: center;
}
.mario-photo { overflow: hidden; }
.mario-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.mario h2 {
  margin-top: 24px;
  font-size: var(--d3);
  text-wrap: balance;   /* D8: sem <br> manual, entre 801 e 1120px caía em 3 linhas desiguais */
  line-height: .96;
  letter-spacing: -.065em;
  font-weight: 350;
}
.mario .body {
  margin: 48px 0 0;
  max-width: 580px;
  font-size: 18px;
  line-height: 1.5;
}

/* -------------------------------------------------------------
   07. COMUNIDADE
   ------------------------------------------------------------- */
.community {
  padding: var(--sec) var(--pad);
  border-top: 1px solid var(--line);
}

.community h2 {
  font-size: var(--d2);
  line-height: .9;
  letter-spacing: -.07em;
  font-weight: 350;
}
.community-grid {
  margin-top: 96px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 5vw;
}
.community-grid > * { min-width: 0; }
.community-media { overflow: hidden; }
.community-media img { width: 100%; height: 650px; object-fit: cover; }

.benefits > li {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 40px 1fr;
}
.benefits b { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.benefits h3 { font-size: var(--d5); font-weight: 350; letter-spacing: -.03em; }
.benefits p {
  grid-column: 2;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* O preço estava perdido: bloco de 133px encolhido no canto de uma linha de
   1.000px, rótulo de 10px, valor no mesmo nível dos títulos de card que vêm
   logo acima. Duas correções.
   1. O valor sobe para --d2, o nível de declaração. É o único preço do site
      e o motivo daquela linha existir.
   2. A linha volta a preencher a largura, com preço numa ponta e botão na
      outra, que é como TODA linha de fechamento desta página funciona
      (.experiences-foot, .labs-foot, .price-row, .footer-bottom).
      Agrupar os dois à esquerda deixava 814px vazios numa tela de 1440. */
.price-row {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  justify-content: space-between;
  align-items: end;
}
.price-row > div { display: grid; gap: 8px; }
.price-row small {
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-row strong {
  font-size: var(--d2);
  font-weight: 350;
  letter-spacing: -.06em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.price-row strong sup { font-size: .26em; top: -1.05em; letter-spacing: 0; }
.price-row > div > span { font-size: 14px; color: var(--muted); }
.price-row .button { margin-bottom: 4px; }

.button {
  display: inline-block;
  padding: 20px 24px;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background 220ms var(--ease), color 220ms var(--ease);
}
.button.light { background: var(--white); color: var(--ink); border-color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: transparent; color: var(--ink); }
  .button.light:hover { background: transparent; color: var(--white); }
}

/* O CTA DA HERO ANDA AO CONTRÁRIO DOS OUTROS, DE PROPÓSITO.
   Todo botão da página nasce preenchido e esvazia no hover. Este nasce
   vazado e preenche, por pedido do cliente em 10/09/2026, e o motivo é o
   chão: é o único botão sobre vídeo. Preenchido ele tapa a imagem no ponto
   mais importante da página; vazado ele deixa a cena passar e só ganha corpo
   quando a pessoa chega nele.
   A especificidade precisa empatar com `.button.light` para vencer pela
   ordem, por isso os três seletores juntos. */
.button.light.hero-cta { background: transparent; color: var(--white); border-color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .button.light.hero-cta:hover { background: var(--white); color: var(--ink); }
}

/* -------------------------------------------------------------
   08. EXPERIÊNCIAS
   ------------------------------------------------------------- */
.experiences { padding: var(--sec) 0; }
.experience-hero { position: relative; height: 76svh; overflow: hidden; }
.experience-hero img { width: 100%; height: 100%; object-fit: cover; }
.experience-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,11,11,.88) 0%, rgba(11,11,11,.45) 55%, rgba(11,11,11,.15) 100%);
}
.overlay-copy {
  position: absolute;
  z-index: 4;
  /* --pad, nao 4vw: a 1440 os dois dao quase o mesmo (57,6 contra 57,6), mas
     divergem em toda outra largura, e ai o titulo da secao e a linha de fecho
     dela ficavam em margens diferentes. */
  left: var(--pad);
  top: 8vh;
  max-width: min(90%, 900px);
  color: var(--white);
}
.experiences h2 {
  margin-top: 24px;
  font-size: var(--d2);
  line-height: .9;
  letter-spacing: -.07em;
  font-weight: 350;
}
.experience-strip {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.experience-strip li { position: relative; overflow: hidden; }
.experience-strip img { width: 100%; height: 270px; object-fit: cover; }
.experience-strip span {
  position: absolute;
  left: 16px;
  bottom: 12px;
  /* 11px, o mesmo piso de todo rótulo funcional da página. Estava em 10px
     fixos, e é o texto lido na pior condição do site: pequeno, sobre foto. */
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
}
.experiences-foot {
  /* A .experiences e full-bleed (padding lateral 0) por causa da foto de
     abertura e da faixa de fotos. Sem reafirmar a margem aqui, o texto desta
     linha encostava na borda da janela: era o unico bloco da pagina fora dos
     57,6px em que todos os outros vivem. */
  padding: 32px var(--pad) 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.experiences-foot a {
  border-bottom: 1px solid;
  padding-bottom: 4px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------
   09. LINHA DO TEMPO
   ------------------------------------------------------------- */
.timeline { padding: var(--sec) var(--pad); }

/* O lead da história tem medida, como todo corpo desta página. Sem isto ele
   atravessava os 1.325px da seção numa linha só, o triplo da medida legível. */
.timeline-lead { margin-top: 20px; max-width: 62ch; }

.timeline h2 {
  font-size: var(--d3);
  line-height: .92;
  letter-spacing: -.065em;
  font-weight: 350;
}
.timeline-track {
  margin-top: 96px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}
.timeline-track > li {
  min-height: 170px;
  padding: 20px 12px 20px 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.timeline-track > li:last-child { border-right: 0; }
.timeline-track li:last-child b { color: var(--ouro-escuro); }
.timeline-track b {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.timeline-track span {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* -------------------------------------------------------------
   10. CONTEÚDO
   ------------------------------------------------------------- */
.content {
  padding: var(--sec) var(--pad);
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 7vw;
}
.content > * { min-width: 0; }
.content h2, .now h2 {
  margin-top: 24px;
  font-size: var(--d3);
  line-height: .92;
  letter-spacing: -.065em;
  font-weight: 350;
}
.content .body {
  margin: 48px 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.5;
}
.channels { border-top: 1px solid var(--ink); }
.content.section-dark .channels { border-top-color: var(--white); }
.content.section-dark .channels a { border-bottom-color: var(--line-dark); }
.content.section-dark .channel-name { color: var(--muted-dark); }
.channels a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(24px, 3vh, 32px) 0;
  border-bottom: 1px solid var(--line);
  transition: opacity 220ms var(--ease);
}
.channel-name { color: var(--muted); }
.channel-count {
  font-size: var(--d4);
  font-weight: 350;
  letter-spacing: -.06em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .channels a:hover { opacity: .55; }
}

/* -------------------------------------------------------------
   11. AGORA NO PAPO
   ------------------------------------------------------------- */
.now { padding: var(--sec) var(--pad); border-top: 1px solid var(--line); }

.now-list { margin-top: 80px; border-top: 1px solid var(--ink); }
/* Duas linhas: em cima os três rótulos curtos bem afastados entre si, e o
   título logo abaixo do seu próprio rótulo. Assim tipo e título leem como
   um grupo, e informação e ação leem como outro.

   POR QUE A GRADE MORA NO <ul> E NÃO NO <li>. Ela morava no <li>, e o
   resultado era que cada linha calculava as próprias colunas: como a
   terceira é `auto`, um CTA curto ("Conheça", 80,5px) deixava a coluna
   estreita e empurrava as outras duas, enquanto um CTA longo ("Quero ser
   avisado", 164,3px) fazia o contrário. A coluna do meio começava em x=822
   numa linha e em x=770 nas outras: 52px de desalinhamento visível.
   Com a grade no <ul> e `subgrid` no <li>, as três colunas são medidas uma
   vez para a lista inteira e valem para todas as linhas. */
.now-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) auto;
  gap: 12px clamp(24px, 5vw, 80px);
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
/* Navegador sem subgrid (anterior a 2023) continua com o comportamento
   antigo: colunas por linha. Desalinha, mas não quebra. */
@supports (grid-template-columns: subgrid) {
  .now-list {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) auto;
  }
  .now-list li {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}
.now-list .now-tipo { grid-column: 1; grid-row: 1; }
.now-list .now-meta { grid-column: 2; grid-row: 1; }
.now-list .now-cta  { grid-column: 3; grid-row: 1; }
.now-list h3        { grid-column: 1; grid-row: 2; }
.now-list li > * { min-width: 0; }
.now-tipo, .now-meta, .now-cta {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.now-tipo, .now-meta { color: var(--muted); }
.now-list h3 {
  font-size: var(--d5);
  font-weight: 350;
  letter-spacing: -.04em;
  line-height: 1.1;
}
/* `end`, não `start`: com a grade compartilhada a terceira coluna passou a ter
   a largura do CTA mais longo, e com `start` o mais curto ("Conheça") sobrava
   83px antes da borda. Toda linha de fecho desta página põe a ação na ponta
   direita, e a regra de celular (linha ~1244) já usava `end`. */
.now-cta { border-bottom: 1px solid; padding-bottom: 4px; justify-self: end; }

/* -------------------------------------------------------------
   12. CAPTAÇÃO
   ------------------------------------------------------------- */
.capture { padding: var(--sec) var(--pad); }
.capture h2 {
  margin: 48px 0 96px;
  font-size: var(--d2);
  line-height: .9;
  letter-spacing: -.07em;
  font-weight: 350;
}
/* Parágrafo e botão são a mesma frase: "receba isto" e "quero". Estavam nas
   duas pontas de uma linha de 1.000px, com 287px de nada entre eles. Agora o
   botão vem logo depois do texto, e a linha respira à direita em vez de
   rachar no meio. */
.capture .button { margin-bottom: 2px; }

/* -------------------------------------------------------------
   13. FECHAMENTO
   ------------------------------------------------------------- */
.closing {
  min-height: 90vh;
  padding: var(--sec) var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
/* "Você também não pode parar." é um parágrafo à parte, não a continuação
   da frase anterior. O <em> vira bloco e ganha respiro em cima. */
.closing h2 em { display: block; margin-top: .42em; }
.closing h2 {
  font-size: var(--d1);
  line-height: .92;
  letter-spacing: -.075em;
  font-weight: 350;
}

/* -------------------------------------------------------------
   14. RODAPÉ
   ------------------------------------------------------------- */
/* Duas células: a marca e o mapa do site. As três colunas de links vivem
   dentro do <nav> (necessário para acessibilidade), então a grade de três
   colunas mora nele, não no rodapé. */
.footer {
  background: var(--ink);
  color: var(--white);
  padding: 64px var(--pad) 32px;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 40px;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.footer-brand img { width: clamp(150px, 15vw, 186px); height: auto; }
.footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.footer-col__title { margin-bottom: 8px; color: var(--muted-dark); }
.footer-col a { opacity: .65; transition: opacity 200ms var(--ease); }
.footer-bottom {
  grid-column: 1 / -1;
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.footer-bottom a { opacity: .65; }
@media (hover: hover) and (pointer: fine) {
  .footer-col a:hover, .footer-bottom a:hover { opacity: 1; }
}

/* -------------------------------------------------------------
   MODAL DE CAPTAÇÃO
   ------------------------------------------------------------- */

.field { display: flex; flex-direction: column; min-width: 0; }
.field label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.capture input, .capture select {
  padding: 16px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  font-size: 16px;
  color: var(--ink);
  transition: border-color 200ms var(--ease);
}
.capture input:focus, .capture select:focus { border-bottom-width: 2px; border-bottom-color: var(--ouro-escuro); }
.capture input:focus-visible, .capture select:focus-visible { outline-offset: 6px; }
.capture input.is-invalid, .capture select.is-invalid { border-bottom-color: var(--erro); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }

.form-msg:empty { display: none; }
.form-msg { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.form-legal { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 52ch; }

/* -------------------------------------------------------------
   REVEAL
   ------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------
   RESPONSIVO
   ------------------------------------------------------------- */
@media (min-width: 801px) {
  .menu-mobile { display: none; }
}

@media (max-width: 800px) {
  .site-header { height: 64px; }
  /* Cabeçalho de 64px: a placa desce para 38px e sobra respiro real */
  .brand-img, .site-header.scrolled .brand-img { height: 38px; }
  .site-nav, .enter { display: none; }
  .menu-toggle { display: block; }

  .hero { min-height: 94svh; padding: 112px var(--pad) 48px; }
  .hero h1 { margin: 4vh 0 5vh; }
  .hero-bottom { grid-template-columns: 1fr; gap: 24px; }
  .hero::after {
    background: linear-gradient(to top, rgba(11,11,11,.95) 12%,
                rgba(11,11,11,.82) 52%, rgba(11,11,11,.55) 100%);
  }

  .metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics-row > div { min-height: 176px; }
  .metrics-row > div:nth-child(2n) { border-right: 0; }
  .metrics-row > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .metrics.section-dark .metrics-row > div:nth-child(n+3) { border-top-color: var(--line-dark); }
  .metrics-row > div:nth-child(2n+1) { padding-left: var(--pad); }
  .metrics-row > div:nth-child(2n) { padding-right: var(--pad); }

  .manifesto, .section-head, .community-intro,
  .timeline header, .now header, .content { grid-template-columns: 1fr; }
  .manifesto-copy > p { margin: 40px 0 0; }
  .side-label, .section-head p { margin-bottom: 40px; }

  .journey-grid { grid-template-columns: 1fr; }
  .path:nth-child(n) { padding: 32px 0 64px; border-right: 0; }
  .path:nth-child(n) .path-media { height: 300px; }

  .faculty-grade, .mario, .community-grid { grid-template-columns: 1fr; }
  .faculty-title { position: static; }
  .faculty-proof { grid-column: 1; }
  .portrait > img, .portrait.tall > img { height: 330px; }
  .mario-photo img { height: 60vh; }
  .community-media img { height: 420px; }

  .experience-hero { height: 68vh; }
  .overlay-copy { left: 22px; right: 22px; top: auto; bottom: 6vh; }
  .experience-hero::after {
    background: linear-gradient(to top, rgba(11,11,11,.9) 0%, rgba(11,11,11,.35) 60%, rgba(11,11,11,.1) 100%);
  }
  .experience-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .experience-strip li:last-child { grid-column: 1 / -1; }

  .timeline-track { display: flex; overflow-x: auto; }
  .timeline-track > li { min-width: 165px; }

  .now-list li { grid-template-columns: 1fr; gap: 12px; }

  .capture .button { width: 100%; }

  .footer { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .split { grid-template-columns: 1fr; }
}

/* =============================================================
   REVISÃO DE 09/09/2026
   Correções da revisão multiagente (REVISAO-2026-09-09.md).
   ============================================================= */

/* A32: âncora não pode aterrissar embaixo do cabeçalho fixo -------- */
html { scroll-padding-top: 96px; }

/* A34: sem JavaScript o conteúdo aparece; o reveal só existe com JS */
.no-js .reveal { opacity: 1; transform: none; }

/* A05: a narrativa da jornada sai do rótulo de 11px e vira uma linha
   sob o título da seção, como o wireframe desenha ------------------ */
.trilha {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.trilha li { display: flex; align-items: center; gap: 20px; }
.trilha li:not(:last-child)::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--ouro-escuro);
}
/* O rótulo do bloco absorveu o nome do produto: "01 / Labs" */

/* A06: as frases de apoio do wireframe que dão papel às seções ----- */
.community-lead { margin-top: var(--d5); max-width: 46ch; }
.experiences-lead { margin-top: 20px; max-width: 52ch; color: var(--white); }

/* A19: a assinatura é o fecho de marca, não mais um rótulo de seção  */
.closing { justify-content: center; gap: 32px; }
.closing-assinatura {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ouro-escuro);
}
.closing-assinatura span { color: var(--muted); }

/* A20: a coluna de benefícios acompanha a altura da foto ----------- */
@media (min-width: 801px) {
  .benefits { display: grid; grid-template-rows: repeat(4, 1fr); }
  .benefits > li:last-child { border-bottom: 1px solid var(--line); }
}

/* A27: o alvo de toque cresce sem mudar o desenho do link ---------- */
.path-cta, .now-cta, .experiences-foot a { position: relative; }
.path-cta::after, .now-cta::after, .experiences-foot a::after {
  content: "";
  position: absolute;
  inset: -13px 0;
}

/* A33: quem pede pode parar o vídeo (WCAG 2.2.2) ------------------- */
/* D5: as diretrizes pedem controle claro para movimento automático acima de
   5 segundos. Tinha 77x31px, contraste baixo e traço quase invisível. Agora
   é um alvo de 44px com fundo próprio, o mínimo do Apple HIG. */
.media-toggle {
  position: absolute;
  z-index: 3;
  right: var(--pad);
  bottom: 56px;
  min-height: 44px;
  padding: 12px 20px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(11, 11, 11, .55);
  border: 1px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px);
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .media-toggle:hover { background: var(--ink); border-color: var(--white); }
}
.media-toggle[hidden] { display: none; }

/* A39: a linha do tempo mostra o que afirma ------------------------ */
.timeline-track img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 16px 0 12px;
}

/* A31: o erro do formulário deixa de ser só cor -------------------- */
.field-erro {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--erro);
}
.field-erro:empty { display: none; }
/* Os sete campos são obrigatórios. Uma frase acima do formulário é mais
   honesta e mais silenciosa que sete asteriscos repetidos. */
.form-conv {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Dica de formato, distinta da mensagem de erro: fica sempre visível e não
   depende de a pessoa errar primeiro. */
.field-dica {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

/* -------------------------------------------------------------
   CELULAR: o respiro e as grades eram do desktop, encolhidos
   ------------------------------------------------------------- */
@media (max-width: 800px) {
  /* A25: 18 telas viravam meia tela em branco entre título e conteúdo */
  :root { --sec: clamp(64px, 9vh, 144px); }
  .section-head { margin-bottom: 48px; }
  .community-grid, .now-list, .price-row { margin-top: 48px; }
  .timeline-track { margin-top: 48px; }
  .capture h2 { margin: 32px 0 48px; }
  .side-label { margin-bottom: 20px; }
  .closing { min-height: auto; }
  .mario .body, .content .body { margin-block: 32px; }
  .manifesto-copy > p { margin-top: 32px; }
  .path { padding: 24px 0 48px; }

  /* A11: quebra manual de 1440px destrói a composição de 375px */
  main h1 br, main h2 br { display: none; }
  main h2 { text-wrap: balance; }
  .hero h1 br { display: inline; }

  /* A01: a grade de 3 colunas sobrevivia à media query e os textos
     se sobrepunham. Os seletores repetem .now-list para vencer a
     especificidade das regras de desktop. */
  .now-list li { grid-template-columns: 1fr auto; gap: 12px 16px; }
  .now-list .now-tipo { grid-column: 1; grid-row: 1; }
  .now-list .now-cta  { grid-column: 2; grid-row: 1; justify-self: end; }
  .now-list h3        { grid-column: 1 / -1; grid-row: 2; }
  .now-list .now-meta { grid-column: 1 / -1; grid-row: 3; }

  /* A24: a linha do tempo virava rolagem lateral e escondia 5 de 7 marcos */
  .timeline-track { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .timeline-track > li {
    min-width: 0;
    min-height: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 16px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .timeline-track > li:last-child { border-bottom: 0; }
  .timeline-track img { display: none; }

  /* A28: o véu cobria a cena inteira e o texto flutuava no meio */
  .hero { align-content: end; }
  .hero::after {
    background: linear-gradient(to top, rgba(11,11,11,.95) 0%,
                rgba(11,11,11,.86) 48%, rgba(11,11,11,.3) 100%);
  }

  /* X4: a legenda mais longa quebrava e desalinhava o par de baixo */
  .metrics-row p { min-height: 2.8em; }

  /* A18/A25: duas colunas com proporção de retrato. Altura fixa de 330px
     numa célula de 165px dava recorte 1:2 e empurrava a seção para 2.600px. */
  .portraits { columns: 2; }
  .portrait > img, .portrait.tall > img { height: auto; aspect-ratio: 4 / 5; }
  /* A25: a mídia dos blocos da jornada não precisa de 300px no celular */
  .path:nth-child(n) .path-media { height: 240px; }

  /* A27: o botão Menu também precisa de alvo confortável */
  .menu-toggle { padding: 16px 12px; }
}

/* X1: a seta virou SVG porque U+2192, U+2197 e U+2198 estão fora do
   subconjunto vendorado da Geologica e caíam na fonte do sistema,
   mudando de desenho conforme o aparelho. currentColor preserva o acento. */
.seta { display: inline-block; vertical-align: -1px; margin-left: 2px; }

/* =============================================================
   PÁGINA LEGAL (privacidade.html)
   Coluna única, medida de leitura confortável, mesma casca do site.
   ============================================================= */
.pagina-legal { background: var(--paper); }
/* Na página legal o cabeçalho é sempre sólido: não dá para depender da
   classe .scrolled, porque o JS a remove quando a rolagem está no topo, e
   aí a barra clara ficava com texto branco, ilegível. */
.pagina-legal .site-header {
  position: sticky;
  height: 66px;
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
.pagina-legal .brand-img { height: 40px; }
.pagina-legal .brand-img--claro { display: none; }
.pagina-legal .brand-img--escuro { display: block; }
.legal { padding: clamp(80px, 12vh, 128px) var(--pad) var(--sec); }
/* Medida de leitura em em, não em ch: ch mede a largura do zero, que é
   mais largo que a média das letras, e 66ch entregava 90 caracteres. */
.legal h1, .legal-meta, .legal-body, .legal-voltar { max-width: 34em; }
.legal h1 {
  font-size: var(--d2);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 350;
  text-wrap: balance;
}
.legal-meta {
  margin-top: 16px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-body { margin-top: clamp(40px, 6vh, 80px); }
.legal-body h2 {
  margin: 48px 0 16px;
  font-size: var(--d5);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.2;
}
.legal-body > *:first-child { margin-top: 0; }
.legal-body p { font-size: 16px; line-height: 1.65; }
.legal-body p + p { margin-top: 16px; }
.legal-body ul { margin: 16px 0 0 20px; display: grid; gap: 8px; list-style: disc; }
.legal-body li { font-size: 16px; line-height: 1.6; }
.legal-body a { text-decoration: underline; text-underline-offset: 3px; }
.legal-body strong { font-weight: 600; }
.legal-voltar { margin-top: var(--sec); }

@media (max-width: 800px) {
  .legal { padding-top: clamp(64px, 10vh, 96px); }
  .legal-body h2 { margin-top: 40px; }
}

/* =============================================================
   15. A AGÊNCIA
   Bloco de crédito, depois do fechamento de marca. Discreto de
   propósito: a página é do Papo, não da agência.
   ============================================================= */
.agencia { padding: var(--sec) var(--pad); }
/* Mesma divisão da seção de professores: título à esquerda, conteúdo à
   direita. O texto novo do cliente tem três parágrafos e não cabia mais no
   desenho de coluna estreita que existia antes. */
.agencia {
  display: grid;
  grid-template-columns: 1.25fr 2fr;
  gap: 5vw;
  align-items: start;
}
.agencia > * { min-width: 0; }
.agencia-corpo { max-width: 62ch; }
.agencia-corpo .path-cta { margin-top: 8px; }
/* As três frentes de trabalho: mesma cor de apoio dos rótulos, para lerem
   como uma lista mesmo escritas em frase corrida.
   ATENÇÃO: --muted foi derivado para o papel (4,8:1). Esta seção voltou a ser
   escura em 10/09/2026, e ali o mesmo tom mede 3,45:1, reprovando em AA. Por
   isso a seção usa o irmão escuro, como toda outra seção em fundo tinta. */
.agencia-frentes { color: var(--muted); }
.agencia.section-dark .agencia-frentes { color: var(--muted-dark); }
.agencia h2 {
  margin-top: 24px;
  font-size: var(--d3);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 350;
  text-wrap: balance;
}
.agencia .body { margin: 0 0 20px; font-size: 16px; line-height: 1.6; }
.footer-credito a { border-bottom: 1px solid rgba(255, 255, 255, .3); }

@media (max-width: 800px) {
}

/* A logo da NOTHING no crédito do rodapé, no verde da própria marca
   (#D6F503, que o CSS deles chama de --nothing). Dimensionada pela
   altura: o wordmark tem proporção de quase 8:1. */
.footer-credito { display: inline-flex; align-items: center; gap: 8px; }
.footer-credito a { border-bottom: 0; display: inline-flex; }
.footer-credito img {
  height: 13px;
  width: auto;
  opacity: .9;
  transition: opacity 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .footer-credito a:hover img { opacity: 1; }
}

/* =============================================================
   AUDITORIA DE 10/09/2026
   Bloco no fim da folha porque várias destas regras precisam vencer
   as do desktop e as do celular. Cada uma tem o código do achado.
   ============================================================= */

/* D1: ALVOS DE TOQUE ------------------------------------------------
   WCAG 2.2, critério 2.5.8, pede 24x24 CSS px no mínimo. A medição de
   10/09 achou 25 links e botões abaixo disso, os piores com 13px de
   altura na barra final do rodapé. O ::after estica só a área clicável:
   o traço, o texto e o espaçamento continuam idênticos. */
.path-cta, .now-cta, .experiences-foot a, .footer-col a,
.footer-bottom a, .legal-voltar a, .brand,
.site-nav a, .menu-mobile nav a { position: relative; }

.path-cta::after, .now-cta::after, .experiences-foot a::after,
.footer-col a::after, .footer-bottom a::after, .legal-voltar a::after,
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 24px;
  transform: translateY(-50%);
}

/* No rodapé os links são empilhados. Para caber alvo de 24px mais os 8px
   de separação que as diretrizes pedem, o passo entre eles precisa de
   32px: 16px de link mais 16px de intervalo. */
.footer-col { gap: 16px; }
.footer-bottom { gap: 20px 16px; }

/* Botões que já são bloco só precisam do piso de altura */
.button, .menu-toggle, .now-cta, .media-toggle,
.enter, .menu-mobile__enter { min-height: 44px; }
.button, .enter, .menu-mobile__enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu-toggle { padding-inline: 12px; }

/* B15: tira o atraso de 300ms do toque duplo sem desligar o zoom */
a, button, input, select, label, summary { touch-action: manipulation; }

/* D4: RITMO DE CLARO E ESCURO ---------------------------------------
   A primeira metade andava em pares de claro com um escuro de pontuação
   entre eles. Da nona seção em diante virava alternância de um para um e
   a página piscava. Trocando conteúdo, agora e captação de tema, a regra
   volta a valer da primeira à última seção:
   escuro escuro | claro claro | escuro | claro claro | escuro |
   claro claro | escuro | claro claro | escuro + rodapé.
   O que muda aqui é só o que a seção "agora" precisa para viver no
   escuro: as bordas e os rótulos, que estavam presos ao tema claro. */
.now.section-dark { border-top-color: var(--line-dark); }
.now.section-dark .now-list { border-top-color: var(--white); }
.now.section-dark .now-list li { border-bottom-color: var(--line-dark); }
.now.section-dark .now-tipo,
.now.section-dark .now-meta { color: var(--muted-dark); }

/* D7: a seção da agência encosta no rodapé e os dois são escuros. Em vez
   de fingir que são blocos separados com dois fios seguidos, eles fecham
   a página como um bloco só. */
.agencia + .footer, .footer { border-top: 0; }
.agencia { padding-bottom: calc(var(--sec) * .6); }

/* B14: sem isto, rolar até o fim do formulário no celular arrasta a
   página que está atrás dele. */
.menu-mobile { overscroll-behavior: contain; }

/* B16: FOLHA DE IMPRESSÃO -------------------------------------------
   A política de privacidade é o documento que mais gente salva em PDF, e
   saía com o cabeçalho fixo por cima do texto. */
@media print {
  .site-header, .menu-mobile, .menu-toggle, .footer,
  .skip-link, .media-toggle, .consent, .hero-media,
  .legal-voltar { display: none !important; }
  html, body { background: #fff; color: #000; }
  .legal { padding: 0; }
  .legal h1, .legal-meta, .legal-body { max-width: none; }
  .legal-body p, .legal-body li { font-size: 11pt; line-height: 1.5; }
  .legal-body h2 { break-after: avoid; page-break-after: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* B3: BANNER DE CONSENTIMENTO ---------------------------------------
   O GA4 grava cookie e manda dado para o Google. Pela LGPD isso depende
   de consentimento prévio (art. 7º, I), então o gtag só é injetado
   depois do aceite. Enquanto ninguém escolhe, nenhuma requisição sai. */
/* A hero centraliza o conteúdo verticalmente (`align-content: center`), então
   cada pixel de respiro embaixo sobe o conteúdo meio pixel. Por isso o dobro
   da altura do banner: para o conteúdo subir a altura inteira dele. */
.com-consent .hero { padding-bottom: calc(64px + var(--consent-h, 0px) * 2); }
/* O botão de pausa é ancorado na BASE da hero, então ele desce junto quando
   ela cresce e voltava a ficar embaixo do banner. Ele sobe pela altura cheia
   do banner, mais 20px de folga, que é o respiro que o próprio banner usa. */
.com-consent .media-toggle { bottom: calc(56px + var(--consent-h, 0px) + 20px); }

.consent {
  position: fixed;
  z-index: 150;
  left: var(--pad);
  right: var(--pad);
  bottom: 20px;
  max-width: 620px;
  margin-inline: auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  justify-content: space-between;
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 16px 40px rgba(0, 0, 0, .28);
}
.consent__texto { font-size: 13px; line-height: 1.5; flex: 1 1 260px; }
.consent__texto a { border-bottom: 1px solid var(--line-dark); }
.consent__acoes { display: flex; gap: 12px; }
.consent__btn {
  min-height: 44px;
  padding: 12px 20px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--line-dark);
  color: var(--white);
  transition: background 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease);
}
.consent__btn[data-consent="granted"] {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
@media (hover: hover) and (pointer: fine) {
  .consent__btn:hover { background: var(--ouro-claro); color: var(--ink); border-color: var(--ouro-claro); }
}
@media (max-width: 800px) {
  .consent { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
  .consent__acoes { width: 100%; }
  .consent__btn { flex: 1; }
}

/* B4: a armadilha precisa sumir da tela sem sumir do formulário. display:none
   é o primeiro lugar onde robô olha, então vai por posição. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* D3: O HERO PASSA A TER UMA AÇÃO DE VERDADE ------------------------
   "Encontre seu próximo passo" era um link de 11px em caixa alta com um
   fio em cima: lia como legenda, não como ação, e era a única coisa
   clicável de uma tela inteira. Mesma frase, mesmo destino, agora com
   forma de botão e alvo de 44px. */
.hero-cta { justify-self: start; align-self: end; }
.hero-bottom { align-items: end; }
@media (max-width: 800px) {
  .hero-cta { width: 100%; }
}

/* D2: a ação principal repetida no fim da jornada ------------------- */
.journey-cta { margin-top: 64px; }

/* B12: PÁGINA DE ERRO ----------------------------------------------
   O 404 devolvia a home inteira, o que confunde quem digitou errado.
   Agora é uma página curta que diz o que houve e oferece a saída. */
.erro-404 {
  padding: 160px var(--pad) var(--sec);
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.erro-404 h1 {
  font-size: var(--d2);
  line-height: .92;
  letter-spacing: -.07em;
  font-weight: 350;
}
.erro-404 h1 em { font-style: normal; opacity: .42; }
.erro-404__texto {
  margin-top: 32px;
  max-width: 34em;
  font-size: 18px;
  line-height: 1.5;
}
.erro-404__links {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
}

/* CORREÇÃO: a regra de alvo de toque acima define display:inline-flex em
   .enter, e como este bloco vem depois de tudo ela ressuscitava o botão
   "Entrar" no cabeçalho do celular, que o bloco de 800px havia escondido.
   Reafirmar aqui é mais claro do que caçar especificidade lá em cima. */
@media (max-width: 800px) {
  .site-nav, .enter { display: none; }
}

/* =============================================================
   LABORATÓRIOS INTENSIVOS (achado C6, 10/09/2026)
   Seção escura entre a jornada e os professores. As duas escuras
   seguidas são de propósito: "o que é um Lab" e "quem ensina" leem
   como um bloco só de autoridade, do mesmo jeito que o hero e a
   escala leem como um bloco só de abertura.
   ============================================================= */
.labs { padding: var(--sec) var(--pad); }
.labs-intro { max-width: 780px; }
.labs h2 {
  font-size: var(--d2);
  line-height: .92;
  letter-spacing: -.07em;
  font-weight: 350;
}
.labs h2 em { font-style: normal; opacity: .42; }
.labs .body {
  margin-top: 32px;
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.5;
}
.labs .labs-lead { margin-top: 20px; font-size: 16px; color: var(--muted-dark); }

/* Como funciona: quatro colunas, mesmo desenho dos benefícios da
   Comunidade, para o visitante reconhecer o padrão. */
.labs-como {
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 32px;
}
.labs-como > li { min-width: 0; }
.labs-como b {
  display: block;
  margin-bottom: 16px;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted-dark);
}
.labs-como h3 {
  font-size: var(--d5);
  font-weight: 350;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.labs-como p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-dark);
}

/* Os quatro Labs: linha por linha, nome e tema, mesmo padrão da
   lista de canais da seção Conteúdo. */
.labs-linha {
  margin-top: 96px;
  border-top: 1px solid var(--white);
}
.labs-linha > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  padding: clamp(20px, 2.6vh, 32px) 0;
  border-bottom: 1px solid var(--line-dark);
}
.labs-linha b {
  font-size: var(--d4);
  font-weight: 350;
  letter-spacing: -.05em;
  line-height: 1;
}
.labs-linha span {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-dark);
  text-align: right;
}

.labs-foot {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px 48px;
  align-items: end;
}
.labs-prova {
  margin-top: 48px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted-dark);
}
/* O preço de entrada usa a MESMA estrutura da linha da Comunidade (.price-row):
   rótulo, valor em --d2, qualificador. Antes ele era um <b> de 16px no meio de
   uma frase, enquanto o R$ 189 da Comunidade renderizava a 67,7px: o preço mais
   barato, que o PRODUCT.md nomeia como a porta de entrada, era o número menos
   visível da página. Os dois agora leem como a mesma espécie de afirmação. */
.labs-preco { display: grid; gap: 8px; }
.labs-preco small {
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.labs-preco strong {
  font-size: var(--d2);
  font-weight: 350;
  letter-spacing: -.06em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.labs-preco > span { font-size: 14px; color: var(--muted-dark); }
.labs-prova b {
  font-weight: 350;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 800px) {
  .labs-como {
    margin-top: 48px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
  .labs-linha { margin-top: 48px; }
  .labs-linha > li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .labs-linha span { text-align: left; }
  .labs-foot { grid-template-columns: 1fr; align-items: start; }
  .labs-foot .button { width: 100%; }
}

/* =============================================================
   PERGUNTAS FREQUENTES (achado C9, 10/09/2026)
   <details> nativo: abre e fecha sem JavaScript, o teclado navega
   sozinho e o leitor de tela já sabe ler. Nenhuma biblioteca.
   ============================================================= */
.faq { padding: var(--sec) var(--pad); }
.faq-head { margin-bottom: 64px; }
.faq h2 {
  font-size: var(--d2);
  line-height: .92;
  letter-spacing: -.07em;
  font-weight: 350;
}
/* .now e .agencia eram os dois unicos <em> da pagina fora de qualquer regra,
   e por isso renderizavam em italico de verdade com opacidade cheia, enquanto
   os outros oito sao verticais com opacidade reduzida. Mesma tag, dois
   significados. Entram no grupo dos titulos de secao em --d3. */
.faq h2 em, .now h2 em, .agencia h2 em { font-style: normal; opacity: .42; }
.faq-lista { border-top: 1px solid var(--white); }

.faq-item { border-bottom: 1px solid var(--line-dark); }
.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 350;
  letter-spacing: -.015em;
  line-height: 1.35;
  transition: opacity 200ms var(--ease);
}
/* o triângulo padrão do navegador não combina com o resto */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }

/* Cruz que vira menos: dois traços, o de cima gira e some */
.faq-item summary i {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  align-self: center;
}
.faq-item summary i::before,
.faq-item summary i::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--ouro-claro);
  transition: transform 240ms var(--ease);
}
.faq-item summary i::after { transform: rotate(90deg); }
.faq-item[open] summary i::after { transform: rotate(0deg); }
.faq-item[open] summary { opacity: .55; }

.faq-item > p {
  max-width: 62ch;
  padding: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-dark);
}

.faq-rodape {
  margin-top: 48px;
  font-size: 14px;
  color: var(--muted-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 20px;
}
.faq-rodape .path-cta { color: var(--white); }

@media (hover: hover) and (pointer: fine) {
  .faq-item summary:hover { opacity: .7; }
}
@media (max-width: 800px) {
  .faq-head { margin-bottom: 40px; }
  .faq-item summary { gap: 16px; }
}
/* Impressão: pergunta e resposta juntas, tudo aberto */
@media print {
  .faq-item > p { display: block !important; }
  .faq-item summary i { display: none; }
}

@media (max-width: 800px) {
  .agencia { grid-template-columns: 1fr; gap: 32px; }
}

/* Linha legal do rodapé: razão social, CNPJ, endereço e reserva de direitos.
   Fica abaixo da barra de links, em corpo menor, que é onde o leitor espera
   encontrar e onde não compete com a navegação. */
.footer-legal {
  grid-column: 1 / -1;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  max-width: 90ch;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--muted-dark);
}
.footer-legal b { font-weight: 400; color: var(--white); }
@media (max-width: 800px) {
  .footer-legal { margin-top: 20px; font-size: 11px; line-height: 1.6; }
}

/* A foto da Comunidade é deitada (3:2) numa caixa quase em pé, então o corte
   automático pelo centro fatiava as pessoas das duas pontas. Deslocando o
   ponto de interesse para a direita, ficam quatro figuras inteiras e a
   conversa lê. Ao trocar a foto, revisar este valor. */
.community-media img { object-position: 64% center; }

/* Parede de nomes dos professores (10/09/2026).
   Fluxo corrido separado por ponto médio, mesmo padrão do rodapé da seção
   de experiências. Ocupa a largura toda abaixo da grade de retratos: é uma
   massa de autoridade, não uma tabela. */
.faculty-nomes {
  grid-column: 1 / -1;
  margin-top: 96px;
  padding-top: 40px;
  border-top: 1px solid var(--line-dark);
}

/* =============================================================
   BANDA DE NOMES DOS PROFESSORES
   Três filas desfilando, a do meio em sentido contrário. O trilho
   carrega o conteúdo duas vezes e anda até -50%: no fim do ciclo a
   segunda cópia está exatamente onde a primeira começou, então o
   laço não tem salto.

   RAIO ZERO, como o resto do site. O componente de referência usava
   cápsula em pílula e avatar redondo; aqui é retângulo com fio de um
   pixel e miniatura quadrada, que é a linguagem desta folha.

   A PAUSA NÃO É ENFEITE: conteúdo que se move sozinho por mais de 5
   segundos precisa ter como parar (WCAG 2.2.2), a mesma regra que
   obriga o botão do vídeo da hero. Pausa no hover não serve sozinha,
   porque no toque não existe hover.
   ============================================================= */
.nomes-banda { position: relative; }
.nomes-fila { overflow: hidden; }
.nomes-fila + .nomes-fila { margin-top: 12px; }
.nomes-trilho {
  display: flex;
  width: max-content;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: desfila 78s linear infinite;
}
.nomes-fila--reverso .nomes-trilho { animation-direction: reverse; }
@keyframes desfila { to { transform: translateX(-50%); } }

/* A pausa vale para as três filas ao mesmo tempo. */
.nomes-banda.pausado .nomes-trilho { animation-play-state: paused; }

.capsula {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--line-dark);
  white-space: nowrap;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.capsula img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  display: block;
}
.capsula span {
  font-size: 13px;
  line-height: 1;
  color: var(--white);
}
/* Sem retrato: a cápsula encolhe e o nome ocupa tudo. O professor não some
   da parede só porque a foto ainda não chegou. */
.capsula--sem-foto { padding: 14px 16px; }

@media (hover: hover) and (pointer: fine) {
  .capsula:hover { border-color: var(--ouro); background-color: rgba(248, 247, 243, .06); }
}

/* O botão de pausa mora no canto da banda, com o mesmo desenho do botão do
   vídeo da hero: o site já tem um controle desses e não precisa de um segundo
   vocabulário. */
/* ATENÇÃO: `.media-toggle` nasce com `opacity: 0` e `pointer-events: none`
   porque o botão do vídeo só aparece no hover da hero. Fora dali ele fica
   invisível E inalcançável, que é como este nasceu. Aqui ele precisa estar
   sempre à vista: é o único jeito de parar o desfile, e no toque não existe
   hover. Dois seletores para vencer `.media-toggle` independente da ordem. */
.media-toggle.nomes-pausa {
  position: absolute;
  right: 0;
  bottom: -56px;
  opacity: 1;
  pointer-events: auto;
}

/* No telefone a cápsula de 40px de foto e 13px de nome ocupava até 242px de
   largura: cabia uma e meia na tela, e uma banda em que se vê um nome de cada
   vez deixa de ser banda. Encolhe para caber três. */
@media (max-width: 800px) {
  .nomes-trilho { gap: 8px; }
  .nomes-fila + .nomes-fila { margin-top: 8px; }
  .capsula { gap: 8px; padding: 4px 12px 4px 4px; }
  .capsula img { width: 32px; height: 32px; }
  .capsula span { font-size: 12px; }
  .capsula--sem-foto { padding: 10px 12px; }
  .media-toggle.nomes-pausa { bottom: -52px; }
}

/* Sem movimento: as filas viram uma lista que quebra linha, que é a parede
   de nomes de sempre. Nada se move e nada some. */
@media (prefers-reduced-motion: reduce) {
  .nomes-trilho {
    animation: none;
    width: auto;
    flex-wrap: wrap;
  }
  .nomes-trilho > [aria-hidden="true"] { display: none; }
  .nomes-pausa { display: none; }
}
@media (hover: hover) and (pointer: fine) {
}
@media (prefers-reduced-motion: reduce) {
}

/* =============================================================
   MENOS RÉGUAS (revisão de design, 10/09/2026)
   A página tinha 48 réguas horizontais. Boa parte vinha de listas que
   fechavam com uma linha embaixo do último item, logo antes da borda da
   própria seção: duas linhas separando o mesmo nada.
   Regra que passa a valer: uma lista de N itens usa N-1 separadores.
   ============================================================= */
/* CUIDADO AO EDITAR ESTA LISTA. Ela já teve uma vírgula sobrando no fim, e o
   comentário entre a vírgula e a chave não interrompe nada: o navegador leu
   os quatro :last-child e o .labs-como como UM seletor só, e aplicou neles o
   `border-top: 0; padding-top: 0` que era só do .labs-como. Resultado, achado
   pelo cliente em 10/09/2026: o último item de cada lista perdia o respiro de
   cima e ficava espremido contra o anterior (Labs de 87px para 67px, agenda
   de 169px para 136px), e o fio de fechamento que a regra deveria remover
   continuava lá, porque `border-bottom` nunca chegou a ser escrito. */
.now-list li:last-child,
.faq-item:last-child,
.labs-linha > li:last-child,
.channels li:last-child a { border-bottom: 0; }

/* Na seção dos Labs havia três réguas empilhadas: a da seção, a do "como
   funciona" e a da lista dos quatro Labs. A do meio sai. */
.labs-como { border-top: 0; padding-top: 0; }

/* =============================================================
   FAQ: ABRIR E FECHAR COM ALTURA ANIMADA, SEM JAVASCRIPT
   O que as bibliotecas de componente resolvem com Radix mais keyframes de
   Tailwind, o navegador já faz sozinho desde 2024:
   - ::details-content dá acesso ao miolo do <details>;
   - interpolate-size: allow-keywords deixa animar de 0 até "auto", que é o
     único jeito de animar altura sem cravar um valor em pixel;
   - transition-behavior: allow-discrete anima a troca de visibilidade, que
     normalmente pula.
   Navegador que não suporta abre e fecha na hora, como antes. Nada quebra.
   ============================================================= */
@supports selector(::details-content) {
  .faq-lista { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: content-visibility 280ms allow-discrete,
                block-size 280ms var(--ease),
                opacity 200ms var(--ease);
  }
  .faq-item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content,
  .faq-item[open]::details-content { transition: none; }
}

/* A coluna da marca no rodapé tinha o logo e ~100px de vazio embaixo,
   enquanto a coluna ao lado carregava três listas cheias. A linha de
   posicionamento equilibra o bloco e fecha o site dizendo a mesma coisa
   que o H1 abre. */
.footer-tagline {
  margin-top: 20px;
  max-width: 26ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-dark);
}
@media (max-width: 800px) {
  .footer-tagline { margin-top: 16px; font-size: 13px; }
}

/* =============================================================
   MANIFESTO: AS PALAVRAS CHEGAM COM A ROLAGEM
   Efeito pedido pelo cliente em 10/09/2026, a partir de um componente React
   com a biblioteca "motion". Feito sem biblioteca nenhuma: desde 2024 o
   próprio navegador sabe amarrar uma animação à posição do elemento na tela
   (animation-timeline: view()), que é exatamente o que aquela biblioteca faz
   por baixo. Zero JavaScript, zero dependência.

   Onde foi aplicado e por quê: só no manifesto. É a tese da página, são seis
   palavras, e é a única seção puramente tipográfica, sem imagem competindo.
   NÃO repetir no fechamento: as duas frases são espelhadas de propósito
   ("exige evolução constante" na abertura do argumento, "não para de evoluir"
   no fecho), e animar as duas transformaria uma escolha em maneirismo.
   ============================================================= */
.manifesto h2 .p { display: inline-block; }

@supports (animation-timeline: view()) {
  @keyframes palavraChega {
    from { opacity: .12; }
    to   { opacity: 1; }
  }
  .manifesto h2 .p {
    animation: palavraChega linear both;
    animation-timeline: view();
  }
  /* Cada palavra acende um pouco depois da anterior. A leitura termina
     quando a seção está inteira na tela. */
  .manifesto h2 .p1 { animation-range: cover 5%  cover 20%; }
  .manifesto h2 .p2 { animation-range: cover 10% cover 25%; }
  .manifesto h2 .p3 { animation-range: cover 15% cover 30%; }
  .manifesto h2 .p4 { animation-range: cover 20% cover 35%; }
  .manifesto h2 .p5 { animation-range: cover 25% cover 40%; }
  .manifesto h2 .p6 { animation-range: cover 30% cover 45%; }
}

/* Quem pediu menos movimento lê a frase inteira, parada, desde o começo. */
@media (prefers-reduced-motion: reduce) {
  .manifesto h2 .p { animation: none; opacity: 1; }
}

/* SEGURANÇA DO EFEITO DO MANIFESTO
   A animação começa em 12% de opacidade e sobe conforme a seção entra na
   tela. Em contexto onde não existe rolagem (impressão, salvar em PDF,
   ferramenta de captura), a linha do tempo nunca avança e a frase ficaria
   ilegível. Nesses casos a frase aparece inteira, opaca, desde o início:
   o efeito enfeita um conteúdo que já está visível, nunca o esconde. */
@media print {
  .manifesto h2 .p { animation: none !important; opacity: 1 !important; }
}

/* =============================================================
   RODAPÉ: ÍCONES DAS REDES E LINHA LEGAL
   Os três ícones são desenho próprio, em traço, na mesma linguagem da seta
   que o site já usa: quadrado de cantos arredondados com a marca dentro.
   Nada de biblioteca de ícone, que traria centenas de glifos para usar três.
   currentColor faz cada um herdar a cor do rodapé.
   ============================================================= */
.footer-redes { display: flex; gap: 4px; }
.footer-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  opacity: .65;
  transition: opacity 200ms var(--ease);
}
.footer-redes a:first-child { margin-left: -10px; }
.footer-redes .rede { display: block; }
@media (hover: hover) and (pointer: fine) {
  .footer-redes a:hover { opacity: 1; }
}
/* O ::after de alvo de toque que vale para links de texto não faz falta
   aqui: o próprio <a> já tem 44px. */
.footer-redes a::after { content: none; }

/* A linha legal virou o que ela é: nota de rodapé. Saiu o endereço, que
   continua na política e nos termos, onde ele tem função. */
.footer-legal {
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .04em;
  max-width: none;
  color: var(--muted-dark);
}
.footer-legal b { font-weight: 400; color: var(--muted-dark); }

/* O controle do vídeo sai da composição sem sair do alcance: aparece quando
   o ponteiro entra na hero e quando o teclado chega nele. */
.media-toggle {
  opacity: 0;
  /* Sem isto o botão continuava clicável estando invisível: o ponteiro
     encontrava um alvo de 44px que ninguém vê. `pointer-events` volta junto
     com a opacidade, e o foco por teclado nunca dependeu de nenhum dos dois. */
  pointer-events: none;
  transition: opacity 220ms var(--ease), background 200ms var(--ease),
              border-color 200ms var(--ease);
}
.hero:hover .media-toggle,
.media-toggle:focus-visible { opacity: 1; pointer-events: auto; }
@media (hover: none) {
  .media-toggle { opacity: 1; pointer-events: auto; }
}

/* =============================================================
   CAPTAÇÃO COM O FORMULÁRIO DENTRO (10/09/2026)
   Antes: título grande, uma frase, um botão que abria modal, e 287px de
   nada entre a frase e o botão. Uma seção que existe para captar dado
   escondia a própria função atrás de um clique.
   Agora: a frase à esquerda, os sete campos à direita, tudo à vista.
   ============================================================= */
.capture-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 5vw;
  align-items: start;
}
.capture-lead {
  max-width: 34ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--muted-dark);
}
.capture form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
}
/* Campos que precisam da linha inteira */
.capture form > .field:nth-child(1),
.capture form > .field:last-of-type,
.capture form > .split,
.capture form > .button,
.capture form > .form-msg,
.capture form > .form-legal,
.capture form > .form-conv { grid-column: 1 / -1; }

/* O tema escuro inverte o traço e o texto dos campos */
.capture .field label { color: var(--muted-dark); }
.capture input, .capture select {
  border-bottom-color: var(--line-dark);
  color: var(--white);
}
.capture input:focus, .capture select:focus { border-bottom-color: var(--ouro-claro); }
/* Sem cor e fundo explícitos, o <select> nativo fica ilegível no modo
   escuro do Windows: texto escuro sobre lista escura. */
.capture select { background-color: var(--ink); color: var(--white); }
.capture select option { background-color: var(--ink); color: var(--white); }
.capture .form-legal { color: var(--muted-dark); max-width: 60ch; }
.capture .form-conv, .capture .field-dica { color: var(--muted-dark); }
/* O placeholder sem regra herdava o branco cheio do campo e ficava
   indistinguível de valor digitado. */
.capture input::placeholder { color: var(--muted-dark); opacity: 1; }
/* Erro no escuro: o tom do papel media 3,05:1 aqui. */
.capture .field-erro { color: var(--erro-claro); }
.capture input.is-invalid, .capture select.is-invalid { border-bottom-color: var(--erro-claro); }
.capture .form-msg { color: var(--white); }
.capture .button { justify-self: start; margin-top: 4px; }

@media (max-width: 800px) {
  .capture-grid { grid-template-columns: 1fr; gap: 40px; }
  .capture form { grid-template-columns: 1fr; gap: 18px; }
  .capture form > .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
  .capture .button { width: 100%; justify-self: stretch; }
}

/* =============================================================
   MARCAS: PATROCINADORES E PARCEIROS (10/09/2026)
   Faixa compacta, não seção inteira: ela vem entre uma seção escura e a
   linha do tempo, que também é clara. Como banda de altura curta, delimitada
   por fios, ela lê como intervalo e não como uma terceira seção clara
   seguida, que faria a página parecer que perdeu o ritmo.
   ============================================================= */
.marcas {
  padding: 64px var(--pad);
  border-bottom: 1px solid var(--line);
}
/* O rótulo empilha ACIMA do título, os dois na margem da página, como em
   toda outra seção. Antes isto era flex e punha o rótulo ao lado, criando uma
   segunda margem esquerda a 321px: o padrão que foi removido do site inteiro
   em 08/09/2026 por brigar com a margem única. */
.marcas-topo { display: block; }
/* --d5, o nível de "título dentro de card ou linha". Antes eram 20px soltos,
   um quinto tamanho de display fora da escala. --d3 seria o nível de título
   de seção, mas esta é uma faixa de apoio de 64px de respiro, não uma seção
   da narrativa: com --d3 ela gritava mais alto que a prova que carrega. */
.marcas h2 {
  font-size: var(--d5);
  font-weight: 350;
  letter-spacing: -.03em;
  line-height: 1.2;
}
/* Duas tentativas antes desta, e as duas erraram pelo mesmo motivo.
   Flex com gap grande: a soma das larguras naturais mais os intervalos
   passava da linha por pouco e a Wine Brands caía sozinha embaixo.
   Grade com colunas iguais: pior, porque os oito logos têm larguras
   naturais muito diferentes (de 52px a 132px) e coluna igual não cabe o
   mais largo sem sobrar espaço no mais estreito.
   O que funciona: flex com intervalo mínimo e space-between. Somados, os
   oito ocupam 651px, e o resto da linha vira respiro distribuído. */
.marcas-grade {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 16px;
}
/* Altura por logo, nunca largura: eles têm proporções muito diferentes e
   uma largura comum faria uns gigantes e outros invisíveis. */
/* As alturas vêm em em, não em px, e o em vem do font-size da própria
   faixa. Assim uma linha só encolhe os oito juntos e a fila continua
   cabendo, em vez de virar sete mais um logo órfão embaixo. */
.marcas-grade { font-size: 16px; }
.marca { width: auto; opacity: .82; transition: opacity 200ms var(--ease); }
.m-cimed            { height: 1.75em; }
.m-rio-investimento { height: 1.25em; }
.m-jusfy            { height: 1.875em; }
.m-somus            { height: 1.75em; }
.m-data-certify     { height: 2em; }
.m-etics            { height: 1.625em; }
.m-veroo            { height: 1.5em; }
.m-wine-brands      { height: 2em; }
/* Entre 801 e 1000px a fila não cabe no tamanho cheio: um giro no font-size
   resolve os oito de uma vez. */
@media (max-width: 1000px) {
  .marcas-grade { font-size: 13.5px; }
}

@media (hover: hover) and (pointer: fine) {
  .marca:hover { opacity: 1; }
}
@media (max-width: 800px) {
  .marcas { padding: 48px var(--pad); }
  .marcas-grade { margin-top: 28px; justify-content: flex-start; gap: 28px 32px; }
  /* No celular a linha não comporta os tamanhos do computador */
  .marcas-grade { font-size: 13px; }
  .marca { max-width: 40vw; }
}