/* ══════════════════════════════════════════════════════════════════
   COLÉGIO OLIVEIRA SILVA · sistema visual
   Paleta amostrada diretamente do logo:
     #244854 ardósia (monograma S / "SILVA")
     #B4241C carmim  (anel do selo)
     #C0441C vermelhão ("OLIVEIRA")
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Cor */
  --ink:      #14242B;   /* ardósia quase preta — fundo escuro e texto */
  --slate:    #244854;   /* ardósia do logo */
  --slate-2:  #4A6B76;   /* texto secundário */
  --red:      #B4241C;   /* carmim do anel */
  --red-d:    #8C1A14;
  --ember:    #C0441C;   /* vermelhão do "OLIVEIRA" */
  --paper:    #F5F0E6;   /* creme quente */
  --bone:     #FCFAF5;
  --sand:     #E2D7C4;
  --line:     rgba(20,36,43,.14);
  --line-2:   rgba(20,36,43,.07);
  --line-l:   rgba(245,240,230,.16);

  /* Tipografia */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala — o salto grande é o que dá o tom editorial */
  --t-mega:  clamp(3.2rem, 1.2rem + 8.4vw, 9rem);
  --t-xl:    clamp(2.6rem, 1.4rem + 5vw, 6rem);
  --t-l:     clamp(2rem, 1.3rem + 3vw, 3.9rem);
  --t-m:     clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  --t-lead:  clamp(1.075rem, 1rem + .5vw, 1.4rem);
  --t-body:  1.0625rem;
  --t-lbl:   .72rem;

  /* Ritmo */
  --gut:  clamp(1.25rem, .5rem + 3vw, 4rem);
  --sec:  clamp(5rem, 3rem + 8vw, 11rem);
  --maxw: 1380px;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ── Base ───────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--slate);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.62;
  font-weight:400; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:400; color:var(--ink); line-height:.96; letter-spacing:-.022em; }
h1 em,h2 em,h3 em{ font-style:italic; }
p{ margin:0 0 1em; }
::selection{ background:var(--ember); color:var(--bone); }

.wrap{ width:min(var(--maxw), 100% - var(--gut)*2); margin-inline:auto; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--bone); padding:.9rem 1.4rem; font-weight:600; }
.skip:focus{ left:0; }
:where(a,button,input,textarea,[tabindex]):focus-visible{ outline:2px solid var(--ember); outline-offset:4px; }

/* ── Rótulos ────────────────────────────────────────────────────── */
.eyebrow{
  font-size:var(--t-lbl); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); margin:0 0 1.4rem;
  display:flex; align-items:center; gap:.85rem;
}
.eyebrow::before{ content:""; width:24px; height:1px; background:currentColor; flex:0 0 24px; }
.eyebrow--light{ color:var(--sand); }

/* ── Botões ─────────────────────────────────────────────────────── */
.btn{
  --b:var(--red); --c:var(--bone);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:0 1.7rem;
  background:var(--b); color:var(--c);
  font-size:.94rem; font-weight:600; letter-spacing:-.01em;
  border:1px solid var(--b); border-radius:0;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink); transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover::after{ transform:translateY(0); }
.btn:hover{ color:var(--bone); border-color:var(--ink); }
.btn--sm{ min-height:44px; padding:0 1.2rem; font-size:.85rem; }
.btn--ghost{ --b:transparent; --c:var(--bone); border-color:rgba(252,250,245,.45); }
.btn--ghost:hover{ border-color:var(--bone); }
.btn--light{ --b:var(--bone); --c:var(--ink); }
.btn--light:hover{ color:var(--bone); }
.btn--ghost-light{ --b:transparent; --c:var(--bone); border-color:rgba(252,250,245,.4); }
.btn--ghost-light::after{ background:var(--bone); }
.btn--ghost-light:hover{ color:var(--ink); border-color:var(--bone); }

/* ── Duotone: unifica fotos de origens diferentes ───────────────── */
.duo{ position:relative; background:var(--slate); overflow:hidden; isolation:isolate; }
.duo img{ filter:grayscale(1) contrast(.92) brightness(1.18); mix-blend-mode:screen; width:100%; height:100%; object-fit:cover; }
.duo::after{ content:""; position:absolute; inset:0; background:#EFE4D2; mix-blend-mode:multiply; pointer-events:none; }

/* ══ UTILIDADE ══════════════════════════════════════════════════ */
.util{ background:var(--ink); color:rgba(245,240,230,.62); font-size:.78rem; letter-spacing:.01em; }
.util__loc{ white-space:nowrap; }
.util__in{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:38px; flex-wrap:wrap; }
.util__links{ display:flex; gap:1.6rem; }
.util__links a{ transition:color .3s; }
.util__links a:hover{ color:var(--bone); }
@media (max-width:760px){ .util__loc{ display:none; } .util__in{ justify-content:center; } }

/* ══ CABEÇALHO ══════════════════════════════════════════════════ */
.head{
  position:sticky; top:0; z-index:100;
  background:rgba(245,240,230,.82);
  -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line-2);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.head.is-stuck{ background:rgba(245,240,230,.96); border-color:var(--line); }
.head__in{ display:flex; align-items:center; justify-content:space-between; gap:clamp(1rem,3vw,3rem); min-height:84px; }
/* Lockup: o selo do logo recortado em quadrado + o nome composto em serifa.
   O PNG original tem a marca inteira em 225×94 — reduzido à altura do header
   o letreiro fica ilegível, então usamos só o selo e compomos o nome. */
.brand{ display:flex; align-items:center; gap:.75rem; }
.brand__seal{ width:46px; height:46px; overflow:hidden; display:block; flex:0 0 46px; }
.brand__seal img{ height:46px; width:auto; max-width:none; object-fit:cover; object-position:left center; mix-blend-mode:multiply; }
.brand__type{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--serif); font-size:1.28rem; color:var(--ink); letter-spacing:-.018em; }
.brand__tag{ font-size:.58rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-top:.28rem; }
@media (max-width:344px){ .brand__type{ display:none; } }
@media (max-width:560px){ .brand__name{ font-size:1.08rem; } .brand__seal{ width:40px; height:40px; flex-basis:40px; } .brand__seal img{ height:40px; } }
.nav{ display:flex; gap:clamp(1rem,2.2vw,2.4rem); margin-left:auto; }
.nav a{
  font-size:.92rem; font-weight:500; color:var(--slate);
  padding:.4rem 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }
.burger{ display:none; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:0; }
.burger span{ display:block; height:1.5px; background:var(--ink); margin:5px auto; width:24px; transition:transform .4s var(--ease), opacity .3s; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }
@media (max-width:1080px){
  .nav{
    position:fixed; inset:122px 0 auto; background:var(--paper);
    flex-direction:column; gap:0; padding:1rem var(--gut) 2rem;
    border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0); transition:clip-path .55s var(--ease);
  }
  .nav.is-open{ clip-path:inset(0 0 0 0); }
  .nav a{ font-family:var(--serif); font-size:1.9rem; padding:.55rem 0; border-bottom:1px solid var(--line-2); }
  .nav a::after{ display:none; }
  .head .btn--sm{ margin-left:auto; }
  .burger{ display:block; }
}
@media (max-width:560px){ .head .btn--sm{ display:none; } .brand img{ height:38px; } }

/* ══ 01 · ABERTURA ══════════════════════════════════════════════ */
.hero{ position:relative; background:var(--ink); color:var(--bone); isolation:isolate; overflow:hidden; }
.hero__media{ position:absolute; inset:0; margin:0; z-index:0; }
/* object-position empurrada para a direita: os rostos das crianças ficam na
   metade livre, fora da área do título. */
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:76% 32%;
  filter:grayscale(.7) contrast(1.08) brightness(.76);
  transform:scale(1.04);
}
@media (max-width:900px){ .hero__media img{ object-position:64% 30%; } }
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(20,36,43,.96) 0%, rgba(20,36,43,.82) 38%, rgba(20,36,43,.42) 68%, rgba(36,72,84,.34) 100%),
    linear-gradient(to top, rgba(20,36,43,.9) 0%, transparent 46%);
}
/* filete carmim no topo do herói — assinatura da marca */
.hero::after{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; z-index:3;
  background:linear-gradient(90deg, var(--red) 0%, var(--ember) 46%, var(--slate) 100%);
}
.hero__in{ position:relative; z-index:2; padding:clamp(5rem,11vh,9rem) 0 clamp(6rem,10vh,8rem); }
.hero__title{
  font-size:var(--t-mega); color:var(--bone); line-height:.9;
  letter-spacing:-.035em; margin:0 0 1.6rem; max-width:14ch;
}
.hero__title em{ color:var(--sand); }
.hero__lead{
  font-size:var(--t-lead); color:rgba(245,240,230,.76); max-width:46ch;
  line-height:1.5; margin-bottom:2.2rem;
}
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; }
.hero__index{ position:relative; z-index:2; border-top:1px solid var(--line-l); }
.hero__index-in{ display:flex; flex-wrap:wrap; }
.hero__index a{
  flex:1 1 auto; padding:1.15rem .4rem; text-align:center;
  font-size:.78rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(245,240,230,.58); border-left:1px solid var(--line-l);
  transition:background .4s var(--ease), color .4s var(--ease);
}
.hero__index a:first-child{ border-left:0; }
.hero__index a:hover{ background:rgba(245,240,230,.07); color:var(--bone); }
@media (max-width:860px){
  .hero__index a{ flex:1 1 45%; border-top:1px solid var(--line-l); }
  .hero__title{ max-width:none; }
}

/* ══ 02 · VALORES ═══════════════════════════════════════════════ */
.creed{ background:var(--slate); color:var(--bone); padding:0 0 var(--sec); overflow:hidden; }
.marquee{ padding:1.6rem 0; border-bottom:1px solid var(--line-l); margin-bottom:var(--sec); }
.marquee__track{
  display:flex; align-items:center; gap:1.6rem; width:max-content;
  animation:slide 34s linear infinite;
}
.marquee__track span{ font-family:var(--serif); font-size:clamp(2.4rem,6vw,4.6rem); line-height:1; color:rgba(245,240,230,.9); }
.marquee__track i{ color:var(--ember); font-style:normal; font-size:1.4rem; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.creed__in{ max-width:960px; }
.creed__quote{
  font-family:var(--serif); font-size:var(--t-l); line-height:1.16;
  letter-spacing:-.02em; color:var(--bone); margin:0 0 1.6rem;
}
.creed__quote em{ color:var(--sand); }
.creed__src{ font-size:.85rem; letter-spacing:.06em; color:rgba(245,240,230,.52); margin:0; }

/* ══ Cabeçalho de seção ═════════════════════════════════════════ */
.sechead{ max-width:70ch; margin-bottom:clamp(3rem,5vw,5rem); }
.sechead--center{ margin-inline:auto; text-align:center; }
.sechead--center .eyebrow{ justify-content:center; }
.sechead__t{ font-size:var(--t-xl); margin:0 0 1.2rem; }
.sechead__d{ font-size:var(--t-lead); color:var(--slate-2); max-width:52ch; margin:0; }
.sechead--center .sechead__d{ margin-inline:auto; }

/* ══ 03 · ÍNDICE DE PROGRAMAS ═══════════════════════════════════ */
.progs{ padding:var(--sec) 0; position:relative; }
.idx{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.idx__row{ border-bottom:1px solid var(--line); }
.idx__row a{
  display:grid; grid-template-columns:5.5rem minmax(0,1fr) 9rem 3rem;
  align-items:center; gap:clamp(1rem,2.4vw,2.6rem);
  padding:clamp(1.6rem,2.6vw,2.4rem) clamp(.5rem,1.6vw,1.6rem);
  position:relative; isolation:isolate;
}
.idx__row a::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s var(--ease);
}
.idx__row:hover a::before{ transform:scaleY(1); }
.idx__n{
  font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.8rem); line-height:1;
  color:var(--ember); transition:color .4s var(--ease), transform .55s var(--ease);
}
.idx__t{
  display:block; font-family:var(--serif); font-size:var(--t-l);
  color:var(--ink); line-height:1; letter-spacing:-.025em; margin-bottom:.35rem;
  transition:color .4s var(--ease);
}
.idx__sep{ color:var(--ember); }
.idx__d{
  display:block; font-size:.98rem; color:var(--slate-2); max-width:58ch; line-height:1.55;
  transition:color .4s var(--ease);
}
.idx__meta{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate-2); text-align:right; transition:color .4s var(--ease);
}
.idx__arrow{
  font-size:1.4rem; color:var(--slate-2); text-align:right;
  transition:transform .5s var(--ease), color .4s var(--ease);
}
.idx__row:hover .idx__t{ color:var(--bone); }
.idx__row:hover .idx__d,
.idx__row:hover .idx__meta{ color:rgba(245,240,230,.66); }
.idx__row:hover .idx__arrow{ color:var(--bone); transform:translateX(10px); }
.idx__row:hover .idx__n{ color:var(--sand); transform:translateY(-3px); }

/* Prévia que segue o cursor */
.idx__preview{
  position:fixed; top:0; left:0; width:270px; height:340px; z-index:60;
  pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.94);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
  background:var(--ink); overflow:hidden;
}
.idx__preview img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); mix-blend-mode:screen; }
.idx__preview::after{ content:""; position:absolute; inset:0; background:var(--sand); mix-blend-mode:multiply; }
.idx__preview.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (max-width:1080px){
  .idx__preview{ display:none; }
  .idx__row a{ grid-template-columns:3.4rem minmax(0,1fr); }
  .idx__meta,.idx__arrow{ display:none; }
}

/* ══ 04 · PEDAGOGIA ═════════════════════════════════════════════ */
.peda{ background:var(--bone); padding:var(--sec) 0; }
.peda__in{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(2rem,5vw,6rem); align-items:start; }
.peda__fig{ margin:0; aspect-ratio:3/4; }
.peda__t{ font-size:var(--t-xl); margin:0 0 1.8rem; }
.peda__t em{ color:var(--ember); }
.peda__q{
  font-family:var(--serif); font-size:var(--t-m); line-height:1.28;
  color:var(--ink); letter-spacing:-.018em;
  padding-left:1.6rem; border-left:2px solid var(--red); margin-bottom:2rem;
}
.peda__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:1.6rem; margin-bottom:2.2rem; }
.peda__cols p{ margin:0; color:var(--slate-2); }
.pills{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; }
.pills li{
  font-size:.8rem; font-weight:600; letter-spacing:.06em;
  padding:.5rem .95rem; border:1px solid var(--line); color:var(--slate);
}
@media (max-width:900px){ .peda__in{ grid-template-columns:1fr; } .peda__fig{ aspect-ratio:16/10; } }

/* ══ 05 · TÉCNICO ═══════════════════════════════════════════════ */
.agro{ background:var(--ink); color:var(--bone); padding:var(--sec) 0; }
.agro__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,5vw,6rem); align-items:start; }
.agro__t{ font-size:var(--t-xl); color:var(--bone); margin:0 0 1.4rem; }
.agro__t em{ color:var(--ember); }
.agro__d{ color:rgba(245,240,230,.72); max-width:46ch; margin-bottom:2rem; }
.stats{ margin:0; display:grid; gap:0; border-top:1px solid var(--line-l); }
.stat{ padding:1.5rem 0; border-bottom:1px solid var(--line-l); display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr); gap:1.5rem; align-items:baseline; }
.stat dt{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,240,230,.5); }
.stat dd{ margin:0; display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; }
.stat__big{ font-family:var(--serif); font-size:clamp(2.6rem,5vw,4.2rem); line-height:.85; color:var(--sand); }
.stat__pct{ font-size:.5em; color:var(--ember); }
.stat__mid{ font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,2rem); line-height:1; color:var(--sand); }
.stat__u{ font-size:.84rem; color:rgba(245,240,230,.6); max-width:26ch; line-height:1.4; }
@media (max-width:900px){ .agro__in{ grid-template-columns:1fr; } .stat{ grid-template-columns:1fr; gap:.5rem; } }

/* ══ 06 · EJA ═══════════════════════════════════════════════════ */
.eja{ padding:var(--sec) 0; }
.trio{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:0; border-top:1px solid var(--line); }
.trio article{ padding:2.4rem clamp(1rem,2vw,2rem) 2.4rem 0; border-bottom:1px solid var(--line); }
.trio article + article{ border-left:1px solid var(--line); padding-left:clamp(1rem,2vw,2rem); }
.trio__n{ font-family:var(--serif); font-style:italic; font-size:1.6rem; color:var(--ember); margin:0 0 .8rem; }
.trio h3{ font-size:var(--t-m); margin:0 0 .7rem; }
.trio p:last-child{ margin:0; color:var(--slate-2); font-size:.98rem; }
.eja__note{ margin:1.6rem 0 0; font-size:.78rem; letter-spacing:.05em; color:var(--slate-2); text-align:center; }

/* ══ 07 · VOZES ═════════════════════════════════════════════════ */
.vozes{ background:var(--bone); padding:var(--sec) 0; }
.quotes{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.quotes li{ padding:clamp(2rem,3.4vw,3.2rem) 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) 15rem; gap:clamp(1.5rem,4vw,4rem); align-items:end; }
.quotes li:nth-child(2){ padding-left:clamp(0rem,6vw,7rem); }
.quotes li:nth-child(3){ padding-left:clamp(0rem,12vw,14rem); }
.quotes blockquote{
  margin:0; font-family:var(--serif); font-size:var(--t-l);
  line-height:1.16; letter-spacing:-.02em; color:var(--ink); text-indent:-.4em;
}
.quotes blockquote::before{ content:"“"; color:var(--ember); }
.quotes blockquote::after{ content:"”"; color:var(--ember); }
.quotes blockquote em{ color:var(--red); }
.quotes__src{ margin:0; font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-2); }
@media (max-width:820px){ .quotes li{ grid-template-columns:1fr; align-items:start; gap:1rem; } }

/* ══ 08 · PORTAIS ═══════════════════════════════════════════════ */
.portais__in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.portal{
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,3vw,3rem);
  background:var(--sand); color:var(--ink); position:relative; isolation:isolate; overflow:hidden;
}
.portal h3{ font-size:var(--t-l); margin:0 0 .9rem; }
.portal__d{ margin:0; max-width:32ch; color:var(--slate); }
.portal__go{ position:absolute; right:clamp(1.5rem,3vw,3rem); bottom:clamp(2rem,4vw,3.5rem); font-size:1.8rem; transition:transform .5s var(--ease); }
.portal::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--ember); transform:translateY(101%); transition:transform .55s var(--ease); }
.portal:hover::after{ transform:translateY(0); }
.portal:hover,.portal:hover h3,.portal:hover .portal__d{ color:var(--bone); }
.portal:hover .eyebrow{ color:var(--bone); }
.portal:hover .portal__go{ transform:translateX(10px); }
.portal--alt{ background:var(--slate); color:var(--bone); }
.portal--alt h3{ color:var(--bone); }
.portal--alt .portal__d{ color:rgba(245,240,230,.72); }
.portal--alt::after{ background:var(--ink); }

/* ══ 09 · MATRÍCULA ═════════════════════════════════════════════ */
.fim{ background:var(--ink); color:var(--bone); padding:var(--sec) 0; }
.fim__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,5vw,6rem); }
.fim__t{ font-size:var(--t-mega); color:var(--bone); line-height:.88; margin:0 0 1.4rem; }
.fim__d{ color:rgba(245,240,230,.72); max-width:38ch; margin-bottom:2rem; }
.fim__cta{ display:flex; gap:.8rem; flex-wrap:wrap; }
.fim__data{ margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:2rem clamp(1.5rem,3vw,3rem); align-content:start; }
.fim__data dt{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ember); margin-bottom:.7rem; }
.fim__data dd{ margin:0; color:rgba(245,240,230,.8); line-height:1.75; font-size:.96rem; }
.fim__data a{ border-bottom:1px solid var(--line-l); transition:border-color .3s; }
.fim__data a:hover{ border-color:var(--bone); }
@media (max-width:900px){ .fim__in{ grid-template-columns:1fr; } }

/* ══ RODAPÉ ═════════════════════════════════════════════════════ */
.foot{ background:var(--ink); color:rgba(245,240,230,.45); padding:0 0 2.5rem; border-top:1px solid var(--line-l); }
.foot__mark{
  font-family:var(--serif); font-size:clamp(3rem,13vw,11rem); line-height:.9;
  color:transparent; -webkit-text-stroke:1px rgba(245,240,230,.2);
  margin:clamp(2rem,5vw,4rem) 0 1.5rem; letter-spacing:-.03em; user-select:none;
}
.foot__rows{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; letter-spacing:.04em; border-top:1px solid var(--line-l); padding-top:1.5rem; }
.foot__rows p{ margin:0; }

/* ══ WHATSAPP ═══════════════════════════════════════════════════ */
.wa{
  position:fixed; right:clamp(14px,2.2vw,26px); bottom:clamp(14px,2.2vw,26px); z-index:90;
  width:58px; height:58px; display:grid; place-items:center;
  background:var(--red); color:var(--bone);
  box-shadow:0 14px 34px -12px rgba(20,36,43,.6);
  transition:transform .45s var(--ease), background .35s var(--ease);
}
.wa svg{ width:27px; height:27px; }
.wa:hover{ transform:translateY(-3px); background:var(--ink); }

/* ══ REVELAÇÃO ══════════════════════════════════════════════════ */
[data-rev]{ opacity:0; transform:translateY(22px); transition:opacity .95s var(--ease), transform .95s var(--ease); transition-delay:calc(var(--i,0) * 80ms); }
[data-rev].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rev]{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ══════════════════════════════════════════════════════════════════
   BLOCO 2 — componentes novos
   ══════════════════════════════════════════════════════════════════ */

/* ══ AVISO AOS ALUNOS ═══════════════════════════════════════════
   O AVA saiu da posição antiga. Quem estuda aqui precisa ser avisado,
   não descobrir sozinho. Some depois de fechado (localStorage). */
.aviso{ background:var(--ember); color:var(--bone); font-size:.88rem; }
.aviso[hidden]{ display:none; }
.aviso__in{ display:flex; align-items:center; gap:1rem; padding:.7rem 0; flex-wrap:wrap; }
.aviso p{ margin:0; flex:1 1 320px; line-height:1.45; }
.aviso strong{ font-weight:700; }
.aviso__go{
  font-weight:600; border-bottom:1px solid rgba(252,250,245,.5); padding-bottom:1px;
  white-space:nowrap; transition:border-color .3s;
}
.aviso__go:hover{ border-color:var(--bone); color:var(--bone); }
.aviso__x{
  background:none; border:0; color:inherit; font-size:1.5rem; line-height:1;
  cursor:pointer; padding:0 .25rem; width:44px; height:44px; opacity:.75;
}
.aviso__x:hover{ opacity:1; }

/* ══ MARCA ══════════════════════════════════════════════════════
   O selo agora é SVG vetorizado do PNG original — não corta mais. */
.brand__seal{
  width:46px; height:46px; flex:0 0 46px; display:block;
  transition:transform .6s var(--ease);
}
.brand:hover .brand__seal{ transform:rotate(-12deg); }

/* ══ HERÓI ══════════════════════════════════════════════════════
   A foto tem a menina encostada na borda esquerda e um campo vazio
   à direita. O texto ocupa esse vazio em vez de cobrir o rosto. */
/* herói ocupa uma tela cheia: texto centralizado verticalmente, trilha no pé */
.hero{ min-height:100svh; display:flex; flex-direction:column; }
.hero__in{
  flex:1 1 auto; display:flex; align-items:center; justify-content:flex-end;
  padding:clamp(3.5rem,8vh,7rem) 0 clamp(2.5rem,6vh,5rem) !important;
}
.trilha{ flex:0 0 auto; }
.hero__txt{ width:min(620px, 100%); }
/* 4 linhas de --t-mega estouravam a altura da tela */
.hero__title{ font-size:clamp(2.5rem, 1.1rem + 4.6vw, 5.2rem) !important; margin-bottom:1.3rem; }
.hero__lead{ margin-bottom:1.9rem; }
.hero__media img{ object-position:0% 30%; }
.hero::before{
  background:
    linear-gradient(90deg, rgba(20,36,43,.34) 0%, rgba(20,36,43,.28) 26%, rgba(20,36,43,.82) 54%, rgba(20,36,43,.95) 100%),
    linear-gradient(to top, rgba(20,36,43,.92) 0%, rgba(20,36,43,.1) 52%);
}
.hero__title .num{ font-style:normal; color:var(--ember); }
/* No celular o retrato é paisagem numa tela alta: qualquer enquadramento
   joga o rosto para trás do texto. Então a foto deixa de ser fundo e vira
   uma faixa no topo, com o texto abaixo em campo sólido. */
@media (max-width:900px){
  .hero{ min-height:0; }
  .hero__media{
    position:relative; inset:auto;
    height:clamp(270px, 40vh, 380px);
  }
  .hero__media img{ object-position:4% 26%; filter:grayscale(.45) contrast(1.06) brightness(.94); }
  .hero::before{
    inset:0 0 auto; height:calc(clamp(270px, 40vh, 380px) + 2px);
    background:
      linear-gradient(to top, var(--ink) 2%, rgba(20,36,43,.34) 46%, rgba(20,36,43,.12) 100%);
  }
  .hero__in{
    justify-content:flex-start; align-items:flex-start;
    background:var(--ink);
    padding:2.5rem 0 3rem !important;
    margin-top:-1px;
  }
  .hero__title{ font-size:clamp(2.4rem, 1rem + 7.4vw, 3.6rem) !important; }
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1 1 auto; }
}

/* ── trilha: a mesma trajetória, etapa por etapa ───────────────── */
.trilha{
  position:relative; z-index:2; border-top:1px solid var(--line-l);
  background:rgba(20,36,43,.42);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.trilha__in{ padding:2rem 0 1.6rem; }
.trilha__list{
  list-style:none; margin:0 0 1rem; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  position:relative;
}
/* o fio que liga as etapas */
.trilha__list::before{
  content:""; position:absolute; left:10%; right:10%; top:31px; height:1px;
  background:linear-gradient(90deg, var(--line-l), rgba(192,68,28,.55), var(--line-l));
}
.trilha__i{ text-align:center; position:relative; }
.trilha__i a{ display:block; padding:0 .4rem; }
.trilha__ring{
  width:62px; height:62px; border-radius:50%; margin:0 auto .8rem;
  display:block; overflow:hidden; position:relative; isolation:isolate;
  background:var(--ink); border:2px solid rgba(245,240,230,.28);
  transition:border-color .5s var(--ease), transform .6s var(--ease), box-shadow .5s var(--ease);
}
.trilha__ring img{
  width:100%; height:100%; object-fit:cover;
  /* a 62px a miniatura precisa de mais luz que as fotos grandes */
  filter:grayscale(1) contrast(.8) brightness(1.5); mix-blend-mode:screen;
  transition:filter .6s var(--ease);
}
.trilha__ring::after{
  content:""; position:absolute; inset:0; background:#EFE4D2;
  mix-blend-mode:multiply; opacity:.72; transition:opacity .6s var(--ease);
}
.trilha__ring--seal{ background:var(--bone); border-color:var(--red); }
.trilha__ring--seal img{ filter:none; mix-blend-mode:normal; padding:8px; }
.trilha__ring--seal::after{ display:none; }
.trilha__age{
  display:block; font-family:var(--serif); font-size:1.35rem; line-height:1;
  color:var(--sand); margin-bottom:.2rem;
}
.trilha__lbl{
  display:block; font-size:.68rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(245,240,230,.5); line-height:1.35;
  transition:color .4s var(--ease);
}
.trilha__i.is-on .trilha__ring{
  border-color:var(--ember); transform:scale(1.1);
  box-shadow:0 0 0 6px rgba(192,68,28,.14);
}
.trilha__i.is-on .trilha__ring img{ filter:grayscale(0) contrast(1.02); mix-blend-mode:normal; }
.trilha__i.is-on .trilha__ring::after{ opacity:0; }
.trilha__i.is-on .trilha__lbl{ color:var(--bone); }
.trilha__i a:hover .trilha__ring{ border-color:var(--sand); transform:scale(1.06); }
.trilha__note{ margin:0; text-align:center; font-size:.82rem; color:rgba(245,240,230,.52); }
.trilha__note a{ color:var(--sand); border-bottom:1px solid rgba(192,68,28,.5); }
@media (max-width:860px){
  .trilha__list{
    grid-template-columns:repeat(5,minmax(96px,1fr));
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem;
  }
  .trilha__i{ scroll-snap-align:center; }
  .trilha__list::before{ display:none; }
  .trilha__ring{ width:52px; height:52px; }
  .trilha__age{ font-size:1.1rem; }
  .trilha__lbl{ font-size:.6rem; }
}

/* ══ POR DENTRO — tira com as fotos reais da escola ═════════════ */
.dentro{ background:var(--bone); padding:var(--sec) 0 0; overflow:hidden; }
.tira{
  display:flex; gap:12px; padding:0 var(--gut) var(--sec);
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.tira::-webkit-scrollbar{ display:none; }
.tira__i{
  margin:0; flex:0 0 clamp(250px, 30vw, 420px); scroll-snap-align:center;
  position:relative; aspect-ratio:4/5; overflow:hidden;
}
.tira__i:first-child{ margin-left:max(0px, calc((100vw - var(--maxw)) / 2 - var(--gut))); }
.tira__i img{ transition:transform 1.2s var(--ease); }
.tira__i:hover img{ transform:scale(1.06); }
.tira__i figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.4rem 1.2rem 1.2rem;
  background:linear-gradient(to top, rgba(20,36,43,.94), transparent);
  color:rgba(252,250,245,.82); font-size:.86rem; line-height:1.4;
}
.tira__i figcaption b{
  display:block; font-family:var(--serif); font-size:1.5rem; font-weight:400;
  color:var(--bone); letter-spacing:-.02em; margin-bottom:.2rem;
}
.tira__i.duo::after{ mix-blend-mode:multiply; opacity:.8; }

/* ══ EDUCAÇÃO PROFISSIONAL ══════════════════════════════════════ */
.agro__top{ max-width:64ch; margin-bottom:clamp(2.5rem,4vw,4rem); }
.agro__t{ font-size:var(--t-xl); color:var(--bone); margin:0 0 1.2rem; }
.agro__t em{ color:var(--ember); }
.agro__card{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,5rem);
  border:1px solid var(--line-l); padding:clamp(1.75rem,3.4vw,3.2rem);
  background:rgba(36,72,84,.34);
}
.agro__curso{ font-size:var(--t-l); color:var(--bone); margin:0 0 1rem; }
.agro__curso em{ color:var(--ember); }
.agro__cd{ color:rgba(245,240,230,.72); max-width:44ch; margin-bottom:1.8rem; }
.agro__next{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin:2.2rem 0 0; padding-top:1.6rem; border-top:1px solid var(--line-l);
  font-size:.92rem; color:rgba(245,240,230,.6);
}
.agro__next a{ color:var(--sand); font-weight:600; border-bottom:1px solid rgba(192,68,28,.5); }
.agro__next a:hover{ color:var(--bone); border-color:var(--bone); }
@media (max-width:900px){ .agro__card{ grid-template-columns:1fr; } }

/* ══ CAMPOS DE FORMULÁRIO ═══════════════════════════════════════ */
.fld{ display:block; margin-bottom:1rem; }
.fld__l{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--slate-2); margin-bottom:.5rem;
}
.fld__l i{ font-style:normal; opacity:.6; letter-spacing:.04em; text-transform:none; }
.fld input, .fld select{
  width:100%; min-height:52px; padding:.8rem 1rem;
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--bone); border:1px solid var(--line); border-radius:0;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fld input:focus, .fld select:focus{
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(180,36,28,.12);
}
.fld--dark .fld__l{ color:rgba(245,240,230,.55); }
.fld--dark input, .fld--dark select{
  background:rgba(245,240,230,.06); border-color:var(--line-l); color:var(--bone);
}
.fld--dark input:focus, .fld--dark select:focus{
  border-color:var(--ember); box-shadow:0 0 0 3px rgba(192,68,28,.2); background:rgba(245,240,230,.1);
}
.fld--dark select option{ background:var(--ink); color:var(--bone); }
.btn--full{ width:100%; }

/* ══ AVA — o login que existia e continua existindo ═════════════ */
.ava{ background:var(--slate); color:var(--bone); padding:var(--sec) 0; }
.ava__in{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2.5rem,5vw,6rem); align-items:center;
}
.ava__t{ font-size:var(--t-xl); color:var(--bone); margin:0 0 1.4rem; }
.ava__d{ color:rgba(245,240,230,.78); max-width:46ch; }
.ava__d strong{ color:var(--bone); font-weight:600; }
.ava__d em{ color:var(--sand); font-style:italic; }
.ava__help{ list-style:none; margin:1.8rem 0; padding:0; }
.ava__help li{
  font-size:.92rem; color:rgba(245,240,230,.66); line-height:1.5;
  padding:.7rem 0 .7rem 1.4rem; border-top:1px solid var(--line-l); position:relative;
}
.ava__help li::before{ content:"\2192"; position:absolute; left:0; color:var(--ember); }
.ava__help a{ color:var(--sand); border-bottom:1px solid rgba(192,68,28,.5); }
.ava__alt{ font-size:.88rem; color:rgba(245,240,230,.6); border-bottom:1px solid var(--line-l); padding-bottom:2px; }
.ava__alt:hover{ color:var(--bone); }

.ava__box{ position:relative; }
.ava__form{
  background:var(--paper); color:var(--ink);
  padding:clamp(1.75rem,3vw,2.6rem);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55);
  position:relative;
}
.ava__form::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--red), var(--ember));
}
.ava__badge{
  display:flex; align-items:center; gap:.6rem; margin:0 0 1rem;
  font-size:.7rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate-2);
}
.ava__ft{ font-size:var(--t-m); margin:0 0 1.6rem; }
.ava__fine{ margin:1rem 0 0; font-size:.78rem; color:var(--slate-2); line-height:1.45; text-align:center; }
@media (max-width:900px){ .ava__in{ grid-template-columns:1fr; } }

/* ══ MATRÍCULA ══════════════════════════════════════════════════ */
.mat{ max-width:440px; margin-top:2rem; }
.mat__fine{ margin:1rem 0 0; font-size:.85rem; color:rgba(245,240,230,.58); }
.mat__fine a{ color:var(--sand); border-bottom:1px solid var(--line-l); }
.fim__in{ align-items:start; }

/* ══ DOCK DE CONVERSÃO (celular) ════════════════════════════════ */
.dock{ display:none; }
@media (max-width:760px){
  .dock{
    position:fixed; left:0; right:0; bottom:0; z-index:95;
    display:flex; gap:1px; background:var(--line-l);
    box-shadow:0 -10px 30px -16px rgba(20,36,43,.5);
  }
  .dock__a{
    flex:1; min-height:56px; display:grid; place-items:center;
    background:var(--red); color:var(--bone); font-weight:600; font-size:.98rem;
  }
  .dock__b{
    flex:0 0 68px; min-height:56px; display:grid; place-items:center;
    background:var(--ink); color:var(--bone);
  }
  .dock__b svg{ width:26px; height:26px; }
  .wa{ display:none; }
  body{ padding-bottom:56px; }
}

.num{ font-variant-numeric:tabular-nums; }

/* ══════════════════════════════════════════════════════════════════
   BLOCO 3 — cabeçalho e rodapé no site inteiro
   O wp_nav_menu devolve <li><a>…</a></li>; o design original tinha
   <a> soltos. Estas regras fazem os dois se comportarem igual.
   ══════════════════════════════════════════════════════════════════ */

.nav ul, .util__links ul{ list-style:none; margin:0; padding:0; display:contents; }
.nav li, .util__links li{ list-style:none; margin:0; padding:0; }

/* item ativo da navegação */
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-ancestor > a{ color:var(--ink); }
.nav .current-menu-item > a::after,
.nav .current_page_item > a::after{ transform:scaleX(1); }

.util__links .current-menu-item > a{ color:var(--bone); }

/* submenus: a navegação é de um nível só, então escondemos o resto */
.nav .sub-menu, .util__links .sub-menu{ display:none; }

@media (max-width:1080px){
  .nav li{ width:100%; }
  .nav li a{ display:block; }
}

/* ── Páginas internas ──────────────────────────────────────────────
   O miolo continua sendo do Divi; aqui só garantimos que ele respire
   sob o cabeçalho novo e não encoste nas bordas. */
.cos-skin:not(.cos-home) #main-content{ background:var(--paper); }
.cos-skin:not(.cos-home) #main-content .container{ padding-top:0; }

/* O Divi abre a página com uma faixa colada no cabeçalho; um filete
   da marca separa os dois. */
.cos-skin:not(.cos-home) #main-content::before{
  content:""; display:block; height:3px;
  background:linear-gradient(90deg, var(--red) 0%, var(--ember) 46%, var(--slate) 100%);
}

/* Rodapé do Divi some: o nosso é o do site inteiro. */
.cos-skin #main-footer, .cos-skin #footer-bottom, .cos-skin #et-footer-nav{ display:none !important; }

/* O botão flutuante do tema pai não é mais necessário em página nenhuma */
.cos-skin .cos-wa{ display:none !important; }

/* ══════════════════════════════════════════════════════════════════
   BLOCO 4 — folga para os nomes reais do menu
   Na home a navegação tinha 5 âncoras curtas que eu mesmo escrevi.
   Agora vêm os títulos das páginas — "Curso Técnico em Agropecuária"
   tem 29 caracteres — e sem nowrap eles quebravam em três linhas.
   ══════════════════════════════════════════════════════════════════ */

.nav li a, .util__links li a, .util__links > a{ white-space:nowrap; }
.head .btn--sm{ white-space:nowrap; flex:0 0 auto; }
.brand{ flex:0 0 auto; }

/* Entre 1200px e 1440px o menu completo cabe, mas justo: a tipografia
   e os intervalos cedem um pouco antes de virar hambúrguer. */
@media (min-width:1201px){
  .nav{ gap:clamp(.55rem, .1rem + 1.1vw, 2.2rem); }
  .nav li a{ font-size:clamp(.82rem, .66rem + .22vw, .92rem) !important; }
}

/* O hambúrguer entra mais cedo: abaixo disso os seis nomes não cabem
   em uma linha de jeito nenhum. */
@media (max-width:1200px){
  .nav{
    position:fixed; inset:auto 0 auto; top:var(--cos-head-bottom, 122px);
    background:var(--paper);
    flex-direction:column; gap:0; padding:1rem var(--gut) 2rem;
    border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0); transition:clip-path .55s var(--ease);
    margin-left:0;
  }
  .nav.is-open{ clip-path:inset(0 0 0 0); }
  .nav li{ width:100%; }
  .nav li a{
    display:block; font-family:var(--serif); font-size:1.7rem !important;
    padding:.55rem 0; border-bottom:1px solid var(--line-2);
  }
  .nav li a::after{ display:none; }
  .head .btn--sm{ margin-left:auto; }
  .burger{ display:block; }
}
@media (max-width:560px){ .head .btn--sm{ display:none; } }

/* ══════════════════════════════════════════════════════════════════
   BLOCO 5 — vícios de formatação gravados no conteúdo
   Estão inline no HTML das páginas, resquício de texto colado do Word
   e de edições antigas. Neutralizados por CSS, não apagados: se um dia
   alguém quiser de volta, é só remover este bloco.
   ══════════════════════════════════════════════════════════════════ */

/* 44 parágrafos justificados — justificação sem hifenização abre
   "rios" brancos no meio do texto. */
.cos-skin #main-content [style*="justify"]{ text-align:left !important; }

/* Corpos de 12pt / 15px / 16px colados do Word, todos menores que a
   base do sistema. Voltam a herdar. */
.cos-skin #main-content [style*="font-size: 12pt"],
.cos-skin #main-content [style*="font-size:12pt"],
.cos-skin #main-content [style*="font-size: 15px"],
.cos-skin #main-content [style*="font-size:15px"],
.cos-skin #main-content [style*="font-size: 16px"],
.cos-skin #main-content [style*="font-size:16px"]{ font-size:inherit !important; }

/* Famílias soltas no conteúdo (sobrou uma Cabin Sketch) voltam ao par
   do sistema. O x-large/xx-large fica: ali é ênfase intencional. */
.cos-skin #main-content [style*="font-family"]{ font-family:var(--serif) !important; }

/* Preto puro no texto corrido é duro demais sobre papel creme. */
.cos-skin #main-content [style*="color: #000000"],
.cos-skin #main-content [style*="color:#000000"]{ color:var(--ink) !important; }

/* Imagens do acervo antigo esticadas além do tamanho real ficam
   borradas; limitamos ao quadro e mantemos a proporção. */
.cos-skin #main-content .et_pb_image img,
.cos-skin #main-content .et_pb_main_blurb_image img{ height:auto; }

/* ══════════════════════════════════════════════════════════════════
   BLOCO 6 — hero das páginas internas
   Regra do projeto: nenhuma página entra sem hero. Quatro páginas
   abriam com clip-art do Divi e três não abriam com nada; agora todas
   abrem no mesmo idioma da home.
   ══════════════════════════════════════════════════════════════════ */

.phero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:var(--bone);
  min-height:clamp(340px, 48vh, 520px);
  display:flex; align-items:flex-end;
}
/* filete da marca no topo, como no herói da home */
.phero::after{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; z-index:4;
  background:linear-gradient(90deg, var(--red) 0%, var(--ember) 46%, var(--slate) 100%);
}
.phero__media{
  position:absolute; inset:0; margin:0; z-index:0;
  will-change:transform;
}
.phero__media img{
  width:100%; height:118%; object-fit:cover; object-position:50% 38%;
}
/* o duotone é o mesmo do resto do site, só mais escuro para o texto caber */
.phero.duo::after{ display:none; }
.phero__media.duo::after{ background:#D9CDBA; }
.phero__media::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(to top, rgba(20,36,43,.94) 0%, rgba(20,36,43,.62) 48%, rgba(20,36,43,.3) 100%),
    linear-gradient(105deg, rgba(20,36,43,.72) 0%, rgba(20,36,43,.2) 62%, transparent 100%);
}
.phero__in{
  position:relative; z-index:2;
  padding:clamp(3rem,7vh,5.5rem) 0 clamp(2rem,4vh,3.2rem);
  width:min(var(--maxw), 100% - var(--gut)*2);
}

/* trilha de navegação — situa a página sem virar breadcrumb genérico */
.phero__trilha{
  display:flex; align-items:center; gap:.6rem; margin:0 0 1.1rem;
  font-size:var(--t-lbl); font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sand);
}
.phero__trilha a{ color:var(--sand); border-bottom:1px solid transparent; transition:border-color .3s var(--ease); }
.phero__trilha a:hover{ border-color:var(--sand); color:var(--bone); }
.phero__trilha span[aria-hidden]{ color:var(--ember); }

.phero__t{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem, 1.2rem + 4.2vw, 5rem);
  line-height:1.02; letter-spacing:-.032em;
  color:var(--bone); margin:0 0 1rem; max-width:20ch;
  text-shadow:0 2px 40px rgba(0,0,0,.4);
}
.phero__lead{
  font-size:var(--t-lead); line-height:1.5; max-width:54ch;
  color:rgba(245,240,230,.8); margin:0 0 1.8rem;
  text-shadow:0 1px 20px rgba(0,0,0,.35);
}

/* chamada para descer — some conforme a pessoa rola */
.phero__cue{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,240,230,.6);
  transition:color .3s var(--ease), opacity .4s var(--ease);
}
.phero__cue svg{ width:18px; height:18px; animation:cosDesce 2.4s var(--ease-io) infinite; }
.phero__cue:hover{ color:var(--bone); }
@keyframes cosDesce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
.phero__cue[data-longe]{ opacity:0; pointer-events:none; }

/* revelação: o título entra por baixo de uma máscara, linha a linha */
.phero__trilha, .phero__t, .phero__lead, .phero__cue{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.phero.is-in .phero__trilha{ opacity:1; transform:none; transition-delay:.05s; }
.phero.is-in .phero__t{ opacity:1; transform:none; transition-delay:.15s; }
.phero.is-in .phero__lead{ opacity:1; transform:none; transition-delay:.28s; }
.phero.is-in .phero__cue{ opacity:1; transform:none; transition-delay:.4s; }

@media (max-width:760px){
  .phero{ min-height:clamp(300px,42vh,400px); }
  .phero__t{ max-width:none; }
  .phero__lead{ font-size:1rem; }
}
@media (prefers-reduced-motion:reduce){
  .phero__trilha,.phero__t,.phero__lead,.phero__cue{ opacity:1 !important; transform:none !important; }
  .phero__cue svg{ animation:none; }
  .phero__media{ transform:none !important; }
}

/* ── os decorativos antigos saem de cena ──────────────────────────
   Quatro páginas abriam com um et_pb_fullwidth_header do Divi (o
   "EDUCAÇÃO" em arco-íris, o sol, a casinha). O hero do tema ocupa
   esse lugar agora. O conteúdo segue no banco, só não é exibido. */
.cos-skin:not(.cos-home) #main-content .et_pb_fullwidth_header{ display:none !important; }
.cos-skin:not(.cos-home) #main-content .et_pb_section:first-of-type .et_pb_fullwidth_image{ display:none !important; }

/* sem o cabeçalho decorativo, a primeira seção encostava no hero */
.cos-skin:not(.cos-home) #main-content > .et-l > .et_builder_inner_content > .et_pb_section:first-of-type{
  padding-top:clamp(3rem,6vw,6rem) !important;
}
/* o filete que separava hero e conteúdo agora é do próprio hero */
.cos-skin:not(.cos-home) #main-content::before{ display:none; }

/* ══════════════════════════════════════════════════════════════════
   BLOCO 7 — refino de celular
   Achados medindo no aparelho, não no navegador redimensionado.
   ══════════════════════════════════════════════════════════════════ */

/* O #page-container guardava 80px de padding-top para o menu fixo do Divi,
   que não existe mais desde que o cabeçalho passou a ser nosso (e é sticky,
   não fixed). Sobre o papel creme isso virava uma faixa branca no topo —
   era o bloco que aparecia ao fechar o aviso laranja. */
.cos-skin #page-container{ padding-top:0 !important; }

@media (max-width:760px){

  /* Barra de utilidade: os links tinham 12,48px de corpo e 15px de altura
     de toque. Nem se lê, nem se acerta com o dedo. */
  .util{ font-size:.82rem; }
  .util__in{ padding:.25rem 0; gap:.2rem .9rem; }
  .util__links{ flex-wrap:wrap; justify-content:center; gap:0 1rem; }
  .util__links a,
  .util__links li a{
    display:inline-flex; align-items:center;
    min-height:40px; padding:0 .1rem;
  }

  /* A assinatura da marca estava em 9,28px. */
  .brand__tag{ font-size:.66rem; letter-spacing:.13em; }

  /* Rótulos de seção: piso de 12px. */
  .eyebrow{ font-size:.75rem; letter-spacing:.16em; }
  .eyebrow::before{ width:18px; }

  /* Links soltos no meio do texto ganham área de toque de verdade.
     Links dentro de frase ficam como estão — aumentá-los quebraria o
     ritmo do parágrafo, e a norma abre exceção justamente para esses. */
  .ava__alt, .agro__next a, .trilha__note a, .portal__go{
    display:inline-flex; align-items:center; min-height:40px;
  }

  /* Versaletes e metadados: piso de 12px. Continuam pequenos por
     desenho — são rótulo, não leitura corrida — mas legíveis. */
  .fim__data dt, .quotes__src, .ava__badge, .fld__l,
  .eja__note, .ava__fine, .stat dt, .mat__fine{ font-size:.75rem; }

  /* A marca é o maior alvo do cabeçalho: precisa passar de 40px. */
  .brand__seal{ width:42px; height:42px; flex-basis:42px; }

  /* O rodapé encostava na barra fixa de conversão. */
  .foot__rows{ gap:.4rem; }
  .foot{ padding-bottom:1.2rem; }
}

/* Telas muito estreitas: a marca não pode espremer o botão do menu. */
@media (max-width:380px){
  .brand__name{ font-size:.98rem; }
  .brand__tag{ font-size:.6rem; }
  .util{ font-size:.78rem; }
}