/* ============================================================
   COLÉGIO SÓCRATES — SITE V3 · folha compartilhada (páginas internas)
   Usada pelas páginas internas (blog, posts e matrícula).
   Mesma identidade do index.html: azul #1a3a6b · laranja #f47920 · creme.
   O index.html é self-contained (CSS inline, não usa este arquivo).
   Se mudar a marca, refletir lá também.
   ============================================================ */

:root{
  --azul:#1a3a6b;
  --azul-ink:#122b52;
  --azul-noite:#0e2244;
  --azul-tinta:#243657;
  --laranja:#f47920;
  --laranja-hover:#e0660c;
  --laranja-txt:#c25a00;
  --creme:#faf6ee;
  --creme-2:#f4edde;
  --branco:#ffffff;
  --linha:rgba(26,58,107,.12);
  --sombra-s:0 2px 10px rgba(18,43,82,.08);
  --sombra-m:0 14px 40px -12px rgba(18,43,82,.22);
  --sombra-g:0 30px 70px -20px rgba(18,43,82,.35);
  --raio:20px;
  --wrap:1180px;
  --dur:.55s;
  --ease:cubic-bezier(.22,1,.36,1);
  --f-display:'Fraunces',Georgia,serif;
  --f-ui:'Inter',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--f-ui);
  background:var(--creme);
  color:var(--azul-tinta);
  line-height:1.65;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* grão sutil — textura tira o aspecto "flat de template" */
body::after{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{display:block;max-width:100%}
a{color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--laranja);color:#fff}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;border-radius:4px}

.wrap{width:min(var(--wrap),92vw);margin-inline:auto}

/* ---------- acessibilidade ---------- */
.skip{position:fixed;top:-60px;left:16px;z-index:1000;background:var(--azul);color:#fff;padding:12px 20px;border-radius:10px;font-weight:700;transition:top .25s}
.skip:focus{top:14px}

/* ---------- barra de progresso ---------- */
#progresso{position:fixed;top:0;left:0;height:3px;width:0;background:var(--laranja);z-index:220;transition:width .12s linear}

/* ---------- topbar campanha ---------- */
.topbar{background:var(--azul-noite);color:rgba(255,255,255,.92);font-size:.85rem;text-align:center;padding:9px 16px;font-weight:500}
.topbar b{color:#ffd9b8}
.topbar a{color:#fff;font-weight:700;text-decoration-color:var(--laranja);text-underline-offset:3px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:200;
  background:rgba(250,246,238,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .38s var(--ease),box-shadow .3s;
}
header.oculto{transform:translateY(-110%)}
header.sombra{box-shadow:var(--sombra-s)}
header.menu-on{z-index:340;transform:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca img{height:46px;width:auto}
.nav-links{display:flex;gap:30px;list-style:none;align-items:center}
.nav-links a{
  text-decoration:none;font-weight:600;font-size:.95rem;color:var(--azul);position:relative;padding:4px 0;
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--laranja);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav-links a:hover::after,.nav-links a.ativo::after{transform:scaleX(1);transform-origin:left}
.nav-links a.ativo{color:var(--laranja-txt)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;text-decoration:none;border-radius:999px;
  transition:transform .25s var(--ease),box-shadow .25s,background .25s;
  will-change:transform;
}
.btn:active{transform:scale(.97)}
.btn-laranja{background:var(--laranja);color:#fff;padding:15px 30px;font-size:1rem;box-shadow:0 10px 26px -8px rgba(244,121,32,.55)}
.btn-laranja:hover{background:var(--laranja-hover);transform:translateY(-2px);box-shadow:0 16px 34px -8px rgba(244,121,32,.6)}
.btn-ghost{border:2px solid var(--linha);color:var(--azul);padding:13px 28px;font-size:1rem;background:transparent}
.btn-ghost:hover{border-color:var(--azul);transform:translateY(-2px)}
.btn-branco{background:#fff;color:var(--azul);padding:15px 30px;font-size:1rem;box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
.btn-branco:hover{transform:translateY(-2px)}
.btn-nav{background:var(--laranja);color:#fff;padding:11px 22px;font-size:.9rem}
.btn-nav:hover{background:var(--laranja-hover)}

/* hamburguer */
.burger{display:none;flex-direction:column;gap:5px;padding:10px;z-index:310}
.burger span{width:26px;height:2.5px;background:var(--azul);border-radius:2px;transition:.3s var(--ease)}
.burger.aberto span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.aberto span:nth-child(2){opacity:0}
.burger.aberto span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.menu-mobile{
  position:fixed;inset:0;z-index:300;background:var(--creme);
  display:flex;flex-direction:column;justify-content:center;padding:8vh 8vw;
  transform:translateX(102%);transition:transform .5s var(--ease);
}
.menu-mobile.aberto{transform:translateX(0)}
.menu-mobile a{text-decoration:none}
.menu-mobile .mm-link{
  font-family:var(--f-display);font-size:clamp(1.8rem,7vw,2.6rem);font-weight:600;color:var(--azul);
  padding:10px 0;border-bottom:1px solid var(--linha);display:block;
}
.menu-mobile .mm-link em{color:var(--laranja);font-style:normal}
.menu-mobile .btn{margin-top:28px;align-self:flex-start}
.mm-contato{margin-top:26px;font-size:.95rem;color:var(--azul-tinta);opacity:.8}

/* ---------- tipografia de seção ---------- */
.rotulo{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--laranja-txt);
  margin-bottom:18px;
}
.rotulo::before{content:"";width:34px;height:2.5px;background:var(--laranja);border-radius:2px}
h1,h2,h3{font-family:var(--f-display);color:var(--azul);line-height:1.12;font-weight:600}
h1 em,h2 em,h3 em{font-style:italic;color:var(--laranja);font-weight:600}
.t-secao{font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:18px;letter-spacing:-.01em;text-wrap:balance}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);max-width:640px;opacity:.88}
.secao{padding:clamp(72px,10vw,130px) 0}

/* squiggle — o "risco de lápis" da marca (logo = lápis) */
.hl{position:relative;display:inline-block;white-space:nowrap}
.hl svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.34em;overflow:visible}
.hl svg path{stroke:var(--laranja);stroke-width:6;fill:none;stroke-linecap:round}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ============================================================ HERO DE PÁGINA INTERNA */
.page-hero{position:relative;overflow:hidden;padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,70px)}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 90% at 88% -10%,rgba(244,121,32,.12),transparent 60%),
    radial-gradient(70% 100% at 0% 0%,rgba(26,58,107,.08),transparent 55%);
}
.crumb{display:flex;align-items:center;gap:9px;font-size:.86rem;font-weight:600;color:var(--azul);opacity:.72;margin-bottom:22px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--laranja-txt);opacity:1}
.crumb span{opacity:.5}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,3.9rem);letter-spacing:-.015em;margin-bottom:20px;text-wrap:balance;max-width:14em}
.page-hero .lead{font-size:clamp(1.08rem,1.7vw,1.28rem);max-width:680px}
.page-hero .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ============================================================ BLOG */
.blog-filtros{display:flex;flex-wrap:wrap;gap:10px;margin:44px 0 8px}
.chip-cat{
  font-size:.85rem;font-weight:700;padding:9px 18px;border-radius:999px;
  background:#fff;border:1.5px solid var(--linha);color:var(--azul);
  transition:background .25s,color .25s,border-color .25s,transform .2s;
}
.chip-cat:hover{transform:translateY(-2px);border-color:var(--azul)}
.chip-cat.on{background:var(--azul);border-color:var(--azul);color:#fff}

.blog-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin-top:34px}
.post{
  border-radius:calc(var(--raio) + 4px);padding:34px 32px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:14px;text-decoration:none;box-shadow:var(--sombra-s);
  transition:transform .35s var(--ease),box-shadow .35s,opacity .35s;min-height:250px;
}
.post:hover{transform:translateY(-6px);box-shadow:var(--sombra-m)}
.post.oculto{display:none}
.post-destaque{grid-column:span 7;background:linear-gradient(150deg,var(--azul) 0%,var(--azul-noite) 100%);color:#fff;min-height:360px;justify-content:flex-end}
.post-cor-creme{grid-column:span 5;background:var(--creme-2)}
.post-cor-branco{grid-column:span 5;background:#fff;border:1.5px solid var(--linha)}
.post-cor-laranja{grid-column:span 7;background:rgba(244,121,32,.1)}
.post-meia{grid-column:span 6}
.post-cat{
  align-self:flex-start;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;background:rgba(244,121,32,.16);color:var(--laranja-txt);
}
.post-destaque .post-cat{background:rgba(255,255,255,.16);color:#ffd9b8}
.post h3{font-size:1.35rem;line-height:1.3}
.post-destaque h3{font-size:clamp(1.5rem,2.6vw,2.05rem);color:#fff}
.post p{font-size:.95rem;opacity:.85}
.post-ler{font-weight:700;font-size:.9rem;color:var(--laranja-txt);display:inline-flex;align-items:center;gap:7px;margin-top:auto}
.post-destaque .post-ler{color:#ffb27a}
.post .deco{position:absolute;top:-26px;right:-20px;font-size:7rem;line-height:1;opacity:.14;transform:rotate(12deg);user-select:none;pointer-events:none}

/* posts com FOTO real (blog): a imagem cobre o cartão + scrim escuro p/ legibilidade */
.post-foto{color:#fff;justify-content:flex-end;min-height:340px}
.post-foto.post-destaque{min-height:430px}
.post-foto .post-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s var(--ease)}
.post-foto::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(9,18,38,.95) 0%,rgba(9,18,38,.72) 40%,rgba(9,18,38,.28) 68%,rgba(9,18,38,.04) 100%)}
.post-foto:hover .post-img{transform:scale(1.06)}
.post-foto>*:not(.post-img){position:relative;z-index:2}
.post-foto .post-cat{background:rgba(255,255,255,.22);color:#fff}
.post-foto h3{color:#fff}
.post-foto p{color:rgba(255,255,255,.92);opacity:1}
.post-foto h3,.post-foto p{text-shadow:0 1px 14px rgba(6,12,28,.55)}
.post-foto .post-ler{color:#ffd9b8}

/* faixa "acompanhe" ao fim do blog */
.blog-cta{background:#fff}
.acompanhe{
  background:linear-gradient(150deg,var(--creme-2),#fff);border:1.5px solid var(--linha);
  border-radius:calc(var(--raio) + 6px);padding:clamp(34px,5vw,60px);text-align:center;box-shadow:var(--sombra-s);
}
.acompanhe h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:14px}
.acompanhe p{max-width:560px;margin:0 auto 28px;opacity:.9}
.acompanhe .acoes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ============================================================ MATRÍCULA */
.mat-selo{
  display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--linha);
  border-radius:999px;padding:8px 18px;font-size:.86rem;font-weight:600;color:var(--azul);
  box-shadow:var(--sombra-s);margin-bottom:26px;
}
.mat-selo .ponto{width:8px;height:8px;border-radius:50%;background:var(--laranja);box-shadow:0 0 0 4px rgba(244,121,32,.18)}

/* faixa de valor (razões p/ escolher) */
.valor{background:#fff}
.valor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.valor-card{
  background:var(--creme);border:1px solid var(--linha);border-radius:var(--raio);padding:30px 26px;
  display:flex;flex-direction:column;gap:10px;
}
.valor-card .ic{width:52px;height:52px;border-radius:14px;background:rgba(244,121,32,.14);display:flex;align-items:center;justify-content:center;color:var(--laranja-txt);margin-bottom:6px}
.valor-card h3{font-size:1.15rem}
.valor-card p{font-size:.94rem;opacity:.85}

/* passo a passo */
.passos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px;counter-reset:passo}
.passo{
  position:relative;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:36px 28px 30px;box-shadow:var(--sombra-s);display:flex;flex-direction:column;gap:12px;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.passo:hover{transform:translateY(-5px);box-shadow:var(--sombra-m)}
.passo::before{
  counter-increment:passo;content:counter(passo,decimal-leading-zero);
  font-family:var(--f-display);font-size:2.4rem;font-weight:700;color:var(--laranja);line-height:1;opacity:.9;
}
.passo h3{font-size:1.2rem}
.passo p{font-size:.95rem;opacity:.86}
.passo .p-link{font-weight:700;font-size:.9rem;color:var(--laranja-txt);text-decoration:none;display:inline-flex;gap:6px;align-items:center;margin-top:auto}

/* documentos + turnos: duas colunas */
.mat-duo{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.docs-lista{list-style:none;display:grid;gap:14px;margin-top:30px}
.docs-lista li{display:flex;gap:14px;align-items:flex-start;font-size:1rem}
.docs-lista .tick{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(244,121,32,.15);color:var(--laranja-txt);display:flex;align-items:center;justify-content:center;margin-top:2px}
.docs-nota{margin-top:24px;font-size:.9rem;opacity:.75;border-left:3px solid var(--laranja);padding-left:14px}

.turnos{background:var(--azul-noite);color:rgba(255,255,255,.86);border-radius:calc(var(--raio) + 6px);padding:clamp(30px,4vw,44px)}
.turnos h3{color:#fff;font-size:1.4rem;margin-bottom:8px}
.turnos .t-sub{font-size:.95rem;opacity:.72;margin-bottom:26px}
.seg-lista{list-style:none;display:grid;gap:16px}
.seg-lista li{border-top:1px solid rgba(255,255,255,.14);padding-top:16px}
.seg-lista .s-nome{font-family:var(--f-display);color:#fff;font-size:1.12rem;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.seg-lista .s-nome b{color:#ffd9b8;font-family:var(--f-ui);font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.seg-lista .s-desc{font-size:.9rem;opacity:.72;margin-top:3px}

/* ============================================================ FAQ (compartilhado) */
.faq-lista{display:grid;gap:14px;margin-top:44px;max-width:820px}
.faq-item{background:#fff;border:1px solid var(--linha);border-radius:16px;overflow:hidden}
.faq-q{
  width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:22px 26px;font-size:1.06rem;font-weight:700;color:var(--azul);font-family:var(--f-display);
}
.faq-q .mais{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(244,121,32,.14);color:var(--laranja-txt);font-size:1.3rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease),background .3s}
.faq-item.aberto{border-color:rgba(244,121,32,.4)}
.faq-item.aberto .faq-q .mais{transform:rotate(45deg);background:var(--laranja);color:#fff}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq-item.aberto .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 26px 24px;opacity:.9}
.faq-a a{color:var(--laranja-txt);font-weight:600}

/* ============================================================ CTA FINAL (compartilhado) */
.cta-final{background:linear-gradient(160deg,var(--azul) 0%,var(--azul-noite) 100%);color:#fff;text-align:center}
.cta-final .cta-kicker{
  display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#ffd9b8;margin-bottom:20px;
}
.cta-final h2{color:#fff;font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:20px;text-wrap:balance}
.cta-final h2 em{color:#ff9d52}
.cta-final p{max-width:620px;margin:0 auto 34px;opacity:.9}
.cta-final .acoes{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
.cta-final .tel-link{color:#fff;text-decoration:none;font-weight:700;display:inline-flex;align-items:center;gap:9px;opacity:.9}
.cta-final .tel-link:hover{opacity:1;color:#ffd9b8}

/* ============================================================ FOOTER */
footer{background:var(--azul-noite);color:rgba(255,255,255,.75);padding:70px 0 34px;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:44px;margin-bottom:52px}
.foot-logo{background:var(--creme);border-radius:16px;padding:14px 18px;display:inline-block;margin-bottom:18px}
.foot-logo img{height:44px;width:auto}
.foot-slogan{font-family:var(--f-display);font-style:italic;font-size:1.05rem;color:rgba(255,255,255,.85);margin-bottom:20px}
.foot-social{display:flex;gap:12px}
.foot-social a{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background .25s,transform .25s;
}
.foot-social a:hover{background:var(--laranja);transform:translateY(-3px)}
footer h4{color:#fff;font-family:var(--f-ui);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
footer ul{list-style:none;display:grid;gap:11px}
footer ul a{text-decoration:none;opacity:.85;transition:opacity .2s,color .2s}
footer ul a:hover{opacity:1;color:#ffb27a}
.foot-linha{border-top:1px solid rgba(255,255,255,.12);padding-top:26px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;opacity:.7}

/* ---------- WhatsApp flutuante ---------- */
.wpp{
  position:fixed;right:22px;bottom:22px;z-index:210;width:62px;height:62px;border-radius:50%;
  background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -6px rgba(37,211,102,.55);
  transition:transform .3s var(--ease);
}
.wpp:hover{transform:scale(1.1)}
.wpp::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;opacity:.45;animation:pulso 2.4s ease-out infinite;z-index:-1}
@keyframes pulso{0%{transform:scale(1);opacity:.45}80%,100%{transform:scale(1.65);opacity:0}}
.wpp-tip{
  position:fixed;right:96px;bottom:34px;z-index:210;background:#fff;color:var(--azul);font-size:.86rem;font-weight:600;
  padding:10px 16px;border-radius:14px 14px 4px 14px;box-shadow:var(--sombra-m);
  opacity:0;transform:translateX(10px);transition:all .45s var(--ease);pointer-events:none;
}
.wpp-tip.mostra{opacity:1;transform:none}

/* ============================================================ RESPONSIVO */
@media (max-width:1020px){
  .valor-grid{grid-template-columns:repeat(2,1fr)}
  .passos-grid{grid-template-columns:repeat(2,1fr)}
  .mat-duo{grid-template-columns:1fr;gap:40px}
  .post-destaque,.post-cor-creme,.post-cor-branco,.post-cor-laranja,.post-meia{grid-column:span 12;min-height:0}
  .post-foto{min-height:300px}
  .post-foto.post-destaque{min-height:320px}
}
@media (max-width:860px){
  .nav-links,.btn-nav{display:none}
  .burger{display:flex}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:1rem}
  .valor-grid,.passos-grid{grid-template-columns:1fr}
  .page-hero .hero-ctas .btn{width:100%}
  .foot-grid{grid-template-columns:1fr}
  .foot-linha{flex-direction:column}
  .wpp{width:56px;height:56px;right:16px;bottom:16px}
  .wpp-tip{right:84px}
  .cta-final .acoes{flex-direction:column}
  .cta-final .acoes .btn{width:100%}
}