/* Colegio Asturias — folha unica.
   Paleta medida no logo e nos 12 posts originais do Instagram (identidade que o
   cliente JA aprovou; nao inventar cor nova aqui).
   A foto entra ESFUMADA, dissolvendo no fundo — nunca retangulo de borda dura.
   Isso e regra da identidade deles, nao gosto meu. */

:root{
  --verde:#115A53;
  --verde-claro:#008773;
  --verde-fundo:#0C3B36;
  --dourado:#C18C26;         /* a cor da marca: fio, borda, filete, elemento grafico */
  --dourado-texto:#87621B;   /* o MESMO dourado escurecido, so para TEXTO sobre creme.
                                #C18C26 sobre creme da 2,76:1 e nao serve pra ler.
                                Este da 5,14 no creme e 4,63 no creme-fundo. */
  --dourado-claro:#DEBA62;   /* dourado sobre fundo escuro / sobre foto */
  --creme:#FAF6EE;
  --creme-fundo:#F2EADA;
  --tipo:#2A2C2E;
  --tipo-fraco:#55585B;      /* 6,9:1 no creme — passa AA com folga */
  --linha:rgba(17,90,83,.18);
  --serifa:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:Lato,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --larg:1120px;
  --gutter:clamp(20px,5vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--creme);
  color:var(--tipo);
  font:400 17px/1.7 var(--sans);
  overflow-x:clip;            /* guarda, nao diagnostico: medir com scrollWidth */
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* line-height apertado come acento, e "Astúrias" tem um. Piso de 1.12. */
h1,h2,h3{font-family:var(--serifa);font-weight:600;line-height:1.16;margin:0 0 .5em;
  color:var(--verde);letter-spacing:.005em}
h1{font-size:clamp(34px,6vw,58px)}
h2{font-size:clamp(27px,4vw,40px)}
h3{font-size:clamp(20px,2.4vw,25px)}
p{margin:0 0 1.1em;max-width:70ch}

.env{max-width:var(--larg);margin:0 auto;padding:0 var(--gutter)}
.secao{padding:clamp(56px,8vw,104px) 0}
.secao--creme{background:var(--creme-fundo)}
.secao--verde{background:var(--verde-fundo);color:var(--creme)}
.secao--verde h2,.secao--verde h3{color:var(--dourado-claro)}
.secao--verde a{color:var(--dourado-claro)}

/* Duas secoes escuras coladas viram um bloco so — alternar sempre.
   (Aprendido no Lima & Balconi, vale aqui igual.) */

.chapeu{font:700 12px/1.4 var(--sans);letter-spacing:.19em;text-transform:uppercase;
  color:var(--dourado-texto);margin:0 0 14px}
.secao--verde .chapeu{color:var(--dourado-claro)}

/* fio dourado fino — elemento do molde deles */
.fio{width:64px;height:2px;background:var(--dourado);border:0;margin:0 0 26px}
.secao--verde .fio{background:var(--dourado-claro)}

.destaque{color:var(--dourado-texto)}
.secao--verde .destaque{color:var(--dourado-claro)}

/* --- barra de versoes (so existe enquanto o site esta em revisao) -------
   Duas versoes, um link so: o cliente troca aqui em vez de abrir duas abas.
   Sai do ar junto com o `noindex` no dia em que ele escolher uma. */
.versoes{background:var(--verde-fundo);color:#CFC6B4;
  font:400 13px/1 var(--sans)}
.versoes .env{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:center;padding-top:11px;padding-bottom:11px}
.versoes__rotulo{letter-spacing:.08em;text-transform:uppercase;font-size:11px;
  color:#A79C88}
.versoes__par{display:inline-flex;border:1px solid rgba(222,186,98,.4);
  border-radius:999px;overflow:hidden}
.versoes__par > b,.versoes__par > a{padding:7px 18px;font-weight:700;
  font-size:12.5px;letter-spacing:.04em;text-decoration:none}
.versoes__par > b{background:var(--dourado);color:#20180A}
.versoes__par > a{color:var(--dourado-claro)}
.versoes__par > a:hover{background:rgba(222,186,98,.16)}

/* ---------------------------------------------------------------- cabecalho */
.cabeca{position:sticky;top:0;z-index:40;background:var(--creme);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.cabeca.rolou{border-bottom-color:var(--linha);box-shadow:0 2px 18px rgba(12,59,54,.07)}
.cabeca .env{display:flex;align-items:center;gap:20px;
  min-height:98px;padding-top:12px;padding-bottom:12px}
/* O logo em paisagem (o .ai que ele mandou) e a marca inteira: simbolo mais
   "Centro Educacional Astúrias". Nada de texto ao lado — nem o nome (que ele ja
   traz) nem a cidade, que aparece tres vezes logo abaixo: no chapeu da capa, no
   selo de series e no rodape.
   Altura fixa e largura automatica: o SVG tem 2,53:1 e quem manda e a altura. */
.marca{display:flex;align-items:center;text-decoration:none;margin-right:auto}

/* ======================================================================
   A BANDEIRINHA DO CABECALHO
   ----------------------------------------------------------------------
   Ideia dele, e ela resolve um problema que nao tinha saida dentro do
   cabecalho: o logo estava preso a 75px de altura porque o cabecalho e
   STICKY - altura ali sai da tela do visitante o tempo todo - e nessa
   altura a versalete "CENTRO EDUCACIONAL" caia em 8,0px, metade do que ela
   precisa. Medido, e a causa do serrilhado que ele viu.

   A bandeira quebra esse teto: ela PENDURA pra fora do cabecalho, entao o
   logo cresce sem o cabecalho crescer junto. Aqui ele vai a 150px, e a
   versalete sobe de 8,0 pra ~13px.

   🔴 Usa o lockup EMPILHADO (`logo-empilhado.svg`), tirado do
   `Asturias vetor.ai`. Duas tentativas minhas de derivar esse empilhado
   fatiando o SVG em paisagem por coordenada terminaram com letra faltando
   ("AST RIAS", e depois o "CE" de CENTRO sumido). Logo de cliente nao se
   remonta por heuristica - ou vem do vetor certo, ou nao vem.
   ====================================================================== */
.marca--bandeira{
  position:absolute;left:0;top:0;z-index:3;
  display:flex;align-items:flex-start;justify-content:center;
  width:196px;height:246px;padding:20px 16px 0;
  /* 🔴 O FUNDO E O RECORTE NAO MORAM MAIS AQUI — ver o `::after` logo abaixo.
     `clip-path` e `filter` no MESMO elemento se anulam: o Chrome recorta o
     resultado ja filtrado, entao a sombra e desenhada e em seguida aparada
     rente ao contorno da bandeira. Ela existia no CSS desde o primeiro dia e
     nao pintava um pixel — medido: fora da borda direita o cabecalho lia
     #FAF6EE limpo, o creme puro, sem gradiente nenhum.
     A separacao e a correcao: o `::after` carrega o recorte, o `<a>` carrega
     o filtro. Como o `<a>` nao recorta mais nada, a sombra sai inteira. */
  /* Sombra em DUAS camadas, como no exemplo dele: uma curta e escura que
     descola a bandeira do cabecalho, e uma longa e aberta que a joga sobre a
     foto. Uma camada so ou fica dura (curta) ou fica fumaca (longa). */
  /* ⚠️ Sombra PRETA, nao verde. A 1a versao usava rgba(12,59,54) — o proprio
     verde do site — e sumia justamente onde ela precisa aparecer: a ponta da
     bandeira cai sobre a foto escura da capa, e verde sobre verde nao e sombra.
     Preto com pouca opacidade le nos dois fundos, no creme do cabecalho e na
     foto. Duas camadas: uma curta que descola, uma longa que assenta. */
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.24))
         drop-shadow(5px 14px 22px rgba(0,0,0,.40));
  transition:height .28s ease,padding-top .28s ease}
/* o corpo da bandeira: e ELE que tem a ponta de flamula — os lados descem ate
   82% e o meio fecha em bico. `z-index:-1` fica preso aqui dentro porque o
   `filter` do pai ja abre um contexto de empilhamento proprio. */
.marca--bandeira::after{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--creme);
  clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%)}
/* o fio interno, que da o ar de flamula costurada. Vem de `background` (e nao
   de `border`) porque a `clip-path` cortaria a borda em bico nos cantos. */
/* 🔴 O FUNDO DA COSTURA E PORCENTAGEM, NAO PIXEL. Com `30px` fixo a linha
   descia ate 216 dos 246px da bandeira — e a lateral do bico ja tinha virado
   pra dentro aos 202px. A costura VAZAVA 14px pra fora da flamula, e piorava
   quanto menor a bandeira ficava: ela encolhe pra 132px ao rolar e pra 168 no
   celular, mas os 30px nao encolhiam junto.
   A conta do bico: a lateral desce ate 82% da altura e so entao fecha em
   V ate 100%. Na coluna da costura (9px de 196, ou 4,6% da largura) a borda
   ja esta em ~83,7% — entao qualquer fundo abaixo de ~16,3% vaza. Os 24%
   deixam a linha terminar com folga ACIMA da dobra, nos tres tamanhos.
   Ele preferiu assim, e com razao: "prefiro que ela seja menor do que ficar
   vazando". */
.marca--bandeira::before{
  content:"";position:absolute;inset:9px 9px 24%;
  border:1px solid rgba(193,140,38,.34);
  border-bottom:0;pointer-events:none}
/* ⚠️ `.cabeca` na frente de proposito: `.marca img{height:75px}` mora mais
   ABAIXO nesta folha e, com a mesma especificidade (0,1,1), venceria por ordem
   - o logo saiu a 75px na 1a tentativa. Subir pra 0,2,1 tira a disputa da
   ordem das linhas, que e o tipo de coisa que volta a quebrar quando alguem
   move um bloco de lugar. */
.cabeca .marca--bandeira img{height:150px;width:auto;max-width:100%;
  transition:height .28s ease}

/* ⚠️ ROLOU = a bandeira se recolhe. Sem isto ela fica pendurada sobre o
   texto o tempo todo, porque o cabecalho e sticky: o visitante rolaria a
   pagina inteira com 146px de creme tapando a coluna da esquerda. */
.cabeca.rolou .marca--bandeira{height:132px;padding-top:12px}
.cabeca.rolou .marca--bandeira img{height:74px}   /* 0,2,1 tambem */

/* a bandeira saiu do fluxo, entao o menu assume o empurrao pra direita que
   era do `.marca{margin-right:auto}` */
.cabeca .env{position:relative}
.cabeca .env > .menu{margin-left:auto}
.cabeca .env > .marca--bandeira ~ .abrir-menu{margin-left:auto}
/* 75px = o TETO sem o cabeçalho crescer: ele tem min-height 98 e 24 de padding,
   entao o espaço interno e 74–75px e ja esta pago. Passar disso empurra o
   cabeçalho pra cima de 100px, e ele e sticky — altura ali sai da tela do
   visitante o tempo todo. Medido, nao chutado. */
.marca img{height:75px;width:auto;max-width:none}
@media(max-width:520px){.marca img{height:58px}}

.menu{display:flex;gap:26px;align-items:center}
.menu a{font:400 15px/1 var(--sans);text-decoration:none;color:var(--tipo);
  padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover{border-bottom-color:var(--dourado)}
.menu a[aria-current=page]{color:var(--verde);border-bottom-color:var(--dourado)}

.botao{display:inline-block;font:700 14px/1 var(--sans);letter-spacing:.05em;
  text-decoration:none;padding:15px 26px;border-radius:2px;
  background:var(--verde);color:var(--creme);border:2px solid var(--verde);
  transition:background .2s,color .2s}
.botao:hover{background:var(--verde-claro);border-color:var(--verde-claro)}
.botao--vazado{background:transparent;color:var(--verde)}
.botao--vazado:hover{background:var(--verde);color:var(--creme)}
.secao--verde .botao{background:var(--dourado);border-color:var(--dourado);color:#20180A}
.secao--verde .botao:hover{background:var(--dourado-claro);border-color:var(--dourado-claro)}

.abrir-menu{display:none;background:none;border:0;padding:8px;cursor:pointer}
.abrir-menu span{display:block;width:24px;height:2px;background:var(--verde);margin:5px 0}

/* -------------------------------------------------------------------- capa */
.capa{position:relative;background:var(--verde-fundo);color:var(--creme);
  overflow:hidden}
/* --- o banner: tres fotos em laco, com Ken Burns bem suave ---------------
   CICLO 24s, 8s por foto, cruzamento de ~1,5s. As tres camadas sao a MESMA
   animacao com atraso NEGATIVO, entao a primeira ja entra visivel — sem buraco
   preto no primeiro segundo, que e o defeito classico de carrossel em CSS.
   A ampliacao vai so ate 1,06: mais que isso deixa de ser respiro e vira
   movimento, e o assunto (o sorriso) escapa do quadro. Por isso os arquivos do
   banner saem a 2200px — imagem que cresce na tela precisa de pixel sobrando. */
.capa__foto{position:absolute;inset:0;overflow:hidden;background:var(--verde-fundo)}
.capa__quadro{position:absolute;inset:0;opacity:0;--fx:60%;--fy:35%;
  animation:capa-troca 24s linear infinite}
.capa__quadro:nth-child(1){animation-delay:0s}
.capa__quadro:nth-child(2){animation-delay:-16s}
.capa__quadro:nth-child(3){animation-delay:-8s}
/* 🔴 01/09/2026 — O RECORTE E O ZOOM PASSARAM A SEGUIR O ROSTO.
   Antes o `object-position` era 50% 42% pras TRES fotos, e cada uma tem o
   rosto numa altura diferente — a ancora `--fy` ja media isso (29%, 42% e
   22%). Na terceira, de rosto bem no alto, o recorte fixo empurrava a cabeca
   pra fora do quadro: medido em -40px de folga.
   E o `scale` ampliava a partir do CENTRO, entao a folga ENCOLHIA ao longo
   dos 8s — a foto 1 saia de 53px e chegava a -0,5px no fim do movimento.
   Agora os dois usam a mesma ancora: o recorte alinha o rosto, e o zoom
   cresce EM TORNO dele. Ver `conferir_cabeca_banner.py`, que mede isso no
   quadro renderizado ao longo do laco. */
.capa__quadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% var(--fy);
  transform-origin:var(--fx) var(--fy);
  will-change:transform;
  animation:capa-zoom 24s ease-in-out infinite}
.capa__quadro:nth-child(1) img{animation-delay:0s}
.capa__quadro:nth-child(2) img{animation-delay:-16s}
.capa__quadro:nth-child(3) img{animation-delay:-8s}

@keyframes capa-troca{
  0%{opacity:1} 27%{opacity:1} 33.3%{opacity:0}
  93.7%{opacity:0} 100%{opacity:1}
}
/* A volta ao tamanho original acontece ENQUANTO a foto esta invisivel (40%-60%).
   Se o reset caisse no 100%, o salto de escala apareceria na troca. */
@keyframes capa-zoom{
  0%{transform:scale(1)} 33.3%{transform:scale(1.06)} 40%{transform:scale(1.06)}
  60%{transform:scale(1)} 100%{transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .capa__quadro img{animation:none;transform:none}
}

/* --- a vinheta, ANCORADA NO ROSTO de cada foto ---------------------------
   🔴 Vinheta generica tapa sorriso. Uma vinheta que escurece as bordas por
   igual nao sabe que numa das fotos o rosto esta justamente perto da borda —
   e apaga o assunto. Aqui cada camada leva o SEU centro (`--fx`/`--fy`,
   medido foto a foto na grade de 10%), e o claro se abre exatamente ali.
   O veu nao escala junto com a foto: ele e irmao do <img>, nao filho, senao o
   Ken Burns arrastaria a sombra do texto junto.

   Tres camadas, de cima pra baixo:
   (1) o CLARO do rosto — um buraco na sombra, centrado em --fx/--fy;
   (2) a sombra do texto, que morre antes do meio do quadro;
   (3) a costura com a secao verde de baixo. */
.capa__veu{position:absolute;inset:0;pointer-events:none;
  --fx:60%; --fy:35%;
  background:
    linear-gradient(90deg,rgba(5,32,29,.95) 0%,rgba(5,32,29,.88) 30%,
      rgba(5,32,29,.50) 52%,rgba(5,32,29,.10) 74%,rgba(5,32,29,0) 86%),
    linear-gradient(180deg,rgba(12,59,54,.42) 0%,rgba(12,59,54,0) 26%,
      rgba(12,59,54,0) 58%,var(--verde-fundo) 100%);
  /* 🔴 O claro do rosto e uma MASCARA, nao mais um gradiente somado por cima.
     Somando, cada camada de sombra escurecia o rosto de novo — medi 41% do
     brilho original com o "claro" ligado. A mascara APAGA o veu inteiro ali:
     dentro do buraco nao sobra sombra nenhuma pra somar.
     Raio curto de proposito (22% da largura): tem que caber a cabeça e nao
     chegar no texto, que termina por volta de 35%. */
  -webkit-mask-image:
    radial-gradient(20% 40% at var(--fx) var(--fy),
      transparent 0%,transparent 40%,#000 100%),
    linear-gradient(90deg,#000 0%,#000 42%,transparent 54%);
  -webkit-mask-composite:source-over;
  mask-image:
    radial-gradient(20% 40% at var(--fx) var(--fy),
      transparent 0%,transparent 40%,#000 100%),
    linear-gradient(90deg,#000 0%,#000 42%,transparent 54%);
  /* UNIAO, nao intersecao: o veu aparece onde o radial mandar OU onde o linear
     mandar. Sem esta segunda camada o buraco do rosto avança pra esquerda e
     come a ultima palavra do titulo — medi 2,43:1 assim. Agora, ate 42% da
     largura o veu e sempre pleno, aconteça o que acontecer com o rosto. */
  mask-composite:add}

/* No celular o texto ocupa a largura toda: a sombra passa a ser vertical, e o
   claro do rosto sobe pra nao ser comido pelo bloco de texto de baixo. */
/* --- o texto da capa ---------------------------------------------------- */
.capa .env{position:relative;z-index:2;
  padding-top:clamp(72px,12vw,132px);padding-bottom:clamp(64px,10vw,112px)}
.capa h1{color:var(--creme);max-width:15ch}
.capa .chapeu{color:var(--dourado-claro)}
.capa__linha{font-family:var(--serifa);font-size:clamp(19px,2.6vw,27px);line-height:1.5;
  color:#EFE7D6;max-width:34ch;margin:0 0 30px}
.capa__acoes{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.capa__selo{font:400 14px/1.5 var(--sans);color:#D7CFC0;margin:26px 0 0}

/* 🔴 A base do texto da capa fica ANTES do @media de proposito. Ela estava
   depois, com a mesma especificidade, e anulava calado o padding-top do
   celular — o texto continuava no topo, em cima do rosto. */
@media(max-width:839px){
  /* No celular entra o recorte VERTICAL (ver o <picture>), refeito em
     30/08/2026 pra por o rosto principal a 26% da altura — acima da faixa
     onde o texto comeca.

     🔴 O ANCORA E O TOPO, e nao o centro. Num celular de 390 a foto 3:4
     preenche a altura exata e nao sobra nada pra deslocar, entao `50%` e
     `28%` dao no mesmo. Mas em 820 de largura (tablet, ainda no desenho
     empilhado) a mesma foto passa a sobrar 293px de altura, e centrar joga o
     recorte pra baixo: os tres rostos desciam pra debaixo do titulo. Medido:
     com `50%` eles caiam em y=497, 523 e 536, com o texto comecando em 450.
     Ancorando em 28% o excedente e aparado por BAIXO, que e onde so ha chao.

     ⚠️ Uma regra so, sem breakpoint no meio: onde nao ha sobra vertical ela
     nao faz nada, e onde ha, faz a coisa certa. Dois valores em duas faixas
     seriam duas verdades pra manter. */
  .capa__quadro img{object-position:50% 28%}
  /* 🔴 No celular o rosto e o texto brigam pelo MESMO espaço: a coluna e uma
     so. Buraco lateral nao resolve — medi 1,05:1 tentando. O que resolve e
     mudar o desenho: a foto fica com o terço de cima livre pra respirar, e o
     texto desce pro terço de baixo, sobre veu cheio. Cada um no seu lugar. */
  .capa .env{padding-top:min(42vh,300px)}
  /* ⚠️ O rosto fica PARCIALMENTE sob o veu aqui, e nao ha conserto: a coluna
     e uma so e o corte da foto e LATERAL (ela ja cobre a altura toda), entao
     nao da pra subir a imagem. Entre texto ilegivel e rosto meio velado,
     vence o texto. */
  /* 🔴 01/09/2026 (laudo): o chapeu dourado media 3,26:1 aqui — a rampa escura
     so comecava em 48% da altura, e o texto comeca por volta de 42vh
     (`padding-top` do `.env`). Ou seja: o veu escurecia DEPOIS do texto.
     A rampa subiu para 36%, e o topo continua claro pra foto respirar. */
  .capa__veu{background:
    linear-gradient(180deg,rgba(7,40,36,.12) 0%,rgba(7,40,36,.12) 26%,
      rgba(5,32,29,.86) 36%,rgba(5,32,29,.95) 60%,var(--verde-fundo) 100%);
  -webkit-mask-image:none;mask-image:none}
}   /* <- fecha o @media do celular. Ele ficou ABERTO quando movi um
        bloco daqui pra cima, e engoliu o resto da folha: `.promessa`,
        `.esfuma`, `.difs` e tudo mais so valiam ate 839px. */

/* --------------------------------------------------------------- promessa */
.promessa{text-align:center}
.promessa h2{max-width:20ch;margin-inline:auto}
.promessa p{margin-inline:auto;text-align:left}
/* 🔴 CADA COLUNA PRECISA DA PROPRIA CABEÇA. Antes eram tres paragrafos soltos,
   e o filete dourado da secao e CENTRALIZADO — entao ele lia como cabeça da
   coluna do meio e as outras duas ficavam decapitadas. Ele viu na hora:
   "falta coisa acima dos textos 1 e 3".
   O conserto e o da referencia que ele mandou: anel com o icone, rotulo
   numerado, e filete VERTICAL separando as colunas. O `gap` some justamente
   pra que o filete caia no meio exato entre duas colunas — com gap, a borda
   fica colada numa e longe da outra. */
.promessa__grade{display:grid;gap:0;margin-top:44px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.promessa__grade p{margin:0;font-size:16px;color:var(--tipo-fraco);max-width:none}
.missao__item{padding:0 clamp(18px,2.6vw,38px);text-align:center}
.missao__item + .missao__item{border-left:1px solid rgba(193,140,38,.22)}

/* o anel: contorno fino, o mesmo peso do filete da secao */
.missao__icone{display:block;width:66px;height:66px;margin:0 auto 22px;
  border-radius:50%;border:1px solid rgba(193,140,38,.55);
  background-repeat:no-repeat;background-position:center;background-size:30px 30px}
.missao__item--1 .missao__icone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23C18C26' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M18 11C14 7 8 6 3 7v20c5-1 11 0 15 4 4-4 10-5 15-4V7c-5-1-11 0-15 4z'/%3E%3Cpath d='M18 11v20'/%3E%3C/svg%3E")}
.missao__item--2 .missao__icone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23C18C26' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 6h24'/%3E%3Cpath d='M10 6c0 3 3 4 3 4h10s3-1 3-4'/%3E%3Cpath d='M13 10v16M23 10v16'/%3E%3Cpath d='M10 26h16'/%3E%3Cpath d='M10 26v4M26 26v4'/%3E%3Cpath d='M6 30h24'/%3E%3C/svg%3E")}
.missao__item--3 .missao__icone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23C18C26' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M18 30S5 21 5 13.5A7.5 7.5 0 0 1 18 9 7.5 7.5 0 0 1 31 13.5C31 21 18 30 18 30z'/%3E%3C/svg%3E")}

/* o rotulo numerado. O travessao vem do CSS e nao do texto: ele e ornamento,
   e ornamento no conteudo vira lixo em leitor de tela e em busca. */
/* ⚠️ `.promessa__grade .missao__rotulo` e nao `.missao__rotulo`: logo acima
   ha `.promessa__grade p{margin:0}` com peso 0,1,1, e um `!important` aqui
   resolveria o sintoma criando um problema pior — `!important` nao se
   desfaz sem outro `!important`, e o kids precisa mexer nisso. */
.promessa__grade .missao__rotulo{font:700 12px/1.5 var(--sans);
  letter-spacing:.13em;text-transform:uppercase;
  /* 🔴 `--dourado-texto`, NAO `--dourado`. O dourado da marca e de FILETE e
     BORDA: como texto de 12px sobre creme ele da 2,76:1, quando o minimo e
     4,5. A variavel escura existe ha tempo, com o comentario dizendo
     exatamente isto — eu peguei a de ornamento por distracao. Com ela: 5,1:1,
     o mesmo do chapeu logo acima. */
  color:var(--dourado-texto);
  margin:0 0 14px}
.missao__rotulo b{font-weight:700}
.missao__rotulo b::after{content:" — "}

/* 🔴 `.promessa p{text-align:left}` mora acima e e 0,1,1 contra os 0,1,1
   daqui: empatariam e venceria por ordem. Como a linha de cima pode se mexer
   um dia, o seletor daqui e mais forte de proposito. */
.promessa .promessa__grade p{text-align:center}

/* empilhado, o filete vira horizontal: vertical entre blocos empilhados nao
   separa nada, so pendura um risco no lado esquerdo do texto */
@media(max-width:839px){
  .missao__item{padding:0}
  .missao__item + .missao__item{border-left:0;
    border-top:1px solid rgba(193,140,38,.22);margin-top:30px;padding-top:30px}
}

/* ------------------------------------------------------- foto esfumada */
/* O molde deles nunca usa borda dura: a foto DISSOLVE no fundo.
   Uma radial so nao serve — com raio grande a transicao cai fora da imagem e a
   borda continua reta (foi o que aconteceu na 1a volta). Duas mascaras
   lineares cruzadas, uma por eixo, esfumam os QUATRO lados de verdade. */
/* ⚠️ O NOME `.esfuma` FICOU, o esfumado nao. A classe era isto aqui: uma
   mascara que dissolvia as quatro bordas da foto no fundo. Ele foi tirando o
   efeito bloco a bloco (matriculas, cards, coluna dupla) ate pedir, em
   30/08/2026, que sumisse do site inteiro. Deixo o nome porque ele e o gancho
   de todas as regras de foto da folha e do gerador; trocar isso agora seria
   mexer em cinquenta lugares pra ganhar um nome melhor.
   Onde ainda houver `mask-image` numa foto, e FORMA (a bolha do infantil),
   nunca dissolucao de borda. */
.esfuma{position:relative}
.esfuma img{width:100%;
  -webkit-mask-image:none;
  mask-image:none;
  mask-composite:intersect}

/* ---------------------------------------------------------- diferenciais */
.difs{display:grid;gap:clamp(26px,4vw,44px);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.dif h3{margin-bottom:.35em}
.dif p{font-size:16px;color:var(--tipo-fraco);margin:0}
.secao--verde .dif p{color:#CFC6B4}
.dif__fig{margin:0 0 16px}
/* Toda foto de cartao vira 4:3, venha retrato ou paisagem. Sem isso, uma foto
   em pe estica a linha inteira da grade e o titulo dela desce sozinho. */
.dif__fig img{aspect-ratio:4/3;object-fit:cover;width:100%}
/* O cartao sem foto ganha o mesmo respiro do que tem, senao a linha desalinha. */
.dif:not(:has(.dif__fig)) h3{margin-top:6px}

/* ------------------------------------------------------------ duas colunas */
.duas{display:grid;gap:clamp(30px,5vw,64px);align-items:center;
  grid-template-columns:1fr}
@media(min-width:840px){
  .duas{grid-template-columns:1.05fr .95fr}
  .duas--troca .duas__foto{order:-1}
}
.duas__texto p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ lista */
.lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lista li{position:relative;padding-left:26px;line-height:1.6}
/* virgula em CSS nao distribui prefixo — cada seletor leva o seu por inteiro */
.lista li::before{content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border:2px solid var(--dourado);transform:rotate(45deg)}
.secao--verde .lista li::before{border-color:var(--dourado-claro)}
.lista b{font-weight:700}
.lista span{color:var(--tipo-fraco)}
.secao--verde .lista span{color:#CFC6B4}

/* ------------------------------------------------------------------ caixa */
/* "caixa de borda dourada com o dado seco" — molde deles */
.caixa{border:2px solid var(--dourado);padding:clamp(24px,4vw,38px);
  background:rgba(255,255,255,.5)}
.secao--verde .caixa{border-color:var(--dourado-claro);background:rgba(0,0,0,.16)}
.caixa h3{margin-top:0}
.caixa p:last-child{margin-bottom:0}

/* --------------------------------------------------------------- pilares */
.pilares{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 26px;padding:0;list-style:none}
.pilares li{font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--dourado-claro);color:var(--dourado-claro);padding:11px 18px}

/* ------------------------------------------------------------------ fecho */
.fecho{text-align:center}
.fecho h2{max-width:18ch;margin-inline:auto;margin-bottom:0}

/* o filete com o losango entre a chamada e a marca — pedido dele em
   29/08/2026, com o desenho na mao. Nao e enfeite novo: e EXATAMENTE o mesmo
   ornamento que ja separa a foto do texto nos cards da versao classica, so
   que no dourado claro, que e o que a folha usa sobre fundo escuro.
   Repetir o gesto que o site ja tem e o que faz parecer identidade em vez de
   decoracao avulsa.

   Ele tambem RESOLVE o vao: sem nada ali, a chamada e a marca ficavam a 70px
   uma da outra e liam-se como dois blocos soltos. Com o filete no meio, o
   olho desce de um pro outro sem pausa.

   ⚠️ Sai de `::after` do proprio h2, nao de elemento no HTML — ornamento no
   conteudo vira lixo em leitor de tela e em busca, mesma regra do travessao
   do rotulo numerado. */
.fecho h2::after{content:"";display:block;height:13px;width:min(46%,188px);
  margin:clamp(13px,1.7vw,19px) auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.3 10.7 6 6 10.7 1.3 6Z' fill='none' stroke='%23DEBA62' stroke-width='1.15'/%3E%3C/svg%3E") center/11px 11px no-repeat,
    linear-gradient(var(--dourado-claro),var(--dourado-claro))
      left center/calc(50% - 13px) 1px no-repeat,
    linear-gradient(var(--dourado-claro),var(--dourado-claro))
      right center/calc(50% - 13px) 1px no-repeat}

/* a seta no botao do fecho, e SO nele. E o ultimo botao da pagina, o que
   fecha o assunto: a seta marca que dali se sai do site pro WhatsApp. Nos
   outros botoes ela viraria ruido repetido.
   ⚠️ Em `::after` com `content:""` e desenho de fundo, nao com o caractere
   "›": caractere entra na arvore de acessibilidade e o leitor de tela
   anuncia "sinal de maior" no fim do rotulo. */
.fecho .botao::after{content:"";display:inline-block;width:7px;height:11px;
  margin-left:11px;vertical-align:-1px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1l4.6 4.5L1 10' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/7px 11px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1l4.6 4.5L1 10' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/7px 11px no-repeat}
.fecho p{margin-inline:auto;margin-bottom:28px}
/* a marca abrindo o fecho — pedido dele, "pra valorizar". E o unico lugar do
   site onde o simbolo aparece sozinho e grande; no cabecalho ele vem dentro
   da bandeirinha e no rodape vem miudo, ao lado do endereco.

   A ORDEM E DELE (29/08/2026): chamada, marca, promessa, botao. O logo no
   meio funciona porque a chamada "Venha nos conhecer" nao diz QUEM — quem
   responde e a marca, e a linha de baixo so entrega o motivo. Com o logo em
   cima, a marca chegava antes do convite e o bloco abria com assinatura.

   🔴 O CHAPEU SAIU quando o logo entrou. Ele dizia "COLÉGIO ASTÚRIAS", o
   logo diz ASTÚRIAS e o titulo dizia "Venha conhecer o Colégio Astúrias": o
   nome aparecia TRES vezes em quatro linhas. Marca so valoriza quando ela e
   a unica a se apresentar — repetida, vira ruido e o olho passa por cima.

   ⚠️ O `alt` VOLTOU a ter texto. Enquanto o chapeu existia, a imagem era
   ornamento e ler o nome duas vezes seguidas atrapalhava. Agora ela e a
   UNICA coisa do bloco que diz o nome do colegio: sem alt, quem ouve a
   pagina recebe "Venha nos conhecer" sem saber quem convida.

   🔴 `display:block` EXPLICITO junto do `margin:auto`. Margem automatica nao
   centraliza elemento em linha, e <img> e em linha por padrao: sem o block,
   quem centralizava era o `text-align` herdado do pai — e basta uma regra
   de imagem em qualquer outro lugar da folha pra derrubar isso sem erro
   nenhum. Aqui o centro nao depende do pai. */
.fecho__marca{display:block;width:clamp(230px,34.2vw,342px);height:auto;
  margin:clamp(16px,2vw,24px) auto clamp(22px,2.8vw,32px);opacity:.95}

/* ----------------------------------------------------------------- rodape */
/* "rodape verde com WhatsApp e Instagram" — molde deles */
.rodape{background:var(--verde-fundo);color:#CFC6B4;padding:clamp(44px,6vw,66px) 0 34px;
  font-size:15px}
.rodape a{color:var(--dourado-claro)}
.rodape__grade{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.rodape h4{font:600 19px/1.2 var(--serifa);color:var(--dourado-claro);margin:0 0 12px}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rodape__fim{margin-top:36px;padding-top:20px;border-top:1px solid rgba(222,186,98,.22);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:13px;color:#A79C88}
.rodape__marca img{width:52px}

/* --- o rodape no celular: duas colunas em vez de uma torre ---------------
   🔴 Ele apontou em 29/08/2026: "está mal distribuído, parecendo sobrar muito
   espaço". Sobrava mesmo, e a causa e a propria grade: `minmax(210px,1fr)`
   com `auto-fit` so cabe UMA coluna numa tela de 390, entao os quatro blocos
   viravam uma torre de 889px com o lado direito vazio — listas de duas ou
   tres linhas ocupando a largura inteira.

   Aqui a grade passa a ter duas colunas fixas. Marca e Contato atravessam as
   duas, porque carregam linha comprida (o endereco inteiro e o telefone); "O
   colegio" e "Paginas" sao listas curtas e vao lado a lado, que e onde estava
   o espaco desperdicado. */
@media(max-width:639px){
  .rodape__grade{grid-template-columns:1fr 1fr;gap:26px 20px}
  .rodape__marca,
  .rodape__grade > div:nth-child(2){grid-column:1 / -1}
  .rodape h4{font-size:17px;margin-bottom:9px}
  .rodape ul{gap:7px}
}

/* a assinatura de quem fez, pedida por ele em 29/08/2026. Vai na terceira
   coluna da linha de baixo, entao ela nunca disputa espaco com o nome do
   colegio nem com o lema — em tela estreita a linha quebra e a assinatura
   cai por ultimo, que e onde ela deve estar.
   🔴 EU TINHA ESCURECIDO O ROTULO um tom, achando que credito de fornecedor
   nao deve competir em peso com o nome do cliente. Medi: #8D836F sobre o
   verde do rodape da 3,31:1, e texto de 13px precisa de 4,5. E nao havia
   folga pra ajustar — o proprio #A79C88 do rodape ja esta em 4,58, quase no
   limite. Discricao que custa legibilidade nao e discricao, e texto ruim.
   Quem separa o credito do resto agora e a POSICAO (ultima coluna) e o
   sublinhado do link, nao a cor. */
.rodape__autoria a{color:#A79C88;text-decoration:none;
  border-bottom:1px solid rgba(167,156,136,.35)}
.rodape__autoria a:hover{color:var(--dourado-claro);
  border-bottom-color:var(--dourado-claro)}


/* ===================================================================== */
/* Blocos do benchmark das 8 escolas — 28/08/2026                        */
/* ===================================================================== */

/* a secao precisa ser relative pros rabiscos da versao kids se ancorarem */
.secao{position:relative}
.secao > .env{position:relative;z-index:1}
.capa{position:relative}

/* --- 1. cards de nivel ---------------------------------------------- */
.niveis{display:grid;gap:clamp(24px,3.5vw,38px);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.nivel__fig{margin:0 0 18px}
.nivel__fig img{aspect-ratio:4/3;object-fit:cover;width:100%}
.nivel__idade{font:700 12px/1.4 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dourado-texto);margin:0 0 6px}
.nivel h3{margin-bottom:.4em}
.nivel p{font-size:16px;color:var(--tipo-fraco);margin:0}

/* --- 2. numeros ------------------------------------------------------ */
.numeros{display:grid;gap:clamp(26px,4vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.numero b{display:block;font:600 clamp(38px,5vw,58px)/1.05 var(--serifa);
  color:var(--dourado-claro);margin-bottom:6px}
.numero span{display:block;font:700 12px/1.5 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--creme);margin-bottom:10px}
.numero p{font-size:15px;color:#CFC6B4;margin:0}

/* --- 3. instagram ---------------------------------------------------- */
.ig__topo{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;
  justify-content:space-between;margin-bottom:34px}
.ig__topo .fio{margin-bottom:0}
.ig{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* 🔴 CANTO E SOMBRA, pedido dele em 29/08/2026. Medindo as molduras de foto
   da home, esta era a UNICA do site inteiro com raio 0 e sombra nenhuma —
   `.nivel__fig` e `.dif__fig` ja tinham 15px e a mesma sombra baixa. Foto
   quadrada de canto vivo no meio de uma pagina de cantos macios nao le como
   escolha: le como bloco que ficou pra tras.

   O raio e 14 e nao 15 de proposito: aqui nao ha passe-partout, entao o canto
   e da FOTO e nao da moldura, e canto de foto pede um passo a menos. */
.ig__item{position:relative;display:block;text-decoration:none;overflow:hidden;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(42,44,46,.05),0 12px 26px rgba(42,44,46,.08);
  background:var(--verde-fundo)}
/* ⚠️ Suavizado em 29/08/2026, mesmo pedido dos cartoes de nivel. O que doia
   aqui nao era o zoom, era o APAGAO: a foto caia pra 72% de opacidade em
   0,3s, e a mudanca de brilho o olho pega muito antes da mudanca de tamanho.
   O escurecimento vai a 88% e passa a levar o mesmo tempo do zoom — os dois
   deixam de ser dois eventos e viram um so. */
.ig__item img{aspect-ratio:1;object-fit:cover;width:100%;
  transition:transform .55s cubic-bezier(.22,.7,.3,1),
             opacity .55s cubic-bezier(.22,.7,.3,1)}
.ig__item:hover img{transform:scale(1.02);opacity:.88}
/* a legenda so aparece no ponteiro; no dedo o hover fica PRESO, entao ali ela
   simplesmente nao existe — o link continua levando ao perfil do mesmo jeito */
.ig__item span{position:absolute;inset:auto 0 0 0;padding:14px 16px;
  font:400 13px/1.45 var(--sans);color:var(--creme);
  background:linear-gradient(180deg,rgba(5,32,29,0),rgba(5,32,29,.92));
  opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
@media(hover:hover){.ig__item:hover span{opacity:1;transform:none}}
@media(hover:none){.ig__item span{display:none}}

/* --- 4. depoimentos --------------------------------------------------- */
.depos{display:grid;gap:clamp(24px,4vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.depo{margin:0;border-left:2px solid var(--dourado);padding-left:24px}
.depo blockquote{margin:0 0 16px;font:400 clamp(18px,2.2vw,22px)/1.55 var(--serifa);
  color:var(--verde)}
.depo figcaption b{display:block;font:700 14px/1.4 var(--sans)}
.depo figcaption span{font-size:14px;color:var(--tipo-fraco)}

/* --- 6. selo no rodape ------------------------------------------------ */
.selos{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.selo{font:400 12px/1.4 var(--sans);letter-spacing:.06em;color:#CFC6B4;
  border:1px solid rgba(222,186,98,.35);padding:9px 14px}

/* --- mapa ------------------------------------------------------------- */
/* proporcao fixa: iframe sem altura definida colapsa pra 150px e o mapa some */
.mapa{position:relative;aspect-ratio:16/8;border:2px solid var(--dourado);
  background:var(--creme-fundo)}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:600px){.mapa{aspect-ratio:4/3}}

/* =========================================================================
   NO CELULAR, AS GRADES DE CARD DESLIZAM PRO LADO
   -------------------------------------------------------------------------
   Pedido dele em 29/08/2026, apontando a secao dos niveis: "quero que essa
   secao seja de deslizar pro lado" e "nao gosto do site ficar tao comprido
   pra baixo".

   E o certo. Empilhado, tres cards de nivel comem 1.694px de rolagem e seis
   diferenciais comem 2.114 — juntos, 4 das 14 telas da home. Deitados, cada
   grade passa a ocupar UMA altura de card. O leitor nao perde nada: ele
   escolhe se quer o proximo, em vez de ter que rolar por cima dele.

   Vale so ate 839px. No desktop as tres colunas cabem lado a lado e a grade
   ja e a forma certa.

   🔴 A GRADE VIRA FLEX, e isso e de proposito. `grid-auto-flow:column` faria
   o mesmo desenho, mas as larguras em `%` da faixa de rolagem sao mais
   previsiveis em flex — e `grid-template-columns` continua herdado de cima e
   precisa ser desfeito de qualquer jeito.

   ⚠️ A SANGRA ATE A BORDA e o que faz o proximo card ESPIAR. Sem a margem
   negativa, a faixa terminava na coluna de texto e o card seguinte comecava
   fora da tela, sem nenhuma pista de que existia. O `padding` devolve por
   dentro o que a margem tirou por fora, entao o PRIMEIRO card continua
   alinhado com o titulo — quem encosta na borda e so o que vem depois.
   ========================================================================= */
@media(max-width:839px){
  .niveis,.difs,.ig{
    display:flex;
    grid-template-columns:none;
    align-items:stretch;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);
    margin-inline:calc(-1 * var(--gutter));
    /* 🔴 O RECHEIO DE BAIXO NAO E RESPIRO, E ESTRUTURA. Ele encontrou em
       29/08/2026: "ao tentar deslizar pra cima, ele tenta empurrar o
       carrossel para cima sem continuar a rolagem do site. Isso empaca a
       visita".

       A causa e uma regra do CSS que ninguem espera: quando UM eixo deixa de
       ser `visible`, o outro deixa junto. `overflow-x:auto` sozinho ja
       transforma o eixo Y em `auto` — medido, as seis faixas estavam assim.
       Bastava um pixel de sobra vertical pra faixa virar area de rolagem
       vertical: a do Instagram no infantil tinha 6px, do papel colorido que
       e deslocado pra baixo. O dedo comeca a subir, a faixa come o gesto ate
       o fim daqueles 6px e a pagina nao anda. Parece travamento, e nao ha
       erro nenhum pra achar.

       O conserto e nao deixar sobrar nada: o recheio de baixo cobre o
       deslocamento do papel e das sombras. Sobra vertical medida hoje: zero,
       nas duas versoes, em 360, 390 e 430.

       🔴 NAO PONHA `touch-action:pan-x` AQUI. Foi o que eu tentei primeiro,
       achando que devolveria o gesto vertical pra pagina. Ele nao devolve:
       PROIBE. `touch-action` vale pra sequencia de toque inteira, ancestrais
       incluidos, entao `pan-x` mata a rolagem da pagina que comeca em cima da
       faixa. Medido com dedo sintetico: a pagina andava +422px antes e 0px
       depois — o remendo empacava as SEIS faixas em vez de uma.

       E `overflow-y:hidden` tambem nao: recorte vertical corta a sombra dos
       cards do Instagram, que desce 26px, mais que o recheio. */
    padding:2px var(--gutter) 18px;
    /* a barra de rolagem some, mas o gesto continua: e um trilho de UM item,
       e barrinha horizontal no meio da pagina lê como defeito de layout */
    scrollbar-width:none}
  .niveis::-webkit-scrollbar,
  .difs::-webkit-scrollbar,
  .ig::-webkit-scrollbar{display:none}

  .niveis > *,.difs > *,.ig > *{
    flex:0 0 auto;
    scroll-snap-align:start;
    min-width:0}
  /* a largura diz quanto do proximo espia. Card com foto e texto pede quase a
     tela inteira; foto quadrada do Instagram cabe em duas por vez. */
  .niveis > *{width:84%}
  .difs > *{width:80%}
  .ig > *{width:62%}

  /* 🔴 A REVELACAO SAI DE DENTRO DA FAIXA. Card fora da tela por rolagem
     LATERAL nunca recebeu o `.veio`, entao ele chegava transparente e so
     aparecia depois de o dedo passar por ele — parecia card quebrado. Aqui
     dentro os cards ja nascem visiveis; quem ainda revela e a secao. */
  .niveis > .rev,.difs > .rev,.ig > .rev{
    opacity:1;transform:none;translate:none;transition:none}

  /* o ACENO: a faixa anda sozinha uma vez, quando entra na tela, e volta.
     Dois passos e nao um — um so parece solavanco de carregamento; o
     segundo, menor, e o que faz o olho ler "isso desliza" em vez de "isso
     piscou". A classe entra pelo JS, so quando a faixa TEM o que rolar.

     ⚠️ Volta ao lugar no fim. Qualquer sobra de deslocamento aqui vira card
     desalinhado com o titulo pelo resto da visita. */
  @keyframes acena-faixa{
     0%,14%  {translate:0}
    34%      {translate:-30px}
    54%      {translate:0}
    68%      {translate:-13px}
    86%,100% {translate:0}}
  .niveis.acena > *,.difs.acena > *,.ig.acena > *{
    animation:acena-faixa 2.3s cubic-bezier(.35,.85,.35,1) .45s both}
}

/* quem pede menos movimento nao ganha aceno nenhum — e o JS ja nem poe a
   classe. A regra fica aqui de qualquer jeito: e barata, e cobre o caso de a
   preferencia mudar depois que a pagina abriu. */
@media(prefers-reduced-motion:reduce){
  .niveis.acena > *,.difs.acena > *,.ig.acena > *{animation:none}
}


/* -------------------------------------------------------------- revelacao */
/* Nada some por padrao. A classe .rev so entra pelo JS, depois que o
   IntersectionObserver existe de verdade — sem JS, sem observer, ou com o
   observer falhando, a pagina fica visivel. Buraco na rolagem ja custou caro. */
.rev{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s ease}
.rev.veio{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
}

/* ---------------------------------------------------------------- celular */
@media(max-width:839px){
  .abrir-menu{display:block}
  .menu{position:absolute;top:100%;left:0;right:0;background:var(--creme);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 18px;
    border-bottom:1px solid var(--linha);display:none}
  .menu.aberto{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--linha)}
  .menu a:hover,.menu a[aria-current=page]{border-bottom-color:var(--dourado)}
  .cabeca .env{position:relative}
  /* 🔴 O botao NAO some no celular. Ele sumia, e medindo a rolagem em 390px eu
     achei uma faixa inteira (por volta de 1500px) sem CTA nenhum na tela — e o
     celular e onde o pai olha. Volta compacto, so com o verbo. */
  .cabeca .botao{padding:11px 15px;font-size:13px;letter-spacing:.03em}
  .cabeca .botao span{display:none}   /* "sua visita" cai; fica "Agende" */
}


/* ======================================================================
   CAPA DAS PAGINAS INTERNAS
   ----------------------------------------------------------------------
   🔴 As quatro internas nasceram com o titulo DIRETO em cima da foto. O veu
   inteiro tinha sido pensado pra home — mascara, buraco de rosto, medicao ao
   longo do laco de 24s — e ninguem levou nada disso pra ca. Medido em
   28/08/2026 pelo `conferir_capas.py`, no desktop:

       o-colegio            1,03:1     creme sobre creme
       matriculas           1,12:1
       projeto-pedagogico   1,23:1
       contato              1,96:1

   O `conferir.py` passava limpo porque ele olha rolagem, bloco invisivel e
   rabisco em cima de texto. Contraste de capa interna nao estava na lista de
   ninguem — o defeito morava no vao entre dois medidores.

   Aqui o veu e MAIS SIMPLES que o da home, e de proposito: foto unica, sem
   laco e sem rosto em posicao conhecida. Sombra que vem da ESQUERDA, onde o
   texto mora, e morre antes do meio — o lado direito da foto fica limpo, que
   e o pedido dele ("a vinheta pode ocorrer mantendo a parte importante da foto
   iluminada"). SEM mascara de rosto: sem saber onde o rosto esta, buraco vira
   aposta, e aposta errada apaga o titulo.
   ====================================================================== */
.capa--interna .capa__veu{
  background:
    linear-gradient(90deg,rgba(5,32,29,.94) 0%,rgba(5,32,29,.90) 26%,
      rgba(5,32,29,.74) 44%,rgba(5,32,29,.40) 62%,rgba(5,32,29,.12) 78%,
      rgba(5,32,29,0) 92%),
    linear-gradient(180deg,rgba(12,59,54,.44) 0%,rgba(12,59,54,.06) 30%,
      rgba(12,59,54,.10) 62%,var(--verde-fundo) 100%);
  /* a mascara e da home, e la ela abre o buraco do rosto. Aqui nao ha rosto
     marcado: sem isto, o buraco cairia em 60%/35% de qualquer foto. */
  -webkit-mask-image:none;mask-image:none}

/* No celular a coluna e uma so, igual a home: a sombra vira VERTICAL e o texto
   desce. ⚠️ Este bloco precisa vir DEPOIS do de cima e com a MESMA
   especificidade (0,2,0) — o `@media` que veste `.capa__veu` sozinho tem
   especificidade menor e seria atropelado pela regra de desktop acima. */
@media(max-width:839px){
  .capa--interna .capa__veu{
    background:
      linear-gradient(180deg,rgba(7,40,36,.20) 0%,rgba(7,40,36,.24) 30%,
        rgba(5,32,29,.80) 46%,rgba(5,32,29,.93) 66%,var(--verde-fundo) 100%);
    -webkit-mask-image:none;mask-image:none}
}


/* --- duas secoes verdes encostadas -------------------------------------
   Elas viram um bloco escuro so aos olhos, mas os paddings continuam somando:
   104px de baixo mais 104px de cima. Em "O colégio" isso abria ~200px de vazio
   no meio do escuro, entre os quatro pilares e o convite da visita — parecia
   pagina inacabada. Colados, os dois se leem como um fecho unico: os pilares
   apresentam, o convite fecha. */
.secao--verde:has(+ .secao--verde){padding-bottom:clamp(24px,3vw,44px)}
.secao--verde + .secao--verde{padding-top:0}


/* --- a foto da capa interna PREENCHE a moldura ---------------------------
   🔴 O <img> das capas internas nunca teve regra de tamanho: entrava com a
   largura da caixa e a ALTURA NATURAL dele. Na classica isso passou batido por
   sorte — a foto deitada fica maior que a faixa (1440x810 numa caixa de 657) e
   o `overflow:hidden` corta o que sobra, dando a impressao de preencher. No
   infantil, onde a moldura e um circulo de 526x556, a mesma imagem entrava com
   296px de altura e deixava **260px de verde chapado** na metade de baixo do
   circulo. Parecia bloco quebrado, e estava assim desde que a capa interna
   nasceu.
   Medido: `.capa__foto` 526x556 / `<img>` 526x296, `object-fit:fill`.
   ⚠️ Filho DIRETO de proposito (`>`): a home nao tem <img> solto ali dentro,
   ela tem as tres camadas `.capa__quadro`, que ja se resolvem sozinhas. */
/* 🔴 01/09/2026 — o `>` aqui e o detalhe que quebra com WebP: envolver a foto
   num <picture> poe um no no meio e o filho DIRETO deixa de ser o <img>.
   Os dois casos ficam listados, entao vale antes e depois da mudanca. */
.capa__foto > img,
.capa__foto > picture > img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover}


/* ======================================================================
   MOLDURA DE GALERIA — so na versao CLASSICA
   ----------------------------------------------------------------------
   Pedido dele em 28/08/2026, com um exemplo na mao: a foto deixa de flutuar
   solta no fundo e passa a viver dentro de um PASSE-PARTOUT — cartao creme
   claro, filete quente, canto arredondado e sombra baixa — com um filete
   dourado e um losango vazado logo abaixo, separando a imagem do texto.

   E o gesto certo pra esta versao: o passe-partout e a linguagem de quadro
   emoldurado, que e o que a versao classica esta dizendo o tempo todo. A
   foto ganha borda definida em vez de dissolver no bege.

   ⚠️ A `.esfuma` sai daqui. Ela esfuma as quatro bordas da imagem, e
   imagem esfumada dentro de moldura fica com cara de erro de impressao: a
   moldura promete corte reto e a foto entrega degrade. Dentro do quadro a
   foto e NITIDA; quem faz a borda agora e a moldura.

   🔴 Nao vale no infantil. La as fotos sao recortadas por mascara SVG, e
   mascara corta a moldura junto — sobraria sombra de um retangulo que nao
   existe mais. O `_kids.css` desliga tudo isto logo depois.
   ====================================================================== */
.nivel__fig,.dif__fig{
  position:relative;                 /* o filete se pendura aqui */
  background:var(--creme);
  padding:11px;
  border:1px solid rgba(193,140,38,.22);
  border-radius:15px;
  box-shadow:0 1px 2px rgba(42,44,46,.05),0 12px 26px rgba(42,44,46,.08);
  /* a folga embaixo e onde o filete mora — ele sai da moldura, nao fica dentro */
  margin:0 0 46px}

/* a foto nitida dentro do passe-partout: a `.esfuma` e desfeita aqui */
.nivel__fig img,.dif__fig img{
  border-radius:8px;display:block;
  -webkit-mask-image:none;mask-image:none}

/* o filete com o losango vazado no meio. Sai de `::after`, entao nao precisa
   de elemento novo no HTML — o gerador nao muda por causa de enfeite.
   As duas metades do fio param a 11px do centro pra abrir espaco ao losango;
   ele vem em SVG e em PIXEL (9px), nao em porcentagem, pra nao deformar. */
/* 🔴 ABSOLUTO, e o motivo e a leitura: dentro da moldura o filete vira
   legenda da foto, preso ao quadro. Ele nao e isso — ele SEPARA a imagem do
   texto, entao tem que morar no vao entre os dois. Pendurado por `bottom`
   negativo ele desce pra folga de 46px que a moldura abriu. */
.nivel__fig::after,.dif__fig::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:-30px;height:13px;width:min(74%,300px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.3 10.7 6 6 10.7 1.3 6Z' fill='none' stroke='%23C18C26' stroke-width='1.15'/%3E%3C/svg%3E") center/11px 11px no-repeat,
    linear-gradient(var(--dourado),var(--dourado))
      left center/calc(50% - 13px) 1px no-repeat,
    linear-gradient(var(--dourado),var(--dourado))
      right center/calc(50% - 13px) 1px no-repeat}


/* ======================================================================
   VINHETA NAS FOTOS DE DUAS COLUNAS - so na versao CLASSICA
   ----------------------------------------------------------------------
   Pedido dele em 28/08/2026, apontando dois blocos: "nessa parte deixe
   estilo o banner com vinheta" (a secao verde) e "esse pode ser estilo
   banner com vinheta mas a vinheta branca" (o Projeto Pedagogico, que e
   claro).

   Ate aqui essas fotos usavam a `.esfuma`, que e MASCARA: ela apaga as
   quatro bordas ate a transparencia. Funciona, mas o resultado le como
   "retangulo com a borda apagada" - da pra ver que ali havia um retangulo.
   A capa nao faz isso: ela poe um VEU por cima, na cor do fundo, e o
   retangulo deixa de existir porque a foto vira o proprio fundo na borda.
   E o mesmo gesto que ele aprovou no banner, agora nos blocos.

   🔴 A COR DA VINHETA E A COR DA SECAO, e por isso ela e uma variavel.
   Na secao verde a vinheta e verde-escura; na clara ela e creme - que e o
   que ele chamou de "vinheta branca". Uma regra so, dois resultados, e
   secao nova nasce com a vinheta certa sem ninguem lembrar de nada.
   ====================================================================== */
.secao{--fundo-secao:#FAF6EE;--fundo-secao-0:rgba(250,246,238,0)}
.secao--creme{--fundo-secao:#F2EADA;--fundo-secao-0:rgba(242,234,218,0)}
.secao--verde{--fundo-secao:#0C3B36;--fundo-secao-0:rgba(12,59,54,0)}

/* a foto fica NITIDA embaixo do veu, como no banner: quem faz a borda e a
   vinheta, nao um recorte. A mascara da `.esfuma` sai daqui. */
.duas__foto .esfuma{position:relative;isolation:isolate}
.duas__foto .esfuma img{-webkit-mask-image:none;mask-image:none}

/* ⚠️ `inset:-1px` de proposito: em zoom fracionado do navegador a borda do
   veu e a da foto podem cair em subpixels diferentes e sobra um fio da
   imagem aparecendo. Um pixel de folga cobre isso. */
/* 🔴 A VINHETA MORREU EM 30/08/2026. "vazou essas fotos com esfumaçado. Eu
   nao quero esse efeito no site."

   Ela ja estava desligada no desktop e na secao de matriculas — mas a regra
   que a desligava mora dentro do bloco `@media(min-width:840px)`, entao no
   CELULAR ela nunca chegou a ser desligada. Desligar um efeito dentro do
   media query de uma largura so parece "desligado" pra quem confere naquela
   largura: o defeito fica escondido justamente onde ninguem olha primeiro.

   Agora ela nao existe em largura nenhuma. O que define a borda da foto passa
   a ser o canto arredondado e a sombra, que e o que o resto do site ja usa. */
.duas__foto .esfuma::after{content:none}


/* --- MATRICULAS: foto nitida e preenchendo a coluna ---------------------
   Pedido dele: "aqui deixe a foto sem o esfumacado, e deixe ela ajustada no
   setor". Sao duas coisas, e a segunda tinha causa medida: a figura carrega
   `margin:17px 40px`, entao ela sobrava 80px de largura dentro da coluna e
   ficava boiando com folga dos dois lados. Aqui a margem lateral sai e a foto
   ocupa a coluna inteira.
   Sem vinheta e sem esfumado: o corte e reto, so com o canto arredondado que
   o resto do site ja usa nas fotos. */
.sec-matriculas .duas__foto .esfuma{margin:0}
.sec-matriculas .duas__foto .esfuma::after{content:none}
.sec-matriculas .duas__foto .esfuma img{
  -webkit-mask-image:none;mask-image:none;
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}


/* --- a folga que a bandeirinha cobra -----------------------------------
   🔴 Ela pendura POR CIMA da capa, entao o texto da capa tem que comecar
   abaixo da ponta. Medido em 28/08/2026 nas 10 telas: a ponta comia 15px do
   chapeu na classica e 37px no infantil (la a capa comeca mais alto).
   A folga e variavel porque o valor e DIFERENTE nas duas versoes - o
   `_kids.css` redefine, e por vir depois na folha concatenada ele ganha.
   ⚠️ Mexeu na altura da bandeira, remede: `conferir_bandeira.py`. */
:root{--folga-bandeira:34px}

@media(min-width:840px){
  .capa .env{padding-top:calc(clamp(72px,12vw,132px) + var(--folga-bandeira))}
}

/* No celular a bandeira encolhe: 196px de largura numa tela de 390 tomaria
   metade do cabecalho e brigaria com o botao do menu. */
@media(max-width:839px){
  .marca--bandeira{width:134px;height:168px;padding:14px 10px 0}
  .cabeca .marca--bandeira img{height:100px}
  .cabeca.rolou .marca--bandeira{height:96px;padding-top:10px}
  .cabeca.rolou .marca--bandeira img{height:58px}
  .marca--bandeira::before{inset:7px 7px 24%}   /* porcentagem, pelo mesmo motivo */
}


/* ======================================================================
   A FOTO DAS DUAS COLUNAS SANGRA ATE A BORDA - so na CLASSICA
   ----------------------------------------------------------------------
   🔴 Substitui a vinheta que eu tinha posto aqui. Ele viu e disse: "nao
   gostei dessa foto pequeninha. Me sugira algo maior e melhor sem essa
   fusao". Os dois defeitos eram reais e um explicava o outro: a foto tinha
   376px de largura numa coluna de 456 (perdia 80px so de margem), e a
   vinheta, ao dissolver a borda, ainda comia o pouco que sobrava. Foto
   pequena que se apaga nas beiradas fica menor ainda.

   Agora ela vai de 376 para ~660px: a coluna da foto passa a ser a maior do
   par E o quadro estende ate a borda da janela, com `margin` negativa. O
   `calc(50% - 50vw)` mede exatamente a distancia do conteudo ate a borda -
   o `.env` e centrado, entao 50% da grade mais a metade da janela dao o
   deslocamento certo em qualquer largura, sem numero magico.

   O canto arredondado fica so do lado de DENTRO. Do lado que sangra nao ha
   canto: a foto simplesmente sai da tela, que e o que faz ela parecer
   grande em vez de colada na borda.

   ⚠️ `overflow-x:clip` na secao NAO e curativo aqui, e requisito: `100vw`
   conta a barra de rolagem e a foto passaria ~15px da area visivel, criando
   rolagem lateral. `clip` (e nao `hidden`) porque `hidden` cria contexto de
   rolagem e quebraria o `position:sticky` do cabecalho. O `conferir.py`
   desliga esse guarda e mede a rolagem de verdade - se sobrar, ele acusa.
   ====================================================================== */
@media(min-width:840px){
  .secao:has(.duas__foto){overflow-x:clip}
  .duas{grid-template-columns:.82fr 1.18fr}

  /* 🔴 `calc(50% - 50vw)` ESTAVA ERRADO, e o erro so apareceu quando entrou
     uma foto de GRUPO. Naquela conta o `50%` e da caixa da propria foto — que
     aqui e uma COLUNA da grade, nao o envelope centrado. A formula so acerta
     quando o elemento e filho direto do envelope; numa coluna de 604px ela
     descontava 302 em vez de 512, e a foto passava 229px ALEM da borda da
     tela. O `overflow-x:clip` escondia o estrago sem barra de rolagem, entao
     nao havia sintoma: a foto simplesmente perdia o lado direito. Numa
     paisagem ninguem nota; numa foto de quatro crianças, some uma.
     A conta certa e a distancia do fim do conteudo ate a borda da janela:
     metade da folga do envelope, mais o respiro lateral. O `min()` segura o
     caso em que a janela e mais estreita que o envelope. */
  .secao:has(.duas__foto){
    --ate-a-borda:calc((100vw - min(var(--larg),100vw)) / 2 + var(--gutter))}
  .duas__foto{margin-right:calc(-1 * var(--ate-a-borda))}
  .duas--troca .duas__foto{margin-right:0;
    margin-left:calc(-1 * var(--ate-a-borda))}

  /* sem margem, sem vinheta e sem esfumado: o corte e reto e a foto e o
     assunto do bloco, nao um enfeite ao lado do texto */
  .duas__foto .esfuma{margin:0}
  .duas__foto .esfuma::after{content:none}
  /* ⚠️ A foto ACOMPANHA a altura do texto, em vez de ter proporcao fixa.
     Com `aspect-ratio:4/3` ela saia 752px de altura contra 426-522px de
     texto - media de 1,5x - e sobrava um vao enorme ao lado da coluna
     escrita em quase todos os blocos. Esticando, cada bloco se equilibra
     sozinho: onde o texto e curto a foto vira uma faixa larga e cinema,
     onde e longo ela vira quase quadrada. O `min-height` impede que um
     bloco muito curto a transforme num filete. */
  .duas{align-items:stretch}
  .duas__foto{display:flex;min-height:340px}
  .duas__foto .esfuma{flex:1;display:flex}
  .duas__foto .esfuma img{
    -webkit-mask-image:none;mask-image:none;
    width:100%;height:100%;object-fit:cover;display:block;
    border-radius:18px 0 0 18px}
  .duas--troca .duas__foto .esfuma img{border-radius:0 18px 18px 0}
}




/* =========================================================================
   DUAS FOTOS NA "NOSSA IDENTIDADE"
   =========================================================================
   Pedido dele em 29/08/2026, e a segunda foi escolha dele: a da galinha. Ela
   cabe aqui — a secao fala de "conexao profunda com a criacao", e bicho no
   colo prova isso numa imagem so.

   A de apoio entra POR CIMA do canto de baixo da principal, menor e deslocada
   pra fora. Duas fotos do mesmo tamanho lado a lado dariam peso igual as
   duas, e nesta secao quem manda e a area verde: e ela que ilustra o titulo.

   🔴 OS SELETORES SAO LONGOS DE PROPOSITO. Na 1a volta eu escrevi
   `.esfuma--apoio{position:absolute}` — 0,1,0 — e perdeu para
   `.duas__foto .esfuma{position:relative}`, que e 0,2,0 e mora mais acima na
   folha. Especificidade nao se resolve por ordem quando o peso e diferente:
   a foto simplesmente nao saiu do fluxo, e as duas ficaram lado a lado do
   mesmo tamanho. Aqui todo seletor comeca em `.secao` pra ficar acima de
   qualquer regra de `.duas__foto` que ja exista — inclusive as do `_kids.css`,
   que sao 0,3,0.

   🔴 A PRINCIPAL PRECISA ABRIR ESPACO EMBAIXO. Sem isso a foto de apoio cai
   sobre a onda da secao seguinte — e a onda e recortada por mascara, entao
   ela apararia a foto sem avisar. A margem do bloco paga o que ele desenha
   pra fora. */
@media(min-width:840px){
  .secao .duas__foto:has(.esfuma--apoio){position:relative;display:block;
    margin-bottom:clamp(34px,4.5vw,58px)}
  .secao .duas__foto:has(.esfuma--apoio) > .esfuma:first-child{
    position:relative;z-index:1;flex:none;display:block;height:auto}
  /* ⚠️ NUMEROS DA CLASSICA. Aqui a foto principal SANGRA ate a borda da tela,
     entao a coluna dela e quase o dobro da do infantil — e 44% de uma coluna
     dessas vira uma foto de 440px pendurada, que compete com a principal em
     vez de acompanhar. Menor e com menos queda. O infantil tem os proprios
     valores no `_kids.css`, onde a foto nao sangra. */
  .secao .duas__foto .esfuma--apoio{position:absolute;z-index:2;
    left:-3%;bottom:0;width:30%;translate:0 20%;
    flex:none;margin:0;height:auto}
  .secao .duas__foto .esfuma--apoio img{width:100%;height:auto;
    aspect-ratio:4/3;object-fit:cover;border-radius:inherit}
}

/* ⚠️ A vinheta esfumada SAI da foto de apoio: degrade nas quatro bordas de
   uma foto pequena come metade dela e sobra mancha, nao foto. Aqui quem faz
   a borda e a moldura. */
.secao .duas__foto .esfuma--apoio img{-webkit-mask-image:none;mask-image:none}
.secao .duas__foto .esfuma--apoio::after{content:none}

/* --- canto e sombra nas duas fotos da identidade (versao CLASSICA) -------
   🔴 Apontado por ele em 29/08/2026: "estao sem bordas arredondadas. A menor
   tem que arredondar e colocar sombra". Estava mesmo — medido, raio 0 e
   sombra nenhuma nas duas. No infantil elas ja tinham (blob, moldura dourada
   e brilho); no classico ficaram de canto vivo porque a `.esfuma` original
   nao usava borda nenhuma: quem definia o limite era a vinheta esfumada, e a
   vinheta saiu quando estas duas fotos deixaram de ser esfumadas.

   ⚠️ A MENOR PEDE MAIS SOMBRA QUE A GRANDE, e nao por capricho: ela esta POR
   CIMA da outra. Sombra e o que diz "isto esta na frente" — sem ela as duas
   fotos leem como um recorte so, com um degrau estranho no canto. A sombra
   dela e mais fechada e mais escura que qualquer outra do site, porque a
   distancia que ela precisa sugerir e de centimetros, nao de milimetros.

   ⚠️ A GRANDE SO ARREDONDA O LADO QUE NAO SANGRA. No desktop ela vai ate a
   borda da tela: arredondar ali deixaria um resto de fundo na quina, do lado
   de fora do arredondado. No celular ela nao sangra, entao arredonda inteira. */
.secao .duas__foto .esfuma--apoio{
  border-radius:14px;
  box-shadow:0 2px 6px rgba(42,44,46,.10),0 18px 38px rgba(42,44,46,.22)}
.secao .duas__foto .esfuma--apoio img{border-radius:inherit}

/* 🔴 SOBRE FUNDO ESCURO, SOMBRA NAO SEPARA NADA. Sombra e escuro sobre claro;
   no verde da identidade ela cai em cima de um verde ja escuro e some. Ali
   quem diz "esta foto esta na frente" e um FIO CLARO de 1px na volta — o
   mesmo recurso que a moldura dourada faz na versao infantil. A sombra
   continua, mais funda e mais preta, so pra dar peso; quem desenha a
   separacao e o fio. */
.secao--verde .duas__foto .esfuma--apoio{
  box-shadow:0 0 0 1px rgba(250,246,238,.30),0 20px 44px rgba(0,0,0,.45)}

/* e a foto grande arredonda mais: 18px era o canto de uma foto que sangrava
   pra tela inteira, onde so o lado de dentro aparece. Ao lado de uma foto
   menor de canto 14, ele lia como reto. */
.secao:has(.esfuma--apoio) .duas__foto > .esfuma:first-child img{
  border-radius:22px 0 0 22px}
.secao:has(.esfuma--apoio).duas--troca .duas__foto > .esfuma:first-child img,
.duas--troca .duas__foto > .esfuma:first-child img{border-radius:0 22px 22px 0}

@media(max-width:839px){
  .secao:has(.esfuma--apoio) .duas__foto .esfuma img{border-radius:14px}
  .secao .duas__foto .esfuma--apoio{border-radius:14px}
}

/* empilhado, sobreposicao vira bagunca. As duas viram uma embaixo da outra,
   a de apoio menor e encostada a direita — a hierarquia se mantem pelo
   tamanho, que e o que sobra quando nao ha sobreposicao. */
@media(max-width:839px){
  .secao .duas__foto .esfuma--apoio{width:70%;margin:14px 0 0 auto}
  .secao .duas__foto .esfuma--apoio img{aspect-ratio:4/3;object-fit:cover}
}

/* --------------------------------------------------- rotina do integral 2027
   Lista de horario da tarde. E uma <dl>, nao uma <table>: nao ha cruzamento de
   duas dimensoes aqui, so par hora/atividade — e <dl> nao precisa de rolagem
   horizontal no celular, que e onde a tabela sempre quebra.
   Seletores novos, nenhum deles disputa com regra que ja existia. */
.rotina{margin:0;padding:0;display:grid;gap:0}
.rotina__linha{display:grid;grid-template-columns:76px 1fr;gap:16px;
  padding:13px 0;border-bottom:1px solid rgba(17,90,83,.14)}
.rotina__linha:last-child{border-bottom:0}
.rotina dt{font:700 15px/1.5 var(--sans);color:var(--verde);letter-spacing:.02em}
.rotina dd{margin:0;line-height:1.5}
.rotina dd i{font-style:italic;color:var(--tipo-fraco)}
.secao--verde .rotina__linha{border-bottom-color:rgba(230,222,205,.20)}
.secao--verde .rotina dt{color:var(--dourado-claro)}
.secao--verde .rotina dd i{color:#CFC6B4}

/* o paragrafo de apoio embaixo de uma lista: menor, e sem virar legenda */
.apoio{font-size:16px;color:var(--tipo-fraco);margin:26px 0 0}
.secao--verde .apoio{color:#CFC6B4}

/* QUATRO cards nao cabem numa linha de tres: sobra um sozinho e a linha abre
   buraco. Nesta secao eles vao 2x2 — quatro e par, e par nao deixa orfao. */
@media(min-width:840px){
  .difs--pares{grid-template-columns:repeat(2,1fr)}
}

/* ------------------------------------------------------------------ artigos
   A unica parte dinamica do site (PHP). O visual sai daqui, das mesmas
   variaveis do resto — o PHP nao carrega estilo proprio nenhum. */
.artigos{display:grid;gap:clamp(30px,4vw,46px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.artigo-cartao h2{font-size:clamp(21px,2.3vw,26px);margin:.1em 0 .4em}
.artigo-cartao h2 a{color:var(--verde);text-decoration:none}
.artigo-cartao h2 a:hover{text-decoration:underline}
.artigo-cartao p{color:var(--tipo-fraco)}
.artigo-cartao__data{font:700 12px/1.4 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dourado-texto);margin:0}
.artigo-cartao__fig{display:block;margin:0 0 16px;border-radius:14px;overflow:hidden}
.artigo-cartao__fig img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}
.artigo-cartao__ler{font-weight:700;color:var(--verde)}

/* o corpo do artigo: coluna estreita, porque texto corrido em 1120px cansa.
   ~68 caracteres por linha e o que a tipografia do site ja pratica. */
.env--texto{max-width:760px}
.prosa p{margin:0 0 1.15em;line-height:1.72}
.prosa h2{margin:1.6em 0 .5em}
.prosa blockquote{margin:1.6em 0;padding:2px 0 2px 22px;
  border-left:3px solid var(--dourado)}
.prosa blockquote p{margin:0;font-style:italic;color:var(--tipo-fraco)}
.prosa strong{font-weight:700}

/* ------------------------------------------- alvos de toque (laudo 01/09/2026)
   Medido no celular a 375px, alvo por alvo, com o navegador de verdade:
   o hamburguer saia 40x42, o botao "Agende" do cabecalho 81x39, e os links do
   rodape e do contato tinham 17 a 21px de ALTURA. O minimo confortavel pro
   polegar e 44x44 — abaixo disso o dedo erra e o pai desiste.

   ⚠️ O conserto e por PADDING e MIN-HEIGHT, nunca por `font-size`: aumentar a
   letra do rodape mudaria a hierarquia da pagina inteira pra resolver um
   problema que e de AREA, nao de leitura. E a folga vertical entre os links
   (14-15px) ja passava, entao ela nao entra na conta. */
@media(max-width:839px){
  /* os itens do menu davam 42px — 2 a menos que o minimo */
  .menu a{padding:15px 0}
  /* os links dentro de lista de texto (telefone, Instagram) e a assinatura do
     rodape: 17 a 21px de altura. Cresce a AREA, nao a letra */
  .lista a{display:inline-flex;align-items:center;min-height:44px}
  .abrir-menu{padding:11px;min-width:44px;min-height:44px;
    display:flex;flex-direction:column;justify-content:center;align-items:center}
  .cabeca .botao{min-height:44px;display:inline-flex;align-items:center}
  /* 🔴 A area de toque cresce SO NO LINK. Na primeira volta eu pus
     `min-height:44px` no `li` e `gap:0` na lista — e o rodape ficou torto:
     os itens de TEXTO (que quebram em duas linhas) foram esticados a 51px e
     encostaram uns nos outros, enquanto os links ficaram em 44. Duas colunas
     lado a lado com ritmos diferentes leem como desalinho, e era.
     Item que nao e clicavel nao precisa de area de toque: precisa de respiro. */
  .rodape ul{gap:10px}
  .rodape ul li > a{display:inline-flex;align-items:center;min-height:44px;
    margin:-10px 0}
  /* 🔴 A assinatura tem `border-bottom` fazendo as vezes de sublinhado. Dar
     `padding` vertical nela empurra essa borda pra longe do texto e ela vira
     UM RISCO SOLTO embaixo — foi o que ele viu. Entao a area de toque cresce
     por FORA, num pseudo-elemento, e a borda continua colada na letra. */
  .rodape__autoria a{position:relative}
  .rodape__autoria a::after{content:"";position:absolute;left:0;right:0;
    top:50%;transform:translateY(-50%);height:44px}
}

/* ------------------------------- o recorte da capa no celular (laudo 01/09/2026)
   No celular a capa e alta e estreita, entao a foto deitada e aparada pelos
   LADOS: em 375px so 38% da largura de `balanco.jpg` aparece. Com o padrao
   `50%` a janela caia em 0,31..0,69 e PARTIA AO MEIO o rosto da menina da
   direita (e o do menino) — medido no PNG renderizado pelo YuNet.
   Os quatro rostos ocupam 26% a 73% da foto: nao ha janela que caiba todos.
   Entao a escolha nao e "mostrar todo mundo", e sim NAO PARTIR NINGUEM —
   meia cara na borda le como erro; alguem de fora do quadro nao.
   Em 35% a janela pega 3 rostos inteiros e nao corta nenhum.

   ⚠️ A regra mira o ARQUIVO, nao a pagina: se `balanco.jpg` for usada em outro
   lugar, o conserto vai junto. Conferido nas outras 4 capas — todas passam em
   50%, entao so esta tem excecao. */
@media(max-width:839px){
  .capa__foto > img[src$="balanco.jpg"],
  .capa__foto > picture > img[src$="balanco.jpg"]{object-position:35% 50%}
}

/* ----------------------- o chapeu das capas INTERNAS no celular (01/09/2026)
   Na home o veu pode escurecer mais e o texto ganha leitura de graca: ali o
   rosto fica ALTO no quadro. Nas internas o rosto cai justamente na faixa do
   texto — escurecer o veu pra ler custa a foto, e medido custou caro (rosto
   de 53% para 34%). Entao aqui o veu fica como estava.

   🔴 E o chapeu nao se conserta clareando: eu tentei, e PIOROU (4,21 -> 3,50).
   Nas internas ele cai sobre a parte CLARA da foto, entao clarear a letra
   aproxima os dois. Contraste nao tem sentido unico — tem que medir de que
   lado esta o fundo antes de escolher pra onde puxar a cor.

   O que serve e sombra ATRAS DA LETRA: escurece exatamente os pixels que
   fazem o contraste, e nao toca no resto da fotografia. Nao e scrim — nao ha
   caixa, so o contorno do proprio texto.
   ⚠️ So no celular. No desktop o dourado mede 6,2 a 8,0:1 e nao precisa. */
@media(max-width:839px){
  .capa--interna .chapeu{
    text-shadow:0 1px 2px rgba(4,26,24,.96), 0 0 6px rgba(4,26,24,.92),
                0 0 16px rgba(4,26,24,.80)}
}