/* =============================================================
   COLÉGIO DOMUS MARIAE — Identidade visual (Manual da Marca v1.0)
   Azul Domus · Ouro · Marsala · Petróleo · Telha · Creme
   Type: Archivo (manchetes) · Archivo Narrow (rótulos) · EB Garamond (serifa)
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Paleta primária */
  --navy:      #143C78;
  --navy-900:  #0E2B57;
  --navy-800:  #163f7e;
  --gold:      #F0B428;
  --gold-600:  #D69A1C;
  --gold-300:  #F7D27A;
  --marsala:   #781414;
  --marsala-600:#8f2020;
  --petrol:    #14424E;
  --telha:     #E0512B;

  /* Neutros */
  --cream:     #F2E9D5;
  --cream-200: #EDE2C9;
  --offwhite:  #FAF7F0;
  --charcoal:  #1A1A1A;
  --ink:       #20242B;
  --white:     #FFFFFF;
  --line:      #E4D9C0;         /* borda sutil sobre creme */
  --line-navy: rgba(255,255,255,.16);

  /* Semânticos */
  --bg:            var(--offwhite);
  --bg-alt:        var(--cream);
  --surface:       var(--white);
  --text:          #23262c;
  --text-soft:     #55503f;      /* texto secundário quente */
  --text-on-navy:  #EAF0FA;
  --text-on-navy-soft: #AEC0DC;
  --accent:        var(--gold);
  --cta:           var(--gold);
  --cta-ink:       var(--navy);

  /* Tipografia */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif; /* Agrandir → Archivo */
  --f-label:   "Archivo Narrow", "Archivo", Arial, sans-serif;
  --f-serif:   "EB Garamond", "Times New Roman", Georgia, serif;

  /* Sombra / raio */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;
  --sh-1: 0 1px 2px rgba(20,40,80,.06), 0 2px 8px rgba(20,40,80,.05);
  --sh-2: 0 6px 18px rgba(20,40,80,.09), 0 2px 6px rgba(20,40,80,.06);
  --sh-3: 0 18px 48px rgba(14,43,87,.16), 0 6px 16px rgba(14,43,87,.10);
  --sh-navy: 0 24px 60px rgba(7,20,45,.45);

  /* Layout */
  --container: 1200px;
  --wide: 1340px;
  --gutter: clamp(20px, 5vw, 40px);
  --pad-y: clamp(4.5rem, 9vw, 8rem);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --dur: .28s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--f-serif);
  font-size: clamp(1.02rem, .5vw + .95rem, 1.14rem);
  line-height: 1.72;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--gold); color: var(--navy); }

/* ---------- Tipografia base ---------- */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: 1.05; letter-spacing: -.015em; color: var(--navy); }
h2 { font-size: clamp(1.95rem, 3.4vw, 3rem); }
h3 { font-size: clamp(1.18rem, 1.4vw, 1.42rem); letter-spacing: -.01em; }
.serif { font-family: var(--f-serif); }
/* Seções escuras: títulos em branco por padrão (evita azul-sobre-azul) */
.on-navy h1, .on-navy h2, .on-navy h3, .on-navy h4 { color: #fff; }
em, .em { font-family: var(--f-serif); font-style: italic; font-weight: 500; }

/* Palavra-acento em serifa dourada (estilo Emmanuel) */
.accent {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0;
}
.on-navy .accent { color: var(--gold-300); }

/* Círculo manuscrito em ouro — desenhado à mão (SVG stroke, assinatura de motion) */
.circled { position: relative; display: inline-block; isolation: isolate; }
.circled .accent { position: relative; z-index: 1; }
.scribble {
  position: absolute; left: -9%; top: -26%; width: 118%; height: 156%;
  overflow: visible; pointer-events: none; z-index: 0;
}
.scribble path {
  fill: none; stroke: var(--gold); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 860; stroke-dashoffset: 860;
}
.hero.is-loaded .scribble path,
.reveal.is-in .scribble path { animation: scribble-draw 1.05s .55s var(--ease-out) forwards; }
@keyframes scribble-draw { to { stroke-dashoffset: 0; } }
@keyframes star-in {
  0%   { transform: scale(.3) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Realce em bloco (palavra em caixa sólida) */
.mark { background: var(--gold); color: var(--navy); padding: .02em .34em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mark--telha { background: var(--telha); color: var(--white); }

/* ---------- Utilitários de layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--wide); }
.section { padding-block: var(--pad-y); position: relative; }
/* âncoras não ficam escondidas sob o nav fixo */
section[id], #topo { scroll-margin-top: 84px; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

/* Eyebrow / rótulo com filete */
.eyebrow {
  font-family: var(--f-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: .2em; font-size: .78rem; color: var(--marsala);
  display: inline-flex; align-items: center; gap: .7em;
}
.on-navy .eyebrow { color: var(--gold-300); }
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--marsala) 0 55%, var(--gold) 55% 100%); }
.center .eyebrow { justify-content: center; }

/* Filete vermelho-ouro (divisor do logo) */
.filete { height: 3px; width: 74px; border-radius: 2px; background: linear-gradient(90deg, var(--marsala) 0 55%, var(--gold) 55% 100%); }
.center .filete { margin-inline: auto; }

.section-head { max-width: 46rem; }
.center .section-head,           /* .section-head DENTRO de .center */
.section-head.center {            /* .section-head COM classe .center no mesmo elemento */
  margin-inline: auto;
}
.section-head .lead { margin-top: 1rem; color: var(--text-soft); font-size: 1.16rem; }
.on-navy .section-head .lead { color: var(--text-on-navy-soft); }
.section-head h2 { margin-top: .85rem; }

/* ---------- Botões ---------- */
.btn {
  --_bg: var(--gold); --_fg: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  font-size: .86rem; line-height: 1;
  padding: 1.05em 1.7em; border-radius: 10px;
  background: var(--_bg); color: var(--_fg);
  border: 2px solid transparent;
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
  will-change: transform;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
.btn--primary { --_bg: var(--gold); --_fg: var(--navy); }
.btn--primary:hover { background: var(--gold-600); }
.btn--navy { --_bg: var(--navy); --_fg: #fff; }
.btn--navy:hover { background: var(--navy-800); }
.btn--marsala { --_bg: var(--marsala); --_fg: #fff; }
.btn--ghost {
  background: transparent; color: var(--navy); border-color: rgba(20,60,120,.28); box-shadow: none;
}
.btn--ghost:hover { border-color: var(--navy); background: rgba(20,60,120,.05); }
.on-navy .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.on-navy .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.btn--lg { padding: 1.2em 2em; font-size: .92rem; }

.textlink {
  font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  font-size: .8rem; color: var(--marsala); display: inline-flex; align-items: center; gap: .5em;
}
.on-navy .textlink { color: var(--gold-300); }
.textlink svg { width: 1.1em; transition: transform var(--dur) var(--ease); }
.textlink:hover svg { transform: translateX(4px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease);
  padding-block: 1.1rem;
}
.nav__inner { display: flex; align-items: center; gap: 1.5rem; }
.nav__logo { height: 52px; transition: height var(--dur) var(--ease); }
.nav__logo img { height: 100%; width: auto; }
.nav__logo .logo-white { display: block; }
.nav__logo .logo-color { display: none; }
.nav__spacer { flex: 1; }
.nav__links { display: flex; align-items: center; gap: 1.9rem; }
.nav__links a {
  font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  font-size: .82rem; color: rgba(255,255,255,.9); position: relative; padding-block: .3rem;
  transition: color var(--dur) var(--ease);
}
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--gold); transition: width var(--dur) var(--ease); }
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { width: 100%; }
.nav__cta { margin-left: .4rem; padding: .85em 1.35em; font-size: .8rem; white-space: nowrap; }
.nav__cta-mobile { display: none; }  /* aparece só no menu mobile */
.nav__burger { display: none; width: 46px; height: 46px; border-radius: 10px; align-items: center; justify-content: center; }
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  content: ""; display: block; width: 24px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease), opacity .2s;
}
.nav__burger span { position: relative; }
.nav__burger span::before { position: absolute; top: -8px; }
.nav__burger span::after { position: absolute; top: 8px; }

/* estado "scrolled" — fundo creme, logo colorido, links escuros */
.nav.is-scrolled {
  background: rgba(250,247,240,.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 var(--line), var(--sh-1);
  padding-block: .55rem;
}
.nav.is-scrolled .nav__logo { height: 44px; }
.nav.is-scrolled .nav__logo .logo-white { display: none; }
.nav.is-scrolled .nav__logo .logo-color { display: block; }
.nav.is-scrolled .nav__links a { color: var(--navy); }
.nav.is-scrolled .nav__burger span,
.nav.is-scrolled .nav__burger span::before,
.nav.is-scrolled .nav__burger span::after { background: var(--navy); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; padding-top: clamp(7rem, 12vh, 9.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(120,20,20,.55) 0%, rgba(120,20,20,0) 45%),
    radial-gradient(90% 80% at 0% 110%, rgba(20,66,78,.6) 0%, rgba(20,66,78,0) 50%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 62%, #0a2149 100%);
  color: var(--text-on-navy);
  overflow: hidden;
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero__content { position: relative; z-index: 3; max-width: 40rem; }
.hero__badges { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.5rem; }
.chip {
  font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; color: var(--gold-300);
  padding: .5em .9em; border: 1px solid rgba(240,180,40,.4); border-radius: 999px;
  background: rgba(240,180,40,.08); display: inline-flex; align-items: center; gap: .5em;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(240,180,40,.6); animation: pulse 2.4s var(--ease) infinite; }
.chip--ok { color: #6ee7a8; border-color: rgba(52,211,153,.45); background: rgba(52,211,153,.1); }
.chip--ok .dot { background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: pulseok 2.4s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(240,180,40,.55);} 70%{ box-shadow: 0 0 0 9px rgba(240,180,40,0);} 100%{ box-shadow:0 0 0 0 rgba(240,180,40,0);} }
@keyframes pulseok { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55);} 70%{ box-shadow: 0 0 0 9px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} }
.hero h1 {
  color: #fff; font-size: clamp(2.5rem, 5.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.025em;
  margin-top: .3rem;
}
.hero h1 .accent { display: inline-block; }
.hero__sub { margin-top: 1.4rem; font-size: clamp(1.08rem, 1.4vw, 1.25rem); color: var(--text-on-navy-soft); max-width: 34rem; }
.hero__actions { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__meta { margin-top: 1.8rem; font-family: var(--f-label); letter-spacing: .01em; font-size: .82rem; color: var(--text-on-navy-soft); display: flex; align-items: center; gap: .6rem; }
.hero__meta svg { width: 1.25em; height: 1.25em; color: var(--gold-300); flex: 0 0 auto; }
.hero__meta b { color: var(--gold-300); font-weight: 700; }

/* Media do hero */
.hero__media { position: relative; z-index: 2; }
.hero__frame {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 4 / 3.35; box-shadow: var(--sh-navy);
  border: 1px solid rgba(255,255,255,.12);
}
.hero__frame .photo { position: absolute; inset: 0; }
.hero__play {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  background: rgba(240,180,40,.95); color: var(--navy); display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform var(--dur) var(--ease-out), background var(--dur);
}
.hero__play svg { width: 30px; height: 30px; margin-left: 4px; }
.hero__play::after { content:""; position:absolute; inset:-12px; border-radius:50%; border:2px solid rgba(240,180,40,.5); animation: ring 2.8s var(--ease) infinite; }
@keyframes ring { 0%{transform:scale(.85);opacity:.9} 100%{transform:scale(1.35);opacity:0} }
.hero__play:hover { transform: scale(1.07); background: var(--gold); }
.hero__tag {
  position: absolute; left: -14px; bottom: 26px; z-index: 4;
  background: #fff; color: var(--navy); border-radius: 14px; padding: .75rem .95rem .8rem .85rem;
  box-shadow: var(--sh-3); display: flex; align-items: center; gap: .65rem; max-width: 17.5rem;
}
.hero__tag .crest { width: 38px; height: auto; flex: 0 0 auto; }
.hero__tag b { font-family: var(--f-display); font-weight: 800; font-size: .92rem; display: block; line-height: 1.15; margin-bottom: .18rem; }
.hero__tag span { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .05em; font-size: .62rem; line-height: 1.25; color: var(--marsala); display: block; }

/* Motivos decorativos no hero */
.hero__crosses { position: absolute; z-index: 1; opacity: .5; }
.hero__crosses--tr { top: 6%; right: 4%; width: 160px; height: 160px; color: rgba(240,180,40,.32); }
.hero__glow { position: absolute; z-index: 0; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; right: -12vw; top: -18vw; background: radial-gradient(circle, rgba(240,180,40,.16), transparent 62%); filter: blur(6px); pointer-events: none; }
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 5; color: var(--offwhite); }

/* ============================================================
   REVEAL (scroll)
   ============================================================ */
/* Conteúdo é visível por padrão. O estado "escondido" só se aplica quando
   o JS está ativo (html.js) e o elemento ainda não foi revelado (:not(.is-in)).
   Assim, sem JS ou se algo falhar, nada fica invisível. */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
[data-stagger] > * { transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js .reveal:not(.is-in) { opacity: 0; transform: translateY(26px); }
html.js .reveal--left:not(.is-in) { transform: translateX(-30px); }
html.js .reveal--right:not(.is-in) { transform: translateX(30px); }
html.js [data-stagger]:not(.is-in) > * { opacity: 0; transform: translateY(26px); }
@media (prefers-reduced-motion: reduce) {
  .reveal, [data-stagger] > *, .hero__content > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .chip .dot, .hero__play::after, .tcard__stars svg { animation: none; }
  .scribble path { animation: none; stroke-dashoffset: 0; }
  .eyebrow::before { transform: none !important; }
  .hb { animation: none; }
  .hero__frame .ph-img { transform: scale(1.05) !important; }
}

/* ============================================================
   PROPÓSITO (band serifada)
   ============================================================ */
.purpose { background: var(--cream); position: relative; overflow: hidden; }
.purpose::before { content:""; position:absolute; inset:0; background: url("../assets/img/brasao.png") right -6% bottom -18%/min(38%,420px) no-repeat; opacity: .05; }
.purpose__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.purpose__lead .kicker { font-family: var(--f-serif); font-style: italic; font-size: 1.3rem; color: var(--marsala); }
.purpose__lead h2 { font-family: var(--f-serif); font-weight: 700; font-style: normal; font-size: clamp(2.4rem,4.4vw,3.8rem); line-height: 1.04; letter-spacing: -.01em; color: var(--navy); margin-top: .3rem; }
.purpose__lead h2 .l2 { display:block; color: var(--marsala); font-style: italic; font-weight: 500; }
.purpose__quote { border-left: 3px solid var(--gold); padding: .3rem 0 .3rem 1.4rem; }
.purpose__quote p { font-family: var(--f-serif); font-style: italic; font-size: 1.5rem; line-height: 1.35; color: var(--navy); }
.purpose__quote cite { display: block; margin-top: .8rem; font-family: var(--f-label); font-style: normal; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: var(--text-soft); }
.purpose__body { color: var(--text-soft); }
.purpose__body p + p { margin-top: 1rem; }
.purpose__body .textlink { margin-top: 1.4rem; }

/* ============================================================
   "Preparando jovens" — 3 cartões marsala + foto
   ============================================================ */
.prepare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.prepare__cards { display: grid; gap: 1.1rem; }
.qcard {
  background: var(--marsala); color: #fff; border-radius: var(--r-md); padding: 1.5rem 1.6rem;
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  box-shadow: var(--sh-2); position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.qcard::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--gold); }
.qcard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.qcard__ico { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.12); display: grid; place-items: center; color: var(--gold-300); }
.qcard__ico svg { width: 24px; height: 24px; }
.qcard h3 { color: #fff; font-size: 1.16rem; }
.qcard p { margin-top: .4rem; color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.55; }
.qcard--slim { align-items: center; padding-top: 1.15rem; padding-bottom: 1.15rem; }
.qcard--slim h3 { font-size: 1.28rem; letter-spacing: -.01em; }

/* ============================================================
   SEGMENTOS (3 cartões coloridos)
   ============================================================ */
.segments__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin-top: 3rem; }
.segment {
  position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 430px;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff; isolation: isolate;
  box-shadow: var(--sh-2);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.segment:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.segment__bg { position: absolute; inset: 0; z-index: -2; }
.segment--fund .segment__bg { background: linear-gradient(160deg, rgba(20,66,78,.72), rgba(12,44,52,.92)); }
.segment--medio .segment__bg { background: linear-gradient(160deg, rgba(120,20,20,.7), rgba(79,13,13,.92)); }
.segment--pre .segment__bg { background: linear-gradient(160deg, rgba(20,60,120,.72), rgba(14,43,87,.94)); }
.segment__ptn {
  position: absolute; inset: 0; z-index: -1; opacity: .24;
  /* Cruzes só em duas faixas — topo (acima dos alunos) e base (área do texto).
     A região central (35–68%) fica totalmente limpa — é onde os rostos ficam. */
  -webkit-mask: linear-gradient(to bottom,
    #000 0%, #000 22%,
    transparent 35%, transparent 68%,
    #000 82%, #000 100%);
          mask: linear-gradient(to bottom,
    #000 0%, #000 22%,
    transparent 35%, transparent 68%,
    #000 82%, #000 100%);
}
.segment__top { position: absolute; top: 1.3rem; left: 1.4rem; right: 1.4rem; display: flex; justify-content: space-between; align-items: flex-start; }
.segment__num { font-family: var(--f-display); font-weight: 800; font-size: 2.4rem; color: rgba(255,255,255,.22); line-height: 1; }
.segment__ico { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.14); backdrop-filter: blur(4px); display: grid; place-items: center; color: var(--gold-300); }
.segment__ico svg { width: 27px; height: 27px; }
.segment__body { position: relative; padding: 1.6rem 1.5rem 1.7rem; background: linear-gradient(to top, rgba(6,16,36,.86) 0%, rgba(6,16,36,.5) 60%, transparent 100%); }
.segment__kicker { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--gold-300); font-weight: 700; }
.segment h3 { color: #fff; font-size: 1.5rem; margin-top: .3rem; }
.segment p { margin-top: .55rem; color: rgba(255,255,255,.82); font-size: .98rem; line-height: 1.5; }
.segment .textlink { margin-top: 1.1rem; color: var(--gold-300); }

/* ============================================================
   PILARES (navy)
   ============================================================ */
.pillars { background: var(--navy); color: var(--text-on-navy); position: relative; overflow: hidden; }
.pillars::after { content:""; position:absolute; inset:0; background: radial-gradient(80% 60% at 100% 0%, rgba(240,180,40,.1), transparent 55%); pointer-events:none; }
.pillars__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; margin-top: 3rem; }
.pillar {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--line-navy); border-radius: var(--r-md); padding: 1.7rem 1.5rem 1.8rem;
  transition: transform var(--dur) var(--ease-out), background var(--dur), border-color var(--dur);
}
.pillar:hover { transform: translateY(-5px); background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05)); border-color: rgba(240,180,40,.4); }
.pillar__ico { width: 54px; height: 54px; border-radius: 14px; background: rgba(240,180,40,.14); color: var(--gold-300); display: grid; place-items: center; margin-bottom: 1.1rem; }
.pillar__ico svg { width: 28px; height: 28px; }
.pillar h3 { color: #fff; font-size: 1.2rem; }
.pillar p { margin-top: .55rem; color: var(--text-on-navy-soft); font-size: .98rem; line-height: 1.55; }
.pillars .btn-row { margin-top: 2.6rem; display: flex; justify-content: center; }

/* ============================================================
   MÉTODO (SAS) — split + stats
   ============================================================ */
.method__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.method__media { position: relative; }
.method__frame { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5/4.5; box-shadow: var(--sh-3); border: 1px solid var(--line); }
.method__badge {
  position: absolute; right: -12px; top: -14px; background: var(--gold); color: var(--navy);
  font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem;
  padding: .7em 1em; border-radius: 10px; box-shadow: var(--sh-2); line-height: 1.1; text-align: center;
}
.method__topics { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.8rem; }
.mtopic { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; border: 1px solid var(--line); border-radius: var(--r-md); padding: .9rem 1rem; background: var(--surface); }
.mtopic__ico { width: 40px; height: 40px; border-radius: 11px; background: rgba(20,60,120,.08); color: var(--navy); display: grid; place-items: center; }
.mtopic__ico svg { width: 21px; height: 21px; }
.mtopic b { display: block; color: var(--navy); font-family: var(--f-display); font-weight: 700; font-size: 1rem; line-height: 1.1; }
.mtopic span { display: block; color: var(--text-soft); font-size: .82rem; margin-top: .15rem; }

.method__results { margin-top: 1.9rem; }
.method__results-label { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--f-label); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 700; color: var(--marsala); }
.method__results-label::before { content: ""; width: 24px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--marsala) 0 55%, var(--gold) 55% 100%); }
.method__results .method__stats { margin: .9rem 0 0; }
.method__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.stat { border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.3rem 1.4rem; background: var(--surface); }
.stat__num { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem,3vw,2.7rem); color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.stat__num .u { color: var(--gold-600); }
.stat__label { margin-top: .5rem; font-size: .96rem; color: var(--text-soft); line-height: 1.4; }
.method__note { font-size: .82rem; color: var(--text-soft); font-style: italic; margin-top: .2rem; }

/* Faixa "estrutura pedagógica" — chips */
.edustrip { background: var(--cream); border-block: 1px solid var(--line); }
.edustrip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.4rem; padding-block: 2rem; }
.edustrip__lead { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 700; color: var(--text-soft); }
.efeat { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-display); font-weight: 700; color: var(--navy); font-size: 1rem; }
.efeat svg { width: 22px; height: 22px; color: var(--marsala); }

/* ============================================================
   ACOMPANHAMENTO (Cultura do Cuidado em ação)
   ============================================================ */
.care__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; margin-top: 3rem; }
.care-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.6rem 1.5rem; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease); }
.care-card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.care-card__n { font-family: var(--f-label); font-weight: 700; color: var(--gold-600); letter-spacing: .1em; font-size: .8rem; }
.care-card__ico { width: 50px; height: 50px; border-radius: 13px; background: var(--cream); color: var(--marsala); display: grid; place-items: center; margin: .5rem 0 1rem; }
.care-card__ico svg { width: 26px; height: 26px; }
.care-card h3 { font-size: 1.12rem; }
.care-card p { margin-top: .5rem; color: var(--text-soft); font-size: .96rem; line-height: 1.5; }
.care__grid--slim .care-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; padding: 1.5rem 1.2rem; }
.care__grid--slim .care-card__ico { margin: 0; }
.care__grid--slim .care-card h3 { font-size: 1.08rem; }

/* Banda "Cultura do Cuidado" — declaração */
.creed { background: linear-gradient(155deg, var(--petrol), #0b2731); color: #fff; text-align: center; position: relative; overflow: hidden; }
.creed::before { content:""; position:absolute; inset:0; background: url("../assets/img/brasao-branco.png") center/min(30%,320px) no-repeat; opacity: .06; }
.creed__inner { position: relative; max-width: 52rem; margin-inline: auto; }
.creed h2 { color: #fff; font-family: var(--f-serif); font-weight: 700; font-size: clamp(1.9rem,3.4vw,2.8rem); }
.creed p { margin-top: 1.2rem; font-family: var(--f-serif); font-style: italic; font-size: clamp(1.2rem,1.8vw,1.5rem); color: rgba(255,255,255,.9); line-height: 1.5; }
.creed .words { margin-top: 1.8rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .7rem; }
.creed .words span { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--gold-300); padding: .5em .9em; border: 1px solid rgba(240,180,40,.35); border-radius: 999px; }

/* ============================================================
   RAÍZES (história) + stats "onde chegamos"
   ============================================================ */
.roots__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.roots__media { position: relative; }
.roots__frame { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/4.4; box-shadow: var(--sh-3); border: 1px solid var(--line); }
.roots__year { position: absolute; left: 1rem; top: 1rem; background: var(--gold); color: var(--navy); font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; padding: .5em .8em; border-radius: 9px; box-shadow: var(--sh-2); }
.roots__body p { color: var(--text-soft); }
.roots__body p + p { margin-top: 1rem; }
.roots__body .last { color: var(--navy); font-family: var(--f-serif); font-style: italic; font-size: 1.2rem; }

.milestones { margin-top: clamp(2.5rem,5vw,3.5rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; }
.milestone { padding: 2rem 1.8rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; }
.milestone + .milestone { border-left: 1px solid var(--line); }
.milestone__ico { color: var(--marsala); margin-bottom: .4rem; }
.milestone__ico svg { width: 30px; height: 30px; }
.milestone__num { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.8rem,2.6vw,2.4rem); color: var(--navy); line-height: 1; }
.milestone__label { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--text-soft); line-height: 1.35; }

/* ============================================================
   DEPOIMENTOS (carrossel)
   ============================================================ */
.testi { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-200) 100%); position: relative; overflow: hidden; }
.testi::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 15% 0%, rgba(120,20,20,.07), transparent 65%),
    radial-gradient(60% 45% at 100% 100%, rgba(240,180,40,.10), transparent 65%);
}
.testi > .container { position: relative; z-index: 1; }
.testi__viewport { overflow: hidden; margin-top: 3rem; }
.testi__track { display: flex; gap: 1.4rem; transition: transform .6s var(--ease); }
.tcard {
  flex: 0 0 calc((100% - 2.8rem)/3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.9rem 1.7rem 1.6rem; box-shadow: var(--sh-1);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease);
  box-sizing: border-box;
}
.tcard::before {
  content: "\201C"; position: absolute; top: -18px; right: 14px;
  font-family: var(--f-serif); font-size: 6rem; font-weight: 500;
  color: var(--gold); opacity: .16; line-height: 1; pointer-events: none;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease);
}
.tcard:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: rgba(240,180,40,.35); }
.tcard:hover::before { opacity: .28; transform: scale(1.06) rotate(-3deg); }
.tcard__stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 1rem; }
.tcard__stars svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 0 rgba(214,154,28,.35)); transition: transform .3s var(--ease-out); }
.tcard:hover .tcard__stars svg { transform: scale(1.08) rotate(-4deg); }
.tcard:hover .tcard__stars svg:nth-child(2) { transition-delay: .04s; transform: scale(1.08) rotate(2deg); }
.tcard:hover .tcard__stars svg:nth-child(3) { transition-delay: .08s; transform: scale(1.1) rotate(-2deg); }
.tcard:hover .tcard__stars svg:nth-child(4) { transition-delay: .12s; transform: scale(1.08) rotate(3deg); }
.tcard:hover .tcard__stars svg:nth-child(5) { transition-delay: .16s; transform: scale(1.08) rotate(-1deg); }
.tcard__quote { font-family: var(--f-serif); font-size: 1.05rem; line-height: 1.55; color: var(--ink); flex: 1; position: relative; z-index: 1; }
.tcard__foot { margin-top: 1.3rem; display: flex; align-items: center; gap: .8rem; }
.tcard__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 1rem; flex: 0 0 auto; }
.tcard__name { font-family: var(--f-display); font-weight: 800; font-size: .98rem; color: var(--navy); line-height: 1.15; }
.tcard__role { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: var(--text-soft); margin-top: .15rem; }
.testi__controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 2.2rem; }
.testi__dots { display: flex; gap: .5rem; }
.testi__dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(20,60,120,.25); transition: width var(--dur) var(--ease), background var(--dur); }
.testi__dots button.is-active { width: 26px; border-radius: 6px; background: var(--marsala); }
.tarrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--navy); box-shadow: var(--sh-1); transition: transform var(--dur) var(--ease-out), background var(--dur), color var(--dur); }
.tarrow:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.tarrow svg { width: 20px; height: 20px; }

/* ============================================================
   DIFERENCIAIS (3)
   ============================================================ */
.diff__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin-top: 3rem; }
.dcard { border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.9rem 1.7rem; background: var(--surface); position: relative; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.dcard:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.dcard__n { font-family: var(--f-serif); font-style: italic; font-size: 2rem; color: var(--gold-600); line-height: 1; }
.dcard h3 { margin-top: .6rem; font-size: 1.25rem; }
.dcard p { margin-top: .6rem; color: var(--text-soft); }

/* ============================================================
   BRASÃO (interativo)
   ============================================================ */
.crest { background: var(--navy); color: var(--text-on-navy); position: relative; overflow: hidden; }
.crest::before { content:""; position:absolute; inset:0; background: radial-gradient(70% 60% at 20% 20%, rgba(120,20,20,.4), transparent 55%); }
.crest__grid { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem,6vw,5rem); align-items: center; }
.crest__art { position: relative; display: grid; place-items: center; }
.crest__art img { width: min(78%, 340px); filter: drop-shadow(0 22px 44px rgba(0,0,0,.4)); }
.crest__halo { position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(240,180,40,.16), transparent 60%); }
.crest__list { display: grid; gap: .2rem; }
.crest__item { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1rem .6rem; border-bottom: 1px solid var(--line-navy); align-items: start; cursor: default; transition: background var(--dur); border-radius: 8px; }
.crest__item:hover { background: rgba(255,255,255,.05); }
.crest__item .k { width: 42px; height: 42px; border-radius: 11px; background: rgba(240,180,40,.14); color: var(--gold-300); display: grid; place-items: center; }
.crest__item .k svg { width: 22px; height: 22px; }
.crest__item h4 { font-family: var(--f-display); font-weight: 800; color: #fff; font-size: 1.02rem; }
.crest__item p { color: var(--text-on-navy-soft); font-size: .95rem; margin-top: .2rem; line-height: 1.45; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.finalcta { position: relative; background: linear-gradient(150deg, var(--marsala), #560d0d); color: #fff; text-align: center; overflow: hidden; }
.finalcta::before { content:""; position:absolute; inset:0; background: url("../assets/img/brasao-branco.png") center/min(34%,360px) no-repeat; opacity: .07; }
.finalcta__inner { position: relative; max-width: 46rem; margin-inline: auto; }
.finalcta h2 { color: #fff; font-size: clamp(2.1rem,4vw,3.2rem); }
.finalcta h2 .accent { color: var(--gold-300); }
.finalcta p { margin-top: 1.1rem; font-size: 1.18rem; color: rgba(255,255,255,.88); }
.finalcta .hero__actions { justify-content: center; margin-top: 2.2rem; }

/* ============================================================
   EBOOK + SORTEIO (conversão)
   ============================================================ */
.ebook { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--marsala), #560d0d); }
.ebook::before { content:""; position:absolute; inset:0; background: url("../assets/img/brasao-branco.png") right -70px bottom -50px/min(44%,440px) no-repeat; opacity:.06; pointer-events:none; }
.ebook__grid { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }

.ebook__cover { position: relative; display: flex; justify-content: center; }
.ebook__cover-wrap { position: relative; width: min(320px, 82%); transform: rotate(-2deg); transition: transform var(--dur) var(--ease-out); }
.ebook__cover:hover .ebook__cover-wrap { transform: rotate(-1deg) translateY(-4px); }
.ebook__cover-img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: var(--sh-3), 0 30px 60px rgba(0,0,0,.4); }
.ebook__ribbon { position:absolute; top:-14px; right:-10px; background:#34d399; color:#06371f; font-family: var(--f-label); font-weight:700; font-size:.72rem; letter-spacing:.03em; padding:.5em .9em; border-radius:999px; box-shadow: var(--sh-2); }

.ebook__content h2 { font-size: clamp(2rem,3.6vw,2.9rem); }
.ebook__list { list-style:none; margin: 1.6rem 0 0; display: grid; gap: 1rem; }
.ebook__list li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; color: var(--text-on-navy); font-size: 1.02rem; line-height:1.5; }
.ebook__list b { color:#fff; }
.ebook__ck { width: 40px; height:40px; border-radius:11px; background: rgba(255,255,255,.12); color: var(--gold-300); display:grid; place-items:center; }
.ebook__ck svg { width:22px; height:22px; }
.ebook__fine { color: rgba(255,255,255,.62); font-size:.86em; font-style: italic; }
.ebook .hero__actions { margin-top: 2rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy-900); color: var(--text-on-navy-soft); padding-top: clamp(3.5rem,6vw,5rem); }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line-navy); }
.footer__brand img { height: 66px; width: auto; margin-bottom: 1.2rem; }
.footer__brand p { font-family: var(--f-serif); font-style: italic; font-size: 1.05rem; color: rgba(255,255,255,.8); max-width: 20rem; }
.footer__latin { margin-top: 1.2rem; font-family: var(--f-label); text-transform: uppercase; letter-spacing: .22em; font-size: .74rem; color: var(--gold-300); }
.footer h5 { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: #fff; margin-bottom: 1.1rem; font-weight: 700; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .7rem; }
.footer ul a, .footer__contact li { font-size: .96rem; color: var(--text-on-navy-soft); display: flex; gap: .6rem; align-items: flex-start; transition: color var(--dur); }
.footer ul a:hover { color: #fff; }
.footer__contact svg { width: 18px; height: 18px; color: var(--gold-300); flex: 0 0 auto; margin-top: 3px; }
.footer__social { display: flex; gap: .7rem; margin-top: 1.3rem; }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-navy); display: grid; place-items: center; color: var(--text-on-navy-soft); transition: background var(--dur), color var(--dur), border-color var(--dur), transform var(--dur) var(--ease-out); }
.footer__social a:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); transform: translateY(-2px); }
.footer__social svg { width: 19px; height: 19px; }
.footer__map { margin-top: 3rem; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-navy); aspect-ratio: 16/4.4; }
.footer__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.3) contrast(1.05); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-block: 1.6rem; }
.footer__bottom p { font-size: .84rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .82rem; }
.footer__legal a:hover { color: #fff; }

/* Voltar ao topo */
.totop { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 50px; height: 50px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; box-shadow: var(--sh-3); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity var(--dur), transform var(--dur) var(--ease-out), background var(--dur); }
.totop.is-show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--marsala); }
.totop svg { width: 22px; height: 22px; }

/* Headline: <br> só no mobile (regra base = escondido) */
.br-m { display: none; }

/* ============================================================
   BARRA DE CTA FIXA (mobile) — sempre ao alcance do polegar
   ============================================================ */
.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.1rem calc(.95rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, var(--gold), var(--gold-600));
  color: var(--navy); font-family: var(--f-label); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; font-size: .92rem;
  box-shadow: 0 -8px 24px rgba(14,43,87,.22);
  transform: translateY(110%); transition: transform .35s var(--ease-out);
}
.mcta.is-show { transform: none; }
.mcta svg { width: 20px; height: 20px; }
.mcta__ico { font-size: 1.1rem; line-height: 1; }

/* ============================================================
   PLACEHOLDERS DE FOTO (substituir por imagens reais)
   ============================================================ */
.photo {
  width: 100%; height: 100%; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--navy), var(--navy-900));
  display: grid; place-items: center;
}
.photo::before { content:""; position:absolute; inset:0; background: url("../assets/img/brasao-branco.png") center/min(46%,180px) no-repeat; opacity: .1; }
.photo::after { content: attr(data-label); position: absolute; bottom: 12px; left: 12px; font-family: var(--f-label); text-transform: uppercase; letter-spacing: .12em; font-size: .64rem; color: rgba(255,255,255,.5); }
.photo--warm { background: linear-gradient(150deg, var(--marsala), #4f0d0d); }
.photo--petrol { background: linear-gradient(150deg, var(--petrol), #0b2731); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Foto real preenchendo um frame */
.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__frame .ph-img { object-position: center 30%; }

/* Foto de fundo nos cards de segmento (com tint da marca por cima) */
.segment__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }

/* Modal de vídeo */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 5vw; background: rgba(7,16,36,.82); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity var(--dur); }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__box { width: min(960px, 100%); aspect-ratio: 16/9; background: #000; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-navy); transform: scale(.94); transition: transform var(--dur) var(--ease-out); }
.modal.is-open .modal__box { transform: scale(1); }
.modal__box iframe { width: 100%; height: 100%; border: 0; }
.modal__close { position: absolute; top: 20px; right: 24px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
.modal__close:hover { background: rgba(255,255,255,.24); }
.modal__close svg { width: 22px; height: 22px; }

/* ============================================================
   ELEVAÇÕES — textura, arco "Casa de Maria", motion artesanal
   (gestos poucos e derivados da marca; nada decorativo gratuito)
   ============================================================ */

/* Grão de papel — craft sutil sobre tudo (não bloqueia cliques) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none;
  opacity: .038; mix-blend-mode: soft-light;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Arco "Casa de Maria" (o teto do brasão) nas fotos-herói + fio de ouro (janela de capela) */
.hero__frame { border-radius: 220px 220px 20px 20px; }
.hero__frame::before {
  content: ""; position: absolute; inset: 9px; z-index: 3; pointer-events: none;
  border: 1px solid rgba(240,180,40,.42); border-radius: 210px 210px 12px 12px;
}

/* Halo de luz "Stella Maris" atrás do brasão do hero-tag */
.hero__media::before {
  content: ""; position: absolute; z-index: 0; left: -12%; bottom: -6%;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,180,40,.22), transparent 66%);
  filter: blur(4px); pointer-events: none;
}

/* Gradiente vivo do hero — blobs de luz que derivam lentamente */
.hero__aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hb { position: absolute; border-radius: 50%; filter: blur(74px); will-change: transform; }
.hb1 { width: 42vw; height: 42vw; max-width: 640px; max-height: 640px; top: -16%; right: -6%;
  background: radial-gradient(circle, rgba(240,180,40,.42), transparent 62%); animation: heroDrift1 24s ease-in-out infinite; }
.hb2 { width: 38vw; height: 38vw; max-width: 560px; max-height: 560px; bottom: -22%; left: -12%;
  background: radial-gradient(circle, rgba(120,20,20,.5), transparent 62%); animation: heroDrift2 31s ease-in-out infinite; }
.hb3 { width: 32vw; height: 32vw; max-width: 480px; max-height: 480px; top: 26%; left: 36%;
  background: radial-gradient(circle, rgba(20,66,78,.5), transparent 62%); animation: heroDrift3 37s ease-in-out infinite; }
@keyframes heroDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5%,7%) scale(1.16); } }
@keyframes heroDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7%,-5%) scale(1.12); } }
@keyframes heroDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4%,6%) scale(1.1); } }

/* Parallax de cursor: JS aplica o transform, o CSS suaviza o movimento */
.hero__frame .ph-img { transform: scale(1.05); }         /* folga para não revelar bordas ao mover */
.hero__frame .ph-img, .hero__tag, .hero__crosses--tr { transition: transform .5s var(--ease-out); will-change: transform; }

/* Campo de cruz de Jerusalém — atmosfera quase imperceptível, mascarada (bandas navy) */
.pillars::before, .crest::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cpath fill='%23ffffff' d='M26 14h6v8h8v6h-8v8h-6v-8h-8v-6h8z'/%3E%3C/svg%3E");
  background-size: 58px;
}
.pillars::before { -webkit-mask: radial-gradient(120% 90% at 100% 0%, #000, transparent 68%); mask: radial-gradient(120% 90% at 100% 0%, #000, transparent 68%); }
.crest::after { -webkit-mask: radial-gradient(120% 90% at 0% 100%, #000, transparent 68%); mask: radial-gradient(120% 90% at 0% 100%, #000, transparent 68%); }

/* Carga do hero orquestrada (stagger) — visível por padrão se o JS falhar */
html.js .hero__content > * { opacity: 0; transform: translateY(18px); }
.hero.is-loaded .hero__content > * { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.hero.is-loaded .hero__badges { transition-delay: .04s; }
.hero.is-loaded .hero h1 { transition-delay: .12s; }
.hero.is-loaded .hero__sub { transition-delay: .22s; }
.hero.is-loaded .hero__actions { transition-delay: .32s; }
.hero.is-loaded .hero__meta { transition-delay: .40s; }

/* Filete dos eyebrows "desenha" ao revelar */
.reveal .eyebrow::before { transform: scaleX(0); transform-origin: left center; transition: transform .55s .15s var(--ease-out); }
.reveal.is-in .eyebrow::before { transform: scaleX(1); }
.reveal .center .eyebrow::before, .center.reveal .eyebrow::before { transform-origin: center; }

/* Hover dos cards — filete-ouro cresce no topo + ícone reage (artesanal, discreto) */
.pillar, .care-card, .dcard { overflow: hidden; }
.pillar::before, .care-card::before, .dcard::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--marsala) 0 55%, var(--gold) 55%);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out);
}
.pillar:hover::before, .care-card:hover::before, .dcard:hover::before { transform: scaleX(1); }
.pillar__ico, .care-card__ico { transition: transform .38s var(--ease-out), background .38s var(--ease); }
.pillar:hover .pillar__ico, .care-card:hover .care-card__ico { transform: translateY(-3px) scale(1.04); }

/* Brilho de esmalte sutil no botão dourado (fits o brasão) */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.28), transparent);
  pointer-events: none;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 560px; margin-inline: auto; width: 100%; }
  .purpose__inner, .prepare__grid, .method__grid, .roots__grid, .crest__grid { grid-template-columns: 1fr; }
  .ebook__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ebook__cover { order: -1; }
  .ebook__book { transform: rotate(-2deg); }
  .pillars__grid, .care__grid { grid-template-columns: repeat(2,1fr); }
  .segments__grid, .diff__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .segments__grid { gap: 1.2rem; }
  .tcard { flex-basis: calc((100% - 1.4rem)/2); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__brand { grid-column: 1 / -1; }
  .crest__art { order: -1; }
}

@media (max-width: 720px) {
  /* ============================================================
     MOBILE PASS — pensado para 375–430px, não desktop encolhido
     Ritmo compacto, hierarquia clara, sem elementos decorativos
     que competem com o conteúdo em tela pequena.
     ============================================================ */

  /* --- Ritmo geral: mais apertado --- */
  :root { --pad-y: clamp(2.4rem, 8vw, 3.4rem); }  /* de ~54px → ~38px */
  body { font-size: 1rem; line-height: 1.65; }
  h2 { font-size: clamp(1.65rem, 5.6vw, 2.1rem); letter-spacing: -.02em; }
  .section-head .lead { font-size: 1rem; margin-top: .8rem; }
  .eyebrow { font-size: .7rem; letter-spacing: .16em; }
  .eyebrow::before { width: 20px; }

  /* --- Nav: logo menor --- */
  .nav { padding-block: .75rem; }
  .nav__logo { height: 42px; }
  .nav.is-scrolled .nav__logo { height: 38px; }
  .nav.is-scrolled { padding-block: .5rem; }

  /* --- HERO --- */
  .hero { padding-top: clamp(5rem, 14vh, 6.5rem); padding-bottom: 2.2rem; }
  .hero__crosses--tr { display: none; }               /* decoração compete com o logo */
  .hero__glow { right: -30vw; top: -30vw; }
  .hero__badges { gap: .4rem; margin-bottom: 1rem; }
  .chip { font-size: .64rem; padding: .42em .8em; letter-spacing: .1em; }
  .hero h1 { font-size: 2.15rem; line-height: 1.06; letter-spacing: -.028em; }
  .hero__sub { font-size: 1rem; margin-top: 1rem; line-height: 1.55; }
  .hero__actions { margin-top: 1.35rem; gap: .55rem; }
  .hero__meta { margin-top: 1.2rem; font-size: .72rem; text-transform: none; letter-spacing: .01em; align-items: flex-start; line-height: 1.5; } /* confirmação ebook/sorteio: relevante no mobile */
  .hero__frame { border-radius: 130px 130px 16px 16px; }
  .hero__frame::before { border-radius: 122px 122px 10px 10px; inset: 6px; border-width: 1px; }
  .hero__tag { max-width: 15rem; padding: .55rem .8rem .6rem .7rem; bottom: 14px; left: -8px; gap: .55rem; border-radius: 12px; }
  .hero__tag .crest { width: 30px; }
  .hero__tag b { font-size: .8rem; margin-bottom: .12rem; }
  .hero__tag span { font-size: .56rem; letter-spacing: .04em; }
  .hero__wave { display: none; }                       /* onda decorativa some no mobile */
  .hero__media::before { display: none; }              /* halo de luz off no mobile */

  .nav__links { position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .4rem; background: var(--navy-900); padding: 6rem 2rem 2rem; transform: translateX(100%); transition: transform .38s var(--ease); box-shadow: var(--sh-navy); }
  .nav__links.is-open { transform: none; }
  .nav__links a { color: #fff !important; font-size: 1rem; padding-block: .7rem; width: 100%; border-bottom: 1px solid var(--line-navy); }
  .nav__links a::after { display: none; }
  .nav__links .btn { margin-top: 1rem; width: 100%; }
  .nav__cta-mobile { display: inline-flex; }
  .nav__cta { padding: .7em 1em; font-size: .74rem; margin-left: 0; }
  .nav__burger { display: inline-flex; }
  .nav__burger.is-open span { background: transparent; }
  .nav__burger.is-open span::before { transform: translateY(8px) rotate(45deg); background:#fff; }
  .nav__burger.is-open span::after { transform: translateY(-8px) rotate(-45deg); background:#fff; }
  body.nav-open { overflow: hidden; }

  /* --- Grids que colapsam --- */
  .pillars__grid, .care__grid { grid-template-columns: 1fr; gap: .9rem; margin-top: 2rem; }
  .method__topics { grid-template-columns: 1fr; gap: .7rem; margin-top: 1.5rem; }
  .method__stats { grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.4rem 0; }
  .milestones { grid-template-columns: 1fr; margin-top: 2rem; }
  .milestone + .milestone { border-left: 0; border-top: 1px solid var(--line); }
  .milestone { padding: 1.2rem 1rem; }
  .tcard { flex-basis: 100%; padding: 1.35rem 1.25rem; }
  .tcard__quote { font-size: .98rem; line-height: 1.5; }
  .hero__actions .btn, .finalcta .btn { width: 100%; }
  .qcard { grid-template-columns: auto 1fr; padding: 1.05rem 1.15rem; gap: .9rem; }
  .qcard__ico { margin-bottom: 0; width: 40px; height: 40px; }
  .qcard__ico svg { width: 20px; height: 20px; }
  .qcard h3 { font-size: 1.02rem; }
  .qcard p { font-size: .93rem; margin-top: .25rem; line-height: 1.5; }

  /* --- Cards mais compactos --- */
  .pillar { padding: 1.3rem 1.25rem 1.35rem; }
  .pillar__ico { width: 44px; height: 44px; margin-bottom: .85rem; }
  .pillar__ico svg { width: 22px; height: 22px; }
  .pillar h3 { font-size: 1.1rem; }
  .pillar p { font-size: .95rem; }
  .care-card { padding: 1.2rem 1.15rem 1.3rem; }
  .care-card__ico { width: 42px; height: 42px; margin: .4rem 0 .8rem; }
  .care-card__ico svg { width: 22px; height: 22px; }
  .care-card h3 { font-size: 1.05rem; }
  .care-card p { font-size: .93rem; }
  .dcard { padding: 1.4rem 1.3rem; }
  .dcard h3 { font-size: 1.15rem; }

  /* --- Segments menores --- */
  .segment { min-height: 340px; }
  .segments__grid { max-width: 380px; gap: 1rem; margin-top: 2rem; }
  .segment h3 { font-size: 1.35rem; }
  .segment p { font-size: .95rem; }
  .segment__top { top: 1.1rem; left: 1.15rem; right: 1.15rem; }
  .segment__num { font-size: 2rem; }
  .segment__ico { width: 44px; height: 44px; }
  .segment__ico svg { width: 22px; height: 22px; }
  .segment__body { padding: 1.3rem 1.15rem 1.35rem; }

  /* --- Purpose section: título serifado menor e proporções ajustadas --- */
  .purpose__inner { gap: 1.75rem; }
  .purpose__lead h2 { font-size: 2rem; }
  .purpose__lead .kicker { font-size: 1.1rem; }
  .purpose__quote p { font-size: 1.2rem; line-height: 1.35; }
  .purpose__quote cite { margin-top: .6rem; }
  .purpose::before { display: none; }              /* watermark do brasão off no mobile */

  /* --- Prepare (Preparando jovens) --- */
  .prepare__grid { gap: 2rem; }

  /* --- Method (SAS) --- */
  .method__grid { gap: 2rem; }
  .stat { padding: 1rem 1.1rem; }
  .stat__num { font-size: 1.7rem; }
  .stat__label { font-size: .88rem; margin-top: .35rem; }
  .method__badge { top: -10px; right: -6px; font-size: .64rem; padding: .55em .8em; }

  /* --- Faixa Estrutura Pedagógica (edustrip) --- */
  .edustrip__inner { gap: .65rem 1.4rem; padding-block: 1.3rem; }
  .edustrip__lead { display: none; }               /* rótulo "Estrutura pedagógica completa" some (as pills já falam sozinhas) */
  .efeat { font-size: .88rem; }
  .efeat svg { width: 18px; height: 18px; }

  /* --- Creed (Cultura do Cuidado) --- */
  .creed p { font-size: 1.05rem; margin-top: 1rem; }
  .creed .words { gap: .4rem .5rem; margin-top: 1.2rem; }
  .creed .words span { font-size: .68rem; padding: .4em .75em; }

  /* --- Roots (nossa história) --- */
  .roots__grid { gap: 1.5rem; }
  .roots__body .last { font-size: 1.08rem; }
  .roots__year { font-size: .85rem; padding: .35em .7em; top: .75rem; left: .75rem; }

  /* --- Testimonials mobile: cards compactos + micro-interações apropriadas --- */
  .testi__viewport { margin-top: 2rem; }
  .tcard { padding: 1.7rem 1.35rem 1.4rem; border-radius: 14px; min-height: 0; }
  .tcard::before { font-size: 4.6rem; top: -14px; right: 10px; opacity: .18; }
  .tcard__quote { font-size: 1rem; line-height: 1.5; }
  .tcard__stars { margin-bottom: .8rem; }
  .tcard__stars svg { width: 17px; height: 17px; }
  .tcard__foot { margin-top: 1.1rem; }
  .tcard__avatar { width: 40px; height: 40px; font-size: .9rem; }
  .tcard__name { font-size: .95rem; }
  /* pulso sequencial das estrelas quando o carrossel entra na tela */
  .testi__track.is-in .tcard__stars svg { animation: star-in .45s var(--ease-out) both; }
  .testi__track.is-in .tcard__stars svg:nth-child(1) { animation-delay: .10s; }
  .testi__track.is-in .tcard__stars svg:nth-child(2) { animation-delay: .17s; }
  .testi__track.is-in .tcard__stars svg:nth-child(3) { animation-delay: .24s; }
  .testi__track.is-in .tcard__stars svg:nth-child(4) { animation-delay: .31s; }
  .testi__track.is-in .tcard__stars svg:nth-child(5) { animation-delay: .38s; }
  .testi__controls { gap: .8rem; margin-top: 1.6rem; }
  .tarrow { width: 42px; height: 42px; }


  /* --- Crest interactive (símbolo) --- */
  .crest__grid { gap: 1.8rem; }
  .crest__art img { width: 55%; }
  .crest__list { gap: 0; }
  .crest__item { padding: .8rem .4rem; gap: .85rem; }
  .crest__item .k { width: 38px; height: 38px; }
  .crest__item .k svg { width: 20px; height: 20px; }
  .crest__item h4 { font-size: .98rem; }
  .crest__item p { font-size: .9rem; margin-top: .15rem; }

  /* --- Final CTA --- */
  .finalcta h2 { font-size: 1.9rem; }
  .finalcta p { font-size: 1rem; }

  /* --- Footer mobile compacto: brand + contato empilhados --- */
  .footer { padding-top: 2.5rem; }
  .footer__top { grid-template-columns: 1fr; gap: 1.75rem; padding-bottom: 1.75rem; }
  .footer__brand img { height: 48px; margin-bottom: .7rem; }
  .footer__brand p { font-size: .95rem; }
  .footer__latin { margin-top: .9rem; font-size: .68rem; letter-spacing: .18em; }
  .footer__social { margin-top: 1rem; gap: .55rem; }
  .footer__social a { width: 36px; height: 36px; }
  .footer h5 { margin-bottom: .75rem; font-size: .74rem; }
  .footer ul { gap: .55rem; }
  .footer ul a, .footer__contact li { font-size: .9rem; }
  .footer__contact { gap: .7rem; }
  .footer__map { margin-top: 1.25rem; aspect-ratio: 16/8; }
  .footer__bottom { flex-direction: column; text-align: center; padding-block: 1.2rem; gap: .55rem; }
  .footer__bottom p { font-size: .76rem; }
  .footer__legal { justify-content: center; font-size: .74rem; gap: .85rem; }
  .footer__legal a:last-child { display: none; }   /* "voltar ao topo" duplicado com o botão flutuante */

  /* --- Headline quebra em 2 linhas no mobile --- */
  .br-m { display: inline; }

  /* --- Voltar ao topo: acima da barra de CTA fixa --- */
  .totop { width: 42px; height: 42px; right: 14px; bottom: 78px; }
  .totop svg { width: 18px; height: 18px; }

  /* --- Barra de CTA fixa (sempre ao alcance do polegar) --- */
  .mcta { display: flex; }
}

/* Care (4 cards) — em 2 colunas em telas ≥400px, 1 col em muito pequenas */
@media (min-width: 400px) and (max-width: 720px) {
  .care__grid { grid-template-columns: 1fr 1fr; }
}

/* Animação de contagem — respeita reduced motion via JS */
.counting { font-variant-numeric: tabular-nums; }