/* ==========================================================================
   Fox Edu — Reforço Escolar Lucrativo
   Design system v3 — base clara e arejada, cor como acento,
   três âncoras escuras para dar ritmo à leitura.
   ========================================================================== */

@font-face{font-family:RobotoLocal;src:url("./assets/roboto-kfo7cnqeu92fr1me7ksn66agldtyluama3yuba.woff2") format("woff2");font-weight:400 900;font-display:swap}

/* --------------------------------------------------------------------------
   1 · Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Marca */
  --purple:#4c207f;
  --purple-700:#3a1763;
  --purple-900:#231040;
  --purple-tint:#f3eefa;
  --orange:#ff7300;
  --orange-700:#dd5f00;
  --orange-tint:#fff2e6;
  --sky:#08a7ee;
  --sky-700:#0783be;
  --blue:#3157a4;
  --green:#1fb862;
  --green-700:#16864a;
  --green-tint:#eaf8f0;

  /* Superfícies */
  --canvas:#fff;
  --tint:#f6f3fc;
  --ink:#191426;
  --ink-2:#4a4459;
  --ink-3:#726c81;
  --hair:rgba(76,32,127,.11);
  --hair-2:rgba(76,32,127,.06);

  /* Tipografia */
  --sans:RobotoLocal,Roboto,"Segoe UI",Arial,sans-serif;
  --display:var(--sans);
  --fs-micro:.73rem;
  --fs-sm:.9rem;
  --fs-body:clamp(1rem,.97rem + .22vw,1.09rem);
  --fs-lead:clamp(1.08rem,1.01rem + .42vw,1.3rem);
  --fs-h3:clamp(1.25rem,1.09rem + .78vw,1.75rem);
  --fs-h2:clamp(1.75rem,1.33rem + 1.9vw,2.95rem);
  --fs-h1:clamp(2.05rem,1.35rem + 2.6vw,3.4rem);

  /* Ritmo */
  --section:clamp(64px,7vw,124px);
  --gutter:clamp(18px,4vw,40px);
  --stack:clamp(22px,2.4vw,30px);
  --pad:clamp(24px,3vw,44px);

  /* Formas */
  --r-sm:12px;
  --r:18px;
  --r-lg:24px;
  --r-xl:32px;
  --pill:999px;

  /* Profundidade — sombras suaves e em camadas */
  --sh-1:0 1px 2px rgba(25,20,38,.04),0 2px 8px rgba(25,20,38,.04);
  --sh-2:0 2px 4px rgba(25,20,38,.04),0 8px 24px rgba(25,20,38,.06);
  --sh-3:0 4px 8px rgba(25,20,38,.05),0 18px 48px rgba(25,20,38,.1);
  --sh-4:0 8px 16px rgba(25,20,38,.06),0 32px 80px rgba(25,20,38,.16);

  /* Movimento */
  --ease:cubic-bezier(.22,.85,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t:.3s;

  --header:96px;
}

/* --------------------------------------------------------------------------
   2 · Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--purple) #ece7f5}
body{
  margin:0;
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.62;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
  overflow-x:hidden;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px}
button{font:inherit;color:inherit}
svg{flex:0 0 auto}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}

/* Fallback caso o script de ícones não carregue */
i[data-lucide]:empty::before{display:inline-block;font-style:normal;line-height:1}
i[data-lucide="arrow-right"]:empty::before{content:"→"}
i[data-lucide="arrow-down"]:empty::before{content:"↓"}
i[data-lucide="arrow-up"]:empty::before{content:"↑"}
i[data-lucide="chevron-left"]:empty::before{content:"‹"}
i[data-lucide="chevron-right"]:empty::before{content:"›"}
i[data-lucide="mail"]:empty::before{content:"✉"}
i[data-lucide="share-2"]:empty::before{content:"↗"}
i[data-lucide="message-circle"]:empty::before,
i[data-lucide="messages-square"]:empty::before{content:"✆"}
.benefit-grid i[data-lucide]:empty::before{content:"◆"}
.check-list i[data-lucide]:empty::before{content:"✓"}

/* --------------------------------------------------------------------------
   3 · Tipografia
   -------------------------------------------------------------------------- */
h1,h2,h3{margin:0 0 .5em;font-family:var(--display);letter-spacing:-.025em;text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:400;line-height:1.04;text-transform:uppercase;color:var(--purple)}
h1 strong{font-weight:900}
h2{font-size:var(--fs-h2);font-weight:800;line-height:1.1;color:var(--purple)}
h3{font-size:var(--fs-h3);font-weight:800;line-height:1.22;color:var(--purple)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
p,li{font-size:var(--fs-body);line-height:1.65}
strong{font-weight:800}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2)}

/* Rótulo de seção: quadradinho laranja + texto espaçado */
.chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 18px;
  font-family:var(--sans);
  font-size:var(--fs-micro);
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1;
  color:var(--purple);
}
.chip::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--orange);rotate:45deg}
.benefits .chip::after{content:"";width:9px;height:9px;border-radius:2px;background:var(--orange);rotate:45deg}
.pillars .chip::after{content:"";width:9px;height:9px;border-radius:2px;background:var(--orange);rotate:45deg}
.center .chip{justify-content:center}

.eyebrow{
  font-family:var(--sans);
  font-size:var(--fs-micro);
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
}

/* --------------------------------------------------------------------------
   4 · Layout
   -------------------------------------------------------------------------- */
.container{width:min(1180px,100% - var(--gutter)*2);margin-inline:auto}
.narrow{width:min(860px,100% - var(--gutter)*2);margin-inline:auto}
.section{
  position:relative;
  isolation:isolate;
  padding-block:var(--section);
  overflow-x:hidden;
  overflow-x:clip;
  scroll-margin-top:calc(var(--header) + 16px);
}
.center{text-align:center}
.hidden{display:none!important}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4vw,64px);align-items:center}
.split>*{min-width:0}
.rounded-media{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-3)}

/* Seções tingidas — alternância suave, sem blocos saturados */
.spaces,.pillars,.decision{background:var(--tint)}
.spaces::before,.pillars::before,.decision::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(60rem 30rem at 50% -10%,rgba(76,32,127,.05),transparent 70%);
}

/* Âncoras escuras */
.finance,.offer{color:#fff}
.finance{background:var(--purple)}
.offer{background:var(--purple)}
.finance::before,.offer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(40rem 24rem at 12% 0,rgba(8,167,238,.2),transparent 70%),
    radial-gradient(36rem 22rem at 92% 100%,rgba(255,115,0,.14),transparent 70%);
}
.finance::before{background:radial-gradient(40rem 24rem at 92% 100%,rgba(255,115,0,.1),transparent 70%)}
.offer::before{background:radial-gradient(40rem 24rem at 92% 100%,rgba(255,115,0,.1),transparent 70%)}
.finance h2,.finance h3,.offer h2,.offer h3{color:#fff}

/* Âncora de cor da marca */
.agenda{color:#fff;background:var(--sky)}
.agenda::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:transparent;
}
.agenda h2,.agenda h3{color:#fff}
.agenda p{color:rgba(255,255,255,.93)}

/* --------------------------------------------------------------------------
   5 · Movimento
   -------------------------------------------------------------------------- */
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes acc-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);
}
.reveal.reveal-left{transform:translateX(-24px)}
.reveal.reveal-right{transform:translateX(24px)}
.reveal.reveal-scale{transform:scale(.97)}
.reveal.is-visible{opacity:1;transform:none}
.stagger>.reveal:nth-child(2){transition-delay:.06s}
.stagger>.reveal:nth-child(3){transition-delay:.12s}
.stagger>.reveal:nth-child(4){transition-delay:.18s}
.stagger>.reveal:nth-child(5){transition-delay:.24s}
.stagger>.reveal:nth-child(6){transition-delay:.3s}
.stagger>.reveal:nth-child(7){transition-delay:.36s}
.stagger>.reveal:nth-child(8){transition-delay:.42s}

/* --------------------------------------------------------------------------
   6 · Header · progresso · flutuantes
   -------------------------------------------------------------------------- */
.scroll-progress{position:fixed;inset:0 0 auto;height:3px;z-index:2000;pointer-events:none}
.scroll-progress span{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:var(--orange);
}
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  height:var(--header);
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:height var(--t) var(--ease),border-color var(--t),box-shadow var(--t);
}
.site-header.is-scrolled{height:70px;border-bottom-color:var(--hair);box-shadow:0 6px 24px rgba(25,20,38,.05)}
.site-header a{display:flex;padding:6px;text-decoration:none;color:inherit}
/* Escala em vez de largura: transform roda no compositor e não dispara
   layout a cada quadro, que era parte do tremor ao voltar ao topo. */
.site-header .brand-text{
  display:inline-flex;
  align-items:baseline;
  gap:0;
  font-family:"Sora",var(--sans);
  font-size:clamp(22px,3vw,30px);
  font-weight:800;
  letter-spacing:-.5px;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none;
  transform-origin:center;
  transition:transform var(--t) var(--ease);
}
.site-header .brand-fox{color:var(--orange)}
.site-header .brand-edu{color:var(--purple)}
.site-header.is-scrolled .brand-text{transform:scale(.78)}

.to-top{
  position:fixed;
  right:clamp(16px,2vw,28px);
  bottom:calc(clamp(16px,2vw,28px) + env(safe-area-inset-bottom));
  z-index:990;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid var(--hair);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  color:var(--purple);
  cursor:pointer;
  box-shadow:var(--sh-2);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity var(--t),transform var(--t) var(--ease),background var(--t),color var(--t);
}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--purple);color:#fff}
.to-top svg{width:19px;height:19px}

footer{
  background:var(--purple);
  color:rgba(255,255,255,.7);
  text-align:center;
  padding:36px var(--gutter);
  font-size:var(--fs-sm);
  letter-spacing:.02em;
}

/* --------------------------------------------------------------------------
   7 · Botões
   -------------------------------------------------------------------------- */
.cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  max-width:100%;
  min-height:56px;
  padding:17px clamp(24px,2.6vw,36px);
  border:0;
  border-radius:var(--pill);
  background:var(--orange);
  color:#fff;
  font-family:var(--display);
  font-size:clamp(1rem,.94rem + .35vw,1.2rem);
  font-weight:900;
  line-height:1.15;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(221,95,0,.3),0 10px 24px rgba(255,115,0,.28);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t);
}
.cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3) 48%,transparent 66%);
  transform:translateX(-130%);
  transition:transform .8s var(--ease-out);
}
.cta:hover{transform:translateY(-2px);background:var(--orange-700);box-shadow:0 1px 2px rgba(221,95,0,.3),0 16px 34px rgba(255,115,0,.34)}
.cta:hover::before{transform:translateX(130%)}
.cta:active{transform:translateY(0)}
.cta svg{width:20px;height:20px;transition:transform var(--t) var(--ease)}
.cta:hover svg{transform:translateX(4px)}
.cta.secondary{background:var(--green);box-shadow:0 1px 2px rgba(20,140,74,.3),0 10px 24px rgba(31,184,98,.26)}
.cta.secondary:hover{background:#18a355;box-shadow:0 1px 2px rgba(20,140,74,.3),0 16px 34px rgba(31,184,98,.3)}
.cta-block{display:flex;justify-content:center;margin-top:clamp(34px,4vw,54px)}

/* --------------------------------------------------------------------------
   8 · Hero
   -------------------------------------------------------------------------- */
.hero{
  padding-top:clamp(44px,5vw,80px);
  padding-bottom:clamp(50px,5.5vw,90px);
  text-align:center;
  background:var(--canvas);
}
.hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 auto;
  height:min(620px,72vh);
  background:
    radial-gradient(48rem 26rem at 50% -6rem,rgba(76,32,127,.09),transparent 72%),
    radial-gradient(30rem 18rem at 88% 4rem,rgba(8,167,238,.09),transparent 70%),
    radial-gradient(26rem 16rem at 8% 8rem,rgba(255,115,0,.07),transparent 70%);
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:0;
  width:min(1100px,96vw);
  height:min(460px,54vh);
  transform:translateX(-50%);
  background-image:radial-gradient(rgba(76,32,127,.14) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 25%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 60% 70% at 50% 25%,#000,transparent 75%);
  opacity:.5;
}
.hero h1{position:relative;max-width:min(920px,90%);margin:0 auto;padding-bottom:clamp(22px,2.4vw,32px)}
.hero h1::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:clamp(84px,8vw,120px);
  height:5px;
  transform:translateX(-50%);
  border-radius:var(--pill);
  background:var(--orange);
}
.hero-copy{
  max-width:60ch;
  margin:clamp(26px,3vw,40px) auto clamp(26px,3vw,38px);
  font-size:clamp(1.06rem,.96rem + .68vw,1.45rem);
  line-height:1.42;
  color:var(--ink-2);
}
/* Cor do selo em variável (mesmo esquema do --echo do vídeo) para a
   variante azul/branca da agenda reaproveitar o mesmo componente. */
.watch{
  --watch-rgb:255,115,0;
  --watch-shadow:0 0 #0000; /* sombra "nula" válida numa lista — "none" não é */
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin:0 0 clamp(20px,2.4vw,30px);
  padding:11px 22px 11px 18px;
  border:1px solid rgba(var(--watch-rgb),.3);
  border-radius:var(--pill);
  background:var(--orange-tint);
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--orange-700);
  animation:watch-breathe 2.6s var(--ease-out) infinite;
}
/* Sobre o gradiente azul, um selo branco lê melhor que o tingido laranja */
/* .agenda na frente: o elemento é <p>, e ".agenda p" (0,1,1) teria mais
   especificidade que ".watch--on-blue" sozinho (0,1,0) e venceria a cor —
   foi exatamente esse bug que deixou o texto branco sobre a pill branca. */
.agenda .watch--on-blue{
  --watch-rgb:49,87,164;
  --watch-shadow:0 10px 26px rgba(6,52,86,.18);
  background:var(--canvas);
  border-color:rgba(var(--watch-rgb),.22);
  color:var(--blue);
}
/* Ponto pulsante à esquerda do rótulo */
.watch::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgb(var(--watch-rgb));
  animation:dot-blink 1.4s var(--ease) infinite;
}
.watch span{display:grid;place-items:center;line-height:1}
.watch svg{width:17px;height:17px;animation:arrow-drop 1.5s var(--ease) infinite}
@keyframes watch-breathe{
  0%,100%{box-shadow:var(--watch-shadow),0 0 0 0 rgba(var(--watch-rgb),.32)}
  60%{box-shadow:var(--watch-shadow),0 0 0 14px rgba(var(--watch-rgb),0)}
}
@keyframes dot-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@keyframes arrow-drop{0%,100%{transform:translateY(-2px)}50%{transform:translateY(5px)}}

.video-card{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  border-radius:var(--r-lg);
  background:#e9e5f2;
  cursor:pointer;
  box-shadow:var(--sh-4);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.video-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
/* Eco saindo da borda do vídeo — box-shadow não é cortado pelo
   overflow:hidden do próprio elemento. A cor e a sombra base vêm de
   variáveis para cada vídeo herdar o tom do fundo em que está. */
.video-card{
  --echo:255,115,0;
  --card-shadow:var(--sh-4);
  animation:video-echo 2.8s var(--ease-out) infinite;
}
@keyframes video-echo{
  0%{box-shadow:var(--card-shadow),0 0 0 0 rgba(var(--echo),.5),0 0 0 0 rgba(var(--echo),.28)}
  70%{box-shadow:var(--card-shadow),0 0 0 20px rgba(var(--echo),0),0 0 0 40px rgba(var(--echo),0)}
  100%{box-shadow:var(--card-shadow),0 0 0 0 rgba(var(--echo),0),0 0 0 0 rgba(var(--echo),0)}
}
/* No hover o eco sai de cena e a sombra volta ao normal */
.video-card:hover{transform:translateY(-4px);animation:none;box-shadow:var(--card-shadow)}
.video-card:hover img{transform:scale(1.03)}
.video-card iframe{position:absolute;inset:0;z-index:4;width:100%;height:100%;border:0}
.play{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  width:clamp(60px,6.5vw,84px);
  height:clamp(60px,6.5vw,84px);
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  color:var(--purple);
  font-size:0;
  cursor:pointer;
  box-shadow:0 8px 30px rgba(25,20,38,.28);
  transition:transform var(--t) var(--ease),background var(--t),color var(--t);
}
.play-icon{
  display:block;
  width:0;
  height:0;
  border-top:clamp(8px,.9vw,11px) solid transparent;
  border-bottom:clamp(8px,.9vw,11px) solid transparent;
  border-left:clamp(12px,1.1vw,16px) solid currentColor;
  transform:translateX(2px);
}
/* Dois anéis laranja defasados = eco concêntrico */
.play::before,
.play::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgb(var(--echo));
  pointer-events:none;
  animation:ring-echo 2.8s var(--ease-out) infinite;
}
.play::after{animation-delay:1.4s}
@keyframes ring-echo{
  0%{transform:scale(1);opacity:.75}
  80%{opacity:0}
  100%{transform:scale(2);opacity:0}
}
.video-card:hover .play{transform:translate(-50%,-50%) scale(1.08);background:var(--orange);color:#fff}
.video-card:hover .play::before,
.video-card:hover .play::after{animation:none;opacity:0}

.hero-proof{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  max-width:1000px;
  margin:clamp(32px,3.6vw,48px) auto clamp(28px,3vw,40px);
  text-align:left;
}
.hero-proof p{
  position:relative;
  margin:0;
  padding:24px 26px 24px 30px;
  border:1px solid var(--hair);
  border-radius:var(--r);
  background:var(--canvas);
  box-shadow:var(--sh-1);
  font-size:1.02rem;
  line-height:1.55;
  color:var(--ink-2);
}
.hero-proof p::before{
  content:"";
  position:absolute;
  left:0;
  top:22px;
  bottom:22px;
  width:3px;
  border-radius:var(--pill);
  background:var(--orange);
}
.hero-proof p:first-child strong{color:var(--purple)}
.hero-proof p:nth-child(2) strong{font-weight:500}

/* --------------------------------------------------------------------------
   9 · Provas: galerias e depoimentos
   -------------------------------------------------------------------------- */
.spaces{padding-block:clamp(56px,6vw,104px)}
.spaces-stack{display:grid;gap:20px}
/* Itens de grid têm min-width:auto e não encolhem abaixo do conteúdo.
   Sem isto o cartão infla até a largura intrínseca da galeria interna. */
.spaces-stack>*{min-width:0}
.image-scroll-card{
  min-width:0;
  position:relative;
  padding:clamp(28px,3vw,46px) clamp(20px,2.6vw,42px);
  text-align:center;
  background:var(--canvas);
  border:1px solid var(--hair-2);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-2);
}
.image-scroll-card h2{
  max-width:34ch;
  margin:0 auto 26px;
  color:var(--ink);
  font-size:clamp(1.45rem,1.2rem + 1vw,2.05rem);
}
.image-scroll-card.teacher-results h2{color:var(--purple)}
.image-scroll-card h3{
  max-width:26ch;
  margin:0 auto 26px;
  color:var(--ink);
  font-size:clamp(1.55rem,1.2rem + 1.5vw,2.35rem);
}
.image-scroll-card h3 strong{color:var(--orange)}
.image-scroll-card .lead{max-width:72ch;margin:26px auto 0;color:var(--ink-2)}

/* Marquee horizontal infinito.
   O JS duplica a lista de imagens; o keyframe desloca exatamente 50%,
   fazendo a segunda cópia cair no lugar da primeira sem emenda. */
.horizontal-gallery-shell{
  position:relative;
  min-width:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.horizontal-gallery{
  display:flex;
  width:max-content;
  gap:14px;
  padding-block:4px;
  animation:gallery-marquee var(--dur,48s) linear infinite;
  will-change:transform;
}
/* A segunda faixa corre no sentido oposto, criando contraponto */
.spaces-results .horizontal-gallery{animation-direction:reverse}
.horizontal-gallery-shell:hover .horizontal-gallery,
.horizontal-gallery-shell:focus-within .horizontal-gallery{animation-play-state:paused}
@keyframes gallery-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.horizontal-gallery img{
  flex:0 0 auto;
  width:clamp(150px,16vw,196px);
  aspect-ratio:1/1.1;
  object-fit:cover;
  border-radius:var(--r);
  box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
  -webkit-user-drag:none;
  user-select:none;
}
.spaces-results .horizontal-gallery img{aspect-ratio:1/1}
.horizontal-gallery img:hover{transform:translateY(-5px) scale(1.02);box-shadow:var(--sh-3)}
/* Setas não fazem sentido num marquee automático */
.gallery-arrow{display:none}
.spaces-results .cta{margin-top:26px}
.spaces-context{margin-top:clamp(34px,4vw,52px)}
.spaces-context .lead{color:var(--ink-2)}

/* Depoimentos */
/* --per-view define quantos cartões cabem; o JS lê essa variável
   para calcular o passo e a quantidade de indicadores. */
.testimonial-carousel{
  --per-view:3;
  --t-gap:18px;
  position:relative;
  width:min(1180px,100% - var(--gutter)*2);
  margin:clamp(38px,4vw,58px) auto 0;
}
.testimonial-viewport{overflow:hidden;padding:14px 4px;transition:height .45s var(--ease)}
.testimonial-track{display:flex;align-items:flex-start;gap:var(--t-gap);transition:transform .55s var(--ease)}
.testimonial{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:0 0 calc((100% - (var(--per-view) - 1) * var(--t-gap)) / var(--per-view));
  padding:clamp(24px,2.2vw,32px);
  text-align:left;
  background:var(--canvas);
  border:1px solid var(--hair-2);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}
/* Aspas como marca tipográfica de abertura, não como enfeite de canto */
.testimonial .quote{
  color:var(--purple-tint);
  font:400 54px/.7 Georgia,serif;
  height:26px;
  pointer-events:none;
  user-select:none;
}
.review-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:10px}
.review-head strong{font-family:var(--display);font-size:1.16rem;font-weight:800;letter-spacing:-.02em;color:var(--purple)}
.review-head span{color:#f2a100;letter-spacing:2px;font-size:.82rem}
.testimonial small{display:block;margin-top:3px;color:var(--ink-3);font-size:.8rem;letter-spacing:.04em}
.testimonial p{margin:16px 0 0;color:var(--ink-2);font-size:1rem;line-height:1.6}
@media (max-width:1000px){.testimonial-carousel{--per-view:2}}
@media (max-width:680px){.testimonial-carousel{--per-view:1}}
.carousel-arrow{
  position:absolute;
  z-index:2;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid var(--hair);
  border-radius:50%;
  background:#fff;
  color:var(--purple);
  cursor:pointer;
  box-shadow:var(--sh-2);
  transition:background var(--t),color var(--t);
}
.carousel-arrow:hover{background:var(--purple);color:#fff}
.carousel-arrow svg{width:20px;height:20px}
.carousel-arrow.prev{left:-16px}
.carousel-arrow.next{right:-16px}
.carousel-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:24px}
.carousel-dots button{
  position:relative;
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:var(--pill);
  background:rgba(76,32,127,.22);
  cursor:pointer;
  transition:width var(--t) var(--ease),background var(--t);
}
.carousel-dots button::after{content:"";position:absolute;inset:-16px -6px}
.carousel-dots button.active{width:30px;background:var(--orange)}

/* --------------------------------------------------------------------------
   10 · Benefícios
   -------------------------------------------------------------------------- */
.benefits>.narrow{margin-bottom:clamp(30px,3.4vw,44px)}
.benefits>.narrow h2{max-width:24ch;margin-inline:auto}
.benefits>.narrow .lead{max-width:62ch;margin-inline:auto}
.ticker{
  overflow:hidden;
  margin-block:clamp(30px,3.4vw,48px);
  padding:15px 0;
  background:var(--purple);
  color:#fff;
  font-family:var(--display);
  font-size:clamp(1rem,.92rem + .4vw,1.25rem);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.ticker div{display:inline-flex;width:max-content;animation:ticker 34s linear infinite}
.ticker:hover div{animation-play-state:paused}

.benefit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,286px),1fr));gap:18px}
.benefit-grid article{
  padding:clamp(26px,2.6vw,34px);
  border:1px solid var(--hair-2);
  border-radius:var(--r-lg);
  background:var(--canvas);
  box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t);
}
.benefit-grid article:hover{transform:translateY(-5px);border-color:var(--hair);box-shadow:var(--sh-3)}
.benefit-grid span{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin-bottom:20px;
  border-radius:14px;
  background:var(--purple-tint);
  color:var(--purple);
  transition:background var(--t),color var(--t);
}
.benefit-grid article:hover span{background:var(--orange);color:#fff}
.benefit-grid span svg{width:24px;height:24px;stroke-width:1.9}
.benefit-grid h3{max-width:22ch;margin-bottom:10px;font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem)}
.benefit-grid p{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.58}

/* --------------------------------------------------------------------------
   11 · Simulador
   -------------------------------------------------------------------------- */
.finance>.container>h2{max-width:22ch;margin:0 auto clamp(32px,3.6vw,54px);text-align:center}
.finance-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  color:var(--ink);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-4);
}
.finance-copy,.sim-column{padding:clamp(28px,3.2vw,52px)}
.finance-copy{background:var(--canvas)}
.sim-column{background:var(--tint);border-left:1px solid var(--hair-2)}
.finance-copy h3{color:var(--purple)}
.finance-copy p{color:var(--ink-2)}
.finance-copy .orange{color:var(--orange);margin-top:1.2em;font-weight:600}
.finance-copy .orange strong{
  color:var(--purple);
  font-weight:900;
  text-decoration:underline;
  text-decoration-color:var(--orange);
  text-decoration-thickness:.12em;
  text-underline-offset:.12em;
}
.sim-column>h3,.sim-column>p{text-align:center;color:var(--ink)}
.sim-column>p{color:var(--ink-2)}

#foxEduSimulatorContainer{
  --fox-blue:var(--purple);
  --fox-orange:var(--orange);
  width:100%;
  max-width:480px;
  margin:22px auto 0;
  padding:clamp(18px,2vw,26px);
  border:1px solid var(--hair-2);
  border-radius:var(--r-lg);
  background:var(--canvas);
  box-shadow:var(--sh-1);
  color:var(--ink-2);
}
#foxEduSimulatorContainer .result-card{
  position:relative;
  overflow:hidden;
  margin-bottom:1.7rem;
  padding:1.8rem 1rem;
  border-radius:var(--r);
  background:linear-gradient(135deg,var(--orange-700) 0%,var(--orange) 58%,#ff9a45 100%);
  color:#fff;
  text-align:center;
}
.result-label{
  display:block;
  margin-bottom:.45rem;
  color:rgba(255,255,255,.66);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.result-value{
  margin:0;
  color:#fff;
  font:900 clamp(2.1rem,1.4rem + 2.4vw,2.9rem)/1 var(--display);
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.toggle-container{
  display:flex;
  width:fit-content;
  max-width:100%;
  margin:0 auto 1.7rem;
  padding:4px;
  border-radius:var(--pill);
  background:var(--tint);
  border:1px solid var(--hair-2);
}
.toggle-btn{
  padding:9px 24px;
  border:0;
  border-radius:var(--pill);
  background:transparent;
  color:var(--ink-3);
  font-weight:700;
  font-size:.94rem;
  cursor:pointer;
  transition:background var(--t),color var(--t),box-shadow var(--t);
}
.toggle-btn.active{background:#fff;color:var(--purple);box-shadow:var(--sh-1)}
.input-group{margin-bottom:1.5rem}
.input-group:last-of-type{margin-bottom:0}
.label-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:.6rem}
.label-row label{font-size:.93rem;font-weight:500;line-height:1.25;color:var(--ink-2)}
.label-row span{
  min-width:42px;
  padding:3px 10px;
  border-radius:8px;
  background:var(--purple-tint);
  color:var(--purple);
  font-weight:800;
  font-size:.92rem;
  text-align:center;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.label-row .money-value{background:var(--orange-tint);color:var(--orange-700)}
#foxEduSimulatorContainer input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:24px;margin:0;border:0;background:transparent;cursor:pointer;
}
#foxEduSimulatorContainer input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--purple) var(--fill,0%),#e6e1ef var(--fill,0%));
}
#foxEduSimulatorContainer input[type=range]::-moz-range-track{height:6px;border-radius:var(--pill);background:#e6e1ef}
#foxEduSimulatorContainer input[type=range]::-moz-range-progress{height:6px;border-radius:var(--pill);background:var(--purple)}
#foxEduSimulatorContainer input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;height:22px;margin-top:-8px;
  border:3px solid #fff;border-radius:50%;
  background:var(--purple);
  box-shadow:0 2px 8px rgba(25,20,38,.24);
  transition:transform .16s var(--ease),box-shadow .16s;
}
#foxEduSimulatorContainer input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border:3px solid #fff;border-radius:50%;background:var(--purple);box-shadow:0 2px 8px rgba(25,20,38,.24);
}
#foxEduSimulatorContainer input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
#foxEduSimulatorContainer input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 8px rgba(76,32,127,.12)}
#foxEduSimulatorContainer input[type=range].orange-slider::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--orange) var(--fill,0%),#e6e1ef var(--fill,0%))}
#foxEduSimulatorContainer input[type=range].orange-slider::-moz-range-progress{background:var(--orange)}
#foxEduSimulatorContainer input[type=range].orange-slider::-webkit-slider-thumb{background:var(--orange)}
#foxEduSimulatorContainer input[type=range].orange-slider::-moz-range-thumb{background:var(--orange)}
#foxEduSimulatorContainer input[type=range].orange-slider:active::-webkit-slider-thumb{box-shadow:0 0 0 8px rgba(255,115,0,.16)}
.disclaimer{margin:1.5rem 0 0;color:var(--ink-3);font-size:.74rem!important;text-align:center;line-height:1.45}

/* --------------------------------------------------------------------------
   12 · Como funciona
   -------------------------------------------------------------------------- */
.training p{color:var(--ink-2)}
.training h3{margin-top:28px;color:var(--ink)}
.training .rounded-media{box-shadow:var(--sh-4)}
.training-timeline-column{min-width:0;align-self:center}
.training-note-desktop{margin:0 0 clamp(14px,2vw,24px)!important;color:var(--purple)!important}
.training-note-mobile{display:none}
.training-timeline{
  position:relative;
  min-width:0;
  align-self:center;
  overflow:hidden;
  padding:10px 0;
}
.training-timeline-track{
  --timeline-photo-height:clamp(137px,15.75vw,177px);
  --timeline-axis:clamp(94.5px,calc(26px + 7.875vw),114.5px);
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(40px,4vw,56px);
  width:max-content;
  margin:0;
  padding:26px 24px;
  list-style:none;
}
.training-timeline-track::before{
  content:"";
  position:absolute;
  z-index:0;
  left:28px;
  right:28px;
  top:calc(var(--timeline-axis) - 2px);
  height:4px;
  border-radius:var(--pill);
  background:var(--purple);
  box-shadow:0 1px 0 rgba(76,32,127,.18);
}
.training-milestone{
  position:relative;
  flex:0 0 auto;
  width:clamp(122px,14vw,158px);
  height:var(--timeline-photo-height);
}
.timeline-photo{
  position:relative;
  z-index:1;
  width:100%;
  height:var(--timeline-photo-height);
  margin:0;
  border:2px solid #fff;
  border-radius:18px;
  background-image:url("./assets/Espacos-Pedagogicos-Reforco-Escolar-1024x576.jpg");
  background-size:400% 200%;
  box-shadow:0 10px 24px rgba(25,20,38,.16);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.timeline-photo--2018{background-position:0 0}
.timeline-photo--2019{background-position:33.333% 0}
.timeline-photo--2020{background-position:66.666% 0}
.timeline-photo--2021{background-position:100% 0}
.timeline-photo--2022{background-position:0 100%}
.timeline-photo--2023{background-position:33.333% 100%}
.timeline-photo--2024{background-position:66.666% 100%}
.timeline-photo--2025{background-position:100% 100%}
.timeline-marker{
  position:absolute;
  z-index:3;
  top:calc(var(--timeline-axis) - 26px);
  right:-33px;
  width:18px;
  height:18px;
  border:4px solid #fff;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 3px rgba(255,115,0,.26),0 5px 12px rgba(25,20,38,.18);
  transform:translateY(-50%);
}
.training-milestone:hover .timeline-photo{transform:translateY(-8px) scale(1.04);box-shadow:0 18px 32px rgba(25,20,38,.24)}
.check-list{margin:26px 0;padding:0;list-style:none}
.check-list li{display:flex;align-items:flex-start;gap:12px;margin:12px 0;line-height:1.5}
.check-list li>.list-check-icon{
  flex:0 0 auto;
  width:22px;height:22px;
  margin-top:2px;
  padding:4px;
  border-radius:50%;
  background:var(--orange-tint);
  color:var(--orange);
  stroke-width:3;
}

/* --------------------------------------------------------------------------
   13 · Pilares — índice editorial
   -------------------------------------------------------------------------- */
.pillars>.narrow:first-child{margin-bottom:clamp(32px,3.6vw,48px)}
.pillars>.narrow:last-child{margin-top:clamp(32px,3.6vw,50px)}
.pillars>.narrow h2{max-width:24ch;margin-inline:auto}
.pillars>.narrow:last-child h3{max-width:32ch;margin-inline:auto;color:var(--purple)}
.pillar-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pillar{
  position:relative;
  overflow:hidden;
  padding:clamp(26px,2.8vw,38px);
  border:1px solid var(--hair-2);
  border-radius:var(--r-lg);
  background:var(--canvas);
  box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
/* Badges numerados no canto: cada pilar recebe sua própria cor de orientação */
.pillar b{
  position:absolute;
  top:18px;
  right:18px;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  color:#fff;
  font:700 1rem/1 var(--sans);
  letter-spacing:.04em;
  background:var(--blue);
  box-shadow:0 8px 16px rgba(49,87,164,.22);
  pointer-events:none;
  user-select:none;
}
.pillar:nth-child(2) b{background:var(--purple);box-shadow:0 8px 16px rgba(76,32,127,.22)}
.pillar:nth-child(3) b{background:var(--green);box-shadow:0 8px 16px rgba(31,184,98,.22)}
.pillar:nth-child(4) b{background:var(--sky);box-shadow:0 8px 16px rgba(8,167,238,.22)}
.pillar h3{position:relative;max-width:16ch;margin:0 0 10px}
.pillar>div>p{position:relative;margin:0;color:var(--ink-2)}
.pillar details{margin-top:24px;padding-top:20px;border-top:1px solid var(--hair-2)}
.pillar summary,.faq summary{list-style:none;cursor:pointer}
.pillar summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.pillar summary{
  position:relative;
  padding-right:34px;
  color:var(--purple);
  font-size:.94rem;
  font-weight:800;
  letter-spacing:.02em;
}
.pillar summary::after,.faq summary::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:24px;
  height:24px;
  margin-top:-12px;
  border-radius:50%;
  background:var(--purple-tint);
  transition:background var(--t),transform var(--t) var(--ease);
}
.pillar summary::before,.faq summary::before{
  content:"+";
  position:absolute;
  z-index:1;
  right:0;
  top:50%;
  width:24px;
  margin-top:-12px;
  height:24px;
  display:grid;
  place-items:center;
  color:var(--purple);
  font-size:1rem;
  line-height:1;
  transition:transform var(--t) var(--ease),color var(--t);
}
.pillar details[open] summary::after,.faq details[open] summary::after{background:var(--orange)}
.pillar details[open] summary::before,.faq details[open] summary::before{transform:rotate(135deg);color:#fff}
.pillar ul{margin:18px 0 0;padding-left:18px}
.pillar li{margin:8px 0;font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.pillar li::marker{color:var(--orange)}
details[open]>*:not(summary){animation:acc-in .38s var(--ease) both}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{height:0;overflow:hidden;transition:height .38s var(--ease),content-visibility .38s allow-discrete}
  details[open]::details-content{height:auto}
}

/* --------------------------------------------------------------------------
   14 · Agenda Lotada
   -------------------------------------------------------------------------- */
/* Três blocos equilibrados: texto+vídeo, grade de tópicos, WhatsApp.
   Antes era uma única grade de 2 colunas em que a direita acumulava
   parágrafos + grade + imagem retrato, ficando muito mais alta que a esquerda. */
.agenda .split{align-items:center;gap:clamp(30px,3.6vw,56px)}
.agenda-intro{align-items:stretch}
/* Envolve o selo "Assista a aula" + vídeo para os dois entrarem juntos
   como uma única coluna do grid, sem virar um terceiro item.
   align-items fica no padrão "stretch" de propósito: o .video-card não
   tem width próprio e depende do stretch para ocupar a coluna inteira.
   Só o selo é centralizado, via align-self — se o pai virasse "center"
   o vídeo perderia a largura e encolheria para o tamanho do conteúdo. */
.agenda-video{display:flex;flex-direction:column}
.agenda-video .watch{align-self:center}
.agenda .eyebrow{
  display:inline-block;
  margin-bottom:16px;
  padding:8px 16px;
  border-radius:var(--pill);
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.32);
  color:#fff;
  backdrop-filter:blur(6px);
}
/* Sobre o gradiente azul o eco laranja briga com o fundo; branco lê melhor */
.agenda .video-card{
  --echo:255,255,255;
  --card-shadow:0 24px 60px rgba(6,52,86,.34);
  box-shadow:var(--card-shadow);
}
.agenda h2{max-width:18ch}
.agenda-intro p:last-child{margin-bottom:0}

/* Painéis brancos sobre o gradiente azul, mesma linguagem dos cards.
   Seletor com .agenda na frente para vencer .agenda h2/p sem depender
   da ordem de cascata — as duas formas empatariam em (0,1,1). */
.agenda .agenda-panel{
  padding:clamp(26px,3vw,40px);
  border-radius:var(--r-lg);
  background:var(--canvas);
  box-shadow:0 16px 44px rgba(6,52,86,.2);
}
.agenda .agenda-panel h2,
.agenda .agenda-panel h3{color:var(--blue)}
.agenda .agenda-panel p{color:var(--ink)}
.agenda .agenda-panel .eyebrow{
  background:rgba(49,87,164,.1);
  border-color:transparent;
  color:var(--purple);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.agenda .agenda-video{
  padding:clamp(26px,3vw,40px);
  border:1px solid rgba(255,255,255,.72);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.96);
  box-shadow:0 16px 44px rgba(6,52,86,.2);
}
.agenda .agenda-video .watch{align-self:center}
/* Grade de tópicos ocupa a largura toda, em 4 colunas no desktop */
.mini-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:clamp(36px,4.2vw,60px) 0 0;
}
.mini-grid article{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:start;
  padding:24px 22px;
  border-radius:var(--r);
  background:var(--canvas);
  box-shadow:0 10px 28px rgba(6,52,86,.16);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.mini-grid article:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(6,52,86,.24)}
.mini-grid h3{margin-bottom:8px;color:var(--blue);font-size:1.08rem}
.mini-grid p{margin:0;color:var(--ink);font-size:.93rem;line-height:1.55}
.agenda-benefit-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:50%;
  background:rgba(8,167,238,.14);
  color:var(--sky-700);
  transition:transform var(--t) var(--ease),background var(--t),color var(--t);
}
.agenda-benefit-icon svg{width:20px;height:20px;stroke-width:2.1}
.mini-grid article:hover .agenda-benefit-icon{transform:translateY(-2px) scale(1.04);background:var(--sky);color:#fff}
.agenda .rounded-media{box-shadow:0 20px 50px rgba(6,52,86,.3)}
.agenda-whats{margin-top:clamp(36px,4.2vw,60px)}
/* Imagem e texto dentro do mesmo painel branco.
   A coluna da imagem é limitada porque o arquivo é retrato (819×1024)
   e em largura livre esticaria o painel inteiro. */
.agenda .whats-panel{
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(24px,3vw,46px);
  align-items:center;
  padding:clamp(22px,2.6vw,34px);
}
.agenda .whats-panel img{width:100%;border-radius:var(--r);box-shadow:var(--sh-1)}
.agenda .whats-panel h3{margin-top:0}
.agenda>.narrow{margin-top:clamp(40px,4.5vw,64px)}
.agenda>.narrow h3{max-width:30ch;margin:0 auto 28px}

/* --------------------------------------------------------------------------
   15 · Contrato · suporte · bônus
   -------------------------------------------------------------------------- */
.extras p{color:var(--ink-2)}
.feature-block{position:relative;margin-bottom:clamp(56px,6vw,96px)}
.support{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(24px,3vw,40px);
  align-items:start;
  margin-bottom:clamp(56px,6vw,96px);
  padding:clamp(30px,3.4vw,52px);
  border-radius:var(--r-xl);
  border:1px solid rgba(31,184,98,.24);
  background:linear-gradient(135deg,var(--green-tint) 0%,#f5fcf7 100%);
  color:var(--ink);
  box-shadow:0 8px 16px rgba(31,184,98,.06),0 32px 80px rgba(31,184,98,.14);
}
.support::after{
  content:"";
  position:absolute;
  right:-140px;
  bottom:-180px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(31,184,98,.18),transparent 65%);
}
.support h2{margin-bottom:16px;color:var(--purple);max-width:20ch}
.support p{color:var(--ink-2)}
.support .check-list li{color:var(--ink)}
.support .check-list li>.list-check-icon{background:rgba(31,184,98,.14);color:var(--green-700)}
.support-icon{
  display:grid;
  place-items:center;
  width:88px;
  height:88px;
  border-radius:24px;
  background:var(--green);
  color:#fff;
  box-shadow:0 14px 32px rgba(31,184,98,.28);
}
.support-icon svg{width:38px;height:38px;stroke-width:1.8}

.center-title{max-width:26ch;margin:0 auto clamp(32px,3.6vw,48px);text-align:center}
.center-title .orange-highlight{color:var(--orange)}
h3.center-title{max-width:44ch;margin-top:clamp(24px,2.6vw,38px);margin-bottom:0;color:var(--purple);font-weight:500}
.resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,244px),1fr));gap:16px}
.resource-grid article{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--hair-2);
  border-radius:var(--r);
  background:var(--canvas);
  box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.resource-grid article:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.resource-grid img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--ease)}
.resource-grid article:hover img{transform:scale(1.04)}
.resource-grid p{margin:0;padding:18px;color:var(--ink-2);font-size:.94rem;line-height:1.55}

/* --------------------------------------------------------------------------
   16 · Oferta
   -------------------------------------------------------------------------- */
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.receive-card,.price-card{
  padding:clamp(30px,3.2vw,48px);
  border-radius:var(--r-xl);
  background:var(--canvas);
  color:var(--ink);
  box-shadow:var(--sh-4);
}
.receive-card h2{margin-bottom:24px;font-size:clamp(1.4rem,1.15rem + 1vw,1.95rem)}
.receive-card .check-list{margin:0}
.receive-card .check-list li{margin:14px 0}
.price-card{
  position:relative;
  margin-top:20px;
  text-align:center;
  border:2px solid var(--orange);
  padding:clamp(42px,4vw,58px) clamp(26px,3.6vw,48px) clamp(30px,3.4vw,44px);
}
/* Selo sobreposto à borda, no lugar da faixa laranja */
.price-card::before{
  content:"INVESTIMENTO";
  position:absolute;
  top:0;
  left:clamp(24px,3vw,42px);
  transform:translateY(-50%);
  padding:8px 18px;
  border-radius:var(--pill);
  background:var(--orange);
  color:#fff;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.16em;
  white-space:nowrap;
  box-shadow:0 6px 18px rgba(255,115,0,.32);
}
.price-card .eyebrow{display:block;margin-bottom:14px}
.price-card h2{max-width:25ch;margin:0 auto 24px;font-size:clamp(1.2rem,1.02rem + .7vw,1.6rem);line-height:1.22;color:var(--purple)}
.offer-bonus{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  padding:0;
  color:var(--orange);
  font-size:clamp(.82rem,.76rem + .16vw,.94rem);
  font-weight:800;
  letter-spacing:.1em;
  line-height:1.35;
  text-align:center;
}
.offer-bonus span{max-width:30ch}
.offer-bonus strong{font-weight:900}
.offer-bonus .offer-clock{
  width:24px;
  height:24px;
  flex:0 0 24px;
  stroke-width:2.4;
  transform-origin:center;
  animation:offer-clock-pulse 1.7s ease-in-out infinite;
}
.offer-bonus .offer-clock:last-child{animation-delay:.35s}
.price-card>p{margin-bottom:25px;color:var(--ink-3);font-size:.95rem;line-height:1.45}
.price-line{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:center;gap:12px;margin:30px 0 8px}
.offer-bonus + .price-line{margin-top:24px}
.price-installment{color:var(--ink-3);font:700 clamp(1.35rem,1.05rem + .9vw,2.1rem)/1 var(--sans);letter-spacing:-.03em}
.price{
  margin:0;
  color:var(--purple);
  font:500 clamp(2.5rem,1.9rem + 2.3vw,3.7rem)/1 var(--display);
  letter-spacing:-.04em;
  white-space:nowrap;
}
.price-card>p:nth-of-type(2){max-width:48ch;margin:0 auto 1.3em;line-height:1.5}
.price-card .cta{width:100%;margin-top:28px}
.price-card small{display:block;margin-top:18px;color:var(--ink-3);font-size:.82rem}

/* --------------------------------------------------------------------------
   17 · Decisão · compartilhar · FAQ
   -------------------------------------------------------------------------- */
.decision h2{max-width:32ch;margin-inline:auto;font-size:clamp(1.4rem,1.1rem + 1.4vw,2.3rem);color:var(--purple);font-weight:500}
.share-title{
  margin:clamp(32px,3.6vw,48px) 0 16px;
  color:var(--ink-3);
  font-size:var(--fs-micro);
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.share-buttons{display:flex;justify-content:center;gap:10px}
.share-buttons button{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid var(--hair);
  border-radius:14px;
  background:var(--canvas);
  color:var(--purple);
  cursor:pointer;
  box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease),background var(--t),color var(--t);
}
.share-buttons button:hover{transform:translateY(-3px);background:var(--purple);color:#fff}
.share-buttons svg{width:19px;height:19px}

.faq{margin-top:clamp(54px,6vw,88px)}
.faq>h2,.faq>p,.faq>.center{text-align:center}
.faq>h2{margin-bottom:12px}
.faq>p{max-width:58ch;margin:0 auto clamp(26px,3vw,38px);color:var(--ink-2)}
.faq>p a{color:var(--orange);font-weight:700}
.faq details{
  margin:10px 0;
  padding:0 clamp(18px,2vw,26px);
  border:1px solid var(--hair-2);
  border-radius:var(--r);
  background:var(--canvas);
  box-shadow:var(--sh-1);
  transition:border-color var(--t),box-shadow var(--t);
}
.faq details[open]{border-color:rgba(255,115,0,.4);box-shadow:var(--sh-2)}
.faq summary{
  position:relative;
  padding:20px 42px 20px 0;
  color:var(--purple);
  font-size:clamp(1rem,.96rem + .22vw,1.1rem);
  font-weight:800;
  line-height:1.35;
}
.faq details p{margin:0;padding-bottom:22px;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   18 · Professora · notas
   -------------------------------------------------------------------------- */
.teacher .split{gap:clamp(30px,4vw,60px)}
.teacher-photo{width:min(100%,380px);aspect-ratio:1;justify-self:center;object-fit:cover;border-radius:50%;border:10px solid #fff;box-shadow:0 20px 52px rgba(76,32,127,.2)}
.teacher .split>div:last-child h2{margin-bottom:16px;font-size:clamp(1.55rem,1.25rem + 1.2vw,2.3rem)}
.teacher .split>div:last-child p{color:var(--ink-2)}
.social-link{
  display:inline-flex;
  align-items:center;
  margin-top:8px;
  padding:10px 18px;
  border:1px solid var(--hair);
  border-radius:var(--pill);
  color:var(--purple);
  font-size:.98rem;
  font-weight:800;
  text-decoration:none;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.social-link:hover{background:var(--purple);border-color:var(--purple);color:#fff}
.contact{
  margin-top:clamp(48px,5vw,76px);
  padding:clamp(30px,3.2vw,44px);
  border:1px solid var(--hair-2);
  border-radius:var(--r-xl);
  background:var(--tint);
}
.contact h3{margin-bottom:20px;color:var(--ink)}
.notes{
  margin-top:clamp(48px,5vw,72px);
  padding-top:32px;
  border-top:1px solid var(--hair-2);
  color:var(--ink-3);
}
.notes p{font-size:.86rem;line-height:1.65;margin-bottom:.8em}

/* --------------------------------------------------------------------------
   19 · Responsivo
   -------------------------------------------------------------------------- */
@media (max-width:960px){
  :root{--header:80px}
  .split,.finance-card,.offer-grid{grid-template-columns:minmax(0,1fr)}
  .agenda .whats-panel{grid-template-columns:minmax(0,1fr)}
  .agenda .whats-panel img{max-width:330px;margin-inline:auto}
  .sim-column{border-left:0;border-top:1px solid var(--hair-2)}
  .pillar-list{grid-template-columns:1fr}
  .pillar b{top:16px;right:16px;width:42px;height:42px}
  /* No treinamento, a leitura vem primeiro e a imagem fecha o bloco no mobile. */
  .training .split>img{order:2}
  .training-note-desktop{display:none}
  .training-note-mobile{display:block}
  .extras .feature-block>img,.teacher .split>img{order:-1}
  .teacher .split>img{max-width:480px;margin-inline:auto}
  .support{grid-template-columns:1fr}
  .site-header .brand-text{font-size:26px}
}
@media (max-width:720px){
  .hero-proof{grid-template-columns:1fr}
  .mini-grid{grid-template-columns:1fr}
  .carousel-arrow.prev{left:-6px}
  .carousel-arrow.next{right:-6px}
}
@media (max-width:600px){
  :root{--header:68px;--section:56px}
  .site-header.is-scrolled{height:60px}
  .site-header .brand-text{font-size:23px}
  .site-header.is-scrolled .brand-text{transform:scale(.86)}
  .cta{width:100%;min-height:54px;padding:16px 20px}
  .hero-proof p{padding:22px 20px 22px 26px}
  .image-scroll-card{padding:26px 16px;border-radius:var(--r-lg)}
  .horizontal-gallery{gap:12px}
  .horizontal-gallery img{width:clamp(132px,42vw,168px)}
  .training-timeline-track.horizontal-gallery{gap:52px;padding-inline:28px}
  .training-timeline .timeline-marker{right:-35px}
  .testimonial-viewport{padding:8px}
  .testimonial{padding:26px 22px}
  .testimonial .quote{font-size:64px;right:14px}
  .review-head{flex-direction:column;align-items:flex-start;gap:4px}
  .carousel-arrow{width:42px;height:42px}
  .carousel-arrow.prev{left:-2px}
  .carousel-arrow.next{right:-2px}
  .agenda .whats-panel img{max-width:280px}
  .price-card{padding:44px 22px 30px}
  .price-card h2{max-width:22ch;margin-bottom:20px}
  .offer-bonus{width:100%;gap:10px;font-size:.74rem;letter-spacing:.055em}
  .offer-bonus span{max-width:26ch}
  .offer-bonus .offer-clock{width:22px;height:22px;flex-basis:22px}
  .price-line{gap:8px}
  .price-installment{font-size:1.2rem}
  .price{font-size:clamp(2.35rem,11vw,3.1rem)}
  .support{padding:28px 22px}
  .support-icon{width:72px;height:72px;border-radius:20px}
  .support-icon svg{width:32px;height:32px}
  .contact{padding:26px 20px}
  .reveal,.reveal.reveal-left,.reveal.reveal-right{transform:translateY(16px)}
}

@keyframes offer-clock-pulse{
  0%,100%{opacity:.82;transform:scale(1) rotate(0deg)}
  50%{opacity:1;transform:scale(1.16) rotate(-8deg)}
}
@media (max-width:400px){
  .horizontal-gallery img{width:138px}
}
@media (min-width:1600px){
  :root{--section:132px}
  .container{width:min(1240px,100% - var(--gutter)*2)}
}

/* --------------------------------------------------------------------------
   20 · Preferências do usuário
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal,.reveal.reveal-left,.reveal.reveal-right,.reveal.reveal-scale{opacity:1;transform:none}
  .cta::before,.play::before,.play::after{display:none}
  .video-card{box-shadow:var(--card-shadow)}
  .watch{box-shadow:var(--watch-shadow)}
  .offer-bonus .offer-clock{animation:none}
}
@media print{
  .scroll-progress,.to-top,.site-header,.carousel-arrow,.gallery-arrow,.share-buttons{display:none!important}
  .section{padding-block:20px;background:#fff!important;color:#000!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* --------------------------------------------------------------------------
   21 · Acabamento editorial
   --------------------------------------------------------------------------
   Pequenos ajustes de ritmo e contraste para deixar a hierarquia mais
   sofisticada sem alterar a personalidade da página.
   -------------------------------------------------------------------------- */
body{
  letter-spacing:-.004em;
  font-kerning:normal;
  font-optical-sizing:auto;
}
h1,h2,h3{
  font-synthesis:none;
  text-wrap:balance;
}
h1{letter-spacing:-.038em}
h1 strong{
  font-weight:900;
  letter-spacing:-.045em;
}
h2,h3{letter-spacing:-.032em}
p,li{text-wrap:pretty}
strong{font-weight:800}
.benefit-grid h3,
.mini-grid h3,
.review-head strong{
  font-weight:800;
  letter-spacing:-.028em;
}
.cta{
  letter-spacing:.045em;
}
.chip,.eyebrow,.watch,.result-label,.price-card::before{
  letter-spacing:.2em;
}
@media (max-width:600px){
  h1{letter-spacing:-.032em}
  h1 strong{letter-spacing:-.038em}
  h2,h3{letter-spacing:-.026em}
  .hero-copy{font-size:clamp(1.02rem,.94rem + .8vw,1.15rem)}
}