/* Base do site: reset, estilos de texto do Design System, botões, etiquetas e entradas animadas. */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-page);
  color: var(--text-primary);
  font: 600 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sky-300); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* estilos de texto (Text Styles do Figma) */
.t-display-xl { font: 400 120px/0.92 var(--font-display); letter-spacing: -0.01em; }
.t-display-number { font: 400 260px/0.85 var(--font-display); letter-spacing: -0.01em; }
.t-h1 { font: 400 80px/1.02 var(--font-display); letter-spacing: -0.01em; }
.t-h2 { font: 400 60px/1.02 var(--font-display); letter-spacing: -0.01em; }
.t-h3 { font: 400 46px/1.02 var(--font-display); letter-spacing: -0.01em; }
.t-h4 { font: 400 34px/1.08 var(--font-display); letter-spacing: -0.01em; }
.t-h5 { font: 400 26px/1.2 var(--font-display); letter-spacing: -0.01em; }
.t-body-lg { font: 600 18px/1.45 var(--font-body); }
.t-body { font: 600 16px/1.5 var(--font-body); }
.t-body-sm { font: 600 14px/1.5 var(--font-body); }
.t-title-card { font: 900 18px/1.5 var(--font-body); }
.t-title-sm { font: 900 16px/1.5 var(--font-body); }
.t-eyebrow { font: 900 13px/1.5 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-accent); }
.t-tag { font: 800 13px/1.5 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.t-caption { font: 700 12px/1.5 var(--font-body); letter-spacing: .05em; text-transform: uppercase; }

/* botão pílula com borda de adesivo (componente Button) */
.btn {
  --btn-bg: var(--action-primary);
  --btn-fg: var(--text-on-dark);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  padding: var(--space-16) var(--space-24);
  border: 1px solid var(--border-default); border-radius: var(--radius-full);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 800 16px/1.5 var(--font-body); white-space: nowrap; cursor: pointer;
  box-shadow: var(--sticker-sm);
  transition: translate 180ms var(--ease-out), scale 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn--secondary { --btn-bg: var(--action-secondary); }
.btn--whatsapp { --btn-bg: var(--action-whatsapp); }
.btn--soft { --btn-bg: var(--action-soft); --btn-fg: var(--text-primary); }
.btn--small { padding: 14px 22px; font-size: 14.5px; }
/* aperta como botão de verdade: no hover ele afunda até a sombra sumir e fica só o contorno (pedido do Alan, 29/10) */
/* área de clique estendida pra cima: o botão afunda no hover e o mouse não escapa pela borda de cima */
.btn { position: relative; }
.btn::after { content: ""; position: absolute; inset: calc(-1 * var(--shadow-offset-sm) - 1px) 0 0; border-radius: inherit; }
.btn svg.arrow { width: 18px; height: 18px; transition: transform 220ms var(--ease-out); }
.btn:active { translate: 0 var(--shadow-offset-sm); box-shadow: 0 0 0 var(--border-width) var(--border-default), 0 0 0 0 var(--border-default); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { translate: 0 var(--shadow-offset-sm); box-shadow: 0 0 0 var(--border-width) var(--border-default), 0 0 0 0 var(--border-default); }
  .btn:hover svg.arrow { transform: translateX(3px); }
  .btn:active { scale: .98; }
}

/* etiqueta pílula (componente Tag) */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: var(--space-8) 14px; border-radius: var(--radius-full);
  background: var(--bg-highlight); color: var(--text-primary);
  font: 800 14px/1.5 var(--font-body); white-space: nowrap;
}
.tag--sky { background: var(--bg-sky); }
.tag--soft { background: var(--bg-soft); }
.tag--dark { background: var(--bg-dark); color: var(--text-on-dark); }

/* aberto agora (calculado pelo horário real no site.js) */
.status { display: inline-flex; align-items: center; gap: var(--space-8); height: 34px; padding: 0 14px; border-radius: var(--radius-full); font: 500 14px/1.5 var(--font-body); }
.status__dot { position: relative; width: 8px; height: 8px; border-radius: var(--radius-xs); background: #F17423; flex: none; }
.status__dot.is-open { background: var(--green-600); }
.status--soft { background: var(--bg-soft); color: var(--text-secondary); }
.status__dot.is-open::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--green-600); opacity: 0; animation: ping 2.4s var(--ease-out) infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .7; } 70%, 100% { transform: scale(1.6); opacity: 0; } }

.stars { display: inline-flex; gap: 2.5px; color: var(--yellow-400); }
.stars svg { width: 15.6px; height: 15.6px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* entradas: cada section ganha .is-in quando aparece na tela; filhos .in sobem escalonados por --d */
.in { opacity: 0; transform: translateY(14px); }
.is-in .in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) var(--d, 0ms), transform 900ms var(--ease-out) var(--d, 0ms); }
.is-in .btn.in, .is-in .chip.in { transition: opacity 700ms var(--ease-out) var(--d, 0ms), transform 900ms var(--ease-out) var(--d, 0ms), translate 180ms var(--ease-out), scale 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.lines .l { display: block; overflow: hidden; padding: .16em 0 .08em; margin: -.16em 0 -.08em; }
.lines .l > span { display: block; transform: translateY(110%); }
.is-in .lines .l > span { transform: none; transition: transform 1000ms var(--ease-out) var(--d, 0ms); }
/* depois que a linha entra, a máscara sai: nada de letra, acento ou destaque cortado */
.lines .l.solto { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .in, .lines .l > span { transform: none !important; }
  .lines .l { overflow: visible; }
  .is-in .in, .is-in .lines .l > span { transition: opacity 300ms ease !important; }
  .status__dot.is-open::after { animation: none; }
  .btn { transition: none; }
}

/* nada de rolagem lateral: cartões que entram de lado não esticam a página */
html, body { overflow-x: clip; }