/* Layout v2 do site da BC Santana (Nina, 16/10/2026).
   Pedido da Carol: "está com mais cara de apresentação do que de site", "foto maior, movimento,
   mais moderna, mais fluida", sem véu escuro. Esta folha entra DEPOIS do site.css do Tomás e só
   muda desenho: tamanhos, ritmo, fundos, fotos grandes, movimento. Nenhum texto muda.
   Marca: Playfair Display + Poppins, vermelho, amarelo, preto e branco; o fundo suave é o
   --fundo-suave que o Portal já usa. Um look só (claro), por escolha. */

:root{
  --suave:#FCFAF5;            /* fundo alternado: o --fundo-suave do Portal */
  --sombra:0 18px 40px -18px rgba(0,0,0,.28);
  --sombra-leve:0 10px 24px -14px rgba(0,0,0,.22);
  --gutter:clamp(16px,5vw,48px);
  --entra:cubic-bezier(.2,.7,.2,1);
}
html,body{overflow-x:clip}
body{font-size:15.5px}

/* ---------- títulos menores, blocos mais compactos ---------- */
.secao{padding-block:clamp(44px,6vw,84px);border-top:0}
.secao h2,.lado h2{font-size:clamp(26px,3vw,38px);max-width:24ch}
.bebes h3,.dif-texto h3,.incluidas h3,.par-texto h2{font-size:clamp(22px,2.3vw,30px)}
.dois-textos h3{font-size:clamp(19px,1.8vw,23px)}
.visita h2{font-size:clamp(28px,3.4vw,44px);max-width:18ch}
.horas{font-size:clamp(44px,6.4vw,84px)}
.numero{font-size:clamp(52px,6vw,84px)}
.proximo a{font-size:clamp(18px,2vw,24px)}
.chapeu{margin-bottom:12px}
.secao.tom{background:var(--suave)}

/* ---------- topo: branco, preso, fica mais sólido ao rolar ----------
   A marca colorida não pode ir sobre foto (guia de marca, item 2) e não temos a versão branca
   em arquivo; por isso o topo é branco translúcido, e não transparente sobre a foto. */
.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;transition:box-shadow .3s,background .3s,border-color .3s}
.topo .miolo{transition:padding .3s var(--entra)}
.topo.rolou{background:rgba(255,255,255,.97);border-color:var(--fio);box-shadow:var(--sombra-leve)}
.topo.rolou .miolo{padding-block:6px}
.topo .marca img{transition:width .3s var(--entra)}
.topo.rolou .marca img{width:42px}
.menu a:not(.botao){position:relative;padding-block:6px}
.menu a:not(.botao)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--vermelho);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--entra)}
.menu a:not(.botao):hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu a[aria-current="page"]{box-shadow:none}
.menu-botao{display:none;font:600 13.5px var(--texto);background:none;border:1.5px solid var(--preto);border-radius:999px;padding:7px 14px;cursor:pointer;color:var(--preto)}

/* ---------- botões vivos ---------- */
.botao{border-radius:999px;transition:background .2s,color .2s,border-color .2s,transform .2s var(--entra),box-shadow .2s}
.botao:hover{transform:translateY(-2px);box-shadow:var(--sombra-leve)}
.botao.contorno{background:transparent;color:var(--preto);border-color:var(--preto)}
.botao.contorno:hover{background:var(--preto);color:var(--branco)}

/* ---------- primeira dobra: foto grande e clara, painel branco que sobe sobre ela ---------- */
.hero{position:relative;background:var(--branco)}
.hero-foto{position:relative;height:clamp(380px,74vh,760px);overflow:hidden;background:var(--suave)}
.hero.interno .hero-foto{height:clamp(240px,46vh,500px)}
.hero-foto .par{position:absolute;inset:-6% 0;will-change:transform}
.hero-foto img{width:100%;height:100%;object-fit:cover;display:block;animation:aproxima 22s var(--entra) both}
@keyframes aproxima{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero .miolo{position:relative;z-index:2;margin-top:calc(-1 * clamp(110px,16vh,190px))}
.hero.interno .miolo{margin-top:calc(-1 * clamp(80px,11vh,130px))}
.hero-painel{background:var(--branco);max-width:640px;padding:clamp(22px,3vw,40px) clamp(20px,3.2vw,44px);box-shadow:var(--sombra);border-top:4px solid var(--vermelho)}
.hero-painel h1{font-size:clamp(30px,4vw,50px);line-height:1.08;max-width:18ch}
.hero.interno .hero-painel h1{font-size:clamp(30px,3.8vw,46px)}
.hero-painel .lead{color:var(--cinza);margin-top:16px;font-size:16.5px;max-width:34rem}
.hero-painel .sub{color:var(--cinza);margin-top:12px;font-size:15.5px}
.hero-painel .sub b{color:var(--preto);font-weight:600}
.hero-painel .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-painel .trilha{margin-bottom:12px}

/* ---------- Quem somos: texto e uma foto que vaza a coluna ---------- */
.quem{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,6vw,88px);align-items:center}
.quem .corpo+.corpo{margin-top:14px}
.quem .vaza{margin-right:calc(-1 * var(--gutter))}
.quem .vaza img{width:100%;aspect-ratio:5/4;object-fit:cover;display:block;box-shadow:var(--sombra)}
.quem .corpo{font-size:16.5px;max-width:38rem}
.quem .corpo:first-of-type{font-family:var(--titulo);font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--preto)}
@media (min-width:1220px){.quem .vaza{margin-right:calc((1120px - 100vw) / 2)}}

/* ---------- Dois prédios: as duas fachadas e a travessia no meio ---------- */
.predios-cab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:end}
.predios-par{display:grid;grid-template-columns:minmax(0,1fr) clamp(120px,14vw,180px) minmax(0,1fr);align-items:center;margin-top:clamp(28px,4vw,48px)}
.predios-par figure{margin:0}
.predios-par .moldura{overflow:hidden;box-shadow:var(--sombra)}
.predios-par img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform .8s var(--entra)}
.predios-par figure:hover img{transform:scale(1.04)}
.predios-par figcaption{font-size:14px;color:var(--cinza);margin-top:12px;line-height:1.55;max-width:34rem}
.predios-par figcaption b{display:block;color:var(--preto);font-weight:600;margin-bottom:2px}
.atravessa{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;align-self:start;margin-top:calc((100% * 0) + 4.5vw);padding-inline:10px}
.atravessa .linha-rua{width:100%;height:0;border-top:2px dashed var(--vermelho)}
.atravessa p{font-family:var(--titulo);font-style:italic;font-size:15px;line-height:1.35;color:var(--vermelho);margin-top:10px}

/* ---------- portas por idade: cartões com foto viva ---------- */
.portas{gap:clamp(16px,2.4vw,28px)}
.porta{background:var(--branco);border-top:0;padding:0;box-shadow:var(--sombra-leve);transition:transform .35s var(--entra),box-shadow .35s}
.porta .foto{overflow:hidden}
.porta img.f{transition:transform .8s var(--entra);aspect-ratio:4/3}
.porta>*:not(.foto){margin-inline:clamp(18px,2vw,24px)}
.porta .ir{margin-bottom:22px}
.porta h3{font-size:clamp(24px,2.4vw,30px)}
.porta:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.porta:hover img.f{transform:scale(1.06)}

/* ---------- faixa de fotos que desliza sozinha ---------- */
.faixa-fotos{overflow:hidden;padding-block:clamp(20px,3vw,32px);background:var(--branco)}
.faixa-fotos .trilho{display:flex;gap:14px;width:max-content;animation:desliza 70s linear infinite}
.faixa-fotos:hover .trilho{animation-play-state:paused}
.faixa-fotos img{height:clamp(150px,20vw,250px);width:auto;display:block;object-fit:cover}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Um dia aqui: faixa preta, amarelo sobre preto ---------- */
.secao.escuro{background:var(--preto);color:var(--branco)}
.escuro .chapeu{color:var(--amarelo)}
.escuro .horas{color:var(--branco)}
.escuro .horas span{color:var(--amarelo)}
.escuro .frase{color:#E9E4E6}
.escuro .item{border-color:#3A3538}
.escuro .item h3{color:var(--amarelo)}
.escuro .item p{color:#E9E4E6}

/* ---------- fotos dentro das seções: cantos vivos, zoom leve no hover, algumas vazam ---------- */
.dois-dif .foto,.bebes .foto,.lado .foto{overflow:hidden}
.dois-dif img.f,.bebes img.f{transition:transform .8s var(--entra)}
.dois-dif .foto:hover img.f,.bebes .foto:hover img.f{transform:scale(1.04)}
@media (min-width:861px){
  .dois-dif.um-foto>.foto{margin-left:calc(-1 * var(--gutter))}
}
.bebes{background:var(--branco);box-shadow:var(--sombra-leve);border:0;border-top:3px solid var(--vermelho)}
.lado .video.real video{box-shadow:var(--sombra)}
.imersao{border-top:0;padding-top:20px}

/* ---------- galerias que deslizam, em todas as larguras ---------- */
.galeria-cab{align-items:end}
.galeria-setas{display:flex;gap:8px}
.galeria-setas button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--preto);background:var(--branco);cursor:pointer;font:600 18px/1 var(--texto);color:var(--preto);transition:background .2s,color .2s,transform .2s}
.galeria-setas button:hover{background:var(--preto);color:var(--branco);transform:translateY(-2px)}
.galeria{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:clamp(12px,1.6vw,20px);
  margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);padding-bottom:10px;scroll-behavior:smooth;scrollbar-width:thin}
.galeria li{flex:0 0 clamp(260px,34%,420px);scroll-snap-align:start;grid-column:auto !important}
.galeria img.f{aspect-ratio:4/3 !important;transition:transform .8s var(--entra)}
.galeria .foto{overflow:hidden}
.galeria li:hover img.f{transform:scale(1.04)}
.galeria figcaption{padding-top:2px}
@media (min-width:1220px){.galeria{margin-right:calc((1120px - 100vw) / 2);padding-right:calc((100vw - 1120px) / 2)}}

/* ---------- visita e botões fixos ---------- */
.visita{position:relative}
.aba-visita{position:fixed;right:0;top:50%;z-index:25;transform:translateY(-50%);writing-mode:vertical-rl;rotate:180deg;
  background:var(--vermelho);color:var(--branco);text-decoration:none;font:600 13px var(--texto);letter-spacing:.08em;text-transform:uppercase;
  padding:18px 11px;box-shadow:var(--sombra-leve);transition:padding .2s var(--entra),background .2s}
.aba-visita:hover{padding-right:15px;background:var(--preto)}
.bolha-whats{position:fixed;right:20px;bottom:20px;z-index:25;display:flex;align-items:center;gap:10px;text-decoration:none}
.bolha-whats .rotulo{background:var(--branco);color:var(--preto);font:600 13.5px var(--texto);padding:9px 14px;border-radius:999px;box-shadow:var(--sombra-leve);
  opacity:0;transform:translateX(8px);transition:opacity .25s,transform .25s var(--entra)}
.bolha-whats:hover .rotulo,.bolha-whats:focus-visible .rotulo{opacity:1;transform:none}
.bolha-whats .circulo{width:58px;height:58px;border-radius:50%;background:var(--vermelho);display:grid;place-items:center;box-shadow:var(--sombra);transition:transform .25s var(--entra),background .2s}
.bolha-whats:hover .circulo{transform:scale(1.07);background:var(--preto)}
.bolha-whats svg{width:28px;height:28px}

/* ---------- entrada suave ao rolar (só com JS e sem pedido de menos movimento) ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--entra),transform .8s var(--entra);transition-delay:calc(var(--i,0) * 70ms)}
.js .rv.visto{opacity:1;transform:none}
.js .rv.lado-e{transform:translateX(-28px)}
.js .rv.lado-d{transform:translateX(28px)}
.js .rv.lado-e.visto,.js .rv.lado-d.visto{transform:none}

/* ---------- tablet e celular ---------- */
@media (max-width:860px){
  .quem,.predios-cab{grid-template-columns:minmax(0,1fr)}
  .quem .vaza{margin-right:calc(-1 * var(--gutter));margin-left:calc(-1 * var(--gutter))}
  .quem .vaza img{aspect-ratio:16/10;box-shadow:none}
  .predios-par{grid-template-columns:minmax(0,1fr)}
  .atravessa{flex-direction:row;gap:14px;justify-content:flex-start;margin:0;padding:16px 0 16px 22px}
  .atravessa .linha-rua{width:0;height:64px;border-top:0;border-left:2px dashed var(--vermelho);flex:0 0 auto}
  .atravessa p{margin-top:0;text-align:left;font-size:16px}
  .aba-visita,.bolha-whats{display:none}
  .galeria li{flex-basis:clamp(240px,62%,380px)}
}
@media (max-width:640px){
  .topo{position:sticky}
  .topo .miolo{flex-wrap:nowrap}
  .menu-botao{display:inline-flex}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--branco);flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--gutter) 16px;box-shadow:var(--sombra-leve);font-size:15px}
  .menu.aberto{display:flex}
  .menu a:not(.botao){display:block;padding-block:12px;border-bottom:1px solid var(--fio)}
  .menu a:not(.botao)::after{display:none}
  .menu .botao.pequeno{margin-top:12px;padding:11px 16px}
  .hero-foto{height:56vh;min-height:300px}
  .hero.interno .hero-foto{height:38vh;min-height:220px}
  .hero .miolo{margin-top:-56px}
  .hero.interno .miolo{margin-top:-44px}
  .hero-painel{padding:20px 18px 22px}
  .galeria li{flex-basis:80%}
  .galeria-setas{display:none}
}

/* ---------- menos movimento: tudo parado, nada some ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-foto img{animation:none}
  .hero-foto .par{transform:none !important}
  .faixa-fotos{overflow-x:auto}
  .faixa-fotos .trilho{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .porta,.porta img.f,.botao,.galeria img.f,.predios-par img{transition:none}
  .porta:hover,.botao:hover{transform:none}
}

/* ---------- faixa do vídeo: vídeo com capa, texto grande, mosaico (Berçário e Elementary) ----------
   Resolve o "vídeo morto" com coluna vazia ao lado: fundo vermelho, o vídeo vira o convite,
   o texto ganha corpo e duas fotos fecham a altura. */
.secao.faixa-video{background:var(--vermelho);color:var(--branco);padding-block:clamp(48px,6vw,88px);overflow:hidden}
.fv-grade{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.fv-video{margin:0}
.fv-moldura{position:relative;background:var(--branco);padding:10px;box-shadow:0 30px 60px -24px rgba(0,0,0,.5);transform:rotate(-1.5deg);transition:transform .5s var(--entra)}
.fv-moldura:hover{transform:rotate(0deg) translateY(-4px)}
.fv-moldura video{display:block;width:100%;aspect-ratio:9/16;height:auto;object-fit:cover;background:var(--preto)}
.fv-play{position:absolute;inset:10px;border:0;background:transparent;cursor:pointer;padding:0}
.fv-play:focus-visible{outline:3px solid var(--amarelo);outline-offset:4px}
.fv-moldura.tocando .fv-play{display:none}
.faixa-video .chapeu{color:var(--amarelo)}
.fv-lead{font-family:var(--titulo);font-weight:600;font-size:clamp(22px,2.4vw,32px);line-height:1.3;max-width:30ch;text-wrap:pretty}
.faixa-video .imersao{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.35)}
.faixa-video .numero{color:var(--amarelo)}
.faixa-video .imersao p{color:var(--branco)}
.faixa-video .imersao small{color:rgba(255,255,255,.85)}
.fv-mosaico{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(24px,3vw,36px)}
.fv-mosaico .foto{overflow:hidden;box-shadow:0 16px 30px -18px rgba(0,0,0,.5)}
.fv-mosaico img.f{aspect-ratio:4/5;transition:transform .8s var(--entra)}
.fv-mosaico .foto:nth-child(2){margin-top:clamp(18px,3vw,40px)}
.fv-mosaico .foto:hover img.f{transform:scale(1.05)}

/* foto de bloco ao lado de texto curto: não pode deixar coluna vazia */
.turma-k2 .bebes-grade{align-items:center}
.turma-k2 .foto img.f{aspect-ratio:3/2}
@media (min-width:861px){
  .dois-dif.um-foto>.foto{position:sticky;top:96px;align-self:start}
}

/* barra de visita do celular: translúcida, não cobre o conteúdo (o corpo ganha a altura dela) */
@media (max-width:860px){
  .fixo{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .fixo .botao{border-radius:999px}
  .fv-grade{grid-template-columns:minmax(0,1fr)}
  .fv-video{max-width:330px;width:100%;justify-self:center}
  .fv-moldura{transform:none}
  .fv-texto{text-align:left}
}
@media (max-width:640px){
  .fv-lead{font-size:22px}
  .fv-mosaico .foto:nth-child(2){margin-top:20px}
  .secao h2,.lado h2{font-size:clamp(24px,6.6vw,30px)}
  .hero-painel h1{font-size:clamp(28px,8vw,34px)}
  .hero.interno .hero-painel h1{font-size:clamp(28px,8vw,34px)}
  .hero-painel .acoes .botao{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .fv-moldura{transform:none;transition:none}
  .fv-mosaico img.f{transition:none}
}

/* turma dos bebês: trio de fotos de bebê (alimentação, atividade, a definir); no celular, carrossel */
.trio-bebes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-self:start}
.trio-bebes .foto:first-child{grid-column:1 / -1}
.trio-bebes .quadro{aspect-ratio:1/1;height:auto}
.trio-bebes .foto:first-child .quadro{aspect-ratio:3/2}
.trio-bebes img.f{aspect-ratio:1/1}
.trio-bebes .foto:first-child img.f{aspect-ratio:3/2}
@media (max-width:860px){
  .trio-bebes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin-inline:calc(-1 * clamp(20px,3.5vw,40px));padding-inline:clamp(20px,3.5vw,40px);padding-bottom:6px}
  .trio-bebes .foto{flex:0 0 72%;scroll-snap-align:start}
  .trio-bebes .foto:first-child .quadro,.trio-bebes .quadro{aspect-ratio:4/3}
}

/* ---------- Berçário v2: blocos do dia a dia, cada um com foto ao lado ---------- */
.quadro{height:100%}
.blocos-dia .bloco{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center;margin-top:clamp(28px,4vw,56px)}
.blocos-dia .bloco:first-of-type{margin-top:12px}
.blocos-dia .bloco.inverte{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.blocos-dia .bloco.inverte>.foto,.blocos-dia .bloco.inverte>.fotos-par{grid-column:2;grid-row:1}
.blocos-dia .bloco.inverte>.bloco-texto{grid-column:1;grid-row:1}
.bloco .foto .quadro,.bloco .foto img.f{aspect-ratio:4/3}
.bloco-texto h2{font-size:clamp(24px,2.6vw,34px)}
.bloco-texto .corpo{margin-top:12px;font-size:16.5px}
.vaga-linha{font-style:italic;opacity:.75}
.fotos-par{display:grid;grid-template-columns:3fr 2fr;gap:12px;align-items:end}
.fotos-par .foto:first-child img.f{aspect-ratio:4/5}
.fotos-par .foto:last-child .quadro{aspect-ratio:3/4}
.bloco .foto{overflow:hidden}
.bloco .foto img.f{transition:transform .8s var(--entra)}
.bloco .foto:hover img.f{transform:scale(1.04)}
/* Safe Moves em destaque: faixa preta, foto grande que vaza para a borda */
.secao.bloco-destaque{background:var(--preto);color:var(--branco);overflow:hidden}
.destaque-grade{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center}
.destaque-grade .foto{margin-left:calc(-1 * var(--gutter))}
.destaque-grade .quadro{aspect-ratio:16/10;background:#2A2629;border-color:#6E676B;color:#C9C3C6}
.bloco-destaque .chapeu{color:var(--amarelo)}
.bloco-destaque h2{font-size:clamp(34px,4vw,54px);color:var(--branco)}
.bloco-destaque .fv-lead{margin-top:14px;color:#F2EEF0}
@media (min-width:1220px){.destaque-grade .foto{margin-left:calc((1120px - 100vw) / 2)}}
@media (max-width:860px){
  .blocos-dia .bloco,.blocos-dia .bloco.inverte,.destaque-grade{grid-template-columns:minmax(0,1fr);gap:16px}
  .blocos-dia .bloco.inverte>.foto,.blocos-dia .bloco.inverte>.fotos-par,.blocos-dia .bloco.inverte>.bloco-texto{grid-column:auto;grid-row:auto}
  .blocos-dia .bloco>.foto,.blocos-dia .bloco>.fotos-par{margin-inline:calc(-1 * var(--gutter))}
  .blocos-dia .bloco{margin-top:36px}
  .destaque-grade .foto{margin-inline:calc(-1 * var(--gutter))}
  .fotos-par{padding-inline:0}
}

/* ===================== construção (Tomás, 16/10/2026) ===================== */
/* a foto do topo vem num <picture> (WebP ao lado): o picture ocupa a altura toda da moldura */
.hero-foto picture{height:100%}
/* blocos do Berçário que ainda esperam foto: três textos lado a lado, com fio em cima.
   Quando a foto chegar, o texto volta a ser um .bloco com a foto ao lado (desenho da Nina, layout-v2). */
.tres-textos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(24px,3vw,36px)}
.tres-textos article{border-top:2px solid var(--preto);padding-top:16px}
.tres-textos h3{font-size:clamp(19px,1.8vw,23px)}
.tres-textos p{color:var(--cinza);margin-top:10px;font-size:15.5px}
/* Safe Moves sem foto (a foto chega depois): a faixa preta só com o texto, numa coluna confortável */
.destaque-grade.so-texto{grid-template-columns:minmax(0,1fr)}
.destaque-grade.so-texto .bloco-texto{max-width:46rem}
/* lista dos bebês sem o trio de fotos (fotos de bebê a chegar): o texto ocupa a largura */
.bebes-grade.so-texto{grid-template-columns:minmax(0,1fr)}
@media (max-width:860px){ .tres-textos{grid-template-columns:minmax(0,1fr)} }
/* lista ao lado de uma foto (Comer também é aprender, Berçário): uma coluna, para não espremer */
.bloco-texto .ativ-lista{grid-template-columns:minmax(0,1fr);margin-top:16px}

/* Balão "Você conhece a BNCC?" no Quem somos (Carol, 23/10/2026) */
.quem .corpo + .corpo{margin-top:14px}
.bncc{margin-top:22px;max-width:34rem}
.bncc summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  font:600 14px var(--texto);color:var(--vermelho);background:var(--branco);
  border:1.5px solid var(--vermelho);border-radius:999px;padding:10px 18px;
  transition:background .2s,color .2s}
.bncc summary::-webkit-details-marker{display:none}
.bncc summary::before{content:"?";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--vermelho);color:var(--branco);font-size:13px;line-height:1}
.bncc summary:hover,.bncc[open] summary{background:var(--vermelho);color:var(--branco)}
.bncc summary:hover::before,.bncc[open] summary::before{background:var(--branco);color:var(--vermelho)}
.bncc summary:focus-visible{outline:2px solid var(--vermelho);outline-offset:3px}
.bncc-corpo{position:relative;margin-top:14px;background:var(--suave);border-left:3px solid var(--vermelho);
  padding:16px 18px;box-shadow:var(--sombra-leve)}
.bncc-corpo p{color:var(--cinza);font-size:15px;line-height:1.6}
.bncc-link{display:inline-block;margin-top:12px;font-weight:600;color:var(--vermelho)}
@media (prefers-reduced-motion:no-preference){.bncc[open] .bncc-corpo{animation:bnccAbre .3s ease-out}}
@keyframes bnccAbre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Quem somos: duas fotos, uma reta e uma de lado (pequenininhos e maiores) — Carol, 23/10/2026 */

/* Berçário, O espaço: frase em destaque + apoio em texto corrido (Carol, 23/10) */
.fv-lead strong{font-weight:700}
.fv-apoio{margin-top:14px;max-width:46ch;font-size:clamp(16px,1.25vw,18px);line-height:1.6;opacity:.92}
.fv-mosaico img.f{object-position:50% 45%}

/* Quem somos em duas metades (Carol, 23/10): metade do texto com a foto dos pequenininhos,
   a outra metade com a foto dos maiores. Foto do tamanho do texto, encostada na borda da tela,
   no mesmo jeito das outras fotos grandes do site. */
.quem2{display:grid;gap:clamp(48px,7vw,96px)}
.quem-par{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,6vw,88px);align-items:stretch}
.quem-par.invertido{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.quem-par.invertido .quem-foto{order:-1}
.quem-texto{align-self:center}
.quem2 .corpo{font-size:16.5px;max-width:38rem}
.quem2 .corpo+.corpo{margin-top:14px}
.quem2 .quem-par:first-child .corpo:first-of-type{font-family:var(--titulo);font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--preto)}
.quem-foto{margin:0;min-height:340px;position:relative;overflow:hidden;box-shadow:var(--sombra)}
.quem-foto picture,.quem-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.quem-par .quem-foto{margin-right:calc(-1 * var(--gutter))}
.quem-par.invertido .quem-foto{margin-right:0;margin-left:calc(-1 * var(--gutter))}
@media (min-width:1220px){
  .quem-par .quem-foto{margin-right:calc((1120px - 100vw) / 2)}
  .quem-par.invertido .quem-foto{margin-right:0;margin-left:calc((1120px - 100vw) / 2)}
}
@media (max-width:860px){
  .quem-par,.quem-par.invertido{grid-template-columns:minmax(0,1fr);gap:24px}
  .quem-par.invertido .quem-foto{order:0}
  .quem-par .quem-foto,.quem-par.invertido .quem-foto{margin-inline:calc(-1 * var(--gutter));min-height:0;aspect-ratio:4/3;box-shadow:none}
  .quem-par.invertido .quem-foto{aspect-ratio:4/5}
}
.fv-mosaico{align-items:start}
.fv-mosaico picture{display:block}

/* Berçário, alimentação: duas fotos em pé lado a lado, do tamanho do texto (Carol, 23/10) */
.alim-par{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.alim-par .foto img.f,.alim-par .foto:first-child img.f{aspect-ratio:3/4;object-position:50% 35%}
.alim-par .foto:nth-child(2){margin-top:clamp(18px,3vw,40px)}

/* Berçário, "Como a Brasil Canadá Santana ensina": a foto entra ao lado, da altura do texto,
   sem mexer na lista das atividades (Carol, 23/10) */
.bebes-grade.com-foto{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:stretch}
.bebes-foto{position:relative;min-height:320px;margin:0}
.bebes-foto picture,.bebes .bebes-foto img.f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.bebes .bebes-foto img.f{object-position:50% 60%}
@media (max-width:860px){
  .bebes-grade.com-foto{grid-template-columns:minmax(0,1fr)}
  .bebes-foto{min-height:0;aspect-ratio:4/5}
}

/* Início: o socioemocional em três passos, cada um leva à sua página (Carol, 23/10) */
.passos h3 a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.passos h3 a:hover{color:var(--vermelho)}

/* Perguntas frequentes: abre e fecha, com a resposta no HTML para Google e IAs (Carol, 03/11) */
.faq-apoio{max-width:40rem;margin-top:10px}
.faq-lista{margin-top:clamp(20px,3vw,32px);border-top:1px solid rgba(0,0,0,.16)}
.faq{border-bottom:1px solid rgba(0,0,0,.16)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:16px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font:600 clamp(16px,1.5vw,18px)/1.4 var(--texto);color:var(--preto)}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--vermelho);color:var(--branco);font:600 18px/1 var(--texto);transition:transform .25s var(--entra)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:hover h3,.faq[open] summary h3{color:var(--vermelho)}
.faq summary:focus-visible{outline:2px solid var(--vermelho);outline-offset:3px}
.faq-corpo{max-width:46rem;padding:0 44px 20px 0}
.faq-corpo p{color:var(--cinza);font-size:16px;line-height:1.65}
.faq-corpo p+p{margin-top:10px}
@media (max-width:560px){.faq-corpo{padding-right:0}}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}