/* ══════════════════════════════════════════════════════════════
   CHROMA SUMMIT — conceito "o espectro como estrutura"

   A marca é um anel que atravessa o espectro. Aqui a cor não
   decora: ela classifica. Cada pilar de conteúdo recebe um matiz
   do anel, na ordem do anel, e a página desce atravessando o
   espectro. Para uma plateia de diretoria, isso é o que separa
   "colorido" de "festivo".

   Sem bibliotecas. Movimento em transform/opacity apenas.
   ══════════════════════════════════════════════════════════════ */

/* ---------- Tokens ------------------------------------------ */
:root{
  /* chão institucional */
  --navy-0:#08131F;          /* o mais fundo: hero e rodapé */
  --navy:#0E2438;
  --navy-2:#1D507B;          /* azul institucional da marca */
  --gelo:#F2F5F7;            /* chão frio, alterna com o branco */
  --branco:#FFFFFF;
  --nevoa:#E4EAEF;

  /* texto */
  --tx:#0F1A24;
  --tx-2:#41505E;
  --tx-3:#677684;   /* 4,67 sobre branco; o #6E7E8C dava 4,18 */
  --tx-inv:#F2F6F9;
  --tx-inv-2:rgba(242,246,249,.76);
  --tx-inv-3:rgba(242,246,249,.52);

  --linha:rgba(15,26,36,.13);
  --linha-inv:rgba(242,246,249,.17);
  --linha-inv-2:rgba(242,246,249,.09);   /* réguas internas, mais discretas */

  /* ---- O espectro, na ordem do anel ---- */
  --c1:#D8541E;   /* laranja  */
  --c2:#E9A100;   /* âmbar    */
  --c3:#8CA81E;   /* lima     */
  --c4:#00875A;   /* verde    */
  --c5:#00758C;   /* petróleo */
  --c6:#1D507B;   /* azul     */
  --c7:#5B2D82;   /* roxo     */
  --c8:#A61A56;   /* magenta  */
  --c9:#C2213A;   /* carmim   */

  /* Variantes só para TEXTO sobre fundo claro. Laranja, âmbar e
     lima não passam em 4,5:1 sobre branco no corpo do texto;
     estas passam e mantêm o mesmo matiz. */
  --c1-tx:#A83B0E;
  --c2-tx:#8A6000;
  --c3-tx:#566B00;
  --c4-tx:#006B48;

  /* E o inverso: sobre o navy, petróleo, azul, roxo, magenta e carmim
     ficavam abaixo de 3:1 (o magenta media 2,19). Estas são clareadas
     até passar, com o matiz preservado. Laranja, âmbar, lima e verde
     já passam puros e ficam como estão. */
  --c1-inv:#D8541E;
  --c2-inv:#E9A100;
  --c3-inv:#8CA81E;
  --c4-inv:#00875A;
  --c5-inv:#0A7B91;
  --c6-inv:#4C7597;
  --c7-inv:#8664A3;
  --c8-inv:#B94A79;
  --c9-inv:#C93C52;

  /* E uma terceira família. As "-inv" acima passam em 3:1, que é o
     mínimo de TEXTO GRANDE. Rótulo de 12px sobre o navy exige 4,5:1, e
     aí elas falham (o verde media 3,47). Estas são calibradas em 4,6
     sobre o navy mais claro, então servem nos dois fundos escuros. */
  --c1-txt-inv:#DD6939;
  --c2-txt-inv:#E9A100;
  --c3-txt-inv:#8CA81E;
  --c4-txt-inv:#2E9D78;
  --c5-txt-inv:#3D96A8;
  --c6-txt-inv:#6E8FAB;
  --c7-txt-inv:#9D81B4;
  --c8-txt-inv:#C76F95;
  --c9-txt-inv:#D66879;

  /* tipografia */
  --f-t:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-m:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-eyebrow:.6875rem;
  --fs-lead:clamp(1.0625rem,.98rem + .42vw,1.3125rem);
  --fs-h3:clamp(1.125rem,1.06rem + .3vw,1.375rem);
  --fs-h2:clamp(1.875rem,1.4rem + 2.1vw,3.125rem);
  --fs-h1:clamp(2.25rem,1.5rem + 3.4vw,4.25rem);
  --fs-num:clamp(2rem,1.45rem + 2.4vw,3.5rem);

  /* espaço */
  --sp-s:.5rem;  --sp-m:1rem;   --sp-ml:1.375rem; --sp-l:1.75rem;
  --sp-xl:2.5rem; --sp-2xl:clamp(3rem,2.2rem + 3vw,5rem);
  --sp-3xl:clamp(4.5rem,3.2rem + 5vw,8rem);
  --gut:clamp(1.25rem,.9rem + 1.6vw,2.75rem);

  --r:14px;                   /* raio único da página */
  --dur-1:.35s; --dur-2:.55s; --dur-3:.85s;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-o:cubic-bezier(.16,1,.3,1);

  --btn-h:3.25rem; --btn-px:1.6rem; --btn-fs:.9375rem;
}

/* ---------- Base -------------------------------------------- */
.chroma-lp,.chroma-lp *,.chroma-lp *::before,.chroma-lp *::after,.sticky,.sticky *,.sticky *::before,.sticky *::after,.zap,.zap *{box-sizing:border-box}
.sticky,.zap{font-family:var(--f-t)}
/* O escuro fica no <html>, que pinta a tela da página e aparece no
   overscroll. O <body> fica claro: no Elementor cada bloco é um
   widget, e uma costura entre eles sobre fundo escuro viraria uma
   faixa preta no meio da página. */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
.chroma-lp{
  background:var(--branco); color:var(--tx);
  font-family:var(--f-t); font-size:1.0625rem; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@supports (overflow-x:clip){ .chroma-lp{overflow-x:clip} }
.chroma-lp img{max-width:100%; height:auto; display:block}
.chroma-lp :where(ul,ol){list-style:none; margin:0; padding:0}
.chroma-lp :where(h1,h2,h3,p,figure,blockquote,dl,dd){margin:0}
.chroma-lp a{color:inherit}
.chroma-lp :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption,blockquote){font-family:inherit}
.chroma-lp p{max-width:64ch; text-wrap:pretty}

.sec{position:relative; padding-block:var(--sp-3xl)}
.sec--curta{padding-block:var(--sp-2xl)}
.wrap{position:relative; width:min(100% - var(--gut)*2,1220px); margin-inline:auto}

.chroma-lp h1{font-size:var(--fs-h1); line-height:1.02; letter-spacing:-.035em; font-weight:600;
  text-wrap:pretty}
.chroma-lp h2{font-size:var(--fs-h2); line-height:1.08; letter-spacing:-.028em; font-weight:600;
  text-wrap:pretty; max-width:24ch}
.chroma-lp h3{font-size:var(--fs-h3); line-height:1.25; letter-spacing:-.015em; font-weight:600}

.lead{font-size:var(--fs-lead); line-height:1.55; color:var(--tx-2);
  max-width:58ch; margin-top:var(--sp-l)}
.light .lead{color:var(--tx-2)}

/* Quebra de leitura controlada. Só no desktop: no celular a coluna é
   estreita e o texto já quebra onde deve. */
.qbr{display:none}
@media(min-width:1000px){.qbr{display:inline}}

/* rótulo de seção: filete + mono, herda o matiz da seção */
.eyebrow{display:flex; align-items:center; gap:.65rem; width:fit-content;
  font-family:var(--f-m); font-size:var(--fs-eyebrow); font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--matiz,var(--navy-2)); margin-bottom:var(--sp-ml)}
.eyebrow::before{content:""; width:26px; height:2px; background:currentColor; border-radius:2px}
/* o rotulo anuncia o bloco seguinte: a distancia entre os dois e a
   margem DELE, nao a do bloco. Sem isto o margin-top de .exige (80px)
   vencia por colapso e o rotulo ficava boiando. */
.wrap>.eyebrow+*{margin-top:0}
.inv .eyebrow{color:var(--tx-inv-2)}

.nota{margin-top:var(--sp-2xl); max-width:62ch; color:var(--tx-2)}
.nota strong{color:var(--tx); font-weight:600}

/* Frase de destaque: filete colorido à esquerda, corpo grande. Vive na
   BASE porque quatro seções usam — e no Elementor cada bloco só carrega
   o CSS da própria seção, então uma regra definida dentro de uma seção
   não alcançaria as outras. A cor do filete vem de --matiz. */
.destaque{padding-left:clamp(1rem,2.4vw,1.75rem);
  border-left:3px solid var(--matiz,var(--navy-2));
  font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem); line-height:1.32;
  letter-spacing:-.02em; font-weight:500; max-width:30ch}
.destaque b{font-weight:600; color:var(--realce,inherit)}
.destaque--grande{font-size:clamp(1.375rem,1rem + 1.5vw,2rem); max-width:26ch}

/* ---------- Botões ------------------------------------------ */
/* Blindagem contra o tema do WordPress. Regras como "a:hover" (0,1,1)
   e ".elementor a:hover" (0,2,1) vencem ".btn" (0,1,0): sem isto o
   texto vira cinza e aparece uma máscara escura no hover. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:var(--btn-h); padding:0 var(--btn-px);
  font-family:var(--f-t); font-size:var(--btn-fs); font-weight:600;
  letter-spacing:.005em; border-radius:var(--r); border:0; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--dur-1) var(--ease-o), box-shadow var(--dur-1) var(--ease);
}
.btn,.btn:link,.btn:visited,.btn:hover,.btn:focus,.btn:active{
  color:#fff !important;
  background-color:var(--navy-2) !important;
  text-decoration:none !important;
}
/* o brilho que atravessa: chama atenção sem piscar */
.btn::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%); animation:varre 4.6s var(--ease) infinite}
@keyframes varre{0%,58%{transform:translateX(-120%)} 82%,100%{transform:translateX(120%)}}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(29,80,123,.7)}
.btn:focus-visible{outline:3px solid var(--c2); outline-offset:3px}
.btn .seta{transition:transform var(--dur-1) var(--ease-o)}
.btn:hover .seta{transform:translateX(3px)}

/* secundário: contorno, para o par de CTAs não competir */
.btn--linha,.btn--linha:link,.btn--linha:visited,.btn--linha:hover,
.btn--linha:focus,.btn--linha:active{
  color:var(--tx-inv) !important; background-color:transparent !important;
  box-shadow:inset 0 0 0 1.5px var(--linha-inv);
}
.btn--linha:hover{box-shadow:inset 0 0 0 1.5px var(--tx-inv-2); transform:translateY(-2px)}
.btn--linha::after{display:none}
.light .btn--linha,.light .btn--linha:link,.light .btn--linha:visited,
.light .btn--linha:hover,.light .btn--linha:focus,.light .btn--linha:active{
  color:var(--navy-2) !important; box-shadow:inset 0 0 0 1.5px rgba(29,80,123,.35);
}
.btn--bloco{width:100%}
@media(prefers-reduced-motion:reduce){
  .btn::after{animation:none}
  .btn:hover,.btn--linha:hover{transform:none}
}
.ctas{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--sp-l)}
/* no hero a ação fica um degrau mais longe dos dados */
.palco .ctas{margin-top:var(--sp-xl)}
@media(max-width:479px){.ctas{flex-direction:column} .ctas .btn{width:100%}}

/* ══════════ MOVIMENTO ═════════════════════════════════════════
   Um só padrão: sobe e aparece, com atraso escalonado por --i.  */
[data-rv]{opacity:0; transform:translateY(22px);
  transition:opacity var(--dur-3) var(--ease-o) calc(var(--i,0)*70ms),
             transform var(--dur-3) var(--ease-o) calc(var(--i,0)*70ms)}
[data-rv].in{opacity:1; transform:none}
.stg>*{opacity:0; transform:translateY(20px);
  transition:opacity var(--dur-3) var(--ease-o) calc(var(--i,0)*85ms),
             transform var(--dur-3) var(--ease-o) calc(var(--i,0)*85ms)}
.stg.in>*{opacity:1; transform:none}

/* máscara por palavra, só nos títulos que carregam a tese */
.rv-w .w{display:inline-block; overflow:hidden; vertical-align:top;
  /* A caixa da máscara tem a altura da entrelinha, e a entrelinha do h1
     é 1.02 -- menor que a altura natural da fonte. O overflow:hidden
     então cortava a perna do "g" de "gestão" rente à linha de base.
     O padding desce o fundo da máscara; a margem negativa devolve o
     mesmo tanto, para a linha continuar empilhando igual. */
  padding-bottom:.2em; margin-bottom:-.2em}
/* e o ponto de partida desce junto, senão o topo das letras apareceria
   dentro do padding antes da revelação */
.rv-w .w>i{display:inline-block; font-style:inherit; transform:translateY(128%);
  transition:transform .9s var(--ease-o) calc(var(--i,0)*38ms)}
.rv-w.in .w>i{transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
  [data-rv],.stg>*{opacity:1!important; transform:none!important}
  .rv-w .w>i{transform:none!important}
}

/* ══════════ 01 · O PALCO (hero) ══════════════════════════════ */
.palco{position:relative; overflow:hidden; background:var(--navy-0); color:var(--tx-inv);
  padding-block:clamp(2.5rem,2rem + 3vw,4.5rem) var(--sp-3xl)}
/* Duas colunas: o argumento à esquerda, a sala à direita. A foto saiu
   de fundo chapado e virou objeto — com a foto atrás de tudo, o navy
   precisava de véus tão pesados que a imagem sumia mesmo assim. */
.palco-grid{display:grid; gap:var(--sp-xl); align-items:center}
@media(min-width:980px){
  .palco-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:var(--sp-2xl)}
}
.palco-foto{position:relative; border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/3.2; border:1px solid var(--linha-inv);
  box-shadow:0 34px 70px -30px rgba(0,0,0,.75)}
@media(min-width:980px){.palco-foto{aspect-ratio:4/4.2}}
/* foto de um encontro real da Chroma, não banco de imagem */
.palco-foto img{width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  filter:saturate(.9) contrast(1.03)}
/* véu curto na base: é onde a legenda encosta */
.palco-foto::after{content:""; position:absolute; inset:auto 0 0 0; height:42%;
  background:linear-gradient(180deg,transparent,rgba(8,19,31,.82))}
/* a faixa do espectro fecha a foto por baixo: a marca assinando a imagem */
.palco-foto .assinatura{position:absolute; left:0; right:0; bottom:0; height:4px; z-index:2;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),
    var(--c5),var(--c6),var(--c7),var(--c8),var(--c9))}
.palco-foto figcaption{position:absolute; left:0; right:0; bottom:4px; z-index:2;
  padding:var(--sp-m) var(--sp-l); font-family:var(--f-m); font-size:.75rem;
  letter-spacing:.06em; color:var(--tx-inv-2)}
/* o bloom: eco desfocado do anel, é o que traz a cor da marca para o
   fundo sem virar arco-íris chapado */
.bloom{position:absolute; z-index:1; pointer-events:none;
  width:min(78vw,900px); aspect-ratio:1; right:-16%; top:-22%;
  background:conic-gradient(from 200deg,
    #D8541E,#E9A100,#8CA81E,#00875A,#00758C,#1D507B,#5B2D82,#A61A56,#C2213A,#D8541E);
  border-radius:50%; filter:blur(110px); opacity:.4;
  mask:radial-gradient(circle,transparent 26%,#000 52%);
  -webkit-mask:radial-gradient(circle,transparent 26%,#000 52%)}
@media(max-width:759px){.bloom{width:130vw; right:-42%; top:-8%; filter:blur(76px); opacity:.34}}
.palco .wrap{position:relative; z-index:2}

/* lockup: anel + nome do evento */
.marca{display:flex; align-items:center; gap:.8rem; margin-bottom:var(--sp-2xl)}
.marca img{width:44px; height:44px; flex:none}
.marca b{font-family:var(--f-t); font-weight:600; font-size:1.0625rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--tx-inv)}
.marca span{display:block; font-family:var(--f-m); font-size:.625rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--tx-inv-3); margin-top:.2rem}

.palco h1{max-width:18ch}
.palco .tagline{font-size:var(--fs-lead); line-height:1.5; color:var(--tx-inv-2);
  max-width:46ch; margin-top:2.125rem}

/* os três dados do evento, em chips.
   O vão maior é de propósito: a última linha do parágrafo carrega a
   entrelinha embaixo, então 40px liam como ~30 e o bloco todo (copy,
   dados, ação) ficava colado. */
.quando{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--sp-2xl)}
.quando li{display:flex; align-items:center; gap:.55rem;
  padding:.6rem .95rem; border-radius:999px;
  border:1px solid var(--linha-inv); background:rgba(242,246,249,.05);
  font-family:var(--f-m); font-size:.8125rem; letter-spacing:.02em; color:var(--tx-inv-2);
  white-space:nowrap}
/* No celular os três chips caíam um por linha. Corpo e respiro menores,
   mais o "· quinta" escondido, fazem data e horário caberem juntos na
   primeira linha. Encolher a fonte até caber com tudo dava 3px de folga
   em 390px, e voltava a quebrar em 360px: não é margem de segurança. */
.so-largo{display:none}
@media(min-width:760px){.so-largo{display:inline}}
/* Abaixo de 360px nem a data curta e o horário cabem juntos: a data
   troca por uma forma abreviada. Encolher a fonte até caber levaria os
   chips a 9px, o que é pior que abreviar o mês. */
.d-curta{display:none}
@media(max-width:359px){
  .d-longa{display:none}
  .d-curta{display:inline}
  .quando{gap:.3rem}
  .quando li{padding:.45rem .65rem}
}
@media(max-width:759px){
  .quando{gap:.4rem}
  .quando li{font-size:.6875rem; padding:.5rem .75rem; gap:.45rem; letter-spacing:0}
  .quando .pt{width:6px; height:6px}
}
.quando b{color:var(--tx-inv); font-weight:500}
.quando .pt{width:7px; height:7px; border-radius:50%; background:var(--pt,var(--c2)); flex:none}

/* ══════════ 02 · OS DADOS ════════════════════════════════════ */
.dados{background:var(--navy); color:var(--tx-inv); border-top:1px solid var(--linha-inv)}
.dados .wrap{padding-block:var(--sp-xl)}
.grade4{display:grid; gap:0}
@media(min-width:760px){.grade4{grid-template-columns:repeat(4,1fr)}}
/* Régua em CIMA, não embaixo: com border-bottom sobrava um filete solto
   no pé do último bloco e faltava um no topo do primeiro. Assim cada
   linha da grade ganha a sua, e nenhuma fica órfã. */
.grade4 li{padding:var(--sp-l) 0 var(--sp-m); border-top:1px solid var(--linha-inv-2)}
@media(min-width:760px){
  /* linha única: nenhuma régua horizontal, só as verticais entre eles */
  .grade4 li{border-top:none; padding:var(--sp-l) var(--sp-l) 0 0}
  .grade4 li+li{border-left:1px solid var(--linha-inv-2); padding-left:var(--sp-l)}
}
.grade4 .n{display:block; font-size:var(--fs-num); font-weight:300; line-height:1.05;
  letter-spacing:-.04em; color:var(--matiz-inv,var(--tx-inv)); margin-bottom:.5rem;
  text-wrap:balance}
/* A unidade ("mil", "bilhoes") anda junto do algarismo, mas em corpo
   pequeno e caixa alta: assim "US$ 1 TRILHAO" cabe na coluna sem
   derrubar o tamanho do numero, que e o que carrega o impacto. */
.grade4 .n em{font-style:normal; font-size:.38em; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; vertical-align:.34em;
  /* o algarismo e texto GRANDE (30px no minimo) e passa com 3:1, mas a
     unidade cai para 11-21px: aqui vale 4,5:1, e a familia -inv nao
     alcanca (o petroleo media 3,20). Dai a variante -txt-inv. */
  color:var(--matiz-txt,var(--tx-inv))}
.grade4 .n em.pre{margin-right:.02em}
.grade4 .n em.sinal{font-size:.6em; font-weight:300; letter-spacing:-.02em;
  text-transform:none; vertical-align:baseline}
/* display:block e o que faz a entrelinha valer. Como <span> inline, a
   linha nao podia ficar menor que o strut do <li> (17px x 1.6 = 27px
   herdados do corpo), entao o line-height:1.45 (20px) era ignorado e
   as descricoes saiam com 27px de entrelinha. */
.grade4 .r{display:block; font-size:.9375rem; line-height:1.45; color:var(--tx-inv-2)}
.dados .fontes{margin-top:var(--sp-l); max-width:none; font-family:var(--f-m);
  font-size:.6875rem; line-height:1.7; letter-spacing:.04em; color:var(--tx-inv-2)}
/* No celular quatro linhas empilhadas ficavam altas demais: 2x2, e as
   bordas encostadas para a régua não aparecer partida no meio. */
@media(max-width:759px){
  .grade4{grid-template-columns:1fr 1fr; column-gap:0}
  .grade4 li{padding:var(--sp-m) var(--sp-m) var(--sp-l) 0}
  /* a régua só separa a segunda linha da primeira: acima da primeira
     não existe nada para separar */
  .grade4 li:nth-child(-n+2){border-top:none; padding-top:0}
  .grade4 li:nth-child(even){border-left:1px solid var(--linha-inv-2);
    padding-left:var(--sp-m); padding-right:0}
  .grade4 .n{font-size:1.875rem}
  .grade4 .r{font-size:.875rem}
  .dados .fontes{font-size:.625rem; margin-top:var(--sp-m)}
}

/* ══════════ 03 · A ABERTURA ══════════════════════════════════ */
.abertura{background:var(--branco); color:var(--tx)}
.ab-grid{display:grid; gap:var(--sp-xl); margin-top:var(--sp-xl)}
@media(min-width:900px){
  .ab-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-2xl)}
}
.ab-grid p+p{margin-top:var(--sp-m)}
.ab-grid p{color:var(--tx-2); max-width:none}
.ab-grid strong{color:var(--tx); font-weight:600}
/* os três ganhos: fecham a seção com o que a conversa produz */
.ganhos{display:grid; gap:var(--sp-l); margin-top:var(--sp-2xl);
  padding-top:var(--sp-xl); border-top:1px solid var(--linha)}
@media(min-width:760px){.ganhos{grid-template-columns:repeat(3,1fr); gap:var(--sp-xl)}}
.ganhos h3{font-family:var(--f-m); font-size:var(--fs-eyebrow); letter-spacing:.15em;
  text-transform:uppercase; font-weight:500; color:var(--matiz-tx,var(--matiz));
  margin-bottom:.6rem}
.ganhos p{font-size:.9375rem; line-height:1.55; color:var(--tx-2); max-width:none}

/* ══════════ 04 · A VIRADA (a pergunta) ═══════════════════════ */
.virada{background:var(--navy-0); color:var(--tx-inv); overflow:hidden}
/* faixa de espectro no topo: a assinatura da marca marcando a virada */
.faixa-espectro{position:absolute; top:0; left:0; right:0; height:5px;
  /* absoluta: como filha normal ela nascia depois do padding da seção e
     ficava flutuando no meio do fundo escuro, em vez de marcar a virada */
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),
    var(--c5),var(--c6),var(--c7),var(--c8),var(--c9))}
/* No desktop o título e a pergunta ficavam empilhados na metade
   esquerda e sobrava meia tela vazia. Lado a lado, a seção inteira
   trabalha e a pergunta ganha o peso de resposta ao título. */
.v-topo{display:grid; gap:var(--sp-xl)}
@media(min-width:1000px){
  .v-topo{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:var(--sp-2xl); align-items:start}
}
.virada h2{max-width:26ch}
@media(min-width:1000px){.v-topo .destaque{margin-top:.35rem}}
@media(max-width:999px){.v-topo .destaque{margin-top:var(--sp-xl)}}
.virada .depois{margin-top:var(--sp-2xl); display:grid; gap:var(--sp-l)}
@media(min-width:900px){.virada .depois{grid-template-columns:1fr 1fr; gap:var(--sp-2xl)}}
.virada .depois p{color:var(--tx-inv-2); max-width:none}
.virada .depois strong{color:var(--tx-inv); font-weight:500}
/* O contraste do deck: o que não basta contra o que é preciso. Duas
   colunas com régua entre elas, para a oposição ser lida de relance. */
.balanco{display:grid; gap:var(--sp-xl); margin-top:var(--sp-2xl);
  padding-top:var(--sp-xl); border-top:1px solid var(--linha-inv-2)}
@media(min-width:860px){.balanco{grid-template-columns:1fr 1fr; gap:var(--sp-2xl)}}
@media(min-width:860px){.balanco>div+div{border-left:1px solid var(--linha-inv-2);
  padding-left:var(--sp-2xl)}}
.balanco h3{font-family:var(--f-m); font-size:.8125rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500; margin-bottom:var(--sp-m);
  color:var(--matiz-txt)}
.balanco li{padding:.85rem 0; border-top:1px solid var(--linha-inv-2)}
.balanco li:first-of-type{border-top:none; padding-top:0}
.balanco b{display:block; font-weight:600; color:var(--tx-inv); margin-bottom:.15rem}
.balanco span{font-size:.9375rem; line-height:1.5; color:var(--tx-inv-2)}

/* ══════════ 05 · CHEGA DE NR-01 DE FACHADA ═══════════════════ */
/* A seção mais afiada do material: nomeia o que não funciona. Fundo
   branco e tipografia grande — aqui o argumento é a arte. */
.fachada{background:var(--branco); color:var(--tx)}
.chegas{display:grid; gap:0; margin-top:var(--sp-2xl)}
.chegas li{display:grid; gap:var(--sp-m); padding:var(--sp-l) 0;
  border-top:1px solid var(--linha); align-items:baseline}
@media(min-width:760px){.chegas li{grid-template-columns:auto minmax(0,1fr); gap:var(--sp-l)}}
.chegas li:last-child{border-bottom:1px solid var(--linha)}
.chegas .rot{font-family:var(--f-m); font-size:.75rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--matiz-tx,var(--matiz)); white-space:nowrap}
.chegas p{font-size:clamp(1.0625rem,.95rem + .5vw,1.375rem); line-height:1.4;
  letter-spacing:-.012em; color:var(--tx); max-width:none}
/* o que isso exige: quatro exigências, uma por matiz */
.exige{display:grid; gap:var(--sp-l); margin-top:var(--sp-2xl)}
@media(min-width:640px){.exige{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.exige{grid-template-columns:repeat(4,1fr); gap:var(--sp-m)}}
.exige div{padding-top:var(--sp-m); border-top:3px solid var(--matiz)}
.exige h3{font-size:1.0625rem; margin-bottom:.3rem}
.exige p{font-size:.9375rem; line-height:1.5; color:var(--tx-2); max-width:none}
.fachada .destaque{margin-top:var(--sp-2xl)}

/* ══════════ 06 · AS PAUTAS ═══════════════════════════════════ */
.pautas{background:var(--gelo); color:var(--tx)}
.pauta-grid{display:grid; gap:var(--sp-m); margin-top:var(--sp-2xl)}
@media(min-width:640px){.pauta-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.pauta-grid{grid-template-columns:repeat(4,1fr)}}
.pauta{position:relative; background:var(--branco); border-radius:var(--r);
  padding:var(--sp-l); border:1px solid var(--linha); overflow:hidden;
  transition:transform var(--dur-2) var(--ease-o), box-shadow var(--dur-2) var(--ease)}
/* a barra de matiz é o índice: identifica a pauta antes de ler */
.pauta::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--matiz)}
.pauta .ord{display:block; font-family:var(--f-m); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; color:var(--matiz-tx,var(--matiz)); margin-bottom:.9rem}
.pauta h3{margin-bottom:.55rem}
.pauta p{font-size:.9375rem; line-height:1.55; color:var(--tx-2); max-width:none}
@media(hover:hover){
  .pauta:hover{transform:translateY(-4px); box-shadow:0 18px 38px -22px rgba(15,26,36,.45)}
}
.pauta.is-near{transform:translateY(-4px); box-shadow:0 18px 38px -22px rgba(15,26,36,.45)}

/* ══════════ 07 · A AGENDA (trilho de espectro) ═══════════════ */
.agenda{background:var(--branco); color:var(--tx)}
.linha-tempo{position:relative; margin-top:var(--sp-2xl); padding-left:clamp(3rem,7vw,5.5rem)}
/* o trilho: cinza por baixo, espectro por cima, revelado pela rolagem.
   Progresso calculado em JS, não "animation-timeline": a linha é mais
   alta que a tela e a faixa de view() cairia fora de vista, além de
   não existir em Safari e Firefox. */
.trilho{position:absolute; left:clamp(1.05rem,2.6vw,2rem); top:.6rem; bottom:.6rem; width:3px;
  background:var(--nevoa); border-radius:3px; overflow:hidden}
/* Revelado por corte, não por escala: com scaleY o gradiente inteiro
   se comprimia no trecho preenchido e às 14h já aparecia roxo. Com
   clip-path o espectro fica ancorado e cada hora tem a sua cor. */
.trilho i{position:absolute; inset:0;
  background:linear-gradient(180deg,var(--c1),var(--c2),var(--c3),var(--c4),
    var(--c5),var(--c6),var(--c7),var(--c8));
  clip-path:inset(0 0 calc((1 - var(--fill,0)) * 100%) 0)}
@media(prefers-reduced-motion:reduce){.trilho i{clip-path:none}}
.bloco-h{position:relative; padding-block:var(--sp-l); border-bottom:1px solid var(--linha)}
.bloco-h:last-child{border-bottom:none}
/* o ponto do horário, ancorado no trilho */
.bloco-h::before{content:""; position:absolute;
  left:calc(-1*clamp(3rem,7vw,5.5rem) + clamp(1.05rem,2.6vw,2rem) - 4.5px);
  top:calc(var(--sp-l) + .45rem);
  width:12px; height:12px; border-radius:50%;
  background:var(--branco); border:3px solid var(--matiz,var(--navy-2))}
.bloco-h .hora{display:block; font-family:var(--f-m); font-size:.875rem; font-weight:500;
  letter-spacing:.04em; color:var(--matiz-tx,var(--matiz,var(--navy-2))); margin-bottom:.35rem}
.bloco-h h3{margin-bottom:.4rem}
.bloco-h h3 em{font-style:normal; font-weight:400; color:var(--tx-2)}
.bloco-h p{font-size:.9375rem; line-height:1.55; color:var(--tx-2); max-width:62ch}
.bloco-h--pausa h3{font-weight:400; color:var(--tx-3)}
@media(min-width:900px){
  .bloco-h{display:grid; grid-template-columns:120px minmax(0,1fr); gap:var(--sp-l);
    align-items:start}
  .bloco-h .hora{margin-bottom:0; padding-top:.15rem}
}
.aviso{margin-top:var(--sp-l); font-family:var(--f-m); font-size:.75rem;
  letter-spacing:.05em; color:var(--tx-3)}

/* ══════════ 08 · AS VOZES ════════════════════════════════════ */
.vozes{background:var(--gelo); color:var(--tx)}
.voz-grid{display:grid; gap:var(--sp-l); margin-top:var(--sp-2xl)}
@media(min-width:760px){.voz-grid{grid-template-columns:repeat(3,1fr)}}
.voz{background:var(--branco); border:1px solid var(--linha); border-radius:var(--r);
  overflow:hidden; transition:transform var(--dur-2) var(--ease-o),
  box-shadow var(--dur-2) var(--ease)}
/* quadro vertical: os três retratos são verticais, e num quadro deitado
   o corte comia o alto da cabeça. "--pos" ajusta caso a caso. */
.voz-foto{position:relative; aspect-ratio:1/1.06; overflow:hidden; background:var(--nevoa)}
.voz-foto img{width:100%; height:100%; object-fit:cover;
  object-position:var(--pos,50% 20%);
  transition:transform var(--dur-3) var(--ease)}
/* a lâmina de matiz na base da foto amarra o retrato ao sistema */
.voz-foto::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:var(--matiz)}
/* Sem foto ainda. Em vez de um buraco cinza, uma peça desenhada: o anel
   da marca como marca-d'água, o monograma e o matiz da palestrante. Não
   entra rosto de banco de imagem no lugar de pessoa real. */
.voz-foto--vazia{position:relative; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.9),transparent 62%),
    linear-gradient(150deg,var(--matiz-vaz,var(--nevoa)),var(--gelo) 78%)}
/* o anel, grande e recortado pela borda do card. É <img> e não
   background: um url() em style inline escaparia tanto do gerador de
   blocos quanto do build autocontido, e a marca-d'água daria 404. */
.voz-foto--vazia .anel-marca{position:absolute; width:78%; height:auto;
  right:-14%; bottom:-22%; opacity:.16; filter:saturate(.9)}
.voz-foto--vazia b{position:relative; z-index:1;
  font-size:clamp(2.25rem,6vw,3rem); font-weight:300; letter-spacing:.02em;
  /* a 55% de opacidade o lima media 2,71 sobre o gelo. Peso 300 dá a
     mesma leveza sem custar contraste. */
  color:var(--matiz-mono,var(--matiz))}
.voz-foto--vazia .aviso-foto{position:absolute; z-index:1; left:0; right:0; bottom:0;
  padding:.6rem var(--sp-m); text-align:center;
  font-family:var(--f-m); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx-3)}
.voz-corpo{padding:var(--sp-l)}
.voz .tema{display:block; font-family:var(--f-m); font-size:.6875rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--matiz-tx,var(--matiz));
  margin-bottom:.6rem}
.voz h3{margin-bottom:.35rem}
.voz p{font-size:.9375rem; line-height:1.5; color:var(--tx-2); max-width:none}
@media(hover:hover){
  .voz:hover{transform:translateY(-4px); box-shadow:0 20px 42px -24px rgba(15,26,36,.45)}
  .voz:hover .voz-foto img{transform:scale(1.04)}
}
.voz.is-near{transform:translateY(-4px); box-shadow:0 20px 42px -24px rgba(15,26,36,.45)}

/* ══════════ 09 · A MINDSCORE ═════════════════════════════════ */
/* A solução da casa, apresentada como processo e não como anúncio:
   quatro passos encadeados, cada um com o seu matiz. */
.mind{background:var(--navy); color:var(--tx-inv); overflow:hidden}
.mind .lead{color:var(--tx-inv-2)}
.mind .destaque{margin-top:var(--sp-xl); max-width:26ch}
.passos{display:grid; gap:var(--sp-l); margin-top:var(--sp-2xl); counter-reset:pm}
@media(min-width:640px){.passos{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.passos{grid-template-columns:repeat(4,1fr); gap:var(--sp-m)}}
.passos li{position:relative; padding-top:var(--sp-m);
  border-top:1px solid var(--linha-inv-2)}
/* a seta liga um passo ao outro: é um processo, não uma lista */
@media(min-width:1000px){
  /* a seta fica sobre a régua do topo, no vão entre as colunas: em
     "top:2.6rem" ela caía por cima do título do passo seguinte */
  .passos li:not(:last-child)::after{content:"→"; position:absolute; right:-.85rem; top:-.52rem;
    color:var(--matiz-inv); font-size:1rem; line-height:1;
    background:var(--navy); padding:0 .15rem}
}
.passos .num{display:block; font-family:var(--f-m); font-size:.75rem; font-weight:500;
  letter-spacing:.14em; color:var(--matiz-txt); margin-bottom:.5rem}
.passos h3{font-size:1.0625rem; margin-bottom:.3rem; color:var(--tx-inv)}
.passos p{font-size:.9375rem; line-height:1.5; color:var(--tx-inv-2); max-width:none}
.mind .nota{color:var(--tx-inv-2)}
.mind .nota strong{color:var(--tx-inv); font-weight:500}

/* ══════════ 10 · O PÚBLICO ═══════════════════════════════════ */
.publico{background:var(--branco); color:var(--tx)}
.perfis{display:grid; gap:0; margin-top:var(--sp-2xl); border-top:1px solid var(--linha)}
@media(min-width:760px){.perfis{grid-template-columns:1fr 1fr; column-gap:var(--sp-2xl)}}
.perfis li{display:flex; gap:var(--sp-m); align-items:baseline;
  padding:var(--sp-ml) 0; border-bottom:1px solid var(--linha)}
.perfis .mk{flex:none; width:2.2ch; font-family:var(--f-m); font-size:.75rem; font-weight:500;
  letter-spacing:.06em; color:var(--matiz,var(--navy-2))}
.perfis .tx{flex:1; min-width:0; line-height:1.45}

/* ══════════ 11 · OS DOIS CAMINHOS ════════════════════════════ */
.acesso{background:var(--gelo); color:var(--tx)}
.caminhos{display:grid; gap:var(--sp-l); margin-top:var(--sp-2xl); align-items:start}
@media(min-width:860px){.caminhos{grid-template-columns:1fr 1fr; gap:var(--sp-xl)}}
.caminho{background:var(--branco); border:1px solid var(--linha); border-radius:var(--r);
  padding:clamp(1.5rem,3.4vw,2.5rem); position:relative; overflow:hidden}
.caminho::before{content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--matiz)}
.caminho .selo{display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-m); font-size:.6875rem; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--matiz-tx,var(--matiz)); margin-bottom:var(--sp-m)}
.caminho h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem); letter-spacing:-.022em;
  margin-bottom:.7rem}
.caminho p{color:var(--tx-2); max-width:none}
/* o que cada caminho entrega: o deck detalha, a página também deve */
.itens{margin-top:var(--sp-l)}
.itens li{padding:.75rem 0; border-top:1px solid var(--linha)}
.itens li:first-child{border-top:none; padding-top:0}
.itens b{display:block; font-weight:600; font-size:.9375rem; margin-bottom:.1rem}
.itens span{font-size:.875rem; line-height:1.5; color:var(--tx-2)}
.caminho--pago .itens li{border-top-color:var(--linha-inv-2)}
.caminho--pago .itens b{color:var(--tx-inv)}
.caminho--pago .itens span{color:var(--tx-inv-2)}
.caminho .btn{margin-top:var(--sp-l)}
/* o aviso do deck: o convite não garante vaga. Melhor dizer aqui do que
   frustrar depois. */
.ressalva{display:flex; gap:.8rem; align-items:flex-start; margin-top:var(--sp-xl);
  padding:var(--sp-m); border-radius:var(--r); background:var(--branco);
  border:1px solid var(--linha)}
.ressalva .sinal{flex:none; width:20px; height:20px; border-radius:50%; margin-top:.15rem;
  background:var(--c2); color:#2A1D00; font-family:var(--f-m); font-size:.75rem;
  font-weight:500; display:grid; place-items:center}
.ressalva p{font-size:.875rem; line-height:1.55; color:var(--tx-2); max-width:none}
.ressalva strong{color:var(--tx); font-weight:600}
.caminho .miudo{margin-top:.85rem; font-family:var(--f-m); font-size:.75rem;
  line-height:1.6; letter-spacing:.03em; color:var(--tx-3)}
/* o card do ingresso é o compromisso firme: ganha o azul institucional */
.caminho--pago{background:var(--navy); color:var(--tx-inv); border-color:transparent}
.caminho--pago h3{color:var(--tx-inv)}
.caminho--pago p{color:var(--tx-inv-2)}
.caminho--pago .miudo{color:var(--tx-inv-3)}
.caminho--pago .selo{color:var(--c2)}

/* ══════════ 12 · A TESE ══════════════════════════════════════ */
.tese{background:var(--navy-0); color:var(--tx-inv); overflow:hidden}
.tese .wrap{position:relative; z-index:2}
.tres{margin-top:var(--sp-2xl); display:grid; gap:0}
.tres li{padding:var(--sp-l) 0; border-top:1px solid var(--linha-inv);
  font-size:clamp(1.125rem,.95rem + .8vw,1.5rem); line-height:1.35;
  letter-spacing:-.018em; font-weight:400; color:var(--tx-inv)}
.tres li:last-child{border-bottom:1px solid var(--linha-inv)}
.tres li b{font-weight:600; color:var(--marca,var(--c2))}
.tese .fecho{margin-top:var(--sp-2xl); color:var(--tx-inv-2); max-width:62ch}
.tese .fecho strong{color:var(--tx-inv); font-weight:500}

/* ══════════ 13 · O LOCAL ═════════════════════════════════════ */
.local{background:var(--branco); color:var(--tx)}
.local-grid{display:grid; gap:var(--sp-xl); margin-top:var(--sp-xl); align-items:center}
@media(min-width:900px){
  .local-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--sp-2xl)}
}
.local-foto{border-radius:var(--r); overflow:hidden; aspect-ratio:16/11;
  border:1px solid var(--linha)}
.local-foto img{width:100%; height:100%; object-fit:cover; object-position:50% 45%}
.endereco{font-style:normal; margin-top:var(--sp-m)}
.endereco dt{font-family:var(--f-m); font-size:.6875rem; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--tx-3); margin-top:var(--sp-m)}
.endereco dt:first-child{margin-top:0}
.endereco dd{margin:.3rem 0 0; font-size:1.0625rem; line-height:1.5; color:var(--tx)}
.endereco dd span{display:block; color:var(--tx-2); font-size:.9375rem}
.vagas{display:inline-flex; align-items:center; gap:.6rem; margin-top:var(--sp-l);
  font-family:var(--f-m); font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c9)}
.vagas .pt{width:8px; height:8px; border-radius:50%; background:currentColor;
  animation:pulsa 2.4s var(--ease) infinite}
@keyframes pulsa{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.7)}}
@media(prefers-reduced-motion:reduce){.vagas .pt{animation:none}}

/* ══════════ Rodapé + barra fixa + WhatsApp ═══════════════════ */
.rodape{position:relative; background:var(--navy-0); color:var(--tx-inv-3);
  padding-block:var(--sp-2xl)}
/* a mesma assinatura do topo, para a página fechar como abriu */
.rodape .marca{margin-bottom:0}
.rodape .marca img{width:48px; height:48px}
/* faixa de espectro fina acima do rodapé: o anel virou linha */
.rodape::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),
    var(--c5),var(--c6),var(--c7),var(--c8),var(--c9))}
.rod-topo{display:grid; gap:var(--sp-xl); align-items:center}
@media(min-width:860px){
  .rod-topo{grid-template-columns:auto minmax(0,1fr); gap:var(--sp-2xl)}
}
/* os dados do evento em colunas rotuladas, não numa linha corrida */
.rod-dados{display:grid; gap:var(--sp-l)}
@media(min-width:560px){.rod-dados{grid-template-columns:repeat(3,auto); gap:var(--sp-xl);
  justify-content:start}}
@media(min-width:860px){.rod-dados{justify-content:end; text-align:right}}
.rod-dados dt{font-family:var(--f-m); font-size:.625rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--matiz-txt,var(--tx-inv-3)); margin-bottom:.35rem}
.rod-dados dd{margin:0; font-size:.9375rem; line-height:1.45; color:var(--tx-inv)}
.rod-dados dd span{display:block; font-size:.8125rem; color:var(--tx-inv-2)}
.rodape .filete{display:block; height:1px; background:var(--linha-inv-2);
  margin:var(--sp-2xl) 0 var(--sp-l)}
/* O patrocinador tem faixa propria, entre os dados e a linha legal:
   nem disputa a assinatura da marca no topo nem vira letra miuda. */
.rod-patro{display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--sp-s) var(--sp-l); padding-bottom:var(--sp-l);
  border-bottom:1px solid var(--linha-inv-2); margin-bottom:var(--sp-l)}
.rod-patro .rot{font-family:var(--f-m); font-size:.625rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tx-inv-3)}
.patro{display:flex; align-items:center; gap:.6rem}
/* o arquivo tem 52px de lado: exibido a 36 ele ainda tem folga em tela
   retina, e nao vira mancha. */
.patro img{width:36px; height:36px; flex:none}
.patro b{font-family:var(--f-t); font-weight:600; font-size:.9375rem;
  letter-spacing:.005em; color:var(--tx-inv)}
.rod-fim{display:grid; gap:.6rem}
@media(min-width:660px){.rod-fim{grid-template-columns:1fr auto; align-items:baseline}}
.rodape .legal{font-family:var(--f-m); font-size:.75rem; letter-spacing:.05em;
  line-height:1.8; color:var(--tx-inv-3); max-width:none; margin:0}
.rodape .legal span{white-space:nowrap}
@media(max-width:559px){
  .rodape .legal span{display:block}
  .rodape .legal .bar{display:none}
}
.rod-tag{font-family:var(--f-m); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tx-inv-3)}
@media(min-width:660px){.rod-tag{text-align:right}}

.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:rgba(8,19,31,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--linha-inv);
  padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-m);
  transform:translateY(115%); transition:transform .4s var(--ease-o); visibility:hidden;
}
.sticky.on{transform:translateY(0); visibility:visible}
.sticky .prog{position:absolute; left:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--c1-inv),var(--c2-inv),var(--c4-inv),
    var(--c6-inv),var(--c7-inv));
  width:100%; transform:scaleX(var(--p,0)); transform-origin:left}
.sticky-txt{display:block; font-size:.9375rem; line-height:1.4; color:var(--tx-inv-2);
  min-width:0; flex:1 1 auto}
.sticky-txt b{display:block; color:var(--tx-inv); font-weight:600}
.sticky .btn{flex:0 0 auto}
@media(max-width:759px){
  .sticky{gap:.55rem; padding:.35rem .7rem calc(.35rem + env(safe-area-inset-bottom))}
  .sticky-txt{font-size:.625rem; line-height:1.32}
  .sticky-txt b{font-size:.625rem}
  .sticky .btn{--btn-h:2.375rem; --btn-px:.8rem; --btn-fs:.75rem}
  .sticky .btn .seta{display:none}
}
@media(max-width:389px){
  .sticky{gap:.45rem; padding-inline:.6rem}
  .sticky-txt{font-size:.5625rem; letter-spacing:-.005em}
  .sticky-txt b{font-size:.5625rem}
  .sticky .btn{--btn-h:2.25rem; --btn-px:.55rem; --btn-fs:.6875rem}
}

/* Bolha do WhatsApp. Vem DEPOIS da faixa no markup de propósito: o
   seletor irmão ".sticky.on ~ .zap" sobe a bolha quando a faixa
   aparece, sem JavaScript nenhum. */
.zap{position:fixed; z-index:130;
  right:var(--gut); bottom:calc(var(--sp-l) + env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.3);
  transition:transform var(--dur-2) var(--ease-o), box-shadow var(--dur-2) var(--ease),
             bottom var(--dur-3) var(--ease-o)}
.zap svg{width:30px; height:30px; fill:currentColor; display:block}
@media(hover:hover){.zap:hover{transform:scale(1.07)}}
.zap:focus-visible{outline:2px solid #fff; outline-offset:3px}
/* o env() entra uma vez só: a altura da faixa já inclui o dela */
.sticky.on ~ .zap{bottom:calc(73px + .75rem + env(safe-area-inset-bottom))}
@media(max-width:759px){
  .zap{width:52px; height:52px; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom))}
  .zap svg{width:27px; height:27px}
  .sticky.on ~ .zap{bottom:calc(54px + .7rem + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.zap{transition:none}}

/* ── Telas muito estreitas (≤399px) ────────────────────────────
   Fica no fim da folha: mesma especificidade, quem decide é a ordem. */
@media(max-width:399px){
  .caminho{padding-inline:1.25rem}
  .btn--bloco .seta{display:none}
  .marca img{width:38px; height:38px}
}


/* ══ Pop-up do convite ══ */
.cs-cv{width:min(640px,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem);
  margin:auto; padding:0; border:0; border-radius:var(--r,14px); overflow:auto;
  background:var(--branco,#fff); color:var(--tx,#0F1A24);
  font-family:var(--f-t,'Work Sans',system-ui,sans-serif);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55); overscroll-behavior:contain}
.cs-cv,.cs-cv *,.cs-cv *::before,.cs-cv *::after{box-sizing:border-box}
.cs-cv::backdrop{background:rgba(8,19,31,.72); backdrop-filter:blur(4px)}
.cs-cv[open]{animation:cs-cv-in .45s var(--ease-o,cubic-bezier(.16,1,.3,1))}
@keyframes cs-cv-in{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.cs-cv[open]{animation:none}}

.cs-cv-topo{position:relative; padding:1.75rem 1.75rem 1.25rem;
  background:var(--navy,#0E2438); color:var(--tx-inv,#F2F6F9)}
/* a mesma faixa de espectro do rodapé, agora no alto do pop-up */
.cs-cv-topo::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#D8541E,#E9A100,#8CA81E,#00875A,#00758C,#1D507B,#5B2D82,#A61A56,#C2213A)}
.cs-cv-selo{display:block; font-family:var(--f-m,'IBM Plex Mono',monospace); font-size:.6875rem;
  font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:#E9A100; margin:0 0 .6rem}
.cs-cv h2{margin:0; font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem); line-height:1.15;
  letter-spacing:-.02em; font-weight:600; color:inherit; font-family:inherit}
.cs-cv-topo p{margin:.6rem 0 0; font-size:.9375rem; line-height:1.5;
  color:var(--tx-inv-2,rgba(242,246,249,.76)); max-width:none}
.cs-cv-x{position:absolute; top:.9rem; right:.9rem; width:40px; height:40px; padding:0;
  border:0; border-radius:50%; background:transparent !important; color:var(--tx-inv,#F2F6F9) !important;
  font-size:1.5rem; line-height:1; cursor:pointer; display:grid; place-items:center}
.cs-cv-x:hover{background:rgba(255,255,255,.1) !important}
.cs-cv-x:focus-visible{outline:2px solid #E9A100; outline-offset:2px}

.cs-cv form{padding:1.5rem 1.75rem 1.75rem; margin:0}
.cs-cv-grade{display:grid; gap:1rem}
@media(min-width:560px){.cs-cv-grade{grid-template-columns:1fr 1fr; gap:1rem 1.1rem}
  .cs-cv-largo{grid-column:1 / -1}}
.cs-cv label{display:block; margin:0}
.cs-cv-rot{display:block; font-size:.8125rem; font-weight:600; margin-bottom:.35rem;
  color:var(--tx,#0F1A24)}
.cs-cv-rot i{font-style:normal; font-weight:400; color:var(--tx-3,#677684)}
.cs-cv input:not([type=checkbox]){display:block; width:100%; height:2.875rem; margin:0;
  padding:0 .9rem; font:inherit; font-size:1rem; color:var(--tx,#0F1A24) !important;
  background:var(--gelo,#F2F5F7) !important; border:1px solid var(--linha,rgba(15,26,36,.13)) !important;
  border-radius:10px !important; box-shadow:none; transition:border-color .2s, background-color .2s}
.cs-cv input:focus{outline:none; border-color:var(--navy-2,#1D507B) !important;
  background:#fff !important; box-shadow:0 0 0 3px rgba(29,80,123,.18)}
.cs-cv input.cs-cv-erro{border-color:#C2213A !important}
.cs-cv-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
.cs-cv-aviso{margin:1.1rem 0 0; font-size:.75rem; line-height:1.55; color:var(--tx-3,#677684); max-width:none}
.cs-cv-msg{margin:1rem 0 0; font-size:.875rem; line-height:1.5; color:#C2213A; max-width:none}
.cs-cv-msg:empty{display:none}
.cs-cv-enviar{margin-top:1.25rem; width:100%}
.cs-cv-enviar[disabled]{opacity:.65; cursor:progress}
.cs-cv-enviar[disabled]::after{display:none}

.cs-cv-ok{padding:2.5rem 1.75rem 2rem; text-align:center}
.cs-cv-ok .cs-cv-check{width:56px; height:56px; margin:0 auto 1rem; border-radius:50%;
  display:grid; place-items:center; background:#00875A; color:#fff; font-size:1.75rem}
.cs-cv-ok h2{color:var(--tx,#0F1A24)}
.cs-cv-ok p{margin:.75rem auto 0; font-size:.9375rem; line-height:1.55;
  color:var(--tx-2,#41505E); max-width:44ch}
.cs-cv-ok .btn{margin-top:1.5rem}
@media(max-width:479px){
  .cs-cv-topo{padding:1.5rem 1.25rem 1.1rem}
  .cs-cv form{padding:1.25rem}
}
.cs-cv-ok-lgpd{display:flex !important; gap:.6rem; align-items:flex-start; margin-top:1.1rem !important;
  font-size:.8125rem; line-height:1.5; color:var(--tx-2,#41505E)}
.cs-cv-ok-lgpd input{flex:none; width:18px; height:18px; margin:.1rem 0 0; accent-color:var(--navy-2,#1D507B)}
.cs-cv-ok-lgpd a,.cs-cv-msg a{color:var(--navy-2,#1D507B); text-decoration:underline}
body{margin:0; background:#fff}
.cs-cv-selo{padding-right:2.5rem}