/* =========================================================================
   CADEIRA 100K — design tokens de identidade-visual/tokens.json
   Nenhuma cor/gradiente/radius aqui foi inventado — tudo vem do arquivo real.
   ========================================================================= */

/* A "Termina Test" (fonte display original do cliente) foi descartada:
   é uma versão de teste do fabricante com só 66 glyphs — sem nenhum
   caractere acentuado (á, ã, ç, é...), quebrando qualquer palavra em
   português. Ficamos com a Space Grotesk, que já era o fallback
   escolhido por semelhança visual (geométrica, mesma proporção) e
   tem cobertura completa de acentuação. */

:root{
  /* Indigo/Navy — estrutura, fundos escuros */
  --primary-50:#eff3fa; --primary-100:#dbe3f5; --primary-200:#b5c7ee; --primary-300:#80a0e5;
  --primary-400:#2f65da; --primary-500:#133996; --primary-600:#123278; --primary-700:#112a5f;
  --primary-800:#0f2248; --primary-900:#0b1933;

  /* Celeste/Cyan — ação, destaque, CTA */
  --accent-50:#f3faff; --accent-100:#e0f5ff; --accent-200:#ccf0ff; --accent-300:#b8ebff;
  --accent-400:#ade9ff; --accent-500:#a4e7ff; --accent-600:#4dc3ff; --accent-700:#0081ce;
  --accent-800:#005e99; --accent-900:#003d66;

  --text-on-dark:#d7e0e6;

  --grad-estrutura: linear-gradient(180deg, var(--primary-500), var(--primary-900));
  --grad-estrutura-rev: linear-gradient(0deg, var(--primary-500), var(--primary-900));
  --grad-credencial: linear-gradient(135deg, var(--accent-500), var(--accent-50));
  --grad-cta: linear-gradient(90deg, var(--accent-700), var(--accent-500));

  /* Radius do cliente — 999px é exclusivo de botão/badge/pill.
     Todo o resto (cards, placeholders, painéis) usa --radius-card = 10px, padronizado. */
  --radius:999px;
  --radius-card:10px;

  /* Space Grotesk — troca definitiva da Termina Test (sem acentos, ver nota acima). */
  --font-display:'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body:'Raleway', sans-serif;

  --wrap: 1200px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);

  /* Escala tipográfica única — todo título de seção usa --fs-section-title,
     independente da dobra, pra não ter tamanhos inconsistentes pela página. */
  --fs-section-title: clamp(2rem, 1.5vw + 1.5rem, 2.75rem);
  --fs-panel-title: clamp(2rem, 2.4vw + 1.2rem, 3.4rem);

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  background:var(--primary-50);
  color:var(--primary-900);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
/* grain sutil no fundo — SVG de ruído em blend overlay, bem baixa opacidade,
   pointer-events:none pra nunca atrapalhar clique nem leitura do texto */
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:600; }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); position:relative; }
.wrap--narrow{ max-width:820px; }
.section{ padding-block: clamp(4rem, 9vw, 8rem); position:relative; }
.section--dark{ background:var(--grad-estrutura); color:var(--text-on-dark); }
.section--light{ background:var(--primary-50); color:var(--primary-900); }
.muted{ opacity:.6; font-style:italic; font-size:.85em; }
.u{ text-decoration:underline; text-decoration-color:var(--accent-500); text-underline-offset:.12em; text-decoration-thickness:.06em; }
.nowrap{ white-space:nowrap; }
h1,h2,h3{ text-wrap:balance; }

/* ---------- buttons & pills ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body); font-weight:600; font-size:clamp(.95rem, 1vw + .6rem, 1.15rem);
  padding: 1.1em 1.7em;
  border-radius:var(--radius);
  border:none; cursor:pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn--cta{
  background:var(--grad-cta); color:var(--primary-900);
  box-shadow: 0 8px 30px -8px rgba(0,129,206,.55);
}
.btn--cta:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 14px 34px -6px rgba(0,129,206,.7); }
.btn__arrow{ width:1.1em; height:1.1em; flex:0 0 auto; transition:transform .35s var(--ease); }
.btn--cta:hover .btn__arrow{ transform:translate(2px,-2px); }
.btn--ghost{
  background:transparent; color:var(--text-on-dark);
  border:1px solid rgba(215,224,230,.35); padding:.7em 1.4em; font-size:.85rem;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease);
}
.btn--ghost:hover{ background:rgba(164,231,255,.14); border-color:rgba(164,231,255,.5); transform:scale(1.03); }
.btn--sm{ padding:.6em 1.3em; font-size:.78rem; letter-spacing:.02em; }

.pill{
  display:inline-flex; align-items:center; padding:.55em 1.2em;
  border-radius:var(--radius); font-size:.85rem; font-weight:500;
}
.pill--ghost{ background:rgba(164,231,255,.08); border:1px solid rgba(164,231,255,.25); color:var(--text-on-dark); }

.glow-breathe{ animation:glowBreathe 4.5s ease-in-out infinite; }
@keyframes glowBreathe{
  0%,100%{ box-shadow:0 8px 30px -8px rgba(0,129,206,.45); }
  50%{ box-shadow:0 8px 46px -4px rgba(164,231,255,.75); }
}

/* ---------- placeholders (fotos ainda não existem) ---------- */
.placeholder-rect{
  background:
    repeating-linear-gradient(135deg, rgba(164,231,255,.08) 0 10px, transparent 10px 20px),
    rgba(164,231,255,.05);
  border:1.5px dashed rgba(164,231,255,.4);
  border-radius:var(--radius-card);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:2rem;
}
.placeholder-label{ font-size:.8rem; letter-spacing:.04em; color:var(--accent-400); line-height:1.5; }
.placeholder-label small{ display:block; margin-top:.5em; opacity:.65; font-weight:300; font-size:.85em; }

.divider{ border:none; border-top:1px solid rgba(11,25,51,.12); margin-block:1.5rem; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; height:60px;
  background:rgba(47,101,218,.92); border-bottom:1px solid rgba(164,231,255,.25);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.site-header__inner{ height:60px; display:flex; align-items:center; justify-content:center; gap:1rem; }
/* no mobile mostra só o texto (marca + data) e esconde o botão — não cabem
   os dois numa barra de 60px sem apertar; o botão de conversão já se repete
   várias vezes ao longo da página. Do tablet pra cima os dois aparecem. */
.site-header__eyebrow{ display:block; font-size:.68rem; letter-spacing:.04em; color:#fff; opacity:.95; text-transform:uppercase; white-space:normal; line-height:1.3; text-align:center; }
.site-header .btn--ghost{ display:none; color:#fff; border-color:rgba(255,255,255,.55); }
.site-header .btn--ghost:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.8); }
@media (min-width:480px){
  .site-header__eyebrow{ white-space:nowrap; font-size:.78rem; letter-spacing:.06em; }
}
@media (min-width:720px){
  .site-header__inner{ justify-content:space-between; }
  .site-header__eyebrow{ display:block; }
  .site-header .btn--ghost{ display:inline-flex; }
}

/* ================= HERO ================= */
.hero{
  overflow:hidden; display:flex; align-items:center;
  min-height:100vh; min-height:100svh;
  padding-block: clamp(4.5rem,8vh,6rem) clamp(1.5rem,4vh,2.5rem);
  color:var(--text-on-dark); background-color:var(--primary-900);
  background-image:linear-gradient(90deg, rgba(11,25,51,.55), rgba(11,25,51,.1) 55%), url('img/hero-final.jpg');
  background-size:cover; background-position:70% center;
}
/* em telas estreitas e altas o cover corta demais a lateral — desloca o
   recorte pra manter o Rodrigo visível (ele fica ~70% pra direita na imagem) */
@media (max-width:700px){
  .hero{ background-position:78% center; }
}
.hero__grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:stretch; width:100%; }
.hero__content{ max-width:700px; }
.eyebrow{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-400); margin-bottom:1.2rem; }
.hero__headline{
  font-weight:600; letter-spacing:-.01em; text-wrap:balance;
  font-size:clamp(1.3rem, 1.4vw + 1rem, 28px); line-height:1.24; color:var(--text-on-dark);
  margin-bottom:1.1rem; max-width:548px;
}
/* .word não tem overflow:hidden — o círculo à mão precisa "vazar" da caixa da
   palavra "cadeira" sem ser cortado; a entrada usa fade+translateY, sem máscara. */
.word{ display:inline-block; vertical-align:top; padding-bottom:.14em; }
.word-inner{ display:inline-block; will-change:transform; }
.word-circle{ position:relative; }
.circle-svg{ position:absolute; left:-8%; top:-32%; width:118%; height:172%; pointer-events:none; overflow:visible; z-index:5; }
.circle-svg path{ stroke-dasharray:640; stroke-dashoffset:640; }

.badge-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.1rem; }
.hero__body{ font-weight:300; font-size:.98rem; line-height:1.45; color:var(--text-on-dark); opacity:.9; max-width:490px; margin-bottom:1.3rem; }
.hero__cta{ margin-bottom:2rem; }
.hero__urgency{ font-weight:300; font-size:.92rem; color:var(--accent-300); }
.hero__rule{ border:none; border-top:1px solid rgba(164,231,255,.18); margin-block:1.8rem; }

/* a foto do Rodrigo + asa já vêm prontas dentro do background da .hero —
   esse bloco só posiciona os badges flutuantes por cima da imagem, sempre
   na metade de baixo, longe do rosto */
.hero__visual{ position:relative; min-height:340px; }
.hero__mobile-photo{ display:none; }
.floating-badge{
  position:absolute; background:var(--grad-credencial); color:var(--primary-900);
  font-size:.78rem; font-weight:600; padding:.6em 1.1em; border-radius:var(--radius);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.35); white-space:nowrap;
}
.floating-badge--1{ top:52%; right:2%; }
.floating-badge--2{ left:-2%; top:70%; }
.floating-badge--3{ right:10%; bottom:4%; }

/* ================= DIAGNÓSTICO ================= */
.diagnostico{ text-align:center; }
.diagnostico > .wrap{ display:flex; flex-direction:column; align-items:center; }
.diagnostico__intro{ font-size:1.05rem; color:var(--accent-300); margin-bottom:.6rem; }
.diagnostico__title{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-section-title); line-height:1.2; color:var(--text-on-dark);
  margin-bottom:1.3rem; max-width:16em;
}
.diagnostico__body{ font-weight:300; font-size:1.1rem; line-height:1.6; max-width:38em; color:var(--text-on-dark); opacity:.9; margin-bottom:1.3rem; }

.pilares-grid{
  position:relative; display:grid; grid-template-columns:1fr; gap:1.4rem;
  margin-bottom:3.6rem; width:100%; max-width:760px;
}
/* conectores retos entre cada par de cards vizinhos (1-2, 3-4 na horizontal;
   1-3, 2-4 na vertical) — barra com brilho e um traço de luz correndo dentro
   dela em loop, dando a sensação de fluxo/energia entre os pilares */
.pilar-connector{
  position:absolute; z-index:0; border-radius:var(--radius);
  background:rgba(164,231,255,.26);
  box-shadow:0 0 16px rgba(164,231,255,.55), 0 0 3px rgba(164,231,255,.75);
  opacity:0; overflow:hidden;
}
/* fica pausada até o JS soltar no exato momento em que os conectores ficam
   visíveis — sem isso, o CSS já ia contando o ciclo desde o carregamento da
   página, e a sequência aparecia numa fase aleatória (fora de ordem) quando
   o usuário finalmente rolasse até aqui */
.pilar-connector span{ position:absolute; display:block; animation-timing-function:linear; animation-iteration-count:infinite; animation-play-state:paused; }
.pilar-connector--h{ height:5px; transform:translateY(-50%); }
.pilar-connector--h span{
  top:0; height:100%; width:55%; left:-55%;
  background:linear-gradient(90deg, transparent, #d3f2ff 45%, #a4e7ff 55%, transparent);
}
.pilar-connector--v{ width:5px; transform:translateX(-50%); }
.pilar-connector--v span{
  left:0; width:100%; height:55%; top:-55%;
  background:linear-gradient(180deg, transparent, #d3f2ff 45%, #a4e7ff 55%, transparent);
}
/* a luz percorre as 4 barras em sequência (1→2→4→3→1), formando um único
   "pacote" que roda em loop no perímetro dos 4 cards — cada barra fica
   ativa por 1/4 do ciclo e passa a vez pra próxima, sempre na mesma
   duração total (2.4s) pra fechar o loop sem emenda. */
.pilar-connector--h span{ animation-name:connectorFlowH; animation-duration:2.4s; }
.pilar-connector--v span{ animation-name:connectorFlowV; animation-duration:2.4s; }
[data-connector="h12"] span{ animation-delay:0s; }
[data-connector="v24"] span{ animation-delay:.6s; }
[data-connector="h34"] span{ animation-name:connectorFlowHRev; animation-delay:1.2s; }
[data-connector="v13"] span{ animation-name:connectorFlowVRev; animation-delay:1.8s; }
@keyframes connectorFlowH{ 0%{ left:-55%; } 22%{ left:100%; } }
@keyframes connectorFlowHRev{ 0%{ left:100%; } 22%{ left:-55%; } }
@keyframes connectorFlowV{ 0%{ top:-55%; } 22%{ top:100%; } }
@keyframes connectorFlowVRev{ 0%{ top:100%; } 22%{ top:-55%; } }
.pilar-card{
  position:relative; z-index:1; background:rgba(164,231,255,.05); border:1px solid rgba(164,231,255,.16);
  border-radius:var(--radius-card); padding:1.6rem 1.5rem; text-align:left;
  transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
@media (hover:hover){
  .pilar-card:hover{ transform:scale(1.03); background:rgba(164,231,255,.09); border-color:rgba(164,231,255,.3); }
}
.pilar-card__bracket{ position:absolute; width:18px; height:18px; opacity:.9; }
.pilar-card__bracket::before,.pilar-card__bracket::after{ content:""; position:absolute; background:var(--accent-500); }
.bracket--tl{ top:-1px; left:-1px; }
.bracket--tl::before{ width:100%; height:2px; top:0; left:0; }
.bracket--tl::after{ width:2px; height:100%; top:0; left:0; }
.bracket--br{ bottom:-1px; right:-1px; }
.bracket--br::before{ width:100%; height:2px; bottom:0; right:0; }
.bracket--br::after{ width:2px; height:100%; bottom:0; right:0; }
.pilar-card__n{ display:block; font-family:var(--font-display); font-weight:600; letter-spacing:.03em; color:var(--accent-400); font-size:1rem; margin-bottom:.6rem; }
.pilar-card p{ color:var(--text-on-dark); opacity:.85; font-size:.98rem; line-height:1.5; }

.diagnostico__closer{ font-size:1.15rem; color:var(--text-on-dark); margin-bottom:1.3rem; }

/* ================= COMPARATIVO (pin) ================= */
.comparativo-pin{
  position:relative;
  height:100vh; height:100svh;
  background-image:
    linear-gradient(rgba(11,25,51,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,25,51,.025) 1px, transparent 1px);
  background-size:56px 56px;
  background-position:center;
}
/* padding-top compensa a altura do header sticky (60px) — sem isso o
   conteúdo centralizado fica visualmente deslocado pra cima */
.comparativo-sticky{
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:2rem 2rem 2rem; padding-top:60px;
}
/* pilha: todos os blocos ocupam a mesma célula do grid e ficam empilhados,
   um substitui visualmente o outro conforme o scroll avança (crossfade) */
.comparativo__stack{ display:grid; width:100%; max-width:1000px; }
.comparativo__stack > *{ grid-area:1/1; text-align:center; }
.comp-col{ opacity:0; transform:scale(.94); }
.comp-col p{ font-size:clamp(1.8rem, 3.2vw + 1rem, 3.2rem); font-weight:300; line-height:1.35; text-wrap:balance; }
.comp-col strong em{ font-style:italic; font-weight:700; color:var(--primary-900); }
.comparativo__final{ opacity:0; transform:scale(.9); }
.comparativo__final p{
  font-family:var(--font-display); font-weight:600; text-wrap:balance;
  font-size:clamp(1.8rem, 3.4vw + 1rem, 3.75rem); line-height:1.15;
}
.comparativo__final .u{ text-decoration-color:var(--accent-700); }

/* ================= PILARES (horizontal pin) ================= */
.pilares-pin-wrap{ position:relative; }
.pilares-progress{
  position:sticky; top:60px; z-index:40; background:var(--primary-900); height:56px;
  border-bottom:1px solid rgba(164,231,255,.14);
}
.pilares-progress__inner{ height:100%; display:flex; align-items:center; gap:1.2rem; }
.pilares-progress__label{ font-size:.72rem; letter-spacing:.08em; color:var(--accent-400); text-transform:uppercase; flex:0 0 auto; }
.pilares-progress__numbers{ display:flex; gap:.9rem; font-family:var(--font-display); font-weight:600; font-size:.85rem; color:rgba(215,224,230,.35); flex:0 0 auto; }
.pilares-progress__numbers span{ transition:color .4s var(--ease); }
.pilares-progress__numbers span.is-active{ color:var(--accent-400); }
.pilares-progress__track{ position:relative; flex:1 1 auto; height:2px; background:rgba(164,231,255,.15); border-radius:var(--radius); overflow:hidden; }
.pilares-progress__fill{ position:absolute; inset:0; width:0%; background:var(--accent-500); }

.pilares-rail{ display:none; }
.pilares-pin{ overflow:hidden; padding-block:0; }
.pilares-track{ display:flex; will-change:transform; }
.pilar-panel{
  flex:0 0 100vw; display:flex; align-items:center;
  padding-block:3.5rem;
  background:linear-gradient(160deg, var(--primary-800), var(--primary-900));
}
.pilar-panel--alt{ background:linear-gradient(160deg, var(--primary-900), var(--primary-700)); }
/* quando o pilar já tem foto real, ela vira o fundo inteiro do painel (mesmo
   tratamento da hero) — o gradiente de overlay vem inline, junto da url() */
/* "contain" em vez de "cover": mostra a foto inteira, sem cortar nenhuma
   parte importante — o que sobrar de altura é preenchido pelo próprio
   degradê escuro do painel (as bordas da foto já são dessa mesma cor,
   então a transição fica invisível) */
/* foto vira textura de fundo: cobre o painel inteiro (cover), sempre ancorada
   no topo-centro (funciona em qualquer tela), com opacidade reduzida + leve
   blur pra não competir com o texto. O degradê de legibilidade fica numa
   camada separada, em opacidade cheia, por cima da foto e atrás do texto. */
.pilar-panel--photo{ position:relative; }
.pilar-panel__bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background-size:cover; background-position:top center; background-repeat:no-repeat;
  opacity:.6; filter:blur(3px); transform:scale(1.03);
}
.pilar-panel--photo::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(11,25,51,.85), rgba(11,25,51,.55) 55%, rgba(11,25,51,.3));
}
.pilar-panel__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1fr; gap:2rem; align-items:center;
}
.pilar-panel__text{ max-width:640px; max-height:100%; display:flex; flex-direction:column; }
/* rede de segurança: se ainda assim não couber (telas baixas), rola só o
   texto internamente em vez de cortar conteúdo invisivelmente — fica num
   filho separado do botão pra não cortar também o glow do hover dele */
.pilar-panel__copy{ overflow-y:auto; padding-right:.3rem; min-height:0; }
.pilar-panel__visual{ display:flex; align-items:center; justify-content:center; height:100%; overflow:hidden; }
.pilar-panel__num{
  font-family:var(--font-display); font-weight:700; color:var(--accent-500);
  font-size:min(40vw, 32rem); line-height:1; opacity:.12; user-select:none;
}
.pilar-panel__label{ display:block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-400); margin-bottom:.6rem; }
.pilar-panel__title{
  font-weight:600; letter-spacing:-.01em; font-size:clamp(1.5rem, 1.7vw + 1rem, 2rem);
  line-height:1.2; color:var(--text-on-dark); margin-bottom:.7rem;
}
.pilar-panel__subtitle{ font-weight:400; font-size:.95rem; line-height:1.5; max-width:34em; color:var(--accent-200); margin-bottom:.8rem; }
.pilar-panel__wedo{ display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-400); margin-bottom:.5rem; }
.checklist{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.checklist li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; line-height:1.35; color:var(--text-on-dark); }
/* só as listas dentro dos painéis de pilar partem invisíveis — são reveladas via
   animateChecklist() no JS quando o painel fica ativo no scroll horizontal */
.pilar-panel__inner .checklist li{ opacity:0; transform:translateX(-10px); }
.check{ color:var(--accent-500); font-weight:700; flex:0 0 auto; }
.pilar-panel__closer{ font-weight:400; font-size:1.05rem; line-height:1.4; color:var(--text-on-dark); }
.pilar-panel__closer strong{ color:var(--accent-400); }

/* botão do pilar 4 vive junto do texto do próprio painel — some com ele
   no scroll horizontal em vez de aparecer solto numa dobra vazia depois */
.pilar-panel__cta{ margin-top:1.1rem; }

/* ================= AUTORIDADE ================= */
.autoridade__grid{ display:grid; grid-template-columns:1fr; gap:3rem; margin-bottom:clamp(3.5rem,7vw,6rem); align-items:center; }
.autoridade__text h2{ font-size:var(--fs-section-title); font-weight:600; line-height:1.25; color:var(--text-on-dark); margin-bottom:1.4rem; }
.autoridade__text h2 strong{ font-weight:600; }
.autoridade__text h2 em{ font-style:italic; color:var(--accent-300); }
.autoridade__lead{ font-size:1.15rem; color:var(--accent-300); margin-bottom:1.2rem; }
.autoridade__text p{ font-size:1.05rem; line-height:1.7; color:var(--text-on-dark); opacity:.88; max-width:36em; }
.autoridade__visual{
  max-width:400px; width:100%; margin-inline:auto; position:relative;
  aspect-ratio:4/5; border-radius:var(--radius-card); overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
}
@media (min-width:800px){
  .autoridade__visual{ max-width:460px; }
  .credential-list{ gap:.55rem; padding:1.2rem 1.2rem 1.4rem; }
  .credential-list li{ font-size:.78rem; padding:.6em .8em; }
}
/* 4 fotos empilhadas na mesma célula, uma ativa (opacity:1) por vez —
   o JS troca qual fica ativa a cada poucos segundos, com crossfade. */
.autoridade__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center; display:block; opacity:0;
}
.autoridade__photo.is-active{ opacity:1; }
/* degradê só na base da foto — apenas o suficiente pra dar contraste aos
   chips, sem escurecer o rosto nem o essencial da pose */
.autoridade__visual::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(11,25,51,.92) 0%, rgba(11,25,51,.55) 26%, rgba(11,25,51,0) 52%);
}
/* credenciais viram uma nuvem de chips soltos na própria base da foto —
   não usam espaço além dela e ficam abaixo da altura do rosto/ombros */
.credential-list{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  display:grid; grid-template-columns:1fr 1fr; gap:.4rem;
  padding:1rem 1rem 1.2rem;
}
/* o 5º item (ímpar) ocupa a linha inteira sozinho, fechando as duas
   colunas sempre parelhas em vez de sobrar solto */
.credential-list li:last-child{ grid-column:1 / -1; }
.credential-list li{
  font-size:.62rem; font-weight:500; letter-spacing:.01em; color:var(--text-on-dark);
  background:rgba(11,25,51,.55); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:.55em .7em; border-radius:var(--radius); opacity:0; transform:translateY(14px); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:center;
}
.autoridade__punch{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.autoridade__punch p{ font-size:clamp(1.3rem, 1.8vw + .8rem, 1.9rem); font-weight:400; color:var(--text-on-dark); line-height:1.4; text-wrap:balance; }
.autoridade__punch p strong{ font-weight:700; }
.autoridade__punch .btn{ margin-top:.6rem; }

/* ================= PROVA SOCIAL ================= */
.prova-social{ text-align:center; }
.prova-social h2{
  font-size:var(--fs-section-title); font-weight:600; line-height:1.25;
  color:var(--text-on-dark); max-width:18em; margin-inline:auto; margin-bottom:1.8rem;
}
.prova-social h2 strong{ font-weight:600; color:var(--accent-300); }
.depoimentos-carousel{ position:relative; width:100%; padding-inline:2.6rem; text-align:left; }
@media (min-width:700px){ .depoimentos-carousel{ padding-inline:3.4rem; } }
.depoimentos-viewport{ overflow:hidden; }
.depoimentos-track{ display:flex; align-items:stretch; gap:1.2rem; will-change:transform; }
.depoimentos-track .depoimento-card{ flex:0 0 100%; }
@media (min-width:700px){ .depoimentos-track .depoimento-card{ flex:0 0 calc((100% - 1.2rem)/2); } }
@media (min-width:1000px){ .depoimentos-track .depoimento-card{ flex:0 0 calc((100% - 2*1.2rem)/3); } }
.depoimentos-carousel .carrossel__arrow{ background:rgba(164,231,255,.12); border:1px solid rgba(164,231,255,.3); }
.depoimentos-carousel .carrossel__arrow:hover{ background:rgba(164,231,255,.22); }
.depoimentos-carousel .carrossel__arrow--prev{ left:0; }
.depoimentos-carousel .carrossel__arrow--next{ right:0; }
.depoimentos-carousel .carrossel__arrow:disabled{ opacity:.3; cursor:default; pointer-events:none; }
.depoimento-card{
  position:relative; background:rgba(164,231,255,.05); border:1px solid rgba(164,231,255,.16);
  border-radius:var(--radius-card); padding:1.4rem 1.5rem 1.3rem;
  transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
@media (hover:hover){
  /* sem scale aqui: o card vive dentro de um carrossel com overflow:hidden
     (necessário pro slide), então qualquer transform que cresça a caixa
     fica cortado na borda — só troca cor/fundo no hover, nunca o tamanho */
  .depoimento-card:hover{ background:rgba(164,231,255,.09); border-color:rgba(164,231,255,.3); }
}
.depoimento-card__quote{
  display:block; font-family:var(--font-display); font-size:2.2rem; line-height:1;
  color:var(--accent-500); opacity:.5; margin-bottom:.1rem;
}
.depoimento-card p{ color:var(--text-on-dark); opacity:.85; font-size:.92rem; line-height:1.45; margin-bottom:.9rem; }
.depoimento-card__nome{
  display:block; font-family:var(--font-display); font-weight:600; font-size:.85rem;
  letter-spacing:.02em; color:var(--accent-400);
}

/* ================= OFERTA ================= */
.oferta{ text-align:center; padding-bottom:clamp(2.5rem,5vw,4rem); }
.oferta > .wrap{ display:flex; flex-direction:column; align-items:center; }
.oferta h2{ font-size:var(--fs-section-title); font-weight:600; line-height:1.25; max-width:20em; margin-bottom:1.2rem; }
.oferta h2 strong{ color:var(--accent-700); font-weight:600; }
.oferta__vagas{ font-size:1.05rem; line-height:1.6; margin-bottom:3rem; max-width:none; }
@media (min-width:960px){ .oferta__vagas{ white-space:nowrap; } }
.oferta__note{ font-size:.98rem; line-height:1.6; margin-bottom:2.6rem; opacity:.85; }
.oferta-grid{ display:grid; grid-template-columns:1fr; gap:1.2rem; margin-bottom:3rem; width:100%; text-align:left; }
.offer-card{
  background:#fff; border:1px solid rgba(11,25,51,.08); border-radius:var(--radius-card);
  padding:1.6rem 1.5rem; box-shadow:0 14px 34px -18px rgba(11,25,51,.25);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.offer-card:hover{ border-color:var(--accent-700); background:var(--accent-50); transform:translateY(-3px) scale(1.02); }
.offer-card__n{ display:block; font-family:var(--font-display); font-weight:600; color:var(--accent-700); font-size:.95rem; margin-bottom:.6rem; }
.offer-card h3{ font-size:1.08rem; font-weight:600; margin-bottom:.5rem; line-height:1.3; }
.offer-card p{ font-size:.92rem; line-height:1.55; opacity:.75; }
.logistics{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:2.6rem; font-size:.98rem; }

/* ================= CRONOGRAMA ================= */
.cronograma{ text-align:center; padding-block:clamp(2rem,4vw,3.4rem) clamp(3rem,6vw,5rem); }
.cronograma > .wrap{ display:flex; flex-direction:column; align-items:center; }
.cronograma h2{ font-size:var(--fs-section-title); font-weight:600; line-height:1.25; margin-bottom:.8rem; max-width:18em; }
.cronograma > .wrap > p{ font-size:1.02rem; opacity:.75; margin-bottom:2.6rem; }
.cronograma-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; width:100%; text-align:left; }
.cronograma-day{
  background:#fff; border:1.5px solid var(--accent-200); border-radius:var(--radius-card); padding:2rem;
  box-shadow:0 20px 40px -24px rgba(11,25,51,.3);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
@media (hover:hover){
  .cronograma-day:hover{
    transform:translateY(-4px); border-color:var(--accent-600);
    box-shadow:0 26px 48px -22px rgba(0,129,206,.35);
  }
}
.cronograma-day h3{
  font-family:var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:.02em;
  color:var(--primary-900); margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:2px solid var(--accent-100);
}
.schedule-list{ display:flex; flex-direction:column; gap:0; position:relative; }
.schedule-list li{
  position:relative; display:grid; grid-template-columns:3.4em 1.8em 1fr; align-items:center;
  font-size:.92rem; padding-block:.55rem;
}
.schedule-list li::before{
  content:''; position:absolute; left:calc(3.4em + .9em - .5px); top:0; bottom:0; width:1px; background:rgba(11,25,51,.14);
}
.schedule-list li:first-child::before{ top:50%; }
.schedule-list li:last-child::before{ bottom:50%; }
.schedule-list .time{ font-weight:700; color:var(--primary-900); }
.schedule-list .arrow{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:1.8em; height:1.8em; border-radius:50%; background:var(--accent-100); color:var(--accent-700);
  font-size:.85em;
}
.cronograma__carrossel--full{ width:100%; aspect-ratio:16/8; }

.cronograma__carrossel{ position:relative; aspect-ratio:4/3; border-radius:var(--radius-card); overflow:hidden; }
.carrossel__track{ display:flex; width:100%; height:100%; will-change:transform; }
.carrossel__slide{ flex:0 0 100%; height:100%; }
.carrossel__slide img{ width:100%; height:100%; object-fit:cover; }
.carrossel__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:2.4rem; height:2.4rem; border-radius:var(--radius); border:none; cursor:pointer;
  background:rgba(11,25,51,.55); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.carrossel__arrow:hover{ background:var(--accent-700); transform:translateY(-50%) scale(1.08); }
.carrossel__arrow svg{ width:1.2em; height:1.2em; }
.carrossel__arrow--prev{ left:.8rem; }
.carrossel__arrow--next{ right:.8rem; }
.carrossel__dots{ position:absolute; bottom:.9rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; gap:.5rem; }
.carrossel__dots button{
  width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.5); transition:background .3s var(--ease), transform .3s var(--ease);
}
.carrossel__dots button.is-active{ background:#fff; transform:scale(1.25); }

/* ================= PREÇO / CTA FINAL ================= */
.preco{ overflow:hidden; text-align:center; }
.preco__inner{ display:flex; flex-direction:column; align-items:center; }
.preco__text{ max-width:640px; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.preco__text h2{ font-size:var(--fs-section-title); font-weight:600; line-height:1.2; color:var(--text-on-dark); margin-bottom:1.2rem; }
.preco__text p{ font-size:1.08rem; line-height:1.6; color:var(--text-on-dark); opacity:.85; }
.price-card{
  background:var(--grad-credencial); color:var(--primary-900); border-radius:var(--radius-card);
  padding:clamp(2.2rem,4vw,3.2rem); width:100%; max-width:720px; text-align:left;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
}
.price-card__desc{ font-size:1.05rem; margin-bottom:1.4rem; opacity:.85; text-align:center; }
.price-card__price-row{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding-block:1.4rem; margin-bottom:1.8rem; border-block:1px solid rgba(11,25,51,.12);
}
.price-card__old{ text-decoration:line-through; opacity:.55; font-size:1.35rem; }
.price-card__price{
  font-family:var(--font-display); font-weight:600; width:100%; text-align:center; white-space:nowrap;
  font-size:clamp(1.8rem, 4.6vw + 1rem, 4.4rem); line-height:1;
}
.price-card__installment{ font-size:1rem; opacity:.65; margin-top:.2rem; }
.checklist--price{ margin-bottom:1.6rem; align-items:center; }
.checklist--price li{ color:var(--primary-900); font-size:1rem; justify-content:center; }
.checklist--price .check{ color:var(--accent-700); }
.price-card__pending{ text-align:center; margin-block:0 1.6rem; }
.price-card__cta{ width:100%; justify-content:center; margin-bottom:1.1rem; font-size:1.05rem; padding:1.2em 1.7em; }
.price-card .hero__urgency{ color:var(--primary-700); text-align:center; }

/* ================= FAQ ================= */
.faq{ text-align:center; }
.faq > .wrap{ display:flex; flex-direction:column; align-items:center; }
.faq h2{ font-size:var(--fs-section-title); font-weight:600; margin-bottom:2.8rem; }
.faq-list{ display:flex; flex-direction:column; gap:1rem; width:100%; text-align:left; }
.faq-item{
  border:1px solid rgba(11,25,51,.1); border-radius:var(--radius-card); overflow:hidden;
  background:#fff; transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .35s var(--ease);
}
.faq-item:hover{ border-color:var(--accent-700); box-shadow:0 12px 28px -18px rgba(11,25,51,.3); }
.faq-item.is-open{ background:var(--grad-estrutura); border-color:var(--primary-900); }
.faq-item__q{
  width:100%; display:flex; align-items:center; gap:1.2rem;
  background:none; border:none; text-align:left; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:1.05rem; color:var(--primary-900);
  padding:1.5rem 1.8rem; transition:color .3s var(--ease);
}
.faq-item__q span{ flex:1 1 auto; }
.faq-item__icon{ width:1.3em; height:1.3em; flex:0 0 auto; transition:transform .4s var(--ease); color:var(--accent-700); }
.faq-item.is-open .faq-item__icon{ transform:rotate(180deg); color:var(--accent-400); }
.faq-item.is-open .faq-item__q{ color:var(--text-on-dark); }
.faq-item__a{ height:0; overflow:hidden; }
.faq-item__a p{ padding:0 1.8rem 1.6rem; font-size:.98rem; line-height:1.65; opacity:.75; max-width:60ch; }
.faq-item.is-open .faq-item__a p{ color:var(--text-on-dark); opacity:.9; }

/* ================= FOOTER ================= */
.site-footer{ background:var(--primary-900); color:var(--text-on-dark); padding-block:2rem; }
.site-footer__inner{
  display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center;
}
.site-footer__logo{ height:28px; width:auto; opacity:.9; }
.site-footer__text{ opacity:.6; font-size:.82rem; letter-spacing:.02em; line-height:1.6; }
.site-footer__text p{ margin:0; }
.site-footer__text a{
  color:inherit; text-decoration:underline; text-decoration-color:var(--accent-500);
  text-underline-offset:.12em; text-decoration-thickness:.06em; transition:opacity .25s var(--ease);
}
.site-footer__text a:hover{ opacity:.75; }
@media (min-width:640px){
  .site-footer__inner{ flex-direction:row; justify-content:space-between; text-align:left; }
}

/* abaixo de 800px o JS não ativa o pin+scroll horizontal dos 4 pilares
   (só roda a partir de min-width:800px, junto com a barra de progresso) —
   sem isso, os painéis ficavam lado a lado fora da tela e só o 1º pilar
   era alcançável. Aqui eles empilham na vertical, como uma seção normal,
   e a barra de progresso (que só a versão desktop atualiza) fica escondida. */
@media (max-width:799px){
  /* hero: no desktop a foto do Rodrigo é o background inteiro da dobra com o
     texto sobreposto por cima (funciona pq a tela é larga e o texto cai na
     metade escura à esquerda). Numa coluna estreita isso vira "texto em cima
     de foto", ilegível e apertado. No mobile a foto vira um bloco próprio no
     topo (recorte vertical bem fechado nele, mesma imagem) e o texto desce
     pra baixo, centralizado, em fundo sólido — cabeçalho > foto > texto. */
  .hero{ min-height:0; display:block; background-image:none; padding-block:0 2.5rem; }
  .hero__mobile-photo{
    display:block; width:100%; aspect-ratio:4/5;
    background-image:linear-gradient(180deg, rgba(11,25,51,0) 68%, rgba(11,25,51,.95)), url('img/hero-final.jpg');
    background-size:cover; background-position:74% center;
  }
  .hero__grid{ display:block; }
  /* o texto começa já em cima do degradê da foto (por volta de onde os
     braços do Rodrigo aparecem), não depois dela — margem negativa puxa o
     bloco de texto pra cima, sobre a parte já escurecida pelo degradê. */
  .hero__content{ max-width:none; padding-inline:1.2rem; text-align:center; margin-top:-9rem; position:relative; z-index:1; }
  .hero__headline, .hero__body{ max-width:none; margin-inline:auto; }
  .hero__rule, .hero__visual{ display:none; }

  /* botão nunca pode quebrar em 2 linhas, em nenhum lugar do site — reduz
     fonte/padding só o suficiente pra sempre caber numa coluna de celular. */
  .btn--cta{ font-size:.86rem; padding:1em 1.4em; white-space:nowrap; }

  /* pilares: o pin + crossfade horizontal do desktop não converte bem pro
     toque (trava, o texto de painéis diferentes fica ilegível sobreposto
     durante a transição, e forçar 100vh por painel deixa espaço vazio
     enorme quando o conteúdo é curto). No mobile os 4 viram cards normais,
     um embaixo do outro, altura natural — e o "efeito" migra pra uma
     barrinha vertical do lado, que vai enchendo de azul conforme rola,
     em vez da barra horizontal + crossfade que só fazem sentido na tela
     larga. */
  .pilares-progress{ display:none; }
  .pilares-pin{ height:auto; padding-top:1.5rem; }
  .pilares-track{ display:block; position:relative; }
  .pilares-rail{
    display:block; position:absolute; top:.3rem; bottom:.3rem; left:1.1rem; z-index:3;
    width:3px; background:rgba(215,224,230,.22); border-radius:2px; overflow:hidden;
  }
  .pilares-rail__fill{
    position:absolute; top:0; left:0; right:0; height:0%;
    background:var(--accent-500);
  }
  .pilar-panel{
    flex:none; width:100%; height:auto; align-items:flex-start;
    padding-block:2rem; opacity:1;
  }
  .pilar-panel__inner{ padding-left:2.6rem; }
  /* no card de preço, item sem quebra de linha centralizava diferente dos
     que quebram em 2-3 linhas (cada um "encolhia" pro próprio conteúdo) —
     deixando o check desalinhado entre os itens. Lista inteira estica e
     cada item alinha à esquerda, ficando com o check sempre na mesma coluna. */
  .checklist--price{ align-items:stretch; }
  .checklist--price li{ justify-content:flex-start; }
  /* "quem sou eu": título e corpo de texto centralizados no mobile */
  .autoridade__text{ text-align:center; }
  .autoridade__text p{ margin-inline:auto; }
  /* bug real confirmado: a animação de entrada com deslocamento vertical
     (translateY) desses grids trava no meio do caminho pros itens mais
     tardios do stagger — cada card fica "congelado" numa posição diferente,
     o que lê como espaçamento inconsistente entre eles (ex: gap 1→2 bem
     maior que gap 2→3). O fade em opacidade continua normalmente; só o
     translateY quebrado é neutralizado. */
  .oferta-grid > *, .cronograma-grid > *, .pilar-card{ transform:none !important; }
  /* quebras de linha manuais (<br>) que no desktop caem num ponto bonito da
     frase — na coluna estreita do mobile o texto já quebra bem antes, e a
     quebra forçada empurra 1-2 palavras soltas pra linha seguinte (orfã).
     Texto flui livre, sem quebra manual, abaixo do breakpoint de desktop. */
  br.br-desktop{ display:none; }
  /* padrão único de corpo de texto no mobile — hoje cada parágrafo/lista
     tinha seu próprio tamanho (.92rem até 1.15rem), inconsistente entre
     dobras. 16px pra tudo que é texto corrido (não título, não label/eyebrow
     em uppercase, não valor em destaque tipo preço). */
  .hero__body, .diagnostico__body, .diagnostico__intro, .pilar-card p,
  .pilar-panel__subtitle, .pilar-panel__closer, .checklist li,
  .autoridade__text p, .autoridade__lead, .depoimento-card p,
  .oferta__vagas, .oferta__note, .offer-card p, .logistics,
  .cronograma > .wrap > p, .preco__text p, .price-card__desc,
  .checklist--price li, .faq-item__a p{
    font-size:16px;
  }
}

/* abaixo de 700px os 4 cards de pilares empilham em 1 coluna (senão o texto
   força a coluna a crescer e o card da direita vaza pra fora da tela) — as
   barras de conexão foram desenhadas pra um grid 2x2 e não fazem sentido
   numa lista vertical de 1 coluna, então somem junto. */
@media (max-width:699px){
  .pilar-connector{ display:none; }
}

/* =========================================================================
   BREAKPOINTS
   ========================================================================= */
@media (min-width:700px){
  .pilares-grid{ gap:1.6rem; grid-template-columns:repeat(2,1fr); }
  .comparativo__cols{ grid-template-columns:repeat(3,1fr); }
  .oferta-grid{ grid-template-columns:repeat(2,1fr); }
  .cronograma-grid{ grid-template-columns:repeat(2,1fr); }
  .cronograma__carrossel--full{ aspect-ratio:16/6; }
}

@media (min-width:800px){
  /* a partir daqui o JS ativa o pin horizontal. O elemento fixado ocupa a
     viewport INTEIRA (senão sobra uma fresta embaixo — o GSAP fixa a partir
     do topo real da tela, não do que sobra visualmente sob a barra sticky).
     O conteúdo é que recebe padding-top pra não ficar atrás do header+barra. */
  .pilares-pin{ height:100vh; height:100svh; }
  .pilares-track{ height:100%; }
  .pilar-panel{ padding-block:0; padding-top:116px; padding-bottom:5rem; height:100%; }
  .pilar-panel__inner{ grid-template-columns:1.35fr .65fr; gap:3rem; }
  .pilar-panel__visual{ order:2; }
  /* pilar 4 tem mais conteúdo (título de 3 linhas + botão) que os outros 3 —
     sem isso, a centralização vertical (que depende da altura do conteúdo)
     deixa o rótulo dele mais alto que o dos outros painéis. Reduzir só o
     padding-bottom dele reequilibra a centralização pra alinhar com o
     restante, em qualquer altura de tela — troca-se um pouco da margem do
     botão pro final da dobra por esse alinhamento. */
  [data-pilar-panel="4"]{ padding-bottom:23px; }
}

@media (min-width:960px){
  .hero__grid{ grid-template-columns:1.15fr .85fr; gap:4rem; }
  .hero__rule{ display:none; }
  .autoridade__grid{ grid-template-columns:1fr 1fr; gap:3.5rem; }
  .oferta-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}