/* ==========================================================================
   Da volatilidade à disponibilidade — Evento paralelo Expopostos 2026
   AutoMind + Argus Media

   Identidade visual definitiva da AutoMind (kit Id_visual):
   - Par tipográfico oficial: Hando (títulos e destaques) + Red Hat Display
     (corpo e rótulos)
   - Paleta oficial: #FA094E · #940755 · #44055A · #03045E · #100F0F · #F3F3F0
   - Gradiente de 2 stops, eixo 45°: #FA094E -> #03045E (o magenta e o roxo
     são a interpolação, não paradas)
   - Cantos RETOS, sem textura, sem emoji, sem 3D (briefing, seção 2)
   - Gradiente como ACENTO: preenchimento de botão, barra de 4px, texto
     recortado. Nunca como fundo de área grande.

   Cinco seções: hero · local · programação · marcas · confirmação.

   Escrito mobile-first: a entrada da página é um QR code escaneado
   no celular (RNF-01). O desktop vem depois, nos media queries.
   ========================================================================== */

/* ---------- Fontes ------------------------------------------------------ */
/* PAR TIPOGRÁFICO PADRÃO DO PROJETO: Hando (principal) + Red Hat Display
   (secundária), como manda a identidade definitiva da AutoMind. Não há
   terceira fonte, e nenhuma regra deste arquivo declara `font-family` fora
   dos tokens --display e --fonte.

   Auto-hospedadas: nenhuma requisição a terceiros (RNF-07). Os .otf do kit
   oficial viraram woff2 reduzidos ao subconjunto latino + "·" (21 KB por peso
   da Hando, contra ~60 KB do arquivo cheio).

   NOTA(Q-G7): a Hando é fonte comercial e o @font-face expõe o arquivo para
   download. A liberação de uso web é item do checklist de publicação — não
   muda o padrão, mas precisa estar registrada antes de a página ir ao ar. */
@font-face{
  font-family:'Hando';
  src:url('../fonts/Hando-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Hando';
  src:url('../fonts/Hando-ExtraBold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Red Hat Display';
  src:url('../fonts/RedHatDisplay-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Red Hat Display';
  src:url('../fonts/RedHatDisplay-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Red Hat Display';
  src:url('../fonts/RedHatDisplay-ExtraBold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}

/* ---------- Tokens ------------------------------------------------------ */
/* REGRA DO PROJETO: nenhuma cor nova. Os seis valores da paleta oficial são os
   únicos literais de cor daqui para baixo — todo o resto é mistura entre dois
   deles, com a proporção anotada ao lado. Precisou de um tom que não está
   nesta lista? Ele sai de uma mistura, não de um valor inventado. */
:root{
  /* --- Paleta oficial AutoMind — os únicos literais ---------------------- */
  --rosa:#FA094E;
  --magenta:#940755;
  --roxo:#44055A;
  --marinho:#03045E;
  --preto:#100F0F;
  --off:#F3F3F0;
  --branco:#FFFFFF;

  /* --- Gradiente da marca ----------------------------------------------- */
  /* 2 stops, eixo 45°, extraído do vetor do símbolo. O magenta e o roxo da
     paleta são a INTERPOLAÇÃO entre rosa e marinho, não paradas — não
     adicione stops. */
  --grad:linear-gradient(45deg,#FA094E 0%,#03045E 100%);
  --grad-v:linear-gradient(180deg,#FA094E 0%,#03045E 100%);
  --grad-h:linear-gradient(90deg,#FA094E 0%,#03045E 100%);
  /* Degradê do realce do hero ("à disponibilidade"). Vai do rosa ao magenta e
     PARA AÍ: não chega ao marinho. É a metade clara do --grad, e existe como
     token separado justamente para deixar explícito que a ponta escura ficou
     de fora — sobre o fundo escuro do hero ela apagava o fim da palavra.
     Histórico completo no comentário de .hero__realce. */
  --grad-realce:linear-gradient(45deg,#FA094E 0%,#940755 100%);

  /* --- Neutros: eixo off-white → preto ---------------------------------- */
  /* Antes eram tons lilás herdados do site institucional, fora da paleta.
     Agora são o próprio preto da marca diluído no próprio off-white dela.
     Os dois níveis de texto passam em 4,5:1 sobre off-white E sobre branco. */
  --tinta:#545353;       /* texto secundário · 70% preto · 6,9:1 / 7,7:1 */
  --tinta-fraca:#6F6F6E; /* texto terciário  · 58% preto · 4,5:1 / 5,0:1 */
  --linha:#E3E3E1;       /* borda de cartão  ·  7% preto */
  --linha-forte:#D3D3D0; /* borda em hover   · 14% preto */
  --papel:#FBFBFA;       /* fundo de cartão  · 30% off-white sobre branco */
  --fumo:#EAEAE8;        /* fim do degradê de seção · 4% preto */

  /* --- Estados ----------------------------------------------------------- */
  /* O estado de erro sai do rosa. */
  --erro-tinta:#8A0C30;  /* rosa + 48% preto · 8,7:1 sobre --erro-fundo */
  --erro-fundo:#FFF0F4;  /* rosa  6% sobre branco */
  --erro-linha:#FEBFD1;  /* rosa 26% sobre branco */

  /* --- Sombras: o roxo da paleta, nunca um cinza neutro ------------------ */
  --sombra-cartao:0 22px 48px rgba(68,5,90,.12);
  --sombra-btn:0 4px 24px rgba(250,9,78,.28);
  --sombra-btn-hover:0 6px 32px rgba(250,9,78,.40);

  /* --- Tipografia oficial ------------------------------------------------ */
  /* Hando nos títulos, números e rótulos; Red Hat Display no corpo. Este par
     é o padrão do projeto: nenhum `font-family` fora destes dois tokens. */
  --fonte:'Red Hat Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Hando','Red Hat Display',-apple-system,BlinkMacSystemFont,sans-serif;

  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:200ms;
  --dur-lenta:360ms;

  --int:1120px;
  --pad:22px;

  /* Altura da barra de navegação do hero. A partir de 768px ela é exata (e
     não mínima): é dela que sai o recuo do vídeo, que começa onde a barra
     termina. Mudou aqui, muda nos dois lugares de uma vez. */
  --nav-h:86px;
}

/* ==========================================================================
   PONTOS DE CORTE — mapa único
   --------------------------------------------------------------------------
   Mobile-first: a base é o celular e cada @media só ACRESCENTA. Cada ponto
   responde a UMA pergunta; não existe "o breakpoint de desktop".

   | Ponto                          | Pergunta que ele responde                |
   |--------------------------------|------------------------------------------|
   | base                           | celular em pé                            |
   | max-width: 359                 | as marcas cabem na barra? (tela de 320)   |
   | min-width: 600                 | os dois botões cabem lado a lado?         |
   | min-width: 768 AND             | cabe o hero cinematográfico? (vídeo,      |
   |   min-height: 450              | sticky, coreografia, ticket desenhado)    |
   | min-width: 900 / 1024          | escala tipográfica e das marcas           |
   | min-width: 1000                | os atalhos cabem em linha, sem sanduíche? |

   Três regras que já foram quebradas aqui e custaram bugs:

   1. **O par 768+450 aparece em TRÊS lugares** — o @media do vídeo, o
      `CONSULTA` do app.js e a saída antecipada do slider. Os três têm de bater.
      Já ficaram desencontrados (vídeo em 1024, resto em 768) e o resultado foi
      uma faixa de larguras com layout de desktop, palco de fotos por baixo da
      barra e nenhuma animação.

   1b. **O piso de altura já foi 600px e isso era um bug em produção.** Um
      notebook 1366x768 com escala do Windows em 125% dá ~614px de tela em CSS
      e um viewport perto de 530px — telas grandes caíam no layout de celular,
      sem vídeo. Não subir esse número: quem garante que a copy cabe em tela
      baixa são as medidas em `min(vw, vh)` do bloco do fim do arquivo, não o
      ponto de corte.

   2. **Alinhamento não é breakpoint.** A copy é centralizada em qualquer
      largura, na base. Os @media só mexem em TAMANHO e ESPAÇO. Quando as duas
      coisas moravam juntas, centralizar no celular pedia regra duplicada.

   E a armadilha estrutural do arquivo: media query NÃO soma especificidade.
   Uma regra base declarada depois de um @media vence o @media. Vários blocos
   aqui estão posicionados no fim do arquivo de propósito por causa disso, com
   comentário no lugar. Ao mover qualquer bloco, confira o que vem depois.
   ========================================================================== */

/* ---------- Base -------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  background:var(--off);
  color:var(--preto);
  font-family:var(--fonte);
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
strong{font-weight:800}

.int{max-width:var(--int);margin:0 auto;padding:0 var(--pad)}
/* Na seção 5 quem estreita é o conteúdo, não a caixa: se a caixa estreitasse,
   título e formulário sairiam do eixo à esquerda que as seções 1–4 seguem e
   saltariam para o meio da tela. A medida de leitura continua a mesma. */
.int--estreita > *{max-width:620px}

/* Aqui existia `.pular`: o atalho "Ir para a confirmação de presença", que
   ficava em `left:-9999px` e só aparecia (canto superior esquerdo, fundo
   `--marinho`) quando alguém chegava nele pelo Tab. Removido a pedido.

   O que se perdeu: o atalho de teclado para pular a barra e cair direto no
   formulário (WCAG 2.4.1, Bypass Blocks). O impacto aqui é pequeno — a barra
   tem poucos elementos focáveis e o CTA "Inscreva-se" já é um deles, levando
   ao mesmo `#rsvp` —, mas é uma perda, não um ganho. Se voltar, o caminho é
   restaurar a regra e escolher uma aparência que agrade no foco; o problema
   nunca foi ele existir, e sim como ficava quando aparecia. */

/* Rótulo só para leitor de tela */
.oculto{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Texto recortado no gradiente — só sobre fundo CLARO.
   Sobre escuro o fim marinho some; lá o acento é rosa chapado. */
.grad{
  display:inline-block;
  background-image:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* ---------- Entrada com a rolagem --------------------------------------- */
/* Só esconde se o JS confirmou presença (classe .js no <html>, posta antes da
   primeira pintura). Sem JS a página aparece inteira, sem depender de nada. */
.js [data-revelar]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease);
  transition-delay:calc(var(--atraso,0) * 90ms);
}
.js [data-revelar].revelado{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .js [data-revelar]{opacity:1;transform:none}
}

/* ---------- Botões ------------------------------------------------------ */
/* Medidas do .gradient-button / .border-button do institucional: 12px 24px,
   0,82rem, tracking .04em, peso 700 — subindo para 13px 30px e 0,86rem acima
   de 1024px. Sem caixa-alta: lá o rótulo vai como escrito. */
.btn{
  display:inline-block;
  font-family:var(--display);
  font-size:13px;font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;text-align:center;
  padding:12px 24px;
  border:0;cursor:pointer;
  transition:box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             transform 60ms ease;
  /* cantos retos: nenhum border-radius */
}
.btn--principal{background:var(--grad);color:var(--branco);box-shadow:var(--sombra-btn)}
.btn--principal:hover{box-shadow:var(--sombra-btn-hover)}
.btn--principal:active{transform:translateY(1px)}

/* .border-button + .hero-glass-button do institucional */
.btn--linha{
  color:var(--off);
  background:
    linear-gradient(135deg,rgba(243,243,240,.08),rgba(243,243,240,.02)),
    rgba(16,15,15,.52);
  border:1.5px solid rgba(243,243,240,.22);
  padding:10.5px 22px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.btn--linha:hover{
  background:
    linear-gradient(135deg,rgba(243,243,240,.12),rgba(243,243,240,.04)),
    rgba(16,15,15,.62);
  border-color:rgba(243,243,240,.40);
}

/* Contorno para fundo claro. O .btn--linha acima é vidro sobre escuro: no
   off-white ele vira um retângulo cinza ilegível. */
.btn--contorno{
  color:var(--preto);
  background:var(--branco);
  border:1.5px solid var(--linha-forte);
  padding:10.5px 22px;
}
.btn--contorno:hover{border-color:var(--preto);background:var(--papel)}

/* Só o enviar do formulário usa isto. Ele acompanha a largura dos campos em
   qualquer tela: é a única ação do cartão, e encolhê-lo no desktop o deixava
   com metade da largura das caixas que ele fecha. */
.btn--largo{width:100%;margin-top:6px}
.btn:focus-visible{outline:3px solid var(--marinho);outline-offset:3px}
/* Só os botões soltos sobre a foto (coluna esquerda) precisam de contorno
   claro — o botão de envio mora no cartão de vidro, claro, e um contorno
   off-white ali some contra o próprio fundo. */
.hero__coluna--copia .btn:focus-visible{outline-color:var(--off)}
.btn[disabled]{opacity:.55;cursor:progress;box-shadow:none}

/* ---------- Rótulos e títulos ------------------------------------------- */
.eyebrow,.rotulo{
  font-family:var(--display);
  font-size:11px;letter-spacing:.22em;font-weight:700;
  text-transform:uppercase;
  display:block;
}
/* Sobre claro o rótulo é o gradiente recortado (padrão do institucional) */
.rotulo{
  background-image:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  width:fit-content;
}
/* Sobre o hero escuro, rosa chapado */
.eyebrow{color:var(--rosa)}

.sec__titulo{
  font-family:var(--display);
  font-size:clamp(26px,7vw,34px);
  font-weight:800;line-height:1.08;
  letter-spacing:-.03em;
  margin:12px 0 26px;
}

/* ==========================================================================
   1 · HERO — composição portada do HeroSlider do site institucional
   --------------------------------------------------------------------------
   Referência: automind_institucional/components/home/HeroSlider.tsx,
   data/slides.ts e o bloco "Hero Swiper" de app/globals.css.

   A pilha, de baixo para cima:
     1. foto em OPACIDADE CHEIA (não é marca d'água)
     2. véu horizontal, escuro à esquerda e aberto à direita — muda por slide
     3. duas tintas radiais fixas
     4. um brilho difuso de 150px na base
     5. a copy num painel de vidro alinhado à direita

   Três desvios conscientes, todos anotados no lugar: altura mínima em vez de
   fixa, sem setas de navegação e as cores das camadas trazidas para a paleta
   oficial (o institucional usa preto puro e um rosa/violeta próprios).
   ========================================================================== */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--preto);
  color:var(--off);
  display:flex;flex-direction:column;
  /* O institucional trava `height`. Aqui é min-height: a copy deste hero é
     bem maior (logos, pergunta, cartão de data e dois botões) e altura fixa
     cortaria conteúdo no celular. */
  min-height:max(82svh,500px);
  padding-bottom:56px;
}

/* ---------- Slides ------------------------------------------------------- */
/* Mesmas três fotos do institucional. Só o primeiro chega com src/srcset no
   HTML; os outros dois entram depois do load (assets/js/app.js). */
.palco{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--preto)}

/* O Swiper do institucional roda no efeito 'slide' (translação horizontal),
   não em fade — é o padrão da lib e não foi sobrescrito lá. Reproduzido aqui
   com translateX: o slide entra pela direita e o que sai continua para a
   esquerda. `.sem-transicao` é o que reposiciona um slide já usado sem que
   ele volte voando pela tela. */
.palco__slide{
  position:absolute;inset:0;
  transform:translateX(100%);
  transition:transform 850ms var(--ease);
  will-change:transform;
}
.palco__slide.is-ativo{transform:translateX(0)}
.palco__slide.is-saindo{transform:translateX(-100%)}
.palco__slide.sem-transicao{transition:none}

.palco__foto{width:100%;height:100%;object-fit:cover;object-position:center}

/* Véu por slide. As paradas vêm de data/slides.ts, mas aqui estão ~12% mais
   claras do lado escuro e ~7% na borda direita — 5º desvio consciente, pedido
   para a foto aparecer mais. As proporções entre os três slides e o formato
   90deg escuro-à-esquerda são os de lá; só a intensidade mudou.
   Os valores originais, se for preciso voltar:
     slide 1  .90 / .74 / .56
     slide 2  .96 / .84 / .62
     slide 3  .94 / .80 / .54
   Clarear mais que isto exige remedir o texto do painel: quem chega primeiro
   no piso de 4,5:1 é o .hero__apoio, que já está anotado no limite. */
.palco__slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,15,15,.79) 0%,rgba(16,15,15,.66) 42%,rgba(16,15,15,.52) 100%);
}
.palco__slide[data-veu="2"]::after{
  background:linear-gradient(90deg,rgba(16,15,15,.85) 0%,rgba(16,15,15,.75) 45%,rgba(16,15,15,.58) 100%);
}
.palco__slide[data-veu="3"]::after{
  background:linear-gradient(90deg,rgba(16,15,15,.83) 0%,rgba(16,15,15,.72) 40%,rgba(16,15,15,.50) 100%);
}

/* ---------- Vídeo controlado pela rolagem (desktop) ---------------------- */
/* Do 768px para cima o fundo do hero deixa de ser o palco de fotos e passa a
   ser um vídeo do próprio evento, com o quadro amarrado à posição de rolagem
   (dolly-back: começa no brinde em close e abre revelando o salão).

   Por que só no desktop: o arquivo tem 3,3 MB e a entrada da página é QR code
   em rede móvel (RNF-01/RNF-03). O <video> nasce com preload="none" e só
   recebe load() quando esta media query casa — no celular nem um byte dele sai
   da rede, e o palco de fotos continua sendo o fundo, sem alteração nenhuma.

   768px é o MESMO ponto em que o hero já vira duas colunas e em que os atalhos
   da barra aparecem. Antes isto estava em 1024px e desencontrava dos outros
   dois: numa janela entre 768 e 1024 saía o layout de desktop com o palco de
   fotos, sem sticky e sem recuo da barra — que é exatamente o sintoma de
   "o vídeo está por baixo da barra e não anima". Manter os três alinhados.

   A condição tem DUAS pernas: largura ≥768 E altura ≥450. A altura existe
   porque o hero vira `sticky` com `height:100vh` — numa tela baixa a copy não
   cabe no que sobra depois da barra e vazaria para a seção seguinte.

   O piso já foi 600px e isso ERA UM BUG: notebook 1366x768 com escala do
   Windows em 125% dá ~614px de tela em CSS, e o viewport, já descontada a
   barra do navegador, fica perto de 530px. Telas grandes de verdade caíam no
   layout de celular — sem vídeo, porque o vídeo é desktop-only.

   450px exclui celular deitado (o maior é 932x430) e aceita qualquer
   notebook. O que segura a copy nessa faixa nova não é mais o corte: são as
   medidas em `vh` do bloco do fim do arquivo, que encolhem título e espaços
   conforme a tela baixa. Mexer em uma coisa sem a outra traz o bug de volta.

   O mesmo par de condições está no `CONSULTA` do app.js e na saída antecipada
   do slider. Os três têm de bater.

   O mecanismo (encode All-Intra + seek por quadro) está no README. */
.hero-cena{position:relative}
.hero__video{display:none}

@media (min-width:768px) and (min-height:450px) and (prefers-reduced-motion:no-preference){
  /* A cena alta é o que dá curso à rolagem. 330vh de wrapper com o hero
     grudado no topo = 230vh de scrub (330 − 100), que é o que app.js usa como
     denominador do avanço. Mudou aqui, o JS acompanha sozinho.

     Eram 250vh. Subiu para abrir a pausa de ~1,5 s entre a saída da copy e a
     chegada do ticket (pedido): dentro dos 150vh antigos essa pausa só caberia
     empurrando a entrada do ticket para o fim do curso, e ele mal apareceria
     antes de o hero soltar. Ver COPIA_SAI/TICKET_ENTRA no app.js. */
  .hero-cena{height:330vh}
  .hero{position:sticky;top:0;height:100vh;min-height:0}

  /* Quem faz o fundo agora é o vídeo: o palco de fotos e os marcadores saem.
     O app.js também para o autoplay e não baixa a 2ª foto neste tamanho.
     Os marcadores vão pelo seletor descendente porque `.palco__pontos` é
     declarado DEPOIS deste bloco no arquivo — com a mesma especificidade,
     quem vem depois vence, e o display:none não pegaria. */
  .palco{display:none}
  .hero-cena .palco__pontos{display:none}

  /* Altura exata da barra: o recuo do vídeo abaixo depende dela bater. */
  .hero__topo{height:var(--nav-h);min-height:0}

  /* O vídeo começa onde a barra termina — não corre por baixo dela. O que
     fica atrás da faixa é o preto do .hero, chapado. */
  .hero__video{
    display:block;
    position:absolute;inset:var(--nav-h) 0 0 0;z-index:0;
    overflow:hidden;background:var(--preto);
  }
  .hero__video-midia{
    display:block;width:100%;height:100%;
    object-fit:cover;object-position:center;
  }

  /* O véu vinha do ::after de cada .palco__slide. Sem palco, ele precisa vir
     daqui: é ele que sustenta a conta de contraste do CLAUDE.md (seção
     Contraste), que autoriza a coluna esquerda a ficar direto sobre o fundo,
     sem painel. Reaproveitado o do slide 2 — o mais escuro dos que já estão
     em uso — porque o vídeo tem toalha branca e luz de salão, mais claro que
     as fotos do palco. O P&B do vídeo NÃO ajuda nessa conta: dessaturar não
     mexe na luminância, só na cor, e quem entra no cálculo de contraste é a
     luminância. Se o texto parecer fraco sobre os quadros do fim, o próximo
     passo é o valor ORIGINAL do institucional para este slide
     (.96 / .84 / .62), anotado no bloco do palco acima. */
  .hero__video::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(16,15,15,.85) 0%,rgba(16,15,15,.75) 45%,rgba(16,15,15,.58) 100%);
  }
}

/* Tintas radiais fixas. No institucional a primeira é preto puro; aqui é o
   preto da paleta, que é o mesmo papel com a cor certa. */
.hero__tintas{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 18% 42%,rgba(16,15,15,.16),transparent 34%),
    radial-gradient(circle at 72% 78%,rgba(250,9,78,.07),transparent 26%);
}

/* Brilho difuso na base. O institucional usa um rosa e um violeta próprios,
   fora da paleta do kit — aqui são o rosa e o roxo oficiais. */
.hero__brilho{
  position:absolute;bottom:0;left:10%;z-index:1;
  width:100%;height:200px;
  pointer-events:none;
  filter:blur(150px);
  background:radial-gradient(circle,rgba(250,9,78,.18) 0%,rgba(68,5,90,.10) 48%,transparent 76%);
}

/* ---------- Faixa de logos e painel -------------------------------------- */
/* A faixa de logos ocupa o lugar que o navbar ocupa no institucional. */
/* A faixa da barra tem altura própria: é ela que o vídeo respeita a partir de
   1024px. `min-height` aqui porque no celular as marcas podem quebrar linha;
   no desktop ela vira altura exata (bloco do vídeo, mais abaixo). */
.hero__topo{
  position:relative;
  /* Acima do .hero__meio (z-index:2). `position:relative` + `z-index` faz do
     .hero__topo um contexto de empilhamento próprio, então o z-index:4 do
     painel do menu só vale DENTRO dele — sem subir a faixa inteira, o painel
     aberto ficava por baixo da copy da hero, que vem depois no DOM com o mesmo
     z-index:2. */
  z-index:5;
  min-height:var(--nav-h);
  display:flex;align-items:center;
}
.hero__topo > .int{width:100%}
.hero__meio{
  position:relative;z-index:2;
  flex:1;display:flex;align-items:center;
  padding:40px 0 24px;
}
/* Sem isto o container vira item flex de largura automática, encolhe até a
   grade e a coluna do formulário não tem folga para crescer até seu track. */
.hero__meio > .int{width:100%}

/* ---------- Grade de duas colunas ---------------------------------------- */
/* Copy solta a esquerda, direto sobre a foto/veu (sem painel, sem blur, sem
   borda) e um cartao de convite a direita, em vidro liquido (.hero__convite)
   — so o titulo, o subtitulo e o botao que leva ao formulario completo, no
   fim da pagina. Empilha no celular, copy primeiro. */
.hero__grade{display:grid;grid-template-columns:1fr;gap:32px}
/* Aqui existia um terceiro layout: duas colunas lado a lado a partir de 768px
   (copy à esquerda, ticket à direita). Ele foi REMOVIDO, e vale entender por
   quê antes de trazer de volta.

   Depois que o hero cinematográfico passou a empilhar as duas colunas na mesma
   célula (bloco do fim do arquivo, ≥768px E ≥600px de altura), a regra de duas
   colunas só sobrava numa fresta: largura ≥768 com altura <600 — ou seja,
   celular em paisagem. Um hero de duas colunas em 390px de altura é apertado,
   e era essa fresta que segurava a única variante em que a copy não ficava
   centralizada na tela.

   Sobraram DOIS layouts de hero, e é assim que deve ficar:
     1. empilhado e centralizado — todo o resto;
     2. cinematográfico (vídeo + sticky + coreografia) — ≥768px e ≥600px.
   Menos um caminho para desencontrar. */
/* Guarda-corpo: mantem o texto fora da zona fraca do veu, a direita. O veu
   e um degrade horizontal (escuro-a-esquerda) — alargar esta coluna sem
   refazer a conta de contraste do CLAUDE.md pode furar o piso de 3:1/4,5:1.
   O pior caso medido (768–900px, onde a trilha desta coluna e mais estreita
   em proporcao ao viewport) fica perto de véu≈0,65 — o valor que a conta do
   CLAUDE.md usa. */
/* ---------- Alinhamento da copy: centralizado em TODAS as larguras --------
   Isto vive aqui, na base, e não dentro do bloco do hero sticky, porque são
   duas perguntas independentes:

     ALINHAMENTO  — como a copy se distribui. Vale em qualquer tela.
     COREOGRAFIA  — copy que sai e ticket que entra pela rolagem. Só existe
                    dentro do hero sticky (≥768px E ≥600px de altura).

   Elas já estiveram fundidas no mesmo @media, e o efeito colateral foi que
   centralizar no celular exigia duplicar regra. Separadas, cada valor mora num
   lugar só: o que muda com a largura são TAMANHOS e ESPAÇOS, no bloco do fim
   do arquivo, não o alinhamento.

   Contraste: centralizar move o texto para o meio do véu horizontal
   (escuro-à-esquerda). O pior caso da conta do CLAUDE.md já é véu≈0,65, que é
   justamente a faixa do meio — é o mesmo caso que o desktop centralizado já
   assumia, não um caso novo. */
.hero__coluna--copia{
  max-width:660px;
  margin-inline:auto;
  text-align:center;
}
.hero__coluna--convite{width:100%}

/* ---------- Paginação ---------------------------------------------------- */
/* Marcadores quadrados de 6px; o ativo vira uma barra de 28px no gradiente.
   Sem as setas do institucional: lá elas navegam conteúdo, aqui só trocam a
   foto de fundo. */
.palco__pontos{
  position:relative;z-index:2;
  display:flex;justify-content:center;gap:8px;
  padding-top:6px;
}
.ponto{
  width:6px;height:6px;padding:0;
  border:0;border-radius:0;cursor:pointer;
  background:rgba(243,243,240,.35);
  transition:width var(--dur-lenta) var(--ease),background var(--dur-lenta) var(--ease);
}
.ponto.is-ativo{width:28px;background-image:var(--grad-h)}
.ponto:focus-visible{outline:2px solid var(--off);outline-offset:3px}

/* ---------- Faixa de logos ---------------------------------------------- */
/* Arquivos das duas realizadoras. Da Argus entra só o PNG, na versão negativa.
   Os dois estão aparados na margem transparente, então a altura em CSS é a
   altura ótica — e como os dois são lockups vazados sobre preto, ficam quase
   no mesmo degrau. A Argus fica um fio menor porque o traço dela sobe acima
   do lettering e ganharia peso demais na mesma altura. */
/* ---------- Barra de navegação do hero ----------------------------------- */
/* Marcas à esquerda, atalhos das seções à direita. Sem fundo próprio: quem dá
   a superfície é o preto do .hero, já que do 1024px para cima o vídeo começa
   só depois desta faixa — a barra não flutua sobre imagem nenhuma.
   Rótulos em Hando caixa-alta, mesma família dos .rotulo de seção. */
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  /* 12px no celular: com 24 as duas marcas mais o botão do menu não cabiam na
     linha e a barra quebrava em duas, estourando a altura de --nav-h. Volta a
     24 a partir de 768px, onde entram os atalhos. */
  gap:12px;flex-wrap:wrap;
}

/* Abaixo de 768px os atalhos viram menu sanduíche: o botão abre um painel
   ancorado na base da barra (o .hero__topo é o `position:relative` de
   referência). Acima disso o botão some e os atalhos voltam a ser uma linha. */
.navbar__botao{
  display:flex;align-items:center;justify-content:center;
  /* 44px: alvo de toque confortável, mesmo espírito dos 52px dos campos. */
  width:44px;height:44px;margin-right:-11px;
  padding:0;border:0;background:none;cursor:pointer;
}
.navbar__botao:focus-visible{outline:2px solid var(--off);outline-offset:2px}

/* Line-art monocromático, cantos retos — as duas regras da seção Forma. */
.navbar__hamburguer{
  position:relative;display:block;
  width:22px;height:2px;background:var(--off);
  transition:background var(--dur) var(--ease);
}
.navbar__hamburguer::before,
.navbar__hamburguer::after{
  content:"";position:absolute;left:0;
  width:22px;height:2px;background:var(--off);
  transition:transform var(--dur) var(--ease),top var(--dur) var(--ease);
}
.navbar__hamburguer::before{top:-7px}
.navbar__hamburguer::after{top:7px}
/* Aberto: o traço do meio some e os outros dois viram X. */
.navbar__botao[aria-expanded="true"] .navbar__hamburguer{background:transparent}
.navbar__botao[aria-expanded="true"] .navbar__hamburguer::before{top:0;transform:rotate(45deg)}
.navbar__botao[aria-expanded="true"] .navbar__hamburguer::after{top:0;transform:rotate(-45deg)}

.navbar__nav{
  display:none;
  position:absolute;top:100%;left:0;right:0;z-index:4;
  flex-direction:column;align-items:stretch;
  background:var(--preto);
  border-top:1px solid rgba(243,243,240,.14);
  padding:4px var(--pad) 14px;
}
.navbar__nav.is-aberto{display:flex}
.navbar__nav.is-aberto .navbar__link{
  padding:14px 0;
  border-bottom:1px solid rgba(243,243,240,.10);
}

/* CTA da barra. Especificidade com `.navbar` de propósito: as medidas de `.btn`
   são redefinidas no bloco @media de 1024px, que vem DEPOIS deste no arquivo —
   com 0,1,0 dos dois lados o `.btn` venceria por ordem e o botão da barra
   voltaria ao tamanho do botão de seção. */
.navbar .navbar__cta{
  padding:11px 22px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
/* No painel do celular ele vira um bloco só, separado dos atalhos. */
.navbar__nav.is-aberto .navbar__cta{
  display:flex;justify-content:center;
  margin-top:14px;
  padding:15px 22px;
}

/* 1000px, NÃO 768. Este é o único ponto de corte do hero que não acompanha os
   outros, e é de propósito: aqui a pergunta não é "é desktop?" e sim "os
   atalhos cabem na linha?".

   Em 768px eles não cabem — marcas + 3 atalhos + CTA pedem ~826px e sobram
   ~731. Com `flex-wrap`, o nav ia para uma segunda linha; como a faixa tem
   altura fixa (--nav-h), essa linha vazava da barra e caía por cima das logos
   e da hero. Celular em paisagem (844px) cai bem no meio dessa faixa, que foi
   como o problema apareceu.

   De 768 a 999 vale o menu sanduíche: a barra fica só com marcas + botão, que
   cabe em qualquer largura. O vídeo, o sticky e a altura da faixa continuam
   virando em 768 — são decisões independentes desta. */
@media (min-width:1000px){
  .navbar{gap:24px}
  .navbar__botao{display:none}
  .navbar__nav{
    display:flex;flex-direction:row;align-items:center;gap:28px;
    position:static;background:none;border:0;padding:0;
  }
}

.navbar__link{
  font-family:var(--display);
  font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  /* --off sólido: ~6,5:1 no pior caso do hero (ver CLAUDE.md, Contraste). */
  color:var(--off);
  text-decoration:none;
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
.navbar__link:hover{border-bottom-color:var(--rosa)}
/* O outline padrão é marinho, que some no fundo escuro — mesma correção já
   feita nos botões da coluna esquerda do hero. */
.navbar__link:focus-visible{outline-color:var(--off)}

/* Medidas do celular. Com 26/31px e 16 de gap, marcas + botão do menu somavam
   mais que a largura útil de uma tela de 360–390px e a barra quebrava em duas
   linhas. Do 600px para cima as alturas voltam a crescer (blocos no fim do
   arquivo), onde há espaço de sobra. */
.marcas{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.marcas__logo{width:auto}
.marcas__logo--automind{height:22px}
.marcas__logo--argus{height:26px}
.marcas__risco{
  display:block;width:1px;height:20px;
  background:rgba(243,243,240,.28);
}
/* Telas de 320px (iPhone SE 1ª geração e afins): mesmo com 22/26px as duas
   marcas + o botão do menu passavam dos ~261px úteis e a barra quebrava em
   duas linhas. Aqui elas encolhem mais um degrau.
   DEPOIS das regras base de propósito: media query não soma especificidade, e
   antes delas o `height` base venceria por ordem. */
@media (max-width:359px){
  .marcas{gap:8px}
  .marcas__logo--automind{height:18px}
  .marcas__logo--argus{height:21px}
  .marcas__risco{height:16px}
}

/* ---------- Chamada dentro do painel ------------------------------------- */
/* Escala tipográfica do painel do institucional, convertida de rem para px.
   O eyebrow do hero de lá é cinza-claro, não o gradiente/rosa dos rótulos de
   seção — e faz sentido: com o realce do título já em rosa, um eyebrow rosa
   logo acima empilharia dois acentos iguais. */
.hero .eyebrow{
  font-size:11px;letter-spacing:.16em;
  color:rgba(243,243,240,.84);
  margin-bottom:16px;
}

.hero__titulo{
  font-family:var(--display);
  /* Maior que antes — pedido de mais destaque pro titulo. 1,6rem no celular
     → 3,6rem acima de 1024px. */
  font-size:clamp(26px,5.6vw,58px);
  font-weight:800;line-height:1.03;
  letter-spacing:-.03em;
  max-width:20ch;
  /* auto nas laterais: sem isto o `max-width` acima prenderia o título à
     esquerda mesmo com o bloco centralizado. */
  margin:0 auto 18px;
  color:var(--off);
  /* Reforco tipografico, nao um container: some em @media print. Sem painel
     por tras, o titulo esta sobre o veu puro — a sombra da mais margem
     perceptual em cima da conta de contraste (ver .hero__realce). */
  text-shadow:0 2px 10px rgba(16,15,15,.55);
}
/* ROSA CHAPADO — e este é o fim da história, depois de quatro tentativas de
   degradê recortado. É também, exatamente, a regra geral que este projeto já
   tinha escrita: "sobre fundo escuro o gradiente perde a metade marinho, então
   lá o acento é rosa chapado" (CLAUDE.md, seção Cor).

   Por que degradê nunca funcionou aqui: com `background-clip:text` o texto fica
   transparente e QUEM DÁ A COR é o background. Qualquer ponta escura do degradê
   vira mancha na palavra — e todo degradê da marca termina escuro, porque a
   marca vai de rosa a marinho. As quatro versões que morreram:
     1. --grad inteiro (rosa -> marinho): o fim virava azul quase preto;
     2. magenta -> roxo-meio: as DUAS pontas escuras (L=0,07 e 0,04), pior;
     3. os mesmos tons diluídos em --off (pastel): contra um reflexo claro da
        foto o pastel fica quase do mesmo cinza do fundo e some ainda mais;
     4. rosa -> magenta (metade clara do --grad): ainda escurecia no fim.
   Um contorno sólido (8 sombras de 2px) também foi tentado: em negrito grosso
   o anel fecha e cobre a palavra de preto.

   --rosa é a cor com que o botão principal COMEÇA (.btn--principal usa --grad),
   é a mesma do .eyebrow logo acima, e é a única que não tem ponta escura por
   ser uma cor só. Contraste no pior caso desta coluna: ~1,9:1 — abaixo do piso
   de 3:1 para texto grande, e portanto ainda um desvio consciente; a diferença
   é que agora é uniforme, sem trecho que some. Conta no CLAUDE.md.

   >>> ONDE ISTO PAROU: degradê rosa -> magenta (`--grad-realce`). <<<

   Duas decisões seguidas de quem pediu chegaram aqui. Primeiro veio "o mesmo
   degradê do botão Inscreva-se", que é o `--grad` inteiro (rosa -> marinho) —
   e ele fez exatamente o que a versão 1 da lista acima previa: o fim da
   palavra virou azul quase preto. Depois veio "que não vá até o roxo escuro,
   varie só do magenta claro ao magenta escuro", que é a versão 4.

   Ou seja: o histórico acima não estava errado, e o caminho voltou para o
   ponto que ele já apontava. O magenta ainda é mais escuro que o rosa
   (L=0,07 contra 0,21), então a palavra ainda escurece da esquerda para a
   direita — só que numa faixa curta e sem trecho quase-preto.

   `text-shadow:none` aqui é obrigatório, não estético: com
   `background-clip:text` a cor do texto é `transparent`, e a sombra herdada do
   `.hero__titulo` seria pintada ATRÁS do recorte, aparecendo como um borrão
   escuro em volta das letras. Isso é parte do que "manchava" nas tentativas
   antigas. */
.hero__realce{
  background-image:var(--grad-realce);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}

/* Maior que antes (mais destaque) e a .90 de opacidade — sem painel por
   tras, .70 caia abaixo do piso de 4,5:1 no pior caso desta coluna; .90
   sustenta folga mesmo no slide mais fraco. */
.hero__apoio{
  font-size:15px;line-height:1.6;
  color:rgba(243,243,240,.90);max-width:640px;
  margin-inline:auto;   /* mesma razão do título */
}

/* ---------- Data e local, minimalista -------------------------------------
   Sem fundo, sem borda, direto sobre a foto/veu. Cada item é o ícone à
   esquerda e duas linhas de texto à direita: o dado principal em cima e o
   detalhe embaixo. No celular os dois itens empilham (flex-wrap) e o divisor
   some, porque um traço vertical entre blocos empilhados não separa nada. */
.hero__info{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:14px 24px;
  justify-content:center;
  margin:20px 0 26px;
}
.hero__info-item{display:flex;align-items:center;gap:11px}
/* 23px, 50% maior que os 15px de antes — pedido. O stroke-width dos SVGs no
   HTML caiu junto (1.5 -> 1.1) para o traço não engordar na mesma proporção. */
.hero__info-icone{width:30px;height:30px;flex:none;color:var(--off)}
.hero__info-texto{display:flex;flex-direction:column;line-height:1.3}
.hero__info-forte{font-size:15px;font-weight:700;color:var(--off)}
/* .78 e não .70: no pior caso desta coluna (véu ~0,67 sobre pixel branco da
   foto) .70 fica em ~4,3:1, abaixo do piso de 4,5:1 para texto pequeno.
   .78 devolve 4,89:1. */
.hero__info-fraco{font-size:13px;color:rgba(243,243,240,.78);margin-top:1px}
/* Acompanha a altura das duas linhas em vez de ser um traço fixo. Só aparece
   quando os dois itens estão lado a lado — ver o media query abaixo. */
.hero__info-divisor{display:none}
@media (min-width:600px){
  .hero__info-divisor{
    display:block;width:1px;align-self:stretch;
    background:rgba(243,243,240,.28);
  }
}

/* flex-col gap-3 → sm:flex-row gap-4, igual ao institucional.
   `justify-content` não faz nada na coluna (celular, botões em bloco cheio) e
   é o que centra a dupla quando vira linha, a partir de 600px. */
.hero__acoes{display:flex;flex-direction:column;gap:12px;justify-content:center}

/* ---------- Cartão de convite: um TICKET (coluna direita) ------------------ */
/* Vidro líquido (a receita do antigo `.painel`: preto translúcido + blur),
   agora com a silhueta de um ticket na horizontal: dois entalhes nas laterais
   e a picotagem tracejada vertical separando o canhoto, à direita.

   Entalhes QUADRADOS, não redondos. Ticket de verdade tem meia-lua, mas
   "cantos retos, nenhum border-radius em lugar nenhum" é regra fechada deste
   projeto (CLAUDE.md, seção Forma) — e o entalhe angular ainda lê como ticket
   quando vem junto da picotagem, que é o sinal mais forte dos dois. Trocar
   por meia-lua é decisão de marca, não de CSS: pede aval antes.

   Os entalhes são feitos por `mask` composta: a máscara é opaca em tudo
   (linear-gradient chapado) MENOS nos dois quadrados girados 45°, que ficam
   transparentes e deixam a foto do hero aparecer através. Isso recorta o
   vidro de verdade, incluindo o backdrop-filter — um pseudo-elemento com a
   cor do fundo não funcionaria aqui, porque atrás do cartão tem foto, não
   uma cor chapada. */
/* O contorno agora é o desenho de `assets/img/hero/ticket.png`, que entra como
   MÁSCARA e não como imagem: o arquivo é traço preto sobre transparente, a
   máscara usa só o alfa dele e quem dá a cor é o `background`. O traço sai
   exatamente em `--off` e a paleta continua fechada — trocar a cor é trocar o
   background, sem reexportar o PNG.

   DESVIO CONSCIENTE da regra "cantos retos, nenhum border-radius": os entalhes
   deste ticket são meia-lua. A versão anterior era angular justamente para
   respeitar a seção Forma, e o comentário dela dizia que meia-lua "é decisão
   de marca, não de CSS: pede aval antes". O aval veio junto com o arquivo.
   Registrado também no CLAUDE.md.

   Sem vidro: o ticket é só a linha sobre o vídeo. Houve uma versão com vidro
   líquido recortado na silhueta e ela foi revertida a pedido — se voltar,
   ela precisa de uma SEGUNDA máscara (o `ticket.png` é só o traço, e mascarar
   o blur com ele deixa o vidro aparecendo apenas em cima da linha). A área
   interna sai de `ferramentas/gerar-ticket-preenchido.py`, que ainda está no
   repositório justamente para isso; o PNG gerado foi removido por não estar
   em uso.

   Sem vidro, o texto do ticket vale pela mesma conta da coluna esquerda (véu
   puro, sem o reforço de 0,40 de um painel) — daí o subtítulo em .90, o mesmo
   valor do `.hero__apoio`, e o `text-shadow` que a coluna esquerda usa.

   O DESENHO É TRATAMENTO DE DESKTOP. Ele é 2:1 fixo: numa coluna de celular
   (~346px) daria 173px de altura, e título + subtítulo + botão não cabem nisso.
   Esticar a máscara para caber engrossaria os traços horizontais e achataria os
   entalhes — pior que não ter. Então no celular o ticket é um cartão simples,
   de moldura fina e cantos retos, e o desenho entra só a partir de 768px (bloco
   no fim do arquivo), onde a caixa tem largura para os 2:1 renderem. */
.hero__convite{
  position:relative;
  width:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:2rem 1.5rem;
  border:1px solid rgba(243,243,240,.30);
  /* Mesmo vidro leve do desktop. Aqui vai direto no cartão, sem máscara: sem
     o desenho, a caixa JÁ é a área do convite. Os valores são os mesmos
     (.22 / 4px) para os dois lados combinarem. */
  background:rgba(16,15,15,.22);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* O canhoto só existe junto com o desenho — sem desenho, não há onde ele ficar
   sem virar um texto solto e girado no meio do cartão. */
.hero__convite-canhoto{display:none}

.hero__convite-corpo{
  position:relative;z-index:2;      /* acima do traço, no desktop */
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  width:100%;
}

/* Medidas do CELULAR. As do desktop, presas à largura da caixa do desenho,
   estão no bloco do fim do arquivo. */
.hero__convite-titulo{
  font-family:var(--display);
  font-size:clamp(21px,5.2vw,26px);font-weight:800;letter-spacing:-.03em;line-height:1.15;
  color:var(--off);
  margin-bottom:12px;
  text-shadow:0 2px 10px rgba(16,15,15,.55);
}
/* .90 e não .88: sem vidro por trás, o piso passa a ser o mesmo do
   `.hero__apoio` — abaixo disso o texto fura 4,5:1 no pior caso do véu.
   Voltou a existir painel aqui? Refaça a conta antes de baixar este valor. */
.hero__convite-texto{
  font-size:15px;line-height:1.6;
  color:rgba(243,243,240,.90);
  margin-bottom:22px;
  max-width:34ch;
  text-shadow:0 2px 10px rgba(16,15,15,.55);
}

/* ==========================================================================
   Seções claras
   ========================================================================== */
.sec{padding:56px 0;border-bottom:1px solid var(--linha)}
.sec--local{background:var(--off)}
.sec--programacao{background:var(--branco)}
.sec--marcas{background:linear-gradient(180deg,var(--off) 0%,var(--fumo) 100%)}
.sec--rsvp{background:var(--branco);border-bottom:0}

.texto-destaque{
  font-size:18px;line-height:1.6;color:var(--tinta);
  max-width:760px;margin-bottom:34px;
}

/* Rótulo e texto do cartão claro. O cartão em si — .bloco, .colunas e a
   fileira de três — saiu com a copy de chegada/welcome coffee/almoço; o que
   restou aqui é o que o cartão de endereço da seção 2 usa. */
.bloco__rotulo{
  font-family:var(--display);
  font-size:10.5px;letter-spacing:.2em;font-weight:700;
  text-transform:uppercase;color:var(--tinta-fraca);margin-bottom:14px;
}
.bloco__texto{font-size:15px;color:var(--tinta)}

.lista{list-style:none}
.lista li{font-size:15.5px;padding-left:20px;position:relative;margin-bottom:11px;color:var(--tinta)}
.lista li:last-child{margin-bottom:0}
.lista li::before{
  content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;background:var(--grad);
}

/* ---------- 2 · O local -------------------------------------------------- */
/* Um cartao só: foto e mapa lado a lado (empilhados no celular, pela ordem do
   DOM) e o endereço por extenso embaixo, numa faixa que ocupa a largura das
   duas colunas — terceira linha do mesmo grid, não um bloco à parte. */
.local{
  display:grid;grid-template-columns:1fr;
  background:var(--branco);
  border:1px solid var(--linha);
  margin-bottom:16px;
  overflow:hidden;
}
/* Rodízio de fotos. Mesmo mecanismo do hero — translação horizontal, com quem
   está fora de cena esperando à direita do quadro —, só que mais curto: são
   duas imagens num bloco pequeno, e os 850 ms de lá pareceriam arrastados aqui.
   Sem JS a primeira foto fica, parada, porque o `is-ativo` já vem no HTML. */
.local__fotos{position:relative;overflow:hidden;background:var(--preto);height:220px}
.local__foto{
  position:absolute;inset:0;
  transform:translateX(100%);
  transition:transform 650ms var(--ease);
}
.local__foto.is-ativo{transform:translateX(0)}
.local__foto.is-saindo{transform:translateX(-100%)}
.local__foto.sem-transicao{transition:none}
.local__foto img{
  width:100%;height:100%;object-fit:cover;
  opacity:.92;
  transition:transform 600ms var(--ease);
}
.local__foto.is-ativo:hover img{transform:scale(1.03)}
/* Marcadores do hero, reaproveitados. Ficam sobre a foto, e a foto tem o véu
   escuro embaixo (.local__foto::after), que é o que dá contraste a eles. */
.local__pontos{
  position:absolute;left:0;right:0;bottom:12px;z-index:2;
  display:flex;justify-content:center;gap:8px;
}
/* .35 é o valor do hero, que vive sobre preto. Aqui embaixo tem foto, e o
   marcador apagado precisa de mais corpo para não sumir.
   `background-color`, e não o atalho `background`: o atalho zeraria o
   `background-image` que dá o gradiente ao marcador ativo. */
.local__pontos .ponto{position:relative;background-color:rgba(243,243,240,.62)}
/* O alvo de toque é maior que o desenho: 6 px é o tamanho certo para o olho e
   pequeno demais para o dedo. O ::after estende a área clicável sem mudar nada
   do que se vê. */
.local__pontos .ponto::after{content:"";position:absolute;inset:-13px -7px}
/* O véu de baixo é mais forte aqui do que era na foto única: é ele que segura o
   contraste dos marcadores, e o salão tem toalha branca justo onde eles ficam. */
.local__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,15,15,0) 52%,rgba(16,15,15,.62) 100%);
}
/* Faixa full-width, terceira linha do grid — por isso a borda em cima, não a
   moldura própria que tinha quando era um card separado. */
.local__texto{padding:26px 24px;border-top:1px solid var(--linha)}
.local__nome{
  font-family:var(--display);
  font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.15;
}
/* Recortado no gradiente, como os demais rótulos sobre fundo claro: o rosa
   chapado sobre branco dá só 4,0:1 e não passa em texto pequeno. */
.local__cidade{
  font-family:var(--display);
  font-size:11px;letter-spacing:.2em;font-weight:700;text-transform:uppercase;
  margin:8px 0 14px;
  background-image:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  width:fit-content;
}

/* ---------- 2b · Mapa ----------------------------------------------------- */
/* `.local__mapa` é a segunda coluna do cartão (a primeira é `.local__fotos`);
   sem moldura própria, porque quem molda as duas é o `.local` por fora. */
.local__mapa{display:flex;flex-direction:column;background:var(--papel)}
.mapa__quadro{position:relative;line-height:0;background:var(--papel);flex:1}
/* Embed ao vivo do Google Maps — ver o comentário em index.html, acima de
   `.local__mapa`, para o porquê (desvio consciente de RNF-07) e o link para
   README.md. `grayscale(1)` é o que tira a cor do mapa (e, de brinde, do
   pouco de UI do Google que aparece dentro do iframe — link "Ver mapa maior"
   e os controles de zoom). Altura sempre igual à de `.local__fotos` no mesmo
   ponto de quebra, para as duas colunas fecharem no mesmo nível. */
.mapa__iframe{display:block;width:100%;height:220px;border:0;filter:grayscale(1)}
/* Só existe em @media print — ver seção "Impressão": um iframe entre origens
   não imprime de forma confiável, e o mapa impresso é o que serve pra achar
   o lugar. */
.mapa__img-impressao{display:none}

/* Overlay no canto superior esquerdo do mapa, não mais uma faixa abaixo dele:
   os botões continuam clicáveis por cima do iframe (position:absolute com
   z-index maior, o iframe não intercepta cliques fora da sua própria área
   de conteúdo). 20% menores que o .btn--contorno padrão porque aqui são
   apoio, não a ação principal da seção — e escopados a este contexto porque
   .btn--contorno só é usado aqui hoje. */
.mapa__acoes{
  position:absolute;top:12px;left:12px;z-index:2;
  display:flex;flex-wrap:wrap;gap:8px;
}
.mapa__acoes .btn--contorno{
  font-size:10.4px;      /* 13px   × 0,8 */
  padding:8.4px 17.6px;  /* 10.5px × 0,8 / 22px × 0,8 */
  /* Sombra em roxo (regra do projeto: nunca cinza neutro), reduzida em
     relação a --sombra-cartao — aquele token foi calibrado pra cartão
     grande, aqui é um chip pequeno flutuando sobre o mapa. */
  box-shadow:0 4px 14px rgba(68,5,90,.18);
}

/* ---------- 3 · Programação ---------------------------------------------- */
.sequencia{
  position:relative;
  background:linear-gradient(180deg,var(--branco) 0%,var(--papel) 100%);
  border:1px solid var(--linha);
  padding:28px 24px 28px 28px;margin-bottom:30px;
}
.sequencia::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:4px;background:var(--grad-v);
}
.sequencia__passos{
  font-family:var(--display);
  font-size:clamp(24px,6.6vw,38px);
  font-weight:800;letter-spacing:-.045em;
  line-height:1.1;margin-bottom:16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}
.sequencia__seta{
  flex:none;width:.62em;height:auto;
  color:var(--tinta-fraca);
  overflow:visible;
}
.sequencia__texto{font-size:16px;color:var(--tinta);max-width:700px}
.sequencia__formato{
  margin-top:18px;padding-top:16px;
  border-top:1px solid var(--linha);
}

.agenda{list-style:none;position:relative}
.agenda__item{
  position:relative;
  border-top:1px solid var(--linha);
  padding:24px 0 24px 18px;
  display:grid;grid-template-columns:1fr;gap:6px;
  transition:background var(--dur) var(--ease);
}
.agenda__item::before{
  content:"";position:absolute;left:0;top:24px;
  width:3px;height:26px;background:var(--grad-v);
  transition:height var(--dur-lenta) var(--ease);
}
.agenda__item:hover::before{height:calc(100% - 48px)}
.agenda__item:last-child{border-bottom:1px solid var(--linha)}
.agenda__hora{
  font-family:var(--display);
  font-size:22px;font-weight:800;letter-spacing:-.045em;
  color:var(--marinho);
}
.agenda__bloco{
  font-family:var(--display);
  font-size:10.5px;letter-spacing:.22em;font-weight:700;
  text-transform:uppercase;margin-bottom:6px;
  background-image:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  width:fit-content;
}
.agenda__titulo{
  font-family:var(--display);
  font-size:18px;font-weight:800;letter-spacing:-.025em;
  line-height:1.3;margin-bottom:7px;
}
.agenda__desc{font-size:15px;color:var(--tinta);max-width:680px}
.agenda__quem{font-size:14px;color:var(--tinta-fraca);margin-top:9px;font-style:italic}

/* Painelistas dentro do bloco de agenda do painel.
   REGRA DO BRIEFING: só entra quem confirmou. Para adicionar, copie um <li>.
   Uma coluna em TODAS as larguras — pedido. Com número ímpar de painelistas
   as duas colunas deixavam um buraco na última linha, e a leitura de cima
   para baixo é a que corresponde à ordem em que eles aparecem no palco. */
.painelistas{list-style:none;display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
.painelista{
  position:relative;
  background:linear-gradient(180deg,var(--branco) 0%,var(--papel) 100%);
  border:1px solid var(--linha);
  padding:18px 18px 18px 20px;
  transition:border-color var(--dur) var(--ease),
             box-shadow var(--dur-lenta) var(--ease),
             transform var(--dur-lenta) var(--ease);
}
.painelista::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad-v);
}
.painelista:hover{border-color:var(--linha-forte);box-shadow:var(--sombra-cartao);transform:translateY(-2px)}
.painelista__nome{
  font-family:var(--display);
  font-size:17px;font-weight:800;letter-spacing:-.03em;
  line-height:1.2;margin-bottom:6px;
}
.painelista__cargo{font-size:14px;color:var(--tinta);line-height:1.45}
.painelista__empresa{
  font-family:var(--display);
  font-size:10.5px;letter-spacing:.2em;font-weight:700;
  text-transform:uppercase;margin-top:10px;
  background-image:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  width:fit-content;
}

/* ---------- 4 · As marcas que realizam ----------------------------------- */
/* Secao inteira em preto — invertida em relacao ao resto das secoes claras.
   `.sec--marcas` sobrescreve as classes compartilhadas (`.rotulo`,
   `.sec__titulo`, `.texto-destaque`) escopadas por ela; `.empresa*` sao
   usadas so aqui, entao mudam direto na propria regra, sem escopo. */
.sec--marcas{
  background:var(--preto);
  color:var(--off);
  border-bottom-color:rgba(243,243,240,.14);
}
/* .rotulo e recorte no degrade — so funciona sobre fundo claro (regra geral
   do projeto). Aqui vira rosa chapado, como o eyebrow do hero. */
.sec--marcas .rotulo{
  background-image:none;-webkit-background-clip:initial;background-clip:initial;
  color:var(--rosa);-webkit-text-fill-color:var(--rosa);
}
.sec--marcas .sec__titulo{color:var(--off)}
.sec--marcas .texto-destaque{color:rgba(243,243,240,.78)}

.empresas{display:grid;grid-template-columns:1fr;gap:18px}

.empresa{
  display:flex;flex-direction:column;
  /* .02, nao mais: em .04 o --rosa do .empresa__tag cai pra 4,39:1 no texto
     pequeno (piso e 4,5:1) — .02 mantém o cartão perceptível (com a borda)
     sem furar o rosa. */
  background:rgba(243,243,240,.02);
  border:1px solid rgba(243,243,240,.14);
  transition:border-color var(--dur) var(--ease),
             box-shadow var(--dur-lenta) var(--ease),
             transform var(--dur-lenta) var(--ease);
}
/* Sombra em roxo (nunca cinza neutro) some contra o preto — o brilho off-white
   e o equivalente que funciona nesta secao. */
.empresa:hover{
  border-color:rgba(243,243,240,.32);
  box-shadow:0 20px 48px rgba(243,243,240,.06);
  transform:translateY(-3px);
}

/* Placa para o logo: os dois lockups sao versoes negativas (brancas), feitas
   pra fundo escuro — antes so a placa era preta dentro de um cartao branco;
   agora o cartao inteiro ja e escuro, entao a placa fica um degrau mais
   escura que o corpo do cartao (--preto puro vs. o rgba(243,243,240,.02) do
   `.empresa`), pra continuar se destacando. */
.empresa__topo{
  position:relative;
  background:var(--preto);
  padding:30px 24px;
  display:flex;align-items:center;min-height:104px;
}
.empresa__topo::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-h);
}
.empresa__logo{width:auto;height:30px}
.empresa__topo--argus .empresa__logo{height:36px}

.empresa__corpo{padding:26px 24px;display:flex;flex-direction:column;flex:1}
/* Sobre fundo escuro o gradiente vira rosa chapado (regra geral do projeto)
   — igual ao .rotulo, o .empresa__tag tambem era recorte no degrade. */
.empresa__tag{
  font-family:var(--display);
  font-size:11px;letter-spacing:.2em;font-weight:700;
  text-transform:uppercase;margin-bottom:14px;
  color:var(--rosa);
  width:fit-content;
}
.empresa__texto{font-size:15.5px;color:rgba(243,243,240,.78);margin-bottom:20px}
.empresa__rotulo{
  font-family:var(--display);
  font-size:10.5px;letter-spacing:.2em;font-weight:700;
  text-transform:uppercase;color:rgba(243,243,240,.55);
  border-top:1px solid rgba(243,243,240,.14);padding-top:16px;margin-bottom:8px;
}
.empresa__papel{font-size:15px;color:var(--off);margin-top:auto}

.empresas__nota{
  font-size:14.5px;color:rgba(243,243,240,.55);
  margin-top:22px;max-width:640px;
}

/* ---------- 5 · RSVP ------------------------------------------------------ */
.rsvp__intro{font-size:16.5px;color:var(--tinta);margin-bottom:28px;max-width:540px}

.cartao-form{
  position:relative;
  background:linear-gradient(180deg,var(--branco) 0%,var(--papel) 100%);
  border:1px solid var(--linha);
  padding:28px 22px 26px;
}
.cartao-form::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--grad-h);
}

.form{display:block}
.campo{margin-bottom:20px}
.campo__label{
  display:block;
  font-family:var(--display);
  font-size:11px;letter-spacing:.16em;
  font-weight:700;text-transform:uppercase;color:var(--tinta);
  margin-bottom:8px;
}
.campo__input{
  width:100%;
  font-family:var(--fonte);
  font-size:16px; /* 16px evita o zoom automatico do iOS ao focar */
  color:var(--preto);
  background:var(--branco);
  border:1px solid var(--linha-forte);
  padding:15px 14px;      /* alvo de toque generoso — RNF-02 */
  min-height:52px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.campo__input:hover{border-color:var(--tinta-fraca)}
.campo__input:focus{
  outline:none;
  border-color:var(--marinho);
  box-shadow:inset 0 0 0 1px var(--marinho);
}
.campo__input[aria-invalid="true"]{
  border-color:var(--rosa);
  box-shadow:inset 0 0 0 1px var(--rosa);
}
/* O rosa chapado sobre branco dá 4,0:1 — reprova em texto de 13,5px, mesmo
   em negrito. Quem sinaliza o erro em rosa é a borda do campo; a mensagem
   usa a versão escurecida, que passa em 8,7:1. */
.campo__erro{
  font-size:13.5px;font-weight:700;color:var(--erro-tinta);
  margin-top:7px;min-height:0;
}
.campo__erro:empty{display:none}

/* Armadilha anti-robô: fora da tela, sem display:none (robôs ignoram) */
.ardil{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Aceite do aviso de privacidade (RP-06) ----------------------- */
/* Destacado do resto do formulário pela régua à esquerda: o art. 8º, § 1º da
   LGPD pede que o consentimento não fique diluído nas demais cláusulas.
   A caixa é desenhada aqui porque a nativa traz canto arredondado e a cor do
   sistema — as duas coisas fora do padrão. O tique é um ELEMENTO, não um
   ::after: o Firefox não pinta pseudo-elemento dentro de <input>. */
.aceite{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:0 12px;
  align-items:start;
  margin-top:26px;margin-bottom:22px;
  border-left:3px solid var(--linha-forte);
  padding-left:16px;
}
.aceite__quadro{position:relative;display:block;width:24px;height:24px;margin-top:1px}
.aceite__caixa{
  appearance:none;-webkit-appearance:none;
  position:absolute;inset:0;
  width:24px;height:24px;margin:0;
  background:var(--branco);
  border:1.5px solid var(--linha-forte);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.aceite__caixa:hover{border-color:var(--tinta-fraca)}
.aceite__caixa:focus-visible{outline:2px solid var(--marinho);outline-offset:2px}
/* Marcada: o mesmo acento do botão principal, na menor área possível. */
.aceite__caixa:checked{background:var(--grad);border-color:var(--marinho)}
.aceite__caixa[aria-invalid="true"]{
  border-color:var(--rosa);
  box-shadow:inset 0 0 0 1px var(--rosa);
}
.aceite__tique{
  position:absolute;left:8px;top:4px;
  width:6px;height:12px;
  border:solid var(--off);border-width:0 2px 2px 0;
  transform:rotate(45deg);
  opacity:0;transition:opacity var(--dur) var(--ease);
  pointer-events:none;
}
.aceite__caixa:checked ~ .aceite__tique{opacity:1}
/* A etiqueta é a área de toque grande: no celular a caixa de 24px sozinha
   não daria alvo, e o rótulo inteiro marca. */
.aceite__texto{font-size:14.5px;line-height:1.5;color:var(--tinta);cursor:pointer}
.aceite__link{color:var(--marinho);text-decoration:underline}
.aceite__link:hover{color:var(--preto)}
.aceite .campo__erro{grid-column:1 / -1;margin-top:9px}

.form__aviso-erro{
  font-size:14.5px;font-weight:700;color:var(--erro-tinta);
  background:var(--erro-fundo);
  border:1px solid var(--erro-linha);border-left:3px solid var(--rosa);
  padding:14px 16px;margin-bottom:16px;
}
.form__aviso-erro:empty{display:none}

/* ---------- Aviso de privacidade: overlay em vidro liquido --------------- */
/* <dialog> nativo: o navegador cuida do top-layer, do foco preso dentro do
   overlay e do fechar por ESC — nada disso é CSS. `::backdrop` é a camada
   entre o overlay e a página, e é ela quem borra o formulário atrás. */
.modal-privacidade{
  border:0;padding:0;
  background:transparent;
  width:calc(100% - 40px);max-width:560px;
  max-height:min(82vh,640px);
  color:var(--off);
  /* O reset global (`*{margin:0}`) zera o `margin:auto` que o navegador usa
     pra centralizar um <dialog> — sem isto ele encosta no canto superior
     esquerdo em vez de centralizar (dialog:modal já vem com
     position:fixed;inset:0 do proprio navegador). */
  margin:auto;
}
.modal-privacidade::backdrop{
  background:rgba(16,15,15,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
/* Vidro escuro (mesma família do .hero__convite) — um overlay pede mais
   opacidade que um cartão dentro do próprio hero, porque aqui não há véu de
   foto por trás pra ajudar o contraste, só a página em si. */
.modal-privacidade__cartao{
  position:relative;
  max-height:min(82vh,640px);overflow-y:auto;
  padding:34px 30px 30px;
  background:rgba(16,15,15,.82);
  border:1px solid rgba(243,243,240,.16);
  box-shadow:0 30px 80px rgba(16,15,15,.5);
  backdrop-filter:blur(24px) saturate(1.2);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
}
.modal-privacidade__fechar{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(243,243,240,.08);
  border:1px solid rgba(243,243,240,.18);
  color:var(--off);cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.modal-privacidade__fechar:hover{background:rgba(243,243,240,.16);border-color:rgba(243,243,240,.32)}
.modal-privacidade__fechar:focus-visible{outline:2px solid var(--off);outline-offset:2px}
.modal-privacidade__fechar svg{width:13px;height:13px}

/* .rotulo é recorte no degradê — só funciona sobre fundo claro (regra geral
   do projeto). Este overlay é vidro escuro: aqui o rótulo é rosa chapado,
   como o resto dos rótulos sobre fundo escuro. */
.modal-privacidade__rotulo-topo{
  margin-bottom:10px;
  background-image:none;-webkit-background-clip:initial;background-clip:initial;
  color:var(--rosa);-webkit-text-fill-color:var(--rosa);
}
.modal-privacidade__titulo{
  font-family:var(--display);
  font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.15;
  margin-bottom:22px;padding-right:32px;
}

.modal-privacidade__corpo{display:flex;flex-direction:column;gap:18px}
.modal-privacidade__bloco{
  padding-top:16px;
  border-top:1px solid rgba(243,243,240,.14);
}
.modal-privacidade__bloco:first-child{padding-top:0;border-top:0}
.modal-privacidade__bloco p:last-child{
  font-size:14.5px;line-height:1.6;
  color:rgba(243,243,240,.82);
}
.modal-privacidade__rotulo{
  font-family:var(--display);
  font-size:10.5px;letter-spacing:.18em;font-weight:700;
  text-transform:uppercase;color:var(--rosa);
  margin-bottom:8px;
}

/* ---------- Tela de sucesso ---------------------------------------------- */
.sucesso{
  position:relative;
  background:linear-gradient(180deg,var(--branco) 0%,var(--papel) 100%);
  border:1px solid var(--linha);
  padding:40px 26px;
}
.sucesso::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:4px;background:var(--grad-v);
}
.sucesso:focus{outline:none}
.sucesso__marca{
  font-family:var(--display);
  font-size:clamp(30px,8vw,44px);
  font-weight:800;letter-spacing:-.045em;line-height:1.02;
  margin-bottom:16px;
  background-image:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.sucesso__texto{font-size:17px;color:var(--tinta);max-width:490px}
.sucesso__quando{
  border-top:1px solid var(--linha);
  margin-top:26px;padding-top:18px;font-size:15px;
}
.sucesso__quando p:last-child{color:var(--tinta)}

/* ---------- Rodapé ------------------------------------------------------- */
.rodape{
  position:relative;
  background:var(--preto);color:var(--off);
  padding:44px 0 40px;
}
.rodape::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-h);
}
.rodape__linha{display:grid;grid-template-columns:1fr;gap:28px}
.rodape__evento{
  font-family:var(--display);
  font-size:20px;font-weight:800;letter-spacing:-.03em;
}
.rodape__det{font-size:14px;color:rgba(243,243,240,.56);margin-top:7px}
.rodape__rotulo{
  font-family:var(--display);
  font-size:10.5px;letter-spacing:.22em;font-weight:700;
  /* .42 daria 3,8:1 sobre o preto — abaixo do mínimo para texto pequeno. */
  text-transform:uppercase;color:rgba(243,243,240,.58);margin-bottom:14px;
}
.rodape__logos{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.rodape__logo{width:auto;height:26px}
.rodape__logo--argus{height:31px}

/* ==========================================================================
   Telas maiores
   ========================================================================== */
@media (min-width:600px){
  .painelistas{gap:14px}
  /* 76px é a largura de "10h50", o horário mais largo. Os 110px de antes
     abriam um vão de meio palmo entre a hora e o título do bloco. */
  .agenda__item{grid-template-columns:76px 1fr;gap:20px;padding:28px 0 28px 18px}
  .agenda__hora{padding-top:2px}
  .hero__acoes{flex-direction:row;align-items:center;flex-wrap:wrap;gap:16px}
  .local{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"fotos mapa" "texto texto";
    align-items:stretch;
  }
  .local__fotos{grid-area:fotos;height:auto;min-height:250px}
  .local__mapa{grid-area:mapa;border-left:1px solid var(--linha)}
  .local__texto{grid-area:texto}
  .mapa__iframe{height:250px}
  .hero .eyebrow{font-size:11.5px}
  .hero__apoio{font-size:16.5px}
  .marcas{gap:16px}
  .marcas__logo--automind{height:30px}
  .marcas__logo--argus{height:35px}
  .marcas__risco{height:27px}
}

@media (min-width:900px){
  :root{--pad:40px}
  body{font-size:17px}

  .sec{padding:84px 0}
  .sec__titulo{margin-bottom:32px}

  .marcas__logo--automind{height:34px}
  .marcas__logo--argus{height:40px}
  .marcas__risco{height:30px}

  .texto-destaque{font-size:20px}
  .sequencia{padding:36px 34px 36px 38px}
  .local__texto{padding:34px 32px}
  .local__fotos{min-height:290px}
  .mapa__iframe{height:290px}

  .agenda__desc{font-size:15.5px}

  .empresas{grid-template-columns:1fr 1fr;gap:22px}
  .empresa__topo{padding:34px 30px;min-height:120px}
  .empresa__logo{height:34px}
  .empresa__topo--argus .empresa__logo{height:42px}
  .empresa__corpo{padding:30px}

  .cartao-form{padding:36px 34px 32px}

  .rodape{padding:54px 0 48px}
  .rodape__linha{grid-template-columns:1fr auto;align-items:end}
  .rodape__realizacao{text-align:right}
  .rodape__logos{justify-content:flex-end}
}

/* A partir de 1024px o institucional troca o hero de 82svh para
   min(100svh, 860px) e engorda o cartão do formulário e os botões. */
@media (min-width:1024px){
  .hero{min-height:min(100svh,860px);padding-bottom:64px}
  /* O `padding-top:32px` que existia aqui era do tempo em que .hero__topo era
     uma faixa de logos alinhada ao topo, sem altura própria. Hoje ela é a
     barra de navegação: altura fixa (--nav-h) com o conteúdo centrado por
     flex. Como esta regra vem DEPOIS do bloco do vídeo no arquivo, o padding
     vencia por ordem e empurrava marcas e atalhos para baixo do centro da
     barra. Removido — o espaçamento agora é a própria altura da faixa. */
  .hero__meio{padding:56px 0 32px}
  .hero__apoio{font-size:18px}
  .btn{padding:13px 30px;font-size:13.8px}
  .btn--linha{padding:11.5px 28px}
  .hero__brilho{left:18%;width:680px;height:360px}
  .palco__pontos{padding-top:10px}
}

/* ---------- Hero com vídeo: copy centrada e coreografia de rolagem -------- */
/* Este bloco fica no FIM do arquivo DE PROPÓSITO. Tudo que ele ajusta
   (.hero__grade, .hero__coluna--*, as margens da copy, .hero__convite) é
   declarado antes, e media query não soma especificidade: quem vem depois
   vence. Duas regras já se perderam nessa armadilha neste arquivo (os
   marcadores do palco e o padding-top da barra) — não mover para cima.

   Do 768px para cima o hero é o palco do vídeo. As duas colunas deixam de
   ficar lado a lado e passam a ocupar A MESMA célula, centradas: no começo só
   a copy aparece; ao rolar ela sai e o ticket entra pela esquerda até parar no
   centro. Quem dirige são as variáveis --copia-* / --ticket-*, escritas pelo
   app.js a partir do MESMO avanço que move o vídeo.

   As variáveis só valem sob `.js` (classe posta no <html> antes do CSS): sem
   JavaScript o ticket fica visível e parado, como era antes, em vez de sumir
   para sempre.

   As condições são as MESMAS do bloco do vídeo (largura ≥768 E altura ≥600):
   esta coreografia só existe dentro do hero sticky, e em tela baixa ele não
   existe. Ver o comentário lá para o porquê da perna da altura. */
@media (min-width:768px) and (min-height:450px) and (prefers-reduced-motion:no-preference){
  .hero__grade{
    grid-template-columns:minmax(0,1fr);
    justify-items:center;align-items:center;
    gap:0;
  }
  /* Mesma célula da grade = uma camada sobre a outra. */
  .hero__coluna{grid-area:1/1;width:100%}

  /* Só o que MUDA com a largura: tamanhos e espaços. O alinhamento (centro)
     mora nas regras base — ver o comentário "Alinhamento da copy", acima no
     arquivo. Nada de repetir `text-align` ou `margin:auto` aqui. */
  .hero__coluna--copia{max-width:860px}

  /* Título e espaços limitados TAMBÉM pela altura da tela, não só pela
     largura. O `min(vw, vh)` é o que sustenta o corte de altura em 450px: numa
     tela baixa e larga (notebook pequeno, janela sem maximizar) o título
     encolhe em vez de a copy estourar o hero.

     Nos valores de topo nada muda em relação ao que já existia: numa tela de
     900px de altura, 8.5vh = 76px, então o teto de 75px continua mandando. */
  .hero__coluna--copia .hero__titulo{
    font-size:clamp(30px,min(7.3vw,8.5vh),75px);
    margin-bottom:clamp(14px,3.3vh,30px);
  }

  /* Espaçamento vertical: 25% na primeira rodada e mais 30% depois, sobre os
     valores já aumentados. Origem no celular → aqui:
       eyebrow 16 → 20 → 26 | título 18 → 23 → 30
       info    20/26 → 25/33 → 33/43 | gap 14 → 18 → 23
     Os tetos são esses; o piso em `vh` é o que dá folga na tela baixa. */
  .hero__coluna--copia .eyebrow{margin-bottom:clamp(12px,2.9vh,26px)}
  .hero__coluna--copia .hero__info{
    margin:clamp(16px,3.7vh,33px) 0 clamp(20px,4.8vh,43px);
    gap:clamp(14px,2.6vh,23px) 24px;
  }

  /* Mais largo que o cartão antigo: o desenho é 2:1, então largura é o que dá
     altura útil ao corpo do ticket. */
  .hero__coluna--convite{max-width:min(780px,94%)}

  /* ---- O ticket desenhado (só aqui; no celular é o cartão simples) ------ */
  .hero__convite{
    display:grid;
    /* Canhoto | corpo, na proporção do tracejado dentro do desenho. */
    grid-template-columns:19.3% 1fr;
    align-items:center;
    /* Fixar a proporção do desenho mantém a moldura fiel: sem isto, texto mais
       longo esticaria o ticket e deformaria os entalhes. */
    aspect-ratio:1774/887;
    /* A moldura vem do desenho, não de `border`. E o vidro vem das camadas
       mascaradas (::after/::before): sem zerar o fundo do celular aqui, ele
       pintaria um RETÂNGULO sem máscara por trás do ticket, estourando a
       silhueta nos cantos entalhados. */
    border:0;
    background:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    /* O PNG traz margem transparente própria (o desenho ocupa ~86% da largura
       e ~72% da altura do arquivo). Estes paddings encaixam o conteúdo dentro
       da moldura, em vez de reexportar o arquivo aparado.
       ATENÇÃO: padding em % resolve SEMPRE contra a largura, inclusive no eixo
       vertical. Como a caixa é 2:1, os 14,1% de margem vertical do desenho
       viram 7,05% aqui — por isso os quatro valores não são iguais apesar de a
       moldura ser simétrica. */
    padding:7.05% 6.7% 7.05% 7%;
  }
  /* O FUNDO do convite: vidro leve, recortado na área interna do ticket.
     Precisa de uma máscara própria — `ticket.png` é só o traço, e mascarar o
     blur com ele deixaria o vidro aparecendo apenas em cima da linha. A área
     interna vem de `ticket-preenchido.png`, gerado do próprio contorno por
     `ferramentas/gerar-ticket-preenchido.py`. Os dois arquivos têm a mesma
     tela, então registram sozinhos.

     "Leve" é o ponto: blur(4px) contra os 7px da borda, e um véu de .22 (a
     versão antiga, revertida, usava .40 e blur 10). O suficiente para separar
     o texto do vídeo sem virar um painel opaco.

     ARMADILHA: este blur só funciona porque o app.js zera `transform` e
     `will-change` do `.hero__coluna--convite` quando o ticket assenta.
     `backdrop-filter` não atravessa um ancestral com transform, opacity<1 ou
     will-change — eles viram "backdrop root" e o filtro passa a amostrar nada.
     O sintoma é traiçoeiro: o computed style continua mostrando
     `backdrop-filter: blur(4px)` normalmente, e mesmo assim não desfoca nada.
     Ver o bloco `assentou` em coreografia(), no app.js. */
  .hero__convite::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:rgba(16,15,15,.22);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    -webkit-mask:url("../img/hero/ticket-preenchido.png") center / 100% 100% no-repeat;
    mask:url("../img/hero/ticket-preenchido.png") center / 100% 100% no-repeat;
  }

  /* O traço em glassmorphism, POR CIMA do fundo (z-index 1 contra 0). A
     máscara limita esta camada à linha do desenho, então o `backdrop-filter`
     dela age só dentro do traço.

     O off-white a .55 (em vez de chapado) é o que deixa o fundo desfocado
     aparecer através da linha; `saturate` devolve a cor que o blur lava. O
     `drop-shadow` vem por `filter`, aplicado DEPOIS da máscara, então ele
     acompanha o contorno do ticket em vez de virar um retângulo. */
  .hero__convite::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    /* Os dois trabalham em faixas diferentes do fundo e por isso convivem:
       o off-white translúcido segura a linha nos quadros ESCUROS (brightness
       multiplica, e sobre quase-preto não há o que multiplicar), e o
       blur/saturate/brightness dá o aspecto de vidro fosco onde há luz. */
    background:rgba(243,243,240,.58);
    backdrop-filter:blur(7px) saturate(150%) brightness(1.7);
    -webkit-backdrop-filter:blur(7px) saturate(150%) brightness(1.7);
    filter:drop-shadow(0 2px 6px rgba(16,15,15,.45));
    -webkit-mask:url("../img/hero/ticket.png") center / 100% 100% no-repeat;
    mask:url("../img/hero/ticket.png") center / 100% 100% no-repeat;
  }

  /* O canhoto é estreito: a data sobe em pé, como em ticket de verdade. */
  .hero__convite-canhoto{
    display:block;
    position:relative;z-index:2;
    justify-self:center;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-family:var(--display);
    font-size:clamp(10px,1.05vw,14px);
    font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    white-space:nowrap;
    color:var(--off);
    text-shadow:0 2px 10px rgba(16,15,15,.55);
  }

  /* Folga dos dois lados: o botão é `btn--largo` (100%) e sem isto encostava
     na picotagem à esquerda e na moldura à direita. */
  .hero__convite-corpo{padding:0 7%}

  /* Medidas presas à largura da caixa, para o conteúdo caber nos 2:1. */
  .hero__convite-titulo{
    font-size:clamp(20px,2.4vw,30px);
    margin-bottom:clamp(8px,1.1vw,14px);
  }
  .hero__convite-texto{
    font-size:clamp(13px,1.15vw,16px);line-height:1.55;
    margin-bottom:clamp(12px,1.6vw,22px);
  }

  /* Estados dirigidos pela rolagem. Os fallbacks das var() são o quadro zero:
     copy inteira à vista, ticket fora da tela, à esquerda. */
  .js .hero__coluna--copia{
    opacity:var(--copia-op,1);
    transform:translateY(var(--copia-y,0px));
    will-change:opacity,transform;
  }
  .js .hero__coluna--convite{
    opacity:var(--ticket-op,0);
    transform:translateX(var(--ticket-x,-60vw));
    will-change:opacity,transform;
  }

  /* NÃO acrescentar aqui um bloco de `prefers-reduced-motion` deixando as duas
     colunas com `opacity:1`. Existiu um, e era um BUG: elas dividem a mesma
     célula da grade, então "as duas visíveis" significa uma exatamente por
     cima da outra — texto do convite atravessando o título. Notebook Windows
     com "Mostrar animações" desligado (ou economia de bateria) entra nessa
     media query, e foi assim que o problema apareceu em produção.

     Quem pediu menos movimento não entra neste bloco: a condição
     `prefers-reduced-motion:no-preference` lá em cima já o exclui, e ele cai
     no hero empilhado, que é legível e sem animação nenhuma — exatamente o
     que essa preferência pede. */
}

/* ---------- Impressão ---------------------------------------------------- */
/* No papel a paleta continua valendo: o preto é o #100F0F da marca, não o
   preto puro, e os cinzas são o mesmo eixo off-white → preto do resto do CSS. */
@media print{
  .btn,.hero__coluna--convite,.sec--rsvp,.local__fotos,.mapa__acoes,
  .mapa__iframe,.palco,.hero__tintas,.hero__brilho,.palco__pontos{display:none}
  /* O mapa fica: impresso, é o que serve para achar o lugar. Mas um iframe
     entre origens (o embed ao vivo do OSM) não imprime de forma confiável —
     por isso volta o JPEG estático, guardado só pra este uso. */
  .mapa__img-impressao{display:block;width:100%;height:auto}
  .local{border-color:var(--linha-forte);grid-template-columns:1fr;grid-template-areas:none}
  .local__mapa{border-left:0}
  body{background:var(--branco);color:var(--preto);font-size:12pt}
  .hero{background:var(--branco);color:var(--preto);min-height:0;padding:0 0 12pt}
  .hero__topo,.hero__meio{padding:0}
  .hero__grade{display:block}
  .hero__coluna--copia{max-width:none}
  .hero__titulo{text-shadow:none}
  .hero .eyebrow{color:var(--tinta-fraca)}
  .hero__apoio,.hero__info{color:var(--tinta)}
  .hero__info-icone{color:var(--tinta)}
  .hero__info-divisor{background:var(--linha-forte)}
  /* No papel o fundo é branco e os dois lockups são brancos: sem inverter,
     os dois somem. invert(1) num lockup 100% branco devolve um 100% preto —
     é uso monocromático legítimo, não recoloração da marca. */
  .marcas__logo,.rodape__logo,.empresa__logo{filter:invert(1)}
  .sec{border:0;padding:16pt 0}
  /* Secao 4 e preta na tela (desvio consciente, ver CLAUDE.md) — no papel
     volta a ser clara, como as demais secoes. */
  .sec--marcas{background:var(--branco);color:var(--preto);border-bottom-color:var(--linha)}
  .sec--marcas .sec__titulo{color:var(--preto)}
  .sec--marcas .texto-destaque{color:var(--tinta)}
  .empresa{background:var(--branco);border-color:var(--linha-forte)}
  .empresa__topo{background:var(--branco);border-bottom:1pt solid var(--linha-forte)}
  .empresa__texto{color:var(--tinta)}
  .empresa__rotulo{color:var(--tinta-fraca);border-top-color:var(--linha)}
  .empresa__papel{color:var(--preto)}
  .empresas__nota{color:var(--tinta-fraca)}
  .js [data-revelar]{opacity:1;transform:none}
  .grad,.rotulo,.agenda__bloco,.painelista__empresa,.sucesso__marca,.hero__realce,
  .local__cidade,.empresa__tag{
    color:var(--marinho) !important;-webkit-text-fill-color:var(--marinho) !important;
  }
}