/* Página Dia das Crianças (landing de data): 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, Datas especiais 6/4/3): "o ano do presente numa linha", antecipação sem urgência. Título à esquerda e, à direita, a data
   em numerais grandes de serifa, sem foto na primeira tela. A peça principal é a seção do aviso (componente .aviso em componentes.css: faixa dourada com o título em Playfair Display,
   em uma cor só) que leva ao formulário de pré-cadastro. O resto vem dos componentes: guia com caminhos, perguntas e chamada final suave. */

/* ---------- topo: título à esquerda, a data em numerais grandes à direita ---------- */
.topo--data{min-height:var(--sec-h);display:grid;align-content:center}
.topo--data>.container{width:100%}
.topo--data .topo__grade{display:grid;gap:var(--s7);align-items:center;padding-block:var(--s6)}
@media(min-width:900px){.topo--data .topo__grade{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,6vw,120px)}}
.topo.topo--data h1{font-size:clamp(2.5rem,1rem + 4vw,5rem);line-height:1.02;letter-spacing:-.025em}
/* o título quebra onde a frase pede (nunca com "em" sozinho no fim da linha) */
.topo--data .quebra{display:block}
.data-grande{display:grid;justify-items:start;align-content:center;gap:var(--s2);padding-left:clamp(20px,4vw,64px);border-left:1px solid var(--ouro)}
.data-grande__dia{font:500 clamp(7rem,3rem + 15vw,15rem)/.8 var(--serif);letter-spacing:-.04em;color:var(--ink)}
.data-grande__mes{font:italic 500 clamp(1.75rem,1rem + 2.4vw,3.5rem)/1 var(--serif)}
.data-grande__falta{margin:var(--s3) 0 0;color:var(--suave)}

/* ---------- como funciona: três passos de uma sequência real ---------- */
.passos{padding-block:var(--s8)}
.passos>.container{width:100%}
@media(min-width:760px){.passos{display:grid;align-content:center;min-height:calc(var(--sec-h) * .8)}}
.passos h2{max-width:20ch;margin-bottom:var(--s7);font:500 clamp(2rem,1rem + 3vw,4rem)/1.05 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.passos__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)}
@media(min-width:900px){.passos__lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,80px)}}
.passo{display:grid;gap:var(--s3);align-content:start;padding-top:var(--s5);border-top:1px solid var(--ouro)}
.passo__n{font:italic 500 clamp(2.5rem,2rem + 2vw,4rem)/1 var(--serif);color:var(--ink)}
.passo__titulo{margin:0;font:600 1.25rem/1.3 var(--sans);color:var(--ink)}
.passo__texto{margin:0;max-width:34ch}