/* =====================================================================
   Hero scrollytelling — Consumidor Moderno Innovation Summit 2026
   ===================================================================== */

:root{
  --bg:#000a2e;
  --bg-deep:#00061c;
  --azul:#0151db;
  --azul-claro:#0cc8f4;
  --verde:#12ef00;
  --verde-escuro:#0acc00;
  --marinho:#001042;
  --royal:#001979;
  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.14);

  /* AJUSTE AQUI a duração da abertura. São as 3 seções que acontecem
     durante o scroll do vídeo (abertura, sobre, keynote): ~140vh cada. */
  --hero-scroll:680vh;   /* vídeo de 24s: mais rolagem para não passar corrido */
  --pin-h:100vh;

  /* LAYOUT — uma medida só para o site inteiro. Mudou aqui, mudou em
     todas as seções, no menu e no rodapé. */
  --largura:1180px;                    /* caixa externa: conteúdo + respiro lateral */
  /* Largura do conteúdo em si. Quem tem o respiro por dentro (padding)
     usa --largura; quem já está dentro de um pai com padding usa
     --conteudo. Misturar os dois é o que desalinhava as seções. */
  --conteudo:calc(var(--largura) - var(--pad-x) * 2);
  --pad-x:clamp(20px,5vw,48px);        /* respiro lateral */
  --gap-nav:14px;                      /* distância do menu ao topo */
  --gap-secao:clamp(80px,11vh,140px);  /* entre seções */
  --gap-bloco:clamp(34px,5vh,60px);    /* entre blocos dentro de uma seção */
  --gap-texto:clamp(22px,2.6vh,34px);  /* entre título, parágrafo e listas */
  --gap-curto:clamp(13px,1.5vh,19px);  /* entre parágrafos irmãos */
}
/* svh evita o "pulo" quando a barra do Safari/iOS aparece e some */
@supports (height:100svh){ :root{ --pin-h:100svh; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.5;
  /* NUNCA usar overflow-x:hidden aqui — quebra o position:sticky do herói.
     'clip' não cria contexto de rolagem, então é seguro. */
  overflow-x:clip;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.accent{
  color:var(--azul-claro);
  background:linear-gradient(90deg,var(--azul-claro),var(--verde));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none;
}

/* ícones: herdam a cor e o tamanho do texto ao redor */
.ico{ width:1.15em; height:1.15em; flex:none; vertical-align:-.18em; }

/* ---------------------------------------------------------------------
   LOADER
   --------------------------------------------------------------------- */
.loader{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:var(--bg-deep);
  transition:opacity .6s ease, visibility .6s ease;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__logo{ width:min(60vw,300px); height:auto; opacity:.9; }
.loader__row{
  display:flex; align-items:center; justify-content:space-between;
  width:min(70vw,320px); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.loader__track{ width:min(70vw,320px); height:2px; background:rgba(255,255,255,.14); overflow:hidden; }
.loader__fill{ display:block; height:100%; width:0%; background:var(--verde); transition:width .25s ease; }

/* ---------------------------------------------------------------------
   MENU — pílula minimalista
   --------------------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:60;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-rows:auto auto; align-items:center;
  padding:var(--gap-nav) var(--pad-x);
  pointer-events:none;
}
.nav__pill{
  grid-column:2; grid-row:1;
  pointer-events:auto;
  display:flex; align-items:center; gap:12px;
  /* compacta: a largura é só o conteúdo. Ao abrir, o menu interno
     cresce e a pílula cresce junto. */
  width:auto; max-width:min(100%, var(--conteudo));
  padding:9px 14px;
  transition:padding .45s cubic-bezier(.4,0,.2,1);
  border-radius:999px;
  background:rgba(4,22,72,.82);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}

/* --- símbolo --- */
.nav__brand{ display:grid; place-items:center; flex:none; color:#fff; }
.marca{ width:30px; height:30px; display:block; transition:transform .6s cubic-bezier(.4,0,.2,1); }
/* Conarec: logo raster no lugar do símbolo animado (trocar por SVG quando vier) */
.nav__logo{ height:28px; width:auto; display:block; transition:transform .4s cubic-bezier(.34,1.3,.5,1); }
.nav__brand:hover .nav__logo{ transform:scale(1.06); }
/* A animação mira no <g>, nunca na forma: várias formas do símbolo têm
   transform próprio (rotate/translate) e, em SVG, o transform do CSS é a
   MESMA propriedade do atributo — animar a forma apagaria a posição dela. */
.marca > g{
  transform-box:fill-box; transform-origin:center;
  animation:marcaEntra .6s cubic-bezier(.34,1.3,.5,1) backwards;
}
/* cada forma entra num instante diferente: o símbolo se "monta" */
.marca > g:nth-child(1){ animation-delay:.04s } .marca > g:nth-child(2){ animation-delay:.08s }
.marca > g:nth-child(3){ animation-delay:.12s } .marca > g:nth-child(4){ animation-delay:.16s }
.marca > g:nth-child(5){ animation-delay:.20s } .marca > g:nth-child(6){ animation-delay:.24s }
.marca > g:nth-child(7){ animation-delay:.28s } .marca > g:nth-child(8){ animation-delay:.32s }
.marca > g:nth-child(9){ animation-delay:.36s } .marca > g:nth-child(10){ animation-delay:.40s }
.marca > g:nth-child(11){ animation-delay:.44s } .marca > g:nth-child(12){ animation-delay:.48s }
.marca > g:nth-child(13){ animation-delay:.52s } .marca > g:nth-child(14){ animation-delay:.56s }
.marca > g:nth-child(15){ animation-delay:.60s } .marca > g:nth-child(16){ animation-delay:.64s }
.marca > g:nth-child(17){ animation-delay:.68s } .marca > g:nth-child(18){ animation-delay:.72s }
.marca > g:nth-child(19){ animation-delay:.76s } .marca > g:nth-child(20){ animation-delay:.80s }
@keyframes marcaEntra{ from{ opacity:0; transform:scale(.2); } to{ opacity:1; transform:scale(1); } }

/* hover: gira 90° e as peças se soltam e voltam */
.nav__brand:hover .marca{ transform:rotate(90deg); }
.nav__brand:hover .marca > g{ animation:marcaPulsa .55s ease both; }
.nav__brand:hover .marca > g:nth-child(2n){ animation-delay:.05s }
.nav__brand:hover .marca > g:nth-child(3n){ animation-delay:.1s }
@keyframes marcaPulsa{
  0%{ transform:scale(1); } 45%{ transform:scale(.62); } 100%{ transform:scale(1); }
}

/* --- hambúrguer --- */
.nav__burger{
  flex:none; cursor:pointer; padding:0;
  width:22px; height:22px;
  display:grid; align-content:center; justify-items:center; gap:5px;
  background:none; border:0;
  color:var(--verde);
  transition:color .25s ease, transform .25s ease;
}
.nav__burger i{
  display:block; width:20px; height:2px; border-radius:2px; background:currentColor;
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, width .3s ease;
}
/* hover: fica branco, encolhe de leve e a linha do meio estreita dos dois lados */
.nav__burger:hover,
.nav__burger:focus-visible{ color:#fff; transform:scale(.92); }
.nav__burger:hover i:nth-of-type(2){ width:11px; }

.nav.is-open .nav__burger i:nth-of-type(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger i:nth-of-type(2){ opacity:0; width:0; }
.nav.is-open .nav__burger i:nth-of-type(3){ transform:translateY(-7px) rotate(-45deg); }

/* --- menu que abre na horizontal --- */
.nav__menu{
  display:flex; align-items:center; gap:clamp(12px,1.6vw,24px);
  max-width:0; overflow:hidden; opacity:0;
  transition:max-width .55s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.nav.is-open .nav__menu{ max-width:760px; opacity:1; }
.nav.is-open .nav__pill{ padding-right:16px; }
.nav__menu a{
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; white-space:nowrap;
  transition:color .2s ease;
}
.nav__menu a:hover{ color:#fff; }

.nav__acoes{
  grid-column:2; grid-row:2; justify-self:center;
  pointer-events:auto;
  display:flex; gap:10px; margin-top:10px;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s cubic-bezier(.4,0,.2,1), opacity .35s ease, margin-top .5s ease;
}
.nav.is-open .nav__acoes{ max-height:70px; opacity:1; }
.nav__acoes .btn{ padding:11px 20px; font-size:12.5px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.nav__acoes .btn--ghost{
  background:rgba(4,22,72,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}

.nav__langs{
  grid-column:3; grid-row:1; justify-self:start;   /* colado à direita da pílula */
  pointer-events:auto;
  display:flex; align-items:center; gap:1px; margin-left:16px;
}
.nav__langs button{
  cursor:pointer; font-family:inherit; font-size:11px; letter-spacing:.08em;
  font-weight:300;                       /* light por padrão */
  padding:4px 6px; border:0; background:none;
  color:rgba(255,255,255,.6);
  text-shadow:0 2px 8px rgba(0,0,0,.6);  /* fora da pílula, sobre o vídeo */
  transition:color .2s ease;
}
.nav__langs button:hover{ color:#fff; }
.nav__langs button.is-active{ color:#fff; font-weight:700; }   /* só a ativa em negrito */

/* --- data + Orlando --- */
.nav__data{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.nav__data b{ color:var(--verde); font-weight:700; }
.nav__data::before{
  content:""; width:1px; height:16px; margin-right:5px;
  background:rgba(255,255,255,.16);
}
.nav__pin{ width:16px; height:16px; flex:none; overflow:visible; }
.nav__pin-corpo{
  fill:none; stroke:var(--verde); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transform-box:fill-box; transform-origin:50% 100%;
  animation:pinSalta 2.6s ease-in-out infinite;
}
.nav__pin-olho{ fill:var(--verde); animation:pinOlho 2.6s ease-in-out infinite; }
@keyframes pinSalta{
  0%,70%,100%{ transform:translateY(0) scale(1); }
  78%{ transform:translateY(-3px) scale(1.06); }
  88%{ transform:translateY(0) scale(.96,1.04); }
}
@keyframes pinOlho{ 0%,70%,100%{ opacity:1; } 80%{ opacity:.35; } }

/* =====================================================================
   PAINEL DE TELA CHEIA (celular e tablet)
   O menu, os botões e os idiomas vivem dentro da pílula no desktop. Até
   820px o JS move os três para dentro de .nav__painel, que ocupa a tela
   inteira. É movimentação de nó no DOM, não duplicação: assim não há
   dois menus para manter em sincronia (tradução, âncoras, foco).
   Motivo de não usar só CSS: .nav__pill tem backdrop-filter, e isso faz
   dela o bloco de contenção de qualquer descendente position:fixed — o
   painel ficaria preso dentro da pílula.
   ===================================================================== */
.nav__painel{ display:none; }
/* Trava a página enquanto o painel está aberto. Repare que NÃO usamos
   overflow:hidden no body: isso desliga o position:sticky que segura o
   herói (já nos custou o efeito inteiro uma vez) e, em alguns
   navegadores, zera o scrollTop ao fechar. touch-action resolve o toque
   e o wheel é barrado no JS. */
body.sem-rolagem{ touch-action:none; }

@media (max-width:820px){
  /* com menu, botões e idiomas dentro do painel, sobra só a pílula —
     que volta a ficar centralizada, como no desktop */
  .nav{ grid-template-columns:1fr; padding:10px var(--pad-x); }
  .nav__pill{ grid-column:1; justify-self:center; position:relative; z-index:2; }
  .nav__data b{ display:none; }   /* na barra fica o pin + a data; a cidade aparece no painel */

  .nav__painel{
    display:flex; flex-direction:column; justify-content:center; gap:var(--gap-bloco);
    position:fixed; inset:0; z-index:1;
    padding:calc(env(safe-area-inset-top) + 92px) var(--pad-x) calc(env(safe-area-inset-bottom) + 28px);
    background:rgba(0,8,32,.97);
    -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px);
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-12px);
    transition:opacity .35s ease, transform .45s cubic-bezier(.4,0,.2,1), visibility .35s;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .nav.is-open .nav__painel{ opacity:1; visibility:visible; pointer-events:auto; transform:none; touch-action:pan-y; }

  .nav__painel-topo{
    display:flex; align-items:center; gap:9px; order:-1;
    font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted);
  }
  .nav__painel-topo b{ color:var(--verde); }

  /* as âncoras viram uma lista grande, uma por linha */
  .nav__painel .nav__menu{
    flex-direction:column; align-items:flex-start; gap:clamp(14px,2.6vh,24px);
    max-width:none; overflow:visible; opacity:1; transition:none;
  }
  .nav__painel .nav__menu a{
    font-family:'Montserrat','Poppins',sans-serif;
    font-size:clamp(26px,8vw,40px); font-weight:800; letter-spacing:-.01em;
    text-transform:none; color:var(--text); line-height:1.1;
    opacity:0; transform:translateY(14px);
    transition:opacity .45s ease, transform .45s cubic-bezier(.4,0,.2,1), color .2s ease;
  }
  .nav.is-open .nav__painel .nav__menu a{ opacity:1; transform:none; }
  .nav.is-open .nav__painel .nav__menu a:nth-child(1){ transition-delay:.10s; }
  .nav.is-open .nav__painel .nav__menu a:nth-child(2){ transition-delay:.17s; }
  .nav.is-open .nav__painel .nav__menu a:nth-child(3){ transition-delay:.24s; }
  .nav.is-open .nav__painel .nav__menu a:nth-child(4){ transition-delay:.31s; }

  /* botões: um embaixo do outro, largura toda */
  .nav__painel .nav__acoes{
    flex-direction:column; gap:10px; margin:0;
    max-height:none; overflow:visible; opacity:0; transition:opacity .4s ease .34s;
  }
  .nav.is-open .nav__painel .nav__acoes{ opacity:1; }
  .nav__painel .nav__acoes .btn{ justify-content:center; width:100%; padding:15px 20px; font-size:14px; }

  .nav__painel .nav__langs{
    /* respiro depois dos botões: sem ele, PT/EN/ES gruda no "Falar com
       o time" e parece parte do bloco de ações */
    margin:clamp(14px,3vh,26px) 0 0; gap:6px; opacity:0;
    transition:opacity .4s ease .4s;
  }
  .nav.is-open .nav__painel .nav__langs{ opacity:1; }
  .nav__painel .nav__langs button{ font-size:13px; padding:8px 12px; text-shadow:none; }
}

@media (prefers-reduced-motion: reduce){
  .nav__painel, .nav__painel .nav__menu a,
  .nav__painel .nav__acoes, .nav__painel .nav__langs{ transition:none; }
}
@media (prefers-reduced-motion: reduce){
  .marca > g, .nav__pin-corpo, .nav__pin-olho{ animation:none; }
  .marca{ transition:none; }
}

/* ---------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------- */
.hero{ position:relative; height:var(--hero-scroll); }
.hero__pin{
  position:sticky; top:0;
  height:var(--pin-h);
  overflow:hidden;
  background:var(--bg-deep);
}
/* véu que escurece o herói conforme a próxima seção sobe.
   NÃO usamos filter:blur aqui: filtro sobre um <video> tira o elemento do
   caminho de composição acelerada e ele renderiza preto em alguns
   navegadores. O desfoque fica só no texto, que é seguro. */
.hero__veu{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:var(--bg-deep); opacity:0;
}
.hero__stage{ transition:none; will-change:transform; }

.hero__stage{ position:absolute; inset:0; }
.stage__still,
.stage__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* o poster fica embaixo; o vídeo entra por cima quando estiver navegável */
.stage__video{ opacity:0; transition:opacity .5s ease; }
.hero__stage.is-live .stage__video{ opacity:1; }

.hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,6,28,.6) 0%, rgba(0,10,46,.3) 26%, rgba(0,10,46,.55) 76%, rgba(0,6,28,.95) 100%),
    linear-gradient(90deg, rgba(0,10,46,.82) 0%, rgba(0,10,46,.5) 45%, rgba(0,10,46,0) 75%);   /* vídeo claro (dia): texto sempre sobre azul */
}

/* ---------------------------------------------------------------------
   TEXTOS SOBRE O VÍDEO
   --------------------------------------------------------------------- */
.hero__captions{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.caption{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad-x);
  max-width:var(--largura); margin-inline:auto;
  opacity:0;
  transform:translate3d(0,22px,0);
  will-change:opacity,transform;
}
/* ritmo vertical da legenda: cada tipo de bloco tem seu respiro */
.caption > * + *{ margin-top:var(--gap-texto); }
.caption > .kicker + h2{ margin-top:calc(var(--gap-texto) * .55); }
.caption > p + p{ margin-top:var(--gap-curto); }          /* parágrafos irmãos ficam juntos */
.caption > h2 + p{ margin-top:calc(var(--gap-texto) * 1.1); }
.caption > ul,
.caption > .cta-row,
.caption > .pills{ margin-top:calc(var(--gap-texto) * 1.5); }  /* mais ar antes das pílulas */
.caption__logo{ width:min(76vw,420px); height:auto; filter:drop-shadow(0 8px 30px rgba(0,0,0,.5)); }

/* --- logo em três tempos: símbolo, letreiro e 2026 ------------------
   Cada parte é um grupo do SVG. Entram em sequência quando a legenda
   de abertura aparece. */
.lockup{
  width:min(78vw,450px); height:auto; display:block; margin-bottom:var(--gap-texto);
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.5));
}
.lockup__simbolo, .lockup__texto, .lockup__ano{
  transform-box:fill-box; transform-origin:center;
  opacity:0;
}
.caption.is-vista .lockup__simbolo{ animation:lockupSimbolo .7s cubic-bezier(.34,1.3,.5,1) .45s both; }
.caption.is-vista .lockup__texto  { animation:lockupParte .6s cubic-bezier(.4,0,.2,1) .95s both; }
.caption.is-vista .lockup__ano    { animation:lockupAno .55s cubic-bezier(.34,1.5,.5,1) 1.4s both; }
@keyframes lockupSimbolo{
  0%{ opacity:0; transform:scale(.4) rotate(-25deg); }
  100%{ opacity:1; transform:none; }
}
@keyframes lockupParte{
  0%{ opacity:0; transform:translateX(-14px); }
  100%{ opacity:1; transform:none; }
}
@keyframes lockupAno{
  0%{ opacity:0; transform:scale(.5); }
  60%{ opacity:1; transform:scale(1.12); }
  100%{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .lockup__simbolo, .lockup__texto, .lockup__ano{ opacity:1; animation:none; }
}
/* logo 25 anos na abertura: entra no mesmo tempo do antigo lockup */
.lockup--img{ width:min(70vw,340px); opacity:0; }
.caption.is-vista .lockup--img{ animation:lockupParte .7s cubic-bezier(.4,0,.2,1) .45s both; }
@media (prefers-reduced-motion: reduce){ .lockup--img{ opacity:1; animation:none; } }
.caption__tema{
  font-size:clamp(18px,2.4vw,27px); font-weight:700; line-height:1.25;
  color:var(--text); max-width:20ch; text-shadow:0 6px 30px rgba(0,0,0,.5);
}
/* títulos na fonte da identidade (Montserrat), como nos materiais do
   evento; o corpo do texto segue em Poppins */
.caption h2{
  margin:0; font-family:'Montserrat','Poppins',sans-serif; text-wrap:balance;
  font-size:clamp(26px,4.2vw,50px); font-weight:800; line-height:1.1;
  letter-spacing:-.01em; text-shadow:0 6px 30px rgba(0,0,0,.45);
}
.caption p{
  margin:0; font-size:clamp(15px,1.35vw,18px); line-height:1.6;
  color:var(--muted); max-width:72ch;
  text-wrap:pretty;              /* evita a viúva: nunca deixa uma palavra sozinha na última linha */
}
.kicker{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde); display:flex; align-items:center; gap:10px;
}
.kicker::before{ content:""; width:22px; height:2px; background:var(--verde); }

.pills{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.pill .ico{ color:var(--verde); }
.pill b{ color:var(--verde); }

/* lista compacta usada dentro das legendas do herói */
.mini{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
@media (min-width:1100px){ .mini{ flex-wrap:nowrap; } }   /* uma linha só no monitor grande */
.mini li{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:13px; font-weight:600; padding:9px 15px; border-radius:999px;
  border:1px solid rgba(12,200,244,.32); background:rgba(1,81,219,.16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.mini .ico{ color:var(--verde); }

/* Só a lista da abertura vira rodízio: um tema por vez, sem a pílula em
   volta. O JS troca .mini--rodizio por .mini--rotativo depois de medir a
   altura natural — sem script (ou com movimento reduzido) ela continua
   sendo uma lista comum, com todos os itens à vista. */
.mini--rodizio li{
  padding:0; border:0; background:none; gap:10px;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  font-size:clamp(15px,1.5vw,19px); font-weight:700; color:var(--text);
}
.mini--rodizio .ico{ width:1.35em; height:1.35em; }
.mini--rotativo{ display:block; position:relative; }
.mini--rotativo li{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  opacity:0; visibility:hidden;
}
.mini--rotativo li.is-ativo{ opacity:1; visibility:visible; }
.mini--rotativo li.is-ativo .ico{ animation:icoEntra .5s cubic-bezier(.34,1.4,.5,1) both; }
.mini--rotativo li.is-ativo .mini__txt{ animation:miniTexto .45s cubic-bezier(.4,0,.2,1) .3s both; }
.mini--rotativo li.is-saindo{ opacity:0; transition:opacity .32s ease; }
@keyframes miniTexto{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }

/* as pílulas de "Sobre o evento" voltam a ter a entrada escalonada,
   depois que a legenda já apareceu */
.caption.is-vista .mini:not(.mini--rodizio) li:nth-child(1) .ico{ animation:icoEntra .7s cubic-bezier(.34,1.4,.5,1) .60s both; }
.caption.is-vista .mini:not(.mini--rodizio) li:nth-child(2) .ico{ animation:icoEntra .7s cubic-bezier(.34,1.4,.5,1) .68s both; }
.caption.is-vista .mini:not(.mini--rodizio) li:nth-child(3) .ico{ animation:icoEntra .7s cubic-bezier(.34,1.4,.5,1) .76s both; }
.caption.is-vista .mini:not(.mini--rodizio) li:nth-child(4) .ico{ animation:icoEntra .7s cubic-bezier(.34,1.4,.5,1) .84s both; }
/* Entrada dos ícones.
   Regra de ouro: a animação só pode começar DEPOIS que o elemento que
   contém o ícone já apareceu. Se disparar antes, o ícone quica enquanto
   ainda está invisível e o usuário não vê nada acontecer. */

/* keynote: o selo fica no .kn__label (entra em .05s) */
.caption--kn.is-vista .kn__mark{ animation:icoEntra .7s cubic-bezier(.34,1.4,.5,1) .35s both; }
/* as aspas ficam no .kn__col--art (entra em .3s) */
.caption--kn.is-vista .kn__quote-ico{ animation:icoEntra .6s cubic-bezier(.34,1.4,.5,1) .65s both; }
/* os pilares entram de .45s a .69s — os ícones vêm logo atrás */
.caption--kn.is-vista .kn__pillars > li:nth-child(1) .ico{ animation:icoEntra .7s cubic-bezier(.34,1.4,.5,1) .80s both; }
.caption--kn.is-vista .kn__pillars > li:nth-child(2) .ico{ animation:icoEntra .7s cubic-bezier(.34,1.4,.5,1) .88s both; }
.caption--kn.is-vista .kn__pillars > li:nth-child(3) .ico{ animation:icoEntra .7s cubic-bezier(.34,1.4,.5,1) .96s both; }
.caption--kn.is-vista .kn__pillars > li:nth-child(4) .ico{ animation:icoEntra .7s cubic-bezier(.34,1.4,.5,1) 1.04s both; }

/* a lista do currículo só existe quando o painel abre — animar junto com
   a legenda faria a animação rodar inteira com o painel ainda fechado */
.kn__cv.is-open .kn__list li .kn__ico,
.kn__cv:hover .kn__list li .kn__ico{ animation:icoEntra .6s cubic-bezier(.34,1.4,.5,1) .12s both; }
.kn__cv.is-open .kn__list li:nth-child(2) .kn__ico, .kn__cv:hover .kn__list li:nth-child(2) .kn__ico{ animation-delay:.19s; }
.kn__cv.is-open .kn__list li:nth-child(3) .kn__ico, .kn__cv:hover .kn__list li:nth-child(3) .kn__ico{ animation-delay:.26s; }
.kn__cv.is-open .kn__list li:nth-child(4) .kn__ico, .kn__cv:hover .kn__list li:nth-child(4) .kn__ico{ animation-delay:.33s; }
.kn__cv.is-open .kn__list li:nth-child(5) .kn__ico, .kn__cv:hover .kn__list li:nth-child(5) .kn__ico{ animation-delay:.40s; }
.kn__cv.is-open .kn__list li:nth-child(6) .kn__ico, .kn__cv:hover .kn__list li:nth-child(6) .kn__ico{ animation-delay:.47s; }

@keyframes icoEntra{
  0%{   opacity:0; transform:translateY(5px) scale(.35); }
  55%{  opacity:1; transform:translateY(-3px) scale(1.18); }
  78%{  transform:translateY(0) scale(.94); }
  100%{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .mini--rotativo{ display:flex; }
  .mini--rotativo li{ position:static; transform:none; opacity:1; visibility:visible; }
  .mini--rotativo li.is-ativo .ico, .mini--rotativo li.is-ativo .mini__txt,
  .caption.is-vista .mini li .ico,
  .caption--kn.is-vista .kn__mark, .caption--kn.is-vista .kn__quote-ico,
  .caption--kn.is-vista .kn__pillars > li .ico,
  .kn__cv.is-open .kn__list li .kn__ico, .kn__cv:hover .kn__list li .kn__ico{ animation:none; }
}
.mini--plain li{
  border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08);
  letter-spacing:.02em;
}

/* =====================================================================
   KEYNOTE INTERNACIONAL — sobre o vídeo, sem cor de fundo
   ===================================================================== */
.caption--kn{
  max-width:none;
  padding:0 var(--pad-x);
  justify-content:center;
}
.caption--kn > * + *{ margin-top:0; }

.kn{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:"texto arte" "pilares pilares";
  align-items:center;
  gap:clamp(14px,2.5vw,40px);
  width:100%; max-width:var(--conteudo); margin:0 auto;
}
.kn__col{ grid-area:texto; min-width:0; }
.kn__col--art{ grid-area:arte; }

.kn__label{ display:flex; align-items:center; gap:13px; margin-bottom:clamp(14px,2vh,22px); }
.kn__mark{ width:clamp(26px,2.4vw,34px); height:clamp(26px,2.4vw,34px); color:var(--azul-claro); flex:none; }
.kn__label span{
  position:relative; padding-bottom:10px;
  font-size:clamp(11px,1.05vw,14px); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text);
}
.kn__label span::after{
  content:""; position:absolute; left:0; bottom:0; width:66px; height:3px;
  border-radius:2px; background:var(--azul-claro);
}

.kn__intro{
  margin:0 0 clamp(12px,2vh,22px);
  font-size:clamp(12.5px,1vw,15px); line-height:1.6; color:var(--muted); max-width:54ch;
}
.kn__intro b{ color:var(--text); font-weight:700; }
.kn__intro-hl{ font-size:1.3em; font-weight:800; letter-spacing:-.01em; }

.kn__name{
  margin:0 0 clamp(10px,1.6vh,16px); font-family:'Montserrat','Poppins',sans-serif;
  line-height:.9; letter-spacing:-.03em;
  font-size:clamp(44px,6.4vw,104px); font-weight:800; text-transform:uppercase;
  text-shadow:0 8px 40px rgba(0,0,0,.5);
}
.kn__name span{ display:block; color:var(--text); }
.kn__name em{ display:block; font-style:normal; color:var(--azul-claro); }

.kn__badge{
  display:inline-block;
  padding:10px 20px; border-radius:8px;
  background:linear-gradient(90deg,var(--azul),var(--verde)); color:#fff;
  font-size:clamp(11.5px,1vw,14px); font-weight:600;
  box-shadow:0 10px 26px rgba(1,81,219,.4);
}
.kn__badge b{ font-weight:800; }

/* --- currículo: abre no hover (desktop) ou no clique/toque --- */
.kn__cv{ margin:0 0 clamp(14px,2.4vh,26px); }
.kn__badge-row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }

.kn__cv-btn{
  position:relative; pointer-events:auto; cursor:pointer;
  display:inline-grid; place-items:center; flex:none;
  width:38px; height:38px; padding:0; border-radius:50%;
  color:var(--azul-claro);
  background:rgba(1,81,219,.16); border:1px solid rgba(12,200,244,.4);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:color .25s ease, background .25s ease, border-color .25s ease;
}
/* anel pulsando: sinaliza que dá para clicar */
.kn__cv-btn::before{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid var(--azul-claro);
  animation:knPulso 2.2s ease-out infinite; pointer-events:none;
}
@keyframes knPulso{
  0%{ transform:scale(1); opacity:.75; }
  70%{ transform:scale(1.45); opacity:0; }
  100%{ transform:scale(1.45); opacity:0; }
}
.kn__cv-btn:hover,
.kn__cv-btn:focus-visible{ color:#fff; background:rgba(1,81,219,.34); border-color:var(--azul-claro); }
/* a setinha também pisca de leve, empurrando para baixo */
.kn__cv-seta{ width:17px; height:17px; transition:transform .35s ease; animation:knSeta 2.2s ease-in-out infinite; }
@keyframes knSeta{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(3px); }
}

/* o anel para de pulsar depois de aberto — já cumpriu o papel */
.kn__cv.is-open .kn__cv-btn::before{ animation:none; opacity:0; }
.kn__cv.is-open .kn__cv-seta{ transform:rotate(180deg); animation:none; }

/* O currículo flutua SOBRE o conteúdo: assim não empurra o layout do
   keynote nem muda a altura da legenda. */
.kn__cv{ position:relative; }
.kn__cv-panel{
  position:absolute; top:calc(100% + 14px); left:0; z-index:30;
  width:min(560px,86vw);
  padding:18px 22px;
  border-radius:20px;
  background:rgba(0,12,44,.94);
  border:1px solid rgba(12,200,244,.26);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:0 26px 70px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.98);
  transition:opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1), visibility 0s linear .35s;
}
/* ponte invisível: sem ela o mouse "cai" no vão entre o botão e o cartão
   e o hover se perde no meio do caminho */
.kn__cv-panel::before{ content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }

.kn__cv.is-open .kn__cv-panel{
  opacity:1; visibility:visible; transform:none; transition-delay:0s;
}
@media (hover:hover){
  .kn__cv:hover .kn__cv-panel{
    opacity:1; visibility:visible; transform:none; transition-delay:0s;
  }
  .kn__cv:hover .kn__cv-btn::before{ animation:none; opacity:0; }
  .kn__cv:hover .kn__cv-seta{ transform:rotate(180deg); animation:none; }
}

/* o X só faz sentido onde não existe hover */
.kn__cv-fechar{
  display:none;
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  place-items:center; color:var(--text);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
}
.kn__cv-fechar svg{ width:16px; height:16px; }
@media (hover:none){
  .kn__cv-fechar{ display:grid; }
  .kn__list{ padding-right:34px; }
}
/* no celular o cartão vira uma folha centralizada, sem risco de sair da tela */
@media (max-width:640px){
  .kn__cv-panel{
    position:fixed; left:5vw; right:5vw; top:auto; bottom:10vh; width:auto;
    max-height:64vh; overflow-y:auto;
  }
  .kn__cv-panel::before{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .kn__cv-btn::before,
  .kn__cv-seta{ animation:none; }
}

.kn__list{ list-style:none; margin:0; padding:0; }
/* o ícone é posicionado em vez de virar item de grade/flex — assim os <b>
   no meio da frase continuam inline e o texto não quebra em colunas */
.kn__list li{
  position:relative; padding:clamp(7px,1.1vh,12px) 0 clamp(7px,1.1vh,12px) 48px;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:clamp(12px,.98vw,14.5px); line-height:1.45; color:var(--muted);
}
.kn__list li:first-child{ border-top:1px solid rgba(255,255,255,.12); }
.kn__list b{ color:var(--azul-claro); font-weight:700; }
.kn__ico{
  position:absolute; left:0; top:50%; margin-top:-17px;   /* no lugar do translateY,
     que a animação de entrada sobrescreveria */
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:rgba(1,81,219,.22); border:1px solid rgba(12,200,244,.28);
  color:var(--azul-claro);
}
.kn__ico .ico{ width:17px; height:17px; }

/* --- composição da direita --- */
.kn__art{ position:relative; width:100%; aspect-ratio:1/1; display:grid; place-items:end center; }
.kn__glow{
  position:absolute; inset:8% 6% 6% 6%; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, rgba(40,120,240,.55), rgba(1,60,190,.42) 62%, transparent 72%);
  filter:blur(2px);
}
.kn__dots{
  position:absolute; top:6%; right:1%; width:82px; height:120px;
  background-image:radial-gradient(rgba(12,200,244,.45) 1.8px, transparent 1.8px);
  background-size:15px 15px;
}
.kn__photo{ position:relative; z-index:2; width:92%; height:100%; display:flex; align-items:flex-end; justify-content:center; }
.kn__photo img{ width:100%; height:100%; object-fit:contain; object-position:bottom; }

.kn__quote{
  position:absolute; z-index:3; right:0; bottom:2%;
  width:clamp(150px,44%,210px); aspect-ratio:1/1; margin:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:clamp(14px,2.4vw,24px); border-radius:50%; text-align:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.kn__quote-ico{ width:22px; height:22px; color:var(--azul-claro); flex:none; }
.kn__quote blockquote{ margin:0; font-size:clamp(10.5px,.92vw,13px); line-height:1.4; color:var(--muted); }
.kn__quote b{ color:var(--text); font-weight:700; }

/* --- barra de pilares --- */
.kn__pillars{
  grid-area:pilares; list-style:none; margin:clamp(10px,2vh,22px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(10px,2.5vw,34px);
}
.kn__pillars li{
  display:inline-flex; align-items:center; gap:10px;
  font-size:clamp(10.5px,1.05vw,14px); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text);
}
.kn__pillars li + li{ padding-left:clamp(10px,2.5vw,34px); border-left:1px solid rgba(255,255,255,.18); }
.kn__pillars .ico{ width:20px; height:20px; color:var(--azul-claro); }

@media (max-width:860px){
  .kn{ grid-template-columns:1fr; grid-template-areas:"texto" "pilares"; }
  .kn__col--art{ display:none; }          /* sobre o vídeo, o texto vem primeiro no celular */
  .kn__pillars li + li{ border-left:0; padding-left:0; }
}

.facts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; max-width:440px; }
.facts li{ position:relative; padding-left:16px; font-size:14px; color:var(--muted); }
.facts li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--verde); }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--gap-bloco); pointer-events:auto; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  padding:14px 26px; border-radius:999px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn--primary{ background:linear-gradient(90deg,var(--azul),var(--verde)); color:#fff; box-shadow:0 10px 30px rgba(1,81,219,.45); }
.btn--ghost{ border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.06); color:#fff; }
.btn:hover{ transform:translateY(-2px); }

/* ---------------------------------------------------------------------
   PROGRESSO + CUE
   --------------------------------------------------------------------- */
.hero__progress{
  position:absolute; top:50%; right:clamp(14px,2.2vw,30px); transform:translateY(-50%);
  z-index:4; display:flex; flex-direction:column; align-items:center; gap:14px;
}
.hero__rail{ position:absolute; top:-10px; bottom:-10px; width:1px; background:rgba(255,255,255,.18); }
.hero__rail i{ position:absolute; top:0; left:0; width:100%; height:0%; background:var(--verde); }
.hero__dot{ position:relative; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); transition:background .3s ease, transform .3s ease; }
.hero__dot.is-active{ background:var(--verde); transform:scale(1.4); }

.hero__cue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:4; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.hero__mouse{ width:22px; height:34px; border:2px solid rgba(255,255,255,.5); border-radius:12px; position:relative; }
.hero__mouse::after{
  content:""; position:absolute; top:6px; left:50%; margin-left:-2px;
  width:4px; height:8px; border-radius:2px; background:var(--verde);
  animation:cue 1.7s ease-in-out infinite;
}
@keyframes cue{ 0%{opacity:1;transform:translateY(0)} 70%{opacity:0;transform:translateY(12px)} 100%{opacity:0} }

/* ---------------------------------------------------------------------
   CONTEÚDO
   --------------------------------------------------------------------- */
.content{
  position:relative; z-index:20; background:var(--bg);
  /* sobe sobre a última tela do herói: o keynote fica parado enquanto
     esta seção cobre. A altura extra é devolvida em --hero-scroll. */
  margin-top:-100vh;
  border-radius:28px 28px 0 0;
  box-shadow:0 -30px 80px rgba(0,0,0,.55);
}
@supports (height:100svh){ .content{ margin-top:-100svh; } }
.block{ max-width:var(--largura); margin:0 auto; padding:var(--gap-secao) var(--pad-x); }
.block__title{ font-family:'Montserrat','Poppins',sans-serif; text-wrap:balance; font-size:clamp(28px,4vw,46px); font-weight:800; line-height:1.12; letter-spacing:-.01em; margin:var(--gap-texto) 0 var(--gap-texto); }
.block__lead{ color:var(--muted); font-size:clamp(15px,1.4vw,18px); max-width:66ch; margin:0; line-height:1.65; text-wrap:pretty; }
.block__note{ margin-top:var(--gap-bloco); color:var(--muted); font-size:14px; }
.block__note b{ color:var(--text); }

.eyebrow{
  margin:var(--gap-bloco) 0 var(--gap-texto); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--azul-claro);
}

/* --- três pilares --- */
.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.pillar{
  display:flex; flex-direction:column; gap:10px;
  border:1px solid var(--line); border-radius:18px; padding:24px;
  background:linear-gradient(160deg, rgba(1,81,219,.12), rgba(255,255,255,.03));
}
.pillar__ico,
.card__ico,
.fact__ico{
  display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:rgba(1,81,219,.18); border:1px solid rgba(12,200,244,.28); color:var(--azul-claro);
}
.pillar__ico .ico, .card__ico .ico, .fact__ico .ico{ width:22px; height:22px; }
.pillar b{ font-size:17px; }
.pillar span{ color:var(--muted); font-size:14px; line-height:1.6; }

/* --- cards --- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:0; }
.card{
  border:1px solid var(--line); border-radius:16px; padding:22px;
  background:rgba(255,255,255,.04); font-size:14px; color:var(--muted); line-height:1.6;
}
.card b{ display:block; margin:14px 0 8px; font-size:15px; color:var(--text); letter-spacing:0; text-transform:none; }
.cards--icons .card{ display:flex; flex-direction:column; }

/* --- detalhes: fatos --- */
.facts-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin-top:8px; }
.fact{
  display:flex; flex-direction:column; gap:10px;
  border:1px solid var(--line); border-radius:16px; padding:22px; background:rgba(255,255,255,.04);
}
.fact b{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--verde); }
.fact span:last-child{ font-size:16px; font-weight:600; line-height:1.4; }

/* --- duas colunas --- */
.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(24px,4vw,56px); }
.split__lead{ color:var(--muted); font-size:15px; line-height:1.65; margin:0 0 18px; }
.split__note{ margin-top:16px; color:rgba(255,255,255,.5); font-size:13px; line-height:1.6; }

.list-ico{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
/* o ícone é posicionado, não vira item de grade — assim <em>/<br> no meio
   do texto continuam inline e não quebram a linha */
.list-ico li{
  position:relative; padding-left:32px;
  color:var(--muted); font-size:15px; line-height:1.6;
}
.list-ico .ico{
  position:absolute; left:0; top:3px;
  width:20px; height:20px; color:var(--azul-claro);
}

.tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.tags li{
  font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px;
  border:1px solid rgba(12,200,244,.3); background:rgba(1,81,219,.12); color:var(--azul-claro);
}

/* --- keynote --- */
.keynote{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,3vw,40px); margin-top:var(--gap-bloco); }
.keynote__card{
  display:flex; gap:18px; align-items:center; align-self:start;
  border:1px solid var(--line); border-radius:20px; padding:24px;
  background:linear-gradient(150deg, rgba(1,81,219,.18), rgba(255,255,255,.03));
}
.keynote__mark{
  display:grid; place-items:center; flex:none; width:64px; height:64px; border-radius:50%;
  background:linear-gradient(90deg,var(--azul),var(--verde)); color:#fff;
  font-weight:800; font-size:20px; letter-spacing:.04em;
}
.keynote__card b{ display:block; font-size:20px; margin-bottom:6px; }
.keynote__card span{ color:var(--muted); font-size:14px; line-height:1.55; }
.keynote__list{ align-self:center; }
.keynote em{ font-style:italic; color:var(--text); }

.brands{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.brands li{
  font-size:14px; font-weight:700; letter-spacing:.02em; padding:10px 18px;
  border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.04);
}

/* --- player do YouTube (capa local, iframe só no clique) --- */
.player{
  position:relative; margin-top:var(--gap-bloco); border-radius:20px; overflow:hidden;
  aspect-ratio:16/9; background:#000; border:1px solid var(--line); cursor:pointer;
}
.player img, .player iframe{ width:100%; height:100%; display:block; border:0; object-fit:cover; }
.player__btn{
  position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:#fff;
  background:linear-gradient(90deg,var(--azul),var(--verde));
  border:0; box-shadow:0 12px 40px rgba(1,81,219,.5);
  transition:transform .2s ease;
}
.player__btn .ico{ width:30px; height:30px; margin-left:4px; }
.player:hover .player__btn{ transform:scale(1.08); }
.player__tag{
  position:absolute; left:16px; bottom:16px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 14px; border-radius:999px; background:rgba(0,6,24,.65);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.player.is-playing .player__btn,
.player.is-playing .player__tag{ display:none; }

/* --- carrossel de fotos --- */
.carrossel{ position:relative; margin-top:var(--gap-bloco); }
.carrossel__trilho{
  display:flex; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;                     /* Firefox */
  padding-bottom:2px;
}
.carrossel__trilho::-webkit-scrollbar{ display:none; }
.carrossel__trilho figure{
  flex:0 0 clamp(250px,32%,380px);
  margin:0; scroll-snap-align:start;
  border-radius:16px; overflow:hidden; background:rgba(255,255,255,.04);
}
.carrossel__trilho img{
  width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  filter:saturate(.92); transition:transform .5s ease, filter .5s ease;
}
.carrossel__trilho figure:hover img{ transform:scale(1.05); filter:saturate(1.1); }

.carrossel__seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  color:#fff; background:rgba(2,16,52,.72); border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:background .25s ease, border-color .25s ease, opacity .25s ease;
}
.carrossel__seta:hover{ background:rgba(1,81,219,.75); border-color:var(--azul-claro); }
.carrossel__seta--ant{ left:-8px; }
.carrossel__seta--ant .ico{ transform:rotate(180deg); }
.carrossel__seta--prox{ right:-8px; }
@media (max-width:640px){
  /* As setas ficam: o dedo arrasta, mas sem elas nada indica que há mais
     foto à direita. Vão para dentro da imagem, porque fora dela seriam
     cortadas pelo padding da seção. */
  .carrossel__seta{ width:40px; height:40px; }
  .carrossel__seta--ant{ left:8px; }
  .carrossel__seta--prox{ right:8px; }
  .carrossel__seta .ico{ width:18px; height:18px; }
  .carrossel__trilho figure{ flex-basis:82%; }
}

/* o rodízio automático pausa quando a pessoa toca; esta é a dica visual */
.carrossel.is-pausado .carrossel__seta{ background:rgba(1,81,219,.75); border-color:var(--azul-claro); }


.cta-row--center{ justify-content:center; }
.block--cta{
  text-align:center;
  position:relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(1,81,219,.28), transparent 62%),
    linear-gradient(180deg, #04175a 0%, #020f3f 100%);
  border-top:1px solid rgba(12,200,244,.16);
  border-bottom:1px solid rgba(12,200,244,.16);
  max-width:none;                 /* o fundo vai de ponta a ponta */
}
.block--cta > *{ max-width:var(--conteudo); margin-left:auto; margin-right:auto; }
.block--cta .block__lead{ margin:0 auto; }

/* --- rodapé --- */
.site-footer{ border-top:1px solid var(--line); background:var(--bg-deep); }
.site-footer__grid{
  max-width:var(--largura); margin:0 auto; padding:var(--gap-secao) var(--pad-x) var(--gap-bloco);
  display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:clamp(24px,4vw,48px);
}
.site-footer__brand img{ width:min(70vw,260px); height:auto; margin-bottom:16px; }
.site-footer__brand p{ margin:0; color:var(--muted); font-size:14px; }
.site-footer__title{
  margin:0 0 16px; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--verde);
}
.site-footer__links{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.site-footer__links a{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--muted); font-size:14px; text-decoration:none; transition:color .2s ease;
}
.site-footer__links a:hover{ color:var(--text); }
.site-footer__links .ico{ color:var(--azul-claro); }
.site-footer__addr{
  position:relative; padding-left:26px;
  color:var(--muted); font-size:14px; line-height:1.6;
}
.site-footer__addr .ico{ position:absolute; left:0; top:3px; color:var(--azul-claro); }
.site-footer__bar{
  border-top:1px solid var(--line);
  padding:22px var(--pad-x);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  max-width:var(--largura); margin:0 auto;
  font-size:12px; color:rgba(255,255,255,.45);
}
.site-footer__bar a{ color:rgba(255,255,255,.45); text-decoration:none; }
.site-footer__bar a:hover{ color:var(--text); }
@media (max-width:820px){
  .site-footer__grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------
   REVELAÇÃO EM CASCATA
   Cada texto, botão, card e ícone entra sozinho quando chega na tela.
   O atraso de cada um é calculado no JS conforme a posição entre os
   irmãos, então a cascata segue a ordem de leitura.
   --------------------------------------------------------------------- */
[data-anima]{
  opacity:0;
  transform:translate3d(0,20px,0);
  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
[data-anima].is-in{ opacity:1; transform:none; }

/* --- cascata DENTRO das legendas do herói ---------------------------
   Cada legenda entra com seus filhos escalonados, em vez de o bloco
   inteiro acender de uma vez. A classe is-vista entra pelo JS quando a
   legenda aparece de fato durante a rolagem do vídeo. */
.caption > *{
  opacity:0; transform:translate3d(0,18px,0);
  transition:opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
.caption.is-vista > *{ opacity:1; transform:none; }
.caption.is-vista > *:nth-child(1){ transition-delay:.05s; }
.caption.is-vista > *:nth-child(2){ transition-delay:.15s; }
.caption.is-vista > *:nth-child(3){ transition-delay:.25s; }
.caption.is-vista > *:nth-child(4){ transition-delay:.35s; }
.caption.is-vista > *:nth-child(5){ transition-delay:.45s; }

/* a legenda do keynote tem um nível a mais: quem escalona são as partes
   internas, não o contêiner */
.caption--kn > .kn{ opacity:1; transform:none; transition:none; }
.caption--kn .kn__label,
.caption--kn .kn__name,
.caption--kn .kn__cv,
.caption--kn .kn__intro,
.caption--kn .kn__col--art,
.caption--kn .kn__pillars > li{
  opacity:0; transform:translate3d(0,18px,0);
  transition:opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
.caption--kn.is-vista .kn__label,
.caption--kn.is-vista .kn__name,
.caption--kn.is-vista .kn__cv,
.caption--kn.is-vista .kn__intro,
.caption--kn.is-vista .kn__col--art,
.caption--kn.is-vista .kn__pillars > li{ opacity:1; transform:none; }
.caption--kn.is-vista .kn__label{ transition-delay:.05s; }
.caption--kn.is-vista .kn__name{ transition-delay:.15s; }
.caption--kn.is-vista .kn__cv{ transition-delay:.25s; }
.caption--kn.is-vista .kn__intro{ transition-delay:.35s; }
.caption--kn.is-vista .kn__col--art{ transition-delay:.3s; }
.caption--kn.is-vista .kn__pillars > li:nth-child(1){ transition-delay:.45s; }
.caption--kn.is-vista .kn__pillars > li:nth-child(2){ transition-delay:.53s; }
.caption--kn.is-vista .kn__pillars > li:nth-child(3){ transition-delay:.61s; }
.caption--kn.is-vista .kn__pillars > li:nth-child(4){ transition-delay:.69s; }

/* --- entrada do menu, depois que o loader sai ----------------------- */
.pronto .nav__pill{ animation:navEntra .85s cubic-bezier(.34,1.25,.5,1) both; }
.pronto .nav__burger{ animation:navItem .6s ease .45s both; }
.pronto .nav__data{ animation:navItem .6s ease .55s both; }
.pronto .nav__langs{ animation:navItem .6s ease .65s both; }
@keyframes navEntra{ from{ opacity:0; transform:translateY(-16px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes navItem{ from{ opacity:0; transform:translateY(-7px); } to{ opacity:1; transform:none; } }
.nav__pill, .nav__burger, .nav__data, .nav__langs{ opacity:0; }
.pronto .nav__pill, .pronto .nav__burger, .pronto .nav__data, .pronto .nav__langs{ opacity:1; }

/* os ícones dentro do bloco crescem junto, com um leve exagero */
/* O bloco leva .7s para aparecer; o ícone dentro dele só quica depois.
   A seta do carrossel fica de fora porque tem rotate próprio. */
[data-anima].is-in .ico{ animation:icoEntra .6s cubic-bezier(.34,1.45,.5,1) .35s both; }
/* setas do carrossel ficam de fora: têm rotate próprio, que a animação
   zeraria ao terminar em transform:none */
[data-anima].is-in .carrossel__seta .ico{ animation:none; }
[data-anima].is-in .site-footer__links li:nth-child(2) .ico,
[data-anima].is-in .site-footer__addr li:nth-child(2) .ico{ animation-delay:.43s; }
[data-anima].is-in .site-footer__links li:nth-child(3) .ico,
[data-anima].is-in .site-footer__addr li:nth-child(3) .ico{ animation-delay:.51s; }
@media (prefers-reduced-motion: reduce){
  [data-anima].is-in .ico{ animation:none; }
}

@media (prefers-reduced-motion: reduce){
  .caption > *,
  .caption--kn .kn__label, .caption--kn .kn__name, .caption--kn .kn__cv,
  .caption--kn .kn__intro, .caption--kn .kn__col--art, .caption--kn .kn__pillars > li,
  .nav__pill, .nav__burger, .nav__data, .nav__langs,
  [data-anima],
  [data-anima] .card__ico,
  [data-anima] .pillar__ico,
  [data-anima] .fact__ico{ opacity:1; transform:none; transition:none; }
}

/* ---------------------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------------------- */
@media (max-width:420px){
  .nav__data{ font-size:10px; letter-spacing:.05em; }
  .marca{ width:26px; height:26px; }
}

@media (max-width:767px){
  :root{ --hero-scroll:600vh; }
  /* A legenda fica centrada na tela, não colada embaixo. O padding de
     cima é o que impede o texto de correr por baixo do menu fixo (74px);
     o de baixo reserva o espaço do "role para explorar". Sem os dois, o
     justify-content:center centraria em relação à tela inteira e a
     primeira linha sumiria atrás da pílula. */
  .caption{
    justify-content:center;
    padding-top:calc(env(safe-area-inset-top) + 86px);
    padding-bottom:calc(env(safe-area-inset-bottom) + 118px);
  }
  /* as pílulas de "Sobre" ocupam duas linhas em 375px; apertar um pouco
     é o que faz a legenda mais longa não encostar no "role para explorar" */
  .mini{ gap:8px; }
  .mini li{ padding:7px 12px; font-size:12.5px; }
  .hero__progress{ display:none; }
  .facts{ grid-template-columns:1fr 1fr; }
  .timeline li{ grid-template-columns:1fr; gap:6px; }
}

/* Tela curta (SE, minis, paisagem): a legenda mais longa não cabe com o
   espaçamento normal. Em vez de deixar vazar por baixo do menu, apertamos
   o entrelinhamento e abrimos mão do "role para explorar". */
@media (max-width:767px) and (max-height:750px){
  :root{ --gap-texto:14px; --gap-curto:10px; }
  .caption{
    padding-top:calc(env(safe-area-inset-top) + 74px);
    padding-bottom:calc(env(safe-area-inset-bottom) + 34px);
  }
  .caption h2{ font-size:clamp(21px,6.2vw,25px); line-height:1.14; }
  .caption p{ font-size:14px; line-height:1.5; }
  .hero__cue{ display:none; }
}

/* ---------------------------------------------------------------------
   MOVIMENTO REDUZIDO — sem scrub, sem blur, abertura mais curta
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  :root{ --hero-scroll:260vh; }
  .hero__mouse::after{ animation:none; }
  .reveal{ transition:none; opacity:1; transform:none; }
  .scene__video{ transition:none; }
}

/* =====================================================================
   AJUSTE FINO DE TABLET E CELULAR
   Duas regras que só valem aqui: dedo não é ponteiro (alvo de toque de
   44px, recomendação da Apple e do WCAG 2.5.8) e texto abaixo de 12px
   fica ilegível em tela pequena, mesmo com boa visão.
   ===================================================================== */
@media (max-width:820px){
  /* --- alvos de toque --- */
  .nav__brand{ min-width:44px; min-height:44px; }
  .nav__burger{ width:44px; height:44px; }
  .nav__pill{ padding:4px 10px; gap:6px; }

  .site-footer__links a,
  .site-footer__addr a,
  .site-footer__bar a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .site-footer__links li,
  .site-footer__addr li{ line-height:1.3; }

  /* --- legibilidade --- */
  .nav__data{ font-size:11.5px; }
  .kn__badge{ font-size:12.5px; }
  .kn__pillars li{ font-size:12px; letter-spacing:.08em; }
  .player__tag{ font-size:12px; }
  .loader__label, .loader__pct{ font-size:12px; }
  .kn__label{ font-size:12px; }
  .hero__cue{ font-size:11px; }          /* rótulo curto e discreto: 11px basta */
  .site-footer__title{ font-size:12px; }

  /* os pilares do keynote em coluna: lado a lado eles espremem demais */
  .kn__pillars{ flex-direction:column; align-items:flex-start; gap:12px; }
  .kn__pillars li + li{ padding-left:0; border-left:0; }
}

/* Tablet: a pílula ainda cabe inteira, mas o painel de tela cheia é
   melhor que espremer quatro âncoras, dois botões e três idiomas. */
@media (min-width:600px) and (max-width:820px){
  .nav__painel{ padding-left:max(var(--pad-x),8vw); padding-right:max(var(--pad-x),8vw); }
  .nav__painel .nav__acoes{ flex-direction:row; }
  .nav__painel .nav__acoes .btn{ width:auto; flex:1; }
}

/* =====================================================================
   CONAREC 2027
   ===================================================================== */

/* --- logos SVG animados ----------------------------------------------
   Os SVGs vêm da pasta IDV27, embutidos no HTML: cada forma tem sua
   classe (lg-*) e um --i com a posição dentro do grupo, para a cascata. */
.lockup--c27{ width:min(72vw,340px); height:auto; overflow:visible; filter:none; }  /* sem drop-shadow: ele repinta a cada quadro da animação */
.lockup--c27 path, .lockup--c27 polygon,
.lockup--c27 .lg-simbolo{ transform-box:fill-box; transform-origin:center; }
.lockup--c27 .lg-25, .lockup--c27 .lg-anos, .lockup--c27 .lg-simbolo,
.lockup--c27 .lg-letra, .lockup--c27 .lg-ano, .lockup--c27 .lg-estrela{ opacity:0; }

:is(.caption.is-vista, .site-footer__brand.is-in) > .lockup--c27 .lg-25{ animation:c27Sobe .8s cubic-bezier(.2,.9,.3,1) .35s both; }
:is(.caption.is-vista, .site-footer__brand.is-in) > .lockup--c27 .lg-simbolo{ animation:c27Gira .9s cubic-bezier(.34,1.3,.5,1) .6s both; }
:is(.caption.is-vista, .site-footer__brand.is-in) > .lockup--c27 .lg-onda{ animation:c27Onda 1s cubic-bezier(.2,.9,.3,1) .85s both; }
:is(.caption.is-vista, .site-footer__brand.is-in) > .lockup--c27 .lg-estrela{ animation:c27Estrela .5s ease calc(1.1s + var(--i) * 45ms) both; }
:is(.caption.is-vista, .site-footer__brand.is-in) > .lockup--c27 .lg-estrela:nth-of-type(3n){
  animation:c27Estrela .5s ease calc(1.1s + var(--i) * 45ms) both,
            c27Pisca 3.2s ease-in-out calc(2.2s + var(--i) * 210ms) infinite;
}
:is(.caption.is-vista, .site-footer__brand.is-in) > .lockup--c27 .lg-anos{ animation:lockupParte .5s ease 1s both; }
:is(.caption.is-vista, .site-footer__brand.is-in) > .lockup--c27 .lg-letra{ animation:c27Letra .5s cubic-bezier(.2,.9,.3,1) calc(1.15s + var(--i) * 60ms) both; }
:is(.caption.is-vista, .site-footer__brand.is-in) > .lockup--c27 .lg-ano{ animation:lockupAno .6s cubic-bezier(.34,1.5,.5,1) 1.7s both; }

@keyframes c27Sobe{ from{ opacity:0; transform:translateY(24px) scale(.92); } to{ opacity:1; transform:none; } }
@keyframes c27Gira{ from{ opacity:0; transform:scale(.3) rotate(-120deg); } to{ opacity:1; transform:none; } }
@keyframes c27Onda{ from{ transform:translateY(18px); } to{ transform:none; } }
@keyframes c27Estrela{ from{ opacity:0; transform:scale(0); } to{ opacity:1; transform:none; } }
@keyframes c27Pisca{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } }
@keyframes c27Letra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* símbolo do menu: monta ao carregar, estrelas piscam, gira no hover */
.marca-c{ width:34px; height:34px; display:block; overflow:visible; transition:transform .8s cubic-bezier(.34,1.3,.5,1); }
.marca-c path, .marca-c .lg-simbolo{ transform-box:fill-box; transform-origin:center; }
.marca-c .lg-aro{ animation:c27Estrela .6s cubic-bezier(.34,1.3,.5,1) .1s both; }
.marca-c .lg-simbolo{ animation:c27Gira .8s cubic-bezier(.34,1.3,.5,1) .25s both; }
.marca-c .lg-estrela{ animation:c27Estrela .4s ease calc(.7s + var(--i) * 35ms) both; }
.nav__brand:hover .marca-c .lg-estrela{ animation:c27Pisca .9s ease-in-out calc(var(--i) * 40ms) both; }
.nav__brand:hover .marca-c{ transform:rotate(360deg); }
.nav__brand:hover .marca-c .lg-onda{ animation:c27Onda .6s ease both; }

@media (prefers-reduced-motion: reduce){
  .lockup--c27 *, .marca-c *{ animation:none !important; opacity:1 !important; }
  .marca-c{ transition:none; }
}

/* --- tela 2: números de 2026 --- */
.stats{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,2vw,28px);
  max-width:760px;
}
.caption > .stats{ margin-top:calc(var(--gap-texto) * .9); }
.stats li{ display:flex; flex-direction:column; gap:4px; padding-left:14px; border-left:2px solid rgba(12,200,244,.45); }
.stats b{
  font-family:'Montserrat','Poppins',sans-serif; font-weight:800; line-height:1;
  font-size:clamp(28px,3.6vw,46px);
  background:linear-gradient(90deg,var(--azul-claro),var(--verde));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stats span{ font-size:13px; line-height:1.35; color:var(--muted); }
@media (max-width:700px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:18px; } }

/* --- seção do tema (fundo claro, como os materiais do IDV) --- */
.tema{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(12,200,244,.16), transparent 45%),
    linear-gradient(180deg,#f7faff 0%,#eef4ff 100%);
  color:var(--marinho);
}
.tema__grid{
  max-width:var(--largura); margin:0 auto; padding:var(--gap-secao) var(--pad-x) calc(var(--gap-secao) * .6);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,4vw,64px); align-items:center;
}
.tema .kicker{ color:var(--azul); }
.tema .kicker::before{ background:var(--verde-escuro); }
.tema__logo{ display:block; width:clamp(110px,12vw,150px); height:auto; margin-top:var(--gap-texto); }
.tema .block__title{ color:var(--marinho); margin-bottom:calc(var(--gap-texto) * .5); }
.tema .accent{ background:linear-gradient(90deg,var(--azul),var(--verde-escuro)); -webkit-background-clip:text; background-clip:text; }
.tema__sub{
  margin:0 0 var(--gap-texto); font-family:'Montserrat','Poppins',sans-serif; font-weight:700;
  font-size:clamp(17px,1.8vw,22px); line-height:1.3; color:var(--azul); text-transform:uppercase; max-width:26ch;
}
.tema .block__lead{ color:rgba(0,16,66,.72); }
.tags{ list-style:none; margin:var(--gap-texto) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.tags li{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; padding:9px 15px; border-radius:999px;
  background:#fff; border:1px solid rgba(1,81,219,.18); color:var(--marinho);
  box-shadow:0 6px 18px rgba(1,81,219,.08);
}
.tags .ico{ color:var(--azul); }

.tema__art{ position:relative; }
.tema__art img{ position:relative; display:block; width:100%; height:auto; animation:temaFlutua 9s ease-in-out infinite; }
.tema__bolha{ position:absolute; border-radius:50%; pointer-events:none; }
.tema__bolha--1{
  width:34%; aspect-ratio:1; right:-6%; top:-8%;
  background:radial-gradient(circle at 35% 35%, var(--azul-claro), var(--azul) 55%, var(--royal));
  opacity:.9; animation:temaBolha 11s ease-in-out infinite;
}
.tema__bolha--2{
  width:22%; aspect-ratio:1; left:-4%; bottom:4%;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.95), rgba(210,230,255,.55));
  border:1px solid rgba(255,255,255,.9); box-shadow:0 20px 50px rgba(1,81,219,.15);
  animation:temaBolha 13s ease-in-out -4s infinite reverse;
}
@keyframes temaFlutua{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes temaBolha{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-12px,16px); } }

.tema__faixa{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(90deg,var(--marinho) 0%,var(--royal) 45%,var(--azul) 100%);
  min-height:clamp(320px,42vw,480px); display:flex; align-items:center;
}
.tema__olho{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:min(56%,720px); height:auto; min-height:100%; object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%); mask-image:linear-gradient(90deg,transparent 0%,#000 45%);
  opacity:.85;
}
.tema__faixa-txt{
  position:relative; width:100%; max-width:var(--largura); margin:0 auto; padding:clamp(48px,7vw,90px) var(--pad-x);
}
.tema__faixa-txt > *{ max-width:560px; }
.tema__faixa .block__title{ margin-top:0; font-size:clamp(26px,3.4vw,40px); text-transform:uppercase; }
.tema__faixa .block__lead{ color:rgba(255,255,255,.8); }

@media (max-width:860px){
  .tema__grid{ grid-template-columns:1fr; }
  .tema__art{ max-width:520px; margin:0 auto; }
  .tema__olho{ width:100%; opacity:.35; -webkit-mask-image:none; mask-image:none; }
}
@media (prefers-reduced-motion: reduce){
  .tema__art img, .tema__bolha{ animation:none; }
}

/* --- botões de conversão: participar (verde) e patrocinar (ciano/azul) --- */
.btn--participar, .btn--patrocinar{ position:relative; overflow:hidden; isolation:isolate; }
.btn--participar{
  background:linear-gradient(90deg,var(--verde),var(--verde-escuro)); color:var(--marinho);
  box-shadow:0 10px 30px rgba(18,239,0,.35);
}
.btn--patrocinar{
  background:linear-gradient(90deg,var(--azul-claro),var(--azul)); color:#fff;
  box-shadow:0 10px 30px rgba(12,200,244,.35);
}
/* brilho que atravessa o botão de tempos em tempos */
.btn--participar::after, .btn--patrocinar::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%); animation:btnBrilho 4.5s ease-in-out infinite;
}
.btn--patrocinar::after{ animation-delay:2.25s; }
@keyframes btnBrilho{ 0%,60%{ transform:translateX(-120%); } 85%,100%{ transform:translateX(120%); } }

.btn--participar .ico, .btn--patrocinar .ico{ width:18px; height:18px; flex:none; }
.btn--participar .ico{ animation:icoTicket 2.4s ease-in-out infinite; }
.btn--patrocinar .ico{ animation:icoFoguete 2.4s ease-in-out 1.2s infinite; }
@keyframes icoTicket{ 0%,70%,100%{ transform:none; } 78%{ transform:rotate(-14deg) scale(1.15); } 86%{ transform:rotate(10deg) scale(1.15); } 94%{ transform:rotate(-4deg); } }
@keyframes icoFoguete{ 0%,65%,100%{ transform:none; } 80%{ transform:translate(3px,-3px); } 88%{ transform:translate(-1px,1px); } }
.btn--participar:hover{ box-shadow:0 14px 38px rgba(18,239,0,.5); }
.btn--patrocinar:hover{ box-shadow:0 14px 38px rgba(12,200,244,.5); }

.btn--grande{ padding:18px 34px; font-size:16px; gap:10px; }
.btn--grande .ico{ width:22px; height:22px; }
.nav__acoes .btn--participar, .nav__acoes .btn--patrocinar{ box-shadow:0 8px 24px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce){
  .btn--participar::after, .btn--patrocinar::after, .btn--participar .ico, .btn--patrocinar .ico{ animation:none; }
}

/* faixa escura dentro da seção clara: volta o texto para branco */
.tema__faixa .block__title{ color:#fff; }
.tema__faixa .accent{ background:linear-gradient(90deg,var(--azul-claro),var(--verde)); -webkit-background-clip:text; background-clip:text; }

/* idiomas ganham fundo próprio para não sumir sobre a seção clara */
.nav__langs{ padding:6px 10px; border-radius:999px; background:rgba(4,22,72,.82); border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.nav__langs button{ text-shadow:none; }

/* tela 3 (desafio): botões clicáveis dentro do herói */
.caption--desafio .cta-row{ margin-top:calc(var(--gap-texto) * 1.3); }
.caption--desafio p b{ color:#fff; }

/* --- tema 2027: KV grande no fundo --------------------------------- */
.tema__palco{
  position:relative; isolation:isolate;
  min-height:clamp(640px,100vh,1000px);
  max-width:1600px; margin:0 auto;
  padding:var(--gap-secao) var(--pad-x) calc(var(--gap-secao) * .7);
  display:flex; flex-direction:column; justify-content:center;
}
.tema__kv{
  position:absolute; z-index:-2; pointer-events:none;
  right:-14%; top:0; bottom:0; transform-origin:70% 50%;   /* altura toda da seção; sangra à direita para o rosto ficar ao lado do texto */
  height:100%; width:auto; max-width:none;
  animation:temaDeriva 16s ease-in-out infinite;
}
/* véu: claro à esquerda (texto), some à direita (arte) */
.tema__veu{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg,#f7faff 0%,rgba(247,250,255,.94) 33%,rgba(247,250,255,.4) 44%,rgba(247,250,255,0) 52%),
    linear-gradient(0deg,#eef4ff 0%,rgba(238,244,255,0) 22%);
}
.tema__txt{
  width:100%; max-width:calc(var(--largura) - var(--pad-x) * 2); margin:0 auto;
}
.tema__txt > *{ max-width:540px; }
.tema__txt .tema__logo{ width:clamp(120px,11vw,160px); }
.tema__txt .block__title{ font-size:clamp(34px,5vw,64px); }
.tema__pilares{
  width:100%; max-width:calc(var(--largura) - var(--pad-x) * 2); margin:var(--gap-bloco) auto 0;
}
.tema__pilares li{ background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
@keyframes temaDeriva{
  0%,100%{ transform:none; }
  50%{ transform:translate(-14px,-1%) scale(1.02); }
}
@media (min-width:861px) and (max-width:1180px){
  .tema__kv{ right:-8%; }
  .tema__txt > *{ max-width:460px; }
}
@media (max-width:860px){
  .tema__palco{ min-height:0; padding-bottom:calc(var(--gap-secao) * .5); }
  /* no celular a arte vira fundo do topo, atrás do título, bem suave */
  /* no celular a arte sai do fundo e entra inteira depois dos pilares */
  .tema__kv{ position:relative; order:3; z-index:0; right:auto; top:auto; transform:none;
    width:calc(100% + var(--pad-x)); max-width:520px; height:auto; margin:var(--gap-bloco) auto 0; animation:temaFlutua 9s ease-in-out infinite; }
  .tema__veu{ display:none; }
  .tema__txt{ order:1; } .tema__pilares{ order:2; }
}
@media (prefers-reduced-motion: reduce){ .tema__kv{ animation:none; } }

/* --- logos: movimento contínuo depois da entrada ------------------- */
/* 25 anos: a onda respira, o disco pulsa de leve e o 2027 brilha */
:is(.caption.is-vista, .site-footer__brand.is-in) > .lockup--c27 .lg-onda{
  animation:c27Onda 1s cubic-bezier(.2,.9,.3,1) .85s both, c27Mare 4.5s ease-in-out 2.4s infinite;
}
:is(.caption.is-vista, .site-footer__brand.is-in) > .lockup--c27 .lg-simbolo{
  animation:c27Gira .9s cubic-bezier(.34,1.3,.5,1) .6s both, c27Pulso 6s ease-in-out 2.6s infinite;
}
:is(.caption.is-vista, .site-footer__brand.is-in) > .lockup--c27 .lg-ano{
  animation:lockupAno .6s cubic-bezier(.34,1.5,.5,1) 1.7s both, c27Brilho 5s ease-in-out 3s infinite;
}
@keyframes c27Mare{ 0%,100%{ transform:none; } 50%{ transform:translateY(-3.5%) scaleY(1.06); } }
@keyframes c27Pulso{ 0%,100%{ transform:none; } 50%{ transform:scale(1.035); } }
@keyframes c27Brilho{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } }

/* ícone do menu: onda e estrelas em loop leve (34px: repintura barata) */
.marca-c .lg-onda{ animation:c27Mare 4.5s ease-in-out 1.5s infinite; }
.marca-c .lg-estrela:nth-of-type(3n){
  animation:c27Estrela .4s ease calc(.7s + var(--i) * 35ms) both,
            c27Pisca 3.6s ease-in-out calc(1.8s + var(--i) * 260ms) infinite;
}
.marca-c .lg-aro{ animation:c27Estrela .6s cubic-bezier(.34,1.3,.5,1) .1s both, c27Aro 8s linear 1s infinite; }
@keyframes c27Aro{ to{ transform:rotate(360deg); } }

.lockup--rodape{ width:min(70vw,240px); margin-bottom:14px; }
@media (prefers-reduced-motion: reduce){ .lockup--rodape *{ animation:none !important; opacity:1 !important; } }

/* celular: botões de conversão empilhados com a mesma largura */
@media (max-width:560px){
  .cta-row .btn--grande{ flex:1 1 100%; justify-content:center; }
}

/* painel do celular/tablet: a regra do desktop (.nav.is-open .nav__acoes,
   max-height:70px) vencia aqui e espremia os dois botões empilhados */
.nav.is-open .nav__painel .nav__acoes{ max-height:none; }
/* no painel os idiomas voltam a ser só texto, sem a pílula do desktop */
.nav__painel .nav__langs{ background:none; border:0; padding:0; -webkit-backdrop-filter:none; backdrop-filter:none; align-self:flex-start; }

/* --- CTA final dentro da faixa do olho ------------------------------ */
.tema__faixa .cta-row{ margin-top:calc(var(--gap-texto) * 1.2); }
.evento-info{
  display:inline-flex; align-items:center; flex-wrap:nowrap; gap:14px;
  margin:var(--gap-texto) 0 0; padding:7px 20px 7px 7px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:clamp(13.5px,1.25vw,16px); color:rgba(255,255,255,.88); white-space:nowrap;
}
.tema__faixa-txt > .evento-info{ max-width:none; }
.evento-info__item{ display:inline-flex; align-items:center; gap:10px; }
.evento-info__sep{ width:1px; height:22px; background:rgba(255,255,255,.25); flex:none; }
.evento-info b{ color:#fff; font-weight:700; }
.evento-info__ico{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; }
.evento-info__ico .ico{ width:19px; height:19px; }
.evento-info__ico--data{ background:linear-gradient(135deg,var(--verde),var(--verde-escuro)); color:var(--marinho); box-shadow:0 6px 20px rgba(18,239,0,.35); }
.evento-info__ico--local{ background:linear-gradient(135deg,var(--azul-claro),var(--azul)); color:#fff; box-shadow:0 6px 20px rgba(12,200,244,.35); }
.evento-info__ico--data .ico{ animation:icoData 3.2s ease-in-out infinite; transform-origin:50% 20%; }
.evento-info__ico--local .ico{ animation:icoPin 2.4s ease-in-out .6s infinite; }
@keyframes icoData{ 0%,72%,100%{ transform:none; } 80%{ transform:rotateX(70deg); } 88%{ transform:none; } }
@keyframes icoPin{ 0%,60%,100%{ transform:none; } 70%{ transform:translateY(-4px); } 80%{ transform:none; } 86%{ transform:translateY(-1.5px); } }
/* celular: não cabe numa linha; a pílula vira um cartão com as duas linhas */
@media (max-width:640px){
  .evento-info{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; white-space:normal; border-radius:22px; padding:8px 16px 8px 8px; }
  .evento-info__sep{ width:100%; height:1px; }
}
@media (prefers-reduced-motion: reduce){ .evento-info__ico .ico{ animation:none; } }
/* faixa com mais ar agora que ela fecha a página */
.tema__faixa-txt{ padding-top:clamp(56px,8vw,110px); padding-bottom:clamp(56px,8vw,110px); }

/* olho: zoom guiado pelo scroll (o JS escreve --olho, de 0 a 1) */
.tema__olho{ transform:translateY(-50%) scale(calc(1 + var(--olho, 0) * .22)); transform-origin:70% 45%; will-change:transform; }
@media (prefers-reduced-motion: reduce){ .tema__olho{ transform:translateY(-50%); } }

/* --- superbanner (Google Ad Manager) na tela 2 ---------------------- */
.ad-slot{ pointer-events:auto; margin-top:calc(var(--gap-texto) * 1.2); max-width:100%; }
.caption > .ad-slot{ align-self:flex-start; }
.ad-slot > div{ max-width:100%; }
.ad-slot > div:empty{ display:none; }
.ad-mobile{ display:none; }
@media (max-width:809px){
  .ad-desk{ display:none !important; }
  .ad-mobile{ display:block; }
}

/* --- patrocinadores 2026 --------------------------------------------- */
.patro{
  background:linear-gradient(180deg,#f7faff 0%,#eef4ff 100%); color:var(--marinho);
  padding:var(--gap-secao) var(--pad-x); text-align:center;
}
.patro .kicker{ color:var(--azul); justify-content:center; }
.patro .kicker::before{ background:var(--verde-escuro); }
.patro .block__title{ color:var(--marinho); }
.patro .accent{ background:linear-gradient(90deg,var(--azul),var(--verde-escuro)); -webkit-background-clip:text; background-clip:text; }
.patro__img{
  margin:var(--gap-bloco) auto 0; max-width:760px;
  background:#fff; border-radius:24px; padding:clamp(12px,2.5vw,32px);
  box-shadow:0 30px 80px rgba(1,81,219,.12); border:1px solid rgba(1,81,219,.08);
}
.patro__img img{ display:block; width:100%; height:auto; }