/* Site do Sobra no Caixa. Tokens e componentes vêm de tokens.css e bateu.css (cópias do design system). */
html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
main { outline: none; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--cor-primaria); color: var(--cor-sobre-primaria); padding: 10px 16px; border-radius: var(--raio-md); }
.pular:focus { top: 12px; }

/* Ambiente: traços de mostrador girando devagar, em nível de sussurro */
.ambiente { position: fixed; inset: -30vmax; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--cor-linha) 70%, transparent) 0deg .35deg, transparent .35deg 6deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 34vmax, #000 34.2vmax 35.5vmax, transparent 35.7vmax);
          mask: radial-gradient(circle at 50% 50%, transparent 0 34vmax, #000 34.2vmax 35.5vmax, transparent 35.7vmax);
  animation: girar-ambiente 90s linear infinite; }
@keyframes girar-ambiente { to { transform: rotate(360deg); } }

.cabecalho { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--espaco-5); padding: var(--espaco-3) clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--cor-fundo) 92%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--cor-linha) 60%, transparent); }
.cabecalho__marca img { height: 34px; width: auto; }
.cabecalho__nav { display: flex; gap: var(--espaco-5); margin-left: auto; }
.cabecalho__nav a { color: var(--cor-texto); text-decoration: none; font-weight: var(--peso-medio); font-size: var(--texto-sm); }
.cabecalho__nav a:hover { text-decoration: underline; }
.cabecalho__acoes { gap: var(--espaco-2); flex-wrap: nowrap; }
@media (max-width: 760px) { .cabecalho__nav { display: none; } .cabecalho__acoes { margin-left: auto; } }
@media (max-width: 400px) { .cabecalho__acoes .btn--fantasma { display: none; } }

.secao { max-width: 1180px; margin: 0 auto; padding: clamp(64px, 10vw, 128px) clamp(16px, 4vw, 48px) 0; display: grid; gap: var(--espaco-6); }
.secao > p, .secao p { max-width: 62ch; }
.secao h2 { max-width: 20ch; }

/* Hero: o título em cima, a balança como objeto central */
.hero { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 7vw, 96px) clamp(16px, 4vw, 48px) 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__texto { display: grid; gap: var(--espaco-5); }
.hero .display { max-width: 9ch; }
@media (max-width: 900px) { .hero .display { max-width: 11ch; } }
.hero__sub { font-size: clamp(1.1rem, 1.6vw, var(--texto-lg)); max-width: 46ch; color: var(--cor-texto-2); }
.hero__acoes { gap: var(--espaco-4); }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); } }

.balanca { margin: 0; padding: var(--espaco-6); border-radius: 28px; background: var(--cor-superficie); box-shadow: var(--sombra-3); display: grid; gap: var(--espaco-5); }
.balanca__mostrador { position: relative; }
.balanca__svg { width: 100%; height: auto; overflow: visible; }
.balanca__svg .agulha { transform-box: view-box; transform-origin: 120px 128px; transform: rotate(var(--angulo, -40deg)); transition: transform var(--duracao-lento) var(--curva-saida); }
.balanca.bateu .balanca__svg .agulha { transition: transform var(--duracao-ponteiro) var(--curva-assentar); }
.balanca__tracos line { stroke: var(--cor-borda-input); stroke-width: 2; stroke-linecap: round; }
.balanca__tracos line.grosso { stroke: var(--cor-texto-2); stroke-width: 3; }
.balanca__leitura { text-align: center; margin-top: calc(var(--espaco-3) * -1); display: grid; justify-items: center; gap: 2px; }
.balanca__leitura strong { font-size: clamp(2.2rem, 5vw, var(--texto-4xl)); font-stretch: var(--largura-display); font-weight: var(--peso-display); letter-spacing: -0.02em; line-height: 1.05; }
.balanca__estado { font-weight: var(--peso-semi); color: var(--cor-texto-2); }
.balanca.bateu .balanca__estado { color: var(--cor-sucesso); }
.balanca.falta strong { color: var(--cor-erro); }
.balanca__controle { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--espaco-2) var(--espaco-4); }
.balanca__controle input, .balanca__controle .linha { grid-column: 1 / -1; }
.balanca__preco { font-size: var(--texto-xl); font-weight: var(--peso-display); font-stretch: var(--largura-display); }
input[type="range"] { width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: var(--cor-superficie-2); box-shadow: inset 0 0 0 1px var(--cor-borda-input); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: var(--cor-superficie-2); box-shadow: inset 0 0 0 1px var(--cor-borda-input); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--cor-primaria); border: 4px solid var(--cor-superficie); box-shadow: var(--sombra-2); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--cor-primaria); border: 4px solid var(--cor-superficie); box-shadow: var(--sombra-2); }

/* Problema: recibo com custos ordenados pelo peso */
.problema { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 900px) { .problema { grid-template-columns: minmax(0, 1fr); } }
.problema__texto { display: grid; gap: var(--espaco-5); }
.recibo { list-style: none; margin: 0; padding: var(--espaco-6); background: var(--cor-superficie); border-radius: var(--raio-lg); box-shadow: var(--sombra-2); display: grid; gap: var(--espaco-3); }
.recibo li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espaco-4); padding-bottom: var(--espaco-3); border-bottom: 1px dashed var(--cor-linha-forte); font-size: calc(0.95rem + var(--peso, 80) * 0.0026rem); }
.recibo li b { white-space: nowrap; }
.recibo__total { border-bottom: 0 !important; border-top: 2px solid var(--cor-texto); padding-top: var(--espaco-3); font-size: var(--texto-2xl) !important; font-stretch: var(--largura-display); font-weight: var(--peso-display); }
.recibo__total b { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--cor-destaque) 45%, transparent) 58%); }

/* Como funciona: régua com marcas */
.regua { list-style: none; margin: 0; padding: var(--espaco-6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-6); counter-reset: passo; position: relative; }
.regua::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(90deg, var(--cor-linha-forte) 0 2px, transparent 2px 24px) bottom / 100% 8px no-repeat, linear-gradient(var(--cor-texto), var(--cor-texto)) bottom / 100% 2px no-repeat; }
.regua li { counter-increment: passo; display: grid; gap: var(--espaco-3); align-content: start; }
.regua li::before { content: counter(passo); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--cor-primaria); color: var(--cor-sobre-primaria); font-weight: var(--peso-display); font-stretch: var(--largura-display); margin-top: -36px; }
@media (max-width: 760px) { .regua { grid-template-columns: minmax(0, 1fr); padding-top: 0; } .regua::before { display: none; } .regua li::before { margin-top: 0; } }

/* Recursos: lista em duas colunas, sem cartões */
.recursos__lista { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-6) var(--espaco-8); }
.recursos__lista > div { display: grid; gap: var(--espaco-2); padding-top: var(--espaco-4); border-top: 1px solid var(--cor-linha-forte); }
.recursos__lista dt { display: flex; gap: var(--espaco-3); align-items: center; font-weight: var(--peso-titulo); font-stretch: var(--largura-titulo); font-size: var(--texto-lg); }
.recursos__lista dt svg { width: 24px; height: 24px; color: var(--cor-texto-primaria); flex: none; }
.recursos__lista dd { margin: 0; color: var(--cor-texto-2); max-width: 46ch; }
@media (max-width: 760px) { .recursos__lista { grid-template-columns: minmax(0, 1fr); } }

/* Demonstração */
.demo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); align-items: center; }
@media (max-width: 900px) { .demo { grid-template-columns: minmax(0, 1fr); } }
.demo__texto { display: grid; gap: var(--espaco-4); }
.demo__tela { margin: 0; border-radius: 14px; overflow: hidden; background: var(--cor-superficie); box-shadow: var(--sombra-3); display: grid; }
.demo__tela img { width: 100%; height: auto; }
.demo__tela figcaption { padding: var(--espaco-2) var(--espaco-4); }
.navegador { display: flex; gap: 6px; padding: 10px 14px; background: var(--cor-superficie-2); }
.navegador i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor-linha-forte); }

/* Para quem */
.para-quem__grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--espaco-6); align-items: end; }
.para-quem__grade article { display: grid; gap: var(--espaco-3); padding-top: var(--espaco-4); border-top: 2px solid var(--cor-texto); }
.para-quem__principal { border-top-color: var(--cor-destaque) !important; border-top-width: 4px !important; }
@media (max-width: 900px) { .para-quem__grade { grid-template-columns: minmax(0, 1fr); } }

/* Planos */
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-5); align-items: stretch; }
.plano { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--espaco-3); padding: var(--espaco-6); border-radius: var(--raio-lg); background: var(--cor-superficie); border: 1px solid var(--cor-linha); }
.plano--destaque { background: var(--esmalte-800); color: #fff; border-color: transparent; box-shadow: var(--sombra-3); }
.plano--destaque ul { color: #E9EFEC; }
.plano__preco { font-size: var(--texto-4xl); font-weight: var(--peso-display); font-stretch: var(--largura-display); line-height: 1; }
.plano__preco small { font-size: var(--texto-base); font-weight: var(--peso-texto); margin-left: 2px; }
.plano ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--espaco-2); align-content: start; }
@media (max-width: 900px) { .planos { grid-template-columns: minmax(0, 1fr); } }

.prova { padding-bottom: 0; }

/* Contadores */
.contadores { margin-top: clamp(64px, 10vw, 128px); max-width: none; background: var(--esmalte-800); color: #fff; padding: clamp(48px, 8vw, 96px) max(clamp(16px, 4vw, 48px), calc((100vw - 1180px) / 2 + 48px)); }
.contadores a:not(.btn) { color: #fff; }
.contadores__ganhos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-5); }
.contadores__ganhos li { border-top: 1px solid rgba(255, 255, 255, .3); padding-top: var(--espaco-3); color: #E9EFEC; }
.contadores__ganhos b { display: block; font-size: var(--texto-3xl); font-stretch: var(--largura-display); font-weight: var(--peso-display); color: #fff; }
.contadores .btn { justify-self: start; }
@media (max-width: 760px) { .contadores__ganhos { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq { display: grid; max-width: 820px; }
.faq details { border-bottom: 1px solid var(--cor-linha-forte); }
.faq summary { cursor: pointer; padding: var(--espaco-4) 0; font-weight: var(--peso-semi); font-size: var(--texto-lg); list-style: none; display: flex; justify-content: space-between; gap: var(--espaco-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: var(--peso-display); color: var(--cor-texto-primaria); transition: transform var(--duracao-base) var(--curva-saida); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--espaco-4); color: var(--cor-texto-2); }

/* Fechamento e formulário */
.fechamento { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-bottom: clamp(64px, 10vw, 128px); }
.fechamento > div:first-child { display: grid; gap: var(--espaco-5); justify-items: center; max-width: 820px; }
.fechamento h2 { font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: 1; }
.fechamento p { font-size: var(--texto-lg, 1.25rem); max-width: 34ch; }
.fechamento .hero__acoes { justify-content: center; }
.form-lista, .form-lista__ok { display: grid; gap: var(--espaco-4); padding: var(--espaco-6); background: var(--cor-superficie); border-radius: var(--raio-lg); box-shadow: var(--sombra-2); }
.consentimento { display: flex; gap: var(--espaco-3); align-items: flex-start; font-size: var(--texto-sm); }
.consentimento input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.form-lista__erro { color: var(--cor-erro); font-weight: var(--peso-semi); }
.form-lista__ok svg { width: 48px; height: 48px; color: var(--cor-sucesso); }

.rodape { background: var(--neutro-900); color: #E9EFEC; padding: var(--espaco-8) clamp(16px, 4vw, 48px); display: grid; gap: var(--espaco-3); justify-items: start; }
.rodape .legenda { color: #A9B8B2; max-width: 80ch; }
.rodape a { color: #E9EFEC; }

/* Entradas: escalonadas, uma vez, a partir de um estado já visível quando não há JS */
.js .revela { opacity: 0; transform: translateY(14px); transition: opacity var(--duracao-lento) var(--curva-saida), transform var(--duracao-lento) var(--curva-saida); transition-delay: var(--atraso, 0ms); }
.js .revela.in { opacity: 1; transform: none; }
/* ---------- Movimento (05/11/2026): poucos momentos, cada um com função ----------
   Curva de chegada confiante (desacelera), saída mais curta que a entrada, só transform/opacidade/recorte. */

/* Títulos: cada palavra sobe de dentro de uma máscara, em sequência curta */
.palavras .palavra { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.palavras .palavra > span { display: inline-block; transform: translateY(110%); transition: transform 760ms var(--curva-assentar); transition-delay: calc(var(--j, 0) * 38ms + var(--atraso, 0ms)); }
.in .palavras .palavra > span, .palavras.in .palavra > span, .hero.in .palavras .palavra > span { transform: none; }
/* O título do problema não sobe: acende palavra por palavra conforme a rolagem */
.palavras--ler .palavra > span { transform: none; transition: none; opacity: calc(.16 + var(--luz, 0) * .84); }

/* Hero: depois do título, o texto e os botões chegam; o mostrador sobe de um pouco abaixo */
.js .hero__sub, .js .hero__acoes, .js .hero .legenda { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--curva-saida), transform 600ms var(--curva-saida); }
.js .hero__sub { transition-delay: 260ms; } .js .hero__acoes { transition-delay: 360ms; } .js .hero .legenda { transition-delay: 440ms; }
.js .hero .balanca { opacity: 0; transform: translateY(28px) scale(.97); transition: opacity 800ms var(--curva-saida) 180ms, transform 900ms var(--curva-assentar) 180ms; }
.js .hero.in .hero__sub, .js .hero.in .hero__acoes, .js .hero.in .legenda, .js .hero.in .balanca { opacity: 1; transform: none; }
/* O ponteiro varre devagar na chegada; depois volta a responder rápido ao controle */
.balanca.ligando .balanca__svg .agulha { transition: transform 1200ms var(--curva-assentar); }

/* Recibo: a venda perde cada custo ao rolar; a linha entra da direita e a sobra é destacada quando a conta fecha */
.recibo--rolagem li[style*="--peso"] { opacity: calc(.18 + var(--f, 0) * .82); transform: translateX(calc((1 - var(--f, 0)) * 18px)); }
.recibo--rolagem li[style*="--peso"] b { color: color-mix(in srgb, var(--cor-texto) calc(var(--f, 0) * 100%), var(--cor-texto-2)); }
.recibo--rolagem .recibo__total b { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 700ms var(--curva-assentar); }
.recibo--rolagem.fechou .recibo__total b { background-size: 100% 100%; }
.recibo__venda { font-size: var(--texto-lg) !important; color: var(--cor-texto-2); }
.recibo__total b { font-variant-numeric: tabular-nums; }

/* Tela do produto: a perspectiva vem do script (desliga sozinha em telas estreitas) */
.demo__tela { transform-origin: 50% 0; will-change: transform; }

/* Botões principais: o texto rola para baixo e o mesmo texto entra por cima */
.rolo { position: relative; display: inline-grid; overflow: clip; }
.rolo > span, .rolo::after { grid-area: 1 / 1; transition: transform 460ms var(--curva-assentar); }
.rolo::after { content: attr(data-texto); transform: translateY(-115%); }
.btn:hover .rolo > span, .btn:focus-visible .rolo > span { transform: translateY(115%); }
.btn:hover .rolo::after, .btn:focus-visible .rolo::after { transform: none; }

/* Cabeçalho: ganha sombra e fundo mais firme quando a página sai do topo */
.cabecalho { transition: background-color var(--duracao-base), box-shadow var(--duracao-lento) var(--curva-saida); }
.cabecalho.rolou { background: color-mix(in srgb, var(--cor-fundo) 97%, transparent); box-shadow: 0 8px 24px -16px rgb(17 21 19 / .25); }

@media (prefers-reduced-motion: reduce) {
  .palavras .palavra > span, .js .hero__sub, .js .hero__acoes, .js .hero .legenda, .js .hero .balanca, .rolo > span, .rolo::after { transition: none; transform: none; opacity: 1; }
  .rolo::after { display: none; }
  .demo__tela { will-change: auto; }
  .ambiente { animation: none; }
  .js .revela { opacity: 1; transform: none; transition: none; }
  .balanca__svg .agulha, .balanca.bateu .balanca__svg .agulha { transition: none; }
}
@media (pointer: coarse) { .btn { min-height: 48px; } }
.rodape img { height: 36px; width: auto; }

/* Páginas legais (termos, privacidade): leitura confortável */
.legal { padding-bottom: 96px; gap: var(--espaco-4); }
.legal h2 { max-width: none; margin-top: var(--espaco-4); }
.legal ul { max-width: 62ch; margin: 0; padding-left: 1.2em; display: grid; gap: var(--espaco-2); }
.legal li, .legal p { line-height: 1.6; }