/* ============================================================
   LeaderX Talks · Capítulo São Paulo
   Direção: Premium Tech + Executive + Editorial
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* escala cromática — PRETO + VERMELHO VIVO
     O preto empilhado é o do institucional (medido): 000 / 080808 /
     0D0D0D / 111 / 161616, com off-white #F5F3EF e dourado #BFA15F.

     O vermelho pode ser VIVO aqui porque o chão é preto: #FF1F3D dá
     4,96:1 sobre #0D0D0D e passa. Sobre branco daria 3,3 e reprovaria —
     foi por isso que a variação C precisou de carmim escuro.
     Os nomes seguem "blue"/"navy" de propósito: renomear 67 usos só para
     trocar a etiqueta seria risco sem ganho. O que eles valem é isto: */
  --navy-950:#000000;   /* o mais fundo */
  --navy-900:#080808;   /* o preto do body institucional */
  --navy-800:#161616;
  --blue-600:#FA0D18;   /* VIVID — 4,75:1 sobre preto: o unico que serve de texto miudo */
  --blue-500:#C93631;   /* PERSIAN — fundo (5,18 c/ branco) e texto GRANDE */
  --blue-400:#FA0D18;   /* VIVID — acento sobre escuro */
  --ice-100:#161616;
  --ice-50:#111111;
  --gray-900:#F5F3EF;   /* invertido: agora e o TEXTO */
  --gray-600:#9E9A93;   /* texto secundario sobre preto */
  --gray-300:#282828;   /* fios */
  --gray-200:#1A1A1A;
  --white:#0D0D0D;      /* a superficie "clara" agora e preta */
  --gold:#BFA15F;
  /* os tres profundos da paleta: superficie, nunca texto */
  --sangria:#8E020A;    /* 9,71:1 com branco — fundo do botao principal */
  --rosewood:#650207;   /* 12,11:1 — superficie profunda */
  --rootbeer:#270202;   /* 17,29:1 — tinta mais escura */
  --gold-l:#D4AF7A;
  --gold-d:#BFA15F;   /* nao ha mais fundo claro: um tom so */

  /* espaçamento */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s24:96px; --s32:128px;

  /* layout */
  --max:1440px;
  --gut:clamp(20px,4.4vw,56px);
  --colgap:clamp(16px,1.7vw,24px);
  --sec-y:clamp(80px,10vw,168px);
  --nav-h:104px;

  /* raio */
  /* ícones — três degraus, +20% sobre a escala anterior */
  --ico:23px;      /* dentro de botões e ações */
  --ico-sm:18px;   /* controles compactos */
  --ico-lg:26px;   /* alvos autônomos: sociais, LinkedIn, lightbox */

  --r-btn:10px;
  --r-card:14px;
  --r-img:12px;

  /* tipografia */
  --f:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* escala de microtipografia
     A tensão entre macro e micro é o que separa layout de editorial.
     Todo o sistema pequeno da página deriva destes quatro degraus:
     suba-os em bloco se a leitura precisar de mais corpo. */
  --fs-micro:13px;     /* etiquetas mono, marcadores, legendas, notas (era 12) */
  --fs-micro-lg:14.5px;/* eyebrow, chaves de seção, cargos secundários (era 13) */
  --fs-small:17px;     /* apoio: descrições densas, cargos, rodapé (era 15px) */
  --fs-body:17px;      /* leitura corrida */
  --fs-ui:16px;        /* rótulo de botão */
  --fs-ui-lg:19px;     /* item do menu mobile (alvo de toque) */
  --fs-ui-mono:18px;   /* contagem regressiva em monoespaçada */

  /* escala de display — sete degraus, do momento ao subtítulo.
     Cada tamanho da página sai daqui; nada de clamps avulsos. */
  --fs-d1:clamp(44px,6.3vw,104px);   /* momentos: hero e CTA final */
  --fs-d2:clamp(40px,5.6vw,92px);    /* assinatura: "É mesa de decisão" */
  --fs-d3:clamp(36px,4.4vw,72px);    /* evidência: horários, indicadores, pausa */
  --fs-h2:clamp(34px,3.9vw,64px);    /* títulos de seção */
  --fs-h3:clamp(26px,2.7vw,42px);    /* subtítulos fortes */
  --fs-h4:clamp(20px,1.85vw,30px);   /* nomes da mesa, blocos */
  --fs-h5:clamp(17px,1.35vw,21px);   /* nomes menores, perguntas */
  --fs-lead:clamp(17px,1.2vw,20px);  /* leads de seção */
  --fs-quote:clamp(26px,3.1vw,46px); /* pull quote */
  --fs-data:clamp(19px,1.5vw,25px);  /* dados da faixa do hero */

  /* MESA — camada gráfica de posições e pauta.
     Fios finos que organizam a página como lugares em torno de uma conversa. */
  --rule:var(--gray-300);            /* fio em fundo claro */
  --rule-d:rgba(255,255,255,.14);    /* fio em fundo escuro */
  --seat:var(--gray-600);            /* marcador de posição */

  /* textura de grão (substitui o padrão quadriculado) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  /* motion */
  --e:cubic-bezier(0.22,1,0.36,1);
  --e2:cubic-bezier(0.4,0,0.2,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--gray-900);
  font-family:var(--f);font-size:var(--fs-body);line-height:1.6;font-weight:400;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure,blockquote,figcaption{margin:0}
details summary::-webkit-details-marker{display:none}
::selection{background:var(--blue-500);color:#fff}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;border-radius:4px}
/* em fundo escuro o azul-500 cai para 2,56:1 e o anel some */
.sec--navy :focus-visible,.sec--ink :focus-visible,.voice :focus-visible,
svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:12px;left:12px;z-index:300;padding:10px 18px;background:var(--navy-950);color:#fff;border-radius:var(--r-btn);transform:translateY(-220%);transition:transform .3s var(--e)}
.skip:focus{transform:none}
[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* ---------- GRID EDITORIAL 12 COLUNAS ---------- */
.grid{
  width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap);
}

/* ---------- TIPOGRAFIA ---------- */
.mono{
  font-family:var(--fm);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.35;
}
.h2{
  font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.04em;font-weight:600;
  text-wrap:balance;
}
.h2 em{font-style:normal;color:var(--blue-500)}
.h2--sm{font-size:var(--fs-h3);line-height:1.06}

.eyebrow{display:flex;align-items:center;gap:12px;color:var(--blue-500);font-family:var(--fm);font-size:var(--fs-micro-lg);font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.eyebrow .mono{color:var(--gray-600);font-size:var(--fs-micro);letter-spacing:.1em}
.eyebrow--gold{color:var(--gold-l)}
.eyebrow--gold .mono{color:rgba(255,255,255,.62)}

/* cabeçalho de seção */
.shd{grid-column:1/13;width:100%;margin-bottom:clamp(40px,4.6vw,76px);max-width:900px}
.shd__t{margin-top:20px}
.shd__s{margin-top:22px;color:var(--gray-600);font-size:var(--fs-lead);line-height:1.55;max-width:52ch}
/* 52ch = ~70 caracteres reais; ver nota sobre o ch acima */
.shd__s--w{max-width:52ch}
.shd__s a{color:var(--blue-500);border-bottom:1px solid rgba(255,31,61,.3)}
.shd__s a:hover{border-color:var(--blue-500)}
.shd--row{max-width:none;display:grid;grid-template-columns:1fr auto;align-items:end;gap:clamp(24px,3vw,64px)}
.shd--row .shd__t{margin-top:16px}
.shd--row .shd__s{margin-top:0;max-width:38ch;padding-bottom:6px}
.shd--slim{margin-bottom:clamp(28px,3vw,44px)}

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 22px;border-radius:var(--r-btn);
  font-size:var(--fs-ui);font-weight:500;letter-spacing:-.01em;white-space:nowrap;
  border:1px solid transparent;
  transition:background-color .3s var(--e2),color .3s var(--e2),border-color .3s var(--e2),transform .3s var(--e),box-shadow .3s var(--e);
}
.btn--lg{min-height:56px;padding:0 28px;font-size:var(--fs-ui)}
.btn--sm{min-height:46px;padding:0 22px;font-size:var(--fs-ui)}
.btn--blk{width:100%}
.ico{width:var(--ico);height:var(--ico);flex:none}
.ico--arw{transition:transform .35s var(--e)}
.btn:hover .ico--arw{transform:translateX(5px)}

.btn--pri{background:var(--blue-500);color:#fff}
.btn--pri:hover{background:var(--blue-600);transform:translateY(-2px);box-shadow:0 8px 24px rgba(209,16,42,.25)}
.btn--pri:active{transform:translateY(0)}

.btn--sec{background:transparent;color:var(--navy-900);border-color:var(--gray-300)}
.btn--sec:hover{border-color:var(--navy-900);background:var(--navy-900);color:#fff;transform:translateY(-2px)}

.btn--dark{background:var(--navy-900);color:#fff}
.btn--dark:hover{background:var(--blue-600);transform:translateY(-2px)}

.btn--gho{background:transparent;color:var(--gray-600);border-color:var(--gray-300)}
.btn--gho:hover{color:var(--navy-900);border-color:var(--navy-900);transform:translateY(-2px)}

.btn--out{background:transparent;color:#fff;border-color:rgba(255,255,255,.26)}
.btn--out:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);transform:translateY(-2px)}

/* ---------- PROGRESSO ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:200;pointer-events:none}
.progress__bar{display:block;height:100%;width:0;background:var(--blue-500);transition:width .1s linear}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:150;height:var(--nav-h);display:flex;align-items:center;transition:background-color .4s var(--e2),box-shadow .4s var(--e2),border-color .4s}
.nav::after{content:'';position:absolute;inset:auto 0 0 0;height:1px;background:var(--gray-200);opacity:0;transition:opacity .4s}
.nav.stuck{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}
.nav.stuck::after{opacity:1}
/* sobre o hero escuro a barra fixa também escurece, para manter contraste */
.nav.stuck.over-dark{background:rgba(8,8,8,.82)}
.nav.stuck.over-dark::after{background:rgba(255,255,255,.14)}
.nav__in{align-items:center;column-gap:var(--colgap)}
.nav__brand{grid-column:1/4;position:relative;display:block;transition:opacity .25s}
.nav__logo{height:64px;width:auto;transition:opacity .35s var(--e2)}
.nav__logo--l{position:absolute;left:0;top:0;opacity:0}
.nav.over-dark .nav__logo--d{opacity:0}
.nav.over-dark .nav__logo--l{opacity:1}
.nav__brand:hover{opacity:.62}
.nav__links{grid-column:4/9;display:flex;justify-content:center;gap:clamp(18px,2.2vw,36px)}
.nav__links a{position:relative;font-size:var(--fs-small);font-weight:450;color:var(--gray-600);padding-block:6px;transition:color .25s}
.nav.over-dark .nav__links a{color:rgba(255,255,255,.62)}
.nav.over-dark .nav__links a:hover,.nav.over-dark .nav__links a.on{color:#fff}
.nav.over-dark .burger{border-color:rgba(255,255,255,.26)}
.nav.over-dark .burger:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.nav.over-dark .burger span{background:#fff}
.nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blue-500);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--e)}
.nav__links a:hover{color:var(--navy-900)}
.nav__links a:hover::after,.nav__links a.on::after{transform:scaleX(1);transform-origin:left}
.nav__links a.on{color:var(--navy-900)}
.nav__act{grid-column:9/13;display:flex;justify-content:flex-end;align-items:center;gap:12px}
.nav__act > *{flex:none}

.burger{display:none;width:46px;height:46px;border-radius:var(--r-btn);border:1px solid var(--gray-300);align-items:center;justify-content:center;flex-direction:column;gap:5px;transition:border-color .25s,background .25s}
.burger:hover{border-color:var(--navy-900)}
.burger span{display:block;width:18px;height:1.5px;background:var(--navy-900);transition:transform .4s var(--e),opacity .25s}
.burger.on span:nth-child(1){transform:translateY(3.2px) rotate(45deg)}
.burger.on span:nth-child(2){transform:translateY(-3.2px) rotate(-45deg)}

/* ---------- DRAWER ---------- */
.scrim[hidden]{display:none}
/* seção fora de cena: some de verdade, inclusive do leitor de tela */
section[hidden]{display:none !important}
.scrim{position:fixed;inset:0;z-index:158;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .45s var(--e2)}
.scrim.on{opacity:1}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:160;width:min(400px,88vw);
  display:flex;flex-direction:column;background:#fff;border-left:1px solid var(--gray-200);
  transform:translateX(101%);transition:transform .55s var(--e);
  overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom);
}
.drawer.on{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--gray-200)}
.drawer__logo{height:53px;width:auto}
.drawer__x{width:44px;height:44px;border-radius:var(--r-btn);display:grid;place-items:center;border:1px solid var(--gray-200);transition:background .25s,border-color .25s}
.drawer__x svg{width:var(--ico);height:var(--ico)}
.drawer__x:hover{background:var(--ice-50);border-color:var(--gray-300)}
.drawer__nav{flex:1;overflow-y:auto;padding:8px 0}
.drawer__nav a{
  display:flex;align-items:baseline;gap:16px;padding:15px 22px;
  font-size:var(--fs-ui-lg);font-weight:500;letter-spacing:-.025em;
  border-bottom:1px solid var(--gray-200);
  opacity:0;transform:translateX(20px);transition:background .25s,color .25s;
}
.drawer.on .drawer__nav a{opacity:1;transform:none;transition:background .25s,color .25s,opacity .5s var(--e),transform .5s var(--e)}
.drawer__nav a i{font-style:normal;color:var(--blue-500);font-size:var(--fs-micro);flex:none}
.drawer__nav a:hover{background:var(--ice-50);color:var(--blue-600)}
.drawer__foot{padding:20px 22px 26px;border-top:1px solid var(--gray-200);background:var(--ice-50)}
.drawer__meta{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.drawer__meta > a{font-size:var(--fs-small);color:var(--gray-600);display:inline-block;padding-block:10px}
.drawer__meta > a:hover{color:var(--blue-500)}

.socials{display:flex;gap:8px}
.socials a{width:44px;height:44px;border-radius:var(--r-btn);display:grid;place-items:center;border:1px solid var(--gray-300);color:var(--gray-600);transition:.28s var(--e2)}
.socials a svg{width:var(--ico-lg);height:var(--ico-lg)}
.socials a:hover{background:var(--navy-900);border-color:var(--navy-900);color:#fff;transform:translateY(-2px)}

/* ============================================================
   01 · HERO
   ============================================================ */
.hero{
  position:relative;background:var(--navy-900);color:#fff;overflow:hidden;
  min-height:96svh;display:flex;flex-direction:column;
}
/* o miolo cresce e empurra a faixa de dados para a base da tela:
   o hero passa a ler como uma composição única, não como uma pilha */
.hero__in{flex:1 0 auto}
/* textura de grade fina — profundidade sem ruído */
.hero__bg{position:absolute;inset:0;pointer-events:none;z-index:0}
/* luz suave vinda de cima, como um refletor de palco */
.hero__bg::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 85% at 72% -10%,rgba(255,92,114,.26),transparent 62%),
             linear-gradient(180deg,rgba(255,255,255,.045),transparent 40%);
}
/* grão fino, quase imperceptível, para dar corpo ao fundo chapado */
.hero__bg::after{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.16;mix-blend-mode:overlay}
.hero__in{position:relative;z-index:1}
.hero__in{
  padding-top:calc(var(--nav-h) + clamp(6px,1vw,14px));
  padding-bottom:clamp(18px,2vw,26px);
  align-items:start;
}

.hero__h1{
  grid-column:1/8;grid-row:1;
  margin-top:clamp(8px,1vw,14px);
  font-size:var(--fs-d1);
  line-height:.94;letter-spacing:-.048em;font-weight:600;
}
/* A manchete de outubro tem linhas mais longas que a da edicao anterior
   ("Todo mundo atravessou" contra "Seguranca deixou"), e no mesmo corpo
   ficava pesada demais. Quatro pixels a menos na faixa de desktop.
   Escopo na propria pagina: o token --fs-d1 tambem serve ao CTA final e
   a edicao que ja esta no ar. */
/* O teto e 87px, nao 100px, e o motivo e geometrico: o container trava
   em --max (1440px), entao a coluna do titulo congela em ~765px. Se a
   fonte continua subindo com vw, a linha mais longa ("aprendeu o
   mesmo.") ultrapassa a coluna e quebra em duas. E, quebrando, a regua
   do ::after passa a acompanhar a CAIXA em vez da ultima linha, e
   sobra riscando o vazio. A tipografia para de crescer onde a grade
   para. */
.ed-outubro .hero__h1{font-size:clamp(42px,6vw,87px)}
.hero__h1 .l{display:block;opacity:0}
.hero__h1 em{font-style:normal;color:var(--blue-400)}
/* a tese em duas alturas: a constatação recua, a conclusão domina */
.hero__h1 .l--q{
  font-size:.62em;line-height:1.04;letter-spacing:-.035em;
  color:rgba(255,255,255,.58);
}
.hero__h1 .l--q + .l--q{margin-bottom:.16em}
/* régua que se desenha sob a última linha */
.hero__h1 .l:last-child{display:inline-block;position:relative}
.hero__h1 .l:last-child::after{
  content:'';position:absolute;left:0;right:0;bottom:-.02em;height:4px;border-radius:2px;
  background:var(--blue-400);transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--e) .55s;
}
.hero__h1.in .l:last-child::after{transform:scaleX(1)}

.hero__fig{
  grid-column:8/13;grid-row:1/3;position:relative;align-self:stretch;
  margin-top:clamp(8px,1vw,14px);margin-right:calc(var(--gut) * -1);
  min-height:clamp(360px,40vw,600px);
  overflow:hidden;border-radius:var(--r-img) 0 0 var(--r-img);
}
/* enquadramento fora do centro: o palestrante encosta na headline
   em vez de posar no meio do retângulo */
.hero__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:34% 16%}
/* a base derrete no navy e entrega o olho para a faixa de dados */
.hero__fig::after{
  content:'';position:absolute;z-index:1;inset:auto 0 0 0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(8,8,8,.82));
}
.hero__fig figcaption{
  position:absolute;left:16px;bottom:16px;z-index:2;
  padding:7px 13px;border-radius:6px;color:#fff;font-size:var(--fs-micro);letter-spacing:.08em;
  background:rgba(0,0,0,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
/* etiqueta vertical na borda da foto */
.hero__edge{
  position:absolute;z-index:2;left:-14px;top:22px;
  transform-origin:left top;transform:rotate(90deg);
  color:rgba(255,255,255,.55);font-size:var(--fs-micro);letter-spacing:.18em;white-space:nowrap;
}

.hero__side{grid-column:1/7;grid-row:2;margin-top:clamp(20px,2.2vw,28px)}
.hero__lead{color:rgba(255,255,255,.74);font-size:var(--fs-lead);line-height:1.55;max-width:46ch}
.hero__lead strong{color:#fff;font-weight:500}
.hero__cta{margin-top:clamp(18px,1.9vw,24px);display:flex;flex-wrap:wrap;gap:12px}
.hero__host{margin-top:clamp(18px,2vw,26px);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero__host .mono{color:rgba(255,255,255,.6);font-size:var(--fs-micro)}
.hero__host::after{content:'';order:1;width:1px;align-self:stretch;background:rgba(255,255,255,.18)}
.hero__host a{order:2;display:block;transition:transform .35s var(--e)}
.hero__host img{height:49px;width:auto;transition:transform .35s var(--e)}
.hero__host a:hover{transform:scale(1.04)}

/* faixa de dados */
/* ---------- FICHA DO ENCONTRO ----------
   A faixa saiu de dentro da hero, entao o fundo escuro que ela herdava
   precisa ser declarado aqui. Mesmo navy da hero: visualmente as duas
   continuam uma composicao so, o que muda e onde o conteudo mora. */
.ficha{background:var(--navy-900);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.ficha__in{
  padding-block:clamp(26px,3vw,40px);
  align-items:center;row-gap:clamp(20px,2.4vw,30px);
}
.ficha__lead{
  grid-column:1/5;
  color:rgba(255,255,255,.82);font-size:var(--fs-h4);
  line-height:1.35;letter-spacing:-.015em;text-wrap:pretty;margin:0;
}
/* Dois creditos do mesmo tipo — quem recebe e quem conduz — empilhados na
   coluna da direita. Papeis diferentes, pesos diferentes: o logo da
   anfitria e maior. */
.ficha__host{
  grid-column:5/13;display:flex;flex-direction:column;align-items:stretch;
  gap:18px;
}
.ficha__marca{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.ficha__host .mono{color:rgba(255,255,255,.72);font-size:var(--fs-micro)}
.ficha__host a{order:2;display:block;transition:transform .35s var(--e)}
/* Uma altura só para os dois blocos da linha. Medido antes: o logo tinha
   49px e o botão 44px, e essa diferença de 5px deixava 2,5px de folga em
   cima e embaixo do botão — os três centros batiam em 24,5, mas as bordas
   não, e é a borda que o olho segue quando dois blocos ficam lado a lado.

   O rótulo "Anfitrião" fica de fora de propósito: texto se alinha pelo
   centro óptico, não esticando a caixa. */
.ficha__host{--anfitria-h:74px}
.ficha__marca img{height:var(--anfitria-h);width:auto}
.ficha__host a:hover{transform:scale(1.04)}

/* O filme da anfitriã fica visível no fluxo e substitui a própria capa ao
   clique. A largura acompanha a coluna sem transformar o bloco numa segunda
   hero; no mobile ele ocupa naturalmente toda a largura disponível. */
.ficha__video-bloco{display:grid;gap:10px;width:100%}
.ficha__video-kicker{
  margin:0 0 8px;color:rgba(255,255,255,.72);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;
}
.ficha__video{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--fio-controle);border-radius:14px;background:#000;
  box-shadow:0 16px 38px rgba(0,0,0,.28);
}
.ficha__video iframe,.ficha__video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.ficha__video video{object-fit:contain;background:#000}
.ficha__video .patro__f img{width:100%;height:100%;object-fit:cover}

/* ---------- botão do vídeo, ao lado do logo ----------
   order:3 porque .ficha__host ordena por papel — rótulo, fio, logo — e o
   seletor de logo é `.ficha__host a`, que um <button> não casa. A borda
   usa --fio-controle, o token de 3:1 já auditado para controle sobre
   preto; abaixo disso a borda existiria só para quem enxerga bem. */
.ficha__vid{
  order:3;display:inline-flex;align-items:center;gap:9px;
  height:var(--anfitria-h,49px);padding:0 18px;
  background:none;border:1px solid var(--fio-controle);border-radius:99px;
  color:var(--gray-900);font-family:var(--fm);font-size:var(--fs-micro);
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:border-color .3s var(--e2),background .3s var(--e2),transform .3s var(--e);
}
.ficha__vid svg{width:15px;height:15px;flex:none}
.ficha__vid:hover{border-color:var(--blue-500);background:rgba(201,54,49,.16);transform:translateY(-1px)}
.ficha__vid:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ficha__vid{transition:none}.ficha__vid:hover{transform:none}}

/* ---------- A ANFITRIÃ ACENDE A SEÇÃO ----------
   #C0001F e #A80018 sao vermelhos lidos do proprio arquivo do logotipo da
   SOMPO, nao vermelhos genericos.

   A sequencia tem ordem e ela e o argumento: a cor floresce do canto onde
   o logo esta, se assenta, e so entao o logo aparece. Primeiro o ambiente,
   depois a marca — e fica claro que a cor veio dela.

   'screen' em vez de opacidade: escurecer vermelho com preto daria marrom
   sujo; em screen ele soma luz e continua vermelho. */
.ficha__glow{
  position:absolute;inset:-30% -70%;z-index:-1;pointer-events:none;
  mix-blend-mode:screen;opacity:0;
  transform:translate3d(18%,0,0);
  background:radial-gradient(38% 130% at 71% 50%, rgba(192,0,31,.66), rgba(192,0,31,0) 74%);
}
/* segunda mancha, mais funda e em ciclo proprio: duas camadas em ritmos
   diferentes leem como movimento; uma so, como um pisca-pisca */
.ficha__glow::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(30% 120% at 29% 50%, rgba(168,0,24,.32), rgba(168,0,24,0) 78%);
  transform:translate3d(-16%,0,0);
}
/* LINHA DO TEMPO — 4,6s, uma vez so, sem laco
   0,0s  a cor entra pela direita e atravessa a secao
   0,8s  o logo da SOMPO aparece com a cor ainda subindo
   1,2s  auge do vermelho, ja com o logo na tela — e essa sobreposicao
         que liga uma coisa a outra
   2,0s  a cor comeca a recuar
   4,6s  nao sobra vermelho nenhum; fica o logo sobre o azul */
.ficha.acesa .ficha__glow{animation:brasa 4.6s var(--e) forwards}
@keyframes brasa{
  0%  {opacity:0;transform:translate3d(18%,0,0)}
  26% {opacity:1;transform:translate3d(0,0,0)}
  44% {opacity:1;transform:translate3d(-3%,0,0)}
  100%{opacity:0;transform:translate3d(-14%,0,0)}
}
/* a segunda mancha corre em outro ritmo: e o que faz ler como movimento
   em vez de um pisca-pisca de camada unica */
.ficha.acesa .ficha__glow::after{animation:deriva 4.6s var(--e) forwards}
@keyframes deriva{
  0%  {opacity:0;transform:translate3d(-16%,0,0)}
  34% {opacity:1;transform:translate3d(0,0,0)}
  100%{opacity:0;transform:translate3d(15%,0,0)}
}

/* o logo entra na virada, quando o vermelho comeca a ceder */
.ficha__host{opacity:0;transform:translateY(14px)}
.ficha.acesa .ficha__host{animation:anfitria .85s var(--e) .8s both}
@keyframes anfitria{
  from{opacity:0;transform:translateY(14px) scale(.96)}
  to{opacity:1;transform:none}
}
/* halo curto atras do logo: recebe o vermelho que estava no fundo e
   tambem apaga — nada de vermelho fica em repouso */
.ficha__host a{position:relative}
.ficha__host a::before{
  content:'';position:absolute;inset:-38% -14%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(192,0,31,.6), rgba(192,0,31,0) 78%);
  opacity:0;
}
.ficha.acesa .ficha__host a::before{animation:halo 3s var(--e2) 1.1s forwards}
@keyframes halo{
  0%  {opacity:0;transform:scale(.55)}
  30% {opacity:.92;transform:scale(1.06)}
  100%{opacity:0;transform:scale(1.18)}
}

/* sem script ou com movimento reduzido, o estado final e o que vale:
   azul limpo e o logo visivel. O vermelho e o gesto, nao o cenario. */
.no-anim .ficha__glow{opacity:0;animation:none}
.no-anim .ficha__host{opacity:1;transform:none;animation:none}
@media (prefers-reduced-motion:reduce){
  .ficha.acesa .ficha__glow,.ficha.acesa .ficha__glow::after,
  .ficha.acesa .ficha__host,.ficha.acesa .ficha__host a::before{animation:none}
  .ficha__glow{opacity:0}
  .ficha__host{opacity:1;transform:none}
}
@media (max-width:1024px){
  /* empilhada, o logo desce para o meio da base: a luz nasce de la */
  .ficha__glow{
    background:radial-gradient(46% 120% at 71% 50%, rgba(192,0,31,.62), rgba(192,0,31,0) 76%);
  }
  .ficha__glow::after{
    background:radial-gradient(36% 110% at 29% 50%, rgba(168,0,24,.28), rgba(168,0,24,0) 80%);
  }
}

.strip{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.strip__in{padding-block:0}
.strip__c{
  grid-column:span 3;display:flex;flex-direction:column;gap:6px;
  padding:20px 0 20px 24px;position:relative;
}
.strip__c:first-child{padding-left:0}
.strip__c + .strip__c::before{content:'';position:absolute;left:0;top:24px;bottom:24px;width:1px;background:rgba(255,255,255,.12)}
.strip__c .mono{color:rgba(255,255,255,.72);font-size:var(--fs-micro)}
.strip__c b{font-size:var(--fs-data);font-weight:600;letter-spacing:-.03em;line-height:1.15}
/* estas linhas sao conteudo (dia, horario, cidade, prazo do lote), nao
   rotulo: a 13px elas liam quase do tamanho da etiqueta de 12px que
   fica logo acima, e a hierarquia entre rotulo e valor sumia */
.strip__c i{font-style:normal;font-size:var(--fs-micro-lg);color:rgba(255,255,255,.7);line-height:1.45}
.strip__c--st b{color:var(--blue-400)}
.strip__c--st.live b{font-variant-numeric:tabular-nums;font-family:var(--fm);font-size:var(--fs-ui-mono);letter-spacing:.02em}

.hero__scroll{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:9px;justify-content:center;
  min-height:44px;padding:12px 0 16px;color:rgba(255,255,255,.6);font-size:var(--fs-micro);
  transition:color .25s;
}
.hero__scroll svg{width:17px;height:17px;animation:nudge 2.2s var(--e) infinite}
.hero__scroll:hover{color:#fff}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(4px);opacity:1}}

/* ============================================================
   02 · STATEMENT (navy)
   ============================================================ */
.stmt{background:var(--white);color:var(--gray-900);position:relative;overflow:hidden}
.stmt::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 82% 12%,var(--ice-50),transparent 68%);
}
.stmt__in{position:relative;z-index:1;padding-block:var(--sec-y)}
.stmt .eyebrow{grid-column:1/13;grid-row:1}
.stmt__h{
  grid-column:1/9;grid-row:2;margin-top:clamp(30px,3.6vw,56px);
  font-size:var(--fs-d2);line-height:.95;letter-spacing:-.05em;font-weight:600;
}
.stmt__h .l{display:block;opacity:0}
.stmt__h em{font-style:normal;color:var(--blue-500)}
.stmt__aside{grid-column:9/13;grid-row:2;align-self:end;padding-bottom:10px}
.stmt__aside p{color:var(--gray-600);font-size:var(--fs-body);line-height:1.62}
.stmt__aside p + p{margin-top:14px}
.stmt__stats{
  grid-column:1/13;grid-row:3;margin-top:clamp(56px,7vw,110px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--colgap);
  border-top:1px solid var(--gray-300);
}
.stmt__stats li{padding-top:26px;display:flex;flex-direction:column;gap:12px;position:relative}
.stmt__stats li + li{padding-left:24px}
.stmt__stats li + li::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--gray-300)}
.stmt__stats b{font-size:var(--fs-d3);font-weight:600;letter-spacing:-.055em;line-height:.9;font-variant-numeric:tabular-nums}
.stmt__stats .mono{color:var(--gray-600);font-size:var(--fs-micro)}

/* ============================================================
   SEÇÕES GENÉRICAS
   ============================================================ */
.sec{padding-block:var(--sec-y)}
.sec--white{background:var(--white)}
.sec--ice{background:var(--ice-50)}
.sec--navy{background:var(--navy-900);color:#fff;position:relative}

/* ---------- FAIXA DA EDIÇÃO ----------
   navy-950 e um degrau abaixo do navy-900 da hero: no mesmo tom de azul,
   mas o olho enxerga a separacao. Contra o branco da secao seguinte, o
   corte fica seco. */
.edic{background:var(--navy-950);border-top:1px solid rgba(255,255,255,.09)}
.edic__t{
  max-width:var(--max);margin-inline:auto;
  padding:clamp(15px,1.7vw,21px) var(--gut);
  text-align:center;text-wrap:balance;
  font-size:var(--fs-small);line-height:1.45;letter-spacing:.01em;
  color:rgba(255,255,255,.72);
}
.edic__t b{color:#fff;font-weight:500}
.sec--navy::before,.voice::after,.ft::before{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.14;mix-blend-mode:overlay;pointer-events:none}
.sec--navy > *{position:relative;z-index:1}
.ft{position:relative}
.ft > *{position:relative;z-index:1}
/* mesma cor do rodapé — a faixa de mantenedores usa logos em versão branca */
.sec--ink{background:var(--navy-950);color:#fff}
.sec--slim{padding-block:clamp(56px,6vw,96px)}
.sec--navy .shd__s,.sec--ink .shd__s{color:rgba(255,255,255,.68)}
.sec--navy .h2 em,.sec--ink .h2 em{color:var(--blue-400)}

/* ---------- CONTROLE "VER MAIS" (grades longas) ---------- */
.more{
  grid-column:1/13;justify-self:center;
  margin-top:clamp(32px,3.6vw,48px);
  display:inline-flex;align-items:center;gap:12px;
  min-height:48px;padding:0 24px;border-radius:var(--r-btn);
  border:1px solid var(--rule);color:var(--navy-900);
  font-size:var(--fs-small);font-weight:500;
  transition:border-color .3s var(--e2),background .3s var(--e2),transform .3s var(--e);
}
.more:hover{border-color:var(--navy-900);background:var(--navy-900);color:#fff;transform:translateY(-2px)}
.more svg{width:var(--ico);height:var(--ico);transition:transform .4s var(--e)}
.more[aria-expanded="true"] svg{transform:rotate(180deg)}
.more__n{font-family:var(--fm);font-size:var(--fs-micro);letter-spacing:.08em;opacity:.55}

/* itens ocultos enquanto a grade está recolhida */
.cast[data-collapsed] > .p{animation:none}
.cast--xs[data-collapsed] > .p:nth-child(n+6){display:none}
.cast--sm[data-collapsed] > .p:nth-child(n+6){display:none}
@media (max-width:1200px){.cast--xs[data-collapsed] > .p:nth-child(n+5){display:none}}
@media (max-width:1024px){
  .cast--xs[data-collapsed] > .p:nth-child(n+7){display:none}
  .cast--sm[data-collapsed] > .p:nth-child(n+7){display:none}
}
@media (max-width:719px){
  .cast--xs[data-collapsed] > .p:nth-child(n+5){display:none}
  .cast--sm[data-collapsed] > .p:nth-child(n+5){display:none}
}

/* ============================================================
   03 · PILARES
   ============================================================ */
.pillars{grid-column:1/13}
.pillar{
  position:relative;
  display:grid;
  grid-template-columns:84px minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(20px,3vw,52px);row-gap:12px;align-items:center;
  padding-block:clamp(30px,3.6vw,50px);
  border-top:1px solid var(--gray-300);
}
.pillar:last-child{border-bottom:1px solid var(--gray-300)}
/* o fio de cada etapa se desenha da esquerda para a direita conforme a pauta avança */
.pillar::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--navy-900);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--e);
}
.pillar.in::before{transform:scaleX(1)}
.pillar.in .pillar__n{color:var(--navy-900)}
.pillar__n{
  grid-column:1;grid-row:1;font-size:var(--fs-small);font-weight:500;letter-spacing:.12em;
  color:var(--gray-300);transition:color .5s var(--e2);
}
.pillar__k{grid-column:1;grid-row:2;justify-self:start;text-align:left;color:var(--gray-600);font-size:var(--fs-micro);line-height:1.5;max-width:12ch}
.pillar__b{display:contents}
.pillar__b h3{
  grid-column:2;grid-row:1/3;
  font-size:var(--fs-h3);font-weight:600;letter-spacing:-.038em;line-height:1.05;
  transition:color .4s var(--e2);
}
.pillar__b p{grid-column:3;grid-row:1/3;color:var(--gray-600);font-size:var(--fs-small);line-height:1.62;align-self:center}
.pillar:hover .pillar__n{color:var(--blue-500)}
.pillar:hover .pillar__b h3{color:var(--blue-600)}

/* ============================================================
   04/05/12 · PESSOAS
   ============================================================ */
.cast{--g:clamp(14px,1.5vw,22px);--c:4;grid-column:1/13;display:flex;flex-wrap:wrap;gap:calc(var(--g) * 2) var(--g)}
/* 5 colunas com vao de 36px: (C - 4*36)/5 da exatamente 75% de
   (C - 3*21,6)/4, que e a largura do painelista. Os dez moderadores
   continuam fechando duas fileiras cheias. */
.cast--sm{--c:5;--g:clamp(20px,2.5vw,36px)}
.cast--xs{--c:5}
/* --esc encolhe o card sem mexer na conta da coluna: a grade continua
   de --c lugares, o card é que ocupa uma fração dele. */
.cast > .p{width:calc(((100% - (var(--c) - 1) * var(--gc,var(--g))) / var(--c)) * var(--esc,1));display:flex;flex-direction:column}

.p__m{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;border-radius:var(--r-img);background:var(--ice-100)}
/* O quadrado dava 75% de largura e 56% de altura contra o retrato do
   painelista. Mesmo formato 3/4 = 75% nos dois eixos, de verdade.
   O squad (.p--xs) segue quadrado: e outra grade, com outra funcao. */
.p--xs .p__m{aspect-ratio:1/1}
.p--sm .p__m{aspect-ratio:3/4}
/* tratamento editorial unificado: o acervo mistura retratos em cor e em P&B,
   então todos entram monocromáticos e revelam cor na interação */
.p__m img{
  width:100%;height:100%;object-fit:cover;object-position:center 20%;
  filter:grayscale(1) contrast(1.03);
  transition:transform 1s var(--e),filter .7s var(--e2);
}
.p:hover .p__m img,.p__m:focus-visible img{filter:grayscale(0) contrast(1)}
.p__m::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.42));opacity:0;transition:opacity .5s var(--e2)}
.p.in:hover .p__m img{transform:scale(1.035)}
.p:hover .p__m::after{opacity:1}

.p__go{
  position:absolute;z-index:1;right:12px;bottom:12px;
  width:38px;height:38px;border-radius:8px;display:grid;place-items:center;
  background:#fff;color:var(--navy-900);
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--e),transform .4s var(--e),background .25s,color .25s;
}
/* o selo do LinkedIn e um glifo preenchido: o traco da seta antiga
   o deixaria borrado nesse tamanho */
.p__go svg{width:16px;height:16px;fill:currentColor;stroke:none}
/* card menor, selo menor: 38px num retrato de 245px pesa o dobro do
   que pesa num de 312px, e cobre o canto do rosto */
.p--xs .p__go{width:32px;height:32px;right:9px;bottom:9px;border-radius:7px}
.p--xs .p__go svg{width:14px;height:14px}

/* ---------- QUEM CONDUZ AS DINÂMICAS ----------
   Faixa depois dos cards, nao um quinto card: a Escola nao esta no palco
   como pessoa, ela conduz o que acontece entre os blocos. O logotipo dela
   e preto — sobre qualquer fundo escuro daria 1:1 — entao vive numa placa
   branca, que tambem preserva as cores do simbolo circular. */
.dinamica{
  grid-column:1/13;margin-top:clamp(26px,3vw,42px);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,2.4vw,34px);flex-wrap:wrap;
  padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,30px);
  border:1px dashed var(--rule);border-radius:var(--r-card);
  background:var(--white);
}
.dinamica__k{color:var(--blue-500);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase}
.dinamica__d{margin-top:8px;color:var(--gray-600);font-size:var(--fs-small);line-height:1.55;max-width:52ch;text-wrap:pretty}
.dinamica__d strong{color:var(--gray-900);font-weight:600}
.dinamica__logo{flex:none;display:inline-flex;align-items:center;
  background:#fff;border:1px solid var(--rule);border-radius:10px;padding:12px 18px;
  transition:border-color .3s var(--e2),transform .35s var(--e),box-shadow .35s var(--e)}
.dinamica__logo:hover{border-color:var(--navy-900);transform:translateY(-2px);box-shadow:0 8px 22px rgba(8,8,8,.1)}
.dinamica__logo:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px}
.dinamica__logo img{height:60px;width:auto;display:block}
@media (max-width:719px){
  .dinamica{flex-direction:column;text-align:center;justify-content:center}
  .dinamica__d{margin-inline:auto}
}

/* ---------- presidentes no squad ----------
   Global e LATAM abrem a grade. O sinal e discreto de proposito: um
   fio dourado por DENTRO da moldura, que nao ocupa espaco e por isso
   nao desalinha a fileira, e o cargo no dourado escuro — o unico tom
   de ouro que passa AA sobre branco (o --gold-l daria 2,6:1). */
.p--pres .p__m{box-shadow:inset 0 0 0 2px var(--gold-d,#87621E)}
.p--pres .p__r{color:var(--gold-d,#87621E);font-weight:500}
.p:hover .p__go,.p__m:focus-visible .p__go{opacity:1;transform:none}
.p__m:hover .p__go{background:var(--blue-500);color:#fff}

.p__b{padding-top:16px}
.p--xs .p__b{padding-top:13px}
.p__i{display:block;color:var(--seat);font-size:var(--fs-micro);margin-bottom:8px}
.p__i em{font-style:normal;color:var(--gold-d)}
.p__n{font-size:var(--fs-h5);font-weight:600;letter-spacing:-.028em;line-height:1.18}

/* ---------- MESA PRINCIPAL ----------
   Os quatro protagonistas não usam o mesmo componente dos moderadores.
   Aqui cada um ocupa um LUGAR À MESA: fio, posição numerada, retrato maior
   e nome com presença. A composição é a própria metáfora da mesa. */
.cast--lead{
  --c:4;
  align-items:start;
}
/* Dois cards com o MESMO peso de um painelista (mesma largura de 1/4),
   centrados em vez de encostados na esquerda. Manter a largura e nao
   esticar e o que preserva a hierarquia: aqui nao competem com o painel. */
/* Quem conduz não pesa como quem senta à mesa: mesmo componente,
   30% menos de card. A escada de tamanho é a própria hierarquia. */
/* --gc separa o vao da CONTA do vao REAL: a largura continua saindo
   da mesma geometria do painel (para os 30% baterem), enquanto o
   espaco entre os cards abre sem encolher ninguem. */
/* A fileira encosta nas duas bordas da secao, como todas as outras.
   Centrar deixava o grupo boiando no meio e denunciava que ele seguia
   outra medida. O card continua 30% menor que o painelista; quem
   absorve a diferenca agora e o vao entre eles, nao a margem. */


/* a mesa usa a medida larga da página (a mesma do mosaico), não a do texto.
   Só entra a partir de 1600px, onde o recuo é grande o bastante para ler
   como decisão editorial e não como desalinhamento. */
@media (min-width:1600px){
  /* a bancada acompanha a mesa no recuo largo: sem isso as duas grades
     ficam em medidas diferentes e a proporcao de 75% se perde acima de
     1600px, caindo para ~69% */
  .cast--lead,.cast--sm{margin-inline:calc((min(1620px,100vw - 24px) - 1440px) / -2)}
  /* O palco NAO acompanha esse recuo. Ele e a camada leve da secao: sair
     mais para fora que o proprio titulo e que o texto de apoio inverte a
     hierarquia que os 30% de reducao construiram, e ainda faz os cards
     das pontas parecerem cortados pela borda da tela. */
  .cast--par{margin-inline:0}
}
/* o bloco de texto deixa de ser caixa: vira linhas da mesma grade do retrato */
.cast--lead .p{display:grid;grid-template-rows:auto auto auto 1fr}
.cast--lead .p__b{display:contents}
.cast--lead .p__i{
  grid-row:1;
  margin:0 0 14px;padding-top:13px;
  border-top:1px solid var(--rule);
  color:var(--seat);letter-spacing:.14em;
  transition:border-color .6s var(--e2),color .6s var(--e2);
}
.cast--lead .p__m{grid-row:2;aspect-ratio:3/4}
.cast--lead .p__n{grid-row:3;margin-top:20px;font-size:var(--fs-h4);letter-spacing:-.034em;line-height:1.12}
.cast--lead .p__r{grid-row:4;font-size:var(--fs-small);margin-top:10px;line-height:1.5}
/* o fio acende quando a mesa entra em cena */
.cast--lead .p.in .p__i{border-color:var(--navy-900);color:var(--navy-900)}
.cast--lead .p:hover .p__i{border-color:var(--blue-500);color:var(--blue-500)}

/* ---------- PALCO: FICHAS HORIZONTAIS ----------
   O palco nao e uma mesa menor, e outra categoria. Trocar a FORMA
   (retrato sobre o texto -> foto ao lado do texto) separa as duas
   camadas melhor do que so encolher o card fazia. E resolve na raiz o
   desalinhamento cronico desta secao: com o texto ao lado da foto, um
   rotulo que quebra em duas linhas nao empurra mais retrato nenhum.
   Aqui a grade e de verdade (grid), entao as duas fichas de uma
   fileira tem a mesma altura sem ninguem precisar reservar espaco. */
.cast--par{
  display:grid;align-items:stretch;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.5vw,20px);
}
.cast--par > .p{
  width:auto;                 /* quem manda na largura agora e a coluna */
  grid-template-columns:clamp(108px,11.5vw,156px) minmax(0,1fr);
  grid-template-rows:auto;
  column-gap:clamp(16px,1.8vw,26px);align-items:center;
  padding:clamp(15px,1.6vw,21px);
  border:1px solid var(--rule);border-radius:var(--r-card);
  background:var(--white);
  transition:border-color .4s var(--e2),transform .5s var(--e);
}
.cast--par > .p:hover{border-color:var(--gray-300);transform:translateY(-2px)}
.cast--par .p__m{grid-column:1;grid-row:1;aspect-ratio:3/4;align-self:start}

/* .p__b volta a ser caixa: no formato vertical ele era display:contents
   para as linhas do card alinharem, o que aqui nao faz mais sentido. */
.cast--par .p__b{
  grid-column:2;grid-row:1;display:flex;flex-direction:column;padding-top:0;
}
.cast--par .p__i{
  margin:0 0 9px;padding-top:0;border-top:0;
  letter-spacing:.1em;color:var(--seat);
}
.cast--par .p.in .p__i{color:var(--blue-500)}
.cast--par .p__n{margin-top:0;font-size:var(--fs-h5);line-height:1.16;min-height:0}
.cast--par .p__r{margin-top:8px;font-size:var(--fs-micro-lg);line-height:1.5}
.p--xs .p__n{font-size:var(--fs-small)}
.p__r{margin-top:5px;color:var(--gray-600);font-size:var(--fs-micro-lg);line-height:1.45}

.sec--navy .p__r{color:rgba(255,255,255,.66)}

/* ============================================================
   06 · TIMELINE
   ============================================================ */
.tl{grid-column:1/13}
.tl__i{
  display:grid;grid-template-columns:clamp(128px,15vw,220px) 1px minmax(0,1fr);
  column-gap:clamp(24px,3.4vw,56px);
  padding-block:clamp(26px,3vw,42px);
  border-top:1px solid var(--gray-300);
}
.tl__i--end{border-bottom:1px solid var(--gray-300)}
.tl__t{
  font-size:var(--fs-d3);font-weight:600;letter-spacing:-.05em;line-height:.95;
  font-variant-numeric:tabular-nums;color:var(--gray-300);
  transition:color .7s var(--e2);
}
.tl__i.in .tl__t{color:var(--navy-900)}
.tl__rail{position:relative;background:var(--gray-300)}
.tl__rail::before{content:'';position:absolute;inset:0;background:var(--blue-500);transform:scaleY(0);transform-origin:top;transition:transform 1s var(--e) .1s}
.tl__i.in .tl__rail::before{transform:scaleY(1)}
.tl__rail::after{content:'';position:absolute;left:-4.5px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--gray-300);transition:background .5s var(--e2) .5s,box-shadow .5s var(--e2) .5s}
.tl__i.in .tl__rail::after{background:var(--blue-500);box-shadow:0 0 0 5px rgba(255,31,61,.16)}
.tl__k{display:block;color:var(--blue-500);margin-bottom:12px;font-size:var(--fs-micro)}
.tl__c h3{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.03em;line-height:1.2}
.tl__c p{margin-top:12px;color:var(--gray-600);font-size:var(--fs-small);line-height:1.62;max-width:53ch;text-wrap:pretty}

/* ============================================================
   07 · MOSAICO
   ============================================================ */
/* fotografia dominante em largura total: o único ponto da página
   em que a sala não cabe dentro do container */
.bleed{width:100%;margin:0 0 clamp(14px,1.6vw,26px)}
.bleed .ph--hero{
  display:block;width:100%;border-radius:0;
  height:clamp(300px,44vw,660px);
}
.bleed .ph--hero img{object-position:center 42%}
.bleed__cap{margin-top:clamp(10px,1vw,14px);display:block;color:var(--gray-600)}
.bleed__cap .mono{color:var(--seat)}

/* ---------- MOSAICO ----------
   Era uma grade fixa de 4x2 com object-fit:cover: toda foto era espremida
   na celula que sobrou e perdia as bordas. Agora sao colunas, e cada caixa
   assume a proporcao do proprio arquivo — retrato fica retrato, paisagem
   fica paisagem, e nada e cortado na exibicao. O recorte, quando precisa,
   e feito no arquivo, onde da para escolher o enquadramento. */
.mosaic{
  max-width:1640px;margin-inline:auto;padding-inline:var(--gut);
  columns:3;column-gap:clamp(10px,1.1vw,16px);
}
.ph{
  display:block;width:100%;margin:0 0 clamp(10px,1.1vw,16px);
  break-inside:avoid;-webkit-column-break-inside:avoid;
  position:relative;overflow:hidden;padding:0;border:0;
  border-radius:var(--r-img);background:var(--ice-100);
  transition:transform .5s var(--e);
}
.ph img{width:100%;height:auto;display:block;transition:transform 1.1s var(--e)}
.ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.4));opacity:0;transition:opacity .45s var(--e2)}
.ph.in:hover img{transform:scale(1.035)}
.ph:hover::after{opacity:1}
.ph__z{
  position:absolute;z-index:1;right:14px;bottom:14px;
  width:42px;height:42px;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:var(--navy-900);
  opacity:0;transform:translateY(8px);transition:.45s var(--e);
}
.ph__z svg{width:20px;height:20px}
.ph:hover .ph__z,.ph:focus-visible .ph__z{opacity:1;transform:none}

/* ============================================================
   08 · REELS (depoimentos)
   ============================================================ */
/* Os quatro relatos são vídeos verticais (stories). A grade respeita esse
   formato: mantém o 4:5 nativo dos cartões — sem recorte — e cria ritmo com
   um desnível alternado, como quadros numa tira de contato. */
.reels{
  --g:clamp(14px,1.5vw,22px);
  grid-column:1/13;width:100%;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.1vw,34px);
  align-items:start;
}
.reel{display:flex;flex-direction:column}
.reel:nth-child(even){margin-top:0}
.reel__m{aspect-ratio:4/5}
/* o nome se apoia num fio — o mesmo gesto dos lugares à mesa */
.reel__b{padding-top:14px;margin-top:16px;border-top:1px solid var(--rule-d)}
.reel__m{position:relative;display:block;width:100%;padding:0;overflow:hidden;aspect-ratio:4/5;border-radius:var(--r-img);background:var(--navy-950);transition:transform .5s var(--e)}
.reel__m img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:transform 1.1s var(--e),filter .7s var(--e2);
}
.reel__m:hover img,.reel__m:focus-visible img{filter:grayscale(0) contrast(1)}
.reel__m::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 38%,rgba(0,0,0,.4))}
.reel__m:hover{transform:translateY(-6px) scale(1.02)}
.reel.in .reel__m:hover img{transform:scale(1.04)}
.reel__p{
  position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:var(--navy-900);
  transition:transform .45s var(--e),background .3s,color .3s;
}
.reel__p svg{width:21px;height:21px;fill:currentColor;stroke:none;margin-left:2px}
.reel__m:hover .reel__p{transform:translate(-50%,-58%) scale(1.08);background:var(--blue-500);color:#fff}
.reel__b h3{font-size:var(--fs-h5);font-weight:600;letter-spacing:-.025em}
.reel__b .mono{margin-top:6px;color:rgba(255,255,255,.62);font-size:var(--fs-micro)}

/* ============================================================
   09 · VOICE (citação)
   ============================================================ */
.voice{background:var(--navy-950);color:#fff;position:relative;overflow:hidden}
.voice::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 60% at 18% 0%,rgba(255,92,114,.16),transparent 66%);
}
.voice__in{position:relative;z-index:1;padding-block:var(--sec-y)}
.voice .eyebrow{grid-column:1/13}
/* hierarquia interna: a tese vira pull quote, o restante vira leitura.
   Nenhuma palavra foi acrescentada ou retirada do depoimento. */
.voice__q{grid-column:1/11;margin-top:clamp(32px,3.6vw,52px)}
.voice__pull{
  font-size:var(--fs-quote);line-height:1.18;letter-spacing:-.038em;font-weight:500;
  color:#fff;max-width:44ch;text-wrap:balance;
}
.voice__rest{
  margin-top:clamp(26px,2.8vw,40px);
  /* 720px davam 97 caracteres por linha, a linha mais longa do site */
  max-width:53ch;
  font-size:var(--fs-body);line-height:1.72;letter-spacing:-.004em;
  color:rgba(255,255,255,.72);text-wrap:pretty;
}
.voice__q em{font-style:normal;color:#fff;font-weight:500}
.voice__real{
  grid-column:1/11;margin-top:clamp(22px,2.4vw,32px);
  color:var(--blue-400);font-size:var(--fs-lead);font-weight:500;
  letter-spacing:-.01em;line-height:1.4;text-wrap:balance;
}
.voice__by{grid-column:1/10;margin-top:clamp(36px,4vw,58px);display:flex;align-items:center;gap:16px}
.voice__by img{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:center 18%;flex:none}
/* retrato do presidente 20% maior nesta edicao (60 -> 72px). Escopo na
   propria pagina: a edicao publicada segue com o tamanho original. */
.ed-outubro .voice__by img{width:72px;height:72px}
.voice__by b{display:block;font-size:var(--fs-body);font-weight:600;letter-spacing:-.02em}
.voice__by .mono{margin-top:5px;color:rgba(255,255,255,.62);font-size:var(--fs-micro)}
.voice__li{width:44px;height:44px;border-radius:var(--r-btn);display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.8);transition:.28s var(--e2)}
.voice__li svg{width:var(--ico-lg);height:var(--ico-lg)}
/* abaixo de 1025 o botao segue quadrado e mudo, como estava */
.voice__li-t,.voice__li-arw{display:none}
.voice__li:hover{background:#fff;border-color:#fff;color:var(--navy-950);transform:translateY(-2px)}

/* ---------- assinatura do presidente no vazio da direita ----------
   Só do desktop para cima: abaixo de 1024 a seção centraliza e a
   assinatura volta a correr embaixo da citação, como hoje. */
@media (min-width:1025px){
  .voice__q{grid-column:1/8}
  .voice__real{grid-column:1/8}
  /* A pilha deixava 70% da linha do retrato vazia e terminava num icone
     solto. Vira ficha: retrato a esquerda, quem assina a direita, e a
     acao como linha rotulada de largura cheia — mesma gramatica das
     fichas do palco, para a pagina falar uma lingua so. */
  .voice__by{
    grid-column:9/13;grid-row:2;align-self:start;
    margin-top:clamp(32px,3.6vw,52px);
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:clamp(16px,1.6vw,22px);row-gap:clamp(18px,1.9vw,24px);
    align-items:center;
    padding:clamp(20px,2vw,28px);
    border:1px solid rgba(255,255,255,.14);border-radius:var(--r-card,14px);
    background:rgba(255,255,255,.04);
  }
  .ed-outubro .voice__by img,.voice__by img{
    grid-column:1;grid-row:1;
    width:clamp(100px,8.2vw,124px);height:auto;aspect-ratio:3/4;
    border-radius:var(--r-img,12px);object-position:center 15%;
  }
  .voice__by figcaption{grid-column:2;grid-row:1;min-width:0}
  .voice__by b{font-size:var(--fs-h4);letter-spacing:-.03em;line-height:1.1}
  .voice__by .mono{
    margin-top:9px;line-height:1.5;font-size:var(--fs-micro);
    color:rgba(255,255,255,.66);max-width:20ch;
  }
  /* a acao ocupa a largura toda e diz para onde vai */
  .voice__li{
    grid-column:1/3;grid-row:2;width:auto;height:auto;
    display:flex;align-items:center;gap:11px;
    padding:13px 16px;border-radius:var(--r-btn);
  }
  .voice__li svg{width:var(--ico);height:var(--ico);flex:none}
  .voice__li-t{
    display:block;font-family:var(--f);font-size:var(--fs-small);
    font-weight:450;letter-spacing:0;
  }
  .voice__li-arw{display:block;margin-left:auto;width:18px !important;height:18px !important}
  .voice__li:hover{transform:none;background:#fff;border-color:#fff;color:var(--navy-950)}
}

/* ============================================================
   10 · BENEFÍCIOS
   ============================================================ */
.perk{
  grid-column:1/13;display:grid;grid-template-columns:1.35fr .65fr;
  gap:clamp(28px,4vw,72px);align-items:center;
  padding:clamp(28px,3.4vw,52px);border-radius:var(--r-card);
  background:var(--ice-50);border:1px solid var(--gray-200);
}
.perk__k{display:block;color:var(--blue-500);font-size:var(--fs-micro);margin-bottom:16px}
.perk__t{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.038em;line-height:1.05}
.perk__a{margin-top:12px;color:var(--gray-600);font-size:var(--fs-small);line-height:1.5}
.perk__act{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
.perk__r{display:flex;flex-direction:column;gap:20px;padding-left:clamp(0px,3vw,44px);border-left:1px solid var(--gray-300)}
.perk__logo{height:84px;width:auto;max-width:360px;object-fit:contain;object-position:left center}
.perk__deal{display:flex;align-items:baseline;gap:12px}
.perk__deal b{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--blue-500)}
.perk__deal span{color:var(--gray-600);font-size:var(--fs-small);line-height:1.4;max-width:26ch}
.perk__code{display:flex;flex-direction:column;gap:8px}
.perk__code > .mono{color:var(--gray-600);font-size:var(--fs-micro)}
.code{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:11px 16px;border-radius:var(--r-btn);background:var(--navy-900);color:#fff;align-self:flex-start;transition:background .3s var(--e2),transform .3s var(--e)}
.code b{font-size:var(--fs-micro-lg);letter-spacing:.16em}
.code .ico{width:var(--ico-sm);height:var(--ico-sm);opacity:.6}
.code:hover{background:var(--blue-500);transform:translateY(-2px)}
.code__ok{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(5px);padding:6px 11px;border-radius:6px;background:var(--blue-600);color:#fff;font-size:var(--fs-micro);opacity:0;pointer-events:none;transition:.3s var(--e);white-space:nowrap}
.code.ok .code__ok{opacity:1;transform:translateX(-50%)}
/* Antes era so a validade do codigo, em letra miuda. Agora carrega a
   instrucao de como obter o desconto: ganha corpo de leitura e uma
   regua que a separa do numero. */
.perk__note{
  margin-top:4px;padding-top:16px;border-top:1px solid var(--gray-300);
  color:var(--gray-600);font-size:var(--fs-micro-lg);line-height:1.55;
  text-transform:none;letter-spacing:0;max-width:34ch;
}

.duo{grid-column:1/13;margin-top:clamp(16px,1.8vw,24px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,24px)}
.duo__i{padding:clamp(26px,3vw,44px);border-radius:var(--r-card);border:1px solid var(--gray-200);display:flex;flex-direction:column;transition:border-color .4s var(--e2),transform .4s var(--e)}
.duo__i:hover{border-color:var(--gray-300);transform:translateY(-3px)}
.duo__k{display:block;color:var(--gray-600);font-size:var(--fs-micro);margin-bottom:16px}
.duo__i h3{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.032em;line-height:1.15}
.duo__i p{margin-top:12px;color:var(--gray-600);font-size:var(--fs-small);line-height:1.58}
.duo__i img{margin-top:auto;padding-top:34px;height:140px;width:auto;max-width:320px;object-fit:contain;object-position:left bottom;filter:grayscale(1);opacity:.6;transition:.4s var(--e2)}
.duo__i:hover img{filter:none;opacity:1}

/* ============================================================
   11 · SOCIAL
   ============================================================ */
/* a pausa da página: mais ar, leitura estreita e o logo integrado por um
   fio em vez de encaixotado num card */
#social{padding-block:var(--sec-y)}
.social{align-items:start;row-gap:clamp(40px,5vw,68px)}
/* O texto ficava travado em 44ch dentro de uma coluna de 645px: 512px
   de altura ao lado de um logo de 142px. Mais coluna e mais medida
   encurtam o bloco e equilibram a dupla. */
.social__t{grid-column:1/8}
.social__t .shd__t{margin-top:22px;font-size:var(--fs-d3);line-height:1}
/* o rotulo tambem e um <p>: sem o :not ele herdava corpo de 17px
   em cinza, em vez do mono azul de 13px das outras secoes */
.social__t > p:not(.eyebrow){margin-top:26px;color:var(--gray-600);font-size:var(--fs-body);line-height:1.68;max-width:53ch;text-wrap:pretty}
.social__t strong{color:var(--gray-900);font-weight:600}
.social__t .btn{margin-top:32px}
.social__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.social__t .social__cta .btn{margin-top:0}

/* ---------- LEIA MAIS ---------- */
.mais{margin-top:20px}
.mais__b{
  display:inline-flex;align-items:center;gap:8px;width:max-content;cursor:pointer;
  list-style:none;min-height:44px;
  color:var(--blue-500);font-size:var(--fs-small);font-weight:500;
  transition:color .3s var(--e2);
}
.mais__b::-webkit-details-marker{display:none}
.mais__b:hover{color:var(--navy-900)}
.mais__b:focus-visible{outline:2px solid var(--blue-500);outline-offset:4px;border-radius:4px}
.mais__i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e)}
.mais[open] .mais__i{transform:rotate(180deg)}
.mais__z{display:none}
.mais[open] .mais__a{display:none}
.mais[open] .mais__z{display:inline}
/* estes <p> nao sao filhos diretos de .social__t, entao a regra de corpo
   e medida da secao passa longe deles: repetida aqui de proposito */
.mais__c p{margin-top:22px;color:var(--gray-600);font-size:var(--fs-body);
  line-height:1.68;max-width:53ch;text-wrap:pretty}
/* abertura animada onde o navegador sabe fazer; onde nao sabe, abre seco */
@supports selector(::details-content) and (interpolate-size: allow-keywords){
  .mais{interpolate-size:allow-keywords}
  .mais::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .42s var(--e),content-visibility .42s allow-discrete;
  }
  .mais[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){
  .mais::details-content{transition:none}
  .mais__i{transition:none}
}

/* ---------- PROGRAMA LEADERX IMPACTO ---------- */
.prog{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:clamp(20px,2.2vw,26px);
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.prog__k{font-family:var(--fm);font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-500)}
.prog__d{color:var(--gray-600);font-size:var(--fs-small);line-height:1.6;text-wrap:pretty}
.prog__d strong{color:var(--gray-900);font-weight:600}
.prog .btn{margin-top:6px}
/* Sem superficie, o logo ficava boiando no meio de um bloco de texto
   tres vezes mais alto. Como cartao, vira um objeto com peso proprio. */
/* a direita virou pilha: o card do logo em cima, o programa embaixo.
   O grid-column mora aqui agora — dentro de um flex ele seria inerte. */
.social__r{grid-column:9/13;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.social__c{
  display:flex;flex-direction:column;align-items:center;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-card);
  padding-inline:clamp(20px,2.4vw,34px);padding-bottom:clamp(24px,2.6vw,34px);
  gap:clamp(18px,2vw,26px);
  padding-top:clamp(26px,2.8vw,36px);
}
.social__c img{width:min(300px,100%);height:auto}
.social__c figcaption{color:var(--gray-600);font-size:var(--fs-micro);text-align:center;line-height:1.5}

/* ============================================================
   13 · MARQUEE
   ============================================================ */
.mq{position:relative;overflow:hidden;-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;width:max-content;animation:slide 48s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
.mq__row{display:flex;align-items:center;gap:clamp(32px,4.5vw,72px);padding-inline:clamp(16px,2.2vw,36px)}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.mq__l{flex:none;display:grid;place-items:center;height:clamp(88px,9.5vw,126px);transition:transform .4s var(--e)}
/* os logos dos mantenedores são versões brancas, por isso esta faixa é escura */
.mq__l img{max-height:100%;width:auto;max-width:clamp(190px,24vw,304px);object-fit:contain;opacity:.55;transition:.4s var(--e2)}
.mq__l:hover{transform:scale(1.05)}
.mq__l:hover img{opacity:1}

/* ============================================================
   14 · FAQ
   ============================================================ */
.faq__wrap{align-items:start;row-gap:clamp(36px,4vw,56px)}
.faq__head{grid-column:1/5;position:sticky;top:calc(var(--nav-h) + 40px)}
.faq__head .shd__t{margin-top:20px}
.faq__head .shd__s{margin-top:22px;font-size:var(--fs-body)}
.faq{grid-column:6/13}
.q{border-top:1px solid var(--gray-300)}
.q:last-child{border-bottom:1px solid var(--gray-300)}
.q summary{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);padding-block:clamp(20px,2.2vw,28px);cursor:pointer;list-style:none;transition:color .25s}
.q__n{flex:none;color:var(--seat);font-size:var(--fs-micro);transition:color .3s}
.q__t{flex:1;font-size:var(--fs-h5);font-weight:500;letter-spacing:-.024em;line-height:1.3}
.q summary:hover .q__t{color:var(--blue-600)}
.q summary:hover .q__n{color:var(--blue-500)}
.q summary i{position:relative;flex:none;width:20px;height:20px}
/* O "+" estava em --navy-900 (#080808) — resquício da inversão claro→escuro,
   onde esse token era a TINTA sobre fundo branco. Sobre #111111 ele virou
   preto no preto: o controle existia e não se via. Passa para --gray-600,
   que é a mesma família de --seat usada no numeral ao lado: 6,74:1 contra
   o fundo da seção, folgado sobre os 3:1 que a WCAG pede para controle. */
.q summary i::before,.q summary i::after{content:'';position:absolute;left:50%;top:50%;background:var(--gray-600);transform:translate(-50%,-50%);transition:.4s var(--e)}
.q summary i::before{width:14px;height:1.4px}
.q summary i::after{width:1.4px;height:14px}
.q[open] summary i{transform:rotate(90deg)}
.q[open] summary i::after{height:0}
.q[open] .q__n{color:var(--blue-500)}
.q__b{padding:0 0 clamp(22px,2.4vw,30px) calc(clamp(14px,1.6vw,26px) + 22px)}
.q__b p{color:var(--gray-600);font-size:var(--fs-body);line-height:1.68;max-width:52ch}

/* ============================================================
   15 · CTA FINAL
   ============================================================ */

/* o QR não fica solto: ganha moldura, fio e legenda funcional,
   como o lugar reservado que fecha a composição */
/* fio de topo que se desenha — marca o lugar à mesa */

/* ============================================================
   FOOTER
   ============================================================ */
.ft{background:var(--navy-950);color:#fff;padding-top:clamp(56px,6vw,88px)}
.ft__in{padding-bottom:clamp(40px,4.6vw,64px);row-gap:40px}
.ft__brand{grid-column:1/5}
.ft__brand img{height:57px;width:auto}
.ft__brand p{margin-top:18px;color:rgba(255,255,255,.6);font-size:var(--fs-small);line-height:1.55;max-width:30ch}
.ft__brand .socials{margin-top:24px}
.ft__brand .socials a{border-color:rgba(255,255,255,.13);color:rgba(255,255,255,.7)}
.ft__brand .socials a:hover{background:#fff;border-color:#fff;color:var(--navy-950)}
.ft__c{display:flex;flex-direction:column;gap:6px;min-width:0}
.ft__c a{overflow-wrap:anywhere}
.ft__in > .ft__c:nth-child(2){grid-column:6/8}
.ft__in > .ft__c:nth-child(3){grid-column:8/10}
.ft__in > .ft__c:nth-child(4){grid-column:10/13}
.ft__c h3{color:var(--gold-l);font-size:var(--fs-micro);margin-bottom:8px}
.ft__c a,.ft__c span{font-size:var(--fs-small);color:rgba(255,255,255,.66);width:fit-content;padding-block:7px;transition:color .25s}
.ft__c a:hover{color:#fff}
.ft__bar{padding-block:22px 30px;border-top:1px solid rgba(255,255,255,.08);align-items:center;row-gap:10px}
.ft__bar p:nth-child(1){grid-column:1/5}
.ft__bar p:nth-child(2){grid-column:5/10;text-align:center}
/* Eram um link só; com a política de cancelamento viraram dois, e o
   seletor por href jogava os dois na mesma célula da grade, sobrepostos.
   Agora dividem a célula lado a lado. */
.ft__pol{grid-column:10/13;justify-self:end;display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
/* a barra ficava 2px menor que os links do rodape, e lia como letra
   miuda de contrato. Mesmo corpo do resto (--fs-small). */
.ft__bar p,.ft__bar a{font-size:var(--fs-small);color:rgba(255,255,255,.6)}
.ft__bar a{transition:color .25s}
.ft__bar a:hover{color:#fff}
/* a assinatura e a unica coisa do rodape que aponta para fora da marca:
   peso e azul da marca a separam do texto legal, sem gritar */
.ft__bar p a{
  color:var(--blue-400);font-weight:600;
  border-bottom:1px solid rgba(255,92,114,.4);
}
.ft__bar p a:hover{color:#fff;border-color:#fff}

/* ============================================================
   LIGHTBOX · TOPO
   ============================================================ */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(0,0,0,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .35s var(--e2);padding:clamp(16px,4vw,56px)}
.lb.on{opacity:1}
.lb__stage{max-width:min(1240px,100%);max-height:80vh;display:grid;place-items:center;transform:scale(.97);transition:transform .45s var(--e)}
.lb.on .lb__stage{transform:none}
.lb__stage img{max-width:100%;max-height:80vh;width:auto;border-radius:var(--r-img)}
.lb__stage iframe{width:min(420px,86vw);aspect-ratio:9/16;max-height:80vh;border:0;border-radius:var(--r-img);background:#000}
.lb__cap{position:absolute;left:0;right:0;bottom:clamp(14px,3vw,26px);text-align:center;color:rgba(255,255,255,.5);font-size:var(--fs-micro);padding-inline:70px}
.lb__x,.lb__nav{position:absolute;z-index:2;width:46px;height:46px;border-radius:var(--r-btn);display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);color:#fff;transition:.28s var(--e2)}
.lb__x svg,.lb__nav svg{width:var(--ico-lg);height:var(--ico-lg)}
.lb__x:hover,.lb__nav:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.lb__x{top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px)}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__nav--p{left:clamp(10px,2.4vw,26px)}
.lb__nav--n{right:clamp(10px,2.4vw,26px)}
.lb.vid .lb__nav{display:none}

.totop{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:140;width:46px;height:46px;border-radius:var(--r-btn);display:grid;place-items:center;background:var(--navy-900);color:#fff;opacity:0;transform:translateY(12px);pointer-events:none;transition:.45s var(--e)}
.totop svg{width:var(--ico);height:var(--ico)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--blue-500);transform:translateY(-3px)}

/* ============================================================
   ANIMAÇÕES DE ENTRADA
   ============================================================ */
/* modo de segurança: se o reveal por scroll não puder rodar, tudo fica visível */
.no-anim [data-anim]{opacity:1 !important;transform:none !important}
.no-anim .hero__h1 .l,.no-anim .stmt__h .l{opacity:1 !important;animation:none !important}
.no-anim .hero__h1 .l:last-child::after{transform:scaleX(1)}
.no-anim .tl__rail::before{transform:scaleY(1)}
.no-anim .pillar::before{transform:scaleX(1)}
.no-anim .pillar__n{color:var(--navy-900)}
.no-anim .cast--lead .p__i{border-color:var(--navy-900);color:var(--navy-900)}
.no-anim .tl__t{color:var(--navy-900)}
.no-anim .p__m img,.no-anim .reel__m img,.no-anim .ph img{transform:none !important}

[data-anim]{opacity:0;transform:translateY(24px);will-change:opacity,transform}
[data-anim].in{opacity:1;transform:none;transition:opacity .6s var(--e),transform .7s var(--e)}
[data-delay="1"].in{transition-delay:.08s}
[data-delay="2"].in{transition-delay:.16s}
[data-delay="3"].in{transition-delay:.24s}
[data-delay="4"].in{transition-delay:.32s}

.hero__h1 .l,.stmt__h .l{opacity:0}
.hero__h1.in .l,.stmt__h.in .l{opacity:1;animation:lift .9s var(--e) both}
.hero__h1.in .l:nth-child(2),.stmt__h.in .l:nth-child(2){animation-delay:.08s}
.hero__h1.in .l:nth-child(3){animation-delay:.16s}
.hero__h1.in .l:nth-child(4){animation-delay:.24s}
@keyframes lift{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}


/* ---------- TEMA DA EDIÇÃO (hero) ---------- */
.hero__theme{margin-bottom:clamp(16px,1.8vw,22px);padding-left:20px;border-left:2px solid var(--blue-400)}
.hero__theme .mono{display:block;color:rgba(255,255,255,.6);font-size:var(--fs-micro);margin-bottom:12px}
.hero__theme p{
  font-size:var(--fs-h4);line-height:1.22;letter-spacing:-.03em;
  font-weight:500;color:#fff;max-width:22ch;text-wrap:balance;
}

/* ---------- brilho que percorre o botão principal ---------- */
.btn--pri{position:relative;overflow:hidden;isolation:isolate}
.btn--pri > *{position:relative;z-index:1}
.btn--pri::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.22) 50%,transparent 78%);
  transform:translateX(-130%);transition:transform .75s var(--e);
}
.btn--pri:hover::after{transform:translateX(130%)}

/* ---------- parallax discreto na foto do hero ---------- */
.hero__fig img{transform:translate3d(0,var(--py,0px),0) scale(1.1)}

/* ============================================================
   ÍCONES SVG QUE SE DESENHAM + ENTRADA ESCALONADA
   ============================================================ */
.dico{
  width:36px;height:36px;stroke-width:1.4;color:var(--blue-500);
  stroke-dasharray:var(--len,180);stroke-dashoffset:var(--len,180);
  transition:stroke-dashoffset 1.25s var(--e) .18s;
}
.in .dico,.no-anim .dico{stroke-dashoffset:0}

.pillar__n{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.pillar:hover .dico{color:var(--blue-600)}
.tl__ico{display:block;margin-bottom:18px}
.tl__ico .dico{width:34px;height:34px}
.duo__ico{display:block;margin-bottom:20px}
.duo__ico .dico{width:34px;height:34px}

/* atraso progressivo dentro de cada grupo (o JS limita o índice a 8) */
[data-stagger] > [data-anim].in{transition-delay:calc(var(--i,0) * 55ms)}
[data-stagger] > [data-anim].in .dico{transition-delay:calc(var(--i,0) * 55ms + 180ms)}
[data-stagger] > .pillar.in::before{transition-delay:calc(var(--i,0) * 55ms)}

/* cards de pessoas e mídia: entrada com leve aproximação */
.p[data-anim],.reel[data-anim],.ph[data-anim]{transform:translateY(26px) scale(.985)}
.p[data-anim].in,.reel[data-anim].in,.ph[data-anim].in{transform:none}
.p[data-anim] .p__m img,.reel[data-anim] .reel__m img,.ph[data-anim] img{transform:scale(1.06)}
.p[data-anim].in .p__m img,.reel[data-anim].in .reel__m img,.ph[data-anim].in img{transform:scale(1)}

/* ============================================================
   RESPONSIVO
   Regra do projeto: de 1024px para baixo (tablet e mobile),
   títulos, textos e elementos ficam centralizados.
   ============================================================ */

/* ---- 1180px: navbar vira drawer ---- */
@media (max-width:1180px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav__brand{grid-column:1/7}
  .nav__act{grid-column:7/13}
}

/* ---- 1100px: ajustes de composição ---- */
@media (max-width:1100px){
  .hero__h1{grid-column:1/9}
  .hero__fig{grid-column:9/13}
  .stmt__h{grid-column:1/8}
  .stmt__aside{grid-column:8/13}
  .voice__q{grid-column:1/12}
  .voice__real{grid-column:1/12}
  .voice__by{grid-column:1/12}
  .faq__head{grid-column:1/6}
  .faq{grid-column:6/13}
  .cast--xs{--c:4}
}

/* ============================================================
   ≤1024px · TABLET + MOBILE — CENTRALIZAÇÃO
   ============================================================ */
@media (max-width:1024px){

  :root{--nav-h:88px;--sec-y:clamp(72px,11vw,110px)}
  .nav__brand img{height:50px}

  /* --- HERO empilhado e centralizado --- */
  .hero__in{padding-top:calc(var(--nav-h) + 18px);text-align:center}
  .hero__h1{grid-column:1/13;grid-row:1;margin-top:0;font-size:clamp(44px,8.4vw,72px);line-height:.99}
  .hero__fig{
    grid-column:1/13;grid-row:2;margin:32px 0 0;
    margin-inline:calc(var(--gut) * -1);
    height:min(clamp(300px,50vw,460px), 42svh);min-height:0;
  }
  .hero__fig{border-radius:0}
  .hero__fig img{object-position:center 18%}
  .hero__fig figcaption{left:50%;right:auto;transform:translateX(-50%);text-align:center}
  .hero__edge{display:none}
  .hero__side{grid-column:1/13;grid-row:3;margin-top:32px;display:flex;flex-direction:column;align-items:center}
  .hero__side > *{max-width:100%}
  .hero__theme{padding:18px 0 0;border-left:0;border-top:2px solid var(--blue-400);text-align:center;width:100%}
  .hero__theme p{margin-inline:auto;max-width:26ch}
  .hero__lead{width:100%;max-width:min(56ch,100%)}
  .hero__cta{justify-content:center;width:100%;max-width:440px}
  .hero__host{justify-content:center}
  .hero__host::after{display:none}

  /* --- faixa de dados --- */
  .strip__c{grid-column:span 6;align-items:center;text-align:center;padding:22px 12px}
  .strip__c:first-child{padding-left:12px}
  .strip__c + .strip__c::before{display:none}
  .strip__c:nth-child(odd)::after{content:'';position:absolute;right:0;top:18px;bottom:18px;width:1px;background:var(--gray-200)}
  .strip__c:nth-child(n+3){border-top:1px solid var(--gray-200)}

  /* --- STATEMENT --- */
  .stmt__in{text-align:center}
  .stmt .eyebrow{grid-row:1;justify-content:center}
  .stmt__h{grid-column:1/13;grid-row:2;font-size:clamp(38px,7.4vw,64px)}
  .stmt__aside{grid-column:1/13;grid-row:3;margin-top:28px;padding-bottom:0;align-self:start}
  .stmt__aside p{max-width:56ch;margin-inline:auto}
  .stmt__stats{grid-row:4;grid-template-columns:repeat(2,1fr);gap:0;border-top:0}
  /* o fio era branco a 12% sobre fundo branco — existia e nao aparecia.
     Sobrou de quando esta secao era escura. */
  .stmt__stats li{align-items:center;text-align:center;padding:26px 12px;border-top:1px solid var(--gray-300)}
  .stmt__stats li:nth-child(even){border-left:1px solid var(--gray-300)}
  .stmt__stats li + li{padding-left:12px}
  .stmt__stats li:nth-child(odd)::before{display:none}
  .stmt__stats li:nth-child(even)::before{left:0}

  /* --- CABEÇALHOS DE SEÇÃO --- */
  .shd{text-align:center;width:100%;margin-inline:auto}
  .shd .eyebrow{justify-content:center}
  .shd__s{margin-inline:auto}
  .shd--row{grid-template-columns:1fr;justify-items:center;text-align:center}
  .shd--row .shd__s{max-width:56ch;padding-bottom:0;margin-top:20px}

  /* --- PILARES empilhados --- */
  .pillar{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:14px;padding-block:clamp(32px,4.6vw,46px)}
  .pillar__n{grid-column:1;grid-row:1;padding-top:0;color:var(--blue-500);align-items:center;gap:14px}
  .pillar__b h3{grid-column:1;grid-row:2}
  .pillar__b p{grid-column:1;grid-row:3;padding-top:0;margin-inline:auto;max-width:56ch}
  .pillar__k{grid-column:1;grid-row:4;justify-self:center;text-align:center;max-width:none}

  /* --- PESSOAS --- */
  .cast{justify-content:center}
  .cast--lead{--c:2;width:100%;max-width:680px;margin-inline:auto}
  /* o teto de 680px e da MESA, para os quatro retratos nao esticarem no
     tablet. As fichas do palco nao tem esse problema e o teto so fazia
     elas recuarem 33px de cada lado, saindo do prumo da secao. */
  .cast--par{max-width:none}
  .cast--sm{--c:3}
  .cast--xs{--c:3}
  .p__b{text-align:center}
  .p__i{margin-inline:auto}

  /* --- TIMELINE empilhada --- */
  .tl__i{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:0;padding-block:clamp(28px,4vw,40px)}
  .tl__rail{display:none}
  .tl__t{font-size:clamp(30px,5.4vw,42px);color:var(--navy-900)}
  .tl__k{margin-top:8px;margin-bottom:14px}
  .tl__c{display:flex;flex-direction:column;align-items:center}
  .tl__c p{margin-inline:auto;max-width:54ch}

  /* --- MOSAICO --- */
  .mosaic{columns:2}
  .bleed .ph--hero{height:clamp(260px,42vw,420px)}

  /* --- RELATOS: duas colunas, o desnível vira uma onda --- */
  .reels{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:620px;margin-inline:auto}
  .reel__b{text-align:center}

  /* --- VOICE --- */
  .voice__in{text-align:center}
  .voice .eyebrow{justify-content:center}
  .voice__q{grid-column:1/13}
  .voice__real{grid-column:1/13}
  .voice__pull{font-size:clamp(23px,4.4vw,34px);max-width:24ch;margin-inline:auto}
  .voice__rest{margin-inline:auto;max-width:53ch}
  .voice__by{grid-column:1/13;flex-direction:column;gap:14px;justify-content:center}
  .voice__by figcaption{text-align:center}

  /* --- BENEFÍCIOS --- */
  .perk{grid-template-columns:1fr;justify-items:center;text-align:center;gap:34px}
  .perk__l{display:flex;flex-direction:column;align-items:center}
  .perk__act{justify-content:center}
  .perk__r{padding-left:0;padding-top:34px;border-left:0;border-top:1px solid var(--gray-300);width:100%;align-items:center}
  .perk__logo{object-position:center}
  .perk__deal{flex-direction:column;align-items:center;gap:6px}
  .perk__deal span{max-width:24ch;text-align:center}
  .perk__code{align-items:center}
  .code{align-self:center}
  .duo{grid-template-columns:1fr}
  .duo__i{align-items:center;text-align:center}
  .duo__ico,.tl__ico{margin-inline:auto}
  .duo__i img{object-position:center bottom;margin-inline:auto}

  /* --- SOCIAL --- */
  .social__t{grid-column:1/13;display:flex;flex-direction:column;align-items:center;text-align:center}
  .social__t .eyebrow{justify-content:center}
  .social__t > p:not(.eyebrow){margin-inline:auto}
  .social__r{grid-column:1/13;width:100%;max-width:560px;margin-inline:auto}
  .social__cta{justify-content:center}
  .mais{align-self:center}
  .prog{align-items:center;text-align:center}
  .prog__d{margin-inline:auto}
  .mais__c p{margin-inline:auto}

  /* --- FAQ --- */
  .faq__head{grid-column:1/13;position:static;text-align:center;display:flex;flex-direction:column;align-items:center}
  .faq__head .eyebrow{justify-content:center}
  .faq__head .shd__s{margin-inline:auto}
  .faq{grid-column:1/13;max-width:820px;margin-inline:auto;width:100%}
  /* Empilhado o cabeçalho já vem centrado; deixar as perguntas à esquerda
     quebrava o eixo no meio da seção. Agora a linha inteira se organiza em
     torno do centro: numeral à esquerda, título centrado, "+" à direita.

     Os dois marcadores recebem a MESMA largura de propósito — sem isso o
     título centraria no espaço que sobra, não no centro da linha, e a
     diferença entre um numeral de ~16px e um ícone de 20px apareceria. */
  .q summary{text-align:center}
  .q__n{width:22px;text-align:left}
  .q summary i{width:22px}
  .q__t{text-align:center}
  .q__b,.q__b p{text-align:center}

  /* --- CTA FINAL --- */
  /* o QR desce para baixo da headline em vez de sumir:
     é o caminho de entrada para a próxima edição também no celular */

  /* --- FOOTER --- */
  .ft__in{justify-items:center;text-align:center;row-gap:44px}
  .ft__brand{grid-column:1/13;display:flex;flex-direction:column;align-items:center}
  .ft__brand p{max-width:38ch}
  .ft__in > .ft__c,
  .ft__in > .ft__c:nth-child(2),
  .ft__in > .ft__c:nth-child(3),
  .ft__in > .ft__c:nth-child(4){grid-column:span 4;align-items:center}
  .ft__c a,.ft__c span{width:auto}
  .ft__bar{justify-items:center;text-align:center;row-gap:8px}
  .ft__bar p:nth-child(1),.ft__bar p:nth-child(2),.ft__pol{grid-column:1/13;justify-self:center}
  .ft__pol{justify-content:center;gap:14px}
  /* empilhado, a assinatura fecha o rodape. 'order' em vez de reordenar
     o HTML porque o desktop posiciona por :nth-child — mexer na ordem
     do documento quebraria as tres colunas de la. */
  .ft__bar p:nth-child(2){order:1;margin-top:4px}
}

/* ---- 900px ---- */
@media (max-width:900px){
  .cast--sm{--c:3}
  .cast--xs{--c:3}
  .perk{padding:clamp(24px,4vw,36px)}
  }

/* ---- 719px ---- */
@media (max-width:719px){
  .cast{--c:2}
  /* ficha horizontal em duas colunas daria ~157px por card: foto de 60px
     ao lado de 80px de texto, inutil. Uma por fileira, largura cheia. */
  .cast--par{grid-template-columns:minmax(0,1fr)}
  .cast--lead{--c:2;max-width:none}
  /* Aqui a mesa ja corre em 2 colunas de largura cheia. Tirar outros
     30% deixava o card do palco com ~130px, e o rotulo "Mestre de
     cerimonias" (178px de texto) quebrava em duas linhas. Como cada
     card e uma GRADE PROPRIA, so o retrato daquele card descia e a
     fileira desalinhava. Sem o encolhimento, o card volta a ~184px. */
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .perk__act{flex-direction:column;width:100%;max-width:340px}
  .perk__act .btn{width:100%}
  .ft__in > .ft__c,
  .ft__in > .ft__c:nth-child(2),
  .ft__in > .ft__c:nth-child(3),
  .ft__in > .ft__c:nth-child(4){grid-column:1/13}
}

/* ---- 560px ---- */
@media (max-width:560px){
  .strip__c{grid-column:1/13;border-top:1px solid var(--gray-200)}
  .strip__c:first-child{border-top:0}
  .strip__c:nth-child(odd)::after{display:none}
  .mosaic{columns:1}
  .stmt__stats{grid-template-columns:repeat(2,1fr)}
  .stmt__stats li{padding:22px 8px}
  .stmt__stats li + li{padding-left:8px}
  .stmt__stats li::before{display:none !important}
  /* rotulo de duas palavras nao pode empurrar so a sua celula para baixo:
     a linha reservada mantem os quatro numeros alinhados entre si */
  .stmt__stats .mono{min-height:2.6em;display:flex;align-items:flex-start;justify-content:center;text-align:center}
  .nav__cta{display:none}
  .q__b{padding-left:0}
  .lb__nav{width:40px;height:40px}
  .lb__nav--p{left:6px}
  .lb__nav--n{right:6px}
  .lb__cap{padding-inline:14px;bottom:8px}
}

/* ---- 400px ---- */
@media (max-width:400px){
  .cast--lead{--c:1;width:100%;max-width:290px;margin-inline:auto}
  /* mesmo motivo do tablet: o teto e da mesa, nao da ficha. Com 290px a
     ficha recuava 43px de cada lado e saia do prumo da secao. */
  .cast--par{max-width:none}
  .hero__h1{font-size:clamp(38px,10.6vw,46px)}
}

/* ============================================================
   PREFERÊNCIAS DO USUÁRIO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  [data-anim]{opacity:1 !important;transform:none !important}
  .hero__h1 .l,.stmt__h .l{opacity:1 !important;animation:none !important}
  .mq__track{animation:none;transform:none}
  .hero__fig img{transform:scale(1.1) !important}
  .tl__rail::before{transform:scaleY(1)}
  .pillar::before{transform:scaleX(1)}
  .dico{stroke-dashoffset:0 !important}
  .p__m img,.reel__m img,.ph img{transform:none !important}
}

/* ============================================================
   ESPAÇO VAGO · edição em montagem
   ------------------------------------------------------------
   O nome ainda não existe, mas a lacuna é desenhada: quem chega
   entende que falta gente a anunciar, não que a página quebrou.
   Cada bloco some sozinho quando o conteúdo real entrar no lugar.
   Usado pela edicao de outubro (index.html); inofensivo para as demais.
   ============================================================ */
.p--vago .p__m{
  background:linear-gradient(150deg,var(--gray-200,#1A1A1A),#fff);
  border:1px dashed var(--gray-300,#282828);
  display:grid;place-items:center;cursor:default;
}
/* ------------------------------------------------------------
   O aviso vive DENTRO da moldura, onde o rosto vai entrar, e
   nao chega parado: quando o card entra em cena, uma faixa de
   luz atravessa a moldura e o "Em breve" sobe atras dela. Como
   os cards ja entram escalonados por --i, a sala inteira revela
   em cascata, de cima para baixo.
   ------------------------------------------------------------ */
.p--vago .p__m::after{
  content:'Em breve';z-index:2;
  font-family:var(--fm,monospace);font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--seat,#5A6C86);
  opacity:0;transform:translateY(12px) scale(.96);
  transition:opacity .55s var(--e),transform .7s var(--e);
}
.p--xs.p--vago .p__m::after{font-size:12px;letter-spacing:.1em}

/* a faixa de luz: some sozinha depois de tres passadas, para nao
   virar barulho de fundo em quem fica lendo a pagina */
.p--vago .p__m::before{
  content:'';position:absolute;inset:-20%;z-index:1;pointer-events:none;
  /* branco sobre caixa quase branca dava 0% de diferenca no lado claro:
     invisivel. O azul da marca aparece nos dois extremos do gradiente. */
  background:linear-gradient(105deg,
    transparent 34%,rgba(255,92,114,.30) 50%,transparent 66%);
  transform:translateX(-130%);
}

.p--vago.in .p__m::after{
  opacity:1;transform:none;
  transition-delay:calc(var(--i,0) * 90ms + .18s);
}
.p--vago.in .p__m::before{
  animation:vagoLuz 2.6s var(--e2) 3;
  animation-delay:calc(var(--i,0) * 90ms);
}
@keyframes vagoLuz{
  0%{transform:translateX(-130%)}
  42%,100%{transform:translateX(130%)}
}

/* o veu de hover do card cheio nao vale para a vaga */
.p--vago:hover .p__m::after{opacity:1}

/* sem movimento, o aviso simplesmente esta la */
@media (prefers-reduced-motion:reduce){
  .p--vago .p__m::after{
    opacity:1;transform:none;transition:none;
  }
  .p--vago .p__m::before{display:none}
}
/* rede de seguranca: se o observador nao disparar, nada fica invisivel */
.no-anim .p--vago .p__m::after{
  opacity:1 !important;transform:none !important;
}
.no-anim .p--vago .p__m::before{display:none}
/* O cinza fantasma dava 1,33:1: palavra visível na tela tem de ser
   legível. Quem sinaliza a vaga é a moldura tracejada e o rótulo,
   não o apagamento do texto. */
.p--vago .p__n,.p--vago .p__r{color:var(--gray-600,#5A6C86)}


/* logo ainda não definido */
/* ---------- patrocinadores e apoiadores da edição ---------- */
.apoio{grid-column:1/13;margin-top:clamp(30px,3.4vw,50px)}
/* a margem do .shd ja abre o vao: somar as duas dava 116px onde
   todas as outras secoes abrem 66px */
.shd + .apoio{margin-top:0}
.apoio + .apoio{margin-top:clamp(34px,4vw,60px)}
.apoio__k{
  font-family:var(--fm,monospace);font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--seat,#5A6C86);
  padding-bottom:12px;margin-bottom:22px;
  border-bottom:1px solid var(--rule,#282828);
}
/* Patrocinador ocupa 1/3 da linha; apoiador, 1/4. A diferenca de
   tamanho e o que separa as duas categorias — antes as duas caixas
   tinham a mesma medida e a hierarquia so existia no rotulo. */
/* ---------- CARD DE PATROCINADOR ----------
   Com dois patrocinadores, o modal escondia justamente o que eles pagaram
   para mostrar. No card o video fica na tela, o botao de assistir e visivel
   sem depender de passar o mouse, e o caminho para o site nao some.
   A capa e local e so vira player no clique: dois iframes do YouTube em
   toda visita custariam ~2MB e entregariam o visitante antes de ele pedir. */
.patros{display:grid;gap:clamp(16px,1.8vw,24px)}
.patro{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px,2.6vw,40px);align-items:center;
  padding:clamp(20px,2.2vw,30px);
  border:1px solid var(--rule,#282828);border-radius:var(--r-card,14px);background:#fff;
}
.patro__b{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.6vw,20px)}
.patro__k{color:var(--gray-600);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase}
.patro__l{width:100%;max-width:300px;height:auto;max-height:200px;
  object-fit:contain;object-position:left center;margin-right:auto}
.patro__v{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--navy-950,#000000)}
/* o <video> local precisa das mesmas medidas do iframe */
.patro__v iframe,.patro__v video{position:absolute;inset:0;width:100%;height:100%;border:0}
.patro__v video{background:#000;object-fit:contain}
.patro__f{
  position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:pointer;display:block;
}
.patro__f::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:rgba(0,0,0,.8);transition:background .35s var(--e2);
}
.patro__f img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--e)}
.patro__f:hover img{transform:scale(1.035)}
.patro__f:hover::after{background:rgba(0,0,0,.72)}
.patro__f:focus-visible{outline:2px solid var(--blue-500);outline-offset:-3px}
/* sempre visivel: e a promessa do card, nao um premio por passar o mouse */
.patro__p{
  position:absolute;left:50%;top:50%;z-index:2;
  transform:translate(-50%,-82%);
  width:clamp(52px,5vw,64px);height:clamp(52px,5vw,64px);
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.95);color:var(--navy-900,#080808);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .35s var(--e),background .3s var(--e2);
}
.patro__p svg{width:26px;height:26px;margin-left:3px}
.patro__f:hover .patro__p{transform:translate(-50%,-82%) scale(1.08);background:#fff}
.patro__c{
  position:absolute;left:50%;top:50%;z-index:2;
  width:min(88%,420px);transform:translate(-50%,42px);
  color:#fff;font-family:var(--fm);font-size:clamp(12px,1vw,15px);
  font-weight:700;line-height:1.3;letter-spacing:.08em;text-align:center;text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.75);
}
/* ---------- CARD DE APOIADOR ----------
   Mesma gramatica do patrocinador — logo, video, caminho para o site —
   mas um degrau abaixo. A diferenca esta no TAMANHO, nao no rotulo: card
   mais estreito, logo menor, selo de play menor. Quem passa o olho ve a
   hierarquia antes de ler "Apoiador". */
/* ---------- APOIADORES LADO A LADO ----------
   Antes cada apoiador era um card horizontal (marca à esquerda, vídeo à
   direita) empilhado sobre o outro: duas faixas inteiras da página para
   duas marcas de segundo nível — e o vídeo do apoiador ocupava mais área
   que o logo do patrocinador logo acima, invertendo a hierarquia que a
   própria seção declara.

   Agora os dois dividem a linha e cada card é vertical: rótulo, logo,
   ações. O vídeo saiu de dentro do card e virou botão de modal, o mesmo
   caminho do vídeo da anfitriã.

   O contêiner de ações leva margin-top:auto para os botões dos dois cards
   pousarem na mesma linha mesmo com logos de alturas diferentes — e elas
   são bem diferentes: Novitá é 900x315, Titan é 200x60. */
.patros--apoio{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.patro--apoio{
  grid-template-columns:minmax(0,1fr);
  max-width:none;align-items:stretch;
  padding:clamp(18px,1.9vw,26px);
}
/* Conteúdo centrado no card. O .patro__b nasce alinhado à esquerda porque
   foi desenhado para o card horizontal do patrocinador, onde a coluna da
   marca encosta na coluna do vídeo e o alinhamento à esquerda amarra as
   duas. Aqui não há segunda coluna: o eixo do card é o centro dele.

   São três coisas e não uma — o alinhamento do flex, o object-position do
   logo (que vinha `left center`) e o margin-right:auto da base, que
   precisa virar margin-inline:auto ou o logo continua colado à esquerda
   mesmo com o container centrado. */
.patro--apoio .patro__l{
  max-width:230px;max-height:104px;
  object-position:center;margin-inline:auto;
}
.patro--apoio .patro__b{
  gap:clamp(12px,1.3vw,16px);height:100%;
  align-items:center;text-align:center;
}
.patro__acoes{display:flex;flex-wrap:wrap;gap:10px;width:100%;margin-top:auto}
.patro--apoio .patro__acoes{justify-content:center}

/* Dois cards lado a lado precisam de uns 300px cada mais o vão. Abaixo
   disso eles empilham — e aí voltam a ser um por linha, não um card
   horizontal como antes. */
@media (max-width:719px){
  .patros--apoio{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
  .patro{grid-template-columns:minmax(0,1fr);gap:clamp(16px,3vw,22px)}
  .patro__b{align-items:center;text-align:center}
  .patro__l{margin-inline:auto;object-position:center}
  .patro:not(.patro--apoio) .patro__l{max-width:min(300px,80%)}
  .social__c img{width:min(300px,80%)}
  .patro--apoio .patro__l{max-width:200px}
  .patro--apoio{max-width:100%}
  .patro__acoes{justify-content:center}
}

/* ---------- modal da marca ---------- */
.pmod{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(16px,4vw,40px)}
.pmod[hidden]{display:none}
.pmod__scrim{position:absolute;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(6px)}
/* Os 880px existem para o 16:9 do video. No modal do CTA da hero, que
   nao tem video, sobrava meia largura vazia a direita — o card media o
   video que nao estava la. Sem video, ele encolhe ate a medida do texto. */
.pmod__c:has(.pmod__v:empty){width:min(548px,100%)}
.pmod__c{
  position:relative;z-index:1;width:min(880px,100%);max-height:90svh;overflow:auto;
  background:var(--white,#fff);border-radius:var(--r-card,14px);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.6);
}
.pmod__x{
  position:absolute;top:12px;right:12px;z-index:2;
  width:42px;height:42px;border-radius:var(--r-btn,10px);
  display:grid;place-items:center;
  background:rgba(255,255,255,.92);border:1px solid var(--rule,#282828);
  color:var(--navy-900,#080808);transition:.25s var(--e2);
}
.pmod__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.pmod__x:hover{background:var(--navy-900,#080808);border-color:var(--navy-900,#080808);color:#fff}
.pmod__v{position:relative;aspect-ratio:16/9;background:var(--navy-950,#000000);
  border-radius:var(--r-card,14px) var(--r-card,14px) 0 0;overflow:hidden}
.pmod__v:empty{display:none}
/* o <video> local precisa das MESMAS medidas do iframe: sem esta linha
   ele nasceria no tamanho intrinseco e estouraria a caixa 16/9 */
.pmod__v iframe,.pmod__v video{position:absolute;inset:0;width:100%;height:100%;border:0}
.pmod__v video{background:#000;object-fit:contain}
.pmod__b{padding:clamp(22px,3vw,34px)}
.pmod__k{
  font-family:var(--fm,monospace);font-size:var(--fs-micro,12px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--seat,#5A6C86);
}
.pmod__t{margin-top:10px;font-size:var(--fs-h3);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.pmod__d{margin-top:12px;color:var(--gray-600,#5A6C86);font-size:var(--fs-small);line-height:1.6;max-width:46ch}
.pmod__act{margin-top:clamp(18px,2vw,24px);display:flex;flex-wrap:wrap;gap:10px}
.pmod__act .btn{flex:none}
#pmodSite2[hidden]{display:none}

@media (max-width:620px){

  .pmod{padding:0;place-items:end stretch}
  .pmod__c{max-height:94svh;border-radius:var(--r-card,14px) var(--r-card,14px) 0 0}
  .pmod__v{border-radius:var(--r-card,14px) var(--r-card,14px) 0 0}
}
@media (max-width:900px){
  }
@media (max-width:560px){
}

@media print{
  .nav,.drawer,.scrim,.totop,.progress,.hero__scroll,.lb,.mq{display:none !important}
  body{color:#000;background:#fff}
  [data-anim]{opacity:1 !important;transform:none !important}
  .hero__h1 .l,.stmt__h .l{opacity:1 !important}
  .stmt,.sec--navy,.voice,.ft{background:#fff !important;color:#000 !important}
}

/* ============================================================
   ENTRAR NA PLATAFORMA · nav, drawer e a seção de ingresso
   ============================================================ */

/* ---------- botão de login no menu ---------- */
.nav__log{
  display:inline-flex;align-items:center;gap:9px;
  height:46px;padding:0 18px;border-radius:var(--r-btn);
  border:1px solid var(--gray-300);
  font-size:var(--fs-small);font-weight:450;color:var(--gray-600);
  transition:color .25s,border-color .25s,background .25s;
}
.nav__log .ico{width:17px;height:17px}
.nav__log:hover{color:var(--navy-900);border-color:var(--navy-900)}
.nav.over-dark .nav__log{color:rgba(255,255,255,.74);border-color:rgba(255,255,255,.26)}
.nav.over-dark .nav__log:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}
.drawer__log{margin-top:10px}
.drawer__log .ico{width:17px;height:17px}


/* ---------- ingresso e acesso ---------- */
.lotes{
  grid-column:1/8;display:grid;gap:var(--colgap,24px);
  grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;
}
/* ---------- lotes vindos da plataforma ----------
   Enquanto a resposta nao chega, o container e a grade de dois cards
   "A anunciar" que ja esta no HTML. Quando chega, o JS troca o conteudo
   e marca .lotes--api: ai o bloco vira coluna (identidade do evento em
   cima, lotes embaixo) e a grade passa para os proprios cards. */
.lotes--api{grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.2vw,30px)}
.lotes__g{
  display:grid;gap:clamp(12px,1.3vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
/* teto por card: com tres lotes o auto-fit reparte e o teto nao morde;
   com um lote so, impede que ele estique para a largura inteira do
   bloco e deixe o preco boiando no vazio */
.lotes__g > .lote{max-width:340px}


/* selo de estado: a forma do ponto carrega o estado junto com a cor */
.lote__st{
  margin-top:12px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fm);font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;
}
.lote__st i{width:7px;height:7px;border-radius:50%;flex:none;font-style:normal}
.lote__st--on{color:var(--gold-l)}
.lote__st--on i{background:var(--gold-l);box-shadow:0 0 0 3px rgba(221,181,101,.18)}
.lote__st--soon{color:rgba(255,255,255,.62)}
.lote__st--soon i{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.lote__st--out{color:rgba(255,255,255,.5)}
.lote__st--out i{background:rgba(255,255,255,.28)}

.lote--soon,.lote--out{border-style:dashed;border-color:rgba(255,255,255,.2);background:transparent}
.lote--out .lote__v{text-decoration:line-through;opacity:.6}
.lote__pt{
  margin-top:6px;font-family:var(--fm);font-size:var(--fs-micro);
  color:rgba(255,255,255,.55);
}
.lote__cta{justify-self:start;margin-top:2px}

@media (max-width:560px){
  .lotes__g{grid-template-columns:minmax(0,1fr)}
}
.lote{
  padding:clamp(20px,2.1vw,30px);border-radius:var(--r-card,14px);
  border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.03);
}
.lote--on{border-style:solid;border-color:var(--gold-l);background:rgba(200,164,92,.08)}
.lote__k{
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.lote--on .lote__k{color:var(--gold-l)}
.lote__v{
  margin-top:16px;font-size:var(--fs-h4);font-weight:600;
  letter-spacing:-.03em;line-height:1.05;color:#fff;
  font-variant-numeric:tabular-nums;
}
/* valor ainda não fechado: fala em voz de etiqueta, não de preço */
.lote__v--vago{
  font-family:var(--fm,monospace);font-size:var(--fs-h5);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.66);
}
.lote__d{
  margin-top:10px;font-size:var(--fs-small);line-height:1.5;
  color:rgba(255,255,255,.68);max-width:28ch;
}

/* o cabecalho desta secao segue a grade de 12, e nao a largura do
   proprio texto: assim o subtitulo comeca na MESMA coluna dos botoes.
   So no desktop: de 1024 para baixo a secao centraliza e as duas
   colunas viram uma, entao forcar a divisao aqui espremia o subtitulo
   em 238px enquanto o resto centralizava. */
@media (min-width:1025px){
  .acesso .shd--row{
    grid-template-columns:calc((100% - 11 * var(--colgap)) / 12 * 8 + var(--colgap) * 7) minmax(0,1fr);
    gap:var(--colgap);align-items:start;
  }
  .acesso .shd--row .shd__s{max-width:none;padding-bottom:0}
}

/* ---------- PERFIS NA SALA ----------
   Catorze cargos em etiquetas: a lista fica varrivel de relance e o volume
   dela ja conta a historia — sala de C-level — que um paragrafo de virgulas
   nao contaria. */
.perfil{grid-column:1/8;margin-top:clamp(26px,3vw,42px)}
.perfil__k{color:var(--gold-l);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase}
.perfil__l{
  list-style:none;margin-top:14px;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.perfil__l li{
  padding:7px 13px;border-radius:99px;
  border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.88);font-size:var(--fs-small);line-height:1.3;
}
.perfil__n{margin-top:14px;color:rgba(255,255,255,.62);font-size:var(--fs-small);
  line-height:1.55;max-width:53ch;text-wrap:pretty}
@media (max-width:1024px){
  .perfil{grid-column:1/13;text-align:center}
  .perfil__l{justify-content:center}
  .perfil__n{margin-inline:auto}
}

.acesso__a{grid-column:9/13;display:flex;flex-direction:column;gap:12px;align-self:start}
.acesso__n{
  margin-top:16px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-small);line-height:1.6;
  color:rgba(255,255,255,.68);max-width:none;
}

.niveis-w{
  grid-column:1/13;margin-top:clamp(34px,4vw,58px);
  padding-top:clamp(26px,3vw,42px);border-top:1px solid rgba(255,255,255,.14);
}
.niveis__cab{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px clamp(20px,2.4vw,36px);margin-bottom:clamp(20px,2.2vw,28px);
}

/* ---------- ACORDEÃO DOS NÍVEIS ----------
   A escada de niveis e informacao de apoio: quem so quer o ingresso nao
   precisa dela aberta. <details> nativo pelo mesmo motivo do "leia mais":
   fechado ja e o estado inicial do navegador (nada pisca antes de encolher)
   e sem script o conteudo continua alcancavel. */
.acord__b{cursor:pointer;list-style:none;align-items:center;margin-bottom:0}
.acord__b::-webkit-details-marker{display:none}
.acord__b .niveis__k,.acord__b .niveis__d{display:block}
.acord__b:focus-visible{outline:2px solid var(--gold-l);outline-offset:6px;border-radius:8px}
.acord__i{
  position:relative;flex:none;margin-left:auto;align-self:center;
  width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(221,181,101,.45);color:var(--gold-l);
  transition:background-color .3s var(--e2),border-color .3s var(--e2);
}
.acord__b:hover .acord__i{background:rgba(221,181,101,.14);border-color:rgba(221,181,101,.7)}
.acord__i svg{width:16px;height:16px;stroke-width:2;transition:transform .35s var(--e)}
.acord[open] .acord__i svg{transform:rotate(180deg)}
/* o pulso e um convite, nao um enfeite: some assim que alguem aceita */
.acord__p{
  position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--gold-l);pointer-events:none;
  animation:pulso 2.4s var(--e) infinite;
}
.acord[open] .acord__p{display:none}
@keyframes pulso{
  0%{transform:scale(1);opacity:.7}
  70%,100%{transform:scale(1.55);opacity:0}
}
.acord__c{padding-top:clamp(20px,2.2vw,28px)}
@supports selector(::details-content) and (interpolate-size: allow-keywords){
  .acord{interpolate-size:allow-keywords}
  .acord::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .45s var(--e),content-visibility .45s allow-discrete;
  }
  .acord[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){
  .acord__p{animation:none;opacity:.45}
  .acord__i svg{transition:none}
  .acord::details-content{transition:none}
}
.niveis__k{
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-l);flex:none;
}
.niveis__d{
  font-size:var(--fs-small);line-height:1.55;
  color:rgba(255,255,255,.66);max-width:52ch;
}
/* ---------- escada de níveis ----------
   Não são três itens equivalentes: há uma FRONTEIRA entre o 01 e o 02,
   que é onde o acesso a esta edição começa. A barra do topo acende a
   partir dela, então dá para ler a regra na horizontal, sem depender de
   ninguém terminar a frase. O card sem acesso fica em moldura tracejada,
   a mesma gramática que a página usa para "ainda não está aqui". */
.niveis{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.3vw,18px);
}
.nivel{
  position:relative;overflow:hidden;
  display:grid;grid-template-rows:auto auto auto 1fr auto;align-content:start;
  padding:clamp(20px,2.1vw,28px);
  border:1px solid rgba(255,255,255,.13);border-radius:var(--r-card,14px);
  background:rgba(255,255,255,.035);
}
.nivel::before{
  content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:rgba(255,255,255,.16);
}
.nivel--entra::before{background:var(--gold-l)}
.nivel--fora{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.2)}

.nivel__n{
  justify-self:start;
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  font-size:var(--fs-micro);letter-spacing:.04em;color:rgba(255,255,255,.7);
}
.nivel--entra .nivel__n{border-color:rgba(221,181,101,.45);color:var(--gold-l)}
.nivel__t{
  margin-top:16px;font-size:var(--fs-h5);font-weight:600;
  letter-spacing:-.028em;line-height:1.15;color:#fff;
}
.nivel__k{
  margin-top:7px;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-l);
}
.nivel--fora .nivel__k{color:rgba(255,255,255,.62)}
.nivel p{
  margin-top:12px;padding-bottom:18px;
  font-size:var(--fs-small);line-height:1.55;
  color:rgba(255,255,255,.68);max-width:34ch;
}

/* a linha de estado fica colada na base dos três cards: como o texto
   acima tem alturas diferentes, é a linha 1fr que empurra ela para lá */
.nivel__ac{
  padding-top:14px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;gap:9px;
  font-family:var(--fm);font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;
}
.nivel__ac::before{content:'';width:8px;height:8px;border-radius:50%;flex:none}
.nivel__ac--sim{color:var(--gold-l)}
.nivel__ac--sim::before{background:var(--gold-l);box-shadow:0 0 0 3px rgba(221,181,101,.18)}
.nivel__ac--nao{color:rgba(255,255,255,.6)}
.nivel__ac--nao::before{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.niveis__nota{
  margin-top:clamp(14px,1.5vw,20px);
  padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,24px);
  border:1px dashed rgba(255,255,255,.18);border-radius:var(--r-card,14px);
  font-size:var(--fs-small);line-height:1.55;
  color:rgba(255,255,255,.68);
  /* a caixa ocupa a largura toda, o texto dentro dela nao: sem isto a
     linha corria 178 caracteres, a mais longa da pagina */
  max-width:calc(53ch + clamp(32px,3.6vw,48px));
}
.niveis__nota-k{
  display:block;margin-bottom:6px;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* ---- responsivo: de 1024 para baixo, tudo centraliza ---- */
@media (max-width:1024px){
  .lotes,.acesso__a,.niveis-w{grid-column:1/13}
  /* margem automatica dos dois lados centraliza, mas faz a caixa
     encolher ate o conteudo: sem width:100% os botoes param em 294px */
  .acesso__a{
    width:100%;max-width:420px;margin-inline:auto;
    margin-top:clamp(26px,3.2vw,38px);text-align:center;
  }
  .acesso__n{margin-inline:auto}
  .lote,.nivel{text-align:center}
  .lote__d,.nivel p{margin-inline:auto}
  .niveis__k{text-align:center}
}
@media (max-width:760px){
  .niveis{grid-template-columns:1fr;gap:30px}
}
@media (max-width:560px){
  .lotes{grid-template-columns:1fr}
  .nav__log{width:46px;height:46px;padding:0;justify-content:center}
  .nav__log span{display:none}
}

/* ============================================================
   A MESA EM FUNDO ESCURO
   O componente de painelista nasceu para fundo claro. Em navy,
   cada cor que vinha de token claro é reescrita — fio, rótulo,
   moldura de vaga e o "Em breve" — para continuar legível.
   Medido: nada abaixo de 4,5:1.
   ============================================================ */
.sec--navy .eyebrow:not(.eyebrow--gold),
.sec--ink .eyebrow:not(.eyebrow--gold){color:var(--blue-400)}
.sec--navy .eyebrow:not(.eyebrow--gold) .mono,
.sec--ink .eyebrow:not(.eyebrow--gold) .mono{color:rgba(255,255,255,.62)}

/* o fio da posição: acende em branco, não em navy sobre navy */
.sec--navy .cast--lead .p__i,.sec--ink .cast--lead .p__i{
  border-color:var(--rule-d);color:rgba(255,255,255,.62);
}
.sec--navy .cast--lead .p.in .p__i,.sec--ink .cast--lead .p.in .p__i{
  border-color:#fff;color:#fff;
}
.sec--navy .cast--lead .p:hover .p__i,.sec--ink .cast--lead .p:hover .p__i{
  border-color:var(--blue-400);color:var(--blue-400);
}
.no-anim .sec--navy .cast--lead .p__i,
.no-anim .sec--ink .cast--lead .p__i{border-color:#fff;color:#fff}
.sec--navy .p__i em,.sec--ink .p__i em{color:var(--gold-l)}

/* a vaga em fundo escuro: mesma gramática, tons invertidos */
.sec--navy .p--vago .p__m,.sec--ink .p--vago .p__m{
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.22);
}
.sec--navy .p--vago .p__m::after,.sec--ink .p--vago .p__m::after{color:rgba(255,255,255,.72)}
.sec--navy .p--vago .p__n,.sec--ink .p--vago .p__n{color:#fff}
.sec--navy .p--vago .p__r,.sec--ink .p--vago .p__r{color:rgba(255,255,255,.66)}

/* ---------- selo de acesso no hero ----------
   Qualificação, não alarde: entra depois dos botões, no tamanho de
   etiqueta, com a mesma moldura discreta dos elementos de apoio. */
.hero__tag{
  margin-top:clamp(16px,1.8vw,24px);
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 15px;border-radius:99px;
  border:1px solid rgba(221,181,101,.34);background:rgba(221,181,101,.09);
  font-family:var(--fm);font-size:var(--fs-micro-lg);
  letter-spacing:.03em;line-height:1.4;color:var(--gold-l);
}
.hero__tag svg{
  width:15px;height:15px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

@media (max-width:1024px){
  .hero__tag{margin-inline:auto}
  .hero__fig{margin-top:16px}
  .hero__side{margin-top:16px}
  .ficha__lead{grid-column:1/13;text-align:center;max-width:52ch;margin-inline:auto}
  .ficha__host{grid-column:1/13;justify-content:center;max-width:920px;width:100%;margin-inline:auto}
  .ficha__marca{justify-content:space-between}
}
@media (max-width:620px){

  /* a frase nao cabe em uma linha nessa largura, e pilula de tres linhas
     le como bloco mal-acabado. Vira etiqueta retangular, com o cadeado
     ancorado na primeira linha em vez de flutuando no meio vertical. */
  .hero__tag{
    border-radius:12px;align-items:flex-start;
    letter-spacing:.02em;padding:11px 14px;text-align:left;
  }
  .hero__tag svg{margin-top:1px}
}
@media (max-width:719px){
  /* três cards em pilha; a barra do topo continua contando a história */
  .niveis{grid-template-columns:minmax(0,1fr);gap:12px}
  .nivel{grid-template-rows:auto auto auto auto auto}
  .nivel p{padding-bottom:14px;max-width:none}
  .niveis__cab{flex-direction:column;align-items:center;text-align:center}
  .acord__i{margin-left:0;margin-top:4px}
  .niveis__d{margin-inline:auto}
  .niveis__nota{text-align:center}
}

/* ════════════════════════════════════════════════════════════
   VARIAÇÃO C — CAMPO DE COR E LEQUE
   ------------------------------------------------------------
   Tudo daqui para baixo sobrescreve a folha original. O resto da
   página segue idêntico: só o fundo e a hero mudam.

   O que a referência (networkeventos.com.br) faz de fato, medido:
   nenhuma das suas seções pinta fundo próprio — de 0 a 5400px de
   rolagem, nenhuma cor opaca. A página inteira é colorida por UMA
   imagem no <body>, com PNGs decorativos por cima. É por isso que
   ela lê como um campo contínuo em vez de uma pilha de faixas.

   Aqui a ideia é a mesma, com duas diferenças: o campo é feito de
   gradiente e não de PNG (nítido em qualquer tela, ~0 KB), e ele
   se move — o da referência é estático.
   ════════════════════════════════════════════════════════════ */

/* ---------- o campo ----------
   Camada fixa atrás de tudo. As manchas só transladam: blur em
   animação repinta a cada quadro e derruba o frame rate, então o
   blur é aplicado uma vez e o que anda é o transform. */
.campo{
  position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  background:var(--white);
}
.campo__m{
  position:absolute;display:block;border-radius:50%;
  will-change:transform;
}
/* azul de marca, entrando pela direita alta */
.campo__m--1{
  width:78vw;height:78vw;right:-24vw;top:-26vw;
  background:radial-gradient(circle at 50% 50%,rgba(255,92,114,.30),rgba(255,92,114,0) 66%);
  animation:deriva1 34s var(--e2) infinite alternate;
}
/* dourado baixo à esquerda: o acento da marca, bem diluído */
.campo__m--2{
  width:66vw;height:66vw;left:-20vw;top:34vh;
  background:radial-gradient(circle at 50% 50%,rgba(180,134,47,.24),rgba(180,134,47,0) 68%);
  animation:deriva2 41s var(--e2) infinite alternate;
}
/* azul profundo ao centro-baixo, dá peso ao meio da página */
.campo__m--3{
  width:88vw;height:70vw;left:6vw;top:72vh;
  background:radial-gradient(circle at 50% 50%,rgba(209,16,42,.22),rgba(209,16,42,0) 64%);
  animation:deriva3 47s var(--e2) infinite alternate;
}
/* gelo bem claro no alto à esquerda, para o campo não ficar só quente */
.campo__m--4{
  width:56vw;height:56vw;left:-14vw;top:-18vw;
  background:radial-gradient(circle at 50% 50%,rgba(223,232,245,.85),rgba(223,232,245,0) 70%);
  animation:deriva4 38s var(--e2) infinite alternate;
}
.campo__grao{
  position:absolute;inset:0;display:block;
  background-image:var(--grain);opacity:.5;mix-blend-mode:multiply;
}

@keyframes deriva1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-7vw,6vh,0) scale(1.14)}}
@keyframes deriva2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vw,-7vh,0) scale(1.18)}}
@keyframes deriva3{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-8vw,-5vh,0) scale(1.1)}}
@keyframes deriva4{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,8vh,0) scale(1.2)}}

/* ---------- as seções param de pintar ----------
   Este é o ponto inteiro da referência. Enquanto cada seção tiver
   fundo opaco, o campo não existe. As claras ficam transparentes;
   as escuras viram poças translúcidas com a borda derretida, para
   a transição deixar de ser um corte reto. */
body{background:transparent}
.sec--white{background:transparent}
.sec--ice{background:rgba(244,247,252,.55)}

.sec--navy,.sec--ink,.voice,.acesso,.ft{position:relative;isolation:isolate}
.sec--navy{background:rgba(8,8,8,.93)}
.sec--ink,.acesso{background:rgba(0,0,0,.94)}
.voice{background:rgba(0,0,0,.95)}
.ft{background:rgba(0,0,0,.96)}

/* A poça escura ganha seu próprio brilho interno, que respira. Sem
   isso ela seria a única parte parada de uma página que se move. */
.sec--navy::after,.sec--ink::after,.voice::after,.acesso::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52% 62% at 78% 8%,rgba(255,92,114,.20),transparent 68%),
    radial-gradient(46% 58% at 14% 92%,rgba(180,134,47,.14),transparent 70%);
  animation:respira 26s var(--e2) infinite alternate;
}
@keyframes respira{
  from{transform:translate3d(0,0,0) scale(1);opacity:.72}
  to{transform:translate3d(4%,-3%,0) scale(1.12);opacity:1}
}

/* as bordas derretem em vez de cortar */
.sec--navy::before,.sec--ink::before,.acesso::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:clamp(60px,7vw,120px);
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,8,0),rgba(8,8,8,.55));
}

/* ---------- hero ----------
   O hero deixa de ser um retângulo navy chapado e passa a ser a
   entrada do campo: o mesmo azul, agora com movimento. */
.hero{background:rgba(8,8,8,.94)}
.hero__bg::before{
  background:radial-gradient(120% 85% at 72% -10%,rgba(255,92,114,.34),transparent 62%),
             radial-gradient(80% 60% at 12% 108%,rgba(180,134,47,.20),transparent 66%),
             linear-gradient(180deg,rgba(255,255,255,.05),transparent 40%);
  animation:respira 30s var(--e2) infinite alternate;
}

/* ════════════════════════════════════════════════════════════
   HERO CENTRALIZADA · O LEQUE
   ------------------------------------------------------------
   A hero deixa de obedecer a diagramação à esquerda da original e
   passa a ser uma composição simétrica: chapéu, manchete, tema, o
   leque de fotos como âncora visual, e as ações embaixo.

   O texto fica FORA das fotos de propósito. Manchete sobre foto é
   o caminho mais curto para perder contraste, e o pedido foi
   justamente para tomar cuidado com isso.

   O transform é dividido em três níveis para as animações não
   brigarem pela mesma propriedade:
     .leque__p → a perspectiva e o parallax do ponteiro
     .leque__f → a pose de cada painel e a entrada em leque
     img       → a flutuação contínua
   ════════════════════════════════════════════════════════════ */
.hero--palco .hero__in{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:calc(var(--nav-h) + clamp(8px,1vw,16px));
  padding-bottom:clamp(26px,3vw,44px);
  gap:clamp(9px,1.1vw,15px);
}
.hero--palco .hero__k{
  display:inline-flex;align-items:center;gap:10px;margin:0;
  font-size:var(--fs-micro);letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold-l);
}
.hero--palco .hero__k i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}

.hero--palco .hero__h1{
  margin:0;max-width:17ch;
  font-size:clamp(33px,4.3vw,58px);line-height:1.04;letter-spacing:-.03em;
}
.hero--palco .hero__h1 .l{display:block}
.hero--palco .hero__h1 .l--q{
  font-size:.46em;line-height:1.2;letter-spacing:-.012em;font-weight:400;
  color:rgba(255,255,255,.72);margin-bottom:.4em;
}

.hero--palco .hero__tema{
  display:inline-flex;align-items:center;gap:12px;margin:0;flex-wrap:wrap;
  justify-content:center;padding-top:2px;
}
.hero--palco .hero__tema .mono{
  font-size:var(--fs-micro);letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-l);
}
.hero--palco .hero__tema #evTema{
  font-size:var(--fs-lead);font-weight:500;color:#fff;
  padding-left:12px;border-left:1px solid rgba(255,255,255,.26);
}

/* ---------- o leque ---------- */
.hero--palco .leque{
  width:100%;max-width:900px;margin:clamp(6px,1vw,14px) auto 0;
  position:relative;
}


.hero--palco .leque figcaption{
  position:static;margin-top:clamp(7px,.9vw,11px);padding:0;background:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  color:rgba(255,255,255,.62);font-size:var(--fs-micro);letter-spacing:.15em;
  text-transform:uppercase;text-align:center;
}
.hero--palco .hero__cta{justify-content:center;flex-wrap:wrap}
.hero--palco .hero__tag{margin:0}

/* ---------- ajustes por largura ---------- */
@media (max-width:1024px){
  
  
}
@media (max-width:620px){

  .hero--palco .hero__h1{font-size:clamp(31px,8.6vw,44px);max-width:15ch}
  .hero--palco .hero__tema{flex-direction:column;gap:6px}
  .hero--palco .hero__tema #evTema{padding-left:0;border-left:0;font-size:var(--fs-body)}
  
  
  .hero--palco .hero__cta{flex-direction:column;align-items:stretch;width:100%}
  .hero--palco .hero__cta .btn{width:100%}
}

/* ════════════════════════════════════════════════════════════
   CARDS SUBINDO
   ------------------------------------------------------------
   O main.js já numera os filhos de [data-stagger] na variável --i
   (com teto em 8, para ninguém esperar demais). A folha original
   nunca usou esse número: o atraso vinha de data-delay digitado à
   mão. Aqui ele finalmente serve para alguma coisa — cada card
   entra subindo, um depois do outro.
   ════════════════════════════════════════════════════════════ */
[data-stagger] > [data-anim]{
  transform:translateY(52px) scale(.975);
}
[data-stagger] > [data-anim].in{
  transform:none;
  transition:
    opacity .68s var(--e) calc(var(--i,0) * 85ms),
    transform .82s var(--e) calc(var(--i,0) * 85ms);
}
/* Os retratos são o momento em que isso mais rende: a fileira inteira
   sobe em cascata em vez de aparecer de uma vez. */
.cast[data-stagger] > [data-anim]{transform:translateY(64px) scale(.965)}
.cast[data-stagger] > [data-anim].in{
  transform:none;
  transition:
    opacity .72s var(--e) calc(var(--i,0) * 95ms),
    transform .9s cubic-bezier(.16,.84,.3,1) calc(var(--i,0) * 95ms);
}
/* data-delay era o mecanismo antigo; onde os dois coexistem, o
   escalonado manda, senão os dois atrasos se somam. */
[data-stagger] > [data-delay="1"].in,[data-stagger] > [data-delay="2"].in,
[data-stagger] > [data-delay="3"].in,[data-stagger] > [data-delay="4"].in{
  transition-delay:calc(var(--i,0) * 85ms);
}

@media (prefers-reduced-motion:reduce){
  [data-stagger] > [data-anim],.cast[data-stagger] > [data-anim]{transform:none !important}
}

/* ---------- movimento reduzido ----------
   Quem pediu menos movimento recebe a mesma composição, parada. */
@media (prefers-reduced-motion:reduce){
  .campo__m,.sec--navy::after,.sec--ink::after,.voice::after,.acesso::after,
  .hero__bg::before,.leque__f img{animation:none !important}
}

/* ---------- impressão ---------- */
@media print{
  .campo{display:none}
  body{background:#fff}
}

/* ---------- menu rolado sobre as poças escuras ----------
   Medido: o menu a 86% de branco compõe rgb(222,223,224) quando passa
   sobre uma seção escura, e o link em --gray-600 cai para 4,00:1 ali.
   Escurecer o link resolve sem abrir mão da translucidez — subir a
   opacidade do menu resolveria também, mas mataria o campo atrás. */
.nav.solto .nav__links a,
.nav.solto .nav__log{color:#465670}
.nav.solto .nav__links a:hover,
.nav.solto .nav__links a.on,
.nav.solto .nav__log:hover{color:var(--navy-900)}

/* ════════════════════════════════════════════════════════════
   HERO · AGRUPAMENTO
   ------------------------------------------------------------
   O gap uniforme de ~15px entre os sete elementos da coluna era a
   causa da estranheza no desktop: distância igual entre tudo faz
   sete itens soltos, não uma composição. Aqui a distância passa a
   significar parentesco — colado dentro do grupo, largo entre
   grupos. É o princípio de proximidade fazendo o trabalho que a
   centralização sozinha não faz.

   Além disso o leque cresce: numa tela de 1440 uma coluna estreita
   ao centro deixa o canvas vazio dos dois lados, e é isso que dá a
   sensação de "avulso". A imagem é o que tem largura para ancorar.
   ════════════════════════════════════════════════════════════ */
.hero--palco .hero__in{gap:0}

/* grupo 1 · dizeres — colados entre si */
.hero__diz{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.1vw,15px);
}
.hero--palco .hero__k{
  flex-wrap:wrap;justify-content:center;
  color:rgba(255,255,255,.62);letter-spacing:.16em;
}
.hero--palco .hero__k i{opacity:.4}
.hero--palco .hero__h1{margin:0}
/* o tema vira subtítulo da manchete, não um bloco próprio */
.hero--palco .hero__tema{
  display:block;max-width:30ch;margin:0;padding:0;border:0;
  font-size:var(--fs-lead);font-weight:400;font-style:italic;
  color:var(--gold-l);line-height:1.3;
}
.hero--palco .hero__tema #evTema{padding:0;border:0;font-weight:400;color:inherit;font-size:inherit}

/* grupo 2 · a imagem — o que ancora a composição */
.hero--palco .leque{
  max-width:min(1120px,94%);
  margin-top:clamp(20px,2.4vw,36px);
}
/* a legenda sai da coluna central e vira nota no canto do leque:
   um item a menos na pilha */
.hero--palco .leque figcaption{
  position:absolute;right:2px;bottom:-24px;margin:0;text-align:right;
  color:rgba(255,255,255,.5);font-size:var(--fs-micro);letter-spacing:.14em;
}

/* grupo 3 · ação — separado por um vão grande, colado por dentro */
.hero__acao{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(12px,1.3vw,18px);
  margin-top:clamp(26px,3vw,46px);
}
.hero--palco .hero__tag{
  background:none;border:0;padding:0;
  color:rgba(255,255,255,.58);font-size:var(--fs-micro);letter-spacing:.04em;
}
.hero--palco .hero__tag svg{opacity:.75}

@media (max-width:1024px){
  .hero--palco .leque{max-width:100%;margin-top:clamp(20px,3vw,34px)}
  .hero__acao{margin-top:clamp(30px,4vw,44px)}
  .hero--palco .leque figcaption{position:static;margin-top:12px;text-align:center}
}
@media (max-width:620px){

  .hero__diz{gap:clamp(8px,2vw,12px)}
  .hero--palco .hero__tema{font-size:var(--fs-body);max-width:26ch}
  .hero__acao{margin-top:26px;width:100%}
}

/* ════════════════════════════════════════════════════════════
   HERO NO DESKTOP · DUAS COLUNAS
   ------------------------------------------------------------
   Abaixo de 1025px a hero continua centralizada — no mobile ela já
   funciona e mexer só pioraria. Daqui para cima ela vira uma
   composição de duas colunas, e a razão é de leitura, não de gosto:

   · Gutenberg — o olho ocidental entra pelo alto à esquerda e sai
     pelo baixo à direita. Foto à esquerda pega primeiro (é
     processada em milissegundos, antes de qualquer palavra); o
     texto à direita explica; e o botão cai na área terminal, que é
     onde o varrido termina.
   · Legibilidade — o texto sai de centralizado para alinhado à
     esquerda. Em texto de várias linhas o centralizado obriga o
     olho a procurar o início de cada linha; a margem reta dá um
     ponto de retorno fixo.
   · Prova social — as fotos são pessoas reais em edições reais.
     É o argumento mais forte da página, então recebe a maior área.

   A dissolvência da base para cima faz as fotos derreterem no campo
   de cor em vez de terminarem num corte reto — a mesma lógica das
   poças escuras lá embaixo.
   ════════════════════════════════════════════════════════════ */
@media (min-width:1025px){
  .hero--palco .hero__in{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    grid-template-rows:auto auto;
    align-items:center;justify-items:stretch;
    column-gap:clamp(20px,3vw,58px);
    text-align:left;
    padding-top:calc(var(--nav-h) + clamp(4px,.8vw,14px));
    padding-bottom:clamp(20px,2.4vw,38px);
  }

  /* ---- coluna 1 · as fotos ---- */
  .hero--palco .leque{
    grid-column:1;grid-row:1/3;
    max-width:none;align-self:stretch;margin:0;
    width:calc(100% + var(--gut));margin-left:calc(var(--gut) * -1);
  }
  
  
  
  .hero--palco .leque figcaption{
    right:auto;left:2px;bottom:-6px;text-align:left;
  }

  /* ---- coluna 2 · os dizeres ---- */
  .hero__diz{
    grid-column:2;grid-row:1;
    align-items:flex-start;text-align:left;align-self:end;
    gap:clamp(12px,1.2vw,18px);
  }
  .hero--palco .hero__k{justify-content:flex-start;text-align:left}
  .hero--palco .hero__h1{
    max-width:14ch;
    font-size:clamp(40px,3.9vw,62px);
  }
  .hero--palco .hero__tema{
    max-width:26ch;text-align:left;
    padding-left:15px;border-left:2px solid var(--gold);
  }

  /* ---- coluna 2 · a ação, na área terminal ---- */
  .hero__acao{
    grid-column:2;grid-row:2;
    align-items:flex-start;align-self:start;
    margin-top:clamp(22px,2.4vw,38px);
  }
  .hero--palco .hero__cta{justify-content:flex-start}
  .hero--palco .hero__tag{text-align:left}

  .hero--palco .hero__scroll{display:none}
}

/* Telas altas e largas: a coluna de texto não precisa esticar junto */
@media (min-width:1600px){
  .hero--palco .hero__h1{font-size:clamp(52px,3.4vw,68px)}
}

/* ════════════════════════════════════════════════════════════
   ABERTURA · UM FUNDO SÓ, MAIS ESCURO
   ------------------------------------------------------------
   Hero e ficha deixam de pintar cada uma o seu navy. O fundo é
   pintado aqui, uma vez, e atravessa as duas — some a costura que
   existia entre elas, que era o ponto onde os gradientes da hero
   morriam na borda.

   A base desce de navy-900 para navy-950: fundo mais escuro dá mais
   contorno à foto e mais peso ao texto claro por cima. E o azul não
   é chapado — são três camadas de gradiente que derivam em tempos
   diferentes, então a cor nunca fica parada.
   ════════════════════════════════════════════════════════════ */
.abertura{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    linear-gradient(178deg,#080808 0%,#000000 46%,#050505 78%,#0A0A0A 100%);
}
.abertura__campo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.abertura__mix{
  position:absolute;display:block;border-radius:50%;
  will-change:transform,opacity;
}
/* azul de marca entrando pelo alto à direita, atrás do texto */
.abertura__mix--1{
  width:96vw;height:78vw;right:-30vw;top:-34vw;
  background:radial-gradient(circle at 50% 50%,rgba(255,92,114,.30),rgba(255,92,114,0) 64%);
  animation:mistura1 29s var(--e2) infinite alternate;
}
/* azul profundo à esquerda, dá corpo por trás das fotos */
.abertura__mix--2{
  width:84vw;height:72vw;left:-30vw;top:6vh;
  background:radial-gradient(circle at 50% 50%,rgba(209,16,42,.42),rgba(209,16,42,0) 66%);
  animation:mistura2 37s var(--e2) infinite alternate;
}
/* clarão baixo, para a base não fechar em preto */
.abertura__mix--3{
  width:110vw;height:56vw;left:-5vw;bottom:-24vw;
  background:radial-gradient(circle at 50% 50%,rgba(22,22,22,.72),rgba(22,22,22,0) 70%);
  animation:mistura3 43s var(--e2) infinite alternate;
}
@keyframes mistura1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-9vw,7vh,0) scale(1.16)}}
@keyframes mistura2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(8vw,-6vh,0) scale(1.2)}}
@keyframes mistura3{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-6vw,3vh,0) scale(1)}}

/* as duas seções param de pintar e deixam o campo aparecer */
.abertura .hero,
.abertura .ficha{background:transparent}
.abertura .hero{isolation:auto}
.abertura .hero__bg::before{
  background:
    radial-gradient(96% 72% at 74% -12%,rgba(255,92,114,.26),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 34%);
}
.abertura .hero__bg::after{opacity:.13}
.abertura .hero,.abertura .ficha,.abertura .strip{position:relative;z-index:1}

/* ---------- a brasa da anfitriã ----------
   O vermelho deixa de atravessar a seção na horizontal e passa a
   morar na BASE, pulsando. Ele acende 0,8s depois de a seção entrar
   na tela, que é o instante em que o logotipo da SOMPO aparece: a cor
   fica ligada ao logo em vez de ser enfeite de fundo.

   Só translada e muda de opacidade. Já paguei o preço de animar
   escala numa camada de gradiente nesta página: comprimir a camada
   traz a borda da própria caixa para dentro da área visível e ela
   aparece como um corte. */
.abertura .ficha__glow{
  inset:auto -22% -14% -22%;height:56%;
  transform:translate3d(0,16%,0);
  mix-blend-mode:screen;opacity:0;
  background:radial-gradient(52% 100% at 50% 100%,rgba(214,0,40,.60),rgba(192,0,31,0) 70%);
}
.abertura .ficha__glow::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(30% 82% at 72% 100%,rgba(255,54,70,.34),rgba(255,54,70,0) 74%);
  transform:translate3d(0,6%,0);
}
.abertura .ficha.acesa .ficha__glow{animation:brasaBase 5.2s var(--e2) .8s 1 both}
@keyframes brasaBase{
  0%{opacity:0;transform:translate3d(0,18%,0)}
  10%{opacity:1;transform:translate3d(0,0,0)}
  26%{opacity:.46}
  40%{opacity:.98}
  56%{opacity:.44}
  70%{opacity:.86}
  85%{opacity:.3}
  100%{opacity:0;transform:translate3d(0,8%,0)}
}

@media (prefers-reduced-motion:reduce){
  .abertura__mix{animation:none !important}
  .abertura .ficha.acesa .ficha__glow{animation:none !important;opacity:.5;transform:none}
}

/* ════════════════════════════════════════════════════════════
   RETOQUE NA HERO
   ------------------------------------------------------------
   Três coisas, todas de profundidade — a composição já estava certa,
   o que faltava era ar em volta dela:

   1. Um clarão atrás do leque, para as fotos ficarem apoiadas em luz
      em vez de coladas no fundo.
   2. Um brilho que atravessa cada painel uma vez, na entrada. Passa
      e não volta: efeito que se repete vira tique.
   3. O chapéu ganha um fio dourado, que dá onde começar a ler.
   ════════════════════════════════════════════════════════════ */
.hero--palco .leque::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:-14%;right:-8%;top:-16%;bottom:-6%;
  background:radial-gradient(58% 62% at 42% 46%,rgba(255,92,114,.26),rgba(255,92,114,0) 70%);
  animation:respiraLeque 14s var(--e2) infinite alternate;
}
@keyframes respiraLeque{
  from{opacity:.62;transform:translate3d(0,0,0) scale(1)}
  to{opacity:1;transform:translate3d(2%,-2%,0) scale(1.08)}
}
[data-anim].leque.in .leque__f--c::after{animation:lustro 1.5s var(--e2) 1.15s 1 both}
[data-anim].leque.in .leque__f--e::after{animation:lustro 1.5s var(--e2) 1.4s 1 both}
[data-anim].leque.in .leque__f--d::after{animation:lustro 1.5s var(--e2) 1.62s 1 both}
@keyframes lustro{
  0%{opacity:0;transform:translateX(-115%)}
  16%{opacity:1}
  84%{opacity:1}
  100%{opacity:0;transform:translateX(115%)}
}

.hero--palco .hero__k::before{
  content:'';display:inline-block;width:clamp(20px,2.4vw,38px);height:1px;
  background:var(--gold-l);opacity:.85;margin-right:2px;
}

/* ════════════════════════════════════════════════════════════
   A EXPERIÊNCIA · O RETRATO
   ------------------------------------------------------------
   A seção era só tipografia e número. Ganha o retrato do Rogério
   Barreira à direita, ocupando duas fileiras: a coluna de texto
   passa a ter com o que dialogar, e o argumento — "a sala tem gente
   de verdade" — passa a ser mostrado em vez de afirmado.
   ════════════════════════════════════════════════════════════ */
.stmt__h{grid-column:1/8}
.stmt__aside{grid-column:1/7;grid-row:3;align-self:start;padding-bottom:0;padding-top:clamp(18px,2vw,28px)}
.stmt__fig{
  grid-column:9/13;grid-row:2/4;align-self:center;
  position:relative;margin:0;
}
.stmt__fig img{
  width:100%;height:auto;display:block;border-radius:var(--r-img);
  aspect-ratio:3/4;object-fit:cover;object-position:50% 22%;
  box-shadow:0 26px 60px rgba(8,8,8,.20);
}
/* fio azul saindo por trás: liga o retrato ao resto da página */
.stmt__fig::before{
  content:'';position:absolute;z-index:-1;
  left:-18px;top:-18px;width:56%;height:56%;
  border-top:2px solid var(--blue-500);border-left:2px solid var(--blue-500);
  border-radius:var(--r-img) 0 0 0;opacity:.5;
}
.stmt__fig figcaption{
  display:flex;flex-direction:column;gap:3px;
  margin-top:14px;
}
.stmt__fig figcaption b{font-size:var(--fs-small);font-weight:600;color:var(--gray-900)}
.stmt__fig figcaption .mono{font-size:var(--fs-micro);letter-spacing:.12em;color:var(--gray-600)}
.stmt__stats{grid-row:4}

/* ════════════════════════════════════════════════════════════
   O QUE ACONTECE NESSA NOITE
   ------------------------------------------------------------
   Estava minimalista demais para uma seção que é a promessa central
   da página. Três acréscimos, todos com função:

   · O numeral fantasma dá escala e ritmo à lista — quatro marcos
     grandes que o olho conta sem ler.
   · O ícone ganha um prato que se preenche quando o item entra: o
     item passa a ter um instante de chegada, não só de existência.
   · A varredura azul no hover mostra qual linha está sob o cursor
     numa lista onde as quatro se parecem.
   ════════════════════════════════════════════════════════════ */
.pillar{overflow:hidden;isolation:isolate;transition:background .45s var(--e2)}
.pillar::after{
  content:attr(data-n);
  position:absolute;z-index:-1;left:26%;right:auto;top:50%;
  transform:translateY(-50%);
  font-size:clamp(84px,10vw,164px);font-weight:700;line-height:.8;
  letter-spacing:-.06em;color:var(--navy-900);opacity:.045;
  pointer-events:none;font-variant-numeric:tabular-nums;
  transition:opacity .55s var(--e2),transform .7s var(--e);
}
.pillar:hover::after{opacity:.085;transform:translateY(-50%) translateX(8px)}

/* a varredura */
.pillar > *{position:relative;z-index:1}
.pillar:hover{background:linear-gradient(96deg,rgba(255,92,114,.07),rgba(255,92,114,0) 62%)}

/* o prato do ícone */
.pillar__n .dico{
  box-sizing:content-box;width:26px;height:26px;padding:13px;
  border-radius:50%;border:1px solid var(--gray-300);
  background:var(--white);color:var(--navy-900);
  transition:background .5s var(--e2),border-color .5s var(--e2),
             color .5s var(--e2),transform .5s var(--e);
}
.pillar.in .pillar__n .dico{border-color:var(--blue-500);color:var(--blue-600)}
.pillar:hover .pillar__n .dico{
  background:var(--blue-500);border-color:var(--blue-500);color:#fff;
  transform:translateY(-3px) rotate(-4deg);
}
.pillar__k{
  padding:5px 10px;border:1px solid var(--gray-300);border-radius:99px;
  max-width:none;width:fit-content;transition:border-color .4s var(--e2),color .4s var(--e2);
}
.pillar:hover .pillar__k{border-color:var(--blue-400);color:var(--blue-600)}

/* ════════════════════════════════════════════════════════════
   PATROCINADORES E APOIADOR
   ------------------------------------------------------------
   Os cards estavam duros: nasciam prontos e não reagiam a nada.
   Agora entram escalonados (o data-stagger já estava no HTML, faltava
   o card pedir), levantam no hover e recebem um brilho que atravessa
   a borda — o suficiente para parecerem vivos sem virar festa.
   ════════════════════════════════════════════════════════════ */
.patro{
  position:relative;overflow:hidden;
  transition:transform .5s var(--e),box-shadow .5s var(--e2),border-color .4s var(--e2);
  box-shadow:0 1px 2px rgba(8,8,8,.03);
}
.patro:hover{
  transform:translateY(-5px);
  border-color:var(--blue-400);
  box-shadow:0 22px 46px rgba(8,8,8,.13);
}
/* brilho diagonal atravessando o card */
.patro::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(108deg,
    rgba(255,92,114,0) 38%,rgba(255,92,114,.10) 50%,rgba(255,92,114,0) 62%);
  transform:translateX(-110%);opacity:0;
  transition:transform .95s var(--e),opacity .3s var(--e2);
}
.patro:hover::after{transform:translateX(110%);opacity:1}
.patro > *{position:relative;z-index:1}
.patro__l{transition:transform .5s var(--e)}
.patro:hover .patro__l{transform:scale(1.04)}
.patro__v{transition:box-shadow .5s var(--e2)}
.patro:hover .patro__v{box-shadow:0 14px 30px rgba(8,8,8,.22)}
.patro:hover .btn--sec{border-color:var(--blue-500);color:var(--blue-600)}

/* ════════════════════════════════════════════════════════════
   TEMPO DE ENTRADA
   ------------------------------------------------------------
   95ms entre cards era rápido demais para dar a sensação de cascata:
   a fileira inteira chegava quase junta. A 150ms cada retrato tem o
   seu instante. O teto de 8 do main.js segura o último em 1,2s, que
   é o limite antes de a espera incomodar.
   ════════════════════════════════════════════════════════════ */
[data-stagger] > [data-anim].in{
  transform:none;
  transition:
    opacity .72s var(--e) calc(var(--i,0) * 120ms),
    transform .86s var(--e) calc(var(--i,0) * 120ms);
}
.cast[data-stagger] > [data-anim].in{
  transform:none;
  transition:
    opacity .78s var(--e) calc(var(--i,0) * 150ms),
    transform .95s cubic-bezier(.16,.84,.3,1) calc(var(--i,0) * 150ms);
}
[data-stagger] > [data-delay="1"].in,[data-stagger] > [data-delay="2"].in,
[data-stagger] > [data-delay="3"].in,[data-stagger] > [data-delay="4"].in{
  transition-delay:calc(var(--i,0) * 120ms);
}

/* ---------- por largura ---------- */
@media (max-width:1024px){
  .stmt__h{grid-column:1/13}
  .stmt__aside{grid-column:1/13;grid-row:auto}
  .stmt__fig{grid-column:1/13;grid-row:auto;max-width:420px;margin-inline:auto;margin-top:clamp(22px,3vw,34px)}
  .stmt__fig::before{left:-12px;top:-12px}
  .stmt__stats{grid-row:auto}
  .pillar::after{font-size:clamp(64px,13vw,110px);opacity:.05}
}
@media (max-width:620px){

  .stmt__fig{max-width:100%}
  .pillar__n .dico{width:22px;height:22px;padding:11px}
}

@media (prefers-reduced-motion:reduce){
  .hero--palco .leque::before{animation:none}
  .patro::after{display:none}
  .patro:hover{transform:none}
}

/* ════════════════════════════════════════════════════════════
   AJUSTES DE LEITURA
   ════════════════════════════════════════════════════════════ */

/* ---------- o vão entre manchete e prosa ----------
   O retrato cruzava as fileiras 2 a 4 da grade, e a altura dele era
   distribuída nas fileiras que cruzava — a sobra virava aquele vão
   enorme. Com manchete e prosa dentro de um item só, o vão passa a
   ser um gap declarado, e não uma consequência da imagem ao lado. */
.stmt__txt{
  grid-column:1/5;grid-row:2;
  display:flex;flex-direction:column;
  gap:clamp(20px,2.1vw,32px);
}
.stmt__h{grid-column:auto;grid-row:auto;margin:0}
.stmt__aside{grid-column:auto;grid-row:auto;padding:0;align-self:auto}
.stmt__fig{grid-column:8/13;grid-row:2;align-self:center}
.stmt__stats{grid-column:1/13;grid-row:3;margin-top:clamp(34px,3.8vw,58px)}

/* ---------- a tag do pilar ----------
   Premium é o que sobra depois de tirar, não o que se acrescenta.
   Sai a borda em pílula, entra um chapa quase imperceptível e o tipo
   com respiro: micro, versalete e entreletra larga. Nenhum efeito. */
.pillar__k{
  padding:6px 13px;border:0;border-radius:3px;
  background:rgba(255,31,61,.065);color:var(--blue-600);
  font-size:var(--fs-micro);letter-spacing:.19em;text-transform:uppercase;
  transition:background .4s var(--e2);
}
.pillar:hover .pillar__k{background:rgba(255,31,61,.12);color:var(--blue-600)}

/* o numeral pequeno saiu do HTML: o prato do ícone fica sozinho */
.pillar__n{gap:14px}

/* ---------- o rótulo do tema na hero ---------- */
.hero--palco .hero__tema-k{
  font-style:normal;font-family:var(--fm);
  font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-l);margin-right:4px;vertical-align:.14em;
}

/* ════════════════════════════════════════════════════════════
   FEIXES DE PALCO
   ------------------------------------------------------------
   Luz que desce e atravessa a sala. Em blend de tela eles SOMAM luz
   ao azul; em opacidade normal sujariam a cor. Só transladam — a
   inclinação é fixa, porque animar rotação num elemento desta
   largura custa repintura em cada quadro.
   ════════════════════════════════════════════════════════════ */
.feixe{
  position:absolute;top:-30%;height:170%;display:block;
  pointer-events:none;mix-blend-mode:screen;
  will-change:transform;
}
.feixe--1{
  left:8%;width:19vw;
  background:linear-gradient(180deg,rgba(255,148,164,.15),rgba(255,148,164,.05) 42%,rgba(255,148,164,0) 82%);
  transform:rotate(13deg);
  animation:feixe1 23s var(--e2) infinite alternate;
}
.feixe--2{
  left:44%;width:13vw;
  background:linear-gradient(180deg,rgba(255,198,206,.13),rgba(255,198,206,.04) 46%,rgba(255,198,206,0) 84%);
  transform:rotate(-9deg);
  animation:feixe2 31s var(--e2) infinite alternate;
}
.feixe--3{
  right:6%;width:22vw;
  background:linear-gradient(180deg,rgba(221,181,101,.10),rgba(221,181,101,.03) 40%,rgba(221,181,101,0) 78%);
  transform:rotate(-17deg);
  animation:feixe3 27s var(--e2) infinite alternate;
}
@keyframes feixe1{
  from{transform:rotate(13deg) translate3d(0,0,0);opacity:.55}
  to{transform:rotate(13deg) translate3d(5vw,0,0);opacity:1}
}
@keyframes feixe2{
  from{transform:rotate(-9deg) translate3d(0,0,0);opacity:1}
  to{transform:rotate(-9deg) translate3d(-4vw,0,0);opacity:.5}
}
@keyframes feixe3{
  from{transform:rotate(-17deg) translate3d(0,0,0);opacity:.6}
  to{transform:rotate(-17deg) translate3d(-6vw,0,0);opacity:1}
}

/* ---------- o squad passou a navy ---------- */
#squad .p__m{background:var(--navy-800)}

@media (max-width:1024px){
  .stmt__txt{grid-column:1/13;grid-row:auto}
  .stmt__fig{grid-column:1/13;grid-row:auto}
  .stmt__stats{grid-row:auto}
  .feixe--2{display:none}
}
@media (prefers-reduced-motion:reduce){
  .feixe{animation:none !important}
}

/* ════════════════════════════════════════════════════════════
   CRONOGRAMA · A COLUNA DE IMAGEM
   ------------------------------------------------------------
   A linha do tempo ocupava as doze colunas com o texto dentro de
   duas, e o resto virava vazio. Ela recua para sete e as fotos
   ocupam o que sobrava — presas na rolagem, de modo que a imagem do
   que a noite produz fica em vista enquanto se lê como ela funciona.
   ════════════════════════════════════════════════════════════ */
@media (min-width:1025px){
  .tl{grid-column:1/8;grid-row:2}
  .tl__fotos{
    grid-column:9/13;grid-row:2;
    position:sticky;top:calc(var(--nav-h) + 28px);
    align-self:start;
    display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);
    margin-top:6px;
  }
  .tl__fotos figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-img)}
  .tl__fotos img{
    width:100%;height:100%;display:block;object-fit:cover;
    transition:transform 1.2s var(--e);
  }
  .tl__fotos figure:first-child{aspect-ratio:4/5}
  .tl__fotos figure:last-child{aspect-ratio:4/3}
  .tl__fotos figure:first-child img{object-position:50% 34%}
  .tl__fotos figure:hover img{transform:scale(1.035)}
  /* fio azul saindo do canto, o mesmo gesto do retrato da experiência */
  .tl__fotos figure:first-child::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(8,8,8,.08);border-radius:var(--r-img);
  }
}
/* Abaixo de 1025 a linha do tempo volta a ocupar tudo e as fotos viram
   uma dupla lado a lado — empilhadas, elas empurrariam o cronograma
   inteiro para baixo da dobra. */
@media (max-width:1024px){
  .tl__fotos{
    grid-column:1/13;order:2;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(10px,1.6vw,18px);margin-top:clamp(24px,3vw,36px);
  }
  .tl__fotos figure{margin:0;overflow:hidden;border-radius:var(--r-img);aspect-ratio:4/3}
  .tl__fotos img{width:100%;height:100%;object-fit:cover;display:block}
}
@media (max-width:560px){
  .tl__fotos{grid-template-columns:minmax(0,1fr)}
}

/* ---------- o botão "ver mais" sobre navy ----------
   Pintei o squad de navy e este botão foi desenhado para fundo claro:
   ficou em 1,20:1, invisível. Sobre escuro ele inverte. */
.sec--navy .more,.sec--ink .more{
  border-color:rgba(255,255,255,.32);color:#fff;
}
.sec--navy .more:hover,.sec--ink .more:hover{
  border-color:#fff;background:#fff;color:var(--navy-900);
}
.sec--navy .more__n,.sec--ink .more__n{opacity:.7}

/* ════════════════════════════════════════════════════════════
   O ACENDER DOS RETRATOS
   ------------------------------------------------------------
   Os retratos já vivem em preto e branco e revelam cor na interação.
   O efeito aqui não inventa nada novo: ele DEMONSTRA essa interação
   sozinho, uma vez, quando a fileira entra — cada card acende, mostra
   o LinkedIn por ~0,8s e volta ao repouso, um depois do outro.

   Serve a uma função além do impacto: quem chega descobre que os
   cards são clicáveis sem precisar passar o mouse para adivinhar.

   Sem `forwards` de propósito — ao terminar, o card devolve o controle
   ao :hover, que continua funcionando como antes.
   ════════════════════════════════════════════════════════════ */
@keyframes acendeRetrato{
  0%  {filter:grayscale(1) contrast(1.03)}
  20% {filter:grayscale(0) contrast(1)}
  64% {filter:grayscale(0) contrast(1)}
  100%{filter:grayscale(1) contrast(1.03)}
}
@keyframes surgeLinkedin{
  0%  {opacity:0;transform:translateY(6px)}
  20% {opacity:1;transform:translateY(0)}
  64% {opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(6px)}
}
/* O atraso acompanha a mesma cascata da entrada (--i x 150ms), com 420ms
   a mais para o card já ter chegado antes de acender. */
.cast[data-stagger] > .p[data-anim].in .p__m img{
  animation:acendeRetrato 1.8s var(--e2) calc(var(--i,0) * 150ms + 420ms) 1;
}
.cast[data-stagger] > .p[data-anim].in .p__go{
  animation:surgeLinkedin 1.8s var(--e2) calc(var(--i,0) * 150ms + 420ms) 1;
}
/* o hover continua mandando enquanto o cursor estiver em cima */
.cast .p:hover .p__m img,.cast .p:hover .p__go{animation:none}

@media (prefers-reduced-motion:reduce){
  .cast[data-stagger] > .p[data-anim].in .p__m img,
  .cast[data-stagger] > .p[data-anim].in .p__go{animation:none !important}
}

/* ---------- legendas das fotos do cronograma ----------
   As figuras deixaram de ser decoração ao ganharem nome, então saem do
   recorte: a legenda fica fora da imagem, não por cima dela. */
.tl__fotos figure{overflow:visible;border-radius:0}
.tl__fotos img{
  border-radius:var(--r-img);
  box-shadow:0 12px 28px rgba(8,8,8,.10);
}
.tl__fotos figure:first-child img{aspect-ratio:4/5;object-position:50% 30%}
.tl__fotos figure:last-child img{aspect-ratio:4/3}
.tl__fotos figure:first-child::after{display:none}
.tl__fotos figcaption{
  display:flex;flex-direction:column;gap:2px;margin-top:11px;
}
.tl__fotos figcaption b{font-size:var(--fs-small);font-weight:600;color:var(--navy-900)}
.tl__fotos figcaption .mono{font-size:var(--fs-micro);letter-spacing:.12em;color:var(--gray-600)}
/* antes de revelar: empilhadas no centro */
[data-anim].leque:not(.in) .leque__f{
  opacity:0;transform:translate(-50%,-50%) scale(.86);
}
[data-anim].leque.in .leque__f{opacity:1}
[data-anim].leque.in .leque__f[data-pos="e"]{transition-delay:.16s,.16s,0s,0s}
[data-anim].leque.in .leque__f[data-pos="d"]{transition-delay:.28s,.28s,0s,0s}

@media (min-width:621px) and (max-width:1024px){
}

/* ---------- os três lugares · duas colunas (1025 para cima) ---------- */
@media (min-width:1025px){
}

/* ---------- a palavra Tema, sem grito ---------- */
.hero--palco .hero__tema-k{
  font-family:var(--f);text-transform:none;
  font-size:var(--fs-small);letter-spacing:0;font-weight:400;
  color:rgba(255,255,255,.72);vertical-align:baseline;margin-right:5px;
}

@media (prefers-reduced-motion:reduce){
}

/* ════════════════════════════════════════════════════════════
   A EXPERIÊNCIA · FECHANDO O BURACO
   ------------------------------------------------------------
   Medido: a prosa terminava em 1760 e os números só começavam em
   2223 — 463px de vazio embaixo à esquerda, enquanto o retrato ao
   lado seguia até o fim da fileira.

   A causa é aritmética, não estética: a coluna de texto tinha 372px
   de conteúdo contra 613px de retrato. Em vez de tapar o vazio com
   enfeite, os números descem para dentro dele, em bloco 2×2. As duas
   colunas passam a ter altura parecida e o vazio deixa de existir —
   e a seção ganha densidade em vez de decoração.
   ════════════════════════════════════════════════════════════ */
@media (min-width:1025px){
  .stmt__fig{grid-column:8/13;grid-row:2/4;align-self:start}
  .stmt__stats{
    grid-column:1/5;grid-row:3;
    margin-top:clamp(28px,3vw,44px);
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    border-top:1px solid var(--gray-300);
  }
  /* com duas colunas, o fio vertical só faz sentido na segunda de cada par */
  .stmt__stats li{padding:clamp(20px,2.2vw,30px) 20px 0 0}
  .stmt__stats li + li{padding-left:0}
  .stmt__stats li + li::before{display:none}
  .stmt__stats li:nth-child(even){padding-left:clamp(20px,2.2vw,30px)}
  .stmt__stats li:nth-child(even)::before{
    content:'';display:block;position:absolute;left:0;top:0;bottom:8px;width:1px;
    background:var(--gray-300);
  }
  .stmt__stats li:nth-child(n+3){
    margin-top:clamp(18px,2vw,26px);border-top:1px solid var(--gray-300);
  }
  .stmt__fig img{aspect-ratio:3/4}
}

/* ---------- a legenda estava caindo por cima da foto seguinte ----------
   A proporção ficou na <figure> quando as fotos ainda eram decoração sem
   legenda. Depois que ganharam nome, a altura da figura seguia travada
   pela imagem e a legenda transbordava para dentro da figura de baixo.
   A proporção pertence à imagem; a figura mede imagem + legenda. */
.tl__fotos figure,
.tl__fotos figure:first-child,
.tl__fotos figure:last-child{aspect-ratio:auto}

/* ---------- e o mesmo defeito abaixo de 1025 ----------
   Aqui a figura é item de grade e vinha esticada pela fileira; a imagem
   tinha height:100% e consumia a altura inteira, deixando a legenda de
   fora. A imagem passa a ser medida pela própria proporção e a grade
   para de esticar. */
@media (max-width:1024px){
  .tl__fotos{align-items:start}
  .tl__fotos figure{overflow:visible}
  .tl__fotos img{height:auto;aspect-ratio:4/3}
  .tl__fotos figure:first-child img{aspect-ratio:4/3;object-position:50% 30%}
}

/* ════════════════════════════════════════════════════════════
   OS BOTÕES DE "VER TODOS"
   ------------------------------------------------------------
   Eram o fim de uma cascata de retratos acendendo e não recebiam
   nada dela — o olho chegava neles já apagado. Agora a mesma luz
   que atravessa os cards atravessa o botão, num pulso curto a cada
   4,5s: tempo de sobra entre um e outro para não virar pisca-pisca.
   ════════════════════════════════════════════════════════════ */
.more{position:relative;overflow:hidden;isolation:isolate}
.more > *{position:relative;z-index:1}
.more::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(255,31,61,0) 34%,rgba(255,31,61,.20) 48%,
    rgba(255,92,114,.30) 52%,rgba(255,31,61,.20) 56%,rgba(255,31,61,0) 70%);
  transform:translateX(-130%);
  animation:varreBotao 4.5s var(--e2) 1.4s infinite;
}
/* sobre navy a luz precisa ser branca para somar em vez de sumir */
.sec--navy .more::after,.sec--ink .more::after{
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 34%,rgba(255,255,255,.14) 48%,
    rgba(255,255,255,.26) 52%,rgba(255,255,255,.14) 56%,rgba(255,255,255,0) 70%);
}
@keyframes varreBotao{
  0%{transform:translateX(-130%)}
  26%{transform:translateX(130%)}
  100%{transform:translateX(130%)}
}
/* a borda respira junto, no mesmo compasso */
.more{animation:pulsaBorda 4.5s var(--e2) 1.4s infinite}
@keyframes pulsaBorda{
  0%,18%,100%{border-color:var(--rule)}
  8%{border-color:var(--blue-400)}
}
.sec--navy .more,.sec--ink .more{animation-name:pulsaBordaClara}
@keyframes pulsaBordaClara{
  0%,18%,100%{border-color:rgba(255,255,255,.32)}
  8%{border-color:rgba(255,255,255,.72)}
}
/* a seta desce um degrau a cada volta, indicando o que o clique faz */
.more svg{animation:acenaSeta 4.5s var(--e2) 1.4s infinite}
@keyframes acenaSeta{
  0%,14%,100%{transform:translateY(0)}
  7%{transform:translateY(3px)}
}
/* sob o cursor tudo para: quem já decidiu não precisa ser chamado */
.more:hover,.more:hover::after,.more:hover svg{animation-play-state:paused}
.more[aria-expanded="true"],
.more[aria-expanded="true"]::after,
.more[aria-expanded="true"] svg{animation:none}
.more[aria-expanded="true"] svg{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  .more,.more::after,.more svg{animation:none !important}
}

/* ════════════════════════════════════════════════════════════
   A FILEIRA
   ------------------------------------------------------------
   Fechada a volta, o leque se desfaz: as três em linha, do mesmo
   tamanho, sem inclinação nem profundidade. Segura 1,3s e volta a
   se armar.

   Duas escolhas que não são enfeite: as laterais recuperam a cor
   (na fileira ninguém está atrás de ninguém, então não faz sentido
   dessaturar), e a sombra encolhe — sem eixo Z, uma sombra funda
   entregaria uma profundidade que ali não existe.

   As três larguras somam 90% e as duas frestas 4% cada, começando
   em 1%: p1 1→31, p2 35→65, p3 69→99. O translateX de cada uma é
   a distância do próprio centro até 50%, dividida pela largura.
   ════════════════════════════════════════════════════════════ */
.leque__p.enfileirado .leque__f{
  z-index:1;width:30%;cursor:default;
  box-shadow:0 14px 30px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.12);
}
.leque__p.enfileirado .leque__f img{filter:none}
.leque__p.enfileirado .leque__f[data-pos="e"]{transform:translate(-163%,-50%) translateZ(0) rotateY(0deg) rotate(0deg)}
.leque__p.enfileirado .leque__f[data-pos="c"]{transform:translate(-50%,-50%)  translateZ(0) rotateY(0deg) rotate(0deg)}
.leque__p.enfileirado .leque__f[data-pos="d"]{transform:translate(63%,-50%)   translateZ(0) rotateY(0deg) rotate(0deg)}
/* na fileira o cursor não adianta nenhuma: elas já estão todas à frente */
.leque__p.enfileirado .leque__f[data-pos="e"]:hover{transform:translate(-163%,-50%) translateZ(0) rotateY(0deg) rotate(0deg)}
.leque__p.enfileirado .leque__f[data-pos="d"]:hover{transform:translate(63%,-50%)   translateZ(0) rotateY(0deg) rotate(0deg)}

@media (prefers-reduced-motion:reduce){
  .leque__p.enfileirado .leque__f{transform:none}
}

/* ════════════════════════════════════════════════════════════
   NÍVEIS DE PARTICIPAÇÃO · O CONTROLE APARECE
   ------------------------------------------------------------
   Medido: o summary tinha fundo transparente, borda 0 e padding 0 —
   era texto solto com um ícone ao lado. Nada ali dizia "isto abre".

   Ganha superfície (fundo, fio e respiro), o mesmo pulso do botão de
   "ver mais" e um indicador que parece botão. O compasso é o mesmo
   4,5s, então os dois chamam no mesmo ritmo em vez de disputar.

   Tudo isso morre quando abre: um controle já acionado não precisa
   continuar pedindo atenção.
   ════════════════════════════════════════════════════════════ */
.niveis__cab{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(16px,1.7vw,22px) clamp(18px,1.9vw,26px);
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--r-card,14px);
  background:rgba(255,255,255,.04);
  transition:border-color .35s var(--e2),background .35s var(--e2);
  animation:pulsaBordaClara 4.5s var(--e2) 1.4s infinite;
}
.niveis__cab > *{position:relative;z-index:1}
.niveis__cab::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 34%,rgba(255,255,255,.10) 48%,
    rgba(255,255,255,.20) 52%,rgba(255,255,255,.10) 56%,rgba(255,255,255,0) 70%);
  transform:translateX(-130%);
  animation:varreBotao 4.5s var(--e2) 1.4s infinite;
}
.niveis__cab:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.075)}
.niveis__cab:hover,.niveis__cab:hover::after{animation-play-state:paused}

/* o indicador deixa de ser enfeite e vira alvo */
.niveis__cab .acord__i{
  flex:none;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);
  transition:background .3s var(--e2),border-color .3s var(--e2),transform .35s var(--e);
}
.niveis__cab .acord__i svg{
  width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  animation:acenaSeta 4.5s var(--e2) 1.4s infinite;
}
.niveis__cab:hover .acord__i{background:#fff;color:var(--navy-950);border-color:#fff;transform:translateY(-2px)}
.niveis__cab:hover .acord__i svg{animation-play-state:paused}

/* aberto: silêncio */
.niveis-w[open] .niveis__cab,
.niveis-w[open] .niveis__cab::after,
.niveis-w[open] .niveis__cab .acord__i svg{animation:none}
.niveis-w[open] .niveis__cab{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.niveis-w[open] .niveis__cab .acord__i svg{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  .niveis__cab,.niveis__cab::after,.niveis__cab .acord__i svg{animation:none !important}
}

/* ---------- a citação do presidente estava espremida ----------
   Medido: 44,6px de corpo com 52,7px de entrelinha (razão 1,18) e
   −1,70px de entreletra. As duas compressões se somam, e em quatro
   linhas o bloco fecha. A prosa logo abaixo respira a 1,72 — o degrau
   entre os dois era grande demais para o olho aceitar.

   Entrelinha para 1,28 e entreletra para −.026em: continua justa, que
   é o que dá densidade a uma citação grande, sem colar as linhas. */
.voice__pull{
  line-height:1.28;
  letter-spacing:-.026em;
  max-width:38ch;
}
@media (max-width:719px){
  .voice__pull{line-height:1.3;letter-spacing:-.02em;max-width:none}
}

/* ════════════════════════════════════════════════════════════
   PALAVRA DO PRESIDENTE · O TEXTO E O RETRATO
   ------------------------------------------------------------
   Duas coisas destoavam nesta seção:

   O parágrafo abaixo da citação ficava em 17px enquanto a citação ao
   lado tinha 45px — a queda era brusca demais e o bloco lia como nota
   de rodapé de si mesmo. Sobe para ~20px no desktop, com a medida
   ajustada para a linha não crescer junto.

   E o retrato era um círculo de 72px, tamanho que não existe em
   nenhum outro lugar da página. Passa a ser o mesmo componente dos
   moderadores: 3/4, cantos do sistema, monocromático em repouso e
   colorido na interação. A página passa a ter um jeito só de mostrar
   uma pessoa.
   ════════════════════════════════════════════════════════════ */
@media (min-width:1025px){
  .voice__rest{
    font-size:clamp(18px,1.42vw,20.5px);
    line-height:1.68;
    max-width:none;
  }
  .voice__by{
    grid-template-columns:minmax(0,168px) minmax(0,1fr);
    align-items:start;
  }
}

/* o retrato, na gramática do card de moderador */
.voice__foto{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:3/4;width:100%;
  border-radius:var(--r-img);background:var(--navy-800);
}
.voice__foto img{
  width:100%;height:100%;object-fit:cover;object-position:center 16%;
  border-radius:0;
  filter:grayscale(1) contrast(1.03);
  transition:transform 1s var(--e),filter .7s var(--e2);
}
.voice__by:hover .voice__foto img{filter:grayscale(0) contrast(1);transform:scale(1.035)}
.voice__go{
  position:absolute;z-index:1;right:10px;bottom:10px;
  width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  background:#fff;color:var(--navy-900);
  opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--e),transform .4s var(--e);
}
.voice__go svg{width:15px;height:15px;fill:currentColor;stroke:none}
.voice__by:hover .voice__go,.voice__foto:focus-visible .voice__go{opacity:1;transform:none}

/* o nome cresce junto: ao lado de um retrato de 168px, 17px sumia */
@media (min-width:1025px){
  .voice__by b{font-size:var(--fs-h5);letter-spacing:-.028em;line-height:1.18}
  .voice__by figcaption{align-self:center}
}

@media (max-width:1024px){
  /* empilhado, o retrato volta a ser compacto para não empurrar o resto */
  .voice__foto{width:104px;aspect-ratio:3/4;flex:none}
}
@media (prefers-reduced-motion:reduce){
  .voice__by:hover .voice__foto img{transform:none}
}

/* ---------- o card do presidente é um card de painelista ----------
   Uma única coluna dentro do espaço da direita, na mesma largura em que
   um painelista aparece na sua grade de quatro (≈314px em 1440), para
   os dois lerem como o mesmo objeto e não como primos. */
.voice__cast{
  grid-column:9/13;grid-row:2;align-self:start;
  --c:1;
  margin-top:clamp(32px,3.6vw,52px);
  max-width:314px;
}
/* o rótulo em fundo escuro: a variante clara do chip */
.voice .cast--lead .p__i{
  border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.72);
}
.voice .cast--lead .p.in .p__i{border-color:rgba(255,255,255,.42);color:#fff}
.voice .cast--lead .p:hover .p__i{border-color:var(--blue-400);color:var(--blue-400)}
.voice .p__n{color:#fff}
.voice .p__r{color:rgba(255,255,255,.66)}
.voice .p__m{background:var(--navy-800)}

/* ---------- a linha longa pede mais entrelinha ----------
   A 756px o parágrafo dá 83 caracteres por linha, acima da faixa
   confortável de 45 a 75. Linha longa exige mais espaço entre linhas:
   é o que impede o olho de pular de volta para a linha errada. */
@media (min-width:1025px){
  .voice__rest{line-height:1.78}
}

@media (max-width:1024px){
  .voice__cast{
    grid-column:1/13;grid-row:auto;
    max-width:280px;margin-inline:auto;   /* o max-width sozinho encostava a esquerda */
  }
}

/* ---------- o card do presidente agora é o card do squad ----------
   Mesmo componente do Ricardo e do Henrique — inclusive a variante
   p--pres, que é literalmente "presidente". Fecha a padronização:
   a página passa a ter UM jeito de mostrar quem lidera.

   Único ajuste: o dourado do anel e do cargo é o tom para fundo
   claro (#87621E). Sobre o navy desta seção ele desaparece, então
   entra o tom claro do par. */
.voice__cast{--c:1;max-width:245px}
.voice .p--pres .p__m{box-shadow:inset 0 0 0 2px var(--gold-l)}
.voice .p--pres .p__r{color:var(--gold-l)}
.voice .p__n{color:#fff}
.voice .p__m{background:var(--navy-800)}

/* ════════════════════════════════════════════════════════════
   CARROSSEL DA HERO
   ------------------------------------------------------------
   O leque ocupava metade da tela; agora a fotografia É a tela.
   Cinco quadros se dissolvem um no outro com deriva lenta, e o texto
   fica parado por cima — quem muda é o fundo.

   O véu não é enfeite. Sem ele o contraste do texto dependeria do
   pixel da foto, que troca a cada 6,5s: um quadro claro apagaria a
   manchete. Com ele o texto cai sempre sobre um chão conhecido, e o
   contraste deixa de ser sorte.

   A deriva é feita com transição, não com keyframe: assim ela
   recomeça sozinha a cada troca de classe, sem precisar reiniciar
   animação na mão.
   ════════════════════════════════════════════════════════════ */
.carro{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--navy-950)}
.carro__q{position:absolute;inset:0}
.carro__f{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity 1.25s var(--e2);
}
.carro__f.is-on{opacity:1}
.carro__f img{
  width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);
  transform:scale(1.04);
}
.carro__f.is-on img{transform:scale(1.13);transition:transform 7.6s linear}
/* quadros pares derivam ao contrário: o movimento não fica repetitivo */
.carro__f:nth-child(even) img{transform:scale(1.13)}
.carro__f:nth-child(even).is-on img{transform:scale(1.04)}

.carro__veu{
  position:absolute;inset:0;display:block;
  background:
    linear-gradient(100deg,
      rgba(0,0,0,.95) 0%, rgba(0,0,0,.92) 42%,
      rgba(0,0,0,.68) 66%, rgba(0,0,0,.42) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.80) 0%, rgba(0,0,0,.22) 24%,
      rgba(0,0,0,.28) 58%, rgba(0,0,0,.92) 100%);
}

/* ---------- as barras ----------
   Cada barra enche no compasso do quadro: além de indicar posição, ela
   diz quanto falta — some a sensação de troca sem aviso. */
.carro__nav{
  grid-column:1/13;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:clamp(26px,3vw,44px);
}
.carro__b{
  position:relative;width:clamp(38px,4.4vw,58px);height:44px;
  background:none;border:0;padding:0;cursor:pointer;flex:none;
}
.carro__b::before{
  content:'';position:absolute;left:0;right:0;top:50%;height:3px;
  transform:translateY(-50%);border-radius:2px;
  background:rgba(255,255,255,.26);transition:background .3s var(--e2);
}
.carro__b i{
  position:absolute;left:0;right:0;top:50%;height:3px;
  transform:translateY(-50%) scaleX(0);transform-origin:left;
  border-radius:2px;background:var(--blue-400);
}
.carro__b:not(.is-on) i{transition:none}
.carro__b.is-on i{transform:translateY(-50%) scaleX(1);transition:transform 6.5s linear}
.carro__b:hover::before{background:rgba(255,255,255,.5)}
.carro__b:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px}
.carro__cred{
  margin-left:auto;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}

/* ---------- a hero volta a ser uma coluna sobre a foto ---------- */
.hero--palco{position:relative;overflow:hidden}
.hero--palco .hero__in{position:relative;z-index:1}
@media (min-width:1025px){
  .hero--palco .hero__in{
    display:grid;grid-template-columns:minmax(0,1fr);
    align-content:center;text-align:left;
    min-height:100svh;
  }
  .hero__diz{grid-column:1;align-items:flex-start;text-align:left;max-width:56%}
  .hero--palco .hero__h1{max-width:15ch;font-size:clamp(44px,4.6vw,74px)}
  .hero--palco .hero__tema{max-width:34ch;text-align:left}
  .hero__acao{grid-column:1;align-items:flex-start;margin-top:clamp(28px,3vw,44px)}
  .hero--palco .hero__k{justify-content:flex-start}
  .carro__nav{max-width:62%}
  .hero--palco .hero__scroll{display:none}
}
@media (max-width:1024px){
  .carro__veu{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 30%,
        rgba(0,0,0,.72) 62%, rgba(0,0,0,.95) 100%);
  }
  .carro__nav{justify-content:center;margin-top:clamp(20px,4vw,32px)}
  .carro__cred{margin-left:0;width:100%;text-align:center;margin-top:8px}
}

@media (prefers-reduced-motion:reduce){
  .carro__f{transition:none}
  .carro__f img,.carro__f.is-on img{transform:none;transition:none}
  .carro__b.is-on i{transition:none;transform:translateY(-50%) scaleX(1)}
}

/* ---------- o véu no mobile precisa ser quase opaco ----------
   Medido: no empilhado o véu caía para 0,62 justamente na faixa da
   manchete, e ali a foto tem o letreiro branco do evento. A conta de
   contraste passava (6,4:1), mas contraste não mede FUNDO OCUPADO —
   branco sobre branco texturizado se lê mal mesmo passando.

   Na tela pequena a foto vira textura e o texto manda. É a troca certa:
   no desktop ela tem espaço para ser protagonista à direita do texto;
   no celular ela dividiria o mesmo espaço com ele. */
@media (max-width:1024px){
  .carro__veu{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.93) 0%, rgba(0,0,0,.88) 28%,
        rgba(0,0,0,.90) 66%, rgba(0,0,0,.97) 100%);
  }
  /* a hero ficou sangrada: a manchete pode crescer junto */
  .hero--palco .hero__h1{font-size:clamp(34px,9.4vw,48px);max-width:16ch}
  .hero--palco .hero__h1 .l--q{font-size:.5em}
}
/* A 17ch a manchete ainda partia "Nem todo / mundo". A 20ch a primeira
   linha cabe inteira e a quebra cai onde o sentido pede. */
@media (min-width:1025px){
  .hero--palco .hero__h1{max-width:20ch;text-wrap:balance}
}

/* ════════════════════════════════════════════════════════════
   VARIAÇÃO D · HERO EM DUAS COLUNAS
   ------------------------------------------------------------
   A hero anterior punha a manchete EM CIMA da foto, e o contraste
   virava sorte: cada quadro do carrossel tinha um brilho diferente,
   então o mesmo texto ficava forte num e lavado no outro. Nenhum véu
   resolve isso sem apagar a foto.

   Aqui as duas coisas ocupam territórios que não se tocam: palavras
   sobre preto sólido à esquerda, imagem enquadrada à direita. O
   carrossel continua — o que saiu foi a sobreposição.
   ════════════════════════════════════════════════════════════ */
.hero--d{
  position:relative;background:var(--navy-900);color:var(--gray-900);
  min-height:100svh;display:flex;align-items:center;overflow:hidden;
}
.hero--d .hero__in{
  position:relative;z-index:1;width:100%;
  padding-top:calc(var(--nav-h) + clamp(16px,2vw,32px));
  padding-bottom:clamp(28px,3.4vw,56px);
  align-items:center;
}
.hd__txt{grid-column:1/7;display:flex;flex-direction:column}
.hd__fig{grid-column:8/13;margin:0;position:relative}

/* ---------- as palavras ---------- */
.hero--d .hero__diz{align-items:flex-start;text-align:left;gap:clamp(12px,1.3vw,18px)}
.hero--d .hero__k{justify-content:flex-start;color:var(--gold-l);letter-spacing:.17em}
.hero--d .hero__h1{
  margin:0;max-width:14ch;text-align:left;
  font-size:clamp(38px,4.4vw,68px);line-height:1.02;letter-spacing:-.032em;
}
.hero--d .hero__h1 .l--q{
  font-size:.42em;line-height:1.24;color:rgba(245,243,239,.6);
  margin-bottom:.42em;font-weight:400;
}
.hero--d .hero__h1 em{color:var(--blue-500);font-style:normal}
.hero--d .hero__tema{
  display:block;max-width:32ch;margin:0;text-align:left;
  padding-left:14px;border-left:2px solid var(--blue-500);
  font-size:var(--fs-lead);line-height:1.4;color:rgba(245,243,239,.86);
}
.hero--d .hero__tema-k{
  display:block;font-family:var(--fm);font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l);
  margin:0 0 4px;
}
.hd__acao{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(12px,1.3vw,18px);margin-top:clamp(28px,3.2vw,48px);
}
.hero--d .hero__cta{justify-content:flex-start;flex-wrap:wrap}
.hero--d .hero__tag{
  background:none;border:0;padding:0;margin:0;
  color:rgba(245,243,239,.55);font-size:var(--fs-micro);letter-spacing:.05em;
}

/* ---------- a imagem, enquadrada ---------- */
.hd__q{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--r-img);
  box-shadow:0 0 0 1px rgba(245,243,239,.10), 0 40px 90px rgba(0,0,0,.6);
  background:var(--navy-800);
}
.hd__q .carro__f{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity 1.1s var(--e2);
}
.hd__q .carro__f.is-on{opacity:1}
.hd__q .carro__f img{
  width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);
  transform:scale(1.03);
}
.hd__q .carro__f.is-on img{transform:scale(1.11);transition:transform 7.4s linear}
.hd__q .carro__f:nth-child(even) img{transform:scale(1.11)}
.hd__q .carro__f:nth-child(even).is-on img{transform:scale(1.03)}

.hd__leg{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:16px;
}
.hd__leg .mono{
  margin-left:auto;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:rgba(245,243,239,.45);
}
.hd__nav{display:flex;align-items:center;gap:8px}

/* ---------- empilhado ---------- */
@media (max-width:1024px){
  .hero--d{min-height:0;padding-block:0}
  .hero--d .hero__in{align-items:start}
  .hd__txt{grid-column:1/13;order:1;align-items:center;text-align:center}
  .hero--d .hero__diz{align-items:center;text-align:center}
  .hero--d .hero__k{justify-content:center}
  .hero--d .hero__h1{max-width:15ch;font-size:clamp(34px,8.6vw,46px);text-align:center}
  .hero--d .hero__tema{
    padding-left:0;border-left:0;border-top:2px solid var(--blue-500);
    padding-top:12px;text-align:center;margin-inline:auto;max-width:28ch;
  }
  .hd__acao{align-items:stretch;width:100%;max-width:420px;margin-inline:auto}
  .hero--d .hero__cta{flex-direction:column;width:100%}
  .hero--d .hero__cta .btn{width:100%}
  .hero--d .hero__tag{text-align:center;align-self:center}
  .hd__fig{grid-column:1/13;order:2;margin-top:clamp(28px,4vw,44px)}
  .hd__q{aspect-ratio:4/3}
  .hd__leg{justify-content:center}
  .hd__leg .mono{margin-left:0;width:100%;text-align:center}
}

/* ---------- o preto atravessa a página inteira ----------
   No institucional nenhuma seção é clara: o que separa uma da outra é
   um degrau de preto, não uma troca de claro para escuro. */
body{background:var(--navy-900)}
.sec--white{background:var(--white)}
.sec--ice{background:var(--ice-50)}
.sec--navy{background:var(--navy-800)}
.sec--ink,.acesso{background:var(--navy-950)}
.voice{background:var(--navy-950)}
.abertura{background:linear-gradient(178deg,#050505 0%,#000 46%,#050505 78%,#0A0A0A 100%)}

/* ════════════════════════════════════════════════════════════
   O QUE A INVERSÃO QUEBROU
   ------------------------------------------------------------
   Inverter claro→escuro derrubou 25 textos, e a causa é uma só:
   --navy-900 era a cor do TEXTO escuro sobre superfície clara.
   Agora ele é quase o fundo, então esses textos ficaram pretos
   sobre preto (1,03:1).

   Não dava para trocar em massa: as pastilhas brancas com ícone
   escuro (o play do vídeo, o selo do LinkedIn, a placa do logo)
   usam a MESMA declaração e estão certas — ali o branco é o fundo.
   Por isso a correção é dirigida, seletor a seletor.
   ════════════════════════════════════════════════════════════ */

/* ---------- o botão principal ----------
   VIVID como fundo dá 4,09:1 com branco e reprova. SANGRIA dá 9,71.
   O vivo fica onde ele é imbatível: texto e acento sobre preto. */
.btn--pri{background:var(--sangria);border-color:var(--sangria);color:#fff}
.btn--pri:hover{background:var(--blue-500);border-color:var(--blue-500)}
.nav__cta{background:var(--sangria);border-color:var(--sangria)}
.nav__cta:hover{background:var(--blue-500);border-color:var(--blue-500)}

/* ---------- a barra fixa ---------- */
.nav.stuck{background:rgba(8,8,8,.9)}
.nav.stuck::after{background:rgba(245,243,239,.14)}
.nav__links a,.nav__log{color:rgba(245,243,239,.72)}
.nav__links a:hover,.nav__links a.on,.nav__log:hover{color:var(--gray-900)}
.burger span{background:var(--gray-900)}
.burger:hover{border-color:var(--gray-900)}

/* ---------- textos que eram escuros sobre claro ---------- */
.more{color:var(--gray-900);border-color:var(--gray-300)}
.more:hover{background:var(--gray-900);border-color:var(--gray-900);color:var(--navy-950)}
.tl__i.in .tl__t,.no-anim .tl__t{color:var(--gray-900)}
.pillar.in .pillar__n,.no-anim .pillar__n{color:var(--gray-900)}
.cast--lead .p.in .p__i,.no-anim .cast--lead .p__i{border-color:var(--gray-300);color:var(--gray-900)}
.mais__b:hover{color:var(--gray-900)}
.btn--sec{color:var(--gray-900);border-color:var(--gray-300)}
.btn--sec:hover{background:var(--gray-900);border-color:var(--gray-900);color:var(--navy-950)}
.btn--gho:hover{color:var(--gray-900);border-color:var(--gray-900)}
.socials a:hover{background:var(--gray-900);border-color:var(--gray-900);color:var(--navy-950)}
.dinamica__logo:hover{border-color:var(--gray-900)}

/* ---------- superfícies que ainda eram claras ---------- */
.patro,.prog,.dinamica{background:var(--navy-800);border-color:var(--gray-300)}
.patro__k{color:var(--blue-600)}
.drawer{background:var(--navy-950);border-left-color:var(--gray-300)}

/* ---------- legenda da hero ---------- */
.hd__leg .mono{color:rgba(245,243,239,.62)}

/* ---------- o vermelho profundo entra como superfície ----------
   ROSEWOOD e ROOT BEER não servem de texto (1,45 e 1,01 sobre preto),
   mas dão profundidade onde a página precisa de peso sem clarear. */
.sec--ink,.acesso{background:linear-gradient(180deg,var(--navy-950),var(--rootbeer) 140%)}
.voice{background:linear-gradient(180deg,var(--rootbeer),var(--navy-950) 70%)}
.lote--on{border-color:var(--blue-400);background:rgba(250,13,24,.07)}
.lote--on .lote__k{color:var(--blue-400)}

/* ---------- a régua que ultrapassava as palavras ----------
   .l:last-child era inline-block com a régua em left:0/right:0. Enquanto
   a frase cabia numa linha o box encolhia junto e a régua batia. Quando
   ela quebra em duas, o inline-block passa a ocupar a largura inteira do
   container — e a régua vai junto, muito além de "mesmo.".

   Troco por sublinhado de verdade: ele segue o texto em qualquer quebra,
   porque é o próprio texto que o desenha. Perde-se o traço que se desenha
   na entrada; um traço certo parado vale mais que um errado animado. */
.hero--d .hero__h1 .l:last-child{display:block;position:static}
.hero--d .hero__h1 .l:last-child::after{display:none}
.hero--d .hero__h1 em{
  text-decoration:underline;
  text-decoration-color:var(--blue-500);
  text-decoration-thickness:4px;
  text-underline-offset:.13em;
  text-decoration-skip-ink:none;
}

/* ---------- a coluna de texto ficava estreita entre 1025 e 1279 ----------
   Ali a manchete quebrava em quatro linhas curtas. A coluna cresce e a
   imagem cede — o texto é que carrega a mensagem. */
@media (min-width:1025px) and (max-width:1279px){
  .hd__txt{grid-column:1/8}
  .hd__fig{grid-column:8/13}
  .hero--d .hero__h1{font-size:clamp(34px,3.8vw,48px);max-width:16ch}
  .hd__q{aspect-ratio:3/4}
}

/* ---------- PERSIAN não serve de texto miúdo (3,49-3,75:1) ----------
   Ele é fundo e título grande. Todo rótulo pequeno passa para VIVID,
   que é o único da paleta que alcança 4,5 sobre preto. */
.eyebrow,.drawer__nav a i,.dinamica__k,.tl__k,.perk__k,
.cast--lead .p:hover .p__i,.cast--par .p.in .p__i,
.q summary:hover .q__n,.q[open] .q__n{color:var(--blue-600)}
/* e o ícone acende junto: antes só o numeral reagia, e o "+" ficava
   parado enquanto a linha inteira mudava de estado */
.q summary:hover i::before,.q summary:hover i::after,
.q[open] summary i::before,.q[open] summary i::after{background:var(--blue-600)}

/* ---------- superfícies um degrau mais escuras ----------
   VIVID dá 4,75 sobre #0D0D0D mas só 4,43 sobre #161616. Em vez de
   clarear o vermelho (e sair da paleta), escureço a superfície. */
.patro,.prog,.dinamica{background:#0A0A0A}
.pillar__k{background:#0A0A0A;color:var(--blue-600)}
.pillar:hover .pillar__k{background:#120607;color:var(--blue-600)}
.tl__fotos figcaption b,.stmt__fig figcaption b{color:var(--gray-900)}

/* ---------- os três últimos PERSIAN em texto miúdo ----------
   Mesma causa dos anteriores: 3,65-3,82:1. VIVID resolve os três. */
.mais__a,.mais__z,.prog__k{color:var(--blue-600)}

/* ---------- o recuo de 259px na coluna de texto ----------
   Sobrou o max-width:56% da hero do carrossel, onde o texto dividia
   espaço com a foto de fundo. Aqui a coluna já é dele inteira: o limite
   só empurrava o bloco para longe da margem. */
@media (min-width:1025px){
  .hd__txt{align-items:flex-start}
  .hero--d .hero__diz{max-width:none;width:100%;align-self:flex-start;margin-inline:0}
  .hero--d .hd__acao{align-self:flex-start;margin-inline:0}
}

/* ---------- o brilho que entrava de supetão ----------
   O .pillar estava com transition:none — o gradiente do hover aparecia
   num quadro só. Não era falta de transparência, era falta de transição.

   O estado de repouso passa a ser o MESMO gradiente com alfa zero: com
   as duas pontas iguais em estrutura, o navegador interpola entre elas.
   E vai junto uma cor chapada, que interpola em qualquer motor — se o
   gradiente não animar, ainda sobra um fade. */
.pillar{
  background-color:rgba(250,13,24,0);
  background-image:linear-gradient(96deg,rgba(250,13,24,0) 0%,rgba(250,13,24,0) 45%,rgba(250,13,24,0) 100%);
  transition:background-color .5s var(--e2),background-image .5s var(--e2);
}
.pillar:hover{
  background-color:rgba(250,13,24,.035);
  background-image:linear-gradient(96deg,rgba(250,13,24,.10) 0%,rgba(250,13,24,.045) 45%,rgba(250,13,24,0) 100%);
}
/* a borda e o prato do ícone acompanham no mesmo tempo, senão o card
   acende em partes */
.pillar__n .dico{transition:background .5s var(--e2),border-color .5s var(--e2),color .5s var(--e2),transform .5s var(--e)}
.pillar__k{transition:background .5s var(--e2),color .5s var(--e2)}

/* A regra do escalonado ([data-stagger] > [data-anim].in) declara
   transition:opacity,transform e, sendo (0,3,0) contra (0,1,0) do .pillar,
   apagava a transição do brilho. Aqui as quatro convivem. */
[data-stagger] > .pillar[data-anim].in,
.pillar[data-anim].in{
  transition:
    opacity .68s var(--e) calc(var(--i,0) * 120ms),
    transform .82s var(--e) calc(var(--i,0) * 120ms),
    background-color .5s var(--e2),
    background-image .5s var(--e2);
}

/* ════════════════════════════════════════════════════════════
   HERO · A ESCALA ABRE
   ------------------------------------------------------------
   Medido a 1440: 13 / 17,3 / 26,6 / 63,4px. O meio estava achatado —
   tema (17,3), botão (16) e chapéu (13) quase no mesmo corpo — e a
   manchete ocupava só 9,8% da largura da coluna.

   A correção não é aumentar tudo: é separar os degraus por FUNÇÃO.
   A premissa recua (ela prepara, não anuncia), a manchete cresce, e o
   tema sobe — ele é o assunto do encontro, não uma legenda.
   ════════════════════════════════════════════════════════════ */
@media (min-width:1025px){
  .hero--d .hero__h1{font-size:clamp(46px,5.4vw,78px);max-width:13ch}
  .hero--d .hero__h1 .l--q{font-size:.30em;line-height:1.28;margin-bottom:.5em}
  .hero--d .hero__tema{font-size:clamp(19px,1.5vw,21.5px);max-width:30ch}
  .hero--d .hero__k{font-size:12.5px;letter-spacing:.2em}
  .hero--d .hero__diz{gap:clamp(10px,1vw,14px)}
}
@media (max-width:1024px){
  .hero--d .hero__h1{font-size:clamp(36px,9.2vw,52px)}
  .hero--d .hero__h1 .l--q{font-size:.34em;line-height:1.3;margin-bottom:.5em}
  .hero--d .hero__tema{font-size:clamp(17px,4.4vw,20px)}
}

/* ════════════════════════════════════════════════════════════
   OS LOGOS QUE SOMEM NO PRETO
   ------------------------------------------------------------
   Amostrei o pixel de cada um dos 25 logos da página. Só CINCO têm
   contraste abaixo de 3:1 sobre o preto:

     roit 1,36 · bluetree 1,53 · escola-atemporal 2,07 · novita 2,54

   Os outros vinte já são brancos (18,88:1) — num prato branco eles
   sumiriam. Por isso o prato vai só nos quatro, por seletor de arquivo.

   E não altero a cor de nenhum logo com filtro: inverter ou clarear
   marca de terceiro descaracteriza a identidade dela. O prato resolve
   sem tocar no arquivo.
   ════════════════════════════════════════════════════════════ */
img[src*="roit"],
img[src*="novita"],
img[src*="escola-atemporal"],
img[src*="bluetree"]{
  background:#F5F3EF;
  border-radius:8px;
  padding:clamp(10px,1vw,16px) clamp(14px,1.4vw,22px);
  box-sizing:border-box;
  box-shadow:0 0 0 1px rgba(245,243,239,.14);
}
/* o logo da LeaderX tem versão clara pronta: é trocar o arquivo, não
   plastificar o escuro */
.nav__logo,.drawer__logo{content:url("../logos/leaderx-white.png")}

/* ---------- o piso de 13px voltou a ser furado ----------
   Duas regressões minhas nesta rodada:

   1. .l--q em .34em: proporção calibrada para a manchete de 78px do
      desktop. No mobile a manchete cai para 36px e a premissa virou
      12,24px. Proporção em `em` não sobrevive a uma escala fluida —
      abaixo de 1025 ela passa a ter tamanho próprio.
   2. O chapéu a 12,5px, abaixo do piso que a página inteira respeita. */
.hero--d .hero__k{font-size:13px}
@media (max-width:1024px){
  .hero--d .hero__h1 .l--q{font-size:clamp(16px,4.6vw,19px);line-height:1.32}
}

/* ---------- BKPS entra no prato, e os dois patrocinadores no MESMO box ----------
   BKPS media 4,15:1 — passava do meu corte de 3:1, mas passar não é o
   mesmo que ler bem, e a olho ele continuava escuro. Corte revisado
   para 5:1, que também traz a Specialisterne (4,26).

   E o box é fixo para os dois: os arquivos têm proporções diferentes
   (ROIT quase quadrado, BKPS bem largo), então igualar só a largura
   deixava um prato com o dobro da altura do outro. Com caixa igual e
   object-fit:contain, os dois cards pesam o mesmo — que foi o critério
   que a gente já tinha fechado para esses dois logos. */
.patro__l[src*="roit"],
.patro__l[src*="bkps"]{
  width:min(300px,100%);
  height:clamp(116px,11.5vw,152px);
  max-height:none;
  object-fit:contain;
}
img[src*="bkps"],
img[src*="specialisterne"]{
  background:#F5F3EF;
  border-radius:8px;
  padding:clamp(10px,1vw,16px) clamp(14px,1.4vw,22px);
  box-sizing:border-box;
  box-shadow:0 0 0 1px rgba(245,243,239,.14);
}

/* ════════════════════════════════════════════════════════════
   BORDAS DE CONTROLE (WCAG 1.4.11 · não-texto ≥ 3:1)
   ------------------------------------------------------------
   A auditoria completa pegou 30 reprovações que eu nunca tinha
   medido: as bordas dos botões e controles ficavam entre 1,21 e
   2,20:1 sobre o preto. Contorno de controle é elemento funcional,
   não decoração — abaixo de 3:1 a pessoa não vê onde o botão começa.

   A conta: branco sobre #0D0D0D precisa de alfa ≥ 0,35 para chegar
   a 3:1. Uso 0,42, que dá 3,7 e ainda não vira moldura branca.

   O --gray-300 (#282828) continua para os FIOS decorativos das
   seções, onde 3:1 não se aplica e um traço forte poluiria.
   ════════════════════════════════════════════════════════════ */
:root{--fio-controle:rgba(245,243,239,.42)}

.btn--sec,.btn--gho,.btn--out,
.burger,.drawer__x,.more,.voice__li,
.niveis__cab,.lote,.nivel,.patro,
.socials a,.dinamica__logo,.mini__m{
  border-color:var(--fio-controle);
}
.carro__b::before{background:rgba(245,243,239,.42)}
.btn--sec:hover,.btn--gho:hover,.burger:hover,.drawer__x:hover,
.more:hover,.voice__li:hover,.niveis__cab:hover{
  border-color:var(--gray-900);
}
/* o card do patrocinador tem prato claro dentro: a borda pode ser mais
   discreta ali sem sumir, porque o proprio prato ja marca o limite */
.patro{border-color:rgba(245,243,239,.24)}

/* ---------- os últimos dois casos ----------
   1. .shd__s a (o e-mail no subtítulo do FAQ) estava em PERSIAN: 3,65:1.
      Foi o único link de texto corrido que ficou no tom de fundo.
   2. As bordas do card de patrocinador e das molduras de retrato ainda
      estavam em 2,00-2,02:1. O prato claro do logo e a própria foto já
      marcam o limite, mas contorno de elemento clicável responde ao
      mesmo 3:1 dos outros controles. */
.shd__s a{color:var(--blue-600);border-bottom-color:rgba(250,13,24,.4)}
.shd__s a:hover{border-bottom-color:var(--blue-600)}
.patro,.p__m,.mini__m,.ficha-p__m{border-color:var(--fio-controle)}
.p__m,.mini__m{box-shadow:inset 0 0 0 1px rgba(245,243,239,.16)}

/* ---------- os contornos que faltavam ----------
   O botão principal é SANGRIA sobre preto: o preenchimento dá 2,00:1
   contra a página, então a borda dele não marcava aresta nenhuma. Um
   fio em PERSIAN (3,75 sobre preto) desenha o limite sem sair da paleta
   e sem clarear o botão, que precisa continuar escuro para o branco
   render 9,71 em cima.

   As molduras tracejadas dos cards "A anunciar" sobem junto: não são
   clicáveis, mas comunicam "vaga a preencher" — se não se veem, não
   comunicam nada. */
.btn--pri,.nav__cta{border-color:var(--blue-500)}
.btn--pri:hover,.nav__cta:hover{border-color:var(--blue-400)}
.niveis__cab{border-color:var(--fio-controle)}
.more{border-color:var(--fio-controle)}
.p--vago .p__m,.mini--vaga .mini__m,.fig--vaga .fig__m{border-color:rgba(245,243,239,.34)}
.hd__q{box-shadow:0 0 0 1px rgba(245,243,239,.20),0 40px 90px rgba(0,0,0,.6)}
.drawer__nav a{border-bottom-color:rgba(245,243,239,.16)}
.socials a,.voice__li,.acord__i{border-color:var(--fio-controle)}

/* As molduras tracejadas ficaram em 2,87 — usei .34 quando a conta pedia
   .42. Elas comunicam "vaga a preencher"; abaixo de 3:1 não comunicam. */
.p--vago .p__m,.mini--vaga .mini__m,.fig--vaga .fig__m,
.p__m,.mini__m,.ficha-p__m,.fig__m{border-color:var(--fio-controle)}

/* Os oito que sobraram perdiam para regras com escopo de seção herdadas
   da variação C (.sec--navy .more, .sec--navy .p__m) e para o estado
   aberto do acordeão. Igualo a especificidade em vez de subir o alfa —
   o valor já estava certo, só não chegava. */
.sec--navy .more,.sec--ink .more,
.sec--navy .p__m,.sec--ink .p__m,
.sec--navy .p--vago .p__m,.sec--ink .p--vago .p__m,
.sec--navy .mini__m,.sec--ink .mini__m,
.niveis-w[open] .niveis__cab,
.voice .p__m,.acesso .p__m{
  border-color:var(--fio-controle);
}

/* Os três últimos: ícones sociais do rodapé. A borda é currentColor e o
   link fica em opacity:.55 — mesmo um fio de .42 chega em .23 na tela.
   O que estava baixo era a opacidade, não o fio. */
.ft .socials a,.drawer .socials a{opacity:1;border-color:var(--fio-controle)}
.ft .socials a:hover,.drawer .socials a:hover{opacity:1}

/* O hambúrguer só existe abaixo de 1025 e perdia para a regra com escopo
   de nav. Mesma especificidade, mesmo fio dos outros controles. */
.nav .burger,.nav.stuck .burger,.nav.over-dark .burger{border-color:var(--fio-controle)}
.nav .burger:hover{border-color:var(--gray-900)}


/* o conteúdo continua por cima de tudo */
.hero--d .hero__in{z-index:2}

@media (prefers-reduced-motion:reduce){
}
/* ---------- logo da Escola Atemporal ----------
   No desktop ele ficou em 108px (+80% sobre os 60px originais). Do
   empilhado para baixo desce 30%: ali a seção perde a coluna dupla e o
   logo passa a dividir a largura com o texto, então o mesmo tamanho
   que dava presença no desktop passa a roubar espaço.

   108 × 0,7 = 75,6 → 76px   |   88 × 0,7 = 61,6 → 62px

   A regra de 719 vem DEPOIS da de 1024 de propósito: as duas casam
   abaixo de 719 e quem manda é a última. */
.dinamica__logo img{height:108px}
@media (max-width:1024px){.dinamica__logo img{height:76px}}
@media (max-width:719px){.dinamica__logo img{height:62px}}

/* ════════════════════════════════════════════════════════════
   BARRA DE AÇÃO
   ------------------------------------------------------------
   Medido: 21,1 telas seguidas sem nenhum caminho de compra no
   celular. Uma página de 29,6 telas que só oferece a ação no começo
   e no fim aposta que a pessoa role tudo — e quem decide rápido é
   exatamente quem não rola.

   Ela leva a data e o local junto do botão de propósito: a essa
   altura da rolagem a pessoa já esqueceu os dois, e um botão sem
   contexto obriga a voltar para conferir.
   ════════════════════════════════════════════════════════════ */
.acao{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:rgba(8,8,8,.94);
  border-top:1px solid var(--fio-controle);
  transform:translateY(100%);
  transition:transform .45s var(--e);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.acao.on{transform:none}
.acao__in{
  width:min(100% - var(--gut)*2,var(--max));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,2vw,28px);
  padding-block:clamp(11px,1.2vw,15px);
}
.acao__q{display:flex;flex-direction:column;gap:2px;margin:0;min-width:0}
.acao__q b{
  font-family:var(--fm);font-size:var(--fs-micro-lg);font-weight:500;
  letter-spacing:.08em;color:var(--gray-900);
}
.acao__q span{
  font-size:var(--fs-micro);color:rgba(245,243,239,.62);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acao__b{flex:none}

@media (max-width:560px){
  /* na tela estreita a data sozinha basta: o local roubaria o botão */
  .acao__q span{display:none}
  .acao__in{padding-block:10px}
}
@media (prefers-reduced-motion:reduce){
  .acao{transition:none}
}

/* ════════════════════════════════════════════════════════════
   FUNDO DA HERO · O FUNDO É O EVENTO
   ------------------------------------------------------------
   Três tentativas minhas falharam pela mesma razão, e só olhando as
   referências ficou claro qual: eu estava DECORANDO o fundo. Aurora,
   grade, feixes, anéis, brasas, refletor — enfeite.

   Nos sites de evento premiados de verdade não há enfeite nenhum:

     No Art (BORING) · Site of the Day + Developer Award, ago/2026
       o fundo da hero é imagem aérea da multidão do próprio evento
     Superlógica (RMD Studio) · Awwwards
       o fundo é uma foto de pessoa real sangrando na tela toda
     Revelatio (br) · Site of the Day + Developer Award, ago/2026
       corpo rgb(0,0,0): fundo NENHUM, o trabalho é da tipografia

   Ou o evento, ou nada. Aqui vai o evento: o carrossel das edições
   anteriores deixa de ser um card à direita e vira o fundo inteiro.

   ------------------------------------------------------------
   POR QUE ISSO JÁ DEU ERRADO ANTES, E O QUE MUDA AGORA

   Texto sobre foto foi exatamente o que reprovou na primeira versão
   desta hero: "cada quadro tinha um brilho diferente" e o contraste
   virava sorte. A causa não era a ideia, era o véu ter sido estimado.

   Desta vez as cinco fotos foram medidas, ladrilho a ladrilho de 16px,
   nos 55% da esquerda — onde o texto mora. Luminância:

     foto                 média    pior ladrilho
     g6                   0,264    0,870
     painel-plateia       0,213    0,968   ← estouro de luz de palco
     plateia              0,208    0,793
     g5                   0,108    0,571
     francisco-embraer    0,045    0,603

   A média não serve para nada aqui: 0,21 de média e 0,97 de pior
   ladrilho é a diferença entre texto confortável e texto ilegível, e
   basta UM ladrilho claro cair atrás de uma palavra.

   Sobre 0,968 o off-white dá 1,07:1. Compondo preto em sRGB o canal
   vira c×(1−α), então a luminância cai por volta de (1−α)^2,4:

     α = 0,52 → 4,5:1     α = 0,64 → 7:1     α = 0,68 → 7,7:1

   O véu nunca desce de 0,68 em cima da coluna do texto. Da metade para
   a direita ele abre, porque ali não há palavra nenhuma — e é ali que a
   foto aparece de fato. É esse desnível que deixa o evento visível sem
   entregar o contraste à sorte.
   ════════════════════════════════════════════════════════════ */

/* a decoração antiga do fundo sai: quem for o fundo é a foto */
.hero--d .hero__bg{display:none}
.hero--d .hero__in{z-index:2}

/* ---------- a figura sangra por trás de tudo ---------- */
.hero--d .hd__fig{
  position:absolute;inset:0;z-index:0;margin:0;
  grid-column:auto;order:0;
}
.hero--d .hd__q{
  position:absolute;inset:0;
  aspect-ratio:auto;border-radius:0;box-shadow:none;
  background:var(--navy-950);
}

/* ---------- o véu, dimensionado pelo pior pixel ----------
   Duas camadas de preto na mesma pilha. Elas se multiplicam:
   α total = 1 − (1−α₁)(1−α₂). A horizontal protege a coluna do texto;
   a vertical segura o topo (onde passa o menu) e fecha o pé da seção
   contra a próxima. */
.hero--d .hd__fig::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* Até 50% da largura o véu não desce de .82. Quem manda nesse piso
       não é o texto branco, é a linha vermelha da manchete: #C93631 tem
       luminância 0,15 e dá 4,01:1 até contra preto PURO. Como texto
       grande precisa de 3:1, o fundo atrás dela não pode passar de
       0,017 de luminância — e sobre o pior ladrilho (0,968) isso exige
       α ≥ 0,81. Depois de 50% ele abre rápido, porque dali para a
       direita não há palavra nenhuma: é onde o evento aparece. */
    linear-gradient(96deg,
      rgba(0,0,0,.93) 0%,
      rgba(0,0,0,.90) 30%,
      rgba(0,0,0,.82) 50%,
      rgba(0,0,0,.44) 68%,
      rgba(0,0,0,.14) 86%,
      rgba(0,0,0,.06) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.70) 0%,
      rgba(0,0,0,.26) 15%,
      rgba(0,0,0,.14) 58%,
      rgba(0,0,0,.56) 88%,
      rgba(0,0,0,.94) 100%);
}

/* ---------- a legenda vai para o canto ----------
   Os pontos e o rótulo andam juntos à direita. O recuo de baixo NÃO é
   estético: medido, os pontos ocupavam 663..985 na horizontal e 830..874
   na vertical, enquanto o "Role" ocupa 681..744 e 854..900 — 63 por 20
   pixels de alvo tocável de 44px montado em cima de um link. A legenda
   sobe acima da faixa do "Role" e os dois deixam de se cruzar. */
.hero--d .hd__leg{
  position:absolute;z-index:2;
  left:auto;right:var(--gut);bottom:clamp(54px,5.4vw,72px);
  width:auto;margin:0;gap:14px;
}
/* O rótulo subiu junto com os pontos e caiu sobre uma faixa mais clara
   da foto: o fundo atrás dele passou de 0,022 para 0,073 de luminância e
   a razão despencou de 6,11 para 4,12:1 — reprovado. Não dá para escurecer
   o véu só ali sem estragar a janela da foto, então quem sobe é o texto:
   .62 de alfa dava 4,12; .78 dá 5,52. */
.hero--d .hd__leg .mono{margin-left:0;color:rgba(245,243,239,.78)}

/* ---------- empilhado ----------
   Com o texto ocupando a largura toda, um véu lateral não protege
   nada: ele vira vertical. Fica mais claro no topo, que é onde a foto
   tem sua única chance de ser vista, e fecha para baixo. */
@media (max-width:1024px){
  /* Empilhado o texto atravessa a largura toda, então não há como o véu
     abrir de lado. A saída é abrir por CIMA: a foto ganha uma janela no
     topo, onde ela aparece de verdade, e o texto desce para baixo dela,
     sobre preto quase pleno.

     As paradas são em px, não em porcentagem: a altura da hero aqui
     depende do conteúdo, e uma parada percentual cairia num lugar
     diferente em cada aparelho. */
  /* Véu CHAPADO, cobrindo a foto inteira em vez de abrir uma janela no
     topo. O nível não é gosto: a manchete em #C93631 tem luminância 0,15
     e dá 4,01:1 até contra preto puro. Como texto grande pede 3:1, o
     fundo atrás dela não pode passar de 0,017 — e sobre o pior ladrilho
     medido das cinco fotos (0,968) isso exige α ≥ 0,86.

     Cuidado com a conta: aproximar a queda por (1−α)^2,4 IGNORA o
     deslocamento de 0,055 da curva sRGB e subestima o resultado. Por
     essa aproximação .84 pareceria bastar; refeito exato, .84 deixa a
     manchete em 2,84:1 e reprova. Vai .88, que dá 3,21:1.

     Uniforme significa que o piso vale em qualquer ponto: o texto pode
     cair em cima de qualquer parte de qualquer quadro sem que ninguém
     precise conferir de novo. */
  .hero--d .hd__fig::after{background:rgba(0,0,0,.88)}
  /* a janela da foto: o texto começa abaixo dela */
  .hero--d .hero__in{
    padding-top:calc(var(--nav-h) + clamp(34px,9vh,76px));
    padding-bottom:clamp(104px,20vw,132px);
  }
  .hero--d .hd__leg{
    left:var(--gut);right:var(--gut);justify-content:center;
    bottom:clamp(52px,11vw,66px);
  }
  .hero--d .hd__leg .mono{margin-left:0}
}
@media (max-width:560px){
  /* o rótulo sozinho já ocupa a linha: os pontos bastam */
  .hero--d .hd__leg .mono{display:none}
}

/* ---------- empilhado: a foto sobe ----------
   Medido em 375x915: a imagem escalada por `cover` dá exatamente 915px de
   altura para um contêiner de 915px. Folga vertical ZERO — toda a sobra
   (997px) é horizontal. Quer dizer que o eixo Y do object-position não
   fazia nada aqui: a altura inteira da foto caía na altura inteira da
   hero, e os rostos de um retrato de grupo pousavam por volta de 35-45%,
   exatamente onde o texto começa (299px, 33% da hero).

   Então a folga precisa ser criada. Ela nasce no QUADRO, não na imagem:
   o .carro__f sobe e fica mais alto que o contêiner, a imagem continua
   preenchendo por cover, e o overflow:hidden do .hd__q corta em cima.
   O resultado é que a janela visível passa a mostrar a parte de baixo do
   retrato — os rostos sobem para dentro da faixa livre do topo.

   Mexer no transform da imagem seria pior: o ken burns já anima scale ali
   em quatro regras diferentes, e somar translate a todas elas seria
   frágil de manter. */
@media (max-width:1024px){
  .hero--d .hd__q .carro__f{top:var(--sobe-foto,-22%)}

  /* Regulagem por foto, porque o assunto não mora na mesma altura em
     todas. Verificado quadro a quadro em 375: com -22% uniforme, o
     palestrante do g5 perdia a testa — ele já estava alto no
     enquadramento original, e é por isso que o --pos dele era o mais
     baixo da série (30%, contra 42% do primeiro). */
  .hero--d .hd__q .carro__f:nth-child(4){--sobe-foto:-8%}
}

/* ---------- Titan Pneus ----------
   Chegou como JPEG de fundo BRANCO CHAPADO, não PNG transparente. Nos
   outros quatro o prato #F5F3EF aparece ATRAVÉS da transparência; aqui a
   imagem já traz o próprio branco puro, e um prato off-white deixaria
   uma emenda visível na borda do padding. Por isso o prato dele é #FFF.

   O arquivo original era 200x200 com a marca ocupando só 22% da altura
   (44px de tinta e 78px de branco em cima e embaixo, medidos). Recortado
   para 200x60, senão o card mostraria uma caixa branca com um logo fino
   perdido no meio. */
img[src*="titan-pneus"]{
  background:#FFFFFF;
  border-radius:8px;
  padding:clamp(10px,1vw,16px) clamp(14px,1.4vw,22px);
  box-sizing:border-box;
  box-shadow:0 0 0 1px rgba(245,243,239,.14);
}

/* ════════════════════════════════════════════════════════════
   HERO NA COMPOSIÇÃO DA HOME INSTITUCIONAL
   ------------------------------------------------------------
   Lida a home da LeaderX (Site/HOME.html), a hero dela é:

     .hero            100vh, overflow hidden
     .hero-slides     5 fotos em crossfade de 1,4s
     .hero-grain      grão em `overlay`, opacidade .05
     .hero-vignette   radial que fecha os cantos
     .hero-content    absoluto à esquerda, centrado na vertical
     .hero-aside      absoluto à direita, centrado: rótulo/numeral/desc
     .slider-controls pé à esquerda: contador, traços, rótulo
     .scroll-v        pé à direita: fio vertical + palavra na vertical

   Tudo isso passa para cá. O que NÃO passa é a paleta: lá o acento é
   dourado (#BFA15F), aqui é o vermelho da edição. E as famílias
   tipográficas ficam as do Talks — trocar Inter Tight por DM Sans não
   seria trocar paleta, seria trocar o design system inteiro.

   ------------------------------------------------------------
   UMA COISA NÃO PODE SER COPIADA E VALE DIZER POR QUÊ

   O véu da home institucional é
     linear-gradient(to right, rgba(8,8,8,.88) 40%, rgba(8,8,8,.25) 100%)
   ou seja, ele segura .88 só até 40% da largura e depois abre.

   Lá isso funciona porque a manchete é branca. Aqui a manchete tem uma
   linha em #C93631, que rende 4,06:1 até contra preto PURO — como texto
   grande pede 3:1, o fundo atrás dela não pode passar de 0,017 de
   luminância. Medido: em 54% da largura (onde a coluna de texto termina)
   o véu institucional entrega .733, e ali a manchete cai para 1,91:1.

   Então a FORMA é a mesma — escuro à esquerda, abrindo para a direita,
   mais um gradiente subindo do pé — mas o platô se estende até depois de
   onde o texto acaba. A direita abre para .25, que é o valor da
   institucional e o que dá a ela o ar de foto viva.
   ════════════════════════════════════════════════════════════ */

.hero--d{min-height:100svh;display:block}

/* ---------- as duas camadas entre a foto e o texto ---------- */
.hero--d .hero__grao{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;background-image:var(--grain);
}
.hero--d .hero__vinheta{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 32%,transparent 54%,rgba(8,8,8,.55) 100%);
}

/* ---------- o véu, com a forma da institucional e o platô do Talks ---------- */
.hero--d .hd__fig::after{
  background:
    linear-gradient(to right,
      rgba(8,8,8,.94) 0%,
      rgba(8,8,8,.90) 42%,
      rgba(8,8,8,.87) 57%,
      rgba(8,8,8,.46) 78%,
      rgba(8,8,8,.25) 100%),
    linear-gradient(to top,
      rgba(8,8,8,.70) 0%,
      rgba(8,8,8,.10) 46%,
      transparent 60%);
}

/* ---------- o conteúdo, centrado na vertical ---------- */
.hero--d .hero__in{
  position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);
  z-index:2;padding-block:0;align-items:center;
}
.hero--d .hd__txt{grid-column:1/8;max-width:720px}

/* ---------- tema, data e horário: o que estava discreto ganha corpo ---------- */
.hero--d .hero__ficha{
  display:flex;flex-direction:column;gap:clamp(10px,1.1vw,14px);
  margin-top:clamp(16px,1.8vw,26px);
  padding-left:clamp(14px,1.2vw,18px);
  border-left:2px solid var(--blue-500);
}
.hero--d .hero__tema{
  display:block;max-width:34ch;margin:0;padding:0;border:0;text-align:left;
  font-size:clamp(19px,1.55vw,25px);line-height:1.32;font-weight:500;
  color:var(--gray-900);letter-spacing:-.012em;
}
.hero--d .hero__tema-k{
  display:block;font-size:var(--fs-micro);letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-l);margin:0 0 7px;font-style:normal;
}
.hero--d .hero__quando{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:0;
  font-size:var(--fs-body);color:rgba(245,243,239,.82);
}
.hero--d .hero__quando b{
  font-size:clamp(20px,1.7vw,28px);font-weight:500;letter-spacing:.02em;
  color:var(--gray-900);
}

/* ---------- a menção aos painelistas ----------
   Mesma posição e mesma anatomia do bloco de numeral da institucional.
   Os colchetes de canto são os .lx-corner dela, em vermelho. */
.hero--d .hero__lado{
  grid-column:10/13;justify-self:end;align-self:center;text-align:right;
}
/* O prato NAO existe na institucional, e a razao de existir aqui e a
   fotografia, nao o gosto: as fotos dela sao escuras no ponto onde o
   bloco lateral fica; as nossas tem um painel de LED aceso exatamente
   ali. Medido nas cinco fotos, o fundo atras deste bloco chega a 0,387
   de luminancia, e os quatro textos caiam para 1,04 a 2,17:1.

   .78 de preto derruba isso para 0,025 e devolve 6,05:1 ao rotulo e
   3,44:1 ao sufixo vermelho. A foto continua aparecendo em volta. */
.hero--d .hero__lado a{
  position:relative;display:flex;flex-direction:column;align-items:flex-end;
  gap:7px;padding:18px 24px;text-decoration:none;
  background:rgba(8,8,8,.78);
  transition:transform .35s var(--e),background .35s var(--e2);
}
.hero--d .hero__lado a:hover{background:rgba(8,8,8,.86)}
.hero--d .hero__lado a::before,
.hero--d .hero__lado a::after{
  content:'';position:absolute;width:10px;height:10px;
  border-color:rgba(201,54,49,.55);border-style:solid;pointer-events:none;
}
.hero--d .hero__lado a::before{top:0;left:0;border-width:1px 0 0 1px}
.hero--d .hero__lado a::after{bottom:0;right:0;border-width:0 1px 1px 0}
.hero--d .hero__lado a:hover{transform:translateY(-2px)}
.hero--d .hero__lado a:focus-visible{outline:2px solid var(--blue-500);outline-offset:4px}
.hero__lado-k{
  font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(245,243,239,.62);
}
.hero__lado-n{
  display:inline-flex;align-items:baseline;gap:9px;
  font-size:clamp(44px,4.6vw,64px);font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--gray-900);
}
/* O sufixo sobe para 24px+ de proposito. Abaixo disso ele conta como
   texto NORMAL e o vermelho precisaria de 4,5:1, o que sobre foto exigiria
   um prato quase opaco. Como texto grande o limite e 3:1 — e a proporcao
   fica igual a da institucional, que poe o sufixo em 28px ao lado de um
   numeral de 46px. */
.hero__lado-n i{
  font-style:normal;font-size:clamp(20px,1.9vw,28px);font-weight:500;
  letter-spacing:0;color:var(--blue-600);
}
.hero__lado-d{
  font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,243,239,.62);border-bottom:1px solid rgba(245,243,239,.24);
  padding-bottom:3px;transition:color .3s var(--e2),border-color .3s var(--e2);
}
.hero--d .hero__lado a:hover .hero__lado-d{
  color:var(--gray-900);border-color:var(--blue-500);
}

/* ---------- a barra de controles vai para o pé à esquerda ---------- */
.hero--d .hd__leg{
  position:absolute;z-index:3;
  left:var(--gut);right:auto;bottom:clamp(26px,3vw,40px);
  width:auto;margin:0;display:flex;align-items:center;gap:clamp(14px,1.6vw,20px);
}
.hd__conta{
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;
  color:var(--blue-600);font-variant-numeric:tabular-nums;
}
.hero--d .hd__leg .mono{
  margin-left:0;font-size:var(--fs-micro);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(245,243,239,.55);
}

/* o traço ativo enche em 6,5s, que é o DWELL do carrossel no script */
.hero--d .carro__b.is-on::before{
  background:rgba(245,243,239,.22);
}
.hero--d .carro__b.is-on i{
  transform:translateY(-50%) scaleX(1);
  transition:none;
  animation:encheTraco 6.5s linear forwards;
}
@keyframes encheTraco{from{transform:translateY(-50%) scaleX(0)}to{transform:translateY(-50%) scaleX(1)}}

/* ---------- o indicador de rolagem fica vertical, no pé à direita ---------- */
.hero--d .hero__scroll{
  position:absolute;z-index:3;
  right:var(--gut);bottom:clamp(26px,3vw,40px);left:auto;
  flex-direction:column;align-items:center;gap:12px;
  min-height:0;padding:0;
}
.hero--d .hero__scroll svg{display:none}
.hero--d .hero__scroll span{
  writing-mode:vertical-rl;font-size:var(--fs-micro);
  letter-spacing:.22em;text-transform:uppercase;color:rgba(245,243,239,.55);
}
.hero__scroll-l{
  display:block;width:1px;height:54px;background:rgba(245,243,239,.24);
  position:relative;overflow:hidden;
}
.hero__scroll-l::after{
  content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--blue-600);animation:desceFio 2.2s ease 1s infinite;
}
@keyframes desceFio{0%{top:-100%}100%{top:100%}}

/* ---------- empilhado ----------
   A institucional centra o conteúdo, esconde o bloco lateral e o
   indicador de rolagem abaixo de 900px. Aqui a lateral não some: ela é a
   menção aos painelistas, que o cliente pediu explicitamente na hero.
   Ela desce para baixo das ações e vira uma linha. */
@media (max-width:1024px){
  /* O veu CHAPADO do empilhado precisa ser reafirmado aqui: a regra de
     desktop acima nao esta em media query e vem depois na folha, entao
     sem isto o gradiente `to right` valeria tambem em 375 — e ali o texto
     atravessa a largura toda, onde esse gradiente abre para .25. Foi
     exatamente o que aconteceu na primeira tentativa. */
  .hero--d .hd__fig::after{background:rgba(0,0,0,.88)}
  .hero--d{min-height:0}
  /* position:relative, NAO static. z-index so vale em elemento posicionado:
     com static o z-index:2 daqui era ignorado, a figura (absolute, z-index 0)
     passava a pintar por cima e a manchete sumia atras da foto. Sobreviviam
     apenas os filhos que tinham transform proprio, porque transform cria
     contexto de empilhamento — era por isso que chapeu e botoes apareciam
     e a manchete nao. */
  .hero--d .hero__in{
    position:relative;transform:none;
    padding-top:calc(var(--nav-h) + clamp(34px,9vh,76px));
    padding-bottom:clamp(104px,20vw,132px);
  }
  .hero--d .hd__txt{grid-column:1/13;max-width:none}
  .hero--d .hero__ficha{
    align-items:center;text-align:center;
    border-left:0;border-top:2px solid var(--blue-500);
    padding-left:0;padding-top:clamp(14px,3vw,18px);
  }
  .hero--d .hero__tema{text-align:center;max-width:100%}
  .hero--d .hero__quando{justify-content:center}
  /* order:2 nao e enfeite: .hd__txt ja tinha order:1 no bloco antigo de
     1024, e sem um order aqui a lateral (padrao 0) subia para ANTES do
     texto — o bloco dos painelistas aparecia acima da propria manchete. */
  .hero--d .hero__lado{
    grid-column:1/13;order:2;justify-self:center;align-self:auto;text-align:center;
    margin-top:clamp(20px,4vw,28px);
  }
  .hero--d .hero__lado a{align-items:center}
  .hero--d .hero__lado-n{font-size:clamp(38px,9vw,50px)}
  /* Os dois estavam CENTRADOS no pe: a barra ocupando 34..719 e o "Role"
     em 368..385, ou seja, o indicador nascia dentro da barra. Com o rotulo
     "Edicoes anteriores" fora, a barra virou so contador + tracos e cabe a
     esquerda — cada um no seu canto, igual ao desktop. */
  .hero--d .hd__leg{left:var(--gut);right:auto;justify-content:flex-start}
  .hero--d .hero__scroll{right:var(--gut);left:auto;transform:none}
}
@media (max-width:560px){
  .hero--d .hd__leg .mono{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hero--d .carro__b.is-on i{animation:none;transform:translateY(-50%) scaleX(1)}
  .hero__scroll-l::after{animation:none;top:0}
  .hero--d .hero__lado a{transition:none}
  .hero--d .hero__lado a:hover{transform:none}
}

/* ════════════════════════════════════════════════════════════
   O TEMA VIRA A MANCHETE
   ------------------------------------------------------------
   Saiu "Todo mundo atravessou o mesmo ano / Nem todo mundo aprendeu o
   mesmo" e o tema ocupou o lugar. Ele não podia continuar no corpo de
   19-25px: o que era um dado de apoio virou a primeira coisa que a
   página diz, e precisa do peso de manchete.

   Fica um degrau abaixo da manchete antiga de propósito. Aquela tinha
   quatro palavras curtas; esta tem sete palavras e 46 caracteres — no
   mesmo corpo ela ocuparia quatro linhas e a hero viraria um paredão.
   ════════════════════════════════════════════════════════════ */
.hero--d .hero__tema{
  display:block;margin:0;padding:0;border:0;text-align:left;
  max-width:15ch;
  font-size:clamp(32px,4.2vw,64px);
  line-height:1.05;font-weight:600;letter-spacing:-.028em;
  color:var(--gray-900);
}
.hero--d .hero__tema-k{
  display:block;font-size:var(--fs-micro);letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-l);
  margin:0 0 clamp(10px,1vw,14px);font-style:normal;
}
.hero--d .hero__ficha{
  margin-top:clamp(14px,1.6vw,22px);
  gap:clamp(14px,1.5vw,20px);
}
.hero--d .hero__quando{
  font-size:var(--fs-lead);color:rgba(245,243,239,.86);
}
.hero--d .hero__quando b{
  font-size:clamp(21px,1.8vw,30px);
}
@media (max-width:1024px){
  .hero--d .hero__tema{max-width:100%;font-size:clamp(29px,7.4vw,44px)}
}
/* ════════════════════════════════════════════════════════════
   TIPOGRAFIA DA HOME INSTITUCIONAL
   ------------------------------------------------------------
   Aprovado no teste e promovido a produção: a página passa a usar a
   família, os tamanhos e a escala da home da LeaderX.

   Nada de layout muda aqui. Só os tokens — e é justamente por o sistema
   do Talks ser todo dirigido por token que a troca cabe num arquivo só,
   sem encostar em nenhum seletor de componente.

   ------------------------------------------------------------
   O QUE A INSTITUCIONAL USA (lido de Site/HOME.html)

     --serif / --sans   'DM Sans'      (lá as duas são a mesma família)
     --mono             'DM Mono'
     body               weight 300, line-height 1.75

     --text-xs/sm  14      --text-base  16     --text-lg  18
     --text-xl     20      --text-2xl   28     --text-3xl 40
     --text-display 46
     --text-h2   clamp(28px, 3.5vw, 48px)
     --text-h1   clamp(40px, 5.5vw, 72px)

   ------------------------------------------------------------
   O QUE ISSO MUDA NA PRÁTICA, E VALE VOCÊ OLHAR COM ATENÇÃO

   1. A ESCALA ENCOLHE NO TOPO. O maior degrau do Talks é
      clamp(44px,6.3vw,104px); o da institucional é clamp(40,5.5vw,72).
      Em 1440 isso é 90px contra 72px — a manchete perde quase 20% de
      corpo. A hero fica mais contida e menos gritada.

   2. O CORPO DE LEITURA CAI DE 17px PARA 16px e o peso de 400 para 300.
      A institucional é um site de leitura curta e muito respiro; o Talks
      tem seções longas (a agenda tem 187 palavras). Peso 300 em 16px
      sobre fundo escuro é bem mais frágil do que 400 em 17px — isso não
      é medível por contraste WCAG, que ignora peso, mas é sentido.

   3. A MICROTIPOGRAFIA SOBE de 13px para 14px. Aqui o teste MELHORA o
      Talks: 14px é mais confortável que os 13 do piso atual.

   4. A DISTÂNCIA ENTRE DEGRAUS DIMINUI. O Talks tem sete degraus de
      display; a institucional tem menos e mais próximos entre si. A
      página perde um pouco da tensão entre macro e micro que hoje separa
      os títulos do corpo.
   ════════════════════════════════════════════════════════════ */

:root{
  /* ---------- famílias ---------- */
  --f:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fm:'DM Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* ---------- microtipografia ----------
     text-xs / text-sm / text-base da institucional */
  --fs-micro:14px;
  --fs-micro-lg:14px;
  --fs-small:16px;
  --fs-body:16px;
  --fs-ui:14px;      /* os botões dela usam text-sm */
  --fs-ui-lg:18px;   /* text-lg */
  --fs-ui-mono:20px; /* text-xl */

  /* ---------- display ----------
     Os sete degraus do Talks passam a sair dos degraus dela. Onde ela não
     tem equivalente, o mais próximo por função. */
  --fs-d1:clamp(40px,5.5vw,72px);   /* text-h1 */
  --fs-d2:clamp(40px,5.5vw,72px);   /* text-h1 */
  --fs-d3:clamp(28px,3.5vw,48px);   /* text-h2 */
  --fs-h2:clamp(28px,3.5vw,48px);   /* text-h2 */
  --fs-h3:40px;                     /* text-3xl */
  --fs-h4:28px;                     /* text-2xl */
  --fs-h5:20px;                     /* text-xl */
  --fs-lead:18px;                   /* text-lg */
  --fs-quote:46px;                  /* text-display */
  --fs-data:28px;                   /* text-2xl */
}

/* ---------- corpo: peso e entrelinha dela ---------- */
body{font-weight:300;line-height:1.75}

/* A institucional aperta a escala abaixo de 1024 — mesmo gesto aqui. */
/* (o bloco de reducao fixa saiu: os clamps abaixo ja fazem isso) */

/* ---------- o que NÃO sai de token ----------
   A folha do Talks tem cerca de vinte font-size com clamp escrito à mão,
   fora do sistema de tokens — e a manchete da hero é um deles, em quatro
   pontos diferentes da folha. Sem as linhas abaixo, o teste deixaria de
   fora justamente a maior peça de tipografia da página: ela continuaria
   em clamp(42px,6vw,87px), que dá 78px onde a institucional daria 72.

   Estas duas regras trazem a manchete para o --text-h1 dela. O resto dos
   clamps manuais (numerais fantasma das seções, citações, títulos de
   blocos) segue nas proporções do Talks — então este teste mostra a
   FAMÍLIA e a ESCALA DE BASE dela, não uma conversão completa. */
.hero--d .hero__h1,
.ed-outubro .hero__h1{font-size:clamp(40px,5.5vw,72px)}
@media (max-width:1024px){
  .hero--d .hero__h1,
  .ed-outubro .hero__h1{font-size:clamp(34px,7vw,48px)}
}

/* ════════════════════════════════════════════════════════════
   EMPILHADO: O CONTEÚDO PREFERE O CENTRO
   ------------------------------------------------------------
   Regra da casa para celular e tablet. A página já chegava quase toda
   centrada aqui — varri as seções em 375 e sobraram sete elementos à
   esquerda, todos por regra própria que vencia a do bloco empilhado.

   São estes, e nada além: o rótulo e o texto do tema na hero, as chaves
   de grupo em "Quem viabiliza esta edição", e as legendas das fotos do
   cronograma e dos momentos. Mexer só no que estava fora evita mudar
   por engano o que já estava certo.
   ════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  /* hero: o tema é a manchete agora, e manchete centrada pede o rótulo
     centrado junto — senão o bloco fica com dois eixos */
  .hero--d .hero__tema,
  .hero--d .hero__tema-k{text-align:center}

  /* chaves de grupo: "Patrocinadores", "Apoiadores" */
  .apoio__k{text-align:center}

  /* legendas de foto: cronograma e momentos */
  .tl__fotos figcaption,
  .bleed__cap{text-align:center}
  .tl__fotos figcaption b,
  .tl__fotos figcaption .mono,
  .bleed__cap .mono{display:block;text-align:center}
}

/* ════════════════════════════════════════════════════════════
   "EM BREVE" CENTRADO NO CARD
   ------------------------------------------------------------
   O contêiner ja era `display:grid; place-items:center`, mas o aviso
   nao obedecia: o ::after e `position:absolute`, e elemento absoluto
   sem `inset` ignora o alinhamento do grid e cai na posicao estatica —
   canto superior esquerdo. Era isso que se via.

   A correcao nao e mexer no alinhamento do pai: e dar area ao proprio
   aviso. Com inset:0 ele passa a ocupar o card inteiro e centra o texto
   por conta propria, sem depender do grid de fora.

   E centrar assim, e nao com translate(-50%,-50%), de proposito: o
   ::after ja anima transform na entrada (sobe 12px e cresce de .96).
   Um translate de centralizacao teria de ser repetido nos dois estados
   da animacao, e bastaria esquecer um para o aviso saltar de lugar.
   ════════════════════════════════════════════════════════════ */
.p--vago .p__m::after{
  inset:0;
  display:grid;place-items:center;
  text-align:center;padding:0 12px;
  font-size:20px;          /* era 14px — os 6px que faltavam */
}

/* ════════════════════════════════════════════════════════════
   O FIO VERMELHO SAI · A DIFERENÇA VIRA TIPOGRÁFICA
   ------------------------------------------------------------
   O divisor existia para separar duas linhas que ninguém separava
   sozinhas: "LeaderX Talks · Capítulo São Paulo" e "Tema desta edição"
   tinham a MESMA voz — mono, caixa alta, dourada, mesmo corpo, mesma
   entrelinha. Dois rótulos idênticos empilhados só se distinguem com uma
   régua no meio porque nada mais os distingue. O fio era o remendo.

   O que separa de verdade é o papel de cada um:

     chapéu  → onde e de quem é o encontro. Contexto. Pode ser discreto.
     tema    → o que esta edição é. Importa. Fica com o ouro.

   Então o chapéu perde o dourado e vira off-white contido, e o ouro
   passa a aparecer UMA vez na hero — em cima do que interessa. Duas
   vozes diferentes não precisam de régua entre elas.

   No lugar do fio de largura total entra o `.divider` que a própria home
   institucional usa: 60px em degradê, que pertence ao rótulo em vez de
   atravessar o bloco inteiro. Ele marca o começo do tema; não corta a
   hero em duas.
   ════════════════════════════════════════════════════════════ */

/* o chapéu passa a ser contexto, não acento */
.hero--d .hero__k{
  color:rgba(245,243,239,.72);
  letter-spacing:.2em;
}

/* fora o fio que atravessava o bloco, nas duas orientações */
.hero--d .hero__ficha{
  border-left:0;padding-left:0;
  margin-top:clamp(22px,2.6vw,38px);
}

/* o traço curto, do rótulo do tema — não do bloco */
.hero--d .hero__tema-k{position:relative;padding-top:clamp(16px,1.7vw,22px)}
.hero--d .hero__tema-k::before{
  content:'';position:absolute;top:0;left:0;
  width:60px;height:1px;
  background:linear-gradient(90deg,var(--blue-500),transparent);
}

@media (max-width:1024px){
  .hero--d .hero__ficha{border-top:0;padding-top:0}
  /* centrado, o traço nasce do meio para os dois lados */
  .hero--d .hero__tema-k::before{
    left:50%;transform:translateX(-50%);width:72px;
    background:linear-gradient(90deg,transparent,var(--blue-500),transparent);
  }
}

/* ---------- o cadeado sobe para cima da frase ----------
   Empilhado, a frase quebra em duas linhas e o cadeado ficava ao lado da
   PRIMEIRA — alinhado a um pedaco do texto, nao ao conjunto. Lido assim,
   ele parece pertencer so aquela linha.

   Em coluna ele volta a valer para a frase inteira, e o eixo bate com o
   resto do bloco, que ja e centrado nesta largura. */
@media (max-width:1024px){
  .hero--d .hero__tag{
    flex-direction:column;align-items:center;gap:7px;
    text-align:center;padding:11px 16px;
  }
  .hero--d .hero__tag svg{margin-top:0}
}

/* ---------- "Role" no canto onde o véu abre ----------
   Medido: no pé à direita o fundo chega a 0,045 de luminância (é ali que
   o degradê abre para .25 e a foto aparece), e o texto em .55 de alfa
   dava 4,32:1 — abaixo dos 4,5 de texto normal. Subir o alfa para .72
   leva a 6,19:1 sem tirar o ar de indicação discreta. */
.hero--d .hero__scroll span{color:rgba(245,243,239,.72)}

/* ════════════════════════════════════════════════════════════
   A HERO CABE NA TELA DO APARELHO
   ------------------------------------------------------------
   Medido em 375x812: a hero tinha 963px — 151 a mais que a tela. Quem
   abria precisava rolar para ver o botao, que e o ponto inteiro dela.

   O corte foi feito onde havia folga, e NAO nos alvos de toque: os dois
   botoes seguem com a altura que tinham, porque encolher alvo de dedo
   para ganhar pixel e trocar um problema visivel por um invisivel.

     topo         161 -> 88    (a faixa reservada era o vazio de antes)
     tema          29 -> 25px  (de quatro linhas para tres)
     bloco lateral menor e mais perto
     pe           104 -> 76

   min-height:100svh e nao 100vh de proposito: no celular a barra do
   navegador entra e sai, e vh mede a tela COM a barra recolhida — a
   hero ficaria maior que a area util justamente quando a barra aparece.
   ════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .hero--d{min-height:100svh}

  .hero--d .hero__in{
    padding-top:calc(var(--nav-h) + clamp(14px,3vh,34px));
    padding-bottom:clamp(64px,12vw,92px);
  }
  .hero--d .hero__ficha{
    margin-top:clamp(14px,2.4vh,22px);
    gap:clamp(8px,1.4vh,14px);
  }
  .hero--d .hero__tema{font-size:clamp(25px,6.4vw,40px);line-height:1.08}
  .hero--d .hero__tema-k{padding-top:clamp(12px,2vh,18px);margin-bottom:8px}
  .hero--d .hero__quando b{font-size:clamp(19px,5.2vw,26px)}
  .hero--d .hd__acao{margin-top:clamp(16px,2.6vh,26px)}
  .hero--d .hero__lado{margin-top:clamp(12px,2vh,20px)}
  .hero--d .hero__lado a{padding:12px 18px;gap:4px}
  .hero--d .hero__lado-n{font-size:clamp(32px,8vw,44px)}
  .hero--d .hero__lado-n i{font-size:clamp(18px,4.4vw,24px)}
}

/* ════════════════════════════════════════════════════════════
   O TRAÇO PASSA A PERTENCER AO CHAPÉU
   ------------------------------------------------------------
   Ele estava preso ao rótulo do tema, com largura fixa de 60px e um
   respiro grande acima — lia como um traço solto no meio do bloco. Agora
   nasce colado embaixo de "LeaderX Talks · Capítulo São Paulo" e tem a
   largura DELE.

   Para acompanhar o texto, o chapéu precisa de width:fit-content: como
   parágrafo ele ocupava a linha inteira, e um ::after de 100% seguiria a
   caixa, não as palavras. Com a caixa encolhida no texto, os dois passam
   a medir a mesma coisa — inclusive quando o texto quebra em duas linhas
   no celular, caso em que o traço acompanha o bloco quebrado.

   Sai também o padding que o rótulo do tema carregava para o traço
   antigo: com ele fora, a hero ganha os últimos pixels que faltavam para
   caber na tela.
   ════════════════════════════════════════════════════════════ */
.hero--d .hero__k{
  position:relative;width:fit-content;
  padding-bottom:clamp(9px,1vw,13px);
}
.hero--d .hero__k::after{
  content:'';position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  background:linear-gradient(90deg,var(--blue-500),transparent);
}

/* o traço antigo do rótulo do tema sai, e o respiro dele junto */
.hero--d .hero__tema-k{padding-top:0}
.hero--d .hero__tema-k::before{content:none}

@media (max-width:1024px){
  .hero--d .hero__k{margin-inline:auto}
  .hero--d .hero__k::after{
    background:linear-gradient(90deg,transparent,var(--blue-500),transparent);
  }
  .hero--d .hero__ficha{margin-top:clamp(10px,1.8vh,18px)}
  .hero--d .hero__tema-k{margin-bottom:6px}
}

/* ════════════════════════════════════════════════════════════
   CORREÇÃO DA ESCALA · DEGRAUS DO MEIO VOLTAM A ENCOLHER
   ------------------------------------------------------------
   Ao trazer a escala da institucional eu importei os degraus do meio
   como VALORES FIXOS (h3 40px, h4 28px, citação 46px), enquanto o h2
   continuou em clamp. Valor fixo não encolhe; clamp encolhe. Medido em
   375: o h2 resolvia para 28px e o h3 continuava em 36px.

   Ou seja: os h3 da página ficavam MAIORES que os h2 acima deles no
   celular — a hierarquia de títulos invertida, e não por gosto, por
   aritmética. A citação em 42px passava dos dois.

   Os tetos continuam sendo os da institucional (40 / 28 / 46 / 28 / 18);
   o que muda é que agora eles descem junto com o h2. Conferido nas duas
   pontas:  375 → h2 28 > h3 23 > h4 19    1425 → h2 48 > h3 40 > h4 28
   ════════════════════════════════════════════════════════════ */
:root{
  --fs-h3:clamp(23px,2.85vw,40px);
  --fs-h4:clamp(19px,2vw,28px);
  --fs-quote:clamp(26px,3.2vw,46px);
  --fs-data:clamp(19px,2vw,28px);
  --fs-lead:clamp(16px,1.26vw,18px);
}

/* o único corpo abaixo do piso de 14px da página, herdado de uma regra
   antiga do chapéu da hero */
.hero--d .hero__k{font-size:14px}

/* ---------- "Role" é coisa de desktop ----------
   No empilhado ele disputava o pé com a barra do carrossel e não
   informava nada que o dedo já não soubesse: em tela de toque a rolagem
   é o gesto padrão. A institucional faz o mesmo — esconde o indicador
   abaixo de 900px. */
@media (max-width:1024px){
  .hero--d .hero__scroll{display:none}
}

/* ════════════════════════════════════════════════════════════
   DEGRAUS QUASE IGUAIS · CADA ÓRFÃ VOLTA PARA A ESCADA
   ------------------------------------------------------------
   Medidos em 1425, cinco pares abaixo de 6% de diferença — perto demais
   para o olho ler como degrau, perto demais para ser intencional:

     64 → 60,5 (5%)   numeral do bloco lateral vs. título da página
     48 → 46   (4%)   h2 vs. citação
     28 → 27,4 (2%)   h4 vs. "CEOs"
     27,4 → 25,9 (5%) "CEOs" vs. data da hero
     20,4 → 20  (2%)  texto do presidente vs. nomes/perguntas

   Cada uma vinha de um clamp escrito à mão, com um vw diferente dos
   demais. Agora todas apontam para degraus que já existiam.

   Duas ressalvas que não são detalhe:

   1. "CEOs" ganha piso de 24px em vez de herdar o h4 puro. Abaixo de
      24px ele deixa de ser texto GRANDE e o vermelho passaria a precisar
      de 4,5:1 em vez de 3:1 — sobre foto, isso exigiria prato quase
      opaco. O degrau do desktop é o mesmo; muda só o piso.

   2. Tudo aqui é escopado em min-width:1025px. As regras do empilhado
      foram calibradas para a hero caber na tela do aparelho, e uma regra
      global escrita depois venceria todas elas por ordem de cascata.
   ════════════════════════════════════════════════════════════ */

/* a citação passa a usar o degrau do h3 — vale em qualquer largura */
:root{--fs-quote:var(--fs-h3)}

/* 20,4 -> 20: o texto do presidente entra no degrau dos nomes */
.voice__rest{font-size:clamp(17px,1.4vw,20px)}

@media (min-width:1025px){
  /* 64 -> 48: o numeral desce para o degrau do h2 e para de disputar
     tamanho com o título da página, que agora fica acima dele */
  .hero--d .hero__lado-n{font-size:var(--fs-h2)}

  /* O título passa a ser EXATAMENTE a manchete da institucional:
     .hero-headline { font-size: var(--text-h1); font-weight: 400;
                      line-height: 1.04; letter-spacing: -.03em }
     com --text-h1: clamp(40px, 5.5vw, 72px).

     O peso era a diferença que mais saltava: a manchete deles é regular,
     a nossa estava em semibold. Somado a 12px a menos de corpo, viravam
     dois objetos diferentes.

     Em 72px ele passa a empatar com "Não é palestra. É mesa de decisão."
     no topo da escala — o que resolve de quebra o título da página não
     ser o maior texto dela, que era o item 1 da avaliação. */
  .hero--d .hero__tema{
    font-size:clamp(40px,5.5vw,72px);
    font-weight:400;
    line-height:1.04;
    letter-spacing:-.03em;
  }

  /* 27,4 -> 28, com o piso de 24px explicado acima */
  .hero--d .hero__lado-n i{font-size:clamp(24px,2vw,28px)}

  /* 25,9 -> 28: a data no mesmo degrau */
  .hero--d .hero__quando b{font-size:var(--fs-h4)}
}

/* ---------- o rótulo entra no texto ----------
   As pílulas "Formato exclusivo / Dinâmica / Tema da edição / Jantar
   incluso" saíram: eram quatro objetos flutuando ao lado dos blocos,
   anunciando o que o próprio bloco já dizia. Agora abrem o parágrafo.

   O vermelho aqui é --blue-600 e NÃO --blue-500. O 500 (#C93631) rende
   4,06:1 sobre o fundo desta seção — passa como título grande, reprova
   como texto normal, que é o que este lead é. O 600 (#FA0D18) dá 4,76:1. */
.pillar__lead{
  color:var(--blue-600);
  font-weight:600;
  letter-spacing:-.005em;
}

/* ════════════════════════════════════════════════════════════
   PISO DE 15px
   ------------------------------------------------------------
   Nada escrito na página desce abaixo disso. Os três degraus miúdos
   sobem juntos: eram 14px depois da escala institucional (e 13 no chapéu
   da hero, herdado de uma regra antiga).

   Vale dizer o custo: subir o piso empurra rótulos mono, que são
   espaçados em caixa alta e ocupam bem mais largura que o corpo normal.
   Onde eles quebrarem linha, é aqui que se ajusta o letter-spacing —
   não é motivo para voltar atrás no piso.
   ════════════════════════════════════════════════════════════ */
:root{
  --fs-micro:15px;
  --fs-micro-lg:15px;
  --fs-ui:15px;
}
.hero--d .hero__k{font-size:15px}

/* ---------- a hero ocupa a largura da tela ----------
   O miolo herdava o .grid, cujo max-width e 1440px. Numa tela de 1900
   isso deixava 230px de foto vazia de cada lado e o conteudo parecia
   preso numa caixa estreita no meio.

   A home institucional nao faz isso: la o conteudo e fixado a 60px da
   BORDA da viewport (left:60px) e o bloco lateral a 60px da direita —
   a hero e a unica secao dela que ignora o contêiner. Mesmo gesto aqui.

   O texto continua limitado a 720px por medida de leitura: largura de
   tela nao e licenca para linha de 1800px. O que ganha a tela e o
   ESPACAMENTO entre as duas colunas, nao o comprimento da linha. */
@media (min-width:1025px){
  .hero--d .hero__in{max-width:none;padding-inline:var(--gut)}
}

/* ---------- o título herda o peso da institucional em toda largura ---------- */
.hero--d .hero__tema{font-weight:400;line-height:1.04;letter-spacing:-.03em}
@media (max-width:1024px){
  /* No empilhado a institucional usa clamp(2.4rem,8vw,4rem) — 38px em 375.
     Aqui não cabe: a manchete dela tem 5 palavras, o nosso tema tem 46
     caracteres, e a hero precisa fechar dentro da tela. Fica o peso e a
     métrica dela, com o corpo que o texto permite. */
  .hero--d .hero__tema{font-size:clamp(26px,6.8vw,42px);font-weight:400}
}

/* ---------- o contador deixa de ser negrito falso ----------
   DM Mono não tem peso 700 — o CSS do Google devolve só 400 e 500. Em 700
   o navegador engrossava a 500 artificialmente, e em corpo pequeno isso
   embola. A institucional tem a mesma falha; aqui ela sai. */
.hd__conta{font-weight:500}

/* ---------- a coluna do título abre para caber duas linhas ----------
   Medido em 1440 com o título já na métrica da institucional (72px/400):
   "Aprendizados e Boas Práticas" precisa de 927px e a coluna tinha 720 —
   faltavam 207, e por isso o texto quebrava em três linhas.

   Encolher a fonte resolveria, mas desfaria o que acabou de ser igualado.
   Então quem cede é a coluna: de 7 para 9 das 12 faixas, com teto de
   980px. O bloco lateral segue em 10/13 e os dois não se tocam.

   Isso empurra a linha mais longa até ~69% da largura, onde o véu já
   abriu para ~.64 — medido depois, o título fica em 6,1:1, folgado sobre
   os 3:1 de texto grande. Data e selo continuam curtos e ficam no
   território escuro, sem mudança. */
@media (min-width:1025px){
  .hero--d .hd__txt{grid-column:1/10;max-width:1000px}
  /* o título tinha cap próprio de 15ch, que em 72px dá 738,72px — abaixo
     dos 927 que a primeira linha pede. 20ch dá 985px e cabe na coluna. */
  .hero--d .hero__tema{max-width:20ch}
}

/* ════════════════════════════════════════════════════════════
   MENU NA CONFIGURAÇÃO VISUAL DA HOME INSTITUCIONAL
   ------------------------------------------------------------
   Lido de components/global.css:

     nav#nav      position:fixed; padding:22px 60px   (largura cheia)
     .scrolled    fundo rgba(8,8,8,.96), blur(24px), fio embaixo,
                  padding 14px, sombra 0 8px 32px rgba(0,0,0,.4)
     .nav-link    mono, 12px, peso 500, tracking .18em, CAIXA ALTA
     .nav-cta     mono, 12px, peso 700, tracking .18em, CAIXA ALTA,
                  pílula, fundo do acento, texto escuro, sombra colorida

   Tudo isso entra. Duas diferenças deliberadas:

   1. O CORPO FICA EM 15px, não 12px. Você definiu 15px como piso do site
      inteiro, e o menu não é exceção — 12px em caixa alta com .18em de
      tracking é justamente onde o corpo pequeno mais cansa. É o único
      número aqui que não copia a institucional, e é por ordem sua.

   2. O acento é o vermelho da edição, não o dourado. Como sempre.

   Bônus: o menu passa a ser de largura cheia como o dela, com o mesmo
   recuo da hero. Isso apaga o desalinho de 223px entre logo e manchete
   que eu tinha te reportado em tela larga — os dois agora nascem no
   mesmo x. As seções abaixo seguem no contêiner de 1440.
   ════════════════════════════════════════════════════════════ */

/* a barra ocupa a largura da tela, como a dela */
.nav__in{max-width:none;padding-inline:var(--gut)}

/* links: mono, caixa alta, tracking largo */
.nav__links a{
  font-family:var(--fm);
  font-size:15px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:8px 14px;
  white-space:nowrap;
}
.nav__links{gap:clamp(2px,.6vw,10px)}

/* o botão principal vira a pílula dela, no vermelho da edição */
.nav__act .btn--pri{
  font-family:var(--fm);
  font-size:15px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-radius:99px;
  padding:11px 24px;
  min-height:0;
  box-shadow:0 8px 28px -4px rgba(201,54,49,.42);
}
.nav__act .btn--pri:hover{
  box-shadow:0 10px 32px rgba(201,54,49,.5);
  transform:translateY(-1px);
}
.nav__log{
  font-family:var(--fm);
  font-size:15px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* a barra fixada: fundo, desfoque, fio e sombra dela */
.nav.stuck.over-dark,
.nav.stuck{
  background:rgba(8,8,8,.96);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:0 1px 0 rgba(255,255,255,.07),0 8px 32px rgba(0,0,0,.4);
}
.nav.stuck::after{background:rgba(255,255,255,.09)}

@media (max-width:1279px){
  .nav__links a{letter-spacing:.12em;padding:8px 10px}
}

/* ════════════════════════════════════════════════════════════
   OS TÍTULOS DE SEÇÃO SEGUEM A MANCHETE DA INSTITUCIONAL
   ------------------------------------------------------------
   Mesma métrica que já foi aplicada ao título da hero, agora valendo
   para todo título de seção:

     font-weight: 400        (era 600)
     line-height: 1.04       (era 1.02)
     letter-spacing: -.03em  (era -.04em)

   O peso é de novo o que muda a leitura. A página tinha 106 elementos em
   semibold e os títulos eram a maior parte deles; em regular eles param
   de gritar e passam a ter o ar da institucional, que é justamente o que
   a manchete dela faz — tamanho grande, peso normal.

   Vale para .h2 (todo título de seção) e para o display do "Não é
   palestra. É mesa de decisão.". NÃO vale para os h3 de card (nomes de
   painelista, títulos de bloco): ali o peso é o que separa o nome do
   cargo logo abaixo, e em 20px o regular apagaria essa diferença.
   ════════════════════════════════════════════════════════════ */
.h2,
.stmt__h{
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.03em;
}

/* ---------- a barra vira flex, como a da institucional ----------
   Medido: os seis links somavam 718px numa caixa de 533 (grade 4/9) e se
   atropelavam — "INGRESSO" por cima de "COMPRAR". Mono em caixa alta com
   2,7px de tracking é MUITO mais largo que o sans de antes; a
   institucional só cabe porque usa 12px, e aqui o piso é 15.

   A grade de 12 colunas era o problema: ela reserva largura fixa para os
   links independentemente do que eles medem. A institucional usa
   display:flex com space-between — cada grupo ocupa o que precisa. Mesmo
   gesto aqui, mais duas economias para fechar a conta:

     logo   64px -> 48px de altura  (-78px de largura)
     link   14px -> 10px de padding (-48px no conjunto)

   Fecha em ~1372 de 1425 disponíveis. */
.nav__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,1.8vw,34px);
  grid-template-columns:none;
}
.nav__brand,.nav__links,.nav__act{grid-column:auto}
.nav__links{flex:0 1 auto;justify-content:center}
.nav__links a{padding:8px 10px}
.nav__logo{height:48px}
.nav__act{flex:0 0 auto}

/* ════════════════════════════════════════════════════════════
   O MENU SEGUE O CORPO DA INSTITUCIONAL: 12px
   ------------------------------------------------------------
   Decisão sua, e ela substitui o piso de 15px NESTE componente — em
   nenhum outro. Os valores agora são os dela, sem adaptação:

     .nav-link  mono, 12px, peso 500, tracking .18em, caixa alta,
                padding 8px 18px
     .nav-cta   mono, 12px, peso 700, tracking .18em, caixa alta

   Registro o custo para ficar dito: 12px em caixa alta com tracking
   largo é o corpo que mais cansa de ler. No menu isso pesa menos que num
   parágrafo — são seis palavras que a pessoa já sabe de cor —, mas é a
   única coisa da página abaixo de 15px.

   O corpo menor devolve ~145px de largura, então o logo volta aos 64px
   originais e o padding volta ao valor dela.
   ════════════════════════════════════════════════════════════ */
.nav__links a,
.nav__log,
.nav__act .btn--pri{font-size:12px}
.nav__links a{padding:8px 18px}
.nav__logo{height:64px}


/* ════════════════════════════════════════════════════════════
   TÍTULOS DE CARD NO PADRÃO DA INSTITUCIONAL
   ------------------------------------------------------------
   Os títulos de seção já seguem o da hero dela (400 / 1.04 / -.03em).
   Os títulos DE CARD não seguiam nada: estavam em peso 600 com
   letter-spacing de -.038em, e essa é a diferença que salta aos olhos.
   Nada na institucional é apertado assim — o valor mais fechado dela é
   -.025em, e só em título de seção.

   A institucional tem UM tratamento para título de card, e ele aparece
   idêntico nos dois componentes de card que ela usa:

     .frente-title   var(--text-xl) = 20px · peso 700 · -.01em
     .dimensao-name  var(--text-xl) = 20px · peso 700

   Então é isso que passa a valer aqui: peso 700 e -.01em. Line-height
   1.25 é acréscimo meu — lá os títulos são de uma palavra só e herdam o
   1.75 do corpo, o que aqui, com "Mesas de engajamento" quebrando em
   duas linhas, abriria um buraco no meio do card.

   E o CORPO também desce um degrau, de --fs-h3 para --fs-h4. Peso 700
   nos 40px de antes ficaria pesado demais e afastaria ainda mais do
   original; em --fs-h4 o título de card fica entre 19 e 28px, que é a
   faixa dos 20px dela. Os cards que já estavam em --fs-h4 ou --fs-h5
   não mudam de tamanho, só de peso e espacejamento.
   ════════════════════════════════════════════════════════════ */
.pillar__b h3,
.perk__t,
.pmod__t{font-size:var(--fs-h4)}

.pillar__b h3,
.perk__t,
.pmod__t,
.duo__i h3,
.tl__c h3,
.reel__b h3,
.p__n,
.cast--lead .p__n,
.cast--par .p__n{
  font-weight:700;letter-spacing:-.01em;line-height:1.25;
}


/* ════════════════════════════════════════════════════════════
   PALAVRA DO PRESIDENTE · O TEXTO VAI ATÉ O RETRATO
   ------------------------------------------------------------
   O texto parava na coluna 8 e o retrato do Ideval começa na 9: sobrava
   uma faixa vazia entre os dois, e o parágrafo ainda parava antes disso
   por causa dos limites em ch. Agora o bloco vai até a coluna 9 — ou
   seja, até exatamente um vão antes do retrato, que é o limite sem
   encostar nele.

   Os dois tetos em ch saem no desktop porque eram eles, e não a grade,
   que estavam segurando o texto: 44ch na citação e 53ch no parágrafo.
   Quem passa a definir a largura é a coluna.

   Só do desktop para cima. Abaixo de 1025 a seção centraliza e o
   retrato desce, então não há faixa vazia para preencher.
   ════════════════════════════════════════════════════════════ */
@media (min-width:1025px){
  .voice__q,
  .voice__real{grid-column:1/9}
  .voice__pull,
  .voice__rest{max-width:none}
}


/* ════════════════════════════════════════════════════════════
   O RETRATO DO IDEVAL ENCOSTA NO LIMITE DIREITO
   ------------------------------------------------------------
   Ele ocupa as colunas 9 a 13, mas tem max-width:245px e o justify-self
   padrão da grade é `stretch` — como a largura está travada, o bloco
   assentava no INÍCIO dessas colunas e sobravam ~190px mortos à direita.
   Não era padding: era a caixa parada no canto errado de um trilho maior
   que ela. `end` joga a caixa para o fim do trilho, e aí o retrato fica
   rente à mesma margem em que termina todo o resto da página.
   ════════════════════════════════════════════════════════════ */
@media (min-width:1025px){
  .voice__cast{justify-self:end}
}


/* ════════════════════════════════════════════════════════════
   "EM BREVE" EM PRETO NAS SEÇÕES CLARAS
   ------------------------------------------------------------
   Estava em var(--seat), o cinza-azulado de rótulo de assento. Nas
   seções claras — moderadores é uma delas — o aviso passa a preto.
   As seções escuras continuam com o branco a .72 que já tinham: lá o
   preto sumiria.
   ════════════════════════════════════════════════════════════ */
.sec--white .p--vago .p__m::after{color:#0A0A0A}


/* ════════════════════════════════════════════════════════════
   --fs-h4 NÃO PODE FICAR ABAIXO DE --fs-h5
   ------------------------------------------------------------
   O piso do h4 era 19px e o h5 é 20px fixo: abaixo de ~1000px de
   largura o degrau MAIOR ficava menor que o menor. Não dava para ver
   antes porque os dois nunca aparecem lado a lado — passou a dar quando
   os títulos de card desceram de h3 para h4. Piso vai a 21px, um degrau
   acima do h5, e o teto continua o mesmo.
   ════════════════════════════════════════════════════════════ */
:root{--fs-h4:clamp(21px,2vw,28px)}


/* ════════════════════════════════════════════════════════════
   RODAPÉ NA CONFIGURAÇÃO DO INSTITUCIONAL
   ------------------------------------------------------------
   Lido de components/footer.html + components/global.css. A anatomia
   dos dois rodapés já era a mesma — marca com logo, descrição e redes,
   três colunas de links, faixa de base — então o que muda aqui é
   proporção, tipografia e espaçamento, não estrutura. Nenhuma linha de
   HTML precisou mudar.

   O QUE VEM DELE, valor por valor:

     footer            padding 80px 0 40px · borda superior 1px
     .footer-grid      2fr 1fr 1fr 1fr · gap 60px · margem inferior 60px
     .footer-logo      44px de altura
     .footer-brand-desc 16px · entrelinha 1,85 · largura máxima 280px
     .footer-col-title mono · 12px · 700 · .22em · caixa alta
     .footer-links a   DM Sans · 16px · .01em · rgba(245,243,239,.62)
                       e no hover desloca 4px para a direita
     .footer-social-btn 34px · círculo · borda .12 · opacidade .6
     .footer-bottom    borda superior · padding-top 32px · copy à
                       esquerda, políticas à direita com gap 32px
     .footer-dev-credit linha PRÓPRIA abaixo · alinhada à esquerda ·
                       margem 28px · 14px · rgba(245,243,239,.18)

   O crédito estava no meio da faixa de base; lá ele é uma terceira
   linha. Consegui isso sem tocar no HTML porque a faixa já é grade:
   copy e políticas ocupam a linha 1, o crédito ocupa a linha 2 inteira.

   ------------------------------------------------------------
   O QUE NÃO VEM, E POR QUÊ

   1. O DOURADO. É a paleta, e a paleta continua a do Talks: o hover das
      redes e o link do crédito ficam no vermelho da edição.

   2. O HOVER DAS POLÍTICAS. Lá ele é `color:var(--dk-text-dim)`, que é
      exatamente a cor de repouso — o hover não faz nada. Aqui ele
      clareia, porque um link que não responde ao ponteiro é defeito,
      não estilo.

   3. O ALINHAMENTO NO CELULAR E TABLET. Lá o rodapé fica à esquerda em
      duas colunas; aqui ele continua centralizado, que é a regra que
      você fixou para a página inteira nesses tamanhos.

   ------------------------------------------------------------
   E ISTO VOCÊ PRECISA SABER, porque contraria uma regra sua

   Dois trechos ficam ABAIXO dos 15px que você definiu como piso, porque
   é o corpo que a institucional usa: os títulos de coluna em 12px e o
   crédito em 14px. E o crédito vem com alfa .18, que sobre o fundo do
   rodapé dá 1,36:1 — ele fica praticamente invisível, do jeito que está
   no institucional hoje. Copiei como está; uma palavra sua e eu subo.
   ════════════════════════════════════════════════════════════ */

.ft{padding:80px 0 40px;border-top:1px solid rgba(255,255,255,.07)}

/* ---------- as quatro colunas na proporção dela ---------- */
@media (min-width:1025px){
  .ft__in{
    grid-template-columns:2fr 1fr 1fr 1fr;
    column-gap:60px;padding-bottom:60px;
  }
  .ft__brand,
  .ft__in > .ft__c,
  .ft__in > .ft__c:nth-child(2),
  .ft__in > .ft__c:nth-child(3),
  .ft__in > .ft__c:nth-child(4){grid-column:auto}
}

/* ---------- a marca ---------- */
.ft__brand img{height:44px}
.ft__brand p{
  margin-top:20px;font-size:16px;line-height:1.85;
  max-width:280px;color:rgba(245,243,239,.55);
}

/* ---------- as redes: 34px, círculo, opacidade .6 ---------- */
.ft__brand .socials{gap:6px;margin-top:20px}
.ft__brand .socials a{
  width:34px;height:34px;border-radius:99px;opacity:.6;
  border-color:rgba(255,255,255,.12);color:rgba(245,243,239,.55);
}
.ft__brand .socials a svg{width:16px;height:16px}
.ft__brand .socials a:hover{
  opacity:1;background:rgba(250,13,24,.10);
  border-color:rgba(250,13,24,.34);color:var(--blue-600);transform:none;
}

/* ---------- títulos de coluna e links ---------- */
.ft__c{gap:10px}
.ft__c h3{
  font-family:var(--fm);font-size:12px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(245,243,239,.55);margin-bottom:10px;
}
.ft__c a,.ft__c span{
  font-family:var(--f);font-size:16px;letter-spacing:.01em;
  color:rgba(245,243,239,.62);padding-block:0;
  transition:color .15s var(--e2),padding-left .15s var(--e2);
}
.ft__c a:hover{color:#F5F3EF;padding-left:4px}

/* ---------- a faixa de base: copy e políticas na linha 1,
     crédito sozinho na linha 2, que é como ela monta ---------- */
.ft__bar{
  padding-block:32px 0;border-top:1px solid rgba(255,255,255,.07);
  align-items:center;row-gap:0;
}
.ft__bar p:nth-child(1){grid-column:1/7;grid-row:1;text-align:left}
.ft__pol{
  grid-column:7/13;grid-row:1;justify-self:end;
  display:flex;gap:32px;flex-wrap:wrap;justify-content:flex-end;
}
.ft__bar p:nth-child(2){
  grid-column:1/13;grid-row:2;text-align:left;
  margin-top:28px;font-size:14px;line-height:1.7;
  color:rgba(245,243,239,.18);
}
.ft__bar p,.ft__bar a{font-size:16px;color:rgba(245,243,239,.55)}
.ft__bar a{transition:color .15s var(--e2)}
.ft__bar a:hover{color:#F5F3EF}

/* o link do crédito: o dourado dela vira o vermelho daqui */
.ft__bar p:nth-child(2) a{
  font-size:inherit;font-weight:500;border:0;padding:0;
  color:rgba(250,13,24,.5);
}
.ft__bar p:nth-child(2) a:hover{color:var(--blue-600);border:0}

/* ---------- celular e tablet: a centralização da página continua ---------- */
@media (max-width:1024px){
  .ft__bar p:nth-child(1),
  .ft__bar p:nth-child(2){grid-column:1/13;text-align:center}
  .ft__bar p:nth-child(1){grid-row:1}
  .ft__pol{grid-column:1/13;grid-row:2;justify-self:center;
    justify-content:center;gap:16px;margin-top:16px}
  .ft__bar p:nth-child(2){grid-row:3}
  .ft__c a:hover{padding-left:0}
  .ft__brand p{max-width:38ch;margin-inline:auto}
}


/* ════════════════════════════════════════════════════════════
   14 · LIDERANÇAS QUE ATUAM EM DIFERENTES REALIDADES
   ------------------------------------------------------------
   Os valores são os do bloco da home institucional, lido do HTML dela:

     seção        fundo de superfície + borda superior de 1px
     cabeçalho    centralizado · margem inferior 48px · título com 20px
                  abaixo · subtítulo 16px, largura máxima 600px
     carrossel    borda de 1px · leques de 80px nas bordas
     célula       padding 36px 32px · fundo --deep · #161616 no hover
     logo         até 200×80 · branco (brightness(0) invert(1)) · .55
                  de opacidade, 1 no hover
     grade        4 colunas com vão de 1px, e o vão É o fio
     pontos       6px · vão 7px · 20px acima · o ativo cresce 1.4×

   A troca de paleta de sempre: o ponto ativo sai do dourado e entra no
   vermelho da edição, e o <em> do título fica vermelho como em todos os
   outros títulos desta página.

   SEM JAVASCRIPT a faixa é uma grade com os 11 logos à vista. Com ele,
   .lid--vivo transforma a mesma faixa na trilha do carrossel.
   ════════════════════════════════════════════════════════════ */
.lid{border-top:1px solid rgba(255,255,255,.07)}
.lid__head{
  grid-column:1/13;justify-self:center;text-align:center;
  max-width:900px;margin-bottom:48px;
}
.lid__head .h2{margin-bottom:20px;text-wrap:balance}
.lid__head .shd__s{
  margin:0 auto;max-width:600px;
  font-size:16px;line-height:1.75;color:var(--gray-600);
}

.lid__car{
  grid-column:1/13;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
}
.lid__car::before,
.lid__car::after{
  content:'';position:absolute;top:0;bottom:0;z-index:2;width:80px;
  pointer-events:none;
}
.lid__car::before{left:0;background:linear-gradient(to right,var(--white),transparent)}
.lid__car::after{right:0;background:linear-gradient(to left,var(--white),transparent)}

/* sem JS: grade */
.lid__track{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:rgba(255,255,255,.07);
}
/* com JS: trilha */
.lid--vivo .lid__track{
  display:flex;gap:0;background:none;
  transition:transform .75s cubic-bezier(.22,1,.36,1);will-change:transform;
}
.lid__pg{
  flex:0 0 100%;min-width:100%;
  display:grid;grid-template-columns:repeat(var(--por,4),minmax(0,1fr));
  gap:1px;background:rgba(255,255,255,.07);
}

.lid__c{
  display:flex;align-items:center;justify-content:center;
  min-height:152px;padding:36px 32px;
  background:var(--navy-900);transition:background .25s;
}
.lid__c:hover{background:var(--navy-800)}
.lid__c img{
  width:auto;height:auto;max-width:200px;max-height:80px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.55;transition:opacity .3s;
}
.lid__c:hover img,
.lid__c:focus-visible img{opacity:1}
.lid__c:focus-visible{outline:2px solid var(--blue-500);outline-offset:-2px}
.lid__c--vazio{pointer-events:none}

.lid__dots{grid-column:1/13;display:flex;justify-content:center;gap:7px;margin-top:20px}
.lid__dot{
  position:relative;width:6px;height:6px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);cursor:pointer;transition:all .25s;
}
/* o ponto tem 6px, mas o dedo precisa de área: o ::before a estende */
.lid__dot::before{content:'';position:absolute;inset:-10px}
.lid__dot[aria-current="true"]{background:var(--blue-600);transform:scale(1.4)}
.lid__dot:focus-visible{outline:2px solid var(--blue-500);outline-offset:4px}

@media (max-width:767px){
  .lid__track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lid__c{min-height:120px;padding:28px 20px}
  .lid__c img{max-width:140px;max-height:60px}
  .lid__car::before,.lid__car::after{width:40px}
}
@media (prefers-reduced-motion:reduce){
  .lid--vivo .lid__track{transition:none}
  .lid__c,.lid__c img,.lid__dot{transition:none}
}


/* ════════════════════════════════════════════════════════════
   "SITE DESENVOLVIDO POR" EM BRANCO
   ------------------------------------------------------------
   Estava no alfa .18 copiado do institucional, que dava 1,5:1 e deixava
   a frase praticamente invisível. Decisão do cliente: branco. O nome
   "Hans Werner" continua no vermelho do link.
   ════════════════════════════════════════════════════════════ */
.ft__bar p:nth-child(2){color:#fff}


/* ════════════════════════════════════════════════════════════
   UM LOTE SÓ · CENTRALIZADO NO EMPILHADO
   ------------------------------------------------------------
   Com apenas o Lote 1 à venda, o card de 340px deixava de dividir a
   linha e ficava encostado à esquerda, enquanto título e texto da seção
   estão centralizados. Abaixo de 1025px ele centraliza, que é a regra
   da página para celular e tablet. No desktop a seção é alinhada à
   esquerda e o card continua onde está.
   ════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .lotes > .lote,
  .lotes__g > .lote{justify-self:center;margin-inline:auto;width:100%;max-width:340px}
}


/* ════════════════════════════════════════════════════════════
   O LOTE DA VEZ VIRA UM BILHETE
   ------------------------------------------------------------
   Os lotes abrem um de cada vez, então a grade de cards perdeu o
   sentido: sobrava um card de 340px encostado num canto de 740. O
   espaço inteiro passa a ser de um objeto só, e o objeto é o que o
   visitante está comprando — um ingresso.

   Anatomia:
     corpo    nome do lote + selo de estado, e o preço em corpo de
              display (400 / -.03em, a mesma voz dos títulos da página)
     canhoto  as datas da janela, separado por picote tracejado com
              dois recortes semicirculares — os recortes são círculos
              pintados na cor do fundo da seção, por isso o bilhete
              parece vazado sem máscara nenhuma

   Estados: "em breve" é tracejado e contido; "aberto" acende a borda e
   o ponto no vermelho vivo, com pulso; "esgotado/encerrado" apaga o
   preço. Abaixo de 1025px o canhoto desce para baixo do corpo e o
   picote vira horizontal; o conteúdo centraliza.
   ════════════════════════════════════════════════════════════ */
.lotes,
.lotes--api{grid-template-columns:minmax(0,1fr)}

.bil{
  --recorte:22px;
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  border:1px solid rgba(255,255,255,.16);border-radius:18px;
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(250,13,24,.14),rgba(250,13,24,0) 58%),
    rgba(255,255,255,.025);
  overflow:hidden;
}
.bil--on{border-color:rgba(250,13,24,.62)}
.bil--out{background:rgba(255,255,255,.02)}

.bil__main{
  display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,1.3vw,18px);
  padding:clamp(26px,3vw,42px) clamp(26px,3vw,44px);
}
.bil__k{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:0}
.bil__k > .mono{
  font-size:15px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;
}
.bil__st{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;
  font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.22);
}
.bil__st i{width:7px;height:7px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.bil--on .bil__st{color:#fff;border-color:rgba(250,13,24,.55);background:rgba(250,13,24,.12)}
.bil--on .bil__st i{background:var(--blue-600);box-shadow:0 0 0 0 rgba(250,13,24,.6);animation:bilPulso 2s ease-out infinite}
.bil--out .bil__st i{background:rgba(255,255,255,.35);box-shadow:none}
@keyframes bilPulso{0%{box-shadow:0 0 0 0 rgba(250,13,24,.6)}100%{box-shadow:0 0 0 9px rgba(250,13,24,0)}}

.bil__v{
  margin:0;font-size:clamp(46px,5.4vw,78px);font-weight:400;line-height:1;
  letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;
}
.bil--out .bil__v{color:rgba(255,255,255,.45);text-decoration:line-through;text-decoration-thickness:2px}
.bil__v--vago{font-size:clamp(34px,3.6vw,52px);color:rgba(255,255,255,.82)}
.bil__pt,.bil__d{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.68)}
.bil__pt{letter-spacing:.06em}

/* ---------- canhoto e picote ---------- */
.bil__stub{
  position:relative;display:flex;flex-direction:column;justify-content:center;gap:18px;
  min-width:clamp(170px,15vw,220px);
  padding:clamp(26px,3vw,42px) clamp(24px,2.6vw,38px);
  border-left:2px dashed rgba(255,255,255,.2);
  background:rgba(255,255,255,.03);
}
.bil__stub::before,
.bil__stub::after{
  content:'';position:absolute;left:calc(var(--recorte) / -2 - 1px);
  width:var(--recorte);height:var(--recorte);border-radius:50%;
  background:var(--navy-950);border:1px solid rgba(255,255,255,.16);
}
.bil--on .bil__stub::before,.bil--on .bil__stub::after{border-color:rgba(250,13,24,.62)}
.bil__stub::before{top:calc(var(--recorte) / -2)}
.bil__stub::after{bottom:calc(var(--recorte) / -2)}
.bil__l{display:flex;flex-direction:column;gap:6px;margin:0}
.bil__l .mono{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.bil__l b{font-size:clamp(24px,2.2vw,32px);font-weight:500;letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.bil--on .bil__l b{color:var(--blue-600)}

@media (max-width:1024px){
  .bil{grid-template-columns:minmax(0,1fr);width:100%;max-width:560px;margin-inline:auto;text-align:center}
  .bil__main{align-items:center}
  .bil__k{justify-content:center}
  .bil__stub{
    flex-direction:row;justify-content:center;gap:clamp(24px,8vw,56px);min-width:0;
    border-left:0;border-top:2px dashed rgba(255,255,255,.2);
  }
  .bil__stub::before,.bil__stub::after{top:calc(var(--recorte) / -2 - 1px);bottom:auto}
  .bil__stub::before{left:calc(var(--recorte) / -2)}
  .bil__stub::after{left:auto;right:calc(var(--recorte) / -2)}
  .bil__l{align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .bil--on .bil__st i{animation:none;box-shadow:0 0 0 3px rgba(250,13,24,.25)}
}


/* ════════════════════════════════════════════════════════════
   "HANS WERNER" NO VERMELHO VIVO
   ------------------------------------------------------------
   O link herdava o dourado a 50% do institucional, trocado por
   vermelho a .5 — lia apagado. Agora é o --blue-600 (#FA0D18) cheio,
   o mesmo vermelho vivo da página: 5,1:1 sobre o preto do rodapé.
   ════════════════════════════════════════════════════════════ */
.ft__bar p:nth-child(2) a{color:var(--blue-600)}
.ft__bar p:nth-child(2) a:hover{color:#fff}


/* ════════════════════════════════════════════════════════════
   PRÉ-VENDA PROMOCIONAL (página integrada)
   ------------------------------------------------------------
   Aviso de campanha, então fala mais alto que o resto da coluna: fundo
   vermelho em degradê, selo com ponto pulsando, título em display e
   contagem regressiva em três blocos. Fica acima do "Entrar e
   adquirir", que é exatamente a ação que ele empurra.
   ════════════════════════════════════════════════════════════ */
.pv{
  position:relative;overflow:hidden;isolation:isolate;
  margin-bottom:12px;padding:clamp(22px,2.2vw,30px);border-radius:18px;
  background:linear-gradient(145deg,#B5020C 0%,#6E0107 62%,#3A0004 100%);
  border:1px solid rgba(255,120,126,.45);
  box-shadow:0 18px 50px -18px rgba(250,13,24,.55);
}
.pv[hidden]{display:none}
.pv::before{
  content:'';position:absolute;z-index:-1;inset:-40% -30% auto auto;width:70%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,0));
}
.pv__k{
  display:inline-flex;align-items:center;gap:9px;margin:0;padding:6px 12px;border-radius:99px;
  font-size:15px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.28);
}
.pv__k i{width:8px;height:8px;border-radius:50%;background:#fff;animation:pvPulso 1.6s ease-out infinite}
@keyframes pvPulso{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
.pv__t{
  margin:16px 0 0;font-size:clamp(26px,2.3vw,34px);font-weight:500;line-height:1.08;
  letter-spacing:-.025em;color:#fff;text-wrap:balance;
}
.pv__t em{font-style:normal;color:#FFD9DB;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.pv__d{margin:12px 0 0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.9)}
.pv__d b{color:#fff;font-weight:700}
.pv__c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
.pv__c span{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:12px;
  background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.16);
}
.pv__c b{font-size:clamp(26px,2.2vw,32px);font-weight:500;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.pv__c small{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
@media (max-width:1024px){
  .pv{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .pv__k i{animation:none}
}


/* ════════════════════════════════════════════════════════════
   PRÉ-VENDA AO LADO DO BILHETE
   ------------------------------------------------------------
   A coluna de ações vem depois de "Perfis no encontro" no HTML, então
   o posicionamento automático da grade a jogava para a linha de baixo
   do bilhete — sobrava um vazio ao lado dele. Enquanto a pré-venda está
   no ar, a coluna sobe para a linha do bilhete e ocupa as duas linhas
   (bilhete + perfis). Quando o aviso some, :has() deixa de casar e a
   seção volta exatamente ao layout de antes. Só no desktop.
   ════════════════════════════════════════════════════════════ */
@media (min-width:1025px){
  .acesso .grid:has(> .acesso__a > .pv:not([hidden])) > .lotes{grid-row:2}
  /* o aviso de prazo entra ENTRE o bilhete e os perfis: sem esta linha
     ele caía para depois dos perfis, longe do preço a que se refere */
  .acesso .grid:has(> .acesso__a > .pv:not([hidden])) > .lotes__prazo{grid-row:3}
  .acesso .grid:has(> .acesso__a > .pv:not([hidden])) > .perfil{grid-row:4}
  .acesso .grid:has(> .acesso__a > .pv:not([hidden])) > .acesso__a{grid-row:2 / span 3}
}


/* ════════════════════════════════════════════════════════════
   PRÓXIMO LOTE NO BILHETE
   ------------------------------------------------------------
   Faixa abaixo do preço vigente: seta de alta, o valor do lote seguinte
   e, destacada em vermelho, a economia de comprar agora. O valor futuro
   fica em corpo menor e mais apagado que o vigente de propósito — o
   olho tem de voltar para o preço de hoje.
   ════════════════════════════════════════════════════════════ */
.bil__prox{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 14px;
  margin-top:4px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
}
.bil__seta{
  grid-row:1 / span 2;width:38px;height:38px;padding:9px;border-radius:50%;
  fill:none;stroke:var(--blue-600);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  background:rgba(250,13,24,.12);border:1px solid rgba(250,13,24,.4);
}
.bil__prox-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0}
.bil__prox-t .mono{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.bil__prox-t b{font-size:22px;font-weight:500;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.bil__eco{
  justify-self:start;margin:0;padding:5px 12px;border-radius:99px;
  font-size:15px;font-weight:700;color:#fff;background:var(--blue-600);
}
@media (max-width:1024px){
  .bil__prox{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .bil__seta{grid-row:auto}
  .bil__prox-t{justify-content:center}
  .bil__eco{justify-self:center}
}


/* ════════════════════════════════════════════════════════════
   O LOGO NÃO ENCOLHE PARA O MENU CABER
   ------------------------------------------------------------
   Entre 1181 e ~1300px o logo era espremido. Duas causas somadas:
   1. .nav__brand podia encolher (flex-shrink padrão = 1), então era ela
      que cedia espaço quando a linha não fechava;
   2. o aperto dos links abaixo de 1280px (padding 10px) era anulado por
      uma regra posterior sem media query (padding 18px, a do corpo 12px
      da institucional) — os links nunca apertavam de verdade.
   Agora o logo tem tamanho fixo e quem se ajusta é o espaçamento do
   menu, reposto aqui DEPOIS da regra que o anulava.
   ════════════════════════════════════════════════════════════ */
.nav__brand,.nav__logo{flex:0 0 auto}
.nav__logo{width:auto}
@media (max-width:1360px){
  .nav__links{gap:0}
  .nav__links a{padding:8px 10px;letter-spacing:.14em}
}


/* ════════════════════════════════════════════════════════════
   APOIADORES · TRÊS NA LINHA
   ------------------------------------------------------------
   Com a Vestra Capital são três. A grade de duas colunas deixava o
   terceiro sozinho numa linha nova, colado à esquerda. No desktop são
   três colunas; entre 720 e 1024 continuam duas, e o card que sobra
   centraliza com a mesma largura dos outros. Abaixo de 720 empilha,
   como antes.

   O logo da Vestra é largo e baixo (638x81): no teto de 104px de altura
   dos outros ele passaria da largura do card, então tem teto próprio
   de largura.
   ════════════════════════════════════════════════════════════ */
@media (min-width:1025px){
  .patros--apoio{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:720px) and (max-width:1024px){
  .patros--apoio > .patro--apoio:last-child:nth-child(odd){
    grid-column:1 / -1;justify-self:center;
    width:calc((100% - clamp(16px,1.8vw,24px)) / 2);
  }
}
.patro--apoio .patro__l[src*="vestra"]{width:min(240px,100%);height:auto;max-height:none}


/* ════════════════════════════════════════════════════════════
   ESCOLA ATEMPORAL · -25% NO TABLET
   ------------------------------------------------------------
   Entre 720 e 1024px o logo estava em 76px; desce 25%:
   76 × 0,75 = 57px. Desktop (108px) e celular (62px) não mudam.
   ════════════════════════════════════════════════════════════ */
@media (min-width:720px) and (max-width:1024px){.dinamica__logo img{height:57px}}

/* ════════════════════════════════════════════════════════════
   VESTRA CAPITAL NA PLACA CLARA
   ------------------------------------------------------------
   O logo é azul-marinho (#0F2030) e sumia no fundo escuro. Mesma
   solução dos outros logos escuros (ROIT, Novitá, Escola Atemporal,
   Blue Tree): a marca fica na cor original sobre a placa clara, em vez
   de ser recolorida.
   ════════════════════════════════════════════════════════════ */
img[src*="vestra-capital"]{
  background:#F5F3EF;
  border-radius:8px;
  padding:clamp(10px,1vw,16px) clamp(14px,1.4vw,22px);
  box-sizing:border-box;
  box-shadow:0 0 0 1px rgba(245,243,239,.14);
}
.patro--apoio .patro__l[src*="vestra"]{width:min(260px,100%)}


/* Vestra: o arquivo novo (355x65) já traz fundo branco próprio. A placa
   passa de #F5F3EF para branco puro, senão sobraria uma moldura creme
   em volta do retângulo branco da imagem. */
img[src*="vestra-capital"]{background:#fff}


/* ════════════════════════════════════════════════════════════
   APOIADORES · MESMA PLACA PARA OS TRÊS LOGOS
   ------------------------------------------------------------
   As placas brancas tinham a altura de cada arquivo: Novitá 95px,
   Titan 86px, Vestra 64px. Agora a caixa é fixa — mesma largura e
   mesma altura — e o logo se encaixa dentro dela com object-fit:
   contain, sem distorcer. A proporção de cada marca é preservada; o
   que se iguala é a placa.
   ════════════════════════════════════════════════════════════ */
.patro--apoio .patro__l,
.patro--apoio .patro__l[src*="vestra"]{
  width:min(230px,100%);height:96px;max-height:none;max-width:none;
  object-fit:contain;object-position:center;box-sizing:border-box;
}
@media (max-width:860px){
  .patro--apoio .patro__l,
  .patro--apoio .patro__l[src*="vestra"]{width:min(210px,100%);height:88px}
}


/* ════════════════════════════════════════════════════════════
   PRAZO DAS VENDAS, ABAIXO DO BILHETE
   ------------------------------------------------------------
   Aviso, não chamada: corpo de leitura, cor de texto secundário e um
   fio curto acima, para separar do bilhete sem competir com o preço.
   Só a data ganha peso, porque é a única informação que se procura
   nessa linha.
   ════════════════════════════════════════════════════════════ */
.lotes__prazo{
  grid-column:1/8;display:flex;align-items:flex-start;gap:12px;
  margin:clamp(14px,1.5vw,18px) 0 0;padding:14px 16px;
  border:1px solid rgba(250,13,24,.3);border-left-width:3px;border-radius:12px;
  background:rgba(250,13,24,.07);max-width:52ch;
}
.lotes__prazo-i{
  flex:none;width:22px;height:22px;margin-top:1px;
  fill:none;stroke:var(--blue-600);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.lotes__prazo p{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.72)}
.lotes__prazo b{display:block;color:#fff;font-weight:700}
.lotes__prazo b span{font-variant-numeric:tabular-nums}
@media (max-width:1024px){
  .lotes__prazo{grid-column:1/13;margin-inline:auto;text-align:left}
}


/* trecho em destaque dentro do texto do modal da marca */
.pmod__forte{color:#fff;font-weight:700}


/* ════════════════════════════════════════════════════════════
   HOSPEDAGEM PARCEIRA · O LOGO NO LUGAR DO SELO DE DESCONTO
   ------------------------------------------------------------
   A coluna da direita foi desenhada para o selo "5%" da hospedagem
   oficial. Com a B&B, quem ocupa esse lugar é a marca: o desconto não
   tem número público, e um selo vazio pesaria mais do que informa.
   A regra base já existia para os logos de parceiro, com 84px de altura
   e recorte largo (max-width 360). O arquivo da B&B é QUADRADO: nos 84px
   ele vira um selo pequeno demais ao lado de um título de 40px. Aqui só
   a altura muda, e o teto de largura sai.
   ════════════════════════════════════════════════════════════ */
.perk__r .perk__logo{height:clamp(120px,13vw,168px);max-width:100%}
@media (max-width:1024px){
  .perk__logo{object-position:center;margin-inline:auto;display:block}
}
/* SOMPO · protagonismo da anfitriã no mobile */
@media (max-width:620px){
  .ficha__in{padding-inline:clamp(14px,4vw,20px)}
  .ficha__host{gap:16px}
  .ficha__marca{flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
  .ficha__marca img{height:clamp(60px,18vw,74px);max-width:100%}
  .ficha__video-bloco{gap:8px}
  .ficha__video{border-radius:10px}
  .ficha__video .patro__p{width:58px;height:58px}
  .ficha__video .patro__c{width:92%;transform:translate(-50%,38px)}
}
/* Assinatura de desenvolvimento: presente, mas um degrau abaixo da marca do evento. */
.ft__credito{display:inline-flex;align-items:center;gap:10px}
.ft__credito-linha{
  width:28px;height:2px;flex:none;border-radius:99px;background:var(--blue-600,#FA0D18);
  transition:width .35s var(--e);
}
.ft__credito a{display:inline-flex;align-items:center;gap:5px}
.ft__credito a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .3s var(--e)}
.ft__credito:hover .ft__credito-linha{width:38px}
.ft__credito a:hover svg{transform:translate(2px,-2px)}
@media (max-width:620px){
  .ft__credito{justify-content:center}
  .ft__credito-linha{width:22px}
}
@media (prefers-reduced-motion:reduce){
  .ft__credito-linha,.ft__credito a svg{transition:none}
  .ft__credito:hover .ft__credito-linha{width:28px}
  .ft__credito a:hover svg{transform:none}
}
/* Preço integral e economia vêm do endpoint completo; sem esses dados o
   bilhete conserva exatamente o desenho anterior. */
.bil__de{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px 12px;margin:0 0 -8px;color:rgba(255,255,255,.6)}
.bil__de span{font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.bil__de del{font-family:var(--fs);font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;text-decoration-thickness:2px}
.bil__vantagem{align-self:flex-start;margin:-4px 0 0;padding:7px 13px;border-radius:99px;background:var(--blue-600);color:#fff;font-size:15px;font-weight:700;line-height:1.3}
@media (max-width:620px){
  .bil__de{justify-content:center;margin-bottom:-4px}
  .bil__vantagem{align-self:center;text-align:center}
}