/* ============================================================
   TOKENS — SISTEMA CROMÁTICO DO SITE (travado)
   ============================================================ */
:root{
  --violet:#6045FF;
  --violet-deep:#4930DF;
  --violet-soft:#8A75FF;
  --violet-wash:rgba(96,69,255,.10);
  --ink:#070E35;
  --ink-2:#263356;
  --ink-3:#53617A;
  --bg:#F7F8FC;
  --lav:#F0EEFF;
  --line:#DCDFF0;
  --orange:#D95A0B;
  --green:#238A39;
  --blue:#1476FF;
  --white:#FFFFFF;

  --grad-mark:linear-gradient(135deg,#8167FF 0%,#6045FF 52%,#4930DF 100%);
  --grad-title:linear-gradient(180deg,#7A63FF 0%,#5136F2 100%);
  --grad-canvas:linear-gradient(135deg,#FFFFFF 0%,#F7F8FC 58%,#F0EEFF 100%);
  --halo:radial-gradient(ellipse at 72% 48%, rgba(96,69,255,.12) 0%, rgba(96,69,255,0) 64%);

  --glass:linear-gradient(135deg, rgba(255,255,255,.88), rgba(244,244,255,.62));
  --glass-border:1px solid rgba(255,255,255,.95);
  --glass-outline:1px solid rgba(96,69,255,.13);
  --shadow-soft:0 16px 40px rgba(30,35,90,.08), 0 3px 10px rgba(96,69,255,.06);
  --shadow-lift:0 30px 80px rgba(20,25,70,.12), 0 6px 20px rgba(96,69,255,.08);

  --gutter:max(20px, env(safe-area-inset-left, 0px));
  --measure:62ch;
  --ease:cubic-bezier(.2,.75,.2,1);

  color-scheme:light;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:rgba(96,69,255,.18)}

.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-left:var(--gutter);padding-right:max(20px, env(safe-area-inset-right, 0px))}
.narrow{max-width:820px}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet-deep);margin:0 0 18px
}
.eyebrow--muted{color:var(--ink-3)}
.lead{font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.7;color:var(--ink-2);max-width:var(--measure)}
.small{font-size:.82rem;line-height:1.6;color:var(--ink-3)}
.grad{background:var(--grad-title);-webkit-background-clip:text;background-clip:text;color:transparent}
.violet{color:var(--violet-deep)}

/* ============================================================
   BARRA DE PROGRESSO + HEADER
   ============================================================ */
.progress{
  position:fixed;inset:0 0 auto;height:2px;z-index:90;
  background:transparent;pointer-events:none;
}
.progress span{
  display:block;height:100%;width:0%;
  background:var(--grad-mark);
  transition:width .08s linear;
}
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:18px var(--gutter);
  padding-right:max(20px, env(safe-area-inset-right, 0px));
  background:rgba(247,248,252,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:padding .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-tight{padding-block:10px;border-bottom-color:rgba(220,223,240,.7);background:rgba(247,248,252,.9)}
.header__left{display:flex;align-items:center;gap:14px;min-width:0}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand__mark{
  width:34px;height:34px;border-radius:11px;flex:none;
  background:var(--grad-mark);
  box-shadow:0 6px 16px rgba(96,69,255,.32), inset 0 1px 0 rgba(255,255,255,.5);
  display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:15px;letter-spacing:-.04em;
}
.brand__name{font-weight:800;letter-spacing:-.035em;font-size:1.02rem;line-height:1.1}
.brand__tag{display:block;font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.only-narrow{display:none}

.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:.86rem;font-weight:500;color:var(--ink-2);position:relative;padding:6px 0}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--violet);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)
}
.nav a:hover::after{transform:scaleX(1)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:999px;
  padding:14px 26px;
  background:var(--grad-mark);color:#fff;
  font-size:.88rem;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 12px 30px rgba(96,69,255,.28), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(96,69,255,.36), inset 0 1px 0 rgba(255,255,255,.4)}
.btn:focus-visible{outline:3px solid rgba(96,69,255,.35);outline-offset:3px}
.btn--ghost{
  background:transparent;color:var(--violet-deep);
  box-shadow:inset 0 0 0 1.5px rgba(96,69,255,.35);
}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(96,69,255,.55);transform:translateY(-2px)}
.btn--sm{padding:11px 20px;font-size:.82rem}

/* ============================================================
   CENAS — BASE
   ============================================================ */
.scene{position:relative;isolation:isolate}
.scene__inner{padding-block:clamp(90px,13vh,150px)}
.bg-light{background:var(--grad-canvas)}
.bg-quiet{
  background:
    radial-gradient(ellipse at 78% 42%, rgba(96,69,255,.10) 0%, rgba(96,69,255,0) 58%),
    radial-gradient(ellipse at 10% 88%, rgba(96,69,255,.07) 0%, rgba(96,69,255,0) 55%),
    linear-gradient(180deg,#FBFBFF 0%, #F7F7FF 100%);
}
.bg-wash{
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(247,248,252,.92) 60%, rgba(240,238,255,.86) 100%),
    linear-gradient(120deg,#E7EAF5 0%,#DCE0F0 45%,#E9E7F6 100%);
}

/* revelação */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
  will-change:opacity,transform;
}
[data-reveal].is-in{opacity:1;transform:none}

/* máscara de número — entra formado, nunca subindo do zero */
.mask{display:block;overflow:hidden;line-height:.86}
.mask > span{
  display:block;transform:translateY(108%);
  transition:transform 1.05s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.is-in .mask > span, .mask.is-in > span{transform:none}

/* ============================================================
   CENA 01 — ABERTURA
   ============================================================ */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:104px;padding-bottom:52px;overflow:hidden}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,80px);align-items:center;width:100%;
}
.hero h1{
  font-size:clamp(2.25rem,4.4vw,3.85rem);
  font-weight:800;letter-spacing:-.045em;line-height:1.02;
  margin:0 0 22px;
}
.hero .lead{max-width:34em}
.pillars-inline{
  display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;
  margin:34px 0 36px;padding:0;list-style:none;
}
.pillars-inline li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.9rem;font-weight:500;color:var(--ink-2);line-height:1.45;
}
.pillars-inline svg{flex:none;margin-top:3px;color:var(--violet)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.hero__notes{margin-top:34px;display:grid;gap:8px;max-width:40em}
.hero__notes p{font-size:.76rem;color:var(--ink-3);line-height:1.55;display:flex;gap:8px;align-items:flex-start}
.hero__notes svg{flex:none;margin-top:2px;color:var(--violet-soft)}

.hero__visual{position:relative;display:flex;flex-direction:column;gap:16px}
.photo{
  position:relative;border-radius:30px;overflow:hidden;
  aspect-ratio:1/1;
  background:
    radial-gradient(120% 80% at 76% 16%, rgba(96,69,255,.22), transparent 62%),
    radial-gradient(90% 60% at 18% 88%, rgba(20,118,255,.14), transparent 60%),
    linear-gradient(150deg,#E4E6F4 0%,#D3D8EC 38%,#C4CCE6 68%,#E8E6F6 100%);
  box-shadow:var(--shadow-lift);
  transform:scale(calc(1 + var(--p,0) * .045));
  transition:transform .12s linear;
}
.photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 46%, rgba(255,255,255,.55) 78%, rgba(255,255,255,.9) 100%);
}
/* a ilustração do hero é 4:3; num quadro quadrado o cover comeria as duas
   colunas de ícones das pontas */
.photo--wide{aspect-ratio:4/3}
.photo__lines{
  position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:100% 46px;
}
.photo__tag{
  position:absolute;left:18px;bottom:16px;z-index:2;
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);opacity:.7;
}
/* ============================================================
   CENA 02 — PILARES
   ============================================================ */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:56px}
.pillar{
  padding:30px 26px 32px;border-radius:24px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(30,35,90,.04);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.pillar:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(30,35,90,.09);background:#fff}
.pillar__icon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(20,118,255,.09);color:var(--blue);margin-bottom:22px;
}
.pillar h3{font-size:1.06rem;letter-spacing:-.02em;margin-bottom:10px}
.pillar p{font-size:.88rem;color:var(--ink-2);line-height:1.6}

/* ============================================================
   CENA 03 — ADOÇÃO
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(48px,7vh,80px)}
.stat{border-top:1px solid var(--line);padding-top:26px}
.stat .num{
  font-size:clamp(3.6rem,8vw,6.4rem);font-weight:800;letter-spacing:-.055em;line-height:.85;
  background:var(--grad-title);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat p{font-size:.95rem;color:var(--ink-2);margin-top:18px;line-height:1.55;max-width:22em}
.stat p b{color:var(--ink);font-weight:700}
.stat__bar{height:3px;border-radius:2px;background:rgba(96,69,255,.12);margin-top:26px;overflow:hidden}
.stat__bar i{
  display:block;height:100%;width:var(--w);border-radius:2px;background:var(--grad-mark);
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms + 180ms);
}
.is-in .stat__bar i{transform:scaleX(1)}
.source{margin-top:44px;font-size:.74rem;color:var(--ink-3);max-width:52em;line-height:1.6}

/* ============================================================
   CENA 03 — A CONTRADIÇÃO
   ============================================================ */
.contradicao{text-align:center}
.contradicao__title{font-size:clamp(1.75rem,3.4vw,2.7rem);letter-spacing:-.04em;line-height:1.18;max-width:20em;margin:0 auto}
.contradicao__neg{color:var(--ink-3)}
.contradicao .big-number{margin-top:clamp(28px,5vh,52px)}
.contradicao__lead{font-size:clamp(1.05rem,1.9vw,1.4rem);font-weight:600;line-height:1.4;color:var(--ink);max-width:26em;margin:clamp(20px,3vh,30px) auto 0}
.contradicao__text{font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.7;color:var(--ink-2);max-width:34em;margin:clamp(18px,3vh,28px) auto 0}
.contradicao .source{margin-inline:auto;text-align:center}

/* ============================================================
   SEM USO — restos do bloco "O vazio", removido em 26/10/2026.
   Ficam porque `.big-number` é usado pela cena 03 acima.
   ============================================================ */
.empty-wrap{height:230vh;position:relative}
.empty-sticky{
  position:sticky;top:0;min-height:100svh;
  display:grid;place-items:center;text-align:center;
  padding:110px var(--gutter);
}
.empty-stack{position:relative;width:min(1000px,100%);display:grid;place-items:center;min-height:52vh}
.empty-stack > *{grid-area:1/1}
.empty__before{
  opacity:clamp(0, calc(1 - var(--p,0) * 3.3), 1);
  transform:translateY(calc(var(--p,0) * -60px)) scale(calc(1 - var(--p,0) * .06));
  width:100%;
}
.empty__after{
  opacity:clamp(0, calc((var(--p,0) - .28) * 3.6), 1);
  transform:translateY(calc((1 - var(--p,0)) * 40px));
  width:100%;
}
.big-number{
  font-size:clamp(6rem,20vw,15rem);font-weight:800;letter-spacing:-.06em;line-height:.8;
  background:var(--grad-title);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.empty__after h2{font-size:clamp(1.5rem,3.4vw,2.6rem);max-width:18em;margin:34px auto 0;letter-spacing:-.03em}
.empty__after p{max-width:32em;margin:22px auto 0;color:var(--ink-2);font-size:1rem}

/* ============================================================
   CENA 04 — A CONSEQUÊNCIA NA APRENDIZAGEM
   ============================================================ */
.split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(32px,5vw,84px);align-items:center}
.orphan h2{font-size:clamp(2rem,4.2vw,3.4rem);letter-spacing:-.04em;margin-bottom:26px}
.orphan .lead + .lead{margin-top:18px}
/* o segundo movimento da cena: a frase que nomeia o problema */
.consequencia .scene__inner{padding-bottom:clamp(44px,7vh,72px)}
.consequencia__band{
  border-top:1px solid var(--line);
  padding-block:clamp(40px,7vh,64px) clamp(90px,13vh,150px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,5vw,72px);align-items:end;
}
.consequencia__statement{
  margin:0;max-width:24em;
  font-size:clamp(1.2rem,2.2vw,1.75rem);font-weight:400;line-height:1.4;
  letter-spacing:-.02em;color:var(--ink);
}
/* a etiqueta que nomeia o problema é o título desta faixa, não uma categoria
   de rodapé: ganha corpo e peso e a frase abaixo perde o negrito (27/10) */
.consequencia__band .eyebrow{font-size:.88rem;font-weight:800;letter-spacing:.16em}
.consequencia__premissa{
  margin:0;max-width:26em;
  font-size:clamp(1rem,1.6vw,1.2rem);font-weight:600;line-height:1.5;color:var(--ink-2);
}
.consequencia__punch{
  margin:10px 0 0;max-width:20em;
  font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:700;line-height:1.18;
  letter-spacing:-.035em;color:var(--violet-deep);
}
.diagram{
  margin-top:44px;padding:26px;border-radius:22px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);
  display:grid;gap:10px;justify-items:center;text-align:center;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
}
.diagram .node{padding:9px 16px;border-radius:999px;background:#fff;box-shadow:0 4px 14px rgba(30,35,90,.06);border:1px solid var(--line)}
.diagram .node--muted{color:var(--ink-3);border-style:dashed;background:transparent;box-shadow:none}
.diagram .arrow{color:var(--violet-soft);line-height:1}
.diagram .node--end{background:rgba(217,90,11,.07);border-color:rgba(217,90,11,.28);color:var(--orange)}
.orphan__visual{position:relative}
.student{
  position:relative;aspect-ratio:4/4.8;border-radius:30px;overflow:hidden;
  background:
    radial-gradient(90% 70% at 62% 30%, rgba(96,69,255,.20), transparent 60%),
    radial-gradient(70% 60% at 20% 82%, rgba(20,118,255,.12), transparent 62%),
    linear-gradient(155deg,#E6E8F5 0%,#D6DAEE 42%,#C8D0E9 74%,#EAE8F7 100%);
  box-shadow:var(--shadow-lift);
}
.student::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.5) 74%, rgba(255,255,255,.86) 100%);
}
.phone{
  position:absolute;right:9%;bottom:9%;z-index:2;
  width:112px;aspect-ratio:9/18;border-radius:20px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.95);
  outline:1px solid rgba(96,69,255,.13);
  box-shadow:var(--shadow-soft);
  padding:12px 9px;display:grid;gap:6px;align-content:start;
}
.phone i{display:block;height:5px;border-radius:3px;background:rgba(7,14,53,.10)}
.phone i:nth-child(1){width:52%;background:rgba(96,69,255,.5);height:6px}
.phone i:nth-child(2){width:88%}
.phone i:nth-child(3){width:74%}
.phone i:nth-child(4){width:82%;margin-top:6px}
.phone i:nth-child(5){width:60%}
.photo__caption{position:absolute;left:18px;bottom:16px;z-index:3;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);opacity:.72}

/* ============================================================
   A SOLUÇÃO — EDUCA+IA
   A virada da página: o problema nomeado na cena anterior ganha
   resposta antes de a plataforma ser apresentada em pilares.
   ============================================================ */
.solucao__head{max-width:64ch}
.solucao__head h2{font-size:clamp(2rem,4.2vw,3.3rem);letter-spacing:-.04em;margin-bottom:26px;text-wrap:balance}
.solucao__promessa{
  margin:24px 0 0;max-width:46ch;padding-left:20px;
  border-left:3px solid var(--violet);
  font-size:clamp(1.05rem,1.7vw,1.32rem);font-weight:600;line-height:1.5;
  letter-spacing:-.01em;color:var(--ink);
}
/* o mesmo cartão do comparativo: as duas artes lado a lado, coladas, dentro de
   uma moldura só — e a frase de fecho na barra de baixo, como no `.compare__close`.
   O respiro que era do rótulo removido agora é do próprio cartão */
.solucao__demo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
  margin-top:clamp(52px,8vh,84px);
  border-radius:28px;overflow:hidden;border:1px solid var(--line);background:#fff;
}
/* no desktop as duas listas viram arte; abaixo de 1080 a arte volta a ser
   texto, porque o texto embutido numa imagem de 1400px cai para ~8px.
   Dentro do cartão a arte não tem raio nem sombra: quem arredonda é o cartão */
.solucao__figure{margin:0;display:block}
.solucao__figure img{display:block;width:100%;height:auto}
.solucao__painel{
  padding:clamp(22px,3vw,32px);border:0;border-radius:0;
  background:transparent;
  display:none;flex-direction:column;gap:20px;min-width:0;
}
.solucao__painel--antes{background:rgba(247,247,252,.62)}
.solucao__painel--agora{
  background:linear-gradient(180deg,#FCFBFF 0%,#F2EFFF 100%);
}
.solucao__rotulo{
  margin:0;font-size:.66rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.solucao__rotulo--agora{color:var(--violet-deep)}
/* a cadeia é a mesma da cena anterior; aqui ela perde a caixa do .diagram */
.solucao__painel .diagram{margin-top:0;padding:0;border:0;background:none}
/* a marca ocupa o lugar que era da "IA genérica": é o nó que muda de cor */
.solucao__painel .diagram .node--marca{
  background:var(--violet);border-color:var(--violet);color:#fff;
  box-shadow:0 8px 20px rgba(96,69,255,.28);
}
.solucao__painel .diagram .node--dentro{
  background:rgba(96,69,255,.10);border-color:rgba(96,69,255,.30);color:var(--violet-deep);
}
/* as notas colam no pé do painel para os dois fecharem na mesma linha */
.solucao__nota{margin:auto 0 0;max-width:34ch;font-size:.86rem;line-height:1.55;color:var(--ink-3)}
/* a frase de fecho ocupa a barra de baixo do cartão e usa a MESMA tipografia
   do `.compare__close p` — é o modelo que o CEO pediu para repetir, então
   aqui não há tamanho nem cor próprios */
.solucao__close{
  grid-column:1/-1;padding:30px clamp(28px,4vw,44px);
  border-top:1px solid var(--line);background:#fff;text-align:center;
}
.solucao__close p{font-size:1.02rem;color:var(--ink-2)}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.quote-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,76px);align-items:center}
.portrait{
  position:relative;aspect-ratio:4/4.7;border-radius:30px;overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 26%, rgba(96,69,255,.22), transparent 62%),
    linear-gradient(160deg,#E7E8F5 0%,#D7DBEE 44%,#CBD3EA 76%,#ECEAF8 100%);
  box-shadow:var(--shadow-lift);
}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 52%,rgba(255,255,255,.55) 82%,rgba(255,255,255,.9) 100%)}
.portrait__tag{position:absolute;left:18px;bottom:16px;z-index:2;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);opacity:.72}
.portrait--wide{aspect-ratio:4/3.4}
.portrait__img,.proof__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.portrait::after,.proof__media::after{z-index:1}
.portrait__img--evandro{object-position:55% 50%}
.portrait__img--gianolla{object-position:58% 50%}
.proof__img{object-position:65% 50%}
.photo__img,.student__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.photo::after,.student::after{z-index:1}
.photo--com-foto::after{background:linear-gradient(180deg,rgba(255,255,255,0) 58%,rgba(255,255,255,.3) 82%,rgba(255,255,255,.55) 100%)}
/* o hero agora é uma ilustração com texto dentro: o véu branco só apagaria os passos */
.photo--ilustracao::after{background:none}
.student--com-foto::after{background:linear-gradient(180deg,rgba(255,255,255,0) 52%,rgba(255,255,255,.28) 80%,rgba(255,255,255,.6) 100%)}
.photo__tag,.student .photo__caption{background:rgba(255,255,255,.86);padding:6px 12px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
blockquote{margin:0}
blockquote p{
  font-size:clamp(1.45rem,3vw,2.15rem);line-height:1.28;letter-spacing:-.025em;
  font-weight:600;color:var(--ink);text-wrap:balance;
}
blockquote p::before{content:"“"}
blockquote p::after{content:"”"}
.attrib{margin-top:28px;display:flex;flex-direction:column;gap:2px}
.attrib b{font-size:.95rem;font-weight:700}
.attrib span{font-size:.82rem;color:var(--ink-3)}
.quote-note{margin-top:22px;padding-top:22px;border-top:1px solid var(--line);font-size:.92rem;color:var(--ink-2);max-width:34em;line-height:1.6}
.quote-note--forte{font-weight:700;color:var(--ink)}

/* ============================================================
   CENA 07 — HOJE × COM EDUCA+IA
   ============================================================ */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:56px;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:#fff}
.compare__col{padding:clamp(28px,4vw,44px)}
.compare__col + .compare__col{border-left:1px solid var(--line)}
.compare__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.compare__head span{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.compare__col h3{font-size:1.18rem;letter-spacing:-.02em;margin-bottom:24px;line-height:1.25}
.compare ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.compare li{display:flex;gap:12px;font-size:.92rem;color:var(--ink-2);line-height:1.5}
.compare li svg{flex:none;margin-top:3px}
.compare--now{background:linear-gradient(180deg,#FFFDFB 0%,#FFF8F3 100%)}
.compare--now .compare__head span{color:var(--orange)}
.compare--now li svg{color:var(--orange)}
.compare--plus{background:linear-gradient(180deg,#FBFAFF 0%,#F5F2FF 100%)}
.compare--plus .compare__head span{color:var(--violet-deep)}
.compare--plus li svg{color:var(--violet)}
.compare__close{grid-column:1/-1;padding:30px clamp(28px,4vw,44px);border-top:1px solid var(--line);background:#fff;text-align:center}
.compare__close p{font-size:1.02rem;color:var(--ink-2)}
.compare__close b{color:var(--ink)}

/* ============================================================
   CENA 08 — O CICLO (PINNING)
   ============================================================ */
.cycle-wrap{height:326vh;position:relative}
.cycle-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  width:100%;max-width:1240px;margin-inline:auto;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:96px var(--gutter) 40px;
  padding-right:max(20px, env(safe-area-inset-right, 0px));
}
.cycle-head{max-width:640px}
.cycle-head h2{font-size:clamp(1.9rem,4vw,3.1rem);letter-spacing:-.04em;margin-bottom:14px}
.cycle-head p{font-size:.96rem;color:var(--ink-2);max-width:40em}
.cycle-stage{position:relative;display:grid;grid-template-rows:1fr auto;min-height:0;margin-top:26px}
.cycle-panels{position:relative;display:grid;place-items:center;min-height:0}
.cstep{
  grid-area:1/1;width:min(1060px,100%);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,60px);align-items:center;
  opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
  pointer-events:none;
}
.cstep.is-on{opacity:1;transform:none;pointer-events:auto}
.cstep__num{font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--violet);margin-bottom:14px;display:block}
.cstep h3{font-size:clamp(1.35rem,2.6vw,2rem);letter-spacing:-.03em;margin-bottom:14px;line-height:1.12}
.cstep p{font-size:.94rem;color:var(--ink-2);line-height:1.62;max-width:30em}
.mock{
  border-radius:22px;overflow:hidden;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.95);
  outline:1px solid rgba(96,69,255,.13);
  box-shadow:var(--shadow-lift);
  aspect-ratio:16/10.4;display:grid;grid-template-rows:34px 1fr;
  position:relative;
}
.mock__bar{display:flex;align-items:center;gap:6px;padding:0 14px;background:rgba(247,248,252,.9);border-bottom:1px solid var(--line)}
.mock__bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.mock__bar span{margin-left:8px;font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mock__chip{display:inline-block;height:18px;width:84px;border-radius:999px;background:rgba(20,118,255,.12)}
.mock__phone{
  justify-self:center;align-self:center;width:150px;aspect-ratio:9/17;border-radius:22px;
  background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(30,35,90,.12);
  padding:14px 10px;display:grid;gap:7px;align-content:start;
}
.mock__phone i{display:block;height:6px;border-radius:3px;background:rgba(7,14,53,.1)}
.mock__phone i:nth-child(1){width:56%;height:8px;background:rgba(96,69,255,.5)}
.mock__phone i:nth-child(2){width:90%}
.mock__phone i:nth-child(3){width:70%}
.mock__phone i:nth-child(4){width:86%;margin-top:8px}
.mock__phone i:nth-child(5){width:52%}
/* painel com tela real do produto */
.mock picture{display:contents}
.mock--real{grid-template-rows:1fr;background:#fff}
.mock--real .mock__img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
/* painel com tela de celular centralizada */
.mock--device{grid-template-rows:1fr;display:grid;place-items:center;background:transparent;border:0;outline:0;box-shadow:none;overflow:visible}
.mock--device .mock__img{display:block;height:100%;width:auto;min-width:0;min-height:0;max-height:100%;max-width:100%;object-fit:contain;border-radius:20px;box-shadow:0 16px 40px rgba(30,35,90,.18)}
/* padrão de TODOS os passos do ciclo: barra de explicação em cima + tela embaixo,
   no mesmo tamanho final em todos. A linha da barra é `auto`, não 34px: no celular
   o rótulo quebra em duas linhas e a altura fixa deixava o texto invadir a imagem.
   A área da imagem é fixa (1200/751, a proporção das capturas do produto) e o
   `object-fit:cover` centraliza a arte dentro dela — é o que faz os seis passos
   fecharem no mesmo retângulo, sem crescer nem encolher ao trocar de etapa. */
.mock--shot{aspect-ratio:auto;grid-template-rows:auto auto;background:#fff}
.mock--shot .mock__bar{min-height:34px;padding-block:8px;line-height:1.25}
.mock--shot .mock__img{display:block;width:100%;height:auto;aspect-ratio:1200/751;object-fit:cover;object-position:center}
/* duas telas no MESMO passo do ciclo: as duas ocupam a mesma célula do grid, então
   o cartão não muda de altura quando uma dá lugar à outra. A troca é dirigida pelo
   scroll (data-fase no container): a geração na primeira metade do passo, a tela de
   criação na segunda. `visibility` acompanha a opacidade para o leitor de tela não
   anunciar a tela que está escondida. */
.mock-stack{display:grid}
.mock-stack > .mock{grid-area:1/1;transition:opacity .32s var(--ease),visibility .32s var(--ease)}
.mock-stack[data-fase="gerando"] > .mock:nth-child(2),
.mock-stack[data-fase="criacao"] > .mock:nth-child(1){opacity:0;visibility:hidden;pointer-events:none}
/* comparativo em imagem */
.compare__figure{margin:0;display:block}
.compare__figure img{display:block;width:100%;height:auto}
.compare__col{display:none}
.cycle-rail{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid rgba(220,223,240,.8)}
.cycle-rail ol{display:flex;gap:8px;margin:0;padding:0;list-style:none;flex:1;min-width:0}
.cycle-rail li{
  flex:1;height:3px;border-radius:2px;background:rgba(96,69,255,.14);
  position:relative;overflow:hidden;
}
.cycle-rail li i{position:absolute;inset:0;background:var(--grad-mark);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.cycle-rail li.is-done i{transform:scaleX(1)}
.cycle-rail li.is-now i{transform:scaleX(var(--sp,.45))}
.cycle-rail__label{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

/* ============================================================
   CENA 10 — DEPOIS DA PROVA
   ============================================================ */
/* mesmo cartão do Comparativo: as duas artes coladas dentro de uma moldura só,
   com a frase de fecho na barra de baixo */
.after{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:52px;
  border-radius:28px;overflow:hidden;border:1px solid var(--line);background:#fff;
}
/* no desktop as duas listas viram uma arte só; abaixo de 1080 entra a arte
   desenhada para o celular (1:1), no lugar das duas listas em HTML — a arte de
   1400 px reduzida ao celular deixa o texto embutido ilegível. Cada família só
   aparece na sua faixa; dentro do cartão nenhuma tem raio nem sombra, porque
   quem arredonda é o cartão */
.after__figure{margin:0;display:block}
.after__figure img{display:block;width:100%;height:auto}
.after__mob{margin:0;display:none}
.after__mob img{display:block;width:100%;height:auto}
/* a barra de fecho é a do Comparativo: mesma caixa e mesma tipografia */
.after__close{
  grid-column:1/-1;padding:30px clamp(28px,4vw,44px);
  border-top:1px solid var(--line);background:#fff;text-align:center;
}
.after__close p{font-size:1.02rem;color:var(--ink-2)}
.after__close b{color:var(--ink)}
.roles3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.role-card{padding:26px;border-radius:20px;background:rgba(255,255,255,.75);border:1px solid var(--line)}
.role-card span{font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-deep);display:block;margin-bottom:12px}
.role-card b{display:block;font-size:1.02rem;letter-spacing:-.02em;margin-bottom:8px}
.role-card p{font-size:.86rem;color:var(--ink-2);line-height:1.58}

/* ============================================================
   CENA 11 — GOVERNANÇA (CAMADAS)
   ============================================================ */
.layers{display:grid;gap:14px;margin-top:56px}
.layer{
  display:grid;grid-template-columns:56px minmax(0,1fr);
  gap:6px clamp(16px,2.4vw,28px);align-items:start;
  padding:clamp(22px,3vw,34px);
  border-radius:22px;border:1px solid var(--line);
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 28px rgba(30,35,90,.05);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.layer:hover{transform:translateX(6px);box-shadow:0 18px 44px rgba(30,35,90,.09)}
.layer__icon{grid-row:1/3;align-self:center;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:rgba(96,69,255,.08);color:var(--violet-deep)}
.layer > div:not(.layer__icon),.layer p{grid-column:2}
.layer h3{font-size:1.12rem;letter-spacing:-.02em;line-height:1.2}
.layer h3 small{display:block;font-size:.72rem;font-weight:600;color:var(--ink-3);letter-spacing:.02em;margin-top:5px;text-transform:none}
.layer p{font-size:.9rem;color:var(--ink-2);line-height:1.6;margin-top:2px}
.layer__rank{font-size:.68rem;font-weight:800;letter-spacing:.12em;color:var(--ink-3);text-align:right}

.mec{margin-top:84px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:start}
.mec h2{font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.035em;margin-bottom:18px}
.principles{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:0;padding:0;list-style:none}
.principles li{display:flex;gap:10px;font-size:.88rem;color:var(--ink-2);align-items:flex-start;line-height:1.45}
.principles svg{flex:none;margin-top:3px;color:var(--green)}
.mec__quote{
  margin-top:30px;padding:22px 26px;border-left:3px solid var(--violet);
  background:rgba(96,69,255,.04);border-radius:0 16px 16px 0;
  font-size:1.02rem;color:var(--ink);font-weight:600;letter-spacing:-.015em;line-height:1.45;
}
/* assinatura de alinhamento no canto inferior direito do bloco: a frase e a
   marca do Ministério na mesma linha, a marca encostada na borda (27/10) */
.mec__seal{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:flex-end;gap:16px;
}
.mec__seal p{font-size:.88rem;line-height:1.5;color:var(--ink-2);max-width:24em}
.mec__seal img{flex:none;width:52px;height:auto}

/* ============================================================
   CENA 13 — PROVA REAL
   ============================================================ */
.proof{position:relative;border-radius:32px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-lift)}
.proof__media{position:relative;height:clamp(260px,42vh,420px);background:
  radial-gradient(90% 80% at 70% 18%, rgba(96,69,255,.16), transparent 60%),
  linear-gradient(155deg,#D9D3C9 0%,#C9C6C2 34%,#B9BDC6 66%,#D8D4CE 100%);}
.proof__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.4) 62%,rgba(255,255,255,.95) 100%)}
.proof__media .photo__caption{bottom:auto;top:20px;background:rgba(255,255,255,.86);padding:6px 12px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.proof__body{padding:clamp(28px,4vw,44px);margin-top:-56px;position:relative;z-index:2}
.proof h2{font-size:clamp(1.8rem,3.6vw,2.8rem);letter-spacing:-.04em;margin-bottom:18px}
/* o parágrafo da operação real e a marca da instituição na mesma linha, com a
   marca à direita (27/10) */
.proof__lead-row{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px)}
.proof__seal{flex:0 0 auto;width:clamp(118px,13vw,168px);height:auto}
.proof__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.fact{padding:18px 20px;border-radius:16px;background:var(--glass);border:var(--glass-border);outline:var(--glass-outline);backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%)}
.fact b{display:block;font-size:1.25rem;letter-spacing:-.03em;line-height:1.1}
.fact span{display:block;margin-top:6px;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
/* 27/10: o quarto cartão traz os conceitos da FEFISO (4 IGC · 4 CI · 5 CI-EaD)
   no mesmo corpo dos outros? Não — três conceitos numa linha não cabem em
   1.25rem. O corpo cai para 1rem e o rótulo vira a fonte ("MEC/Inep"), sem
   caixa alta, porque "Inep" se escreve assim. */
.fact--ind b{font-size:1rem;letter-spacing:-.01em}
.fact--ind span{text-transform:none;letter-spacing:.08em}

/* a faixa "passagem" da FEFISO saiu: 70vh para uma linha de 0,7rem não se pagava.
   O que ela dizia virou sobrancelha da cena da Massari, que ganhou manchete. */
.massari__head{max-width:64ch;margin-bottom:clamp(40px,6vh,64px)}
/* a manchete saiu a pedido do CEO: sobra só a sobrancelha, promovida a head —
   maior que um eyebrow comum, com FEFISO em destaque gradiente */
.massari__kicker{
  font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:800;letter-spacing:-.01em;
  text-transform:none;color:var(--ink-2);margin:0
}
.massari__kicker .grad{font-weight:800}

/* ============================================================
   CENA 17 — APLICAÇÃO
   ============================================================ */
.segments{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.segment{padding:30px 26px;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.8);display:flex;flex-direction:column;gap:12px}
.segment--lead{background:linear-gradient(170deg,#FCFBFF,#F4F1FF);border-color:rgba(96,69,255,.22);box-shadow:0 18px 44px rgba(96,69,255,.08)}
.segment span{font-size:.64rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--violet-deep)}
.segment h3{font-size:1.08rem;letter-spacing:-.02em;line-height:1.25}
.segment p{font-size:.88rem;color:var(--ink-2);line-height:1.6}

/* ============================================================
   CENA 18 — CONVERSÃO
   ============================================================ */
.convert{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(32px,5vw,80px);align-items:start}
.convert h2{font-size:clamp(2rem,4.2vw,3.2rem);letter-spacing:-.04em;line-height:1.02}
.convert h2 + h2{margin-top:4px;color:var(--violet-deep)}
.convert .lead{margin-top:24px}
.convert__cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.form{
  border-radius:26px;padding:clamp(26px,3.4vw,38px);
  background:rgba(255,255,255,.92);border:1px solid var(--line);
  box-shadow:var(--shadow-lift);
}
.form h3{font-size:1.18rem;letter-spacing:-.02em;margin-bottom:6px}
.form > p{font-size:.84rem;color:var(--ink-3);margin-bottom:24px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font:inherit;font-size:.9rem;transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(96,69,255,.13)
}
.form__submit{grid-column:1/-1;margin-top:6px}
.form__submit .btn{width:100%}
.lgpd{margin-top:16px;font-size:.7rem;color:var(--ink-3);line-height:1.55}
.lgpd a{color:var(--violet-deep);text-decoration:underline;text-underline-offset:2px}
.form__status{
  grid-column:1/-1;margin-top:14px;padding:12px 14px;border-radius:12px;
  font-size:.82rem;line-height:1.5;display:none;
}
.form__status.is-ok{display:block;background:rgba(35,138,57,.08);color:#17602a;border:1px solid rgba(35,138,57,.22)}
.form__status.is-erro{display:block;background:rgba(217,90,11,.07);color:#8f3c07;border:1px solid rgba(217,90,11,.24)}
/* enquanto o envio está no ar o botão fica travado: evita o envio duplo de
   quem clica duas vezes por achar que não pegou */
.form button[type="submit"][disabled]{opacity:.68;cursor:progress}

/* ============================================================
   RODAPÉ
   ============================================================ */
.footer{background:linear-gradient(180deg,#F7F8FC 0%,#F0EEFF 100%);border-top:1px solid var(--line);padding-block:clamp(52px,8vh,80px) 36px}
.footer__grid{display:grid;grid-template-columns:1.4fr .8fr .9fr 1fr;gap:clamp(24px,4vw,56px)}
.footer h4{font-size:.68rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.footer ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.footer li,.footer p{font-size:.86rem;color:var(--ink-2);line-height:1.55}
.footer a:hover{color:var(--violet-deep)}
.footer__brand p{margin-top:14px;max-width:26em;font-size:.86rem;color:var(--ink-2)}
.footer__base{margin-top:56px;padding-top:24px;border-top:1px solid rgba(220,223,240,.8);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.76rem;color:var(--ink-3)}

/* ============================================================
   GUIA DE PROGRESSO + SINAL DE SCROLL
   ============================================================ */
.guia{
  position:fixed;right:max(18px,env(safe-area-inset-right,0px));top:50%;
  transform:translateY(-50%);z-index:60;display:none
}
.guia__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:11px;position:relative}
.guia__list::before{
  content:"";position:absolute;right:5px;top:5px;bottom:5px;width:2px;border-radius:2px;
  background:rgba(7,14,53,.10)
}
.guia__list::after{
  content:"";position:absolute;right:5px;top:5px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--violet-soft),var(--violet));
  height:calc(var(--prog,0) * (100% - 10px))
}
.guia__link{display:flex;align-items:center;gap:10px;padding:0;text-decoration:none;color:var(--ink-3);border-radius:4px;position:relative;z-index:1}
.guia__link:focus-visible{outline:2px solid var(--violet);outline-offset:6px}
.guia__label{
  font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transform:translateX(8px);transition:opacity .22s var(--ease),transform .22s var(--ease);
  text-shadow:0 1px 8px rgba(247,248,252,.95)
}
.guia__bar{
  flex:none;width:10px;height:10px;border-radius:50%;background:#fff;
  border:1.5px solid rgba(7,14,53,.18);
  transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),width .25s,height .25s
}
.guia__link.is-past .guia__bar{border-color:rgba(96,69,255,.7);background:rgba(96,69,255,.7)}
.guia__link.is-active .guia__bar{
  width:12px;height:12px;border-color:var(--violet);background:var(--violet);
  box-shadow:0 0 0 4px rgba(96,69,255,.14)
}
.guia__link:hover .guia__label,.guia__link:focus-visible .guia__label{opacity:1;transform:none;color:var(--violet-deep)}
@media (min-width:1180px){.guia{display:block}}
@media (min-width:1280px){
  .guia__link.is-active .guia__label{opacity:1;transform:none;color:var(--violet-deep)}
}

.pin-hint{
  position:fixed;left:50%;bottom:max(52px,calc(env(safe-area-inset-bottom,0px) + 44px));
  transform:translate(-50%,14px);z-index:65;
  display:flex;align-items:center;gap:10px;
  padding:9px 16px 9px 15px;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(244,244,255,.84));
  border:1px solid rgba(255,255,255,.95);
  outline:1px solid rgba(96,69,255,.16);
  backdrop-filter:blur(18px) saturate(115%);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  box-shadow:0 10px 30px rgba(30,35,90,.10),0 2px 6px rgba(96,69,255,.08);
  font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s
}
.pin-hint.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.pin-hint.is-soft{opacity:.55}
.pin-hint__count{color:var(--violet-deep);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.pin-hint__count[hidden]{display:none}
.pin-hint__arrow{display:grid;place-items:center;width:16px;height:16px;color:var(--violet);animation:hintBob 1.7s var(--ease) infinite}
@keyframes hintBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1080px){
  .pillars{grid-template-columns:1fr 1fr}
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .hero__visual{max-width:520px;width:100%;margin-inline:auto}
  .photo{aspect-ratio:1/1}
  .photo--wide{aspect-ratio:4/3}
  .pillars-inline{grid-template-columns:1fr 1fr}
  .split,.quote-grid,.mec,.convert{grid-template-columns:1fr}
  /* no desktop a Massari tem o texto à esquerda e o retrato à direita; empilhado,
     o retrato volta ao topo para seguir o ritmo dos outros depoimentos */
  .quote-grid--massari > div:last-child{order:-1}
  /* a banda da consequência empilha: diagnóstico, depois a virada */
  .consequencia__band{grid-template-columns:1fr;gap:clamp(22px,4vh,32px);align-items:start}
  /* os dois painéis viram um embaixo do outro, dentro do mesmo cartão e com a
     divisória entre eles — igual ao comparativo em colunas */
  .solucao__demo{grid-template-columns:1fr}
  /* mesma troca do comparativo: a arte dá lugar ao HTML, que continua legível */
  .solucao__figure{display:none}
  .solucao__painel{display:flex}
  .solucao__painel + .solucao__painel{border-top:1px solid var(--line)}
  /* quatro fatos: duas colunas fecham um 2×2 — com três colunas sobraria
     uma célula vazia na segunda linha */
  .proof__facts{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .cstep{grid-template-columns:1fr;gap:20px;max-width:640px}
  /* abaixo de 1080 o comparativo em imagem vira texto: a 389 px de largura
     o texto embutido cai para ~8 px e deixa de ser lido */
  .compare__figure{display:none}
  .compare__col{display:block}
  /* mesmo motivo no "depois da prova": a arte de desktop dá lugar à arte feita
     para o celular, empilhada dentro do cartão com a divisória entre as duas */
  .after__figure{display:none}
  .after__mob{display:block}
  .after__mob + .after__mob{border-top:1px solid var(--line)}
  /* os painéis deixaram de ser placeholder: agora mostram a tela real do produto,
     então valem também no celular e no tablet */
  .mock{display:grid;margin-top:6px}
  .mock--device{aspect-ratio:auto;padding:12px 0}
  /* as duas telas de celular passaram a ser artes em 4:3: abaixo de 1080 elas
     ocupam a coluna inteira, em vez dos 280px que serviam ao print vertical */
  .mock--device .mock__img{height:auto;width:100%}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{display:none}
  .site-header{padding-block:12px}
  .brand__tag{display:none}
  .only-wide{display:none}
  .only-narrow{display:inline}
  .stats{grid-template-columns:1fr;gap:26px}
  .stat{border-top:1px solid var(--line);padding-top:20px;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center}
  .stat .num{font-size:3.4rem}
  .stat p{margin-top:0}
  .stat__bar{grid-column:1/-1;margin-top:14px}
  .pillars{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .compare__col + .compare__col{border-left:0;border-top:1px solid var(--line)}
  .after{grid-template-columns:1fr}
  .roles3{grid-template-columns:1fr}
  .segments{grid-template-columns:1fr}
  .layer{grid-template-columns:44px 1fr;gap:8px 16px}
  .layer__rank{display:none}
  .layer__icon{width:44px;height:44px}
  .principles{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .proof__facts{grid-template-columns:1fr}
  .proof__lead-row{flex-direction:column;align-items:flex-start;gap:18px}
  .proof__seal{width:132px}
  .pillars-inline{grid-template-columns:1fr}
  .cycle-wrap{height:283vh}
  .cycle-sticky{padding-top:80px;padding-bottom:22px}
  .cycle-head p{display:none}
  .cycle-head h2{font-size:1.5rem;line-height:1.12}
  .cycle-stage{margin-top:18px}
  .cycle-panels{place-items:center center}
  .cstep{
    padding:24px 20px 26px;border-radius:22px;
    background:rgba(255,255,255,.82);
    border:1px solid var(--line);
    box-shadow:0 12px 32px rgba(30,35,90,.06);
  }
  .cstep h3{font-size:1.22rem}
  .cstep p{font-size:.9rem}
  .cycle-rail__label{display:none}
}
@media (max-width:420px){
  .compare__col{padding:24px 20px}
  .form{padding:22px 18px}
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important;animation:none !important}
  [data-reveal]{opacity:1;transform:none}
  .mask > span{transform:none}
  .empty-wrap,.cycle-wrap{height:auto}
  .empty-sticky,.cycle-sticky{position:static;min-height:0;height:auto;padding-block:80px}
  .empty__before,.empty__after{opacity:1;transform:none}
  .empty__before{margin-bottom:48px}
  .cycle-panels{display:block}
  .cstep{display:grid;grid-area:auto;position:static;opacity:1;transform:none;pointer-events:auto;margin-bottom:56px}
  /* sem scroll dirigido, as duas telas do passo 01 aparecem empilhadas —
     o `!important` vence a regra de fase, que tem especificidade maior */
  .mock-stack{display:block}
  .mock-stack[data-fase] > .mock{grid-area:auto;opacity:1 !important;visibility:visible !important}
  .mock-stack > .mock + .mock{margin-top:16px}
  .cycle-rail{display:none}
  .photo{transform:none}
}

/* ============================================================
   PÁGINAS LEGAIS — POLÍTICA DE PRIVACIDADE E TERMOS DE USO
   ------------------------------------------------------------
   Mesmo cabeçalho, mesmos tokens e mesmo rodapé da página
   inicial. O que muda é o corpo: coluna de leitura com sumário
   fixo à esquerda e blocos numerados à direita.
   ============================================================ */
.legal{
  position:relative;isolation:isolate;
  /* o cabeçalho é fixo: o primeiro respiro tem de descontar a altura dele,
     senão a sobrancelha nasce escondida atrás da barra */
  padding-block:clamp(112px,14vh,150px) clamp(64px,9vh,110px);
  background:var(--grad-canvas);
}
.legal::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--halo);pointer-events:none;
}
.legal__head{max-width:54em}
.legal__head h1{
  font-size:clamp(2.1rem,4.6vw,3.5rem);letter-spacing:-.045em;line-height:1.02;
  margin:0 0 20px;
}
.legal__head .lead{margin-top:22px}
.legal__meta{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:28px;
  padding-top:20px;border-top:1px solid var(--line);
  font-size:.78rem;letter-spacing:.02em;color:var(--ink-3);
}
.legal__meta b{font-weight:700;color:var(--ink-2)}

/* duas colunas: sumário + texto */
.legal__layout{
  display:grid;grid-template-columns:minmax(0,262px) minmax(0,1fr);
  gap:clamp(28px,4.5vw,72px);align-items:start;
  margin-top:clamp(34px,5vh,54px);
}
.legal__toc{
  position:sticky;top:92px;
  padding:22px 20px 18px;border-radius:20px;
  background:var(--glass);border:var(--glass-border);outline:var(--glass-outline);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);
}
.legal__toc h2{
  font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px;
}
.legal__toc ol{
  margin:0;padding:0;list-style:none;display:grid;gap:2px;
  counter-reset:toc;
}
.legal__toc li{counter-increment:toc}
.legal__toc a{
  display:flex;gap:10px;padding:7px 8px;border-radius:9px;
  font-size:.82rem;line-height:1.35;color:var(--ink-2);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.legal__toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-weight:700;font-size:.7rem;color:var(--violet-soft);
  letter-spacing:.04em;padding-top:2px;
}
.legal__toc a:hover,.legal__toc a:focus-visible{background:rgba(96,69,255,.08);color:var(--violet-deep)}

/* corpo */
.legal__body{min-width:0;max-width:70ch}
.legal__body section{padding-top:6px}
.legal__body section + section{
  margin-top:clamp(34px,5vh,52px);padding-top:clamp(30px,4vh,44px);
  border-top:1px solid var(--line);
}
.legal__body section > h2{
  display:flex;gap:14px;align-items:baseline;
  font-size:clamp(1.22rem,2vw,1.5rem);letter-spacing:-.025em;line-height:1.2;
  margin-bottom:16px;scroll-margin-top:96px;
}
.legal__body section > h2 span{
  flex:none;font-size:.72rem;font-weight:800;letter-spacing:.08em;
  color:var(--violet);padding-top:.35em;
}
.legal__body h3{
  font-size:1rem;font-weight:700;letter-spacing:-.012em;line-height:1.35;
  margin:24px 0 10px;color:var(--ink);
}
.legal__body p{font-size:.96rem;line-height:1.78;color:var(--ink-2)}
.legal__body p + p{margin-top:14px}
.legal__body ul,.legal__body ol{
  margin:14px 0 0;padding-left:22px;display:grid;gap:9px;
  font-size:.96rem;line-height:1.72;color:var(--ink-2);
}
.legal__body li::marker{color:var(--violet-soft)}
.legal__body b,.legal__body strong{color:var(--ink);font-weight:700}
.legal__body a{color:var(--violet-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.legal__body a:hover{color:var(--violet)}

/* caixa de destaque dentro do texto */
.legal__note{
  margin-top:20px;padding:18px 20px;border-radius:0 14px 14px 0;
  border-left:3px solid var(--violet);background:rgba(96,69,255,.045);
  font-size:.92rem;line-height:1.7;color:var(--ink-2);
}
.legal__note b{color:var(--ink)}

/* tabelas (finalidades e cookies) */
.legal__table-wrap{
  margin-top:20px;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:#fff;
}
.legal__table{width:100%;border-collapse:collapse;font-size:.84rem;line-height:1.55}
.legal__table th{
  text-align:left;font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);background:rgba(96,69,255,.05);
  padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.legal__table td{
  padding:12px 14px;border-bottom:1px solid rgba(220,223,240,.75);
  color:var(--ink-2);vertical-align:top;
}
.legal__table tr:last-child td{border-bottom:0}
.legal__table td b{color:var(--ink)}

/* rodapé da página legal: volta ao site */
.legal__foot{
  margin-top:clamp(44px,6vh,64px);padding-top:30px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
}

@media (max-width:1080px){
  .legal__layout{grid-template-columns:1fr;gap:32px}
  .legal__toc{position:static;order:-1}
  .legal__toc ol{grid-template-columns:1fr 1fr;display:grid;gap:2px 14px}
  .legal__body{max-width:none}
}
@media (max-width:760px){
  .legal__toc ol{grid-template-columns:1fr}
  .legal__table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .legal__table{min-width:520px}
  .legal__meta{font-size:.74rem}
}

/* ============================================================
   CONTATO DIRETO — a página que abre depois do formulário
   ------------------------------------------------------------
   Mesma linguagem das páginas legais: cabeçalho fixo, coluna
   central e rodapé. O corpo é um cartão só: o caminho para o
   WhatsApp à esquerda, o retrato do fundador à direita.
   ============================================================ */
.direto{
  position:relative;isolation:isolate;
  /* o cabeçalho é fixo: o primeiro respiro desconta a altura dele */
  padding-block:clamp(112px,14vh,150px) clamp(64px,9vh,110px);
  background:var(--grad-canvas);
}
.direto::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--halo);pointer-events:none;
}
/* cartão de uma coluna desde 27/10: a foto do fundador saiu e sobrou o texto,
   que passa a usar a largura do cartão. A medida da leitura continua presa ao
   `--measure` do `.lead`, então a linha não estica à toa */
.direto__card{
  display:grid;grid-template-columns:minmax(0,1fr);
  max-width:860px;margin-inline:auto;
  padding:clamp(26px,4vw,52px);border-radius:30px;
  background:var(--glass);border:var(--glass-border);outline:var(--glass-outline);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);
}
.direto__texto{min-width:0}
.direto__texto h1{
  font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.045em;line-height:1.05;
  max-width:15em;margin:0 0 20px;
}
.direto__texto .lead{margin-top:0}
/* dois estados na mesma página: contato (padrão) e confirmação (quem vem do
   formulário). Sem JS, o que fica visível é o contato — nunca uma confirmação
   que talvez não tenha acontecido */
.direto__estado{display:none}
.direto__estado.is-on{display:block}
/* a confirmação é um estado, não um alarme: verde só no ponto e na palavra */
.eyebrow--ok{color:var(--green)}
.eyebrow--ok::before{
  content:"";display:inline-block;vertical-align:middle;
  width:7px;height:7px;border-radius:50%;margin-right:9px;
  background:var(--green);box-shadow:0 0 0 3px rgba(35,138,57,.14);
}
/* o estado de falha usa as mesmas cores de alerta do `.form__status.is-erro`
   (âmbar sobre fundo quase branco): o mesmo significado, o mesmo par de tons */
.eyebrow--erro{color:#8f3c07}
.eyebrow--erro::before{
  content:"";display:inline-block;vertical-align:middle;
  width:7px;height:7px;border-radius:50%;margin-right:9px;
  background:#d95a0b;box-shadow:0 0 0 3px rgba(217,90,11,.14);
}
/* o atalho do WhatsApp é acessório: separado por fio, sem competir com a
   confirmação que está acima */
.direto__bloco{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.direto__bloco-titulo{margin:0 0 8px;font-size:.98rem;font-weight:800;letter-spacing:-.012em;color:var(--ink)}
.direto__bloco-texto{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-3);max-width:44em}
.direto__cta--bloco{margin-top:18px}
.direto__bloco-nota{margin:10px 0 0;font-size:.72rem;letter-spacing:.02em;color:var(--ink-3)}
/* quem recebe a mensagem */
.direto__quem{margin-top:26px;padding-left:16px;border-left:3px solid var(--violet)}
.direto__quem b{display:block;font-size:1.04rem;letter-spacing:-.012em;color:var(--ink)}
.direto__quem span{
  display:block;margin-top:4px;
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
/* o rótulo é longo: quebra em duas linhas em vez de estourar a coluna no celular */
.direto__cta{margin-top:26px;gap:10px;max-width:100%;white-space:normal;text-align:center;line-height:1.25}
.direto__cta svg{flex:none}
.direto__canais{
  display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--ink-3);
}
.direto__canais a{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink-2);transition:color .2s var(--ease)}
.direto__canais a:hover,.direto__canais a:focus-visible{color:var(--violet-deep)}
.direto__canais svg{flex:none;color:var(--violet)}
.direto__nota{margin-top:20px;font-size:.74rem;line-height:1.55;color:var(--ink-3);max-width:46em}
.direto__nota a{color:var(--violet-deep);text-decoration:underline;text-underline-offset:2px}
.direto__voltar{margin-top:clamp(34px,5vh,48px)}

/* canais escritos, na página de contato comercial: cada um ocupa uma linha e
   leva o próprio botão de copiar — quem chega ali às vezes quer levar o
   contato para outro sistema, não abrir o WhatsApp na hora */
.canais{display:grid;gap:12px;margin-top:28px}
.canal{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 16px;border-radius:16px;
  background:rgba(255,255,255,.55);border:var(--glass-border);
}
.canal__texto{min-width:0}
.canal__rotulo{display:block;font-size:.64rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.canal__valor{
  display:block;margin-top:5px;font-size:.95rem;font-weight:600;color:var(--ink);
  text-decoration:none;overflow-wrap:anywhere;
}
a.canal__valor:hover,a.canal__valor:focus-visible{color:var(--violet-deep)}
.canal__copiar{
  flex:none;padding:8px 14px;border-radius:999px;cursor:pointer;font:inherit;
  font-size:.72rem;font-weight:800;letter-spacing:.04em;
  color:var(--violet-deep);background:var(--violet-wash);
  border:1px solid rgba(96,69,255,.22);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.canal__copiar:hover,.canal__copiar:focus-visible{background:rgba(96,69,255,.16)}
.canal__copiar.is-copiado{color:var(--white);background:var(--green);border-color:var(--green)}
@media (max-width:520px){
  .canal{align-items:flex-start;flex-direction:column;gap:12px}
  .canal__copiar{align-self:flex-start}
}

/* ─── Preferências de cookies (gatilho no rodapé) ────────────────────────
   O aviso em si vive em `consentimento.js` e traz o próprio estilo embutido:
   se o navegador servir uma folha antiga em cache, o aviso ainda aparece
   inteiro e utilizável. Aqui só o botão do rodapé, que acompanha o texto. */
.footer__prefs{
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
  transition:color .2s var(--ease);
}
.footer__prefs:hover,.footer__prefs:focus-visible{color:var(--violet)}