/* Site da BC Santana em páginas (16/10/2026): o mesmo visual da versão C, agora dividido por segmento.
   Início curto com três portas (Berçário, Educação Infantil, Anos Iniciais) e uma página para cada.
   Um look só (claro), por escolha. A primeira parte é a CSS da versão C; as peças novas vêm no fim. */
:root{
  --vermelho:#CF003D;
  --amarelo:#EECA00;
  --preto:#000000;
  --branco:#FFFFFF;
  --cinza:#4A4247;          /* texto secundário, o cinza escuro do Portal */
  --fio:#E3DCDF;            /* linha fina, cinza puxado para o vermelho */
  --moldura:#E7E4E5;        /* moldura de foto ou vídeo que ainda não chegou */
  --moldura-borda:#A39CA0;
  --titulo:"Playfair Display", Georgia, "Times New Roman", serif;
  --texto:"Poppins", "Segoe UI", Arial, sans-serif;
  --largura:1120px;
  --coluna:36rem;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--branco);color:var(--preto);font-family:var(--texto);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,.botao:focus-visible{outline:3px solid var(--preto);outline-offset:3px}
h1,h2,h3{font-family:var(--titulo);font-weight:800;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}
.miolo{max-width:var(--largura);margin:0 auto;padding-inline:clamp(16px,5vw,48px)}


/* topo */
.topo{border-bottom:1px solid var(--fio);background:var(--branco);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.topo .miolo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.marca{display:flex;align-items:center;gap:14px;text-decoration:none}
.marca img{width:52px;height:auto}
.marca span{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);line-height:1.35}
.menu{display:flex;align-items:center;gap:26px;font-size:14px}
.menu a{text-decoration:none;color:var(--cinza)}
.menu a:hover{color:var(--vermelho)}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--texto);font-weight:600;font-size:15px;text-decoration:none;background:var(--vermelho);color:var(--branco);padding:13px 22px;border-radius:2px;border:2px solid var(--vermelho);transition:background .15s,color .15s}
.botao:hover{background:var(--preto);border-color:var(--preto)}
.menu a.botao{color:var(--branco)}
.botao.claro{background:var(--branco);color:var(--vermelho);border-color:var(--branco)}
.botao.claro:hover{background:var(--preto);color:var(--branco);border-color:var(--preto)}
.botao.pequeno{font-size:13.5px;padding:9px 16px}
.link-seta{font-weight:600;font-size:15px;color:var(--preto);text-decoration:none;border-bottom:1px solid var(--preto);padding-bottom:2px}
.link-seta:hover{color:var(--vermelho);border-color:var(--vermelho)}

/* moldura de foto e de vídeo */
.foto{margin:0;min-width:0}
.quadro{background:var(--moldura);border:1px dashed var(--moldura-borda);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:18px;color:var(--cinza);width:100%;max-width:100%}
.quadro p{max-width:24rem;font-size:13px;line-height:1.5}
.quadro strong{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;font-weight:600}
.foto figcaption{font-size:13.5px;color:var(--cinza);margin-top:10px;line-height:1.5}
.foto figcaption b{color:var(--preto);font-weight:600}
/* o sinal de "aqui é vídeo": um triângulo desenhado, sem ícone de biblioteca */
.play{width:56px;height:56px;border-radius:50%;border:2px solid var(--cinza);position:relative;flex:0 0 auto}
.play::after{content:"";position:absolute;left:21px;top:16px;border-left:18px solid var(--cinza);border-top:12px solid transparent;border-bottom:12px solid transparent}
.video .quadro{aspect-ratio:9/16;background:#DEDADC}
/* vídeo de verdade: mesmo formato da moldura, fundo preto enquanto carrega */
.video.real video{display:block;width:100%;max-width:100%;aspect-ratio:9/16;height:auto;background:var(--preto);object-fit:contain}
/* bloco Método: campos da BNCC numa linha discreta; atividades em lista sem marcador, nome em destaque */
.campos{margin-top:18px;padding-top:14px;border-top:1px solid var(--fio);font-size:13.5px;line-height:1.7;color:var(--cinza);max-width:var(--coluna)}
.incluidas{margin-top:clamp(40px,6vw,64px)}
.incluidas h3{font-size:clamp(22px,2.6vw,30px)}
.incluidas .ativ-lista h4{font-size:16px}
.desde{display:inline-block;vertical-align:middle;margin-left:8px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--vermelho);border:1px solid var(--vermelho);border-radius:3px;padding:0 6px;line-height:1.6;white-space:nowrap}
.linha-final{margin-top:24px;padding-top:16px;border-top:2px solid var(--preto);font-family:var(--titulo);font-style:italic;font-size:clamp(18px,2vw,22px)}

/* abertura: texto à esquerda, vídeo da Carol em pé à direita */
.abertura{padding-block:clamp(40px,7vw,88px) clamp(28px,5vw,56px)}
.abertura .grade{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,6vw,88px);align-items:center}
.chapeu{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--vermelho);margin-bottom:22px}
.abertura h1{font-size:clamp(36px,5.6vw,68px);max-width:16ch}
.abertura h1 em{font-style:italic;font-weight:700;color:var(--vermelho)}
.abertura .lead{color:var(--cinza);margin-top:26px;max-width:var(--coluna);font-size:17px}
.abertura .acoes{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:34px}
.abertura .video{max-width:340px;width:100%;justify-self:end}
.foto-grande{margin-top:clamp(40px,6vw,72px)}
.foto-grande .quadro{aspect-ratio:16/8}

/* seções */
.secao{padding-block:clamp(56px,9vw,112px);border-top:1px solid var(--fio)}
.secao h2{font-size:clamp(30px,4.2vw,50px);max-width:20ch}
.duas{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:end}
.corpo{color:var(--cinza);max-width:var(--coluna)}

/* um bloco por prédio: cabeça (título + texto), mídia (vídeo em pé + quatro fotos), fileiras de fotos */
.predio .chapeu b{font-weight:600;color:var(--preto)}
.predio h2{max-width:22ch}
.predio .texto{display:grid;gap:16px}
.idioma{font-size:15px;color:var(--preto);border-left:2px solid var(--vermelho);padding-left:14px;max-width:var(--coluna)}
.midia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin-top:48px;align-items:start}
.midia .video{grid-column:1;grid-row:1 / span 2}
.midia .foto:not(.video) .quadro{aspect-ratio:5/4}
.predio.inverte .midia .video{grid-column:3;grid-row:1 / span 2}
.fileira{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(12px,2vw,24px);margin-top:clamp(12px,2vw,24px)}
.fileira .quadro{aspect-ratio:3/2}
.grupo-fotos{margin-top:40px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);padding-top:14px;border-top:1px solid var(--fio)}
.grupo-fotos+.fileira{margin-top:14px}
/* turma dos bebês: sub-bloco do Nursery, separado por moldura e rótulo, para não valer para o prédio inteiro */
.bebes{margin-top:clamp(48px,7vw,80px);border:1px solid var(--fio);border-top:3px solid var(--vermelho);padding:clamp(20px,3.5vw,40px)}
.bebes+.bebes{margin-top:clamp(20px,3vw,32px)}
.turma-k2 .corpo{margin-top:0}
.ei-atividades{margin-top:clamp(24px,3vw,36px);padding-top:clamp(16px,2vw,24px);border-top:1px solid var(--fio)}
.ei-atividades .ativ-lista{margin-top:12px}
.bebes-rotulo{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--vermelho)}
.bebes-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);margin-top:20px;align-items:start}
.bebes .foto .quadro{aspect-ratio:4/5}
.bebes h3{font-size:clamp(24px,2.8vw,34px)}
.bebes .corpo{margin-top:14px}
.ativ-lista{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,40px)}
.ativ-lista li{padding-block:14px;border-top:1px solid var(--fio)}
.ativ-lista h4{font-family:var(--texto);font-size:15px;font-weight:600;margin:0}
.ativ-lista p{color:var(--cinza);font-size:14.5px;margin-top:4px}
.vaga{border:1px dashed var(--moldura-borda);color:var(--cinza);font-size:13.5px;padding:14px 16px;margin-top:20px}
.vaga strong{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:4px;color:var(--vermelho)}
.fileira.uma{grid-template-columns:minmax(0,1fr)}
.fileira.uma .quadro{aspect-ratio:21/8}

/* diferenciais: um bloco por diferencial, foto grande de um lado e texto curto do outro.
   No HTML a foto vem antes do texto, para que no celular ela fique em cima. */
.diferenciais .cabeca h2{max-width:22ch}
.dif-lista{display:grid;gap:clamp(48px,8vw,104px);margin-top:clamp(40px,6vw,72px)}
.dif{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center}
.dif .foto .quadro{aspect-ratio:4/3}
.dif .foto .quadro .a-preencher{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--vermelho);border:1px dashed var(--vermelho);padding:2px 8px;border-radius:3px}
.dif.inverte{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.dif.inverte .foto{grid-column:2;grid-row:1}
.dif.inverte .dif-texto{grid-column:1;grid-row:1}
.dif-texto h3{font-size:clamp(24px,2.8vw,34px)}
.dif-texto p{color:var(--cinza);margin-top:14px;max-width:30rem}

/* o dia */
.horas{font-family:var(--titulo);font-weight:800;font-size:clamp(48px,8vw,104px);line-height:1;letter-spacing:-.02em;margin-top:8px}
.horas span{color:var(--vermelho)}
.frase{font-family:var(--titulo);font-style:italic;font-weight:500;font-size:clamp(20px,2.4vw,27px);line-height:1.35;color:var(--cinza);margin-top:20px;max-width:34ch}
.dia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);margin-top:44px}
.item{padding-block:22px;border-top:1px solid var(--fio)}
.item h3{font-family:var(--texto);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--vermelho);margin-bottom:8px}
.item p{color:var(--cinza);font-size:15.5px}
.imersao{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;margin-top:44px;padding-block:28px;border-top:2px solid var(--preto);border-bottom:1px solid var(--fio)}
.numero{font-family:var(--titulo);font-weight:800;font-size:clamp(64px,9vw,112px);line-height:.9;color:var(--vermelho);letter-spacing:-.03em}
.imersao p{font-size:17px;max-width:34rem}
.imersao small{display:block;margin-top:10px;color:var(--cinza);font-size:13.5px;letter-spacing:.02em}

/* cambridge e olhar atento */
.par-texto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px)}
.par-texto h2{font-size:clamp(28px,3.6vw,42px)}
.par-texto h2 em{font-style:italic;color:var(--vermelho)}
.par-texto .corpo{margin-top:16px}

/* visita */
.visita{background:var(--vermelho);color:var(--branco);padding-block:clamp(56px,9vw,104px)}
.visita .miolo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end}
.visita h2{font-size:clamp(34px,5vw,60px);max-width:14ch}
.visita p{margin-top:18px;max-width:30rem;font-size:16.5px}
.visita .contato{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.visita .numero-whats{font-size:14px;opacity:.9}
.visita .numero-whats b{font-weight:600}
.visita .chapeu{color:var(--amarelo)}

/* rodapé */
.rodape{background:var(--preto);color:var(--branco);padding-block:56px 32px;font-size:14px}
.rodape .colunas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.rodape h3{font-family:var(--texto);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amarelo);margin-bottom:10px}
.rodape p{color:#E9E4E6;line-height:1.6;overflow-wrap:anywhere}
.rodape a{color:var(--branco)}
.rodape .mapa{margin-top:40px}
.rodape .mapa iframe{display:block;width:100%;max-width:100%;aspect-ratio:21/6;height:auto;border:0;background:#2A2629}
.rodape .base{margin-top:36px;padding-top:20px;border-top:1px solid #3A3538;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;color:#BDB6BA;font-size:12.5px}

/* botão fixo do celular */
.fixo{display:none}

@media (max-width:860px){
  .menu a:not(.botao){display:none}
  .abertura .grade,.duas,.visita .miolo,.par-texto{grid-template-columns:minmax(0,1fr)}
  .abertura .video{justify-self:center;max-width:300px}
  .foto-grande .quadro{aspect-ratio:4/3}
  .linha{grid-template-columns:minmax(0,1fr);gap:4px}
  .dia{grid-template-columns:minmax(0,1fr)}
  .dif,.dif.inverte{grid-template-columns:minmax(0,1fr)}
  .dif.inverte .foto,.dif.inverte .dif-texto{grid-column:auto;grid-row:auto}
  .fileira.uma .quadro{aspect-ratio:4/3}
  .bebes-grade,.ativ-lista{grid-template-columns:minmax(0,1fr)}
  .bebes .foto .quadro{aspect-ratio:4/3}
  .imersao{grid-template-columns:minmax(0,1fr)}
  .rodape .colunas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rodape .mapa iframe{aspect-ratio:4/3}
  .fixo{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--branco);border-top:1px solid var(--fio)}
  .fixo .botao{width:100%}
  body{padding-bottom:72px}
}
@media (max-width:520px){
  .marca span{display:none}
  .midia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .midia .video,.predio.inverte .midia .video{grid-column:1 / -1;grid-row:auto;justify-self:center;width:100%;max-width:300px}
  .rodape .colunas{grid-template-columns:minmax(0,1fr)}
  .botao.pequeno{padding:9px 12px}
}


/* ===================== peças novas do site em páginas ===================== */

/* menu: a página atual fica marcada */
.menu a[aria-current="page"]{color:var(--vermelho);box-shadow:inset 0 -2px 0 var(--vermelho)}

/* cabeça de página de segmento */
.cabeca-pagina{padding-block:clamp(40px,7vw,88px) clamp(28px,4vw,48px)}
.cabeca-pagina h1{font-size:clamp(40px,6vw,72px);max-width:16ch}
.cabeca-pagina .sub{font-size:16px;color:var(--cinza);margin-top:14px;max-width:var(--coluna)}
.cabeca-pagina .sub b{color:var(--preto);font-weight:600}
.trilha{font-size:13px;color:var(--cinza);margin-bottom:18px}
.trilha a{color:var(--cinza)}

/* texto + vídeo lado a lado (página do segmento) */
.lado{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,6vw,88px);align-items:start}
.lado .video{max-width:320px;width:100%;justify-self:end}
.lado .texto{display:grid;gap:16px}
.lado h2{font-size:clamp(28px,3.8vw,44px)}

/* as três portas do início */
.portas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,32px);margin-top:clamp(32px,5vw,56px)}
.porta{display:flex;flex-direction:column;text-decoration:none;color:var(--preto);border-top:2px solid var(--preto);padding-top:16px}
.porta .quadro{aspect-ratio:4/5}
.porta .idade{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--vermelho);margin-top:18px}
.porta h3{font-size:clamp(28px,3.2vw,40px);margin-top:6px}
.porta p{color:var(--cinza);margin-top:8px;font-size:15px}
.porta .ir{margin-top:14px;font-weight:600;font-size:14.5px;border-bottom:1px solid var(--preto);align-self:flex-start;padding-bottom:2px}
.porta:hover h3,.porta:hover .ir{color:var(--vermelho);border-color:var(--vermelho)}
.porta:focus-visible{outline:3px solid var(--preto);outline-offset:6px}

/* onde cada idade estuda (Educação Infantil) */
.onde-estuda{margin-top:36px;border-top:2px solid var(--preto)}
.onde-linha{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:20px;padding-block:20px;border-bottom:1px solid var(--fio);align-items:baseline}
.onde-linha .turmas{font-family:var(--titulo);font-weight:800;font-size:clamp(22px,2.6vw,30px)}
.onde-linha .predio-nome{font-weight:600}
.onde-linha p{color:var(--cinza);font-size:15px;margin-top:4px;max-width:40rem}
.travessia{display:flex;gap:14px;align-items:center;padding-block:14px;border-bottom:1px solid var(--fio);font-family:var(--titulo);font-style:italic;font-size:18px;color:var(--vermelho)}
.travessia::before{content:"";flex:0 0 40px;height:0;border-top:2px dashed var(--vermelho)}

/* a grade que cresce (Anos Iniciais): três passos em sequência, a numeração é a ordem dos anos */
.passos{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);counter-reset:passo}
.passos li{counter-increment:passo;border-top:2px solid var(--preto);padding-top:16px}
.passos li::before{content:"0" counter(passo);display:block;font-family:var(--titulo);font-weight:800;font-size:clamp(36px,4vw,52px);line-height:1;color:var(--vermelho)}
.passos h3{font-family:var(--texto);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-top:12px}
.passos p{color:var(--cinza);font-size:15.5px;margin-top:8px}

/* dois diferenciais do Elementary: foto e texto, lado a lado em duas colunas */
.dois-dif{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:36px}
.dois-dif .quadro{aspect-ratio:3/2}
.dois-dif h3{font-size:clamp(22px,2.4vw,30px);margin-top:18px}
.dois-dif p{color:var(--cinza);margin-top:8px}

/* galeria: grade no computador; no celular vira carrossel com rolagem lateral só dentro dela */
.galeria-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
.galeria-cab h2{font-size:clamp(28px,3.6vw,42px)}
.galeria-dica{display:none;font-size:12.5px;color:var(--cinza)}
.galeria{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.galeria li{min-width:0}
.galeria .quadro{aspect-ratio:4/3}
.galeria li:nth-child(5n+1) .quadro{aspect-ratio:4/3}
.galeria figcaption{font-size:13px;color:var(--cinza);margin-top:8px}

/* próximo segmento, ao pé das páginas internas */
.proximo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-block:28px;border-top:1px solid var(--fio)}
.proximo a{font-family:var(--titulo);font-weight:800;font-size:clamp(20px,2.4vw,28px);text-decoration:none}
.proximo a:hover{color:var(--vermelho)}
.proximo span{display:block;font-family:var(--texto);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}

@media (max-width:860px){
  .lado,.portas,.dois-dif,.passos{grid-template-columns:minmax(0,1fr)}
  .lado .video{justify-self:center;max-width:300px}
  .porta .quadro{aspect-ratio:16/10}
  .onde-linha{grid-template-columns:minmax(0,1fr);gap:4px}
  .menu{gap:16px}
}
@media (max-width:640px){
  .galeria-dica{display:block}
  .galeria{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin-inline:calc(-1 * clamp(16px,5vw,48px));padding-inline:clamp(16px,5vw,48px);padding-bottom:8px;
    scroll-padding-inline:clamp(16px,5vw,48px);-webkit-overflow-scrolling:touch}
  .galeria li{flex:0 0 78%;scroll-snap-align:start}
}
@media (max-width:640px){
  /* no celular o menu cabe em duas linhas: as três portas e o botão */
  .topo{position:static}
  .topo .miolo{flex-wrap:wrap;row-gap:8px}
  .menu{width:100%;justify-content:space-between;gap:10px;font-size:13px}
  .menu a:not(.botao){display:inline;white-space:nowrap}
  .menu .botao.pequeno{padding:7px 12px}
}
@media (max-width:380px){
  .menu{font-size:12.5px;gap:6px}
}

/* fotos reais: ocupam o mesmo formato da moldura que substituem; o corte é por object-fit */
img.f{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--moldura)}
.porta img.f{aspect-ratio:4/5}
.bebes .foto img.f{aspect-ratio:4/5}
.dif img.f{aspect-ratio:4/3}
.dois-dif img.f{aspect-ratio:3/2}
.galeria img.f{aspect-ratio:4/3}
@media (max-width:860px){
  .porta img.f{aspect-ratio:16/10}
  .bebes .foto img.f{aspect-ratio:4/3}
}

/* sem molduras vazias (Carol, 16/10/2026): os desenhos se recompõem com o que tem foto */
/* diferenciais sem foto: dois textos lado a lado, abrindo a lista */
.dif-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,72px)}
.dif-par .dif-texto{border-top:2px solid var(--preto);padding-top:18px}
/* galeria: colunas pelo número de fotos, a primeira larga quando sobra uma */
.galeria.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.galeria.n5{grid-template-columns:repeat(3,minmax(0,1fr))}
.galeria.n7{grid-template-columns:repeat(4,minmax(0,1fr))}
.galeria.n5 li:first-child,.galeria.n7 li:first-child{grid-column:span 2}
.galeria.n5 li:first-child img.f,.galeria.n7 li:first-child img.f{aspect-ratio:8/3}
/* Maker e educação digital: uma foto, dois textos */
.dois-dif.um-foto{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
.dois-textos{display:grid;gap:28px}
.dois-textos article{border-top:2px solid var(--preto);padding-top:4px}
.dois-textos h3{margin-top:14px}
@media (max-width:860px){
  .dif-par,.dois-dif.um-foto{grid-template-columns:minmax(0,1fr)}
  .galeria.n7{grid-template-columns:repeat(3,minmax(0,1fr))}
  .galeria.n7 li:first-child{grid-column:span 3}
  .galeria.n7 li:first-child img.f{aspect-ratio:16/7}
}
@media (max-width:640px){
  .galeria li:first-child{grid-column:auto}
  .galeria li:first-child img.f{aspect-ratio:4/3}
}

/* construção (Tomás, 16/10/2026): a foto vem num <picture> com WebP ao lado; o picture não muda o desenho */
picture{display:block}
/* galeria de 4 fotos (Berçário: fachada, quintal, brincar e trocador, 16/10/2026): 4 colunas no computador,
   2 x 2 no tablet; no celular segue carrossel. Sem buraco nas três larguras. */
.galeria.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){ .galeria.n4{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* revisão de organização (Rita, 16/10/2026) */
/* Olhar atento sozinho na Educação Infantil: o mesmo desenho do par de textos, numa coluna */
.par-texto.um{grid-template-columns:minmax(0,1fr)}
/* abertura do Berçário (texto da Carol, 16/10): o parágrafo que apresenta a página, um pouco maior */
.abre-segmento{font-size:clamp(17px,1.6vw,19px);line-height:1.7;max-width:46rem;color:var(--preto)}
#abertura{padding-block:clamp(36px,5vw,64px)}
/* destaques do Berçário e diferenciais do início: títulos no tamanho dos diferenciais */
.destaques-bercario .dois-textos h3{font-size:clamp(24px,2.8vw,34px)}
.destaques-bercario{margin-top:0}
/* diferenciais do início: os títulos dos dois textos no tamanho dos diferenciais */
.diferenciais .dois-textos h3{font-size:clamp(24px,2.8vw,34px)}