/* Paginas institucionais (prefeituras e escolas) - 05/11/2026.
   Mesma paleta e mesma fonte da pagina de vendas. Celular primeiro. */
:root{
  --laranja:#F97316; --laranja-esc:#EA580C; --laranja-suave:#FFF3EA;
  --azul:#1E3A5F; --azul-esc:#152C48; --azul-suave:#EEF3F9;
  --creme:#FBF8F3; --cinza:#64748B; --linha:#E7ECF3;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--azul);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.box{max-width:1120px;margin:0 auto;padding:0 20px}

/* navbar */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--linha);padding-top:env(safe-area-inset-top)}
.nav .box{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.nav img{height:40px;border-radius:10px}
.nav-dir{display:flex;align-items:center;gap:22px;font-weight:600;font-size:14.5px}
.nav-dir .lk{color:var(--cinza)}
.btn{display:inline-block;background:var(--laranja);color:#fff;font-weight:700;border-radius:9px;padding:11px 20px;font-size:14.5px;transition:background .15s}
.btn:hover{background:var(--laranja-esc)}
.btn.grande{font-size:17px;padding:16px 30px}
@media(max-width:640px){.nav-dir .lk{display:none}.nav img{height:36px}.btn{padding:10px 14px;font-size:13.5px}}

/* hero */
.hero{background:var(--azul);color:#fff;padding:56px 0 64px}
.hero .box{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
.eyebrow{display:inline-block;color:var(--laranja);font-weight:800;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:16px}
.hero h1{font-size:clamp(30px,5vw,46px);line-height:1.16;font-weight:800;letter-spacing:-.3px;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--laranja)}
.hero p.sub{color:#C7D6EA;font-size:17px;max-width:540px;margin-bottom:28px}
.hero .apoio{color:#9DB2CE;font-size:13.5px;font-weight:600;margin-top:12px}
.moldura{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 24px 48px rgba(8,20,40,.3)}
.moldura .barra{display:flex;gap:6px;padding:10px 12px;background:#F1F5F9}
.moldura .barra i{width:10px;height:10px;border-radius:50%;background:#CBD5E1}
@media(min-width:900px){.hero{padding:76px 0 88px}.hero .box{grid-template-columns:1fr 1.05fr;gap:56px}}

/* secoes */
.sec{padding:64px 0}
.sec.creme{background:var(--creme)}
.sec.azul-suave{background:var(--azul-suave)}
.tit{font-size:clamp(26px,3.8vw,36px);font-weight:800;line-height:1.2;letter-spacing:-.2px;margin-bottom:14px}
.tit em{font-style:normal;color:var(--laranja)}
.lead{color:var(--cinza);font-size:17px;max-width:680px;margin-bottom:34px}
.sobre{display:inline-block;color:var(--laranja);font-weight:800;font-size:12.5px;letter-spacing:1.1px;text-transform:uppercase;margin-bottom:10px}

/* problema: disciplinas acesas x apagadas */
.disc{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.disc span{border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;border:1.5px solid var(--linha);color:#A3B1C2;background:#fff}
.disc span.on{background:var(--azul);border-color:var(--azul);color:#fff}
.disc.todas span{background:var(--laranja-suave);border-color:#FBC9A0;color:#C2410C}
.duas{display:grid;grid-template-columns:1fr;gap:18px}
.cartao{background:#fff;border:1px solid var(--linha);border-radius:16px;padding:22px}
.cartao h3{font-size:18px;font-weight:800;margin-bottom:6px}
.cartao p{color:var(--cinza);font-size:15px}
@media(min-width:820px){.duas{grid-template-columns:1fr 1fr}}

/* tres olhares */
.olhares{display:grid;grid-template-columns:1fr;gap:22px}
.olhar{background:#fff;border:1px solid var(--linha);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.olhar .img{background:#F1F5F9;border-bottom:1px solid var(--linha);aspect-ratio:4/3;overflow:hidden}
.olhar .img img{width:100%;height:100%;object-fit:cover;object-position:top left}
.olhar .tx{padding:20px}
.olhar .n{display:inline-block;background:var(--laranja);color:#fff;font-weight:800;font-size:12px;border-radius:999px;padding:3px 10px;margin-bottom:10px}
.olhar h3{font-size:19px;font-weight:800;margin-bottom:6px}
.olhar p{color:var(--cinza);font-size:15px}
@media(min-width:900px){.olhares{grid-template-columns:repeat(3,1fr)}}

/* tres olhares em abas (06/11/2026): uma imagem grande por vez, cada perfil com a sua cor */
.abas3{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.aba3{border:2px solid var(--linha);background:#fff;font:inherit;font-weight:800;font-size:14.5px;color:var(--cinza);padding:10px 18px;border-radius:999px;cursor:pointer}
.aba3[data-c=prof].ativa{background:#F97316;border-color:#F97316;color:#fff}
.aba3[data-c=gestao].ativa{background:#2563EB;border-color:#2563EB;color:#fff}
.aba3[data-c=sec].ativa{background:#0F9D7A;border-color:#0F9D7A;color:#fff}
.painel3{display:none;grid-template-columns:1fr;gap:20px;align-items:start}
.painel3.ativo{display:grid}
.painel3 .tx3{border-left:5px solid var(--cor);padding:4px 0 4px 16px}
.painel3 h3{font-size:22px;font-weight:800;margin-bottom:6px;color:var(--cor)}
.painel3 p{color:var(--cinza);font-size:16px}
.painel3 .real{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--cor);background:var(--cor-suave);padding:4px 10px;border-radius:999px}
.painel3 .moldura{display:block;border:2px solid var(--cor)}
.c-prof{--cor:#EA580C;--cor-suave:#FFF3EA}
.c-gestao{--cor:#2563EB;--cor-suave:#EAF1FF}
.c-sec{--cor:#0F9D7A;--cor-suave:#E6F7F2}
.dica3{font-size:13px;color:var(--cinza);margin-top:10px;text-align:center}
@media(min-width:900px){.painel3 .tx3{max-width:760px}.painel3 .moldura{max-width:1080px}}
.legenda-prot{font-size:12.5px;color:#9DB2CE;margin-top:10px;text-align:center}
.sec .legenda-prot{color:var(--cinza)}
@media(max-width:640px){.aba3{font-size:13px;padding:9px 13px}.painel3 .moldura{max-width:330px;margin:0 auto;width:100%}}

/* destaque com imagem */
.destaque{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
.destaque ul{list-style:none;display:grid;gap:12px;margin:6px 0 0}
.destaque li{padding-left:30px;position:relative;font-size:16px}
.destaque li:before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--laranja-suave);border:2px solid var(--laranja)}
.destaque li b{color:var(--azul)}
@media(min-width:900px){.destaque{grid-template-columns:1fr 1.1fr;gap:52px}.destaque.inv .dtx{order:2}}

/* modulos */
.mods{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mods div{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:12px 14px;font-weight:700;font-size:14.5px}
.mods div small{display:block;color:var(--cinza);font-weight:500;font-size:12.5px;margin-top:2px}
.mods div.novo{border-color:#FBC9A0;background:var(--laranja-suave)}
@media(min-width:820px){.mods{grid-template-columns:repeat(4,1fr)}}

/* soma */
.soma{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:8px 0 24px}
.soma .pill{background:#fff;border:1.5px solid var(--linha);border-radius:14px;padding:14px 20px;font-weight:800;font-size:16px}
.soma .pill.ap{border-color:var(--laranja);color:var(--laranja-esc)}
.soma .mais{font-size:28px;font-weight:800;color:var(--laranja)}

/* passos */
.passos{display:grid;grid-template-columns:1fr;gap:14px;counter-reset:p}
.passo{background:#fff;border:1px solid var(--linha);border-radius:16px;padding:20px 20px 20px 66px;position:relative}
.passo:before{counter-increment:p;content:counter(p);position:absolute;left:18px;top:18px;width:34px;height:34px;border-radius:50%;background:var(--azul);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.passo h3{font-size:17px;font-weight:800;margin-bottom:4px}
.passo p{color:var(--cinza);font-size:15px}
@media(min-width:820px){.passos{grid-template-columns:repeat(2,1fr)}}

/* aviso lgpd */
.aviso{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--linha);border-left:4px solid var(--azul);border-radius:12px;padding:16px 18px;font-size:15px;margin-top:22px}

/* faq */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--linha);padding:16px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--laranja);font-weight:800;font-size:22px;line-height:1}
.faq details[open] summary:after{content:"\2212"}
.faq p{color:var(--cinza);margin-top:10px;font-size:15.5px}

/* cta final */
.final{background:var(--azul);color:#fff;text-align:center;padding:64px 0}
.final h2{font-size:clamp(26px,4vw,36px);font-weight:800;line-height:1.2;margin-bottom:12px}
.final p{color:#C7D6EA;margin-bottom:26px;font-size:16.5px}
.final .apoio{color:#9DB2CE;font-size:14px;font-weight:600;margin-top:14px;margin-bottom:0}

.rodape{text-align:center;color:var(--cinza);font-size:13px;padding:28px 20px 40px;line-height:1.8}
.rodape img{height:36px;margin:0 auto 10px;border-radius:9px}
.rodape a{text-decoration:underline}
@media(max-width:640px){.sec{padding:52px 0}.btn.grande{display:block;text-align:center}}

/* ===== REFINO 3D (06/11/2026) =====
   Profundidade com sombras em camadas, brilho de borda e perspectiva leve na capa.
   Movimento minimo: so hover discreto (desktop) e entrada unica ao rolar. */
:root{
  --rim:inset 0 1px 0 rgba(255,255,255,.9);
  --sh-1:0 1px 2px rgba(15,32,64,.05),0 4px 10px rgba(15,32,64,.05),0 14px 30px rgba(15,32,64,.06);
  --sh-2:0 2px 4px rgba(15,32,64,.06),0 10px 22px rgba(15,32,64,.09),0 26px 48px rgba(15,32,64,.11);
}
.nav{box-shadow:0 6px 18px rgba(15,32,64,.04)}

/* capa: luz suave atras da imagem */
.hero{position:relative;overflow:hidden;background-image:radial-gradient(60% 85% at 82% 48%,rgba(110,155,215,.22),transparent 64%),radial-gradient(30% 40% at 92% 18%,rgba(249,115,22,.10),transparent 70%),radial-gradient(55% 70% at 8% 0%,rgba(255,255,255,.08),transparent 60%)}
.hero .box{position:relative}

/* molduras de print */
.moldura{position:relative;box-shadow:0 0 0 1px rgba(15,32,64,.06),var(--sh-2)}
.moldura::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 34%)}
.moldura .barra{background:linear-gradient(180deg,#F8FAFC,#EDF1F6);border-bottom:1px solid var(--linha)}
.hero .moldura{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 2px 4px rgba(8,20,40,.2),0 22px 44px rgba(8,20,40,.34),0 48px 90px rgba(8,20,40,.26);transform:perspective(1400px) rotateY(-6deg) rotateX(3deg);transform-origin:center;transition:transform .5s ease}
@media(max-width:640px){.hero .moldura{transform:perspective(1200px) rotateY(-2.5deg) rotateX(1deg)}}
@media(hover:hover){.hero .moldura:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}}

/* botoes: relevo sutil */
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px rgba(249,115,22,.26);transition:background .15s,transform .2s ease,box-shadow .2s ease}
@media(hover:hover){.btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 20px rgba(249,115,22,.32)}}

/* cartoes */
.cartao,.olhar,.passo,.aviso{background-image:linear-gradient(180deg,#fff,#FBFCFE);box-shadow:var(--rim),var(--sh-1)}
.mods div{box-shadow:var(--rim),0 1px 2px rgba(15,32,64,.04),0 6px 14px rgba(15,32,64,.05)}
.soma .pill{box-shadow:var(--rim),var(--sh-1)}
.passo:before{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 10px rgba(30,58,95,.28)}
.olhar .n{box-shadow:0 3px 8px rgba(249,115,22,.3)}
.aba3{box-shadow:0 1px 2px rgba(15,32,64,.05);transition:background .2s,color .2s,box-shadow .2s}
.aba3.ativa{box-shadow:0 6px 14px rgba(15,32,64,.18)}
.final{background-image:radial-gradient(70% 130% at 50% 0%,rgba(255,255,255,.07),transparent 70%)}

/* hover discreto (so desktop) */
.cartao,.olhar,.passo,.mods div{transition:transform .25s ease,box-shadow .25s ease}
@media(hover:hover){
  .cartao:hover,.olhar:hover,.passo:hover{transform:translateY(-3px);box-shadow:var(--rim),var(--sh-2)}
  .mods div:hover{transform:translateY(-2px);box-shadow:var(--rim),0 10px 20px rgba(15,32,64,.09)}
}

/* entrada suave, uma vez por elemento (a classe js-rv so existe se houver JS e sem reduce motion) */
.js-rv :is(.cartao,.olhar,.passo,.mods div,.aviso,.soma,.destaque .moldura,.faq details){transition:opacity .5s ease,transform .5s ease,box-shadow .25s ease}
.js-rv :is(.cartao,.olhar,.passo,.mods div,.aviso,.soma,.destaque .moldura,.faq details):not(.rv-in){opacity:0;transform:translateY(14px)}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
  .hero .moldura{transform:none}
}

/* ===== COR PROPRIA DE CADA PAGINA (06/11/2026) =====
   Professora (index) = azul. Prefeituras = laranja com detalhes azuis.
   Escolas particulares = verde-petroleo com detalhes laranja. */
.pg-pref .hero,.pg-pref .final{background-color:#EA580C;background-image:radial-gradient(60% 85% at 82% 48%,rgba(255,200,150,.35),transparent 64%),linear-gradient(135deg,#F97316,#EA580C 55%,#C2410C)}
.pg-pref .hero .eyebrow{color:#1E3A5F}
.pg-pref .hero h1 em{color:#1E3A5F}
.pg-pref .hero p.sub,.pg-pref .final p{color:#FFF1E6}
.pg-pref .hero .apoio,.pg-pref .final .apoio{color:#FFE2CC}
.pg-pref .hero .btn,.pg-pref .final .btn{background:#1E3A5F;box-shadow:0 10px 24px rgba(15,32,64,.35)}
.pg-pref .hero .btn:hover,.pg-pref .final .btn:hover{background:#152C48}
.pg-pref .tit em,.pg-pref .sobre{color:#2563EB}
.pg-pref .destaque li:before{background:#EAF1FF;border-color:#2563EB}
.pg-pref .disc.todas span{background:#EAF1FF;border-color:#BFD3FB;color:#1D4ED8}
.pg-pref .mods div.novo{border-color:#BFD3FB;background:#EAF1FF}
.pg-pref .soma .pill.ap{border-color:#2563EB;color:#1D4ED8}
.pg-pref .soma .mais,.pg-pref .faq summary:after{color:#2563EB}

.pg-esc .hero,.pg-esc .final{background-color:#0F4C5C;background-image:radial-gradient(60% 85% at 82% 48%,rgba(94,234,212,.16),transparent 64%),linear-gradient(135deg,#115E67,#0F4C5C 55%,#0B3A47)}
.pg-esc .hero p.sub,.pg-esc .final p{color:#CFE8EA}
.pg-esc .hero .apoio,.pg-esc .final .apoio,.pg-esc .hero .legenda-prot{color:#A7CDD1}
.pg-esc .sec.azul-suave{background:#EAF5F5}
.pg-esc .passo:before{background:#0F4C5C}
.pg-esc .aviso{border-left-color:#0F4C5C}
