/* Página Aniversário e presentes: composição própria sobre a base (base.css), o movimento (movimento.css) e os componentes (componentes.css).
   O que é dela: topo com a régua de preço (as cestas posicionadas pelo valor, cada pino leva ao capítulo da cesta).
   As cestas em capítulos, o cartão de pedido, o guia com caminhos, o FAQ e o painel de chamada final vêm dos componentes. */

/* ---------- topo: título à esquerda e a régua de preço à direita ---------- */
.topo--regua{min-height:var(--sec-h);display:grid;align-content:center}
.topo--regua .topo__grade{display:grid;gap:var(--s6);align-items:center;padding-block:var(--s6)}
.topo--regua h1{font-size:clamp(2.25rem,.8rem + 4vw,5.25rem)}
@media(min-width:900px){.topo--regua .topo__grade{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,96px)}}

/* régua: do menor ao maior valor. A posição de cada cesta na horizontal é o valor dela na régua (--x vai de 0 a 1).
   A largura do pino é uma fração da régua, para nunca haver sobreposição (com 4 pinos em 0, .33, .74 e 1, 20% cabe). */
.regua{position:relative;height:clamp(330px,46svh,440px);--pw:clamp(54px,20%,150px)}
.regua__pinos{list-style:none;margin:0;padding:0;position:absolute;inset:0 0 46px 0}
.pino{position:absolute;bottom:0;width:var(--pw);left:calc(var(--x) * (100% - var(--pw)));padding-bottom:24px}
.pino a{display:grid;justify-items:center;gap:8px;text-align:center;color:var(--ink);text-decoration:none}
.pino .slot{width:calc(var(--k,1) * 100%)}
.pino__nome{font:500 clamp(.78rem,.7rem + .35vw,1.0625rem)/1.2 var(--serif)}
.pino__preco{font:600 14px/1 var(--sans);font-variant-numeric:tabular-nums}
.pino::before{content:"";position:absolute;left:50%;bottom:0;width:1px;height:24px;background:var(--ink);opacity:.35}
.pino::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--ouro);box-shadow:0 0 0 3px #fff}
html[data-modo="rascunho"] .pino .slot:not(.tem-foto)::after{white-space:pre-line;font-size:10px;padding:4px}
@media(hover:hover){.pino a:hover .pino__nome{text-decoration:underline;text-decoration-color:var(--ouro);text-decoration-thickness:2px;text-underline-offset:4px}}
/* a linha vai do centro do primeiro pino ao do último: as pontas são exatamente o menor e o maior valor */
.regua__linha{position:absolute;left:calc(var(--pw) / 2);right:calc(var(--pw) / 2);bottom:46px;height:1px;background:var(--ink);transform-origin:left}
.regua__linha::before{content:"";position:absolute;left:0;right:0;top:1px;height:8px;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 14px);opacity:.3}
.regua__min,.regua__max{position:absolute;top:16px;font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.regua__min{left:0;transform:translateX(-50%)}
.regua__max{right:0;transform:translateX(50%)}
/* celular: o botão de WhatsApp do topo repete o da barra fixa, então sai; a régua sobe para caber na primeira tela */
@media(max-width:1099px){.topo--regua .topo__acoes .btn--sec{display:none}}
@media(max-width:899px){
  .topo--regua{align-content:start}
  .topo--regua .topo__grade{gap:var(--s5);padding-block:var(--s4) var(--s5)}
  .topo--regua .topo__acoes{margin-top:var(--s5)}
  .topo--regua .topo__fatos{margin-top:var(--s4)}
  .regua{height:292px}
}
@media(max-width:599px){.pino__nome{font-size:12px}}
@media(prefers-reduced-motion:no-preference){
  .regua__linha{animation:regua-linha 1300ms var(--mv-ease) 100ms backwards}
  @keyframes regua-linha{from{transform:scaleX(0)}}
}