/* ==========================================================================
   DADOS DA ESCOLA — Colégio Nossa Senhora do Carmo, Juiz de Fora/MG
   Fonte da verdade: dados-carmo-jf.md — nenhum dado entra na página sem estar lá.
   Verificação automática: tools/check-contaminacao.py

     Telefone ......... (32) 3311-1600
     Endereço ......... R. Dona Maria Helena Teixeira, 112 — Santa Helena · 36015-310
     E-mail admissão .. admissao@carmojf.com
     E-mail currículo . curriculo@carmojf.com
     Instagram ........ @colegiocarmojf
     Facebook ......... facebook.com/carmojuizdefora
     Fundação ......... 9 de novembro de 1952 (73 anos em 2026)
     Ciclo ............ Matrículas 2027
     WhatsApp ......... não existe. Não inventar.
   ========================================================================== */
:root{
  /* tipografia — sempre via token: garante o fallback igual em todo lugar se o
     Google Fonts for bloqueado (rede de escola, arquivo aberto por e-mail). */
  --sans:"Mulish",system-ui,sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;

  --brown:#5E3A26; --brown-deep:#3A2317; --espresso:#2A1810;
  --cream:#F6EBD2; --cream-soft:#FBF6EA; --ivory:#FCFAF4;
  /* --gold é DECORATIVO (filetes, bordas, anel de foco): 3.0:1 sobre o creme,
     reprova no WCAG AA para texto. Para TEXTO dourado em fundo claro use
     --gold-text (5.10:1 sobre --ivory, 4.94:1 sobre --cream-soft). */
  --gold:#B8893B; --gold-bright:#C9A24B; --gold-soft:#E7CE93;
  --gold-text:#8B6423;
  --on-brown:#FFFFFF;
  /* fundo de cartão. É branco puro de propósito: sobre --ivory e --cream-soft ele
     abre um degrau de luz que o creme não abre. Token próprio, e não --on-brown,
     porque --on-brown significa "texto sobre marrom" — misturar os dois quebraria
     o dia em que um deles mudar. */
  --card:#FFFFFF;
  --ink:#2C2118; --muted:#7A6857; --line:rgba(94,58,38,.14);
  --shadow:0 24px 60px -28px rgba(58,35,23,.45);
  --shadow-sm:0 12px 30px -18px rgba(58,35,23,.4);
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* o header é sticky e tem ~79px de altura; sem scroll-padding-top os âncoras
   #segmentos e #diferenciais parariam com o título escondido debaixo dele. */
html{scroll-behavior:smooth;scroll-padding-top:90px}
/* overflow-x no body propaga para a viewport (o html fica visible), então o body NÃO vira
   contêiner de rolagem e o position:sticky do header continua funcionando. Verificado. */
body{font-family:var(--sans);color:var(--ink);background:var(--ivory);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--brown-deep)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* foco visível de teclado — o anel padrão do browser some contra o nav translúcido.
   Sem mexer em border-radius aqui: o outline já acompanha sozinho o raio de cada
   elemento, então a pílula sai arredondada e um card futuro mantém o raio dele.
   A cor é ESCURA, não dourada: com outline-offset o anel flutua sobre o fundo da
   página, e --gold-bright dava 2.30:1 contra o creme — reprova no WCAG 1.4.11,
   que exige 3:1 para indicador de interface. --brown-deep dá 14.04:1.
   ATENÇÃO Tasks 4-6: se entrar seção de fundo escuro/marrom, este anel some lá
   dentro (1.47:1 contra --brown) e precisa de um override claro no escopo dela.
   Task 6: entraram na lista o <summary> do FAQ e os campos do formulário. Sem eles os
   três controles NOVOS da página ficavam com o anel `auto` do Chrome — que aparece, mas
   é fino, azul e destoa do resto; e no Safari o <summary> focado não desenha nada. */
a:focus-visible,.btn:focus-visible,.btn-ghost:focus-visible,.faq summary:focus-visible,.form input:focus-visible,.form select:focus-visible{outline:2px solid var(--brown-deep);outline-offset:3px}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.pad{padding:clamp(58px,7vw,104px) 0}
.eyebrow{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);display:inline-block}
/* transition NOMEIA as propriedades de propósito. O atalho "transition:.32s ..." vira
   transition-property:all, que arrasta o outline junto — e como outline-style não é
   animável o anel de foco fica preso no valor inicial e NUNCA aparece neste botão.
   Verificado no navegador: com "all" o :focus-visible não renderiza. */
.btn{display:inline-flex;align-items:center;gap:.55em;cursor:pointer;border:none;font-family:var(--sans);font-weight:700;font-size:.96rem;padding:15px 28px;border-radius:50px;transition:background-color .32s cubic-bezier(.2,.7,.2,1),transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s cubic-bezier(.2,.7,.2,1);background:var(--brown);color:var(--on-brown);box-shadow:0 12px 26px -14px rgba(94,58,38,.7)}
.btn:hover{background:var(--brown-deep);transform:translateY(-2px)}
.btn .ar{transition:transform .3s}
.btn:hover .ar{transform:translateX(3px)}
/* reveal ao rolar — progressive enhancement: sem JS, tudo aparece */
.rv{opacity:1;transform:none}
/* A lista de transição carrega translate e box-shadow ALÉM do par opacity/transform
   do reveal. Motivo: qualquer cartão .rv que também tenha hover precisa disso, e
   como `html.js .rv` (0,2,1) vence um transition posto no próprio cartão (0,1,0),
   declarar lá embaixo não adiantava — cada cartão teria que re-derivar um seletor
   `html.js .x.rv`. Aqui em cima, todo cartão novo ganha o comportamento só com
   `.x:hover{translate:0 -4px}`. O hover usa a propriedade INDEPENDENTE `translate`
   porque `html.js .rv.on{transform:none}` (0,3,1) venceria um `transform` de hover;
   `translate` compõe com o transform do reveal em vez de disputar com ele. */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),translate .3s ease,box-shadow .3s ease}
html.js .rv.on{opacity:1;transform:none}
/* IMPRESSÃO: esta proposta existe para virar PDF e ser encaminhada por e-mail.
   Sem isto, quem abrir e mandar Ctrl+P sem ter rolado a página inteira imprime as
   seções não reveladas EM BRANCO — os elementos ainda estão em opacity:0.
   O transition:none é parte do conserto, não enfeite: sem ele o elemento começa a
   animar de 0 para 1 no instante em que o CSS de impressão entra, e a captura pode
   sair no meio do caminho (medido: 0,75 de opacidade a 300ms). */
@media print{html.js .rv{opacity:1!important;transform:none!important;transition:none!important}}
/* Quem pediu menos movimento no sistema recebe o conteúdo já posto, sem animação. */
@media(prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(252,250,244,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-tx{display:flex;flex-direction:column;line-height:1.2}
.brand-tx strong{font-family:var(--serif);font-size:1.05rem;color:var(--brown-deep);font-weight:700}
.brand-tx em{font-style:normal;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);font-weight:700}
.nav-links{display:flex;gap:26px;font-size:.92rem;font-weight:600;color:var(--muted)}
.nav-links a:hover{color:var(--brown)}
.btn-sm{padding:11px 22px;font-size:.88rem;white-space:nowrap}
@media(max-width:900px){.nav-links{display:none}}
@media(max-width:420px){
  .brand img{width:42px;height:42px}
  .brand-tx strong{font-size:.92rem}
  .brand-tx em{font-size:.62rem}
  .nav-in{gap:12px}
  .btn-sm{padding:10px 16px;font-size:.8rem}
}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,6vw,84px) 0 clamp(50px,7vw,96px);background:linear-gradient(170deg,var(--cream-soft) 0%,var(--ivory) 62%)}
.hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,66px);align-items:center}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.5rem);margin:18px 0 20px}
.lead{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--muted);max-width:34em}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn-ghost{display:inline-flex;align-items:center;padding:15px 26px;border-radius:50px;border:1px solid var(--line);font-weight:700;font-size:.96rem;color:var(--brown)}
.btn-ghost:hover{border-color:var(--gold);color:var(--brown-deep)}
.hero-img{position:relative;border-radius:var(--r);overflow:visible}
.hero-img img{border-radius:var(--r);box-shadow:var(--shadow);object-fit:cover;object-position:center 18%;width:100%;height:clamp(340px,44vw,540px)}
.selo{position:absolute;left:-18px;bottom:26px;background:var(--brown-deep);color:var(--cream);border-radius:14px;padding:16px 22px;text-align:center;box-shadow:var(--shadow-sm)}
.selo strong{display:block;font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--gold-soft)}
.selo span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
@media(max-width:860px){.hero-in{grid-template-columns:1fr}.selo{left:12px}}

/* ---------- faixa de prova ---------- */
/* ver dados-carmo-jf.md */
.band{background:var(--brown-deep);color:var(--cream)}
.band-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:34px 0;text-align:center}
.band-in dt{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--gold-soft);line-height:1}
.band-in dd{font-size:.82rem;color:rgba(246,235,210,.78)} /* 8.1:1 sobre --brown-deep */
@media(max-width:760px){.band-in{grid-template-columns:repeat(2,1fr);gap:26px}}

/* ---------- a grande ideia ---------- */
.idea{background:var(--cream-soft)}
.idea-in{max-width:56rem;margin-inline:auto;text-align:center}
.idea h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin:18px 0 26px;font-style:italic}
.idea p{color:var(--muted);margin-bottom:14px;font-size:1.04rem}

/* ---------- cabeçalho de seção ---------- */
.sec-head{max-width:44rem;margin-bottom:38px}
.sec-head h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-top:16px}

/* ---------- segmentos ---------- */
/* Grade 2×2, foto quadrada à esquerda e texto à direita (opção aprovada pelo
   cliente). A foto preenche a coluna esquerda (largura fixa, altura do card),
   ficando quadrada quando o texto é moderado; object-position pega as pessoas. */
.seg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.seg{display:grid;grid-template-columns:230px 1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:translate .3s ease,box-shadow .3s ease}
.seg:hover{translate:0 -4px;box-shadow:var(--shadow)}
.seg picture{display:block;height:100%}
.seg img{width:230px;height:100%;min-height:230px;object-fit:cover;object-position:center 22%}
/* o Ensino Médio é foto de formatura em paisagem: centraliza normal */
.seg--medio img{object-position:center}
.seg--iniciais img{object-position:center 40%}
.seg-tx{padding:26px 30px;align-self:center}
.seg h3{font-size:1.34rem;margin-bottom:2px}
.faixa{color:var(--gold-text);font-weight:700;font-size:.86rem;margin:2px 0 10px}
.seg-tx p:not(.faixa){color:var(--muted);font-size:.94rem;margin-bottom:9px}
.seg-tx p:not(.faixa):last-child{margin-bottom:0}
@media(max-width:1024px){.seg-grid{grid-template-columns:1fr}}
@media(max-width:520px){.seg{grid-template-columns:1fr}.seg img{width:100%;height:230px;min-height:0}}
/* .passos li, .faq details e .form já viajavam inteiros no papel; o .seg era o único
   cartão da página sem a trava, e o da Educação Infantil saía partido — a foto no fim
   de uma página e o texto no começo da seguinte, com a pílula de horário órfã do
   título. Medido no PDF: o corte caía entre as páginas 2 e 3. */
@media print{.seg{break-inside:avoid}}

/* ---------- diferenciais ---------- */
.diff-sec{background:var(--cream-soft)}
/* list-style:none tira o marcador; o role="list" no HTML devolve a semântica que
   o Safari remove junto com ele. */
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none}
.dif{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px 28px;overflow:hidden;transition:translate .3s ease,box-shadow .3s ease}
/* traço dourado no topo do card */
.dif::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-soft))}
.dif:hover{translate:0 -4px;box-shadow:var(--shadow)}
/* numeral editorial grande */
.dif .num{display:block;font-family:var(--serif);font-size:2.5rem;font-weight:600;line-height:1;color:var(--gold-text);margin-bottom:10px}
.dif h3{font-size:1.34rem;margin-bottom:10px}
.dif p{color:var(--muted);font-size:.96rem}
@media print{.dif::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}.dif .num{color:var(--gold-text)}}
@media(max-width:900px){.diff-grid{grid-template-columns:1fr}}

/* ---------- alma carmelita ---------- */
.soul{background:var(--espresso);color:var(--cream)}
.soul h2{color:var(--cream)}
.soul .eyebrow{color:var(--gold-soft)}
/* o filete do .eyebrow::before continua em --gold: sobre o espresso dá 5.36:1,
   bem visível. É decorativo, mas decorativo invisível não é decoração. */
/* O anel de foco global é --brown-deep: 14:1 no claro, 1.28:1 aqui dentro — some.
   Hoje não há nada focável nas duas seções escuras (conferido: nenhum a, button
   ou [tabindex] dentro de .soul e .band). A regra fica mesmo assim, para que o
   link que entrar aqui na Task 6 já nasça com anel visível em vez de nascer com
   um bug de acessibilidade que ninguém repara em fundo escuro. */
/* Atalho COMPLETO, e não só outline-color. Com `outline-color` sozinho o override
   dependia de outra regra já ter fixado outline-style: <a> e .btn herdam
   `outline:2px solid` da regra global e pegavam a cor, mas <input> e <select> não
   casam nenhuma regra que declare outline-style — ficam com o anel `auto` do Chrome,
   e `auto` IGNORA outline-color. Ou seja, o campo de um formulário que entrasse aqui
   dentro voltaria ao anel escuro invisível (1.28:1). Declarando o atalho, todo
   focável no escopo escuro nasce com o anel dourado.
   Task 6: o rodapé entrou na lista. Ele é a TERCEIRA seção escura da página e a
   primeira com links de verdade dentro — os três do .ft-social. Sem esta linha eles
   receberiam o anel --brown-deep, que sobre o espresso dá 1,28:1: foco invisível. */
.soul :focus-visible,.band :focus-visible,.ft :focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.soul-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,60px);align-items:center}
/* object-position 35% e não o centro: a caixa é mais estreita que a foto (4:3), o
   cover corta ~14% de cada lado e no centro isso comia o "C" de CAPELA SANTA
   TERESINHA escrito na parede. A 35% a placa inteira e a imagem de Santa Teresinha
   cabem; o que sai é borda de parede. Conferido no render, não no papel. */
.soul-img img{border-radius:var(--r);object-fit:cover;object-position:35% center;width:100%;height:clamp(320px,42vw,500px)}
.soul-tx h2{margin:16px 0 20px;font-size:clamp(1.8rem,3.4vw,2.7rem)}
.soul-tx p{color:rgba(246,235,210,.82);margin-bottom:14px} /* 9.7:1 sobre --espresso */
.valores{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.valores li{border:1px solid rgba(231,206,147,.3);color:var(--gold-soft);border-radius:50px;padding:7px 15px;font-size:.82rem;font-weight:600} /* 10.9:1 */
@media(max-width:860px){.soul-in{grid-template-columns:1fr}}
/* IMPRESSÃO das duas seções de fundo escuro (.band e .soul).
   O diálogo de impressão do Chrome vem com "Gráficos de segundo plano" DESLIGADO
   por padrão — ou seja, o caso comum é o quebrado: o espresso e o marrom não são
   pintados e sobra texto creme sobre papel branco, invisível. O PDF que geramos
   aqui com printBackground:true sai bonito, mas não é ele que chega à diretoria:
   é o Ctrl+P deles. Então as duas seções invertem a tinta no papel.
   A hierarquia é preservada de propósito: o número da faixa continua do tamanho
   que era, só troca de cor; os chips continuam chips, com borda em vez de vazio. */
@media print{
  .band{background:none;color:var(--ink);border-block:1px solid var(--line)}
  .band-in dt{color:var(--brown)}
  .band-in dd{color:var(--muted)}
  .soul{background:none;color:var(--ink)}
  .soul h2{color:var(--brown-deep)}
  .soul .eyebrow{color:var(--gold-text)}
  .soul-tx p{color:var(--ink)}
  .valores li{color:var(--brown-deep);border-color:var(--line)}
  /* O selo do hero tem o mesmo defeito (--brown-deep com texto creme) e mais um:
     ele flutua POR CIMA da foto. Só trocar a tinta deixava "73 ANOS DE HISTÓRIA"
     em marrom sobre tijolo vermelho — conferido no PDF, ilegível. Então ele desce
     para o fluxo, embaixo da imagem, como as legendas da galeria. Mesma regra,
     mesmo motivo: no papel, rótulo sobreposto vira rótulo em linha. */
  .selo{position:static;background:none;color:var(--brown-deep);box-shadow:none;text-align:left;padding:12px 0 0}
  .selo strong{color:var(--gold-text)}
  /* Mesmo defeito, e no pior lugar possível: o .btn é marrom com texto BRANCO, e
     sem os gráficos de fundo o branco vira o cinza que o Chrome usa para "texto
     sobre nada". Medido na página 1 do PDF com printBackground:false: "Agendar
     visita" e "Agendar uma visita" saíam a 2,30:1 (#ABABAB sobre papel) e a seta a
     1,77:1 — enquanto o .btn-ghost ao lado, que é só borda, saía a 10,01:1. A ação
     PRINCIPAL da proposta era a única ilegível. Aqui ele vira o irmão do ghost:
     tinta marrom e borda. A seta sai porque perdeu a função — no papel não há
     hover e o glifo só sobrava como sujeira cinza. */
  .btn{background:none;color:var(--brown-deep);box-shadow:none;border:1px solid var(--line)}
  .btn .ar{display:none}
}

/* ---------- estrutura ---------- */
.sec-sub{color:var(--muted);margin-top:14px;max-width:40em}
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:row dense;gap:16px}
.gal figure{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.gal img{width:100%;height:190px;object-fit:cover;transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.05)}
/* O gradiente vai bem mais fundo do que o rascunho pedia, e a legenda ganhou
   text-shadow. Não é preciosismo — está medido pixel a pixel no render, sobre a
   FOTO e não sobre a cor do gradiente:
     rascunho (transparent -> .82) a 1440px .... 3 das 9 legendas REPROVAM no AA:
       Parquinho 2,77:1 · Brinquedão 3,05:1 · Galeria das Diretoras 3,33:1
     esta fórmula, em 320/375/901/1440px ....... pior pixel de todas = 6,66:1
   Os 320px entram na conta porque ali "Galeria das Diretoras" e "Sala de contação
   de histórias" quebram em duas linhas, e a PRIMEIRA linha sobe para a parte clara
   do degradê — é o pior caso da página, e é o que definiu a parada dos 26%. */
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;font-size:.82rem;font-weight:700;color:var(--on-brown);text-shadow:0 1px 3px rgba(42,24,16,.85);background:linear-gradient(180deg,rgba(42,24,16,0) 0%,rgba(42,24,16,.6) 26%,rgba(42,24,16,.96) 100%)}
.g-big{grid-column:span 2;grid-row:span 2}
/* 396 = 190 + 16 de gap + 190: o tile grande fecha exatamente com duas fileiras. */
.g-big img{height:396px}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}.g-big{grid-column:span 2;grid-row:auto}.g-big img{height:230px}}
/* O zoom no hover é um padrão animado NOVO; o bloco de reduced-motion lá de cima
   só neutraliza o .rv, então sem isto ele escaparia da preferência do sistema. */
@media(prefers-reduced-motion:reduce){.gal img{transition:none}.gal figure:hover img{transform:none}}
/* Na impressão a caixa de diálogo do Chrome vem com "gráficos de segundo plano"
   DESMARCADA por padrão: o gradiente some e sobra texto branco sobre a foto. Aqui
   a legenda sai de cima da imagem e vira texto escuro embaixo dela, que se lê com
   ou sem fundo impresso. As fileiras são auto, então crescem sozinhas e o tile
   grande não invade a legenda de ninguém. */
@media print{
  /* o raio migra do figure para a img: com overflow:visible o figure já não recorta
     nada, e sem isto as fotos saem de canto vivo só na impressão. */
  .gal figure{overflow:visible;box-shadow:none}
  .gal img{border-radius:14px}
  .gal figcaption{position:static;background:none;color:var(--ink);text-shadow:none;padding:8px 2px 0}
}

/* ---------- depoimentos ---------- */
/* .tst-sec vinha sem regra nenhuma no rascunho. Ganhou fundo em vez de sair: sem
   ele esta seção e a de estrutura ficam duas faixas de marfim coladas, e o cartão
   branco perde contra o que se destacar. Mantém o ritmo claro/creme de .idea e
   .diff-sec. */
.tst-sec{background:var(--cream-soft)}
.tst-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.tst{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:14px;padding:26px 28px}
/* font-weight:500 explícito: a Cormorant é carregada em itálico 500 e 600, e o 400
   herdado do <p> não existe no arquivo — o navegador escolheria por conta própria. */
.tst p{font-family:var(--serif);font-weight:500;font-size:1.24rem;font-style:italic;color:var(--brown-deep);margin-bottom:14px}
.tst cite{font-style:normal;font-size:.84rem;font-weight:700;color:var(--muted)} /* 5.3:1 sobre o cartão */
@media(max-width:820px){.tst-grid{grid-template-columns:1fr}}

/* ---------- admissão em 3 passos ---------- */
/* list-style:none tira o marcador do <ol>; o role="list" no HTML devolve a semântica
   que o Safari remove junto — mesmo caso do .diff-grid e do .valores. */
.passos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.passos li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px}
/* font-variant-numeric:lining-nums não é preciosismo tipográfico: a Cormorant vem com
   ALGARISMOS DE ESTILO ANTIGO por padrão, e dentro de um círculo de 42px isso saiu
   ilegível no render — o "1" virava um "I" versalete e o "3" descia abaixo da linha
   de base, desalinhado no disco. Nos números grandes (.selo, .band) o estilo antigo é
   bonito; num contador de passos ele atrapalha a única função do elemento. */
.passos span{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--brown);color:var(--gold-soft);font-family:var(--serif);font-size:1.4rem;font-weight:700;font-variant-numeric:lining-nums;margin-bottom:16px}
.passos h3{font-size:1.32rem;margin-bottom:8px}
.passos p{color:var(--muted);font-size:.96rem}
@media(max-width:900px){.passos{grid-template-columns:1fr}}
/* No papel sem gráficos de fundo o círculo marrom não é pintado, e sobra o número em
   --gold-soft sobre papel branco: 1,49:1. É o mesmo defeito do .selo e do .btn, num
   elemento novo. A bolinha vira contorno e o número vira tinta escura; a ordem 1-2-3
   continua legível, que é a única função dela. */
@media print{
  .passos span{background:none;color:var(--brown-deep);border:1px solid var(--gold)}
  .passos li{break-inside:avoid}
}

/* ---------- FAQ ---------- */
/* Fundo MARFIM, não creme: a seção anterior (#admissao) já é marfim e a seguinte
   (.final) é creme — se o FAQ fosse creme ele grudaria na .final e viraria uma faixa
   só. O filete no topo marca a divisão que a cor deixou de marcar. */
.faq-sec{border-top:1px solid var(--line)}
.faq-in{max-width:52rem;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:1.04rem;color:var(--brown-deep);list-style:none;display:flex;justify-content:space-between;gap:16px}
/* display:flex já apaga o triângulo no Chrome e no Firefox — o marcador só existe
   enquanto o summary for display:list-item. O Safari desenha um pseudo-elemento
   próprio, que sobrevive à troca de display e precisa desta linha. */
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-text);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
/* O conteúdo de um ::after entra no NOME ACESSÍVEL do elemento: medido na árvore de
   acessibilidade, o leitor de tela anunciava "Em que horário funciona cada segmento?
   +". A sintaxe `content: "x" / ""` dá texto alternativo vazio ao pseudo-elemento e
   tira o sinal do nome. Vem repetida logo depois da declaração simples de propósito:
   motor que não entende a barra descarta ESTA regra e fica com a de cima — ou seja,
   o "+" nunca some da tela por causa desta melhoria. */
.faq summary::after{content:"+" / ""}
.faq details[open] summary::after{content:"–" / ""}
.faq details p{color:var(--muted);margin-top:12px;font-size:.98rem}
/* IMPRESSÃO: <details> fechado NÃO imprime o conteúdo. Sem isto a proposta sairia do
   Ctrl+P com cinco perguntas e nenhuma resposta — e o PDF é metade da entrega.
   São duas travas porque nenhuma cobre todo o parque: ::details-content é o pseudo
   novo (Chrome 131+), onde o esconderijo é content-visibility:hidden; o display:block
   nos filhos cobre o motor antigo. O script no fim do arquivo ainda abre tudo no
   beforeprint, para o caso de as duas falharem em algum navegador.
   O "+" some: com tudo aberto ele deixou de significar alguma coisa. */
@media print{
  .faq details{break-inside:avoid}
  .faq details::details-content{content-visibility:visible!important;display:block!important}
  .faq details>*:not(summary){display:block!important}
  /* os DOIS seletores: com o script tendo aberto tudo, `.faq details[open] summary::after`
     (0,3,1) venceria um `.faq summary::after` (0,2,1) sozinho e o traço continuaria
     impresso. Medido no PDF: quatro "–" sobrando na página do FAQ. */
  .faq summary::after,.faq details[open] summary::after{content:""}
}

/* ---------- CTA final + formulário ---------- */
.final{background:var(--cream-soft)}
.final-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:start}
/* min-width:0 nos itens do grid, e de novo no label e no campo. Sem isso a página
   estourava 6px além da viewport a 320px — medido: scrollWidth 326 contra innerWidth
   320, e como o body tem overflow-x:hidden isso não virava barra de rolagem, virava
   texto cortado no lado direito. A culpada é a <select>: o tamanho mínimo automático
   de um controle de formulário é a sua opção mais larga ("Fundamental — Anos
   Iniciais"), esse mínimo subia como contribuição de min-content até a coluna do
   grid, e a coluda ficava mais larga que o .wrap. min-width:0 devolve ao campo o
   direito de encolher; a largura passa a ser a da coluna, e o texto da opção fica
   truncado pelo próprio widget do navegador, que é o comportamento esperado. */
.final-in>*,.form label{min-width:0}
.final h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:16px 0 16px}
.final p{color:var(--muted)}
/* <dl> e não <p><strong>: "Endereço" é o RÓTULO do valor que vem a seguir, não uma
   palavra enfática — o <strong> estava sendo usado por tamanho. Mesmo conserto que a
   faixa de prova já tinha recebido, e aqui ele vale mais: um leitor de tela anuncia
   "Endereço, R. Dona Maria Helena Teixeira..." em vez de duas frases soltas. */
.contatos{margin-top:26px;display:grid;gap:14px}
.contatos dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin-bottom:3px}
.contatos dd{font-size:.95rem;color:var(--muted)}
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;display:grid;gap:14px;box-shadow:var(--shadow-sm)}
.form label{display:grid;gap:6px;font-size:.85rem;font-weight:700;color:var(--brown-deep)}
/* font-weight:400 explícito no campo: o label é 700 e o input herda font-family por
   `inherit`, mas herdaria também o peso — o texto digitado sairia em negrito. */
.form input,.form select{min-width:0;width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:.95rem;font-weight:400;color:var(--ink);background:var(--card)}
.form button{justify-content:center;margin-top:6px}
/* `.final p` é (0,1,1) e venceria um `.form-nota` (0,1,0) — a nota ficaria com a cor
   do parágrafo da coluna de texto. Um seletor a mais resolve. */
.form .form-nota{font-size:.8rem;color:var(--muted);text-align:center;line-height:1.5}
@media(max-width:860px){.final-in{grid-template-columns:1fr}}
/* O break-inside:avoid no .form sozinho empurrava só a coluna DIREITA para a página
   seguinte e deixava a esquerda (título + contatos) sozinha, com 40% de página em
   branco no meio da seção — medido no PDF. O avoid no bloco inteiro faz as duas
   colunas viajarem juntas: o branco vai para o fim da página anterior, onde o FAQ
   acabou, que é onde branco não parece defeito. O padding menor é o que garante que
   o bloco inteiro AINDA CABE numa página (928px de conteúdo contra ~1065px úteis de
   A4); sem ele o avoid seria ignorado e voltaríamos ao corte. */
@media print{.final{padding:44px 0}.form{break-inside:avoid;box-shadow:none}}

/* ---------- rodapé ---------- */
/* Terceira seção de fundo escuro da página. Ela paga os dois pedágios de sempre:
   o anel de foco dourado (lá em cima, junto de .soul e .band) e a inversão de tinta
   na impressão (logo abaixo). */
.ft{background:var(--espresso);color:rgba(246,235,210,.75);padding:52px 0 26px} /* 8.5:1 */
.ft-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px}
.ft strong{display:block;color:var(--cream);font-size:1.24rem;margin-bottom:10px}
.ft p{font-size:.9rem;margin-bottom:3px}
.ft-social{display:flex;flex-direction:column;gap:9px;font-size:.9rem;font-weight:600}
.ft-social a:hover{color:var(--gold-soft)}
/* .5 dava 4,50:1 — passava no AA por arredondamento e reprovava em qualquer papel
   menos branco. .58 dá 5,6:1 e continua sendo a linha discreta que deve ser. */
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid rgba(246,235,210,.14);margin-top:34px;padding-top:20px;font-size:.78rem;color:rgba(246,235,210,.58)}
.ft-bot a{color:var(--gold-soft);text-decoration:none}
.ft-bot a:hover{text-decoration:underline;text-underline-offset:3px}
@media print{
  .ft{background:none;color:var(--ink);border-top:1px solid var(--line);padding:24px 0 0;break-inside:avoid}
  .ft strong{color:var(--brown-deep)}
  .ft-social a{color:var(--brown-deep)}
  .ft-bot{color:var(--muted);border-top-color:var(--line)}
}

/* ---- elementos da revisão da escola (31/07/2026) ---- */
/* medalha na faixa de prova (no lugar de um número, para não ler "2026 medalhistas") */
.band-medal{font-size:2rem;line-height:1.35}
/* defesa: no WordPress o emoji vira <img class="emoji">; trava o tamanho */
.band-medal img{height:1.4em;width:auto;display:inline;margin:0;vertical-align:-.15em}
/* frase de destaque da missão, sobre o fundo espresso */
.soul-cap{color:var(--gold-soft);font-size:1.1rem;line-height:1.5;border-left:3px solid var(--gold);padding-left:16px;margin:6px 0 22px}
.soul-cap em{font-style:italic}
@media print{ .soul-cap{color:var(--brown-deep);border-left-color:var(--gold-text)} }
/* fecho dos segmentos */
.seg-fecho{text-align:center;max-width:52rem;margin:38px auto 0;color:var(--muted);font-size:1.06rem}
/* CTA ao fim dos 6 pilares */
.diff-cta{text-align:center;max-width:46rem;margin:46px auto 0;padding:38px 30px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.diff-cta h3{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:10px}
.diff-cta p{color:var(--muted);margin-bottom:22px;max-width:34em;margin-inline:auto}
@media print{ .diff-cta{break-inside:avoid} }