/* ============================================================
   EVENTO PRESENCIAL · 08/09 · Marca e valor percebido
   Soberana · mobile-first · mono-azul sobre navy
   Tipografia: Plus Jakarta Sans (marca) + Bodoni Moda (acento)
   Pesos delicados: títulos em 500, acento em serifa italic 400
   ============================================================ */
:root{
  /* base mais funda que o Galaxy Blue da casa (#010B23), mono-azul */
  --ink-900:#010A22; --ink-850:#03123A; --ink-800:#061C4C; --ink-700:#0A2A6B;
  /* azuis: acento no Highlight Blue oficial (#59A9FF); corpo mantém o suave */
  --blue-600:#0050C3; --blue-500:#1E6BE0; --blue-400:#3E8BF5; --blue-300:#59A9FF;
  --blue-200:#FFFFFF; --blue-150:#FFFFFF; --sky:#84CAFF; --ice-100:#EEF4FC; --ice-200:#DFE9F7;
  --paper:#F4F7FC; --line-dk:rgba(133,202,255,.16); --line-lt:rgba(6,30,76,.10); --white:#FFF;
  /* Stack exata do design system Nuvemshop */
  --sans:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Helvetica Neue", arial, sans-serif;
  /* Display desta LP: Bodoni Moda (decisao do time). O DS traz Ivy Presto como
     display da marca, mas ela e licenciada e nao esta no portal — aqui a Bodoni
     e a escolha assumida, nao um fallback. */
  --serif:'Bodoni Moda', Georgia, serif;
  --pad-x:30px; --sec-y:72px; --maxw:1120px;
  --r-lg:24px; --r-md:18px; --r-sm:12px; --r-pill:999px;
  --sh-soft:0 18px 50px rgba(0,8,34,.42); --sh-card:0 16px 40px rgba(4,22,60,.09);
  --sh-glow:0 0 0 1px rgba(133,202,255,.5), 0 14px 44px rgba(30,107,224,.42);
  /* vidro e brilho */
  --glass:rgba(6,20,54,.46); --glass-bd:rgba(133,202,255,.20);
  --glow-cta:0 0 0 1px rgba(133,202,255,.55), 0 16px 46px rgba(89,169,255,.4);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
/* FONTE DA MARCA — Plus Jakarta Sans em tudo, inclusive nos campos do formulário
   do HubSpot, que não herdam a fonte do body por padrão (o base-next-v2 resolve
   isso no layout; aqui o template é standalone e precisa declarar). */
body,button,input,select,textarea,optgroup,.hs-form,.hs-form *,.hbspt-form,.hbspt-form *{font-family:var(--sans)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--ink-900);color:var(--white);line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--blue-400);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.section{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}

/* --- Tipografia: delicada --- */
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-300);display:block;margin-bottom:12px}
h1,h2,h3{font-weight:600;line-height:1.14;letter-spacing:-.022em;text-wrap:balance}
p{text-wrap:pretty}
/* Acento serifa italic: semibold e em linha própria (separado do Jakarta) */
.ac,.alc,.win{font-family:var(--serif);font-weight:600;font-style:italic;letter-spacing:0;display:block}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:600;font-size:1rem;letter-spacing:-.005em;padding:15px 26px;border-radius:var(--r-pill);white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s var(--ease);will-change:transform}
/* Primário: branco de alto contraste sobre navy (padrão dark da marca), azul sobre claro */
.btn-primary{background:#fff;color:var(--blue-600);box-shadow:0 10px 30px rgba(0,6,26,.42)}
.btn-primary:hover{background:#EAF3FF;transform:translateY(-2px);box-shadow:var(--glow-cta)}
.light .btn-primary,.modal__panel .btn-primary{background:var(--blue-600);color:#fff;box-shadow:0 8px 26px rgba(0,80,195,.38)}
.light .btn-primary:hover,.modal__panel .btn-primary:hover{background:var(--blue-500);color:#fff;box-shadow:var(--sh-glow)}
.btn-ghost{background:rgba(255,255,255,.04);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(133,202,255,.34);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(133,202,255,.08);box-shadow:inset 0 0 0 1.5px rgba(133,202,255,.8);transform:translateY(-2px)}
.btn-block{width:100%}
.btn-sm{padding:9px 18px;font-size:.85rem}

/* --- STICKY / MOBILE CTA --- */
/* STICKY CTA — duas metades do mesmo padrão: barra no topo no desktop (>=860px)
   e barra inferior no mobile (<860px). As duas entram quando o hero sai de vista.
   visibility:hidden enquanto escondidas para o botão fora da tela não continuar
   focável pelo Tab nem anunciado por leitor de tela. */
.stickybar{position:fixed;top:0;left:0;width:100%;z-index:60;background:rgba(3,22,59,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dk);transform:translateY(-100%);transition:transform .4s var(--ease),visibility .4s;visibility:hidden;display:none}
.stickybar.show{transform:translateY(0);visibility:visible}
.stickybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px var(--pad-x);max-width:var(--maxw);margin:0 auto}
.stickybar__left{display:flex;align-items:center;gap:14px;min-width:0}
.stickybar__logo{font-weight:600;font-size:.92rem;letter-spacing:-.01em;white-space:nowrap}
.stickybar__seats{font-size:.8rem;color:var(--blue-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickybar .btn{padding:10px 20px;font-size:.9rem}
@media(min-width:860px){.stickybar{display:block}}
.mobilecta{position:fixed;left:0;bottom:0;width:100%;z-index:60;padding:12px var(--pad-x) calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(0,16,46,.99) 55%,rgba(0,16,46,.92) 80%,rgba(0,16,46,0));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translateY(120%);transition:transform .4s var(--ease),visibility .4s;visibility:hidden}
.mobilecta.show{transform:translateY(0);visibility:visible}
/* alvo de toque confortável na barra inferior (>=48px de altura) */
.mobilecta .btn{padding:15px 22px;font-size:1rem;min-height:50px}
.mobilecta__seats{text-align:center;font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--sky);margin-bottom:8px}
@media(min-width:860px){.mobilecta{display:none}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;padding-top:34px;padding-bottom:40px;overflow:hidden;background:var(--ink-900)}
/* Mobile-first: a foto vive numa BANDA no topo (sala cheia — teto azul, plateia),
   fundindo na navy sólida embaixo, que sustenta o texto com contraste total. */
.hero__bg{position:absolute;top:0;left:0;right:0;height:36svh;z-index:0;overflow:hidden}
/* ENQUADRAMENTO POR EDICAO: object-position saiu do CSS e virou variavel. Cada
   foto tem o assunto em lugar diferente (palco a direita, plateia ao centro) e
   antes ajustar isso obrigava a mexer no arquivo COMPARTILHADO, mudando o
   enquadramento de todas as edicoes de uma vez. Agora a pagina passa
   style="--hero-pos-desk:..." no <header> e o default continua servindo. */
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,50% 50%)}
.hero__grad{position:absolute;inset:0;background:
  linear-gradient(180deg,
    rgba(1,10,34,.5) 0%,
    rgba(1,10,34,.16) 16%,
    rgba(1,10,34,.12) 42%,
    rgba(1,10,34,.46) 68%,
    rgba(1,10,34,.9) 88%,
    var(--ink-900) 100%)}
/* Brilho azul que ecoa a luz do palco, sem competir com o texto */
.hero__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(56% 44% at 80% 29%,rgba(89,169,255,.32),transparent 60%);mix-blend-mode:screen}
/* ===== VIDEO DE FUNDO DO HERO (v2.5.0) =====
   ARQUITETURA: o video NAO substitui a foto, ele entra POR CIMA dela. Essa e a
   decisao que preserva o Core Web Vitals: a foto continua sendo o elemento de
   LCP (segue com preload e fetchpriority=high no <head>), e o video e melhoria
   progressiva — carrega depois do load, entra em fade e, se nao carregar, a
   pagina continua sendo exatamente a que esta no ar hoje.
   Por isso tambem nao ha poster no <video>: o poster seria um segundo download
   da mesma imagem que ja esta atras dele.
   A classe .is-video quem poe e o next-evento.js, no evento 'playing' — nunca
   antes. Assim o degrade mais duro (que o video exige) so entra quando ha video,
   e o estado sem video nao fica escuro sem motivo.
   O blur nao e estetica gratuita: o aftermovie tem texto de telao no quadro, e
   sem ele o H1 disputa leitura com a letra projetada atras. Mas ele estava em
   1,5px e somava com duas outras perdas — a compressao do arquivo e o upscale
   do 1920 numa tela retina — deixando o video visivelmente mole. Caiu para
   0,6px, o suficiente para tirar o fio da letra projetada sem passar a
   impressao de imagem de baixa qualidade; o resto do trabalho de separar fundo
   e texto ficou com o scrim, que e onde ele nao custa nitidez.
   O scale de 1,01 existe para o blur nao mostrar a borda desfocada do quadro. */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--hero-pos,50% 50%);
  opacity:0;transition:opacity 1.1s var(--ease);
  filter:saturate(.94) contrast(1.02) blur(.6px);transform:scale(1.01)}
.hero.is-video .hero__video{opacity:1}
.hero.is-video .hero__grad{background:
  linear-gradient(180deg,
    rgba(1,10,34,.74) 0%,
    rgba(1,10,34,.5) 34%,
    rgba(1,10,34,.62) 62%,
    rgba(1,10,34,.92) 88%,
    var(--ink-900) 100%)}
.hero__in{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;max-width:var(--maxw);margin:0 auto;width:100%;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.hero__topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}
.brandline{display:inline-flex;align-items:center}
.logo{height:22px;width:auto;color:#fff;display:block}
.foot__brand .logo{height:20px}
.brandline .dot{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#3E8BF5,#0050C3);box-shadow:0 4px 14px rgba(0,80,195,.5)}
.brandline .sub{font-weight:400;color:var(--blue-200);font-size:.9rem}
.tag-presencial{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-150);padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line-dk);white-space:nowrap}
.hero__body{padding-top:calc(36svh - 26px);padding-bottom:8px;text-shadow:0 1px 2px rgba(1,10,34,.4),0 2px 34px rgba(1,10,34,.72)}
.hero__ctas .btn-primary{text-shadow:none}
/* align-self:flex-start conserta a pilula esticada. A causa: .hero__body virou
   flex column para centralizar o conteudo (correcao do vao), e item de flex herda
   align-items:stretch — entao a pilula, que era inline-block, passou a ocupar a
   largura inteira da coluna. O inline-block nao vale mais nada aqui; quem manda e
   o align-self. Fora de contexto flex a propriedade e inofensiva. */
.hero__tag{align-self:flex-start;display:inline-block;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-150);padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--glass-bd);background:rgba(133,202,255,.05);margin-bottom:16px}
.hero__tag-date{font-weight:600}
.hero__tag-date::before{content:" · ";font-weight:600}
.hero h1{font-size:clamp(1.7rem,6.4vw,2.4rem);max-width:100%;margin-bottom:14px;letter-spacing:-.03em;line-height:1.09;text-wrap:balance}
.hero h1 .alc{margin-top:2px}
.hero h1 .alc{color:var(--blue-300)}
.hero__sub{font-size:clamp(.95rem,2.1vw,1.05rem);color:var(--blue-200);max-width:100%;line-height:1.5;margin-bottom:18px;font-weight:400}
.logistics{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:24px}
.logi{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--blue-150);font-weight:600}
.logi svg{width:17px;height:17px;flex:none;color:var(--blue-400)}

/* readout compacto de ocupação */
.occ{display:flex;flex-direction:column;align-items:center;gap:11px;border:1px solid var(--glass-bd);border-radius:var(--r-md);padding:14px 16px;margin-bottom:0;width:100%;max-width:520px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 34px rgba(0,6,26,.4),inset 0 1px 0 rgba(255,255,255,.07);text-align:center}
.occ__meta{width:100%;min-width:0;text-align:center}
.occ__bar{width:100%;height:5px;border-radius:3px;background:rgba(126,178,247,.16);overflow:hidden}
.occ__bar>i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#3E8BF5,#59A9FF);box-shadow:0 0 10px rgba(89,169,255,.55);width:0;transition:width .9s var(--ease)}
.occ__state{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-300);display:inline-block;margin-bottom:3px}
.occ__state.is-last{color:#fff;background:var(--blue-600);padding:3px 9px;border-radius:var(--r-pill);animation:pulse 2.6s var(--ease) infinite}
.occ__state.is-wait{color:#fff;background:var(--ink-700);padding:3px 9px;border-radius:var(--r-pill)}
.occ__count{font-size:.94rem;color:var(--blue-150)}
.occ__count b{color:#fff;font-weight:600}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(62,139,245,.5)}50%{box-shadow:0 0 0 6px rgba(62,139,245,0)}}
/* Aviso de urgencia (entra em D-20 via JS, atributo [hidden]) */
.occ__rush{width:100%;margin-top:2px;font-size:.74rem;line-height:1.35;font-weight:600;color:var(--sky);display:flex;align-items:center;justify-content:center;gap:7px;text-align:center}
.occ__rush[hidden]{display:none}
.occ__rush::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--sky);box-shadow:0 0 0 3px rgba(132,202,255,.22);animation:pulse 2.6s var(--ease) infinite}
.light .occ__rush{color:var(--blue-600)}
.light .occ__rush::before{background:var(--blue-600);box-shadow:0 0 0 3px rgba(0,80,195,.16)}

.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px;margin-bottom:18px}
.hero__ctas .btn{padding:13px 22px;font-size:.95rem}
.btn__arw{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn-ghost:hover .btn__arw{transform:translateX(3px)}
.hero__micro{font-size:.82rem;color:var(--blue-300);margin-top:15px;display:flex;align-items:center;gap:8px}
.hero__micro svg{width:15px;height:15px;color:var(--blue-400)}
@media(max-width:479px){.hero__ctas{flex-direction:column;align-items:stretch}.hero__ctas .btn,.playbook__cta .btn,.final .btn{width:100%}}


/* ============================================================
   O CONTEUDO — dobra de cards, ANTES da programacao
   Herdeira do layout de 3 cards da antiga "A ideia central", que saiu do
   template na rodada 1. Voltou como dobra generica (content_cards) por um
   motivo de conversao: dizer o QUE sera apresentado, e nao so em que horario.
   POSICAO: vem DEPOIS da programacao. A ordem inversa foi testada e a decisao do
   time e que a autoridade do palestrante abre melhor do que a ementa — o Diego e
   a atracao, e a agenda mencionando "as quatro alavancas" prepara esta dobra, que
   entao detalha cada uma. Ver a nota de fundo em .conteudo sobre a separacao
   visual que essa ordem exigiu.
   ============================================================ */
/* A ORDEM MUDOU: a programacao passou para antes do conteudo, e isso encostou
   duas dobras navy uma na outra (.conteudo e .expsec). A alternancia navy -> azul
   -> navy era o que sinalizava "nova dobra"; sem ela, conteudo e experiencia
   pareceriam um bloco unico gigante — o mesmo problema apontado na rodada 3.
   A separacao volta por dois meios em vez do fundo inteiro: um brilho suave no
   TOPO do conteudo, que le como a luz da dobra azul acima escorrendo para dentro,
   e um fio de 1px no topo da experiencia, que marca o corte de forma limpa. */
.conteudo{background:radial-gradient(126% 64% at 50% 0%,rgba(62,139,245,.13),transparent 62%),var(--ink-900)}
.conteudo h2{font-size:clamp(1.8rem,5.2vw,2.7rem);margin-bottom:16px}
.conteudo h2 .ac{color:var(--blue-300)}
.conteudo__sub{color:var(--blue-200);font-size:1.02rem;max-width:78ch;margin-bottom:36px;font-weight:400}
.ct-grid{display:grid;gap:14px;grid-template-columns:1fr}
.ct{position:relative;display:flex;flex-direction:column;border-radius:var(--r-md);padding:22px 20px 24px;background:linear-gradient(180deg,rgba(10,42,107,.26),rgba(6,20,54,.34));box-shadow:inset 0 0 0 1px var(--line-dk);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ct:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(133,202,255,.42),0 20px 46px rgba(0,8,34,.55)}
/* CABECA DO CARD: icone + numero da etapa na mesma linha.
   O icone da leitura instantanea do tema (planejar / converter / adquirir /
   reter); o numero preserva a informacao de SEQUENCIA — as quatro alavancas
   sao uma ordem, nao uma lista de opcoes. O numero saiu de badge azul solido
   para numeral grande e translucido: badge + icone lado a lado brigavam por
   atencao, e quem tem que ganhar essa briga e o icone. */
.ct__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.ct__ico{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;color:var(--sky);background:linear-gradient(160deg,rgba(89,169,255,.20),rgba(0,80,195,.14));box-shadow:inset 0 0 0 1px var(--glass-bd);transition:color .35s var(--ease),background .35s var(--ease)}
.ct__ico svg{width:21px;height:21px}
.ct:hover .ct__ico{color:#fff;background:linear-gradient(160deg,rgba(89,169,255,.34),rgba(0,80,195,.24))}
.ct__n{font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:rgba(133,202,255,.30)}
.ct__t{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;margin-bottom:7px;text-wrap:balance}
.ct__d{color:var(--blue-200);font-size:.88rem;line-height:1.5;font-weight:400;text-wrap:pretty}
/* TOPICOS: o paragrafo de ~180 caracteres por card deixava a dobra macante
   numa coluna de ~260px. Virou lista escaneavel de 3 itens curtos — a pessoa
   le em diagonal e ainda captura o conteudo. */
.ct__list{list-style:none;margin:14px 0 0;display:flex;flex-direction:column;gap:7px}
.ct__list li{position:relative;padding-left:16px;font-size:.84rem;line-height:1.42;color:var(--blue-200);font-weight:400}
.ct__list li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;background:var(--blue-400);box-shadow:0 0 0 3px rgba(62,139,245,.14)}
/* "Voce sai com" — o resultado de cada bloco, ancorado no rodape do card
   (margin-top:auto) para que os quatro cards alinhem essa linha mesmo com
   titulos e listas de alturas diferentes. E o que transforma a dobra em
   argumento de inscricao em vez de sumario de conteudo. */
.ct__out{margin-top:auto;padding-top:16px}
.ct__out-in{display:flex;align-items:flex-start;gap:8px;padding-top:14px;border-top:1px solid var(--line-dk)}
.ct__out svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--sky)}
.ct__out-l{display:block;font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-300);margin-bottom:3px}
.ct__out-t{display:block;font-size:.83rem;line-height:1.4;color:#fff;font-weight:600}
/* Nota pratica (ex.: "traga o notebook"). Vem DEPOIS dos cards porque e
   logistica de participacao, nao conteudo — e no hero competiria com a
   escassez, que e o que move a inscricao. */
.conteudo__note{display:flex;align-items:flex-start;gap:10px;margin-top:28px;padding:14px 16px;border-radius:var(--r-sm);background:rgba(133,202,255,.06);box-shadow:inset 0 0 0 1px var(--glass-bd);font-size:.9rem;line-height:1.5;color:var(--blue-150);font-weight:600}
.conteudo__note svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--sky)}
/* GRADE DE CONTEUDO — mesma tecnica da grade de speakers: quantity queries
   para nunca sobrar linha orfa. 2 cards -> 2 | 3 -> 3 | 4 -> 2x2 no tablet e
   4 numa linha a partir de 1040px (a 760px, 4 colunas dariam ~170px e a copy
   quebraria em uma palavra por linha) | 5 ou 6 -> 3 por linha.
   Fallback em browser sem :has = auto-fit, que ja evita a linha orfa. */
@media(min-width:760px){
  .ct-grid{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
  @supports selector(:has(*)){
    .ct-grid:has(.ct:nth-last-child(1):first-child){grid-template-columns:minmax(0,540px)}
    .ct-grid:has(.ct:nth-last-child(2):first-child),
    .ct-grid:has(.ct:nth-last-child(4):first-child){grid-template-columns:repeat(2,minmax(0,1fr))}
    .ct-grid:has(.ct:nth-last-child(3):first-child),
    .ct-grid:has(.ct:nth-last-child(5):first-child),
    .ct-grid:has(.ct:nth-last-child(6):first-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  }
}
@media(min-width:1040px){
  @supports selector(:has(*)){
    .ct-grid:has(.ct:nth-last-child(4):first-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  }
}

/* ===== CENA DA DOBRA DE CONTEUDO — IA aplicada ao e-commerce =====
   Irma da cena do debate da edicao do Rio, e de proposito: SVG inline, sem
   biblioteca, com o assunto da dobra DESENHADO em vez de ilustrado por banco de
   imagem. O desenho e quatro superficies de dado do e-commerce (trafego, oferta,
   conversao, retencao) alimentando um nucleo de IA no centro, que devolve a
   leitura pelo feixe de luz. O movimento e o minimo que sustenta a metafora: o
   dado ANDA pelas rotas, os nos PISCAM em cadencia, as placas FLUTUAM alguns
   pixels. Nada gira, nada salta, nada compete com o H2 ao lado.
   Vive AQUI, no compartilhado, porque o layout de duas colunas e do template.
   Edicao sem cena passa content_cena = false e a coluna unica volta sozinha. */
.conteudo__grid{display:grid;gap:28px;align-items:center}
@media(min-width:1040px){.conteudo__grid{grid-template-columns:1.04fr .96fr;gap:44px}}
/* Dentro do grid o subtitulo nao precisa dos 78ch: a medida ja e a coluna. Sem
   isso ele estica a coluna de texto e empurra a cena para baixo por volta de
   1100px. O respiro para os cards passa a ser do grid, nao do paragrafo. */
.conteudo__grid .conteudo__sub{margin-bottom:0;max-width:62ch}
.conteudo__grid+.ct-grid{margin-top:34px}
@media(min-width:860px){.conteudo__grid+.ct-grid{margin-top:52px}}
.cena-ia{max-width:520px;margin:0 auto;width:100%}
.cena-ia svg{display:block;width:100%;height:auto;overflow:visible}
/* SUPERFICIES: topo em degrade frio e uma face lateral mais funda que faz o
   volume. As duas juntas leem como placa; so o topo leria como mancha. */
.cena-ia__topo{fill:url(#iaPlacaTopo)}
.cena-ia__lado{fill:#080F1E;opacity:.9}
.cena-ia__borda{fill:none;stroke:rgba(133,202,255,.28);stroke-width:1}
/* Ladrilhos de dado sobre a placa. Dois tons: a maioria neutra e uma minoria
   azul acesa — e a proporcao que faz parecer dado, e nao decoracao. */
.cena-ia__tile{fill:rgba(133,202,255,.14)}
.cena-ia__tile--on{fill:rgba(89,169,255,.5)}
.cena-ia__tile--hi{fill:rgba(132,202,255,.8)}
/* Bolhas de icone: mesmo vocabulario dos pins da cena do Rio. */
.cena-ia__pin{filter:drop-shadow(0 10px 18px rgba(0,6,26,.55))}
.cena-ia__pinbase{fill:rgba(14,22,38,.92);stroke:#59A9FF;stroke-width:2}
.cena-ia__icone{stroke:#BFE0FF;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* ROTAS: o rastro largo e borrado por baixo, o tracejado por cima, e o ponto que
   percorre. Os tres saem do MESMO <path> por <use>, entao desenho e animacao
   nunca saem de sincronia. */
.cena-ia__brilho{fill:none;stroke:#59A9FF;stroke-width:8;stroke-linecap:round;opacity:.26;filter:url(#iaGlow)}
.cena-ia__rota{fill:none;stroke:#BFE0FF;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:7 11;
  opacity:.85;animation:ia-anda 1.6s linear infinite}
@keyframes ia-anda{to{stroke-dashoffset:-18}}
.cena-ia__ponto{fill:#fff;filter:url(#iaGlow)}
/* NUCLEO: a moldura respira em 4,8s. transform-box:fill-box para a escala sair
   do centro do hexagono e nao da origem do viewBox. */
.cena-ia__frame{fill:rgba(10,30,68,.62);stroke:rgba(133,202,255,.42);stroke-width:1.4;
  transform-box:fill-box;transform-origin:center;animation:ia-respira 4.8s var(--ease) infinite}
@keyframes ia-respira{0%,100%{transform:scale(1);stroke-opacity:.42}50%{transform:scale(1.028);stroke-opacity:.9}}
.cena-ia__sinapse{stroke:rgba(133,202,255,.34);stroke-width:1}
.cena-ia__no{fill:#BFE0FF;animation:ia-no 3.4s var(--ease) infinite}
/* Os atrasos negativos espalham os nos pela fase da animacao sem esperar o
   primeiro ciclo: o desenho ja nasce com a cadencia em andamento. */
.cena-ia__no:nth-of-type(2){animation-delay:-.4s}
.cena-ia__no:nth-of-type(3){animation-delay:-.9s}
.cena-ia__no:nth-of-type(4){animation-delay:-1.3s}
.cena-ia__no:nth-of-type(5){animation-delay:-1.8s}
.cena-ia__no:nth-of-type(6){animation-delay:-2.3s}
.cena-ia__no:nth-of-type(7){animation-delay:-2.8s}
@keyframes ia-no{0%,100%{opacity:.34;r:3}50%{opacity:1;r:3.8}}
.cena-ia__feixe{fill:url(#iaFeixe);pointer-events:none}
/* Flutuacao das placas: amplitude de 4px e ciclos primos entre si, para as
   quatro nunca subirem juntas — sincronia faria a cena inteira pulsar. */
.cena-ia__placa{animation:ia-flutua 7s var(--ease) infinite}
.cena-ia__placa--2{animation-duration:8.2s;animation-delay:-1.4s}
.cena-ia__placa--3{animation-duration:6.4s;animation-delay:-3.1s}
.cena-ia__placa--4{animation-duration:9s;animation-delay:-4.6s}
@keyframes ia-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* Quem pediu menos movimento ve o mesmo desenho parado. O ponto que percorre sai
   de cena porque animateMotion e SVG e nao obedece a prefers-reduced-motion. */
@media (prefers-reduced-motion:reduce){
  .cena-ia__rota{animation:none}
  .cena-ia__ponto{display:none}
  .cena-ia__frame,.cena-ia__no,.cena-ia__placa{animation:none}
  .cena-ia__no{opacity:.9}
}

/* ============================================================
   A PROGRAMACAO — dobra em azul da marca (contraste com as navy vizinhas)
   Gradiente "Blue Primary" do design system: Nimbus Blue #0050C3 -> #00298F
   -> #080558 -> Space Black #010B23.
   ============================================================ */
.playbook{background:radial-gradient(203.73% 209.35% at 3.75% 130.93%,#0050C3 0%,#00298F 29.81%,#080558 65.38%,#010B23 100%)}
.playbook h2{font-size:clamp(1.8rem,5.2vw,2.7rem);margin-bottom:16px}
/* Cards ganham fundo Space Black translucido para destacar sobre o azul */
.playbook .spk{background:linear-gradient(180deg,rgba(1,11,35,.52),rgba(1,11,35,.72))}
.playbook .spk:hover{box-shadow:inset 0 0 0 1px rgba(133,202,255,.5),0 20px 46px rgba(0,8,34,.6)}
.playbook .speakers__intro{border-top-color:rgba(238,244,250,.22)}
.playbook__sub{color:var(--blue-200);font-size:1.02rem;max-width:78ch;margin-bottom:40px;font-weight:400}
/* AGENDA — painel escuro (Space Black) dentro da dobra azul: o contraste separa
   a linha do tempo dos cards e dá o respiro que faltava entre as duas coisas.
   O guia pede timeline HORIZONTAL; o mobile mantém o trilho vertical, que é o
   único formato legível em tela estreita. */
.agenda{margin-top:84px;padding:44px 26px 40px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#010B23 0%,#03123A 100%);
  box-shadow:inset 0 0 0 1px var(--line-dk),0 24px 60px rgba(0,6,26,.42)}
.agenda__title{font-size:clamp(1.55rem,4.4vw,2.1rem);margin-bottom:6px}
.agenda__sub{color:var(--blue-200);font-size:.96rem;font-weight:400;max-width:62ch}
@media(min-width:760px){.agenda{margin-top:96px;padding:52px 40px 46px}}
.timeline{position:relative;margin-left:8px;padding-left:26px;margin-top:34px}
.timeline::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,transparent,var(--line-dk) 8%,var(--line-dk) 92%,transparent)}
.tl{position:relative;padding:16px 14px 16px 0;border-radius:var(--r-md);transition:background .35s var(--ease)}
.tl::before{content:"";position:absolute;left:-26px;top:22px;width:9px;height:9px;border-radius:50%;background:var(--blue-400);box-shadow:0 0 0 4px rgba(62,139,245,.16);transform:translateX(-1px);transition:box-shadow .35s var(--ease),background .35s var(--ease)}
.tl:hover{background:radial-gradient(140% 100% at -4% 50%,rgba(89,169,255,.11),transparent 60%)}
.tl:hover .tl__t{color:#fff}
.tl:hover::before{background:var(--sky);box-shadow:0 0 0 5px rgba(62,139,245,.22),0 0 18px rgba(89,169,255,.9)}
.tl__time{font-weight:600;font-size:.8rem;color:var(--blue-300);letter-spacing:.03em;font-variant-numeric:tabular-nums;margin-bottom:4px}
.tl__t{font-size:1.08rem;font-weight:600;margin-bottom:6px;letter-spacing:-.01em}
.tl__d{color:var(--blue-200);font-size:.94rem;line-height:1.55;max-width:56ch;font-weight:400}
.tl__who{margin-top:8px;font-size:.83rem;color:var(--blue-300);font-weight:600}

/* --- Timeline horizontal (>=760px) — até 5 horários por linha; do 6º em diante
       a agenda continua numa nova linha, e cada linha ganha o seu próprio trilho
       (por isso o trilho vive no .tl e não no container: um trilho único no
       container não acompanharia a segunda linha). --- */
@media(min-width:760px){
  .timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:0;row-gap:46px;margin-left:0;padding-left:0;padding-top:46px;margin-top:30px}
  .timeline::before{display:none}
  .tl{padding:0 22px 0 0}
  /* trilho da linha: colado ao da coluna vizinha (column-gap:0) = linha contínua */
  .tl::after{content:"";position:absolute;left:0;right:0;top:-31px;height:2px;background:var(--line-dk)}
  .tl:nth-child(5n+1)::after{background:linear-gradient(90deg,transparent,var(--line-dk) 14%)}
  .tl:nth-child(5n)::after{background:linear-gradient(90deg,var(--line-dk),var(--line-dk) 82%,transparent)}
  .tl:last-child::after{background:linear-gradient(90deg,var(--line-dk),var(--line-dk) 82%,transparent)}
  .tl:nth-child(5n+1):last-child::after{background:linear-gradient(90deg,transparent,var(--line-dk) 14%,var(--line-dk) 82%,transparent)}
  .tl::before{left:0;top:-36px;transform:none}
  .tl:hover{background:none}
  .tl__d{max-width:none;font-size:.88rem;line-height:1.5}
  .tl__t{font-size:1rem}
  .tl__who{font-size:.78rem}
  .tl__time{font-size:.86rem;color:#fff}
}
@media(min-width:1040px){
  .tl{padding-right:30px}
  .tl__d{font-size:.9rem}
}

.speakers{margin-top:56px}
.playbook__cta{margin-top:48px;text-align:center}
.playbook__cta-micro{margin-top:12px;font-size:.78rem;color:var(--blue-300);font-weight:400}
.speakers__intro{padding-top:30px;border-top:1px solid var(--line-dk);text-align:center}
.speakers h3{font-size:1.35rem;margin-bottom:8px;color:var(--blue-300)}
.speakers__sub{color:var(--blue-200);font-size:.92rem;margin:0 auto 26px;max-width:100%;font-weight:400}
.spk-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
.spk{position:relative;border-radius:var(--r-md);overflow:hidden;background:linear-gradient(180deg,rgba(10,42,107,.26),rgba(6,20,54,.34));box-shadow:inset 0 0 0 1px var(--line-dk);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.spk:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(133,202,255,.42),0 20px 46px rgba(0,8,34,.55)}
.spk__photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-800)}
.spk__photo img{width:100%;height:100%;object-fit:cover;object-position:center 16%;transition:transform .5s var(--ease)}
.spk:hover .spk__photo img{transform:scale(1.045)}
.spk__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(2,10,34,.72) 100%)}
.spk__info{padding:15px 16px 19px}
.spk__name{font-weight:600;font-size:1rem;letter-spacing:-.01em}
.spk__role{color:var(--blue-300);font-size:.8rem;font-weight:600;margin:2px 0 8px;min-height:2.5em}
/* Guia: minibio em NO MAXIMO 3 linhas, padronizada. O clamp e a trava visual
   caso alguem cole um texto mais longo direto no HubSpot. */
.spk__contrib{color:var(--blue-200);font-size:.88rem;line-height:1.5;font-weight:400;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* GRADE DE SPEAKERS — se distribui pelo nº de cards (quantity queries).
   4 cards -> 4 numa linha | 5 ou 6 -> 3 por linha | 7-8 -> 4 por linha |
   9 -> 3x3. Sem isso, 6 cards caíam como 4+2 e a segunda linha ficava órfã.
   Fallback (browser sem :has) = auto-fit, que já evita a linha órfã. */
@media(min-width:760px){
  .spk-grid{grid-template-columns:repeat(auto-fit,minmax(212px,1fr));justify-content:center}
  @supports selector(:has(*)){
    .spk-grid:has(.spk:nth-last-child(1):first-child){grid-template-columns:minmax(0,340px)}
    .spk-grid:has(.spk:nth-last-child(2):first-child){grid-template-columns:repeat(2,minmax(0,1fr))}
    .spk-grid:has(.spk:nth-last-child(3):first-child){grid-template-columns:repeat(3,minmax(0,1fr))}
    .spk-grid:has(.spk:nth-last-child(4):first-child){grid-template-columns:repeat(4,minmax(0,1fr))}
    .spk-grid:has(.spk:nth-last-child(5):first-child),
    .spk-grid:has(.spk:nth-last-child(6):first-child),
    .spk-grid:has(.spk:nth-last-child(9):first-child){grid-template-columns:repeat(3,minmax(0,1fr))}
    .spk-grid:has(.spk:nth-last-child(7):first-child),
    .spk-grid:has(.spk:nth-last-child(8):first-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  }
}

/* Experiência e welcome coffee */
/* A EXPERIENCIA — dobra propria em navy, logo apos a dobra azul da programacao.
   O corte de cor e o que sinaliza "nova dobra" em vez de "mais um painel". */
.expsec{background:var(--ink-900);border-top:1px solid var(--line-dk)}
.expsec .exp{margin-top:0}
.exp{display:grid;grid-template-columns:1fr;margin-top:0;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,rgba(10,42,107,.3),rgba(6,20,54,.36));box-shadow:inset 0 0 0 1px var(--line-dk)}
.exp__media{position:relative;min-height:200px;display:grid;place-items:center;color:var(--sky);background:radial-gradient(120% 92% at 32% 22%,rgba(89,169,255,.24),transparent 60%),linear-gradient(135deg,#071a4d,#03123a)}
.exp__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%}
.exp__media::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(3,18,58,.22),rgba(62,139,245,.06) 58%,rgba(100,61,178,.1));pointer-events:none}
.exp__body{padding:30px 28px}
.exp__body h3{font-size:clamp(1.5rem,4vw,2rem);margin:10px 0 12px;max-width:19ch}
.exp__body h3 .ac{color:var(--blue-300)}
.exp__body p{color:var(--blue-200);font-size:.96rem;line-height:1.6;max-width:54ch;font-weight:400}
@media(min-width:760px){.exp{grid-template-columns:.85fr 1.15fr}.exp__media{min-height:270px}}

/* ===== "MARCAS NA SALA" — FAIXA ESTATICA, LOGO APOS O HERO (v2.6.0) =====
   HISTORICO, para ninguem remover isto de novo achando que e sobra: a strip
   estatica original foi retirada na v2.x porque a edicao daquele momento tinha um
   logo so, e fileira parada com um logo fica pobre. O marquee entrou no lugar. Mas
   as duas dobras respondem a perguntas DIFERENTES e o time voltou a querer as
   duas: o marquee diz "quem confia na Nuvemshop" (prova de plataforma, igual em
   toda edicao, antes do local) e esta faixa diz "quem esta nesta sala" (lista de
   presenca, muda por edicao, logo apos o hero, enquanto a decisao esta aberta).
   O que NAO volta sao as classes por logo (.m-mica / .m-joge / .m-weethub): eram
   a causa do bug recorrente de logo gigante, porque logo novo sem classe nova
   ficava sem altura nenhuma. Aqui a altura vem por DADO, no style do item, igual
   ao marquee.
   Fileira parada e nao marquee de proposito: com 3 a 8 logos, faixa em movimento
   pisca em vez de desfilar. Se a edicao tiver logo demais para uma fileira, o
   flex-wrap quebra em duas linhas centralizadas em vez de encolher os logos. */
.salasec{background:var(--ink-900);padding-top:26px;padding-bottom:26px;
  border-bottom:1px solid var(--line-dk)}
@media(min-width:860px){.salasec{padding-top:34px;padding-bottom:34px}}
.sala{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.sala__label{margin:0 0 22px;font-size:.66rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue-300);text-align:center}
/* gap no container, e nao margin no item: aqui nao existe emenda de ciclo para
   coincidir, entao gap e o certo — e e ele que centraliza a ultima linha quando
   a fileira quebra. */
.sala__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:20px 46px}
/* 30px e so fallback: a altura real vem por logo, no atributo style. Altura igual
   para todos nao serve, pelo mesmo motivo do marquee. */
.sala__logo{height:30px;width:auto;opacity:.9;flex:none}
.sala__logo--branco{filter:brightness(0) invert(1)}
.sala__note{margin:22px auto 0;max-width:56ch;font-size:.74rem;line-height:1.5;
  color:var(--blue-300);font-weight:400;text-align:center}
@media(max-width:520px){.sala__row{gap:16px 28px}}

/* ===== MARQUEE DE LOGOS =====
   Veio do template da edicao do Rio. Mora AQUI, no compartilhado, e nao no <style>
   da pagina como estava la: nesta arquitetura o CSS compartilhado e onde o layout
   vive e cada edicao troca apenas dados, entao a proxima edicao herda o marquee sem
   copiar CSS nenhum.
   COMO FUNCIONA: a MESMA lista e renderizada duas vezes dentro de .mq__track e a
   animacao desloca a faixa em -50%. Ao fechar o ciclo, a segunda copia esta
   exatamente onde a primeira comecou, e a volta e imperceptivel. Por isso o
   espacamento entre logos e margin-right no ITEM e nao gap no CONTAINER: com gap,
   metade da largura da faixa nao coincide com um ciclo e a emenda pula. */
/* --mq-dur ESCALA COM A QUANTIDADE DE LOGOS, e isso nao e detalhe: a animacao
   percorre 50% da faixa, entao dobrar o numero de logos com a mesma duracao dobra a
   VELOCIDADE de leitura e a faixa passa a piscar em vez de desfilar. A regra pratica
   e ~4,6s por logo (46s para 10, 88s para 19). O template pode sobrescrever por
   edicao com style="--mq-dur:Ns" na secao, sem tocar neste arquivo. */
.mqsec{background:var(--ink-900);--mq-dur:88s}
/* AJUSTE v2.5.0 — O VAO ENTRE A EXPERIENCIA E A FAIXA DE LOGOS.
   Sintoma: um bloco de navy vazio de altura de meia tela entre o card da
   experiencia e o primeiro logo. Causa: as duas dobras herdam --sec-y CHEIO nas
   duas bordas que se encontram (72px no mobile, 110px no desktop), e as duas
   somam — 220px de nada no desktop, sem contar os 34px de margem do rotulo do
   marquee, que ja e um respiro por si.
   Correcao: a faixa de logos nao e uma dobra de leitura, e uma tira de prova
   social. Ela nao precisa do respiro de uma dobra inteira na borda de cima, e a
   experiencia nao precisa empurrar uma tira. As duas bordas caem para ~1/3.
   O padding de BAIXO do marquee fica intacto: la embaixo o vizinho e a secao
   clara, e o corte de cor precisa de distancia da ressalva. */
.expsec{padding-bottom:30px}
.mqsec{padding-top:26px}
@media(min-width:860px){.expsec{padding-bottom:44px}.mqsec{padding-top:38px}}
.mq{overflow:hidden;
  /* mascara nas bordas: a faixa entra e sai desaparecendo em vez de cortar seco */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq__track{display:flex;align-items:center;width:max-content;animation:mq-slide var(--mq-dur,88s) linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
.mq__label{margin:0 auto 34px;max-width:var(--maxw);padding:0 var(--pad-x);
  font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-300);text-align:center}
/* A altura vem por logo, no atributo style; 34px e so fallback. Altura igual para
   todos nao serve: com recortes de razao diferente, altura igual faz umas
   parecerem gigantes e outras minusculas. Os numeros equalizam massa visual. */
.mq__logo{height:34px;width:auto;margin-right:56px;opacity:.88;flex:none}
/* Logo que chega em arte colorida: chapa em branco como os demais, sem editar o arquivo. */
.mq__logo--branco{filter:brightness(0) invert(1)}
@keyframes mq-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* A observacao e ressalva, nao legenda: precisa de distancia da faixa para nao ser
   lida como parte dela. */
.mq__note{margin:44px auto 0;max-width:56ch;padding:0 var(--pad-x);
  font-size:.74rem;line-height:1.5;color:var(--blue-300);font-weight:400;text-align:center}
/* Quem pediu menos movimento ve a mesma informacao parada, em duas linhas. */
@media (prefers-reduced-motion:reduce){
  .mq{-webkit-mask-image:none;mask-image:none}
  .mq__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:18px 0;padding:0 var(--pad-x)}
  .mq__logo{margin-right:36px}
}

/* ===== PALESTRANTE PROTAGONISTA + BIG NUMBERS =====
   Quando UMA pessoa conduz a tarde inteira, a grade de cards iguais dilui
   exatamente o que vende o evento. A foto ganha escala (290px -> 420px), a bio
   ganha espaco, as credenciais saem de dentro do paragrafo e os numeros passam a
   funcionar como prova de autoridade.
   Os numeros vivem NESTA dobra, ao lado de quem eles descrevem, e nao no fecho da
   pagina: numero solto no rodape e enfeite, numero ao lado do rosto e argumento. */
.protag{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}
@media(min-width:900px){.protag{grid-template-columns:minmax(0,420px) 1fr;gap:40px}}

/* MOLDURA ANIMADA — anel de gradiente conico girando atras da foto.
   CALIBRAGEM DA DISCRICAO: a primeira versao usava o anel quase opaco girando em
   7s e saltava mais que a propria foto. Agora sao tres freios ao mesmo tempo: a
   opacidade dos stops caiu para ~.34, o anel leva blur(10px) para virar brilho
   difuso em vez de faixa desenhada, e o ciclo foi para 13s. O efeito registra no
   canto do olho sem competir com o rosto.
   O blur exige o anel MAIOR que a caixa (inset negativo), senao a borda desfocada
   aparece como halo cinza dentro do card. */
.pfoto{position:relative;border-radius:var(--r-lg);padding:3px;isolation:isolate}
.pfoto::before{content:"";position:absolute;inset:-42%;z-index:-1;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 44%,rgba(89,169,255,.34) 58%,rgba(132,202,255,.46) 64%,transparent 78%);
  filter:blur(10px);animation:pfoto-spin 13s linear infinite}
.pfoto::after{content:"";position:absolute;inset:3px;border-radius:calc(var(--r-lg) - 3px);
  box-shadow:inset 0 0 0 1px rgba(133,202,255,.22);pointer-events:none;z-index:3}
@keyframes pfoto-spin{to{transform:rotate(1turn)}}
.pfoto__in{position:relative;border-radius:calc(var(--r-lg) - 3px);overflow:hidden;background:var(--ink-800);aspect-ratio:4/5}
.pfoto__in img{width:100%;height:100%;object-fit:cover;object-position:center 14%}
/* Cantoneiras: duas, nao quatro, e na diagonal. Quatro fecham a foto numa mira de
   camera; duas sugerem o enquadramento e param antes de virar moldura. */
.pfoto__c{position:absolute;width:26px;height:26px;border:1.5px solid rgba(89,169,255,.55);z-index:4}
.pfoto__c--tl{top:-1px;left:-1px;border-right:none;border-bottom:none;border-radius:var(--r-lg) 0 0 0}
.pfoto__c--br{bottom:-1px;right:-1px;border-left:none;border-top:none;border-radius:0 0 var(--r-lg) 0}
.pfoto__badge{position:absolute;z-index:5;left:16px;bottom:16px;
  font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#010A22;
  background:var(--sky);padding:5px 11px;border-radius:var(--r-pill)}
/* Quem pediu menos movimento ve o anel parado. Como ele e um gradiente e nao um
   loop de opacidade, parado ele continua fazendo sentido visual. */
@media (prefers-reduced-motion:reduce){.pfoto::before{animation:none}}

.protag__name{font-size:clamp(1.6rem,4.4vw,2.3rem);font-weight:600;letter-spacing:-.03em;line-height:1.06}
.protag__role{color:var(--blue-300);font-size:.94rem;font-weight:600;margin:8px 0 16px}
.protag__bio{color:var(--blue-200);font-size:.98rem;line-height:1.62;font-weight:400;max-width:52ch}
/* CREDENCIAIS como lista, nao como paragrafo: credencial enterrada em texto
   corrido nao e lida. A bio fica com a tese, a lista com a prova. */
.protag__cred{list-style:none;margin:20px 0 0;display:grid;gap:9px}
.protag__cred li{position:relative;padding-left:24px;font-size:.9rem;line-height:1.45;color:var(--blue-200);font-weight:400}
.protag__cred li svg{position:absolute;left:0;top:.2em;width:15px;height:15px;color:var(--sky)}
/* BIG NUMBERS em REGUA, nao em caixas. Tres caixas com fundo proprio disputavam
   atencao com o card da foto e o resultado era tudo do mesmo tamanho, nada em
   destaque. Sem caixa o numero pode crescer, o divisor organiza, e a hierarquia
   volta a ser foto, nome, numeros. */
.bignum__grid{display:grid;grid-template-columns:1fr;margin-top:26px;border-top:1px solid rgba(133,202,255,.26)}
.bignum__cell{padding:18px 0 4px;position:relative}
/* white-space:nowrap e o teto em 2.7rem existem juntos, e um sem o outro nao
   resolve. "+R$ 1,6 bi" tem 10 caracteres e, a 3.1rem com tabular-nums, passava
   da largura da celula (~304px numa linha de tres) e quebrava em duas linhas.
   O nowrap garante que numero nunca quebra; o teto menor garante que ele nao
   estoura a celula por fora, que e o que o nowrap sozinho causaria.
   Valor longo continua sendo problema de conteudo, nao de CSS: o
   scripts/validar_dados.py avisa acima de 11 caracteres. */
.bignum__cell b{display:block;white-space:nowrap;font-size:clamp(2rem,5vw,2.7rem);font-weight:600;line-height:.94;
  letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.bignum__cell span{display:block;margin-top:8px;font-size:.83rem;line-height:1.4;color:var(--blue-200);font-weight:400}
@media(min-width:620px){
  .bignum__grid{grid-template-columns:repeat(3,1fr)}
  .bignum__cell{padding:20px 22px 6px}
  .bignum__cell:first-child{padding-left:0}
  .bignum__cell+.bignum__cell::before{content:"";position:absolute;left:0;top:20px;bottom:12px;width:1px;background:rgba(133,202,255,.22)}
}
/* Credito de quem abre a tarde: uma linha, sem foto e sem card. E participacao de
   abertura, e um card do mesmo tamanho do protagonista empataria os dois. */
.protag__credit{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-dk);
  font-size:.9rem;line-height:1.55;color:var(--blue-200);font-weight:400}
.protag__credit b{color:#fff;font-weight:600}

/* ============================================================
   DOBRA 6 (LOCAL) + DEPOIMENTOS — seção clara (respiro)
   ============================================================ */
.light{background:var(--paper);color:#0b1b3a}
.light .eyebrow{color:var(--blue-600)}
.light h2{color:#08183a;font-size:clamp(1.75rem,4.8vw,2.5rem);margin-bottom:16px;max-width:28ch}
.light h2 .ac{display:inline;color:var(--blue-600)}
.light h3{color:#08183a}
.local__lead{color:#3a4a67;font-size:1.02rem;max-width:74ch;margin-bottom:40px;line-height:1.6;font-weight:400}
.local__card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-card);overflow:hidden}
.local__map{height:250px;overflow:hidden;position:relative}
/* --local-pos permite a edicao escolher o enquadramento: uma FOTO unica costuma
   pedir 42% (tira o excesso de ceu); uma MONTAGEM de paineis pede 50%, porque
   cortar fora do centro decapita os paineis das pontas. */
.local__map img{width:100%;height:100%;object-fit:cover;object-position:var(--local-pos,center 42%)}
/* A faixa sobe no desktop: com 250px numa largura de ~1040px a razao fica 4.16 e
   a montagem de 3 paineis tem 3.63, entao o cover comia 13% em cima e embaixo.
   Com 300px a razao vai a 3.47 e o corte fica quase nulo. */
@media(min-width:760px){.local__map{height:300px}}
.local__map::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,10,34,.12),transparent 40%)}
.local__info{padding:22px}
.local__row{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line-lt)}
.local__row:last-child{border-bottom:none}
.local__row svg{width:19px;height:19px;color:var(--blue-600);flex:none;margin-top:2px}
.local__row .lbl{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5b6b86;margin-bottom:2px}
.local__row .val{font-weight:600;color:#0b1b3a;font-size:.97rem}
.local__row a.val{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px}
/* Guia dobra 6: endereco + Google Maps + Waze */
.local__links{display:flex;flex-wrap:wrap;gap:6px 20px}
.local__cta{padding:0 22px 22px}
/* MAPA EMBUTIDO — vem do modelo do Rio. Dois links de "como chegar" obrigam a
   pessoa a sair da pagina para saber se o endereco e longe dela; o mapa responde
   isso sem clique. Fica DENTRO do card, entre as informacoes e o CTA, porque e
   informacao de logistica e nao ilustracao.
   loading="lazy" nao e enfeite: e um iframe de terceiro, e a DoD pede terceiro
   adiado por scroll. O filtro tira um pouco de brilho e saturacao para o mapa nao
   competir com o card branco ao redor. */
.local__embed{margin:0 22px 20px;border-radius:var(--r-md);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line-lt)}
.local__embed iframe{display:block;width:100%;height:260px;border:0;filter:brightness(.98) saturate(.96)}
@media(min-width:760px){.local__embed iframe{height:320px}}

/* FAQ removida da pagina (regra do guia). As duas classes abaixo eram
   compartilhadas com a FAQ e foram renomeadas para o bloco de depoimentos. */
.depo__lead{color:#3a4a67;margin-bottom:22px;font-size:.98rem;font-weight:400}
.depo__gt{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);margin-bottom:4px}
/* Depoimentos — slider (scroll-snap + dots), card mais atrativo */
.depo{margin-top:64px}
.depo__head{margin-bottom:8px}
.depo h3{margin-bottom:0}
.depo__slider{position:relative}
.depo__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin-left:calc(-1*var(--pad-x));margin-right:calc(-1*var(--pad-x));padding:8px var(--pad-x) 10px;scroll-padding-left:var(--pad-x)}
.depo__track::-webkit-scrollbar{display:none}
.tcard{scroll-snap-align:center;flex:0 0 86%;display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff,#f6faff);border-radius:var(--r-lg);padding:30px 28px 26px;box-shadow:var(--sh-card),inset 0 0 0 1px rgba(6,30,76,.06)}
.tcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-400),var(--blue-600))}
.tcard__mark{position:absolute;top:14px;right:22px;font-family:var(--serif);font-weight:600;font-style:italic;font-size:4rem;line-height:1;color:rgba(30,107,224,.12);pointer-events:none}
.tcard__text{color:#182642;font-size:1.06rem;line-height:1.62;margin:6px 0 24px;font-weight:400;flex:1}
.tcard__by{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line-lt)}
.tcard__photo{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:center;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(6,30,76,.12)}
.tcard__n{font-weight:600;color:#08183a;font-size:.95rem}
.tcard__r{color:#5b6b86;font-size:.82rem}
.depo__dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.depo__dot{width:8px;height:8px;padding:0;border-radius:50%;background:rgba(6,30,76,.18);transition:width .3s var(--ease),background .3s var(--ease)}
.depo__dot.is-active{width:22px;border-radius:5px;background:var(--blue-600)}
/* 1 depoimento: card único centralizado, sem slider/dots. 2 a 4: slider com dots. */
.depo__track.is-single{overflow:visible;justify-content:center}
.depo__track.is-single .tcard{flex:0 0 auto;width:100%;max-width:680px;scroll-snap-align:none}
@media(min-width:760px){.tcard{flex-basis:calc(50% - 8px)}}
@media(min-width:1040px){.tcard{flex-basis:calc(33.333% - 11px)}}

/* ============================================================
   STATS + FECHO — navy (decisão)
   ============================================================ */
.close{background:radial-gradient(78% 48% at 50% 0%,rgba(62,139,245,.15),transparent 62%),linear-gradient(180deg,var(--ink-900),var(--ink-850))}
.final{text-align:center;max-width:620px;margin:0 auto}
.final h2,.final h3{font-size:clamp(2rem,6.2vw,3rem);margin-bottom:16px}
.final h2 .ac,.final h3 .ac{color:var(--blue-300)}
.final p{color:var(--blue-200);font-size:1.06rem;margin-bottom:22px;max-width:44ch;margin-inline:auto;font-weight:400}
.final .occ{margin-inline:auto;justify-content:center;margin-bottom:30px}
.final p.final__micro{font-size:.76rem;line-height:1.45;color:var(--blue-300);margin:14px auto 0;max-width:none;font-weight:400}
@media(min-width:760px){.final p.final__micro{white-space:nowrap}}
/* Seção final mais curta + stats discretos em strip */
.section.close{padding-top:62px;padding-bottom:58px}
.final .eyebrow{margin-bottom:12px}
.statstrip{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:16px 34px;max-width:560px;margin:52px auto 0;padding-top:30px;border-top:1px solid var(--line-dk)}
.statstrip .stat{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.statstrip .stat b{font-size:1.55rem;font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1}
.statstrip .stat span{font-size:.76rem;color:var(--blue-300);font-weight:400;line-height:1.3;max-width:13ch}

.foot{border-top:1px solid var(--line-dk);padding:28px var(--pad-x) 34px;text-align:center}
.foot__brand{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;margin-bottom:12px;letter-spacing:-.01em}
.foot__brand .dot{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,#3E8BF5,#0050C3)}
.foot__legal{color:var(--blue-300);font-size:.78rem}

/* --- MODAL --- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal__bd{position:absolute;inset:0;background:rgba(0,8,24,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal__panel{position:relative;background:#fff;color:#0b1b3a;border-radius:var(--r-lg);width:100%;max-width:480px;max-height:88vh;overflow:auto;padding:30px 26px 26px;box-shadow:0 40px 90px rgba(0,8,30,.5);animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal__x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:var(--ice-100);display:grid;place-items:center;color:var(--blue-600)}
.modal__x:hover{background:var(--ice-200)}
.modal__eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);margin-bottom:6px}
.modal__title{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;margin-bottom:6px;color:#08183a}
.modal__sub{color:#42536e;font-size:.92rem;margin-bottom:20px;font-weight:400}
.modal__form{min-height:120px}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* Diagramação: evita viúvas e quebras ruins */
.hero__sub,.exp__body p,.final p,.speakers__sub,.local__lead,.spk__contrib,.tl__d{text-wrap:pretty}
.light h2,.exp__body h3,.final h3,.speakers h3,.hero__sub{text-wrap:balance}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
@media(min-width:860px){:root{--sec-y:110px;--pad-x:40px}
  /* PROPORCAO DO HERO: H1 a 3.8rem sobre 860px de medida deixava o bloco
     "explodido" e achatava o subtitulo. Agora o H1 cai para ~3rem em 15ch de
     medida (2 linhas sans + 1 serifa) e o subtitulo sobe para 1.02rem: a
     hierarquia volta a ter tres degraus legiveis em vez de um titulo gigante.
     white-space:nowrap saiu do .hero__micro — com a copy atual (aprovacao +
     e-mail) a linha estourava a largura e era cortada pelo overflow do body. */
  /* RITMO VERTICAL DO HERO — a correcao do vao.
     Sintoma: com o subtitulo removido o bloco encurtou, mas o hero continuava
     reservando 100svh e o conteudo continuava encostado no topo (nem .hero__in
     nem .hero__body tinham flex-grow). Toda a sobra caia no rodape da dobra e
     virava espaco morto antes da secao seguinte.
     Correcao: o corpo cresce e centraliza, entao a sobra se distribui em cima e
     embaixo. E o 94svh deixa a dobra seguinte aparecendo alguns pixels, que e o
     que sinaliza "tem mais abaixo" sem precisar de seta de scroll. */
  .hero{min-height:94svh}
  .hero__body{padding-top:18px;max-width:820px;flex:1;display:flex;flex-direction:column;justify-content:center}
  .hero h1{font-size:clamp(2.2rem,3.1vw,2.75rem);max-width:720px;line-height:1.08;margin-bottom:16px}
  .hero__sub{max-width:640px;font-size:1.05rem;line-height:1.55;margin-bottom:20px;font-weight:400}
  .logistics{margin-bottom:30px}.logi{font-size:.95rem}.hero__ctas{margin-bottom:38px}
  .hero__micro{max-width:640px}.stats{gap:16px}
  .light>.wrap>h2{max-width:none;white-space:nowrap}
  .light>.wrap>h2 .ac{white-space:nowrap}
  /* Desktop: cor sólida à esquerda (~40%, coluna de texto); a partir da emenda a imagem
     é revelada à direita, começando colada ao sólido na mesma cor (continuidade uniforme). */
  .hero__bg{inset:0;height:auto}
  .hero__topbar{margin-bottom:0}
  .hero__photo{object-position:var(--hero-pos-desk,64% 46%)}
  .hero__video{object-position:var(--hero-pos-desk,64% 46%)}
  /* Com video, o scrim da esquerda sobe de .5/.64 para .9/.7 e o lado direito
     deixa de ir a zero. A razao esta no comentario da regra base: foto parada
     permite calibrar o degrade no ponto exato onde o texto cai; video muda de
     luminancia a cada corte, e o scrim tem que garantir o H1 no quadro MAIS
     CLARO da sequencia, nao no medio. */
  .hero.is-video .hero__grad{background:
    linear-gradient(90deg,
      rgba(1,10,34,.96) 0%,
      rgba(1,10,34,.9) 34%,
      rgba(1,10,34,.7) 62%,
      rgba(1,10,34,.55) 100%),
    linear-gradient(180deg,
      rgba(1,10,34,.45) 0%,
      transparent 26%,
      transparent 58%,
      rgba(1,10,34,.82) 90%,
      var(--ink-900) 100%)}
  .hero__grad{background:
    linear-gradient(90deg,var(--ink-900) 0%,var(--ink-900) 40%,rgba(1,10,34,.5) 64%,rgba(1,10,34,0) 92%),
    linear-gradient(180deg,rgba(1,10,34,.3) 0%,transparent 28%,transparent 64%,rgba(1,10,34,.72) 90%,var(--ink-900) 100%)}
 }
/* nowrap removido: com 139 caracteres a linha passava da largura do container */
@media(min-width:860px) and (max-height:760px){
  .hero{padding-top:24px;padding-bottom:24px}
  .hero__body{padding-top:10px;max-width:820px}
  .hero h1{font-size:clamp(2rem,2.9vw,2.5rem);max-width:700px;line-height:1.08;margin-bottom:12px}
  .hero__sub{max-width:620px;font-size:1rem;line-height:1.5;margin-bottom:14px}
  .occ{padding:11px 14px;margin-bottom:0;gap:8px}
  .logistics{margin-bottom:30px}
  .hero__ctas{margin-bottom:45px}
  .hero__micro{max-width:none;margin-top:10px}
  .hero__scroll{display:none}
}
/* ===== Refinamentos mobile ===== */
@media(max-width:859px){
  /* Folga pra barra fixa de CTA não cobrir o rodapé */
  .foot{padding-bottom:104px}
  .hero{padding-top:220px}
  .hero__body{padding-top:calc(30svh - 34px)}
  .hero__topbar{position:fixed;top:0;left:0;right:0;z-index:70;padding:14px var(--pad-x);background:rgba(3,18,58,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dk)}
}
@media(max-width:759px){
  .exp__media{min-height:150px}
    /* Alinhamento: conteúdo à esquerda em todos os tamanhos (leitura/scan em F-pattern;
     header compartilha a margem-esquerda do corpo). Cerimônia (.final, marquee) segue centrada por suas próprias regras. */
  /* Participantes: slider full-bleed que vaza à direita */
  .spk-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:calc(-1 * var(--pad-x));margin-right:calc(-1 * var(--pad-x));
    padding:4px var(--pad-x) 6px;scroll-padding-left:var(--pad-x)}
  .spk-grid::-webkit-scrollbar{display:none}
  .spk{flex:0 0 72%;scroll-snap-align:start}
  .speakers__intro{text-align:left}
  .speakers__sub{margin-left:0;margin-right:0}
}
@media(max-width:559px){
  /* CTA do header permanece visível na abertura da página e cabe ao lado da marca. */
  .hero__topbar .btn-sm{padding:8px 14px;font-size:.74rem}
}
@media(max-width:700px){
  .hero{padding-top:150px}
  .hero__body{position:relative;padding-top:0}
  .hero__tag{position:static;display:flex;flex-direction:column;width:max-content;margin-bottom:27px;padding:6px 12px;font-size:.59rem;line-height:1.18;text-align:left;background:rgba(3,18,58,.82);border-color:rgba(133,202,255,.35)}
  .hero__tag-date{display:block;margin-top:1px;font-weight:600;line-height:1.12;color:#fff}
  .hero__tag-date::before{content:none}
  .hero h1{font-size:clamp(1.6rem,7vw,2rem);line-height:1.09;margin-bottom:18px}
  .hero__sub{font-size:.94rem;line-height:1.45;margin-bottom:20px}
  .logistics{gap:10px 14px;margin-bottom:24px}
  .hero__ctas{gap:14px;margin-top:0;margin-bottom:26px}
}