/* Página de vendas do Planner de Limpeza TDAH. Tokens copiados de app/css/tokens.css (design system do Planner). */
:root {
  --azul: #6FB7DF;    --azul-l: #E3F2FB;
  --rosa: #EE9DB2;    --rosa-l: #FCE7ED;
  --pessego: #F2B482; --pessego-l: #FDEEE2;
  --verde: #8FCBA6;   --verde-l: #E4F4EA;
  --lilas: #B5A3E0;   --lilas-l: #EFEBFA;
  --amarelo: #EFCB66; --amarelo-l: #FDF5DA;
  --tinta: #3B4656;   --cinza: #6B7786;   --rodape: #9AA3AF;   --separador: #DDE2E8;
  --fundo-capa: #FFFCF8;
  --f-titulo: 'Fredoka', system-ui, sans-serif;
  --f-texto: 'Nunito', system-ui, sans-serif;
  --f-script: 'Sacramento', cursive;
  --raio: 18px;
}
.c-azul    { --f: var(--azul);    --l: var(--azul-l); }
.c-rosa    { --f: var(--rosa);    --l: var(--rosa-l); }
.c-pessego { --f: var(--pessego); --l: var(--pessego-l); }
.c-verde   { --f: var(--verde);   --l: var(--verde-l); }
.c-lilas   { --f: var(--lilas);   --l: var(--lilas-l); }
.c-amarelo { --f: var(--amarelo); --l: var(--amarelo-l); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--tinta); font-family: var(--f-texto); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b, strong { font-weight: 800; }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.15; letter-spacing: -.005em; }
h2 { font-size: clamp(27px, 6.4vw, 40px); margin-bottom: 18px; text-wrap: balance; }
h3 { font-size: 20px; margin-bottom: 6px; }
h1 em, h2 em { font-style: normal; background: linear-gradient(transparent 58%, var(--amarelo) 58%, var(--amarelo) 90%, transparent 90%); padding: 0 .08em; }
.secao p + p { margin-top: 14px; }

/* Faixa */
.faixa { background: var(--tinta); color: #fff; text-align: center; font-size: 14px; padding: 9px 16px; font-weight: 700; }
.faixa b { color: var(--amarelo); }

/* Marca */
.marca { display: grid; font-family: var(--f-titulo); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1; margin-bottom: 18px; }
.marca-1 { font-size: 13px; color: var(--cinza); }
.marca-2 { font-size: 26px; }
.marca-2 .a { color: var(--azul); } .marca-2 .v { color: var(--verde); }
.marca.pequena { justify-items: center; margin-bottom: 10px; }
.marca.pequena .marca-2 { font-size: 22px; }

/* Layout */
.secao { position: relative; padding: 64px 16px; }
.in { max-width: 1040px; margin: 0 auto; }
.in.estreito { max-width: 720px; }
.centro { text-align: center; }
.centro .cta { margin-top: 30px; }
.fundo-capa { background: var(--fundo-capa); }
.fundo-amarelo { background: var(--amarelo-l); }
.fundo-rosa { background: var(--rosa-l); }
.fundo-verde { background: var(--verde-l); }
.script { font-family: var(--f-script); font-size: 34px; line-height: 1; color: var(--f, var(--cinza)); margin-bottom: 6px; }
.intro { color: var(--cinza); margin: -6px 0 34px; }

/* CTA (igual ao botão do checkout) */
.cta {
  display: flex; align-items: center; justify-content: center; width: 100%; max-width: 440px; min-height: 60px; padding: 10px 22px;
  border: 2px solid var(--tinta); border-radius: 40px; background: var(--verde); color: var(--tinta); text-decoration: none; text-align: center;
  font-family: var(--f-titulo); font-weight: 600; font-size: 19px; line-height: 1.2;
  box-shadow: 0 5px 0 var(--tinta); transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.centro .cta { margin-left: auto; margin-right: auto; }
.cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--tinta); }
.cta:focus-visible { outline: 3px solid var(--azul); outline-offset: 4px; }
@media (hover: hover) { .cta:hover { background: #82C49C; } }
.cta.grande { min-height: 66px; font-size: 21px; }
.micro { font-size: 14px; color: var(--cinza); margin-top: 14px; line-height: 1.45; }

/* Hero */
.hero { position: relative; overflow: clip; background: var(--fundo-capa); padding: 36px 16px 56px; }
.hero-in { position: relative; max-width: 1040px; margin: 0 auto; display: grid; gap: 34px; }
.hero h1 { font-size: clamp(32px, 8.6vw, 52px); margin-bottom: 16px; text-wrap: balance; }
.hero .sub { font-size: 18px; margin-bottom: 18px; }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pilulas li { background: var(--l); border: 1.5px solid var(--f); border-radius: 30px; padding: 4px 13px; font-family: var(--f-titulo); font-weight: 500; font-size: 14px; }
.hero-cel { position: relative; justify-self: center; }
@media (max-width: 859px) {
  .hero-txt { text-align: center; }
  .hero .marca { justify-items: center; }
  .pilulas { justify-content: center; }
  .hero .cta { margin-left: auto; margin-right: auto; }
}
.bolha { position: absolute; border-radius: 50%; pointer-events: none; }
.b1 { width: 260px; height: 260px; background: var(--azul-l); top: -110px; left: -120px; }
.b2 { width: 200px; height: 200px; background: var(--rosa-l); top: 40px; right: -90px; }
.b3 { width: 240px; height: 240px; background: var(--verde-l); bottom: -110px; left: 20%; }
.b4 { width: 220px; height: 220px; background: var(--amarelo-l); bottom: -100px; right: -80px; }
.selo-flutua { position: absolute; background: #fff; border: 1.5px solid var(--separador); border-radius: 14px; padding: 8px 12px; font-family: var(--f-titulo); font-weight: 500; font-size: 14px; box-shadow: 0 8px 24px rgba(59,70,86,.12); white-space: nowrap; }
.selo-flutua i { font-style: normal; background: var(--amarelo-l); border-radius: 8px; padding: 1px 7px; margin-left: 6px; font-size: 12px; }
.s1 { left: -34px; top: 38%; }
.s2 { right: -26px; top: 18%; }

/* Celular */
.cel { width: 260px; aspect-ratio: 300 / 649; border: 9px solid var(--tinta); border-radius: 38px; overflow: hidden; background: #fff; box-shadow: 0 24px 50px rgba(59,70,86,.18); }
.cel img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero .cel { width: 270px; }
.cel.mini { width: 190px; border-width: 7px; border-radius: 30px; }

/* Dores */
.dores { display: grid; gap: 12px; margin: 8px 0 24px; }
.dores li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; background: var(--fundo-capa); border: 1.5px solid var(--separador); border-radius: var(--raio); padding: 14px 16px; }
.dores span { font-size: 24px; line-height: 1.2; }
.fecho { font-size: 18px; }

/* Virada */
.destaque { margin-top: 26px; background: #fff; border: 2px solid var(--amarelo); border-radius: var(--raio); padding: 18px 20px; font-size: 18px; }

/* Passos */
.passos { display: grid; gap: 14px; margin-top: 8px; }
.passos li { position: relative; background: var(--l); border: 2px solid var(--f); border-radius: var(--raio); padding: 18px 18px 18px 74px; min-height: 92px; }
.passos b { position: absolute; left: 18px; top: 18px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--f); font-family: var(--f-titulo); font-weight: 600; font-size: 20px; }
.passos p { color: var(--tinta); }

/* Recursos */
.recurso { display: grid; gap: 26px; justify-items: center; margin-bottom: 56px; }
.recurso:last-child { margin-bottom: 0; }
.rec-txt { width: 100%; max-width: 480px; }
.etq { display: inline-block; background: var(--l); border: 1.5px solid var(--f); border-radius: 20px; padding: 2px 12px; font-family: var(--f-titulo); font-weight: 500; font-size: 14px; margin-bottom: 10px; }
.rec-txt h3 { font-size: 24px; margin-bottom: 12px; }
.checks { display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 34px; }
.checks li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid var(--f, var(--verde)); border-radius: 7px; background: #fff; font-weight: 800; font-size: 14px; line-height: 1; }
.nota { margin-top: 14px; font-family: var(--f-script); font-size: 28px; line-height: 1.1; color: var(--azul); }

/* Antes e depois / para quem */
.ad { display: grid; gap: 14px; margin-top: 6px; }
.ad-col { border-radius: var(--raio); padding: 20px; border: 2px solid; }
.ad-col h3 { margin-bottom: 12px; }
.ad-col li { position: relative; padding-left: 30px; margin-top: 10px; }
.ad-col li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.antes, .nao { background: #fff; border-color: var(--separador); color: #4B5666; }
.antes li::before, .nao li::before { content: '✕'; color: var(--rodape); }
.depois, .sim { background: var(--verde-l); border-color: var(--verde); }
.depois li::before, .sim li::before { content: '✓'; color: #3E8A5E; }

/* Cards sem cobrança */
.grade2 { display: grid; gap: 14px; }
.card { background: #fff; border: 2px solid var(--f); border-radius: var(--raio); padding: 18px 20px; }
.card h3 { display: flex; align-items: center; gap: 10px; }
.card h3::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--f); flex: none; }

/* Bônus */
.bonus { display: grid; gap: 18px; }
.bonus-item { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; background: var(--l); border: 2px solid var(--f); border-radius: var(--raio); padding: 18px; }
.bonus-item .cel.mini { width: 120px; border-width: 5px; border-radius: 20px; box-shadow: 0 10px 24px rgba(59,70,86,.15); }
.bonus-item .etq { background: #fff; }
.bonus-item h3 { font-size: 22px; margin-bottom: 2px; }
.meta { font-family: var(--f-titulo); font-weight: 500; color: var(--cinza); font-size: 15px; margin-bottom: 8px; }

/* Oferta */
.oferta { background: #fff; border: 2px solid var(--tinta); border-radius: 24px; padding: 26px 20px; box-shadow: 0 8px 0 var(--tinta); text-align: left; }
.of-nome { font-family: var(--f-titulo); font-weight: 600; font-size: 20px; margin-bottom: 16px; }
.oferta .checks { --f: var(--verde); }
.preco { display: flex; align-items: flex-start; justify-content: center; font-family: var(--f-titulo); font-weight: 600; line-height: 1; margin: 26px 0 6px; }
.moeda { font-size: 26px; margin-top: 12px; margin-right: 4px; }
.valor { font-size: 84px; }
.cent { font-size: 34px; margin-top: 10px; }
.preco-nota { text-align: center; color: var(--cinza); margin-bottom: 18px; }
.oferta .cta { margin: 0 auto; }
.oferta .micro { text-align: center; }

/* Garantia */
.garantia { display: grid; gap: 22px; justify-items: center; text-align: center; }
.selo { width: 150px; height: 150px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--amarelo-l); border: 3px dashed var(--amarelo); font-family: var(--f-titulo); font-weight: 600; }
.selo span { font-size: 62px; line-height: .9; }
.selo small { font-size: 15px; line-height: 1.1; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border: 1.5px solid var(--separador); border-radius: 14px; }
.faq details[open] { border-color: var(--azul); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; position: relative; font-family: var(--f-titulo); font-weight: 500; font-size: 18px; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--azul-l); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 18px 18px; color: #4B5666; }

/* Final */
.final { overflow: clip; background: var(--fundo-capa); padding-bottom: 80px; }
.final .in { position: relative; }
.final p { margin-top: 0; }
.final .micro { margin-top: 14px; }

/* Rodapé */
.rodape { text-align: center; padding: 34px 16px 120px; font-size: 14px; color: var(--cinza); border-top: 1px solid var(--separador); }
.rodape p + p { margin-top: 8px; }
.aviso-legal { max-width: 560px; margin: 14px auto 0; font-size: 12.5px; color: var(--rodape); }

/* Barra fixa (celular) */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--separador); box-shadow: 0 -6px 20px rgba(59,70,86,.08); transform: translateY(110%); transition: transform .25s ease; }
.barra.on { transform: none; }
.barra div { display: grid; line-height: 1.1; font-family: var(--f-titulo); white-space: nowrap; }
.barra b { font-size: 21px; font-weight: 600; }
.barra small { font-size: 12px; color: var(--cinza); }
.barra .cta { min-height: 50px; font-size: 17px; box-shadow: 0 3px 0 var(--tinta); flex: 1; }

/* WhatsApp */
.whats { position: fixed; right: 16px; bottom: 86px; z-index: 21; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cta, .barra { transition: none; } }

/* Telas pequenas */
@media (max-width: 389px) {
  .so-largo { display: none; }
  .hero { padding-top: 24px; }
  .hero h1 { font-size: 29px; margin-bottom: 12px; }
  .hero .sub { font-size: 16px; margin-bottom: 14px; }
  .marca { margin-bottom: 12px; } .marca-2 { font-size: 22px; }
  .pilulas { margin-bottom: 16px; } .pilulas li { font-size: 13px; padding: 3px 10px; }
}
@media (max-width: 359px) {
  body { font-size: 16px; }
  .pilulas { display: none; }
  .s1 { left: -14px; } .s2 { right: -10px; }
  .hero .cel { width: 240px; }
  .bonus-item { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .valor { font-size: 72px; }
}

/* Desktop */
@media (min-width: 860px) {
  .secao { padding: 96px 24px; }
  .hero { padding: 64px 24px 90px; }
  .hero-in { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 48px; }
  .hero .sub { font-size: 20px; }
  .hero .cel { width: 300px; }
  .s1 { left: -70px; } .s2 { right: -50px; }
  .passos { grid-template-columns: repeat(3, 1fr); }
  .passos li { padding: 74px 20px 22px; }
  .recurso { grid-template-columns: auto 1fr; gap: 64px; justify-items: start; align-items: center; margin-bottom: 80px; padding: 0 40px; }
  .recurso .cel { width: 280px; }
  .recurso.inv .cel { order: 2; }
  .ad, .grade2, .bonus { grid-template-columns: 1fr 1fr; }
  .bonus-item { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 26px; }
  .bonus-item .cel.mini { width: 170px; border-width: 7px; border-radius: 28px; }
  .garantia { grid-template-columns: auto 1fr; text-align: left; justify-items: start; align-items: center; }
  .barra { display: none; }
  .whats { bottom: 24px; }
  .rodape { padding-bottom: 40px; }
}