/* Tokens: espelho de design/tokens.json */
:root {
  --fundo: #FFF8EE; --superficie: #FFFFFF; --borda: #EADFCB; --creme: #FCEFD9;
  --texto: #1B2350; --texto-suave: #4A5072;
  --principal: #D81B60; --principal-escuro: #B0124C; --sobre-principal: #FFFFFF;
  --acento: #FFD21F; --teal: #16707F; --roxo: #5B2A86; --azul: #2747B8; --zap: #1E8E5A;
  --f-titulo: "Anton", Impact, sans-serif;
  --f-texto: "Nunito", system-ui, sans-serif;
  --f-assinatura: "Pacifico", cursive;
  --t-legenda: 13px; --t-corpo: 17px; --t-corpo-g: 21px; --t-sub: 28px; --t-titulo: 38px; --t-titulo-g: 52px; --t-display: 76px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
  --r-p: 8px; --r: 20px;
  --sombra-1: 0 2px 8px rgba(27,35,80,.08);
  --sombra-2: 0 12px 32px rgba(27,35,80,.14);
  --sombra-3: 0 24px 64px rgba(27,35,80,.22);
  --curva: cubic-bezier(.2,.7,.2,1);
  --largura: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 var(--t-corpo)/1.55 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--e4); }
.estreito { max-width: 880px; }

/* Cores de texto da capa */
.t-rosa { color: var(--principal); } .t-navy { color: var(--texto); } .t-teal { color: var(--teal); } .t-roxo { color: var(--roxo); }

/* Assinatura visual: faixa de pincel inclinada */
.pincel { position: relative; display: inline-block; padding: var(--e1) var(--e4); isolation: isolate; color: #fff; }
.pincel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pc); transform: skew(-8deg) rotate(-1.5deg); border-radius: 6px 14px 8px 16px; box-shadow: var(--sombra-1); }
.pincel--amarelo { --pc: var(--acento); color: var(--texto); }
.pincel--rosa { --pc: var(--principal); }
.pincel--teal { --pc: var(--teal); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 48px; padding: var(--e3) var(--e5); border: 0; border-radius: 999px; background: var(--principal); color: var(--sobre-principal); font: 900 var(--t-corpo)/1.2 var(--f-texto); text-decoration: none; cursor: pointer; box-shadow: 0 6px 0 var(--principal-escuro); transition: transform 180ms var(--curva), box-shadow 180ms var(--curva), filter 180ms var(--curva); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--principal-escuro); filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--principal-escuro); }
.btn--sm { min-height: 44px; padding: var(--e2) var(--e4); font-size: 15px; box-shadow: 0 4px 0 var(--principal-escuro); }
.btn--grande { min-height: 60px; padding: var(--e4) var(--e6); font-size: var(--t-corpo-g); }
.btn--bloco { width: 100%; }
.btn--teal { background: var(--teal); box-shadow: 0 6px 0 #0E4E59; }
.btn--teal:hover { box-shadow: 0 8px 0 #0E4E59; }
.btn--zap { background: var(--zap); box-shadow: 0 6px 0 #136140; }

/* Faixa de oferta e topo */
.faixa-oferta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--e2) var(--e4); padding: var(--e2) var(--e4); background: var(--texto); color: #fff; font-size: 15px; text-align: center; }
.faixa-oferta strong { color: var(--acento); }
.faixa-oferta__link { color: var(--acento); font-weight: 900; }
.topo { position: sticky; top: 0; z-index: 20; background: rgba(255,248,238,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--borda); }
.topo__in { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); min-height: 64px; }
.marca { display: flex; align-items: center; gap: var(--e2); text-decoration: none; font: 400 22px/1 var(--f-assinatura); color: var(--principal); }
.marca img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--acento); object-fit: cover; }
.topo__nav { display: none; gap: var(--e5); font-weight: 700; }
.topo__nav a { text-decoration: none; color: var(--texto-suave); }
.topo__nav a:hover { color: var(--principal); }

/* Hero */
.hero { position: relative; padding-top: var(--e7); background:
  radial-gradient(60% 50% at 85% 20%, rgba(255,210,31,.35), transparent 70%),
  radial-gradient(50% 40% at 10% 90%, rgba(22,112,127,.14), transparent 70%), var(--fundo); }
.hero__grid { display: grid; gap: var(--e7); align-items: center; }
.selo { display: inline-flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e4); padding: var(--e2) var(--e4); border-radius: 999px; background: var(--roxo); color: #fff; font-weight: 700; font-size: 15px; }
.selo svg { color: var(--acento); }
.hero__titulo { margin: 0; font: 400 clamp(44px, 11vw, var(--t-display))/1.02 var(--f-titulo); text-transform: uppercase; letter-spacing: -.01em; }
.hero__titulo > span { display: block; }
.hero__titulo .pincel { display: inline-block; margin: var(--e2) 0; font-family: var(--f-assinatura); text-transform: none; font-size: .78em; padding: var(--e2) var(--e5) var(--e3); }
.hero__titulo-menor { font-size: .62em; }
.hero__sub { max-width: 34em; margin: var(--e5) 0; font-size: var(--t-corpo-g); color: var(--texto-suave); }
.hero__sub strong { color: var(--texto); }
.hero__acoes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e4); }
.hero__nota { display: inline-flex; align-items: center; gap: var(--e2); font-size: 15px; color: var(--texto-suave); }
.hero__nota svg { color: var(--zap); }
.hero__capa { position: relative; justify-self: center; perspective: 1400px; padding: var(--e5) 0; }
.capa3d { width: min(78vw, 380px); transform: rotateY(-14deg) rotateX(4deg); transform-style: preserve-3d; transition: transform 500ms var(--curva); border-radius: 4px 12px 12px 4px; box-shadow: -14px 0 0 -4px #E9DCC3, var(--sombra-3); }
.capa3d::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, rgba(0,0,0,.18) 0 3%, rgba(255,255,255,.18) 5%, transparent 18%); pointer-events: none; }
.capa3d img { border-radius: inherit; }
.hero__capa:hover .capa3d { transform: rotateY(-4deg) rotateX(2deg); }
.medalha { position: absolute; left: -12px; bottom: 12%; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: var(--roxo); color: #fff; text-align: center; line-height: 1.1; font-weight: 900; font-size: var(--t-legenda); border: 4px solid var(--acento); box-shadow: var(--sombra-2); transform: rotate(-10deg); }
.medalha b { display: block; font: 400 40px/1 var(--f-titulo); color: var(--acento); }
.faixa-navy { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2) var(--e5); margin: var(--e7) 0 0; padding: var(--e4); list-style: none; background: var(--texto); color: #fff; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.faixa-navy li { display: flex; align-items: center; gap: var(--e2); }
.faixa-navy li + li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--principal); margin-right: var(--e2); }
.faixa-navy li:nth-child(3)::before { background: var(--teal); }
.faixa-navy svg { color: var(--acento); }

/* Seções */
.secao { padding: var(--e8) 0; }
.secao--creme { background: var(--creme); }
.titulo-secao { margin: 0 0 var(--e5); text-align: center; font: 400 clamp(32px, 7vw, var(--t-titulo-g))/1.1 var(--f-titulo); text-transform: uppercase; }
.titulo-secao--esq { text-align: left; }
.lead { max-width: 36em; margin: 0 auto var(--e7); text-align: center; font-size: var(--t-corpo-g); color: var(--texto-suave); }
.lead--esq { margin-left: 0; text-align: left; }

.dores { display: grid; gap: var(--e4); margin-top: var(--e6); }
.dor { display: flex; gap: var(--e4); align-items: flex-start; padding: var(--e5); background: var(--superficie); border-radius: var(--r); box-shadow: var(--sombra-1); }
.dor p { margin: 0; }
.dor__n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--principal); color: #fff; font: 400 22px/1 var(--f-titulo); }
.virada { margin: var(--e6) 0 0; padding: var(--e5); border-left: 6px solid var(--acento); background: var(--superficie); border-radius: 0 var(--r) var(--r) 0; font-size: var(--t-corpo-g); }

.comodos { display: grid; gap: var(--e4); }
.comodo { position: relative; padding: var(--e5); padding-top: var(--e6); background: var(--superficie); border-radius: var(--r); box-shadow: var(--sombra-1); overflow: hidden; transition: transform 200ms var(--curva), box-shadow 200ms var(--curva); }
.comodo::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--c); }
.comodo:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.comodo h3 { margin: 0 0 var(--e2); font: 400 var(--t-sub)/1.1 var(--f-titulo); text-transform: uppercase; color: var(--c); }
.comodo p { margin: 0; color: var(--texto-suave); }

.receita__grid { display: grid; gap: var(--e6); align-items: start; }
.passos { margin: 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: var(--e3); }
.passos li { counter-increment: p; display: grid; grid-template-columns: 48px 1fr; column-gap: var(--e4); align-items: center; padding: var(--e3) var(--e4); background: var(--superficie); border-radius: var(--r); box-shadow: var(--sombra-1); color: var(--texto-suave); }
.passos li::before { content: counter(p); grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--acento); color: var(--texto); font: 400 24px/1 var(--f-titulo); }
.passos b { color: var(--texto); font-weight: 900; }

.depos { display: grid; gap: var(--e4); }
.depo { margin: 0; padding: var(--e5); background: var(--superficie); border-radius: var(--r); box-shadow: var(--sombra-1); }
.depo p { margin: 0 0 var(--e3); }
.depo cite { font-style: normal; font-weight: 900; color: var(--principal); }

.amelia { background: var(--teal); color: #fff; }
.amelia__grid { display: grid; gap: var(--e6); justify-items: center; text-align: center; }
.amelia__foto { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 6px solid var(--acento); box-shadow: var(--sombra-3); }
.assinatura { margin: 0 0 var(--e4); font: 400 clamp(32px, 7vw, 44px)/1.3 var(--f-assinatura); color: var(--acento); }
.amelia__texto { max-width: 36em; margin: 0; font-size: var(--t-corpo-g); }

/* Oferta */
.oferta { background: radial-gradient(70% 60% at 50% 0%, rgba(255,210,31,.25), transparent 70%), var(--principal); }
.cartao-oferta { display: grid; gap: var(--e5); padding: var(--e5); background: var(--superficie); border-radius: var(--r); box-shadow: var(--sombra-3); }
.cartao-oferta__capa { width: 140px; justify-self: center; border-radius: var(--r-p); box-shadow: var(--sombra-2); transform: rotate(-3deg); }
.cartao-oferta h3 { margin: 0 0 var(--e4); font: 400 var(--t-sub)/1.15 var(--f-titulo); text-transform: uppercase; }
.lista-check { display: grid; gap: var(--e3); margin: 0 0 var(--e5); padding: 0; list-style: none; }
.lista-check li { display: flex; gap: var(--e3); align-items: center; }
.lista-check svg { color: var(--principal); }
.lista-check--bonus li { padding: var(--e3); border-radius: var(--r-p); background: #FFF6CC; }
.lista-check--bonus s { color: var(--texto-suave); margin-left: auto; font-size: 15px; }
.preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2) var(--e4); margin: 0 0 var(--e5); padding: var(--e4) 0; border-top: 1px dashed var(--borda); border-bottom: 1px dashed var(--borda); }
.preco__de { color: var(--texto-suave); }
.preco__por { font: 400 var(--t-titulo-g)/1 var(--f-titulo); color: var(--principal); }
.preco__por small { font: 700 var(--t-corpo) var(--f-texto); color: var(--texto); }
.preco__info { width: 100%; font-size: var(--t-legenda); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.pagar { display: grid; gap: var(--e4); }
.garantia { display: flex; gap: var(--e2); align-items: center; margin: var(--e5) 0 0; font-size: 15px; color: var(--texto-suave); }
.garantia svg { color: var(--zap); width: 28px; height: 28px; }
.aviso-config { margin: 0; padding: var(--e3); border-radius: var(--r-p); background: #FFF0F0; color: #8C1D1D; font-size: 15px; }

/* FAQ */
.faq { display: grid; gap: var(--e3); }
.faq details { background: var(--superficie); border-radius: var(--r); box-shadow: var(--sombra-1); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--e4); padding: var(--e4) var(--e5); font-weight: 900; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 28px/1 var(--f-titulo); color: var(--principal); transition: transform 200ms var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 var(--e5) var(--e5); color: var(--texto-suave); }

/* Rodapé */
.rodape { padding: var(--e7) 0 120px; background: var(--texto); color: #C9CCE0; text-align: center; font-size: 15px; }
.assinatura--claro { color: #fff; }
.rodape__zap a { display: inline-flex; align-items: center; gap: var(--e2); color: #fff; font-weight: 900; }
.rodape__copy { margin-top: var(--e5); font-size: var(--t-legenda); }

/* CTA fixo (celular) */
.cta-fixo { position: fixed; left: var(--e4); right: var(--e4); bottom: calc(var(--e3) + env(safe-area-inset-bottom)); z-index: 30; display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: var(--e2) var(--e5); border-radius: 999px; background: var(--principal); color: #fff; text-decoration: none; font-weight: 900; box-shadow: var(--sombra-3); transform: translateY(160%); transition: transform 300ms var(--curva); }
.cta-fixo b { padding: var(--e1) var(--e3); border-radius: 999px; background: var(--acento); color: var(--texto); }
.cta-fixo.on { transform: none; }

/* Modal Pix */
.pix { width: min(92vw, 380px); padding: var(--e6) var(--e5) var(--e5); border: 0; border-radius: var(--r); box-shadow: var(--sombra-3); text-align: center; color: var(--texto); }
.pix::backdrop { background: rgba(27,35,80,.6); backdrop-filter: blur(4px); }
.pix h3 { margin: 0; font: 400 var(--t-sub)/1.1 var(--f-titulo); text-transform: uppercase; color: var(--teal); }
.pix__valor { margin: var(--e2) 0 var(--e4); font: 400 var(--t-titulo)/1 var(--f-titulo); color: var(--principal); }
.pix canvas { margin: 0 auto var(--e4); border-radius: var(--r-p); }
.pix__rotulo { display: block; text-align: left; font-weight: 700; font-size: 14px; margin-bottom: var(--e1); }
.pix textarea { width: 100%; margin-bottom: var(--e3); padding: var(--e3); border: 1px solid var(--borda); border-radius: var(--r-p); font: 13px/1.4 ui-monospace, monospace; resize: none; color: var(--texto); }
.pix .btn + .btn { margin-top: var(--e3); }
.pix__fechar { position: absolute; top: var(--e2); right: var(--e2); }
.pix__fechar button { width: 44px; height: 44px; border: 0; background: none; font-size: 28px; cursor: pointer; color: var(--texto-suave); }

/* Movimento: entrada ao rolar */
.revela { opacity: 0; transform: translateY(24px); transition: opacity 450ms var(--curva), transform 450ms var(--curva); }
.revela.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela { opacity: 1; transform: none; transition: none; }
  .capa3d, .btn, .comodo, .cta-fixo { transition: none; }
}

/* Tablet */
@media (min-width: 768px) {
  .container { padding: 0 var(--e6); }
  .dores { grid-template-columns: repeat(3, 1fr); }
  .dor { flex-direction: column; }
  .comodos { grid-template-columns: repeat(2, 1fr); }
  .depos { grid-template-columns: repeat(2, 1fr); }
  .cartao-oferta { grid-template-columns: 200px 1fr; padding: var(--e6); align-items: start; }
  .cartao-oferta__capa { width: 200px; }
  .amelia__grid { grid-template-columns: auto 1fr; text-align: left; justify-items: start; align-items: center; }
  .hero__acoes { flex-direction: row; align-items: center; }
}
/* Desktop */
@media (min-width: 1024px) {
  .topo__nav { display: flex; }
  .hero { padding-top: var(--e8); }
  .hero__grid { grid-template-columns: 7fr 5fr; }
  .comodos { grid-template-columns: repeat(4, 1fr); }
  .receita__grid { grid-template-columns: 5fr 7fr; }
  .receita__grid > div { position: sticky; top: 96px; }
  .cta-fixo { display: none; }
  .secao { padding: var(--e9) 0; }
  .rodape { padding-bottom: var(--e7); }
}