/* ===========================================================================
   COLÉGIO ARTE E VIDA — folha de estilo
   ---------------------------------------------------------------------------
   Identidade: amarelo da marca como protagonista em acentos e formas
   orgânicas, azul-índigo como voz institucional, muito branco e respiro.
   Tipografia: Newsreader (serifada, títulos) + Plus Jakarta Sans (texto/UI).

   Sumário
    1. Fontes e tokens
    2. Reset e base
    3. Tipografia e utilitários
    4. Formas orgânicas (blobs, arcos, divisores)
    5. Botões e chips
    6. Faixa rolante (fitinha)
    7. Cabeçalho e navegação
    8. Hero
    8b. Hero — variação de fundo amarelo (/hero-amarela/)
    9. Blocos de conteúdo (split, cards, grades)
   10. Carrossel das etapas
   11. Carrossel de espaços
   12. Depoimentos
   13. FAQ
   14. Chamada final
   15. Rodapé
   16. Flutuantes (WhatsApp)
   17. Movimento (entradas scrubadas, barra custom, seleção)
   18. Responsivo
   =========================================================================== */

/* ---------- 1. Fontes e tokens ---------- */
@import url('../fontes/fontes.css');

:root {
  /* marca */
  --amarelo: #ffc100;
  --amarelo-vivo: #fff100;
  --amarelo-suave: #ffe9a8;
  --creme: #fff8e3;
  --indigo: #393f98;
  --indigo-claro: #0181dd;
  --laranja: #f66a2e;

  /* Cor de cada segmento. São as quatro cores que a marca já tinha, postas em
     ordem de idade: quente no berçário, fria no 9º ano.
       --seg-X        a cor da marca do segmento, para acentos finos
       --seg-X-forte  a versão que aguenta texto por cima
       --seg-X-sobre  a cor do texto em cima da forte
       --seg-X-tinta  o fundo claro (gradiente da page-hero, fundo de seção)
     O azul da marca (#0181dd) escurece para #0b6ab4 quando vira fundo de texto:
     branco sobre #0181dd dá 4,05:1 e reprova no AA; sobre #0b6ab4 dá 5,6:1. */
  --seg-bercario: #f66a2e;  --seg-bercario-forte: #f66a2e;  --seg-bercario-sobre: #1b1f4b;  --seg-bercario-tinta: #fff1e8;
  --seg-infantil: #ffc100;  --seg-infantil-forte: #ffc100;  --seg-infantil-sobre: #1b1f4b;  --seg-infantil-tinta: #fff6dc;
  --seg-fund1:    #0181dd;  --seg-fund1-forte:    #0b6ab4;  --seg-fund1-sobre:    #ffffff;  --seg-fund1-tinta:    #e9f4fd;
  --seg-fund2:    #393f98;  --seg-fund2-forte:    #393f98;  --seg-fund2-sobre:    #ffffff;  --seg-fund2-tinta:    #eceefa;

  /* neutros derivados da marca */
  --tinta: #1b1f4b;
  --tinta-media: #4b5178;
  --tinta-suave: #6e738f;
  --linha: #e9e7f2;
  --papel: #ffffff;
  --papel-quente: #fbf9f4;
  --papel-indigo: #f4f5fb;

  /* medidas */
  --raio-s: 10px;
  --raio: 18px;
  --raio-g: 28px;
  --raio-organico: 56px 18px 56px 18px;
  --sombra-s: 0 2px 10px rgba(27, 31, 75, .06);
  --sombra: 0 10px 34px rgba(27, 31, 75, .09);
  --sombra-g: 0 26px 70px rgba(27, 31, 75, .14);
  --largura: 1200px;
  --largura-texto: 760px;
  --cabecalho: 84px;
  --respiro: clamp(64px, 9vw, 128px);

  /* animação */
  --mola: cubic-bezier(.2, .7, .2, 1);
  --saida-cubica: cubic-bezier(.215, .61, .355, 1);
  --saida-quad: cubic-bezier(.25, .46, .45, .94);
}

/* ---------- 2. Reset e base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;               /* clip, não hidden: não quebra o sticky */
  scroll-behavior: auto;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--papel);
  color: var(--tinta-media);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--indigo-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--indigo); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.pular-para-conteudo:focus { left: 0; }

/* ---------- 3. Tipografia e utilitários ---------- */
h1, h2, h3, h4 {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  color: var(--tinta);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
h4 { font-size: 1.1rem; font-weight: 600; }

h1 em, h2 em, h3 em { font-style: italic; color: var(--indigo); }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--tinta); font-weight: 600; }

.envoltorio { position: relative; width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: 24px; }
.envoltorio--estreito { max-width: 900px; }

.secao { position: relative; padding-block: var(--respiro); }
/* Duas seções de fundo branco em sequência somam dois respiros — até 256px —
   e abrem um vão que parece erro, porque não há troca de cor para justificar.
   A de cima abre mão do respiro de baixo. */
.secao--emenda { padding-bottom: 0; }
.secao--creme { background: var(--papel-quente); }
.secao--indigo-claro { background: var(--papel-indigo); }
/* 9) O cliente pediu amarelo no lugar do #f4f5fb em /nossa-historia/. Em cima
   do #f6ca29 o título dá 9,9:1 e o texto de apoio 6,4:1. */
/* Dois amarelos de seção, porque o cliente pediu cada um no seu lugar:
   #f6ca29 em /nossa-historia/ e o amarelo da marca em /programa-art-mais/.
   As regras de texto valem para os dois — em cima de qualquer um deles o
   título dá mais de 9:1 e o texto de apoio mais de 6:1. */
.secao--amarela { background: #f6ca29; }
.secao--amarelo-marca { background: var(--amarelo); }
.secao--amarela h2, .secao--amarela h3,
.secao--amarelo-marca h2, .secao--amarelo-marca h3 { color: var(--tinta); }
.secao--amarela p,
.secao--amarelo-marca p { color: #3a3f6b; }
.secao--amarela .chapeu,
.secao--amarelo-marca .chapeu { color: var(--indigo); }
.secao--amarela .chapeu::before,
.secao--amarelo-marca .chapeu::before { background: var(--indigo); }
.secao--apertada { padding-block: clamp(48px, 6vw, 80px); }

.chapeu {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--indigo); margin-bottom: 1rem;
}
.chapeu::before {
  content: ''; width: 22px; height: 3px; border-radius: 2px;
  background: var(--amarelo);
}

.cabeca-secao { max-width: var(--largura-texto); margin-bottom: clamp(40px, 5vw, 64px); }
.cabeca-secao--centro { margin-inline: auto; text-align: center; }
.cabeca-secao--centro .chapeu { justify-content: center; }
.cabeca-secao p { font-size: 1.1rem; color: var(--tinta-suave); }

.texto-grande { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--tinta-suave); }
.centro { text-align: center; }

/* Cada página de segmento recebe .segmento--<slug> no <main> (gerado pelo
   subpaginas.mjs). Tudo que é colorido por segmento lê estas quatro
   variáveis, nunca a cor direta — assim um segmento novo é uma linha só. */
.segmento              { --cor-seg: var(--amarelo); --cor-seg-forte: var(--amarelo); --cor-seg-sobre: var(--tinta); --cor-seg-tinta: var(--creme); }
.segmento--bercario    { --cor-seg: var(--seg-bercario); --cor-seg-forte: var(--seg-bercario-forte); --cor-seg-sobre: var(--seg-bercario-sobre); --cor-seg-tinta: var(--seg-bercario-tinta); }
.segmento--infantil    { --cor-seg: var(--seg-infantil); --cor-seg-forte: var(--seg-infantil-forte); --cor-seg-sobre: var(--seg-infantil-sobre); --cor-seg-tinta: var(--seg-infantil-tinta); }
.segmento--fund1       { --cor-seg: var(--seg-fund1);    --cor-seg-forte: var(--seg-fund1-forte);    --cor-seg-sobre: var(--seg-fund1-sobre);    --cor-seg-tinta: var(--seg-fund1-tinta); }
.segmento--fund2       { --cor-seg: var(--seg-fund2);    --cor-seg-forte: var(--seg-fund2-forte);    --cor-seg-sobre: var(--seg-fund2-sobre);    --cor-seg-tinta: var(--seg-fund2-tinta); }

/* ---------- 4. Formas orgânicas ---------- */
.blob {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 48% 52% 42% 58% / 54% 44% 56% 46%;
  filter: blur(2px); opacity: .5;
}
.blob--amarelo { background: radial-gradient(circle at 35% 35%, var(--amarelo-suave), transparent 68%); }
.blob--indigo { background: radial-gradient(circle at 60% 40%, rgba(57, 63, 152, .18), transparent 68%); }

.moldura-organica {
  border-radius: var(--raio-organico);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.moldura-organica--espelho { border-radius: 18px 56px 18px 56px; }

/* risco de marca-texto atrás de uma palavra */
.realce {
  position: relative;
  display: inline-block;
  z-index: 0;
  font-style: italic;
  color: var(--tinta);
}
/* a tarja fica rente à base das letras, como marca-texto, sem cobrir o miolo */
.realce::after {
  content: '';
  position: absolute; left: -.1em; right: -.1em; bottom: -.02em; height: .26em;
  background: var(--amarelo); border-radius: 3px;
  z-index: -1; opacity: .9;
}

/* ---------- 5. Botões e chips ----------
   O hover é um círculo que preenche o botão a partir do centro: o ::before
   começa em scale(0) e cresce até cobrir tudo, enquanto a cor do texto muda.
   Cada variante só declara --preenchimento e a cor do texto no hover. */
.botao {
  --preenchimento: var(--indigo);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 1em 1.9em;
  border: 2px solid transparent; border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .96rem; font-weight: 700; letter-spacing: .01em;
  cursor: pointer; text-decoration: none !important;
  transition: color .45s var(--saida-cubica), border-color .45s var(--saida-cubica),
              box-shadow .3s, transform .3s var(--saida-cubica);
}
.botao::before {
  content: '';
  position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: var(--preenchimento);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .55s var(--saida-cubica);
}
.botao:hover::before, .botao:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
.botao:hover { transform: translateY(-2px); }
.botao svg { width: 19px; height: 19px; flex: none; fill: currentColor; }

.botao--principal {
  --preenchimento: var(--indigo);
  background: var(--amarelo); color: var(--tinta);
  box-shadow: 0 8px 24px rgba(255, 193, 0, .4);
}
.botao--principal:hover, .botao--principal:focus-visible { color: #fff; box-shadow: 0 12px 30px rgba(255, 193, 0, .52); }

.botao--indigo {
  --preenchimento: var(--amarelo);
  background: var(--indigo); color: #fff;
}
.botao--indigo:hover, .botao--indigo:focus-visible { color: var(--tinta); }

.botao--contorno {
  --preenchimento: var(--indigo);
  border-color: var(--linha); color: var(--tinta); background: #fff;
}
.botao--contorno:hover, .botao--contorno:focus-visible { color: #fff; border-color: var(--indigo); }

.botao--claro {
  --preenchimento: var(--indigo);
  background: #fff; color: var(--tinta);
}
.botao--claro:hover, .botao--claro:focus-visible { color: #fff; }

/* para usar sobre fundo escuro: vazado, preenche de branco no hover */
.botao--fantasma {
  --preenchimento: #fff;
  background: transparent; color: #fff;
  border-color: rgb(255 255 255 / .45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.botao--fantasma:hover, .botao--fantasma:focus-visible { color: var(--tinta); border-color: #fff; }

/* brilho que atravessa o botão de tempos em tempos */
.botao--principal::after, .zap::after {
  content: '';
  position: absolute; z-index: -1; top: 0; left: 0;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .72) 50%, transparent 100%);
  transform: translateX(-200%) skewX(-18deg);
  animation: brilho-passa 4.6s ease-in-out infinite;
  pointer-events: none;
}
.zap { isolation: isolate; overflow: hidden; }
/* no hover o círculo já cobre o botão, então o brilho sai de cena */
.botao--principal:hover::after { opacity: 0; }

@keyframes brilho-passa {
  0%, 64% { transform: translateX(-200%) skewX(-18deg); }
  100%    { transform: translateX(360%) skewX(-18deg); }
}

.chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5em 1.05em; border-radius: 999px;
  background: #fff; border: 1px solid var(--linha);
  font-size: .85rem; font-weight: 600; color: var(--tinta);
  box-shadow: var(--sombra-s);
}
.chip__ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--amarelo); flex: none; }
.chip__ponto--indigo { background: var(--indigo-claro); }
.chip__ponto--laranja { background: var(--laranja); }

/* ---------- 6. Faixa rolante (fitinha) ---------- */
.fitinha {
  position: relative; z-index: 3;
  /* amarelo com texto índigo: 5,8:1, passa no AA mesmo em texto pequeno */
  background: var(--amarelo); color: var(--indigo);
  overflow: hidden;
  padding-block: 11px;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.fitinha__trilho {
  display: flex; width: max-content;
  animation: fitinha-corre 36s linear infinite;
}
.fitinha__grupo { display: flex; align-items: center; flex: none; }
.fitinha__item { display: inline-flex; align-items: center; white-space: nowrap; padding-inline: 26px; }
.fitinha__item::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--indigo); margin-left: 26px;
}
.fitinha:hover .fitinha__trilho { animation-play-state: paused; }
@keyframes fitinha-corre { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------- 7. Cabeçalho e navegação ---------- */
.cabecalho {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.cabecalho.esta-grudado { border-bottom-color: var(--linha); box-shadow: var(--sombra-s); }
.cabecalho__interno { display: flex; align-items: center; gap: 20px; min-height: var(--cabecalho); }
.cabecalho__marca { flex: none; }
.cabecalho__marca img { height: 52px; width: auto; }
.cabecalho__espaco { flex: 1; }

.menu__lista { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu__item { position: relative; }
.menu__link {
  display: flex; align-items: center; gap: .45em;
  padding: .62em .82em; border-radius: 10px;
  font-size: .89rem; font-weight: 600; color: var(--tinta); white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.menu__link:hover, .menu__link[aria-expanded="true"] { background: var(--papel-indigo); color: var(--indigo); text-decoration: none; }
.menu__item--tem-sub > .menu__link::after {
  content: ''; width: .38em; height: .38em; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s;
}
.menu__item--tem-sub:hover > .menu__link::after { transform: rotate(225deg) translate(-2px, -2px); }

.menu__sub {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 268px;
  list-style: none; margin: 0; padding: 8px;
  background: #fff; border: 1px solid var(--linha); border-radius: 16px;
  box-shadow: var(--sombra-g);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.menu__item--tem-sub:hover .menu__sub,
.menu__item--tem-sub:focus-within .menu__sub { opacity: 1; visibility: visible; transform: none; }
.menu__sub a {
  display: block; padding: .62em .85em; border-radius: 10px;
  font-size: .87rem; font-weight: 600; color: var(--tinta);
}
.menu__sub a:hover { background: var(--papel-quente); color: var(--indigo); text-decoration: none; }
.menu__sub small { display: block; font-weight: 400; font-size: .76rem; color: var(--tinta-suave); margin-top: 1px; }

.cabecalho .botao { padding: .76em 1.4em; font-size: .88rem; }
.menu__rodape { display: none; }   /* só aparece na gaveta mobile */

.hamburguer {
  display: none; width: 46px; height: 46px; flex: none;
  border: 1px solid var(--linha); background: #fff; border-radius: 12px;
  cursor: pointer; padding: 0; place-items: center;
}
.hamburguer span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--tinta); margin: 4px auto; transition: transform .22s, opacity .22s; }
.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 8. Hero ----------
   A hero tem imagem de fundo com um véu escuro por cima, e todo o conteúdo
   em tons claros. Para trocar a arte, mexa só nestas três variáveis:

     --hero-imagem    o arquivo (fica em /assets/img/hero/)
     --hero-veu       0 a 1 — quanto o véu escurece a foto
     --hero-desfoque  0px se a imagem já vier desfocada

   O --hero-base é a cor que aparece antes da foto carregar e por baixo dela,
   então o texto claro nunca fica sem contraste. */
.hero {
  --hero-imagem: url('/assets/img/hero/fachada.webp');
  /* A fachada é nítida e cheia de letreiro. Com o véu antigo (.68, sem
     desfoque) o nome da escola pintado no muro brigava com o h1 logo em
     cima. 2px de desfoque e um véu um pouco mais fechado deixam o prédio
     reconhecível sem disputar a leitura. */
  --hero-veu: .74;
  --hero-desfoque: 2px;
  --hero-base: #141733;

  position: relative;
  background: var(--hero-base);
  overflow: hidden;              /* segura os recortes na base da seção */
  padding-top: clamp(40px, 5vw, 72px);
  color: #e9ebf7;
}

.hero__fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__fundo::before,
.hero__fundo::after { content: ''; position: absolute; }
/* a foto sangra além da caixa para o desfoque não deixar borda transparente */
.hero__fundo::before {
  inset: calc(var(--hero-desfoque) * -2.5);
  background: var(--hero-imagem) center / cover no-repeat;
  filter: blur(var(--hero-desfoque));
}
/* véu: mais fechado em cima e embaixo, onde ficam título e recortes */
.hero__fundo::after {
  inset: 0;
  background:
    linear-gradient(180deg,
      rgb(20 23 51 / calc(var(--hero-veu) + .08)) 0%,
      rgb(20 23 51 / var(--hero-veu)) 42%,
      rgb(20 23 51 / calc(var(--hero-veu) + .14)) 100%),
    linear-gradient(90deg,
      rgb(20 23 51 / .52) 0%,
      rgb(20 23 51 / .34) 38%,
      rgb(20 23 51 / .16) 62%,
      rgb(20 23 51 / 0) 84%);
}

.hero__interno {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: end;
  min-height: min(76vh, 680px);
}
.hero__texto { padding-bottom: clamp(56px, 7vw, 96px); }
.hero__titulo { color: #fff; margin-bottom: .35em; text-shadow: 0 2px 24px rgb(20 23 51 / .4); }
.hero__titulo em { color: var(--amarelo); }
.hero .chapeu { color: var(--amarelo); }
.hero .chapeu::before { background: var(--amarelo); }
.hero__sub {
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  color: #e4e8f5; max-width: 46ch;
  text-shadow: 0 1px 16px rgb(20 23 51 / .5);
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2.2rem; }

/* palco dos alunos recortados */
.hero__palco {
  position: relative;
  align-self: stretch;
  min-height: 420px;
}
.hero__aluno {
  position: absolute;
  /* -1px de sangria: com a seção em overflow:hidden, o recorte sempre é
     cortado por dentro. Nunca sobra a linha de corte da base à mostra,
     nem com arredondamento sub-pixel em zoom ou em telas fracionárias. */
  bottom: -1px;
  transform-origin: 50% 100%;     /* o parallax escala/gira a partir do chão */
  will-change: transform;
  /* o transform não entra na transição: quem suaviza é o laço do main.js,
     que soma o balanço ocioso ao movimento do mouse quadro a quadro */
  transition: filter .4s var(--mola);
}
.hero__aluno img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 22px 28px rgba(27, 31, 75, .22));
}
/* UM RECORTE SÓ, centrado no palco.

   O recorte é enquadrado do quadril para cima, então ocupa muito mais quadro
   que um corpo inteiro na mesma largura — por isso a medida é generosa.

   A largura é escrita como "altura × proporção do arquivo" (900÷854). O termo
   em vh é a trava de altura: sem ela, numa tela baixa o recorte passaria do topo
   da seção (que é overflow:hidden) e a cabeça apareceria cortada. O teto de
   409px é o que o segura em telas altas, onde a seção para de crescer — a
   altura dela trava em min(76vh, 680px) + o padding do topo.
   TROCOU A IMAGEM? Troque junto o número da proporção (largura ÷ altura).

   O centro vem do left, nunca do transform: o laço do main.js reescreve o
   transform quadro a quadro para o balanço e o parallax, e um translateX(-50%)
   ali seria apagado no primeiro frame.

   (Até 03/11 a hero tinha três recortes espalhados em arranjo de foto de turma,
   com variáveis de avanço para a calha da página. O cliente escolheu um só; o
   arranjo antigo está descrito no LEIA-ME.) */
.hero__aluno--c {                                      /* 30 anos: 900×854 */
  --larg: min(560px, calc(58vh * 1.0539));
  width: var(--larg);
  left: calc((100% - var(--larg)) / 2);
  z-index: 2;
}

/* sombra de contato: disfarça a linha de corte da base */
.hero__chao {
  position: absolute; left: 50%; bottom: -6px;
  width: 86%; height: 44px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(27, 31, 75, .26) 0%, transparent 70%);
  filter: blur(10px);
  z-index: 0;
}
.hero__halo {
  position: absolute; left: 50%; bottom: 4%;
  width: 92%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 193, 0, .45) 0%, transparent 62%);
  filter: blur(42px); z-index: 0;
}

/* sobre o fundo escuro os blobs viram brilhos quentes */
.hero .blob { opacity: .55; mix-blend-mode: screen; }
.hero .blob--a {
  width: 520px; height: 520px; top: -140px; right: -120px;
  background: radial-gradient(circle at 40% 40%, rgb(255 193 0 / .5), transparent 66%);
}
.hero .blob--b {
  width: 380px; height: 380px; bottom: -120px; left: -140px;
  background: radial-gradient(circle at 55% 45%, rgb(1 129 221 / .45), transparent 68%);
}

/* seta de "role para ver mais", com o chevron pulsando */
.hero__seta {
  position: absolute; z-index: 4;
  left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(255 255 255 / .14); color: #fff;
  border: 1px solid rgb(255 255 255 / .34);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color .3s, color .3s, border-color .3s;
}
.hero__seta:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.hero__seta svg {
  width: 21px; height: 21px;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  animation: seta-pula 2.2s var(--saida-quad) infinite;
}
@keyframes seta-pula {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(4px); }
}

/* ---------- 8b. Hero — variação de fundo amarelo ----------
   Usada em /hero-amarela/ (página de comparação). A estrutura é a mesma da
   hero da home: o que muda são as cores e o número de recortes (um só).

   A regra de ouro aqui é a inversão de papel do amarelo. Na hero escura ele
   é o acento — chapéu, ênfase do título, botão principal. Virando fundo, ele
   não pode mais ser acento nenhum: tudo que era amarelo passa a índigo, e o
   índigo, que no site é a voz institucional, vira o contraste. Medido sobre o
   #ffc820 do campo: título 10,1:1, ênfase e chapéu 5,8:1, texto de apoio
   7,0:1 (4,8:1 no pior pixel da foto, sob o véu) — todos acima do mínimo de 4,5:1.

   Os seletores são todos .hero--amarela + algo (0,2,0), então passam na frente
   das regras de .hero (0,1,0) mesmo as que vierem depois, dentro de media
   query. Onde a especificidade empata (.hero .blob), vale a ordem: por isso
   este bloco mora logo depois da seção 8. */
.hero--amarela {
  /* o campo: amarelo claro no alto à esquerda, fechando em âmbar no rodapé.
     Não é chapado de propósito — um #ffc100 plano de 700px de altura achata
     a seção e faz a foto de qualquer secção seguinte parecer descolada. */
  --hero-base: #ffc100;
  background: radial-gradient(120% 95% at 14% -12%,
                #ffdd6b 0%, #ffc820 44%, #ffb400 78%, #f2a600 100%);
  color: #353a66;
  /* fecha o grupo de mistura na própria seção: o duotone da foto (abaixo) usa
     mix-blend-mode, e sem isto ele misturaria contra o que estiver pintado na
     raiz da página. O fundo da própria .hero--amarela continua dentro do grupo,
     que é justamente a cor com que a foto precisa se misturar. */
  isolation: isolate;
}

/* A mesma foto da escola da hero azul, mas em duotone amarelo: o
   mix-blend-mode: luminosity pega só a luz da foto e mantém o tom do campo
   que está atrás. Um véu cinza por cima deixaria a foto suja; assim ela some
   dentro do amarelo e vira relevo.

   O z-index: auto não é decoração. .hero__fundo tem position + z-index: 0, e
   isso cria contexto de empilhamento — dentro dele o ::before mistura contra
   o próprio .hero__fundo, que é transparente, e o blend não dá em nada. Com
   z-index: auto a mistura alcança o fundo da seção, que é o amarelo. A ordem
   de pintura continua igual: o conteúdo tem z-index 2. */
.hero--amarela .hero__fundo { z-index: auto; }
.hero--amarela .hero__fundo::before {
  background: var(--hero-imagem) center / cover no-repeat;
  mix-blend-mode: luminosity;
  opacity: .4;
  filter: none;
}
/* Véu por cima da foto. Ele é mais fechado à esquerda, onde fica o texto, e
   abre para a direita, onde a foto ajuda a dar profundidade atrás do recorte.
   Os pontinhos brancos dão a textura de material escolar. */
.hero--amarela .hero__fundo::after {
  background:
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / .42) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(90deg,
      rgb(255 198 25 / .84) 0%,
      rgb(255 198 25 / .68) 40%,
      rgb(255 193 0 / .26) 66%,
      rgb(255 193 0 / 0) 88%),
    linear-gradient(180deg, rgb(255 222 110 / .34) 0%, rgb(255 193 0 / 0) 30%, rgb(176 112 0 / .16) 100%);
}

/* texto: o que era claro sobre escuro vira escuro sobre claro */
.hero--amarela .hero__titulo { color: var(--tinta); text-shadow: none; }
.hero--amarela .hero__titulo em { color: var(--indigo); }
.hero--amarela .hero__sub { color: #353a66; text-shadow: none; }
.hero--amarela .chapeu { color: var(--indigo); }
.hero--amarela .chapeu::before { background: var(--indigo); }

/* O botão principal é amarelo com sombra amarela: sobre o campo amarelo ele
   simplesmente desaparece. Aqui ele troca de lugar com o .botao--indigo. */
.hero--amarela .botao--principal {
  --preenchimento: var(--tinta);
  background: var(--indigo); color: #fff;
  box-shadow: 0 10px 26px rgb(27 31 75 / .26);
}
.hero--amarela .botao--principal:hover,
.hero--amarela .botao--principal:focus-visible { color: #fff; box-shadow: 0 14px 32px rgb(27 31 75 / .34); }

/* o fantasma era branco vazado (feito para fundo escuro); agora vaza em índigo */
.hero--amarela .botao--fantasma {
  --preenchimento: var(--indigo);
  background: rgb(255 255 255 / .3);
  color: var(--tinta); border-color: rgb(27 31 75 / .3);
}
.hero--amarela .botao--fantasma:hover,
.hero--amarela .botao--fantasma:focus-visible { color: #fff; border-color: var(--indigo); }

.hero--amarela .hero__seta {
  background: rgb(255 255 255 / .38); color: var(--tinta);
  border-color: rgb(27 31 75 / .22);
}
.hero--amarela .hero__seta:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* O halo era um brilho amarelo atrás do grupo — em cima do amarelo não sobra
   nada dele. Vira um disco de luz branca, que ainda ajuda a separar o uniforme
   azul do fundo. A sombra de contato e a do recorte esquentam: cinza-azulado
   sobre amarelo puxa para o esverdeado. */
.hero--amarela .hero__halo {
  background: radial-gradient(circle, rgb(255 255 255 / .62) 0%, rgb(255 255 255 / 0) 62%);
}
.hero--amarela .hero__chao {
  background: radial-gradient(ellipse at center, rgb(146 94 0 / .3) 0%, transparent 70%);
}
.hero--amarela .hero__aluno img { filter: drop-shadow(0 22px 26px rgb(146 94 0 / .28)); }

/* mix-blend-mode: screen sobre amarelo lava tudo para branco, então os blobs
   voltam a pintar normalmente: um poço de luz em cima, um toque de índigo
   embaixo para a base não ficar leve demais. */
.hero--amarela .blob { mix-blend-mode: normal; opacity: .5; }
.hero--amarela .blob--a { background: radial-gradient(circle at 42% 42%, rgb(255 255 255 / .55), transparent 66%); }
.hero--amarela .blob--b { background: radial-gradient(circle at 55% 45%, rgb(57 63 152 / .16), transparent 68%); }

/* O tamanho e o centro do recorte são os mesmos da hero da home — as duas
   têm um recorte só —, então a variação não precisa repetir isso aqui. */

@media (max-width: 1080px) {
  /* Em coluna única o texto ocupa a largura toda, então o véu lateral não
     protege mais nada: ele passa a fechar de cima para baixo, forte onde está
     o texto e aliviando no rodapé, onde só há o recorte. */
  .hero--amarela .hero__fundo::after {
    background:
      radial-gradient(circle at 1px 1px, rgb(255 255 255 / .42) 1px, transparent 0) 0 0 / 22px 22px,
      linear-gradient(180deg,
        rgb(255 206 40 / .9) 0%,
        rgb(255 198 25 / .8) 48%,
        rgb(242 166 0 / .52) 100%);
  }
}

/* ---------- 9. Blocos de conteúdo ---------- */
.dupla {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 76px); align-items: center;
}
.dupla--invertida .dupla__midia { order: 2; }
.dupla__midia { position: relative; }
.dupla__midia img { width: 100%; }

.selo-flutuante {
  position: absolute; z-index: 2;
  background: #fff; border-radius: var(--raio);
  padding: 18px 22px; box-shadow: var(--sombra-g);
  max-width: 230px;
}
.selo-flutuante--inferior { bottom: -26px; left: -26px; }
.selo-flutuante--superior { top: -26px; right: -26px; }
.selo-flutuante strong { display: block; font-family: 'Newsreader', serif; font-size: 1.5rem; color: var(--indigo); font-weight: 500; }
.selo-flutuante span { font-size: .82rem; color: var(--tinta-suave); line-height: 1.45; display: block; }

.grade { display: grid; gap: 24px; }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* duas colunas de verdade: com auto-fit, quatro cartões de 300px cabem em
   três colunas num container de 1152px e sobra um sozinho na segunda fila */
.grade--par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .grade--par { grid-template-columns: 1fr; } }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.cartao {
  position: relative;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g);
  padding: clamp(26px, 3vw, 34px);
  transition: transform .3s var(--mola), box-shadow .3s var(--mola), border-color .3s;
}
.cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: transparent; }
.cartao h3, .cartao h4 { margin-bottom: .45em; }
.cartao p { font-size: .96rem; color: var(--tinta-suave); }

.cartao__icone {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: 20px;
  /* 18) o cliente pediu o amarelo da marca em todos estes selos — os números
     dos cinco campos, os ícones da home e os de /nutricao-e-saude/. As duas
     variantes abaixo continuam existindo para não mexer no HTML, mas pintam
     igual: a variação de cor entre cartões era justamente o que incomodava. */
  background: var(--amarelo); color: var(--tinta);
}
.cartao__icone svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.cartao__icone--indigo,
.cartao__icone--amarelo { background: var(--amarelo); color: var(--tinta); }

/* ---------- 10. Carrossel das etapas ----------
   Era um empilhamento sticky; o cliente preferiu um deslize simples. Agora é
   rolagem horizontal nativa com scroll-snap: funciona com o dedo, com a roda
   do mouse, com Tab e com as setas do teclado mesmo se o JavaScript falhar.
   As setas só chamam scrollBy — não há estado de slide para manter.

   Todos os cartões têm o mesmo arranjo (foto à esquerda, texto à direita), a
   mesma largura (a da pista) e a mesma altura: a pista é flex com
   align-items: stretch e o cartão tem height: 100%. */
.carrossel { position: relative; }
.carrossel__pista {
  display: flex; gap: clamp(16px, 2vw, 28px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  align-items: stretch;
  /* espaço para a sombra do cartão não ser cortada pela rolagem */
  padding: 6px 2px 18px;
  scrollbar-width: none;
}
.carrossel__pista::-webkit-scrollbar { display: none; }
.carrossel__pista:focus-visible { outline: 3px solid var(--indigo-claro); outline-offset: 4px; border-radius: var(--raio); }
.carrossel__item { flex: 0 0 100%; scroll-snap-align: center; display: flex; }

.etapa-cartao {
  display: grid; grid-template-columns: .82fr 1fr;
  gap: clamp(22px, 3vw, 48px); align-items: center;
  width: 100%; padding: clamp(20px, 2.6vw, 38px);
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}
.etapa-cartao__foto { border-radius: var(--raio); overflow: hidden; aspect-ratio: 4 / 5; }
.etapa-cartao__foto img { width: 100%; height: 100%; object-fit: cover; }
.etapa-cartao__corpo h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.etapa-cartao__corpo .lista-check { margin: 1.2rem 0 1.6rem; }
/* Fundamental I e II com o fundo cheio na cor do segmento, a pedido do
   cliente. Fundo escuro muda tudo que está em cima: o h3 herda var(--tinta)
   da regra global e sumiria (1,4:1 sobre o índigo), o parágrafo usa
   --tinta-suave e a lista herda a cor do cartão. O selo das listas vira
   amarelo nos dois, que é o que marca a cor da escola no escuro. */
/* 3) berçário e infantil em amarelo; os dois são claros, então o texto
   continua escuro e só o fundo muda. */
.etapa-cartao--bercario { background: var(--amarelo-suave); border-color: var(--amarelo-suave); }
.etapa-cartao--infantil { background: var(--amarelo); border-color: var(--amarelo); }
.etapa-cartao--bercario p,
.etapa-cartao--infantil p { color: #3d4168; }
/* o selo de idade é amarelo: sobre o card amarelo ele desaparece, e sobre o
   amarelo-suave fica fraco. Nos dois ele vira índigo com texto branco. */
.etapa-cartao--bercario .pilha__idade,
.etapa-cartao--infantil .pilha__idade { background: var(--indigo); color: #fff; }
.etapa-cartao--fund1 { background: #393f98; border-color: #393f98; }
.etapa-cartao--fund2 { background: #272525; border-color: #272525; }
.etapa-cartao--fund1,
.etapa-cartao--fund2 {
  color: rgb(255 255 255 / .92);
  box-shadow: 0 16px 40px rgb(27 31 75 / .22);
}
.etapa-cartao--fund1 h3,
.etapa-cartao--fund2 h3 { color: #fff; }
.etapa-cartao--fund1 p,
.etapa-cartao--fund2 p { color: rgb(255 255 255 / .88); }
.etapa-cartao--fund1 .lista-check,
.etapa-cartao--fund2 .lista-check { --selo-fundo: var(--amarelo); --selo-risco: var(--tinta); }
/* o botão branco continua branco; só o preenchimento do hover muda, porque
   índigo sobre índigo não se vê */
.etapa-cartao--fund1 .botao--contorno,
.etapa-cartao--fund2 .botao--contorno { --preenchimento: var(--amarelo); border-color: transparent; }
.etapa-cartao--fund1 .botao--contorno:hover,
.etapa-cartao--fund2 .botao--contorno:hover,
.etapa-cartao--fund1 .botao--contorno:focus-visible,
.etapa-cartao--fund2 .botao--contorno:focus-visible { color: var(--tinta); border-color: var(--amarelo); }

/* setas: ficam fora do cartão no desktop e por cima dele quando não há calha */
.carrossel__seta {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--indigo);
  border: 1px solid var(--linha); box-shadow: var(--sombra);
  cursor: pointer;
  transition: background-color .25s, color .25s, opacity .25s, transform .25s var(--mola);
}
.carrossel__seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carrossel__seta:hover:not(:disabled) { background: var(--indigo); color: #fff; transform: scale(1.06); }
.carrossel__seta:disabled { opacity: .3; cursor: default; }
.carrossel__seta--esq { left: clamp(-22px, -1.6vw, -10px); }
.carrossel__seta--dir { right: clamp(-22px, -1.6vw, -10px); }
/* se tudo couber na tela, as setas somem */
.carrossel--cabe .carrossel__seta { display: none; }

/* o selo de faixa etária é usado também nas páginas de cada segmento */
.pilha__idade {
  display: inline-block; padding: .4em 1em; border-radius: 999px;
  background: var(--amarelo); color: var(--tinta);
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 1rem;
}

/* ---------- 11. Carrossel de espaços (coverflow 3D) ----------
   As fotos ficam num leque com perspectiva: a central de frente, as laterais
   girando em rotateY e recuando em translateZ. O JS escreve as transformações;
   o CSS cuida da cena, da transição e do visual. */
.espacos { overflow: hidden; }

.espacos__palco {
  position: relative;
  perspective: 1500px;
  perspective-origin: 50% 46%;
  padding-block: 10px;
  touch-action: pan-y;
}

.espacos__pista {
  position: relative;
  height: clamp(230px, 30vw, 400px);
  transform-style: preserve-3d;
  cursor: grab;
  user-select: none;
}
.espacos__pista.esta-arrastando { cursor: grabbing; }
.espacos__pista:focus-visible { outline: none; }
.espacos__pista:focus-visible .espacos__foto.esta-no-centro {
  box-shadow: var(--sombra-g), 0 0 0 3px var(--indigo-claro);
}

.espacos__foto {
  position: absolute;
  top: 0; left: 50%;
  width: clamp(290px, 38vw, 530px);
  height: 100%;
  margin: 0;
  border-radius: var(--raio-g);
  overflow: hidden;
  background: var(--papel-indigo);
  box-shadow: var(--sombra);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: transform .55s var(--mola), opacity .55s var(--mola), box-shadow .55s var(--mola);
  backface-visibility: hidden;
}
.espacos__pista.esta-arrastando .espacos__foto { transition: none; }
.espacos__foto.esta-no-centro { box-shadow: var(--sombra-g); cursor: default; }
.espacos__foto:not(.esta-no-centro) { cursor: pointer; }

.espacos__foto img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}

/* escurece as laterais para dar profundidade sem mexer na opacidade da foto */
.espacos__foto::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(27, 31, 75, .3);
  opacity: 1; transition: opacity .55s var(--mola);
  pointer-events: none;
}
.espacos__foto.esta-no-centro::after { opacity: 0; }

.espacos__legenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 52px 24px 20px;
  background: linear-gradient(to top, rgba(27, 31, 75, .86), transparent);
  color: #fff; font-size: .95rem; font-weight: 600;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--mola), transform .45s var(--mola);
  z-index: 2;
}
.espacos__foto.esta-no-centro .espacos__legenda { opacity: 1; transform: none; }

.espacos__controles { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; }
.espacos__seta {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--linha); background: #fff; color: var(--tinta);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.espacos__seta:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); transform: translateY(-2px); }
.espacos__seta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.espacos__contador { font-size: .88rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; min-width: 70px; text-align: center; }

/* ---------- 12. Depoimentos ---------- */
.depoimentos__grade { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.depoimento {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g);
  padding: clamp(26px, 3vw, 34px);
  display: flex; flex-direction: column; gap: 16px;
}
.depoimento__estrelas { color: var(--amarelo); font-size: 1rem; letter-spacing: .1em; }
.depoimento__texto { font-family: 'Newsreader', serif; font-size: 1.12rem; line-height: 1.55; color: var(--tinta); margin: 0; }
.depoimento__autor { margin-top: auto; font-size: .86rem; color: var(--tinta-suave); }
.depoimento__autor strong { display: block; color: var(--tinta); font-size: .95rem; font-weight: 600; }

.nota-geral {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; margin-bottom: 42px;
}
.nota-geral__valor {
  font-family: 'Newsreader', serif; font-size: 3.4rem; line-height: 1;
  color: var(--indigo); font-weight: 500;
}

/* ---------- 13. FAQ ---------- */
.faq { max-width: 900px; margin-inline: auto; }
.faq__item {
  border-bottom: 1px solid var(--linha);
}
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 1.35em 0; cursor: pointer; list-style: none;
  font-family: 'Newsreader', serif; font-size: 1.22rem; color: var(--tinta); font-weight: 500;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ''; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s;
}
.faq__item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq__item summary:hover { color: var(--indigo); }
.faq__resposta { padding-bottom: 1.5em; color: var(--tinta-suave); font-size: .98rem; max-width: 72ch; }

/* ---------- 14. Chamada final ---------- */
.chamada {
  position: relative; overflow: hidden;
  background: var(--indigo); color: #e7e9f7;
  border-radius: var(--raio-g);
  padding: clamp(44px, 6vw, 86px) clamp(26px, 5vw, 76px);
  text-align: center;
}
.chamada h2 { color: #fff; }
.chamada h2 em { color: var(--amarelo); }
.chamada p { color: #c3c7e8; max-width: 56ch; margin-inline: auto; }
.chamada__acoes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 2.2rem; }
.chamada .blob { opacity: .4; }
.chamada .blob--a { width: 460px; height: 460px; top: -180px; right: -140px; background: radial-gradient(circle, rgba(255, 193, 0, .5), transparent 66%); }
.chamada .blob--b { width: 360px; height: 360px; bottom: -160px; left: -120px; background: radial-gradient(circle, rgba(1, 129, 221, .5), transparent 66%); }
.chamada > * { position: relative; z-index: 1; }

/* ---------- 15. Rodapé ---------- */
.rodape {
  background: var(--papel-quente);
  border-top: 1px solid var(--linha);
  padding-top: clamp(56px, 6vw, 84px);
  font-size: .93rem;
}
.rodape__grade {
  display: grid; gap: 40px;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  padding-bottom: clamp(40px, 5vw, 64px);
}
.rodape__marca img { height: 60px; width: auto; margin-bottom: 20px; }
.rodape h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta); margin-bottom: 1.2em;
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.rodape a { color: var(--tinta-media); }
.rodape a:hover { color: var(--indigo); }
.rodape p { color: var(--tinta-suave); margin-bottom: .45em; }

.rodape__sociais { display: flex; gap: 10px; margin-top: 18px; }
.rodape__sociais a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--linha); color: var(--tinta);
  transition: background-color .2s, color .2s, transform .2s;
}
.rodape__sociais a:hover { background: var(--indigo); color: #fff; transform: translateY(-2px); }
.rodape__sociais svg { width: 18px; height: 18px; fill: currentColor; }

.rodape__base {
  border-top: 1px solid var(--linha);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  font-size: .82rem; color: var(--tinta-suave);
}
.rodape__base a { color: var(--tinta-suave); }

/* ---------- 16. Flutuantes ---------- */
.flutuantes { position: fixed; right: 20px; bottom: 20px; z-index: 55; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.zap {
  /* sem position:relative o brilho do ::after se posicionava contra .flutuantes,
     que é o ancestral posicionado — e aí o overflow:hidden daqui não o alcançava,
     porque só corta quem tem este elemento no caminho do bloco container. O
     risco de luz atravessava a tela a cada 4,6s. */
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 15px; border-radius: 999px;
  background: #25d366; color: #fff; font-weight: 700; font-size: .92rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  transition: transform .25s var(--mola), box-shadow .25s;
  text-decoration: none !important;
}
.zap:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 36px rgba(0, 0, 0, .26); }
.zap svg { width: 25px; height: 25px; fill: currentColor; flex: none; }

/* ---------- 16b. Modal do WhatsApp ---------- */
.modal-zap { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-zap[hidden] { display: none; }

.modal-zap__fundo {
  position: absolute; inset: 0;
  background: rgba(27, 31, 75, .5);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .22s;
}
.modal-zap.esta-aberto .modal-zap__fundo { opacity: 1; }

.modal-zap__caixa {
  position: relative; width: min(100%, 470px);
  background: #fff; border-radius: var(--raio-g);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--sombra-g);
  text-align: center;
  opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity .24s var(--mola), transform .24s var(--mola);
  max-height: calc(100dvh - 40px); overflow-y: auto;
}
.modal-zap.esta-aberto .modal-zap__caixa { opacity: 1; transform: none; }

.modal-zap__x {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--linha); background: #fff; color: var(--tinta-suave);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.modal-zap__x:hover { background: var(--papel-quente); color: var(--tinta); }
.modal-zap__x svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.modal-zap__selo {
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center; margin: 0 auto 18px;
}
.modal-zap__selo svg { width: 31px; height: 31px; fill: currentColor; }

.modal-zap__titulo { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: .3em; }
.modal-zap__sub { color: var(--tinta-suave); font-size: .95rem; margin-bottom: 1.8rem; }

.modal-zap__opcoes { display: grid; gap: 12px; text-align: left; }
.modal-zap__opcao {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 14px;
  padding: 18px 20px; border-radius: var(--raio);
  border: 1px solid var(--linha); background: #fff; color: var(--tinta);
  text-decoration: none !important;
  transition: border-color .2s, transform .2s var(--mola), box-shadow .2s, background-color .2s;
}
.modal-zap__opcao strong { font-size: 1.04rem; font-weight: 700; }
.modal-zap__opcao span { grid-column: 1; font-size: .86rem; color: var(--tinta-suave); line-height: 1.45; }
.modal-zap__seta {
  grid-column: 2; grid-row: 1 / 3;
  width: 20px; height: 20px; stroke: var(--tinta-suave); fill: none; stroke-width: 2;
  transition: stroke .2s, transform .2s var(--mola);
}
.modal-zap__opcao:hover {
  border-color: #25d366; background: #f5fdf8;
  transform: translateY(-2px); box-shadow: var(--sombra);
}
.modal-zap__opcao:hover .modal-zap__seta { stroke: #25d366; transform: translateX(3px); }

.modal-zap__rodape { margin: 1.7rem 0 0; font-size: .84rem; color: var(--tinta-suave); }

@media (prefers-reduced-motion: reduce) {
  .modal-zap__fundo, .modal-zap__caixa { transition: none; }
}

/* ===========================================================================
   16c. LINGUAGEM VISUAL — detalhes que dão personalidade
   ---------------------------------------------------------------------------
   O símbolo do logo é um "A" formado por uma fita amarela que curva na base.
   Essa curva vira o fio condutor do site: traços que se desenham ao rolar,
   molduras tracejadas desalinhadas, círculos e sublinhados feitos à mão.
   =========================================================================== */

/* ---- marcação à mão: círculo e sublinhado ----
   O traço é irmão do texto no HTML, então precisa de z-index explícito para
   passar POR TRÁS das letras — senão rabisca por cima e corta a leitura. */
.anotado {
  position: relative; display: inline-block; white-space: nowrap;
  isolation: isolate;
}
.anotado > :not(svg) { position: relative; z-index: 1; }

.anotado__traco {
  position: absolute; z-index: 0;
  left: 50%; top: 50%;
  width: 132%; height: 176%;
  transform: translate(-50%, -50%);
  overflow: visible; pointer-events: none;
}
.anotado__traco path {
  fill: none; stroke: var(--amarelo);
  stroke-width: 3.5;
  /* o SVG é esticado sem manter proporção; sem isto a espessura distorce */
  vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
  /* o comprimento real é medido pelo JS; este valor é só o ponto de partida */
  stroke-dasharray: var(--traco-tam, 600);
  stroke-dashoffset: calc(var(--traco-tam, 600) * (1 - var(--p, 0)));
}
.anotado--laranja .anotado__traco path { stroke: var(--laranja); }
.anotado--indigo .anotado__traco path { stroke: var(--indigo-claro); }

/* sublinhado: ancorado ABAIXO da linha de base, nunca sobre as letras.
   São dois traços, como quem passa a caneta duas vezes. */
.anotado--sublinha .anotado__traco {
  top: auto; bottom: -.16em;
  width: 108%; height: .54em;
  transform: translateX(-50%);
}
.anotado--sublinha .anotado__traco path:nth-child(2) { opacity: .62; }

/* ---- lista com ícone de selo conferido ---- */
.lista-check { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; gap: .85rem; }
/* o ícone é posicionado, não é célula de grid: com grid, um texto solto depois
   de um <strong> virava item anônimo e caía na coluna estreita do ícone,
   quebrando uma palavra por linha */
.lista-check li {
  position: relative;
  padding-left: 34px;
  font-size: .96rem;
}
.lista-check svg {
  position: absolute; left: 0; top: .18em;
  width: 24px; height: 24px;
}
/* o <use> só recebe variáveis herdadas, não seletores de classe */
.lista-check { --selo-fundo: var(--amarelo); --selo-risco: var(--tinta); }
.lista-check--indigo { --selo-fundo: var(--indigo); --selo-risco: #fff; }
.lista-check--laranja { --selo-fundo: var(--laranja); --selo-risco: #fff; }

/* ---- moldura tracejada deslocada atrás da foto ---- */
.foto-moldura { position: relative; display: block; }
.foto-moldura img { position: relative; z-index: 1; width: 100%; border-radius: var(--raio-g); }
.foto-moldura::before {
  content: '';
  position: absolute; z-index: 0;
  inset: -22px 22px 22px -22px;          /* desloca para cima e para a esquerda */
  border: 3px dashed var(--amarelo);
  border-radius: var(--raio-g);
}
.foto-moldura--direita::before { inset: -22px -22px 22px 22px; border-color: var(--indigo-claro); }
/* o pontilhado em volta da foto inteira, e não deslocado para um canto: usado
   onde o recorte é cortado na borda (a saia da aluna em /educacao-socioemocional/),
   porque aí o corte encosta na linha e parece moldura, não erro. */
/* o pontilhado cerca a foto, mas encosta embaixo: a saia da aluna é cortada
   rente à borda da imagem, e a linha passando exatamente ali faz o corte ler
   como moldura em vez de descuido */
.foto-moldura--contorno::before {
  inset: -22px -22px 0;
  /* a moldura sobe para cima da foto: embaixo as duas se encostam, e com o
     z-index 0 padrão a imagem (z-index 1) cobria justamente a linha de baixo */
  z-index: 2;
}
.foto-moldura--organica img { border-radius: var(--raio-organico); }
.foto-moldura--organica::before { border-radius: var(--raio-organico); }

/* ---- traço do percurso: a fita do logo que se desenha ao rolar ---- */
.tracado { position: absolute; z-index: 0; pointer-events: none; overflow: visible; }
.tracado path {
  fill: none; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: var(--traco-tam, 1200);
  stroke-dashoffset: calc(var(--traco-tam, 1200) * (1 - var(--p, 0)));
}
.tracado__fita { stroke: url(#gradiente-fita); }
.tracado__pontilhado { stroke: var(--indigo-claro); stroke-dasharray: 2 10; stroke-linecap: round; opacity: .5; }
/* o aviãozinho anda junto com a ponta do traço */
.tracado__aviao {
  fill: var(--laranja);
  filter: drop-shadow(0 2px 4px rgb(246 106 46 / .45));
  offset-path: var(--rota);
  offset-distance: calc(var(--p, 0) * 100%);
  offset-rotate: auto;
}

/* ---- composição em três colunas desencontradas (Art+) ----
   Texto à esquerda com a foto menor emoldurada embaixo, foto alta no centro
   atravessando as duas linhas, e um cartão branco invadindo a borda dela.
   As fotos têm proporção fixa: numa coluna larga, um retrato solto vira um
   bloco gigante e a composição desmonta. */
.trio {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  gap: 34px 26px;
}

.trio__texto      { grid-column: 1 / 5;  grid-row: 1; align-self: start; }
.trio__fotoAlta   { grid-column: 5 / 10; grid-row: 1 / 3; }
/* O cartão acompanha as duas linhas da foto e encosta na base dela. Antes
   ficava preso a 76px do topo da linha 1: como a altura da foto muda com a
   largura da tela, em telas menores aquele ponto fixo caía em cima dos
   rostos. Ancorado embaixo, o cartão cobre sempre a mesma parte da imagem. */
.trio__cartao     { grid-column: 8 / 13; grid-row: 1 / 3; align-self: end; margin-bottom: 28px; z-index: 2; }
.trio__fotoMenor  { grid-column: 1 / 5;  grid-row: 2; align-self: end; }
/* Começa depois da coluna onde a foto termina: só o cartão invade a imagem.
   Fica na PRIMEIRA linha, acima do cartão: desde que o cartão passou a se
   ancorar na base da foto (duas linhas, align-self: end), ele cobria este
   texto, que ficava escondido atrás do cartão branco nas duas páginas que
   usam o trio. */
.trio__fecho      { grid-column: 10 / 13; grid-row: 1; align-self: start; }

/* A <figure> é esticada pelas duas linhas do grid, mas a <img> parava na
   altura do seu próprio aspect-ratio e sobrava um vazio embaixo — o cartão
   ancorado na base ficaria pendurado fora da foto. Com flex + height:100% a
   imagem preenche a moldura inteira e as duas bases coincidem. */
.trio__fotoAlta { display: flex; }
.trio__fotoAlta img { object-fit: cover; width: 100%; height: 100%; border-radius: var(--raio-g); }
.trio__fotoMenor img { aspect-ratio: 4 / 3; object-fit: cover; }

/* o cartão branco que encosta na foto */
.trio__cartao .cartao-aconchego { padding: 32px 34px; }
.trio__cartao { position: relative; }
/* mancha de cor atrás do cartão, puxando para o fundo da seção */
.trio__cartao::before {
  content: '';
  position: absolute; z-index: -1;
  right: -34px; top: 34px; bottom: -34px; left: 56px;
  background: var(--amarelo-suave);
  border-radius: 46% 54% 38% 62% / 52% 42% 58% 48%;
  opacity: .55;
}

.trio__fecho p { color: var(--tinta-suave); }

/* faíscas no canto da moldura tracejada */
.faiscas {
  position: absolute; z-index: 2;
  left: -34px; top: -38px;
  width: 42px; height: 42px; overflow: visible;
}
.faiscas path {
  fill: none; stroke: var(--laranja); stroke-width: 3.2;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--traco-tam, 40);
  stroke-dashoffset: calc(var(--traco-tam, 40) * (1 - var(--p, 0)));
}

/* faixa das extracurriculares, abaixo da composição */
.extras {
  display: grid; grid-template-columns: minmax(240px, 1fr) 2fr;
  gap: 32px 44px; align-items: center;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--linha);
}
.extras__texto h3 { margin-bottom: .4em; }
.extras__texto p { color: var(--tinta-suave); font-size: .95rem; margin-bottom: 1.4rem; }

/* ===========================================================================
   16d. PEÇAS DAS SUBPÁGINAS
   =========================================================================== */

/* ---- capa das subpáginas ---- */
/* A faixa de abertura das subpáginas. O gradiente e as cores do texto que fica
   por cima dele saem todos destas variáveis — assim uma página nova só declara
   as cores, sem repetir regra nenhuma:

     --ph-de / --ph-para   as duas pontas do gradiente
     --ph-titulo           cor do h1
     --ph-apoio            cor do parágrafo de chamada
     --ph-trilha           cor do caminho (breadcrumb) e do link dele
     --ph-brilho           a forma orgânica solta no canto

   Nos dois gradientes escuros (Fundamental I e II) o texto inteiro vira claro.
   Não é opção: a tinta #1b1f4b sobre o índigo #393f98 dá 1,7:1, ilegivel. */
.page-hero {
  --ph-de: #ffde00;
  --ph-para: var(--papel);
  --ph-titulo: var(--tinta);
  --ph-apoio: var(--tinta-media);
  --ph-trilha: var(--tinta-media);
  --ph-trilha-link: var(--indigo);
  --ph-brilho: var(--amarelo-suave);
  --ph-brilho-opacidade: .6;

  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--ph-de) 0%, var(--ph-para) 100%);
  padding: clamp(48px, 7vw, 92px) 0 clamp(44px, 6vw, 76px);
  border-bottom: 1px solid var(--linha);
}

/* Berçário e Educação Infantil: amarelo da marca clareando para o amarelo vivo.
   Fundo claro, então o texto continua escuro. */
.segmento--bercario .page-hero,
.segmento--infantil .page-hero {
  --ph-de: #ffc100;
  --ph-para: #fff100;
  --ph-apoio: #3d4168;
  --ph-brilho: #fff;
  --ph-brilho-opacidade: .5;
  border-bottom-color: rgb(27 31 75 / .14);
}

/* Fundamental I: índigo clareando para o azul da marca. */
.segmento--fund1 .page-hero {
  --ph-de: #393f98;
  --ph-para: #0181dd;
  --ph-titulo: #fff;
  --ph-apoio: rgb(255 255 255 / .94);
  --ph-trilha: rgb(255 255 255 / .82);
  --ph-trilha-link: #fff;
  --ph-brilho: #fff;
  --ph-brilho-opacidade: .16;
  border-bottom-color: transparent;
}

/* Fundamental II: grafite clareando para o cinza médio. */
.segmento--fund2 .page-hero {
  --ph-de: #272525;
  --ph-para: #555555;
  --ph-titulo: #fff;
  --ph-apoio: rgb(255 255 255 / .9);
  --ph-trilha: rgb(255 255 255 / .78);
  --ph-trilha-link: #fff;
  --ph-brilho: var(--amarelo);
  --ph-brilho-opacidade: .2;
  border-bottom-color: transparent;
}

.page-hero::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: -140px; top: -180px; width: 440px; height: 440px;
  border-radius: 48% 52% 42% 58% / 54% 44% 56% 46%;
  background: radial-gradient(circle at 38% 38%, var(--ph-brilho), transparent 68%);
  opacity: var(--ph-brilho-opacidade);
}
.page-hero .envoltorio { position: relative; z-index: 1; }
.page-hero h1 { max-width: 20ch; margin-bottom: .3em; color: var(--ph-titulo); }
.page-hero p {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--ph-apoio); max-width: 56ch; margin-bottom: 0;
}
.page-hero .breadcrumb { color: var(--ph-trilha); }
.page-hero .breadcrumb a { color: var(--ph-trilha-link); }

.breadcrumb {
  font-size: .84rem; color: var(--tinta-suave);
  margin-bottom: 1.1em; letter-spacing: .01em;
}
.breadcrumb a { color: var(--tinta-media); }
.breadcrumb a:hover { color: var(--indigo); }

/* ---- linha do tempo ---- */
.linha-tempo { position: relative; display: grid; gap: 34px; padding-left: 38px; }
.linha-tempo::before {
  content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(var(--amarelo), var(--laranja));
  border-radius: 2px;
}
.linha-tempo__item { position: relative; }
.linha-tempo__item::before {
  content: ''; position: absolute; left: -38px; top: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--amarelo);
}
.linha-tempo__marco {
  display: inline-block; font-family: 'Newsreader', serif;
  font-size: 1.5rem; color: var(--indigo); font-weight: 500; margin-bottom: .2em;
}
.linha-tempo__item h3 { font-size: 1.2rem; margin-bottom: .35em; }
.linha-tempo__item p { font-size: .96rem; color: var(--tinta-suave); margin-bottom: 0; }

/* ---- acervo: as fotos antigas como cópias impressas ----
   As duas fotos do arquivo da escola são fotografias DE fotografias: têm o
   brilho do papel, a borda irregular e a cor que o tempo levou. Em vez de
   disfarçar isso com correção pesada, o bloco assume o que elas são — cada
   uma entra como uma cópia impressa, com margem branca, uma inclinação mínima
   e sombra de papel. A legenda fica na margem de baixo, onde se escrevia a
   lápis.

   A inclinação mora nos <figure>, e a entrada ao rolar no elemento pai: o
   [data-anim] escreve `transform` e apagaria a rotação se estivesse junto. */
.acervo {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: start;
  gap: clamp(22px, 3.4vw, 48px);
}
.acervo__copia {
  margin: 0;
  background: #fff;
  padding: 13px 13px 0;
  border-radius: 2px;
  /* duas sombras: o fio de contato do papel e a sombra solta da mesa */
  box-shadow: 0 1px 1px rgb(27 31 75 / .16), 0 16px 34px rgb(27 31 75 / .14);
  transition: transform .55s var(--mola), box-shadow .55s var(--mola);
}
.acervo__copia img {
  display: block; width: 100%; border-radius: 1px;
  /* contorno por dentro, e não box-shadow inset: num <img> a sombra interna
     fica atrás do bitmap e não aparece. */
  outline: 1px solid rgb(27 31 75 / .09);
  outline-offset: -1px;
}
.acervo__copia figcaption {
  padding: 13px 4px 16px;
  font-size: .85rem; line-height: 1.5; color: var(--tinta-suave);
}
.acervo__copia figcaption strong {
  display: block; margin-bottom: .1em;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.05rem; font-weight: 500; font-style: italic;
  color: var(--tinta);
}
/* O degrau vai na paisagem, que é a mais baixa das duas: assim as bordas de
   baixo chegam perto uma da outra. Com o degrau no retrato — que já é bem mais
   alto — sobravam 240px de vazio embaixo da outra cópia. */
.acervo__copia--a { transform: rotate(-1.1deg); margin-top: clamp(18px, 3.4vw, 52px); }
.acervo__copia--b { transform: rotate(1.3deg); }
/* ao passar o mouse a cópia se endireita e levanta, como quem pega a foto da
   mesa para olhar de perto */
.acervo__copia:hover,
.acervo__copia:focus-within {
  transform: rotate(0deg) translateY(-7px);
  box-shadow: 0 1px 1px rgb(27 31 75 / .14), 0 26px 54px rgb(27 31 75 / .19);
}

/* 7) Em /nossa-historia/ a linha do tempo divide a seção com as duas cópias,
   que ficam uma sobre a outra: o canto superior esquerdo da de baixo cai sobre
   o canto inferior direito da de cima. A legenda da primeira recua 44% à
   direita para não ficar embaixo da segunda. */
.historia-par {
  display: grid; grid-template-columns: 1fr .92fr;
  gap: clamp(30px, 4.5vw, 70px); align-items: start;
}
.acervo--empilhado { display: block; position: relative; }
.acervo--empilhado .acervo__copia--a { width: 84%; margin-top: 0; }
/* A legenda da primeira sobe para cima da foto: a segunda cópia cai justamente
   sobre o canto inferior direito, que é onde a legenda estaria. Recuar o texto
   para a metade esquerda deixaria uma coluna de 150px e três linhas quebradas. */
.acervo--empilhado .acervo__copia--a {
  display: flex; flex-direction: column;
  padding: 0 13px 13px;
}
.acervo--empilhado .acervo__copia--a figcaption { order: -1; padding: 13px 4px 12px; }
.acervo--empilhado .acervo__copia--b {
  width: 60%; position: relative; z-index: 2;
  margin: -16% 0 0 40%;
}
@media (max-width: 1080px) {
  .historia-par { grid-template-columns: 1fr; }
  .acervo--empilhado { max-width: 560px; }
}

/* Em duas colunas abaixo disto o retrato fica com 250px e as pessoas somem.
   Empilhado, a inclinação e o degrau viram torção à toa: as cópias ficam
   retas, uma embaixo da outra. */
@media (max-width: 880px) {
  .acervo { grid-template-columns: 1fr; }
  .acervo__copia--a,
  .acervo__copia--b { transform: none; margin-top: 0; }
  .acervo__copia:hover,
  .acervo__copia:focus-within { transform: translateY(-7px); }
  /* empilhado de verdade, sem sobreposição: uma embaixo da outra */
  .acervo--empilhado .acervo__copia--a,
  .acervo--empilhado .acervo__copia--b { width: 100%; margin: 0; }
  .acervo--empilhado .acervo__copia--b { margin-top: 22px; }
  .acervo--empilhado .acervo__copia--a figcaption { padding-right: 4px; }
}

/* 1) Vídeo vertical do YouTube (Shorts) em /estrutura/. A proporção 9/16 vem
   do aspect-ratio, e a largura trava em 340px: um Short ocupando a coluna
   inteira do desktop viraria um poste de 1000px de altura. */
.video-vertical {
  width: 100%; max-width: 340px; margin-inline: auto;
  aspect-ratio: 9 / 16; border-radius: var(--raio-g); overflow: hidden;
  box-shadow: var(--sombra-g); background: #000;
}
.video-vertical iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 32) Linha de botões para os outros programas, no fim de cada página de
   programa. Quebra em coluna no celular, centrada nas duas pontas. */
.linha-botoes {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px;
}
@media (max-width: 560px) {
  .linha-botoes { flex-direction: column; align-items: stretch; }
}

/* ---- quadro curricular ----
   O padding-left da legenda não é estética: é o conserto do "Q cortado".
   Medido no canvas, as letras desta fonte começam com bearing esquerdo ZERO —
   a tinta nasce exatamente em x=0. Como a legenda ficava colada na borda de
   dois elementos que cortam (o overflow:hidden da tabela, que existe para o
   border-radius, e o overflow-x:auto do rolador), a primeira coluna de pixels
   do glifo sumia: o Q de "Quadro de horários" ficava reto de um lado e o M de
   "Matriz curricular" ficava fino. 4px resolvem e ninguém percebe o recuo. */
/* O arredondamento e o fundo saem da <table> e vão para o rolador. Com
   border-collapse: collapse, o overflow:hidden da tabela não recorta direito
   no Chrome: sobrava um fio do fundo branco por cima do cabeçalho colorido,
   que o cliente viu como "bordinha branca". Num <div> comum o recorte é
   exato. */
.quadro {
  width: 100%; border-collapse: collapse;
  background: transparent; font-size: .95rem;
}
/* A legenda vive FORA da <table> (ver quadro-bloco mais abaixo). Esta regra
   fica para o caso de sobrar algum <caption> em página antiga. */
.quadro caption {
  caption-side: top; text-align: left; padding: 0 4px .9em;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--indigo);
}
.quadro-bloco__titulo {
  margin: 0 0 .9em;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--indigo);
}
.quadro th, .quadro td { padding: .95em 1.2em; text-align: left; border-bottom: 1px solid var(--linha); }
/* o cabeçalho usa a cor do segmento; --cor-seg-sobre garante o contraste */
.quadro thead th {
  background: var(--cor-seg-forte, var(--amarelo));
  color: var(--cor-seg-sobre, var(--tinta));
  font-weight: 700; font-size: .84rem;
}
.quadro tbody tr:nth-child(even) th,
.quadro tbody tr:nth-child(even) td { background: var(--cor-seg-tinta, var(--creme)); }
/* a observação que era coluna virou segunda linha da própria célula */
.quadro th small, .quadro td small {
  display: block; margin-top: .15em;
  font-weight: 400; font-size: .84em; color: var(--tinta-suave);
}
.quadro tbody th { font-weight: 600; color: var(--tinta); }
.quadro tr:last-child th, .quadro tr:last-child td { border-bottom: 0; }
.quadro td { color: var(--tinta-suave); }
.quadro__rolagem {
  overflow-x: auto;
  background: #fff;
  border-radius: var(--raio);
  box-shadow: var(--sombra-s);
  border-top: 4px solid var(--cor-seg, var(--amarelo));
}

/* 19) Os dois quadros lado a lado, da mesma altura, e a nota embaixo dos dois.
   A altura igual vem do height:100% na tabela: as linhas do quadro mais curto
   se esticam até alcançar o mais longo, em vez de sobrar um degrau branco. */
.quadros-par {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 44px); align-items: stretch;
}
/* O bloco é uma coluna: título em cima, rolador ocupando o resto. A tabela
   estica dentro do rolador, e como o título está fora da <table>, a conta do
   height:100% fecha certinho — sem barra de rolagem vertical sobrando. */
.quadro-bloco { display: flex; flex-direction: column; height: 100%; }
.quadro-bloco .quadro__rolagem { flex: 1 1 auto; }
.quadros-par > .quadro-bloco .quadro { height: 100%; }
.quadros-par__nota { grid-column: 1 / -1; margin: 1.7rem 0 0; }
@media (max-width: 760px) {
  .quadros-par { grid-template-columns: 1fr; }
  .quadro-bloco { height: auto; }
  .quadros-par > .quadro-bloco .quadro { height: auto; }
}

/* 14) Berçário: um cartão só com as duas faixas de idade dentro. */
.cartao--faixas { padding: clamp(24px, 3vw, 40px); }
.cartao__abertura { font-size: 1.02rem; color: var(--tinta-media); max-width: 70ch; }
.faixas {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.4vw, 48px); margin-top: clamp(22px, 2.6vw, 34px);
}
.faixas .faixa > p { margin-top: .6rem; }
@media (max-width: 760px) { .faixas { grid-template-columns: 1fr; } }

/* ---- catálogo (extracurriculares) ---- */
.catalogo { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.catalogo__item {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 22px 24px; transition: transform .25s var(--mola), box-shadow .25s, border-color .25s;
}
.catalogo__item:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: transparent; }
.catalogo__item h3 { font-size: 1.1rem; margin-bottom: .3em; }
.catalogo__item p { font-size: .88rem; color: var(--tinta-suave); margin: 0; }
.catalogo__numero {
  display: block; font-family: 'Newsreader', serif; font-size: .95rem;
  color: var(--laranja); margin-bottom: .5em;
}

/* ---- galeria completa de espaços ---- */
.galeria { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.galeria figure { margin: 0; }
.galeria img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--raio); }
.galeria figcaption { margin-top: .7em; font-size: .9rem; font-weight: 600; color: var(--tinta); }
.galeria__larga { grid-column: span 2; }

/* ---- passos numerados ---- */
.passos { counter-reset: passo; display: grid; gap: 22px; list-style: none; margin: 0; padding: 0; }
.passos li {
  counter-increment: passo; position: relative;
  padding: 26px 30px 26px 84px;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g);
}
.passos li::before {
  content: counter(passo);
  position: absolute; left: 26px; top: 24px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--amarelo); color: var(--tinta);
  font-family: 'Newsreader', serif; font-size: 1.2rem; font-weight: 600;
}
.passos h3 { font-size: 1.15rem; margin-bottom: .3em; }
.passos p { font-size: .95rem; color: var(--tinta-suave); margin: 0; }

/* ---- bloco de download de documentos em coluna ---- */
.documentos { display: grid; gap: 12px; }

/* ---- destaque de uma frase longa ---- */
.citacao {
  border-left: 4px solid var(--amarelo);
  padding: .3em 0 .3em 1.4em; margin: 2rem 0;
  font-family: 'Newsreader', serif; font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.5; color: var(--tinta);
}
.citacao cite { display: block; margin-top: .7em; font-size: .86rem; font-style: normal; color: var(--tinta-suave); font-family: 'Plus Jakarta Sans', sans-serif; }

/* ---- seção do convite ----
   O aluna1.gif tem alfa de verdade e sobra de fundo embaixo da figura (14 px no
   arquivo), então não há linha de corte para esconder: a figura fica centrada na
   coluna, como qualquer outra mídia de .dupla. */
.convite { position: relative; }

.convite__figura { position: relative; margin: 0; }
.convite__figura img { display: block; width: 100%; height: auto; }

/* ---- troca de quadros (componente disponível, hoje sem uso na home) ----
   Três recortes com alfa que se alternam a cada 1,5s com crossfade. Pesa 284 KB
   os seis quadros, contra 2 MB de um GIF só — e aqui há transparência de
   verdade, que GIF não tem (só 1 bit, que serrilha o cabelo). */
.troca {
  position: relative;
  aspect-ratio: var(--troca-proporcao, 620 / 826);
}
.troca__quadro {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; z-index: 0;
  transition: opacity .45s var(--mola);
}
/* o quadro que entra sobe por cima; o que sai fica opaco por baixo até o novo
   cobrir. Sem isso as duas transparências se somam no meio do caminho e a
   figura "apaga" por um instante (medido: 40% de opacidade total). */
.troca__quadro.esta-saindo { opacity: 1; z-index: 1; transition: none; }
.troca__quadro.esta-visivel { opacity: 1; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .troca__quadro { transition: none; }
}

/* grifo em pílula, para destacar um trecho dentro de um título */
.grifo {
  background: var(--amarelo);
  border-radius: 999px;
  padding: .06em .42em .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--tinta);
}

.cartao-aconchego {
  background: #fff; border-radius: var(--raio-g);
  padding: 28px 30px; box-shadow: var(--sombra);
  border: 1px solid var(--linha);
}
.cartao-aconchego h3 { font-size: 1.3rem; margin-bottom: .4em; }
.cartao-aconchego p { font-size: .94rem; color: var(--tinta-suave); margin: 0; }

/* ---- bilhete de visita (chamada final) ---- */
.bilhete {
  position: relative;
  display: grid; grid-template-columns: 1.55fr 1fr;
  background: var(--indigo); color: #e7e9f7;
  border-radius: var(--raio-g);
  overflow: hidden;
  box-shadow: var(--sombra-g);
}
.bilhete__principal { padding: clamp(36px, 5vw, 66px); position: relative; z-index: 2; }
.bilhete__principal h2 { color: #fff; margin-bottom: .45em; }
.bilhete__principal h2 em { color: var(--amarelo); }
.bilhete__principal p { color: #c3c7e8; max-width: 44ch; }
.bilhete__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }

/* o canhoto, separado por uma picotagem de verdade */
.bilhete__canhoto {
  position: relative; z-index: 2;
  padding: clamp(32px, 4vw, 52px) clamp(26px, 3vw, 40px);
  background: rgb(255 255 255 / .06);
  display: grid; align-content: center; gap: 1.3rem;
}
.bilhete__canhoto::before {
  content: '';
  position: absolute; left: 0; top: 18px; bottom: 18px;
  border-left: 2px dashed rgb(255 255 255 / .34);
}
/* as duas meias-luas que fecham a picotagem */
.bilhete::before, .bilhete::after {
  content: '';
  position: absolute; z-index: 3;
  left: calc(61.5% - 13px);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--papel-quente);
}
.bilhete::before { top: -13px; }
.bilhete::after { bottom: -13px; }

.bilhete__dado { display: grid; gap: .2rem; }
.bilhete__dado dt {
  font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--amarelo);
}
.bilhete__dado dd { margin: 0; font-size: .95rem; color: #e7e9f7; line-height: 1.5; }
.bilhete__dado a { color: #e7e9f7; }

.bilhete__carimbo {
  position: absolute; z-index: 1; right: -40px; top: -40px;
  width: 230px; height: 230px; opacity: .13;
  border: 3px dashed #fff; border-radius: 50%;
}
.tracado--chamada {
  left: 0; right: 0; top: -70px;
  width: 100%; height: 150px;
}
.bilhete__selo {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .45em 1em; border-radius: 999px;
  background: var(--amarelo); color: var(--tinta);
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1.4rem;
}

/* ---------- 17. Movimento ---------- */
::selection { background: var(--amarelo); color: var(--tinta); }
::-moz-selection { background: var(--amarelo); color: var(--tinta); }

/* entradas scrubadas: o JS escreve --p (0 a 1); o CSS faz o resto */
[data-anim] {
  --p: 0;
  opacity: calc(.08 + .92 * var(--p));
  will-change: transform, opacity;
}
[data-anim="baixo"]    { transform: translate3d(0, calc((1 - var(--p)) * 46px), 0); }
[data-anim="esquerda"] { transform: translate3d(calc((1 - var(--p)) * -58px), 0, 0); }
[data-anim="direita"]  { transform: translate3d(calc((1 - var(--p)) * 58px), 0, 0); }
[data-anim="zoom"]     { transform: scale(calc(.93 + .07 * var(--p))); }

/* barra de rolagem personalizada */
html.tem-barra-custom { scrollbar-width: none; }
html.tem-barra-custom::-webkit-scrollbar { width: 0; height: 0; }
.barra-custom {
  position: fixed; top: 0; right: 3px; bottom: 0; width: 10px;
  z-index: 70; opacity: 0; transition: opacity .35s; pointer-events: auto;
}
.barra-custom.esta-visivel { opacity: 1; }
.barra-custom__polegar {
  position: absolute; left: 2px; width: 6px; border-radius: 999px;
  background: var(--indigo); opacity: .55;
  transition: opacity .2s, background-color .2s;
}
.barra-custom:hover .barra-custom__polegar { opacity: .95; background: var(--amarelo); }

/* placeholder de imagem que ainda será produzida */
.placeholder {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(57, 63, 152, .06) 0 10px, transparent 10px 20px),
    var(--papel-indigo);
  border: 2px dashed rgba(57, 63, 152, .3);
  border-radius: var(--raio);
  display: grid; place-items: center; text-align: center;
  color: var(--indigo); font-size: .78rem; font-weight: 600; line-height: 1.4;
  padding: 16px;
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] { --p: 1 !important; transform: none !important; opacity: 1 !important; }
  .fitinha__trilho { animation: none; }
  .hero__aluno { transition: none; transform: none !important; }
  .acervo__copia { transition: none; }
  .hero__seta svg { animation: none; }
  .botao--principal::after, .zap::after { animation: none; opacity: 0; }
  .botao::before { transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- 18. Responsivo ---------- */
@media (max-width: 1080px) {
  :root { --cabecalho: 74px; }
  .hamburguer { display: grid; }
  /* só o CTA solto do cabeçalho some; o de dentro da gaveta continua */
  .cabecalho__interno > .botao--principal { display: none; }

  /* Sem backdrop-filter no mobile: a propriedade cria bloco de contenção para
     filhos position:fixed, e a gaveta deixava de medir a tela inteira. */
  .cabecalho {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }

  /* o topo vem do JS (--menu-topo): o cabeçalho fica abaixo da fitinha
     quando a página está no início e cola no 0 depois de rolar */
  .menu {
    position: fixed; inset: var(--menu-topo, var(--cabecalho)) 0 0; z-index: 59;
    background: #fff; overflow-y: auto; padding: 22px 24px 40px;
    transform: translateX(100%); transition: transform .3s var(--mola);
    border-top: 1px solid var(--linha);
  }
  .menu.esta-aberto { transform: none; }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 2px; }
  .menu__link { padding: .9em .4em; font-size: 1.02rem; }
  .menu__item--tem-sub > .menu__link { justify-content: space-between; }
  .menu__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; border-left: 2px solid var(--linha); border-radius: 0;
    box-shadow: none; min-width: 0; margin: 2px 0 10px 10px; padding: 0 0 0 12px;
    display: none;
  }
  .menu__item--aberto .menu__sub { display: block; }
  .menu__rodape { margin-top: 26px; display: grid; gap: 12px; }
  .menu__rodape .botao { width: 100%; }

  /* empilhado, o texto ocupa a largura toda e perde o véu lateral.
     Fechar o véu mantém o chapéu (texto pequeno) acima de 4.5:1 mesmo que
     a foto escolhida seja clara. */
  .hero { --hero-veu: .78; }
  .hero__interno { grid-template-columns: 1fr; min-height: 0; }
  .hero__texto { padding-bottom: 32px; }
  /* A hero vira uma coluna só a partir daqui: o palco deixa de ser a metade
     direita e passa a ser a coluna inteira, com o recorte centrado nela.
     width e margin explícitos porque o recorte é o único filho e é absoluto —
     uma caixa com margin:auto e nenhum filho em fluxo colapsa para largura
     zero, e aí a conta do centro passaria a medir contra nada.
     O min-height acompanha a altura do recorte: se ficar menor que ela, ele
     sobe por cima do texto e a cabeça é cortada no topo da seção. */
  .hero__palco {
    width: 100%;
    margin-inline: 0;
    min-height: min(380px, 37vh);
  }
  .hero__aluno--c { --larg: min(360px, calc(36vh * 1.0539)); }


  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .barra-custom { display: none; }

  /* a composição do Art+ vira uma coluna só, na ordem da leitura */
  .trio { grid-template-columns: 1fr; grid-template-rows: none; gap: 30px; }
  .trio > * { grid-column: 1 / -1; grid-row: auto; margin-top: 0; margin-bottom: 0; }
  .trio__texto     { order: 1; }
  .trio__fotoAlta  { order: 2; }
  .trio__cartao    { order: 3; }
  .trio__fecho     { order: 4; }
  .trio__fotoMenor { order: 5; max-width: 74%; margin-inline: auto; }
  .trio__fotoAlta img { aspect-ratio: 4 / 3; height: auto; }
  .trio__cartao::before { display: none; }
  .extras { grid-template-columns: 1fr; }
  .galeria__larga { grid-column: auto; }
  .passos li { padding: 70px 24px 24px; }
  .passos li::before { left: 24px; top: 20px; }

  /* molduras tracejadas encostam menos, para não brigar com a margem da tela */
  .foto-moldura::before { inset: -14px 14px 14px -14px; }
  .foto-moldura--direita::before { inset: -14px -14px 14px 14px; }
  .foto-moldura--contorno::before { inset: -14px -14px 0; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .envoltorio { padding-inline: 18px; }
  .dupla, .dupla--invertida .dupla__midia { grid-template-columns: 1fr; order: 0; }

  /* empilhado, o recorte fica centrado e sem esticar à largura toda da tela */
  .convite__figura { width: 100%; max-width: 340px; margin-inline: auto; }
  .provas__grade { grid-template-columns: 1fr 1fr; }
  .provas__item:nth-child(odd) { border-left: 0; }
  .provas__item:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .selo-flutuante { position: static; max-width: none; margin-top: 16px; box-shadow: var(--sombra); }
  .rodape__grade { grid-template-columns: 1fr; gap: 32px; }
  .zap span { display: none; }
  .zap { padding: 15px; }
  /* o cartão da etapa não cabe em duas colunas num celular: foto em cima,
     texto embaixo, e as setas encostam nas bordas da tela */
  .etapa-cartao { grid-template-columns: 1fr; }
  .etapa-cartao__foto { aspect-ratio: 16 / 10; }
  .carrossel__seta { width: 42px; height: 42px; }
  .carrossel__seta--esq { left: -4px; }
  .carrossel__seta--dir { right: -4px; }
  /* no celular a seta cairia em cima dos recortes, e rolar já é o gesto padrão */
  .hero__seta { display: none; }

  /* o bilhete empilha e a picotagem passa a ser horizontal */
  .bilhete { grid-template-columns: 1fr; }
  .bilhete__canhoto { background: rgb(255 255 255 / .05); }
  .bilhete__canhoto::before {
    left: 24px; right: 24px; top: 0; bottom: auto;
    border-left: 0; border-top: 2px dashed rgb(255 255 255 / .34);
  }
  /* sem as meias-luas: empilhado, a emenda não tem posição fixa para ancorá-las */
  .bilhete::before, .bilhete::after { display: none; }
  .bilhete__carimbo { width: 150px; height: 150px; right: -30px; top: -30px; }
  .tracado--chamada { top: -40px; height: 90px; }

  /* o duo de fotos do Fundamental II não cabe desalinhado em tela estreita */
  .espacos__foto { width: 78vw; }
  .nota-geral { gap: 12px; }

  /* ---- no celular o conteúdo se alinha ao centro ----
     Em coluna única o texto encostado à esquerda fica desamparado; centrado, a
     leitura acompanha o eixo da tela. */
  main, .rodape__grade, .rodape__base { text-align: center; }
  .rodape__base { justify-content: center; }
  .cabeca-secao { margin-inline: auto; }
  /* O chapéu vira bloco. Como inline-flex, o texto que quebra em duas linhas
     vira um item que ocupa o espaço restante: as linhas centralizavam dentro
     dele, mas o traço ficava encostado na borda esquerda. Em bloco, o traço
     entra na primeira linha e acompanha a centralização. */
  .chapeu { display: block; }
  .chapeu::before { display: inline-block; vertical-align: .18em; margin-right: .55em; }
  .hero__acoes, .hero__chips, .bilhete__acoes, .nota-geral { justify-content: center; }

  /* As listas com ícone ficam de fora: o selo é posicionado na borda do item e
     o texto tem 34px de recuo, então centrar deixaria um degrau entre o ícone e
     a frase. Elas ficam à esquerda, mas o bloco inteiro é centrado. */
  .lista-check, .faq__item { text-align: left; }
  .lista-check { width: fit-content; max-width: 100%; margin-inline: auto; }

  /* páginas de texto corrido (política, termos) continuam alinhadas à esquerda:
     parágrafo longo centrado é ruim de ler */
  .envoltorio--estreito { text-align: left; }
}