/* Página Cestas infantis e maternidade: composição própria sobre a base (base.css), o movimento (movimento.css) e os componentes (componentes.css).
   Direção visual (site/direcao-visual.html, Infantis e maternidade, 4/3/2): formas suaves e ritmo calmo, a página acolhe antes de vender.
   É a única página com composição centralizada permitida: título curto acima e uma foto em arco no centro. As fotos das cestas são em arco, na mesma
   proporção 4:5 e no mesmo tamanho das outras páginas (o pedido do Lombra de 20/09/2026 vale mais que os arcos de tamanhos diferentes da direção).
   Movimento: subida suave e lenta, sem tremor. Cestas em capítulos e cartão de pedido fixo, como nas outras páginas. */

/* ---------- topo: trilha e título no alto, a foto em arco no centro, o texto de um lado e os atalhos do outro ---------- */
.topo--suave{display:grid;align-content:center}
.topo--suave>.container{width:100%}
@media(min-width:1100px){.topo--suave{min-height:var(--sec-h)}}
.topo--suave .topo__grade{display:grid;justify-items:center;gap:var(--s5);padding-block:var(--s5) var(--s6);text-align:center}
.topo__trilha .migalhas{justify-content:center;margin:0}
.topo.topo--suave h1{max-width:26ch;font:500 clamp(2rem,1rem + 2.6vw,3.5rem)/1.08 var(--serif);letter-spacing:-.015em;text-wrap:balance}
/* foto de destaque da categoria: 4:5 em arco, a mesma proporção das fotos de cesta do site */
.topo__arco{--prop:4/5;width:min(76vw,340px)}
.topo--suave .topo__lead{margin:0;max-width:30em}
.topo__lado{display:grid;justify-items:center;gap:var(--s5)}
.topo__lado .topo__acoes{margin:0;justify-content:center}
.topo__lado .topo__fatos{margin:0;justify-content:center}
@media(min-width:1100px){
  .topo--suave .topo__grade{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"trilha trilha trilha" "titulo titulo titulo" "lead foto atalhos";
    align-items:center;column-gap:clamp(40px,6vw,112px);row-gap:var(--s5)}
  .topo__trilha{grid-area:trilha}
  .topo.topo--suave h1{grid-area:titulo;max-width:none}
  .topo__arco{grid-area:foto;width:min(560px,calc((var(--sec-h) - 230px) * .8))}
  .topo--suave .topo__lead{grid-area:lead;justify-self:end;text-align:right;max-width:22em}
  .topo__lado{grid-area:atalhos;justify-self:start;justify-items:start;text-align:left}
  .topo__lado .topo__acoes{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .topo__lado .topo__fatos{flex-direction:column;justify-content:flex-start;gap:var(--s1)}
  .topo__lado .topo__fatos li+li::before{display:none}
}

/* ---------- blocos: cestas infantis e chegada do bebê, cada um com seu título e as cestas em capítulos ---------- */
.bloco{scroll-margin-top:calc(var(--cab-h) + var(--s4))}
.bloco+.bloco{margin-top:var(--s8)}
.bloco__cab{display:grid;gap:var(--s2);padding-block:clamp(24px,5svh,56px) var(--s5)}
.bloco__cab h2{font:500 clamp(1.75rem,1.1rem + 2.2vw,3rem)/1.08 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.bloco__cab p{margin:0;max-width:46ch;color:var(--suave)}
/* depois da seção dourada do aviso, um respiro antes das cestas e do cartão de pedido */
.aviso+.escolha{padding-top:var(--s6)}
/* a primeira cesta de cada bloco segue logo abaixo do título do bloco (o bloco todo ocupa uma tela, sem o vazio de uma tela por cesta) */
@media(min-width:760px){.bloco .capitulo:first-child{min-height:0}}
/* nomes das cestas um pouco menores, para "Balon Birthday Kids" caber em uma linha */
.capitulo__nome{font-size:clamp(1.875rem,1rem + 2.4vw,3.25rem)}
/* a chegada do bebê: o arco à esquerda e uma coluna de texto mais estreita à direita */
#welcome-baby .capitulo__texto{max-width:30rem}

/* ---------- escolha de cor da caneca (Balon Birthday Kids): duas amostras que escolhem a cesta e vão para o pedido ---------- */
.variacao{display:grid;gap:var(--s2)}
.variacao__rotulo{margin:0;font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.variacao__opcoes{display:flex;flex-wrap:wrap;gap:var(--s3)}
.amostra{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 var(--s5) 0 var(--s3);border:1.5px solid var(--linha);border-radius:var(--r-pilula);font-weight:500;color:var(--ink);cursor:pointer;
  transition:border-color var(--t-rapido) var(--ease)}
.amostra input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.amostra__cor{flex:none;width:22px;height:22px;border-radius:50%;background:var(--cor);box-shadow:inset 0 0 0 1px rgba(43,24,20,.18)}
.amostra:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.amostra:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
@media(hover:hover){.amostra:hover{border-color:var(--ink)}}
@media(prefers-reduced-motion:reduce){.amostra{transition:none}}

/* ---------- guia: o mesmo componente das outras páginas (texto próprio e caminhos para as outras páginas) ---------- */

/* ---------- movimento: subida suave e lenta (tipo "suave", definido em movimento.css) ---------- */
@media(prefers-reduced-motion:no-preference){
  .topo__arco{animation:suave-arco 900ms var(--mv-ease) 120ms backwards}
  @keyframes suave-arco{from{opacity:0;transform:translate3d(0,14px,0)}}
}