/* =========================================================
   Guias Prouni, Sisu e Fies — Instituto Ensino de Potência
   Mobile-first · marinho + ciano · Plus Jakarta Sans + Inter
   ========================================================= */

@property --ang{ syntax:"<angle>"; inherits:false; initial-value:0deg; }

:root{
  --navy-950:#020f1d;
  --navy-900:#041d33;
  --navy-800:#08304f;
  --navy-700:#0e4470;

  --cyan:#2fd0e3;
  --cyan-2:#7ae6f2;
  --cyan-ink:#00788a;
  --cyan-soft:#e4f8fb;

  --ink:#0b1f33;
  --ink-2:#4a5c70;
  --on-dark:#ffffff;
  --on-dark-2:#b9cbdc;

  --gray-50:#f4f7fa;
  --line:#e2e9f0;
  --line-dark:rgba(255,255,255,.1);
  --glass:rgba(255,255,255,.05);

  --r:14px;
  --r-lg:22px;
  --shadow:0 1px 2px rgba(11,31,51,.05), 0 8px 28px rgba(11,31,51,.07);
  --shadow-lg:0 2px 4px rgba(11,31,51,.06), 0 24px 60px rgba(11,31,51,.14);

  --font-head:"Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

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

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:72px }
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
p{ margin:0 0 1rem } p:last-child{ margin-bottom:0 }
h1,h2,h3,h4{ margin:0; font-family:var(--font-head); font-weight:800; line-height:1.12; letter-spacing:-.025em; text-wrap:balance }
h1{ font-size:clamp(2.15rem, 6.4vw, 3.55rem); letter-spacing:-.035em }
h2{ font-size:clamp(1.8rem, 4.8vw, 2.6rem) }
h3{ font-size:1.25rem; font-weight:700; letter-spacing:-.015em }
h4{ font-size:1.1rem; font-weight:700; letter-spacing:-.01em }
strong{ font-weight:600 }

.container{ width:100%; max-width:1160px; margin:0 auto; padding:0 16px }
@media (min-width:640px){ .container{ padding:0 28px } }

.skip-link{ position:absolute; left:-9999px; top:8px; z-index:100; background:#fff; color:var(--ink); padding:.6rem 1rem; border-radius:8px }
.skip-link:focus{ left:8px }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:8px }

.ico{ width:1.2em; height:1.2em; flex:none; vertical-align:middle }

.grad{
  background:linear-gradient(92deg, var(--cyan) 0%, var(--cyan-2) 60%, #b6f4fb 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.marca-texto{ background:linear-gradient(transparent 62%, rgba(47,208,227,.35) 62%); padding:0 .1em }

/* ---------- Barra de progresso de leitura ---------- */
.progresso{ position:fixed; inset:0 0 auto 0; height:3px; z-index:60; pointer-events:none }
.progresso span{ display:block; height:100%; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, var(--cyan), var(--cyan-2)) }

/* ---------- Botões ---------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:50px; padding:.8rem 1.5rem;
  background:var(--cyan); color:var(--navy-950);
  font-family:var(--font-head); font-weight:700; font-size:1rem; line-height:1.2; letter-spacing:-.005em;
  text-decoration:none; text-align:center;
  border:1px solid transparent; border-radius:999px;
  box-shadow:0 0 0 1px rgba(47,208,227,.25), 0 8px 24px -6px rgba(47,208,227,.55);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(47,208,227,.35), 0 14px 32px -8px rgba(47,208,227,.7) }
.btn:active{ transform:translateY(0) }
.btn-sm{ min-height:40px; padding:.45rem 1.1rem; font-size:.92rem; box-shadow:none }
.btn-sm:hover{ box-shadow:0 8px 20px -8px rgba(47,208,227,.7) }
.btn-lg{ min-height:58px; padding:1rem 2rem; font-size:1.08rem }
.btn-bloco{ width:100% }
.ico-seta{ transition:transform .25s var(--ease) }
/* cadeado nos botões que levam ao pagamento */
.ico-cadeado{ width:1.05em; height:1.05em; opacity:.85 }
.btn:hover .ico-seta{ transform:translateX(4px) }

/* reflexo passando pelo botão */
.btn-brilho::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-120%);
  animation:brilho-botao 4.5s var(--ease) 1.5s infinite;
}
@keyframes brilho-botao{ 0%{ transform:translateX(-120%) } 28%,100%{ transform:translateX(120%) } }

.btn-contorno{ background:transparent; color:var(--on-dark); border-color:rgba(47,208,227,.45); box-shadow:none }
.btn-contorno:hover{ background:rgba(47,208,227,.1); border-color:var(--cyan); box-shadow:none }

.link-sec{
  display:inline-flex; align-items:center; min-height:48px; padding:0 .25rem;
  color:var(--on-dark-2); font-weight:500; text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); text-underline-offset:5px;
  transition:color .2s, text-decoration-color .2s;
}
.link-sec:hover{ color:#fff; text-decoration-color:var(--cyan) }

/* ---------- Cabeçalho ---------- */
.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(4,29,51,.72);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background-color .3s, border-color .3s, box-shadow .3s;
}
.topo.rolou{ background:rgba(2,15,29,.9); border-color:var(--line-dark); box-shadow:0 10px 30px -12px rgba(0,0,0,.5) }
.topo-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px }
.marca{ display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; font-family:var(--font-head); font-size:.95rem; font-weight:600; letter-spacing:-.01em }
.marca img{ width:30px; height:auto }
.marca strong{ font-weight:800 }
.topo-nav{ display:none }
@media (min-width:1000px){
  .topo-nav{ display:flex; gap:2rem }
  .topo-nav a{ color:var(--on-dark-2); text-decoration:none; font-size:.93rem; font-weight:500; transition:color .2s }
  .topo-nav a:hover{ color:#fff }
}
@media (max-width:380px){ .marca span{ font-size:.82rem } }

/* ---------- Seções ---------- */
.secao{ position:relative; padding:72px 0 }
@media (min-width:960px){ .secao{ padding:112px 0 } }
.secao.escura{ background:var(--navy-900); color:var(--on-dark); overflow:hidden }
.secao.clara{ background:var(--gray-50) }
.secao.branca{ background:#fff }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; margin:0 0 .9rem;
  font-family:var(--font-head); font-weight:700; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-ink);
}
.eyebrow::before{ content:""; width:18px; height:2px; border-radius:2px; background:currentColor }
.escura .eyebrow{ color:var(--cyan) }

.cabecalho{ max-width:720px; margin:0 auto 48px; text-align:center }
.cabecalho h2{ margin-bottom:.9rem }
.cabecalho p{ color:var(--ink-2); font-size:1.08rem }
.escura .cabecalho p{ color:var(--on-dark-2) }

.lead{ font-size:1.15rem; color:var(--on-dark-2) }
.nota{ margin-top:.75rem; font-size:.92rem; color:var(--on-dark-2) }

.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow) }

.lista-check{ list-style:none; margin:0; padding:0 }
.lista-check li{ position:relative; padding-left:1.9rem; margin:.55rem 0; line-height:1.5 }
.lista-check li::before{
  content:""; position:absolute; left:0; top:.1em; width:1.25rem; height:1.25rem; border-radius:50%;
  background:var(--cyan-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%2300788a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/90% no-repeat;
}
.escura .lista-check li::before{ background-color:rgba(47,208,227,.14); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%232fd0e3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }

.lista-x{ list-style:none; margin:0; padding:0 }
.lista-x li{ position:relative; padding-left:1.9rem; margin:.55rem 0; line-height:1.5 }
.lista-x li::before{
  content:""; position:absolute; left:0; top:.1em; width:1.25rem; height:1.25rem; border-radius:50%;
  background:#fdeaea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23c0483f' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/86% no-repeat;
}

.cta-linha{ margin-top:40px; text-align:center }
.micro{ margin:.9rem 0 0; font-size:.9rem; color:var(--on-dark-2) }
.micro-claro{ color:var(--ink-2) }
.cta-linha .micro{ margin-top:.8rem }

/* ---------- Para quem é ---------- */
/* flex em vez de grid: com um card só, ele fica centralizado */
.publico-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px }
@media (min-width:860px){ .publico-grid{ gap:24px } }
.publico{
  flex:1 1 380px; max-width:560px;
  padding:28px; border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow);
}
.publico h3{ font-size:1.25rem; margin-bottom:1rem }
.publico-sim{ border-color:#bfe3ea; background:linear-gradient(180deg, var(--cyan-soft), #fff 55%) }
.publico-nao{ background:var(--gray-50) }
.publico-nao li{ color:var(--ink-2) }

/* ---------- Com e sem o manual ---------- */
.versus{ display:grid; gap:18px; max-width:980px; margin:0 auto }
@media (min-width:860px){ .versus{ grid-template-columns:1fr 1fr; gap:24px } }
.versus-col{ padding:28px; border-radius:var(--r-lg) }
.versus-col h3{ font-size:1.2rem; margin-bottom:1rem }
.versus-antes{ background:var(--gray-50); border:1px solid var(--line); color:var(--ink-2) }
.versus-depois{ background:var(--navy-900); color:#fff; box-shadow:var(--shadow-lg); position:relative; overflow:hidden }
.versus-depois::before{ content:""; position:absolute; width:320px; height:320px; right:-120px; top:-160px; border-radius:50%; background:radial-gradient(circle, rgba(47,208,227,.28), transparent 65%) }
.versus-depois li{ position:relative; color:var(--on-dark-2) }

/* WhatsApp dentro da oferta */
.whats-oferta{ max-width:980px; margin:20px auto 0; justify-content:center; padding:18px }

/* ---------- Fundo com brilho (hero, oferta, CTA final) ---------- */
.hero-fundo{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.brilho{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; will-change:transform }
.brilho-1{ width:520px; height:520px; top:-180px; left:-160px; background:radial-gradient(circle, rgba(47,208,227,.55), transparent 65%); animation:flutuar 18s ease-in-out infinite alternate }
.brilho-2{ width:560px; height:560px; bottom:-220px; right:-180px; background:radial-gradient(circle, rgba(30,110,200,.6), transparent 65%); animation:flutuar 22s ease-in-out infinite alternate-reverse }
.brilho-3{ width:700px; height:700px; top:-260px; left:50%; margin-left:-350px; background:radial-gradient(circle, rgba(47,208,227,.28), transparent 65%); animation:flutuar 20s ease-in-out infinite alternate }
.brilho-4{ width:520px; height:520px; top:-240px; right:-120px; background:radial-gradient(circle, rgba(47,208,227,.45), transparent 65%); animation:flutuar 18s ease-in-out infinite alternate }
@keyframes flutuar{ 0%{ transform:translate(0,0) scale(1) } 100%{ transform:translate(60px,40px) scale(1.12) } }

/* ---------- 1. Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:var(--on-dark);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(14,68,112,.9), transparent 70%),
    var(--navy-900);
  padding:48px 0 56px;
}
/* grade sutil de fundo */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 30%, #000 30%, transparent 80%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 30%, #000 30%, transparent 80%);
}
.hero > .container{ position:relative; z-index:1 }
@media (min-width:960px){ .hero{ padding:88px 0 80px } }

.hero-grid{ display:grid; gap:48px; align-items:center }
@media (min-width:960px){ .hero-grid{ grid-template-columns:1.1fr 440px; gap:72px } }

.pill{
  display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1.4rem;
  padding:.4rem .95rem; border-radius:999px;
  background:rgba(47,208,227,.1); border:1px solid rgba(47,208,227,.3);
  color:var(--cyan-2); font-family:var(--font-head); font-weight:700; font-size:.85rem; letter-spacing:.04em;
}
.pill-ponto{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--cyan) }
.pill-ponto::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--cyan); animation:pulso 2.4s ease-out infinite }
@keyframes pulso{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(3); opacity:0 } }

.hero h1{ margin-bottom:1.25rem }
.hero .lead{ max-width:33em; margin-bottom:2rem }

.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem }
.hero-cta .btn{ width:100% }
@media (min-width:520px){ .hero-cta .btn{ width:auto } }

.hero-selos{ list-style:none; margin:1.75rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem }
.hero-selos li{ display:flex; align-items:center; gap:.45rem; color:var(--on-dark-2); font-size:.92rem }
.hero-selos .ico{ color:var(--cyan) }

.hero-visual{ position:relative; max-width:380px; width:100%; justify-self:center }
@media (min-width:960px){ .hero-visual{ max-width:440px } }
.hero-foto{ margin:0; position:relative; border-radius:28px; padding:1px; background:linear-gradient(160deg, rgba(47,208,227,.7), rgba(255,255,255,.08) 40%, rgba(47,208,227,.25)) }
.hero-foto img{ width:100%; border-radius:27px; aspect-ratio:4/5; object-fit:cover; box-shadow:0 40px 80px -20px rgba(0,0,0,.6) }
/* véu escuro só na base, para a legenda ficar legível sem cobrir o rosto */
.hero-foto::after{
  content:""; position:absolute; inset:auto 1px 1px 1px; height:38%;
  border-radius:0 0 27px 27px; pointer-events:none;
  background:linear-gradient(to top, rgba(2,15,29,.92) 8%, rgba(2,15,29,.55) 45%, transparent 100%);
}
.hero-cred{
  position:absolute; left:20px; right:20px; bottom:18px; z-index:1;
  color:#fff; line-height:1.3;
}
.hero-cred strong{
  display:block; font-family:var(--font-head); font-weight:700;
  font-size:1.05rem; letter-spacing:-.01em;
}
.hero-cred span{ display:block; margin-top:.15rem; font-size:.84rem; color:var(--on-dark-2) }
@media (min-width:960px){
  .hero-cred{ left:24px; right:24px; bottom:22px }
  .hero-cred strong{ font-size:1.15rem }
  .hero-cred span{ font-size:.88rem }
}

.hero-quote{
  position:relative; margin:-72px 12px 0; padding:18px 20px;
  background:rgba(255,255,255,.96); color:var(--ink);
  border-radius:18px; box-shadow:0 24px 50px -12px rgba(0,0,0,.5);
  animation:boiar 7s ease-in-out infinite;
}
.hero-quote p{ font-size:.95rem; line-height:1.5; margin-bottom:.5rem; font-weight:500 }
.hero-quote cite{ font-style:normal; font-size:.8rem; color:var(--ink-2) }
@media (min-width:960px){ .hero-quote{ position:absolute; left:-72px; right:auto; bottom:36px; margin:0; max-width:300px } }
@keyframes boiar{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }


/* ---------- 2. Problema ---------- */
.erros-grid{ list-style:none; margin:0; padding:0; display:grid; gap:16px }
/* auto-fit + justify-content: fica centralizado com 2, 3 ou 4 cards */
@media (min-width:700px){
  .erros-grid{ grid-template-columns:repeat(auto-fit, minmax(0, 300px)); justify-content:center; gap:20px }
}
@media (min-width:1080px){ .erros-grid{ grid-template-columns:repeat(auto-fit, minmax(0, 270px)) } }
.erro{ padding:26px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s }
.erro:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#cfe3ea }
.erro-ico{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:1.1rem;
  border-radius:12px; color:var(--cyan-ink); background:var(--cyan-soft);
}
.erro-ico .ico{ width:22px; height:22px }
.erro h3{ font-size:1.12rem; margin-bottom:.55rem }
.erro p{ color:var(--ink-2); font-size:.97rem }
.fecho{ max-width:680px; margin:48px auto 0; text-align:center; font-family:var(--font-head); font-size:clamp(1.15rem, 2.6vw, 1.4rem); font-weight:700; letter-spacing:-.015em; line-height:1.45 }

/* ---------- 3. Guias ---------- */
.guias-grid{ display:grid; gap:20px }
@media (min-width:960px){ .guias-grid{ grid-template-columns:repeat(3,1fr); gap:24px } }
.guia{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.guia:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) }
/* luz que segue o cursor */
.spot::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(47,208,227,.12), transparent 45%);
}
.spot:hover::after{ opacity:1 }
/* capa quadrada, mostrada inteira (o título fica na parte de baixo da arte) */
.guia-capa{ overflow:hidden; aspect-ratio:1/1; background:var(--navy-900) }
.guia-capa img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.guia:hover .guia-capa img{ transform:scale(1.05) }
.guia-corpo{ padding:24px; display:flex; flex-direction:column; flex:1 }
.guia-tags{ display:flex; gap:.5rem; margin-bottom:.85rem }
.guia-tags span{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .65rem; border-radius:999px; background:var(--cyan-soft); color:var(--cyan-ink); font-size:.8rem; font-weight:600 }
.guia h3{ font-size:1.6rem; margin-bottom:.5rem }
.guia .lista-check{ font-size:.97rem }
.guia-extra{ margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); color:var(--ink-2); font-size:.88rem }

/* ---------- Bloco único dos três manuais ---------- */
.pacote{
  position:relative; overflow:hidden; display:grid; gap:0;
  background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow);
}
@media (min-width:900px){ .pacote{ grid-template-columns:380px 1fr } }
/* o cartão é branco mesmo dentro da seção escura: os checks voltam ao tema claro */
.escura .pacote .lista-check li::before{
  background-color:var(--cyan-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%2300788a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pacote-capas{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-content:center;
  padding:24px; background:linear-gradient(160deg, var(--cyan-soft), #eef3f8);
}
/* no computador: duas capas em cima e uma embaixo, para ficarem maiores */
@media (min-width:900px){
  .pacote-capas{ grid-template-columns:1fr 1fr; gap:16px; padding:32px; max-width:360px; margin:0 auto }
  .pacote-capas img{ border-radius:16px }
  .pacote-capas img:nth-child(3){ grid-column:1 / -1; width:calc(50% - 8px); justify-self:center }
}
.pacote-capas img{ width:100%; border-radius:12px; box-shadow:0 10px 24px -8px rgba(3,20,38,.5) }
.pacote-corpo{ padding:26px 24px 28px }
@media (min-width:900px){ .pacote-corpo{ padding:36px 40px } }
.pacote-corpo h3{ font-size:1.45rem; margin-bottom:1rem }
.pacote-lista{ font-size:1rem }
@media (min-width:700px){ .pacote-lista{ display:grid; grid-template-columns:1fr 1fr; column-gap:24px } }

.pacote-dif{ margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--line) }
.pacote-dif-titulo{
  margin:0 0 .9rem; font-family:var(--font-head); font-weight:700; font-size:.8rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cyan-ink);
}
.pacote-dif ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
/* cada processo numa linha fechada: a etiqueta tem largura fixa, então os textos alinham */
.pacote-dif li{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.8rem;
  margin:0; padding:.75rem .9rem; border-radius:12px;
  background:var(--gray-50); border:1px solid var(--line);
  font-size:.95rem; color:var(--ink-2); line-height:1.45; text-align:left;
}
.tag-proc{
  min-width:72px; padding:.2rem .6rem; border-radius:999px; text-align:center;
  background:var(--navy-900); color:var(--cyan);
  font-family:var(--font-head); font-weight:700; font-size:.78rem; letter-spacing:.02em;
}

/* página de um manual só: uma frase destacada, sem etiqueta repetindo o nome do processo */
.dif-callout{
  margin:1.4rem 0 0; padding:.9rem 1.1rem; border-radius:12px;
  background:var(--cyan-soft); border:1px solid #bfe3ea;
  color:var(--ink); font-size:.95rem; line-height:1.5; text-align:left;
}
.dif-callout strong{ color:var(--cyan-ink); font-weight:700 }
.pacote .guia-extra{ margin-top:1.5rem }
.guia .lista-check + .guia-extra{ margin-top:1.25rem }

.passos{ list-style:none; margin:56px 0 0; padding:0; display:grid; gap:16px; counter-reset:p }
@media (min-width:860px){ .passos{ grid-template-columns:repeat(3,1fr); gap:0 } }
.passos li{ display:flex; gap:14px; align-items:flex-start; position:relative }
@media (min-width:860px){
  .passos li{ padding-right:28px }
  .passos li:not(:last-child)::after{ content:""; position:absolute; top:22px; left:58px; right:12px; height:1px; background:linear-gradient(90deg, var(--line), transparent) }
}
.passo-num{
  flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--navy-900); color:var(--cyan); font-family:var(--font-head); font-weight:800;
  box-shadow:0 0 0 6px var(--cyan-soft);
}
.passos h3{ font-size:1.05rem; margin:.55rem 0 .2rem; position:relative; z-index:1; background:#fff; display:inline-block; padding-right:8px }
.passos p{ font-size:.94rem; color:var(--ink-2) }

/* ---------- 4. Material ---------- */
.material-grid{ display:grid; gap:48px; align-items:center }
@media (min-width:960px){ .material-grid{ grid-template-columns:1.15fr 1fr; gap:72px } }
.janela{ border-radius:18px; overflow:hidden; background:var(--navy-900); border:1px solid #d5e0ea; box-shadow:var(--shadow-lg); transform:perspective(1400px) rotateY(0deg); transition:transform .6s var(--ease) }
@media (min-width:960px){ .janela{ transform:perspective(1400px) rotateY(6deg) rotateX(2deg) } .janela:hover{ transform:perspective(1400px) rotateY(0) rotateX(0) } }
.janela-barra{ display:flex; gap:6px; padding:10px 14px; background:#0a2a47 }
.janela-barra span{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22) }
.material-texto h2{ margin-bottom:.9rem }
.material-texto > p{ color:var(--ink-2); font-size:1.08rem }

.topicos{ list-style:none; margin:1.75rem 0 0; padding:0; display:grid; gap:1.1rem }
.topicos li{ display:flex; gap:.9rem; align-items:flex-start; color:var(--ink-2); font-size:.98rem }
.topicos strong{ color:var(--ink) }
.topico-ico{ flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:#fff; border:1px solid var(--line); color:var(--cyan-ink); box-shadow:var(--shadow) }

.estrategias{
  display:grid; gap:24px; margin-top:64px; padding:28px;
  background:var(--navy-900); color:#fff; border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.estrategias::before{ content:""; position:absolute; width:400px; height:400px; right:-120px; top:-200px; border-radius:50%; background:radial-gradient(circle, rgba(47,208,227,.3), transparent 65%); pointer-events:none }
@media (min-width:960px){ .estrategias{ grid-template-columns:.8fr 1.2fr; gap:48px; padding:44px } }
.estrategias .eyebrow{ color:var(--cyan) }
.estrategias h3{ font-size:clamp(1.35rem, 3vw, 1.7rem); font-weight:800 }
.estrategias-lista{ list-style:none; margin:0; padding:0; display:grid; gap:10px; position:relative }
@media (min-width:640px){ .estrategias-lista{ grid-template-columns:1fr 1fr } }
.estrategias-lista li{ padding:14px 16px; border-radius:12px; background:var(--glass); border:1px solid var(--line-dark); color:var(--on-dark-2); font-size:.95rem; line-height:1.5 }

/* ---------- 5. Professor ---------- */
#professor{ background:linear-gradient(180deg, var(--navy-900), var(--navy-950)) }
.prof-grid{ display:grid; gap:48px; align-items:center }
@media (min-width:960px){ .prof-grid{ grid-template-columns:420px 1fr; gap:80px } }
.prof-foto{ margin:0; max-width:360px; justify-self:center; position:relative }
@media (min-width:960px){ .prof-foto{ max-width:420px } }
.prof-foto::before{ content:""; position:absolute; inset:24px -16px -16px 24px; border-radius:26px; border:1px solid rgba(47,208,227,.35) }
.prof-foto img{ position:relative; border-radius:26px; box-shadow:0 40px 80px -20px rgba(0,0,0,.6) }
.prof-texto h2{ margin-bottom:.6rem }
.prof-texto .lead{ margin-bottom:1.25rem }
.prof-texto p{ color:var(--on-dark-2) }
.prof-texto p strong{ color:#fff }
.prof-cred{ list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px }
.prof-cred li{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius:999px; background:var(--glass); border:1px solid var(--line-dark); font-size:.9rem; font-weight:500 }
.prof-cred .ico{ color:var(--cyan) }

/* ---------- 6. Depoimentos (marquee) ---------- */
.marquee{
  overflow:hidden; padding:8px 0 16px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-trilho{ list-style:none; margin:0; padding:0 8px; display:flex; gap:18px; width:max-content }
.marquee.ativo .marquee-trilho{ animation:rolar var(--dur, 60s) linear infinite }
.marquee.ativo:hover .marquee-trilho,
.marquee.ativo:focus-within .marquee-trilho{ animation-play-state:paused }
@keyframes rolar{ to{ transform:translateX(calc(-50% - 9px)) } }
.depo{
  display:block; width:230px; padding:0; border:0; background:none; cursor:zoom-in;
  border-radius:16px; overflow:hidden; position:relative;
  box-shadow:0 1px 2px rgba(11,31,51,.08), 0 12px 30px -8px rgba(11,31,51,.25);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
@media (min-width:640px){ .depo{ width:260px } }
.depo:hover{ transform:translateY(-6px) rotate(-.6deg); box-shadow:0 20px 40px -10px rgba(11,31,51,.35) }
.depo img{ width:100%; aspect-ratio:480/566; object-fit:cover; background:#111 }
/* sem JS ou com movimento reduzido: rolagem manual */
.marquee:not(.ativo){ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-mask-image:none; mask-image:none }
.marquee:not(.ativo) .marquee-trilho{ padding:0 16px }
.marquee:not(.ativo) li{ scroll-snap-align:center }

.aviso{ margin:32px auto 0; max-width:620px; text-align:center; font-size:.9rem; color:var(--ink-2) }

.lightbox{ padding:0; border:0; background:transparent; max-width:min(92vw, 520px); max-height:92vh; overflow:visible }
.lightbox::backdrop{ background:rgba(2,15,29,.82); backdrop-filter:blur(6px) }
.lightbox[open]{ animation:surgir .3s var(--ease) }
.lightbox img{ width:100%; max-height:88vh; object-fit:contain; border-radius:16px }
.lightbox-fechar{ position:absolute; top:-18px; right:-10px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:0; background:#fff; color:var(--ink); cursor:pointer; box-shadow:var(--shadow) }
@keyframes surgir{ from{ opacity:0; transform:scale(.96) } to{ opacity:1; transform:scale(1) } }

/* ---------- 7. Oferta ---------- */
.oferta{ background:radial-gradient(ellipse 90% 60% at 50% 0%, var(--navy-800), var(--navy-900) 70%) }
.oferta > .container{ position:relative; z-index:1 }

/* borda com gradiente girando */
.combo-borda{
  position:relative; max-width:980px; margin:0 auto; padding:2px; border-radius:26px;
  background:conic-gradient(from var(--ang), rgba(47,208,227,.15), var(--cyan) 12%, rgba(47,208,227,.15) 30%, rgba(47,208,227,.15) 55%, var(--cyan-2) 67%, rgba(47,208,227,.15) 85%);
  animation:girar 7s linear infinite;
  box-shadow:0 40px 100px -30px rgba(47,208,227,.45);
}
@keyframes girar{ to{ --ang:360deg } }
.oferta-combo{ display:grid; overflow:hidden; background:#fff; color:var(--ink); border-radius:24px }
@media (min-width:900px){ .oferta-combo{ grid-template-columns:1fr 1fr } }
.combo-img{ display:flex; align-items:center; justify-content:center; padding:28px 16px; background:linear-gradient(160deg, var(--cyan-soft), #eef3f8) }
.combo-capas{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100% }
.combo-capas img{
  width:100%; border-radius:14px;
  box-shadow:0 10px 24px -8px rgba(3,20,38,.55);
}
/* no computador: duas capas em cima e uma embaixo, preenchendo a coluna */
@media (min-width:900px){
  .combo-img{ padding:36px 28px }
  .combo-capas{ grid-template-columns:1fr 1fr; gap:16px; max-width:400px; margin:0 auto }
  .combo-capas img{ border-radius:18px }
  .combo-capas img:nth-child(3){ grid-column:1 / -1; width:calc(50% - 8px); justify-self:center }
}
.combo-info{ padding:28px 24px 30px }
@media (min-width:900px){ .combo-info{ padding:44px } }
.selo{ display:inline-block; margin-bottom:.9rem; padding:.3rem .75rem; border-radius:999px; background:var(--navy-900); color:var(--cyan); font-family:var(--font-head); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.combo-info h3{ font-size:clamp(1.45rem, 3vw, 1.8rem); font-weight:800; margin-bottom:1rem }
.combo-info .lista-check{ font-size:.98rem }
.preco{ margin:1.5rem 0; padding-top:1.4rem; border-top:1px dashed var(--line) }
.preco-parcela{ margin:0; font-family:var(--font-head); font-weight:800; font-size:clamp(2.3rem, 6vw, 2.9rem); letter-spacing:-.04em; line-height:1 }
.preco-parcela span{ font-size:1.05rem; font-weight:600; letter-spacing:0; color:var(--ink-2) }
.preco-vista{ margin:.45rem 0 0; font-weight:600; color:var(--cyan-ink) }
.preco-ref{ margin:.4rem 0 0; font-size:.9rem; color:var(--ink-2) }
.combo-seg{ display:flex; align-items:center; justify-content:center; gap:.45rem; margin:.9rem 0 0; font-size:.84rem; color:var(--ink-2); text-align:center }
/* no celular o preço fica centralizado, acompanhando o botão e a linha de pagamento */
@media (max-width:899px){
  .combo-info .preco{ text-align:center }
  .combo-info .preco-parcela{ justify-content:center }
}

/* a oferta é um cartão só: capa + o que você recebe + preço */
.combo-info .guia-tags{ margin:0 0 1.15rem }
.combo-info .pacote-dif{ margin-top:1.4rem; padding-top:1.3rem }
@media (min-width:900px){ .combo-capas.unica{ max-width:300px } }
@media (max-width:899px){
  .combo-info .guia-tags{ justify-content:center; flex-wrap:wrap }
  .combo-info .pacote-dif-titulo{ text-align:center }
}

.individuais-titulo{ text-align:center; margin:64px 0 22px; font-size:1.3rem }
.individuais{ display:grid; gap:14px; max-width:980px; margin:0 auto }
@media (min-width:900px){ .individuais{ grid-template-columns:repeat(3,1fr); gap:18px } }
.individual{
  display:grid; grid-template-columns:60px 1fr; gap:14px; align-items:center;
  padding:18px; border-radius:18px; background:var(--glass); border:1px solid var(--line-dark);
  transition:border-color .3s, background-color .3s, transform .35s var(--ease);
}
.individual:hover{ border-color:rgba(47,208,227,.4); background:rgba(255,255,255,.07); transform:translateY(-3px) }
.individual img{ width:60px; height:60px; border-radius:10px }
.individual h4{ margin-bottom:.15rem }
.ind-preco{ margin:0; color:var(--on-dark-2); font-size:.9rem; line-height:1.45 }
.ind-preco strong{ color:#fff; font-size:1rem }
.individual .btn{ grid-column:1 / -1; width:100% }

.garantia{
  display:flex; gap:18px; align-items:center; justify-content:center; text-align:left;
  max-width:980px; margin:40px auto 0; padding:24px;
  border-radius:18px; background:linear-gradient(120deg, rgba(47,208,227,.12), rgba(47,208,227,.03)); border:1px solid rgba(47,208,227,.3);
}
.garantia-ico{ flex:none; display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:var(--cyan); color:var(--navy-950) }
.garantia-ico .ico{ width:26px; height:26px }
.garantia h3{ margin-bottom:.3rem }
.garantia p{ color:var(--on-dark-2); font-size:.97rem }

.bonus{
  display:grid; gap:24px; align-items:center; max-width:980px; margin:20px auto 0; padding:24px;
  border-radius:18px; background:var(--glass); border:1px dashed rgba(47,208,227,.35);
}
@media (min-width:900px){ .bonus{ grid-template-columns:1fr 1fr; gap:40px; padding:32px } }
.bonus-img img{ border-radius:12px }
.bonus-texto h3{ font-size:1.35rem; margin-bottom:.6rem }
.bonus-texto p{ color:var(--on-dark-2); font-size:.97rem }

/* ---------- 8. FAQ ---------- */
.faq-grid{ display:grid; gap:36px }
@media (min-width:960px){ .faq-grid{ grid-template-columns:360px 1fr; gap:72px; align-items:start } .faq-lado{ position:sticky; top:104px } }
.faq-lado h2{ margin-bottom:.8rem }
.faq-lado > p{ color:var(--ink-2) }
.whats{
  display:flex; align-items:center; gap:14px; margin-top:1.5rem; padding:14px 18px;
  border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
  text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.whats:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.whats-ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#e6f9ee; color:#128c4a }
.whats-ico .ico{ width:24px; height:24px }
.whats strong{ display:block; font-size:.95rem }
.whats span:last-child{ color:var(--ink-2); font-size:.92rem }

.faq{ display:grid; gap:12px }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:16px; transition:border-color .3s, box-shadow .3s }
.faq details[open]{ border-color:#bfe3ea; box-shadow:var(--shadow) }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:60px; padding:16px 22px; font-family:var(--font-head); font-weight:700; font-size:1.02rem; letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; flex:none; width:28px; height:28px; border-radius:50%; background:var(--cyan-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' stroke='%2300788a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform .35s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(135deg) }
.faq-resp{ padding:0 22px 20px; color:var(--ink-2); font-size:.98rem }
.faq details[open] .faq-resp{ animation:abrir .4s var(--ease) }
@keyframes abrir{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.faq-resp a{ color:var(--cyan-ink); font-weight:600 }

/* ---------- 9. CTA final ---------- */
.cta-final{
  position:relative; overflow:hidden; text-align:center; color:#fff;
  padding:56px 24px; border-radius:28px;
  background:radial-gradient(ellipse 80% 80% at 50% 0%, var(--navy-700), var(--navy-900) 70%);
  box-shadow:var(--shadow-lg);
}
@media (min-width:960px){ .cta-final{ padding:88px 48px } }
.cta-final > *:not(.hero-fundo){ position:relative; z-index:1 }
.cta-final h2{ margin-bottom:1rem }
.cta-final > p{ max-width:34em; margin:0 auto 2rem; color:var(--on-dark-2); font-size:1.08rem }
.cta-final .nota{ margin:1rem auto 0 }

/* ---------- Rodapé ---------- */
.rodape{ background:var(--navy-950); color:var(--on-dark-2); font-size:.9rem; padding:32px 0 }
.rodape-inner{ display:flex; flex-direction:column; gap:.75rem; align-items:center; text-align:center }
.rodape p{ margin:0 }
.rodape nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.5rem }
.rodape a{ color:var(--on-dark-2); text-decoration:underline; text-underline-offset:3px }
.rodape a:hover{ color:#fff }
@media (min-width:768px){ .rodape-inner{ flex-direction:row; justify-content:space-between; text-align:left } }

/* ---------- CTA fixo (mobile) ---------- */
.cta-fixo{
  position:fixed; left:10px; right:10px; bottom:10px; z-index:55;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 10px 10px 18px; margin-bottom:env(safe-area-inset-bottom);
  background:rgba(2,15,29,.88); color:#fff; border-radius:999px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-dark); box-shadow:0 16px 40px -10px rgba(0,0,0,.55);
  transform:translateY(140%); transition:transform .45s var(--ease);
}
.cta-fixo.visivel{ transform:translateY(0) }
.cta-fixo div{ display:flex; flex-direction:column; line-height:1.25; min-width:0 }
.cta-fixo strong{ font-family:var(--font-head); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cta-fixo span{ font-size:.8rem; color:var(--on-dark-2) }
.cta-fixo .btn{ flex:none; min-height:46px; padding:.6rem 1.15rem; font-size:.95rem }
@media (min-width:960px){ .cta-fixo{ display:none } }
/* espaço para o CTA fixo não cobrir o rodapé (no próprio rodapé, para não sobrar faixa branca) */
@media (max-width:959px){ .rodape{ padding-bottom:calc(32px + 84px + env(safe-area-inset-bottom)) } }

/* ---------- Animação de entrada (scroll reveal) ---------- */
.js .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--d, 0) * 90ms);
}
.js .reveal.in{ opacity:1; transform:none }

/* Hero: entrada só com CSS, não depende do JS (conteúdo acima da dobra) */
.entra{ animation:entrar .9s var(--ease) both; animation-delay:calc(var(--d, 0) * 110ms + 80ms) }
@keyframes entrar{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important }
  .js .reveal{ opacity:1; transform:none }
  .janela{ transform:none !important }
}