/* Cicatrizes que Libertam
   Conceito: a página faz o caminho do alerta ao descanso.
   O topo é noite (sistema em alerta), o meio é aurora (respirar, escolher), o fim é dia (seguro). */

:root{
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:Geist,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --cta:#F4A259; --cta-ink:#17120C; --alerta:#FF5B3A; --regulado:#2E8B74;

  /* noite */
  --n-bg:#0D0F14; --n-sup:#161922; --n-ink:#ECE7DF; --n-mut:#9C978F; --n-lin:#272B36;
  /* aurora */
  --a-bg:#1E1A2B; --a-sup:#2A2439; --a-ink:#F3ECE4; --a-mut:#B7ADBF; --a-lin:#3B3350;
  /* dia */
  --d-bg:#E8ECE4; --d-sup:#F6F7F2; --d-ink:#14171B; --d-mut:#565C55; --d-lin:#C9D0C3; --d-acc:#1F6B5C;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --d-bg:#151A18; --d-sup:#1D2421; --d-ink:#E6ECE6; --d-mut:#9FAAA2; --d-lin:#2E3833; --d-acc:#5CC2A6;
  }
}
:root[data-theme="dark"]{
  --d-bg:#151A18; --d-sup:#1D2421; --d-ink:#E6ECE6; --d-mut:#9FAAA2; --d-lin:#2E3833; --d-acc:#5CC2A6;
}

/* variante de teste: topo claro (neblina da manhã) em vez de noite */
body.topo-claro{
  --n-bg:#ECEEF0; --n-sup:#F7F8F9; --n-ink:#16181D; --n-mut:#5C6068; --n-lin:#D3D7DD;
  background:var(--n-bg);color:var(--n-ink);
}
body.topo-claro h1 em,body.topo-claro .resultado .estado{color:#B8541F}
body.topo-claro .sinal{background:linear-gradient(180deg,rgba(236,238,240,.9),rgba(236,238,240,0))}
body.topo-claro .tema-noite + .tema-aurora{background:linear-gradient(180deg,var(--n-bg),var(--a-bg) 240px)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--n-bg);color:var(--n-ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0 0 .45em;font-weight:400}
h1,h2{font-family:var(--serif);letter-spacing:-.015em;line-height:1.02}
h1{font-size:clamp(3rem,13vw,7.2rem)}
h2{font-size:clamp(2.3rem,8vw,4.2rem)}
h3{font:600 1.08rem/1.35 var(--sans)}
h1 em,h2 em{font-style:italic;color:var(--cta)}
p{margin:0 0 1em}
a{color:inherit}
.wrap{width:100%;max-width:880px;margin:0 auto;padding:0 20px}
section{padding:clamp(72px,12vw,128px) 0;position:relative}
.rotulo{font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:22px}
.sub{font-size:clamp(1.05rem,2.6vw,1.22rem);max-width:640px;opacity:.82}
.grande{font-family:var(--serif);font-size:clamp(1.7rem,5vw,2.5rem);line-height:1.15;margin-top:48px;max-width:760px}
.idx{font:500 .78rem/1 var(--mono);letter-spacing:.06em;opacity:.6}

/* temas */
.tema-noite{background:var(--n-bg);color:var(--n-ink)}
.tema-aurora{background:var(--a-bg);color:var(--a-ink)}
.tema-dia{background:var(--d-bg);color:var(--d-ink)}
.tema-amanhecer{background:linear-gradient(180deg,var(--d-bg) 0%,#F3D9BF 55%,#F0B98D 100%);color:#1A1612}
.sinais + .teste{padding-top:0}
.tema-noite + .tema-aurora{background:linear-gradient(180deg,var(--n-bg),var(--a-bg) 240px)}
.tema-aurora + .tema-dia{background:linear-gradient(180deg,var(--a-bg),var(--d-bg) 220px);padding-top:calc(220px + 24px)}

/* sinal fixo no topo: a onda acalma conforme a pessoa desce */
.sinal{position:fixed;inset:0 0 auto 0;height:34px;z-index:40;pointer-events:none;display:flex;align-items:center;justify-content:flex-end;padding:0 14px;background:linear-gradient(180deg,rgba(13,15,20,.85),rgba(13,15,20,0))}
.sinal canvas{position:absolute;inset:0;width:100%;height:100%}
.sinal-txt{position:relative;font:500 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#ECE7DF;opacity:.8;background:rgba(13,15,20,.55);padding:5px 8px;border-radius:4px}
.sinal-txt b{font-weight:500;color:var(--sinal-cor,var(--alerta))}

.faixa{background:var(--cta);color:var(--cta-ink);text-align:center;font-weight:600;font-size:.92rem;padding:44px 20px 12px;line-height:1.35}
.faixa + .hero{padding-top:56px}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;padding:96px 0 72px;overflow:hidden}
.hero-onda{position:absolute;inset:0;width:100%;height:100%;opacity:.4}
.hero .wrap{position:relative}
.hero .sub{margin-top:8px}

/* botões */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:32px;padding:19px 30px;border-radius:999px;border:0;background:var(--cta);color:var(--cta-ink);font:600 1.04rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 0 0 0 rgba(244,162,89,.5)}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(244,162,89,.55)}
.cta:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--cta);outline-offset:3px}
.cta-sec{background:transparent;color:inherit;border:1.5px solid currentColor;box-shadow:none}
@media (max-width:560px){.cta{width:100%}}
.selos{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.selos li::before{content:"● ";color:var(--regulado)}

/* sinais */
.linhas{list-style:none;padding:0;margin:40px 0 0;border-top:1px solid var(--n-lin)}
.linhas li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--n-lin)}
.linhas p{margin:0;font-size:clamp(1.05rem,2.8vw,1.3rem)}
.linhas .idx{color:var(--alerta);opacity:1}

/* teste */
.teste-card{margin-top:36px;background:var(--n-sup);border:1px solid var(--n-lin);border-radius:20px;padding:clamp(22px,5vw,40px)}
.teste-barra{height:3px;background:var(--n-lin);border-radius:3px;overflow:hidden;margin-bottom:28px}
.teste-barra span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--alerta),var(--cta));transition:width .35s ease}
.pergunta{border:0;padding:0;margin:0}
.pergunta legend{font-family:var(--serif);font-size:clamp(1.5rem,4.6vw,2.2rem);line-height:1.15;padding:0;margin-bottom:26px}
.pergunta legend .idx{display:block;font-family:var(--mono);margin-bottom:14px}
.opcoes{display:grid;gap:10px}
@media (min-width:640px){.opcoes{grid-template-columns:repeat(3,1fr)}}
.opcoes button{padding:16px 18px;border-radius:14px;border:1px solid var(--n-lin);background:transparent;color:inherit;font:500 1rem var(--sans);cursor:pointer;text-align:left;transition:background .15s,border-color .15s}
.opcoes button:hover{border-color:var(--cta);background:rgba(244,162,89,.08)}
.resultado .estado{font-family:var(--serif);font-size:clamp(2.2rem,7vw,3.4rem);line-height:1;color:var(--cta);margin-bottom:16px}
.res-mods{font-size:.95rem;opacity:.85;border-left:2px solid var(--cta);padding-left:14px}
.link{background:none;border:0;color:inherit;opacity:.65;text-decoration:underline;font:inherit;font-size:.9rem;cursor:pointer;margin:18px 0 0;padding:0;display:block}
.aviso{font-size:.8rem;opacity:.55;margin:24px 0 0}

/* respiração */
.respiracao{text-align:center}
.respiracao .sub{margin-left:auto;margin-right:auto}
.resp{display:flex;flex-direction:column;align-items:center;margin-top:44px}
.resp-circ{width:min(68vw,280px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(circle at 50% 40%,rgba(244,162,89,.35),rgba(244,162,89,.06) 70%);border:1px solid rgba(244,162,89,.45);transform:scale(.62);transition-property:transform;transition-timing-function:ease-in-out}
.resp-circ span{font:500 .78rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.resp-circ b{font-family:var(--serif);font-weight:400;font-size:3rem;line-height:1;min-height:1em}
.resp-fim{max-width:620px;margin:40px auto 0;font-size:1.12rem}

/* virada */
.caminhos{display:grid;gap:14px;margin-top:36px}
@media (min-width:700px){.caminhos{grid-template-columns:1fr 1fr}}
.caminho{padding:28px;border-radius:20px;border:1px solid var(--a-lin)}
.caminho:not(.escolhido){opacity:.6}
.caminho:not(.escolhido) h3{text-decoration:line-through;text-decoration-color:var(--alerta)}
.caminho.escolhido{background:var(--a-sup);border-color:var(--cta)}
.caminho.escolhido h3{color:var(--cta)}
.caminho p{margin:0}

/* como funciona */
.eixos{display:grid;gap:0;margin-top:40px;border-top:1px solid var(--d-lin)}
@media (min-width:700px){.eixos{grid-template-columns:1fr 1fr;gap:40px}}
.eixo{padding:26px 0;border-bottom:1px solid var(--d-lin)}
.eixo h3{font-family:var(--serif);font-weight:400;font-size:2rem;color:var(--d-acc);margin-bottom:10px}
.eixo p{margin:0;color:var(--d-mut)}

/* trilha de módulos */
.etapas{list-style:none;padding:0;margin:44px 0 0;position:relative}
.etapas::before{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--alerta),var(--cta) 45%,var(--regulado))}
.etapas li{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:0 0 26px;position:relative}
.etapas .idx{width:44px;height:44px;border-radius:50%;display:grid;place-content:center;background:var(--d-bg);border:2px solid var(--cor);color:var(--d-ink);opacity:1;position:relative}
.etapas h3{margin:9px 0 4px}
.etapas p{margin:0;color:var(--d-mut);font-size:.98rem}

/* depoimentos */
.depos{display:grid;gap:16px;margin-top:36px}
@media (min-width:700px){.depos{grid-template-columns:1fr 1fr}}
.depos blockquote{margin:0;padding:26px;background:var(--d-sup);border-radius:20px;border:1px solid var(--d-lin)}
.depos blockquote p{font-family:var(--serif);font-size:1.35rem;line-height:1.3}
.depos cite{font:500 .75rem var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--d-mut)}
.depo-imgs{columns:2 220px;column-gap:12px;margin-top:20px}
.depo-imgs img{margin-bottom:12px;border-radius:14px;border:1px solid var(--d-lin)}
.reservado{margin-top:32px;padding:22px;border:2px dashed var(--alerta);border-radius:16px;font-size:.95rem}

/* para quem */
.duo{display:grid;gap:14px}
@media (min-width:700px){.duo{grid-template-columns:1fr 1fr}}
.col{padding:28px;border-radius:20px;background:var(--d-sup);border:1px solid var(--d-lin)}
.col ul{list-style:none;padding:0;margin:14px 0 0}
.col li{padding:10px 0 10px 30px;position:relative;border-top:1px solid var(--d-lin);font-size:.98rem}
.sim li::before{content:"✓";position:absolute;left:2px;color:var(--d-acc);font-weight:700}
.nao li::before{content:"✕";position:absolute;left:3px;color:var(--alerta);font-weight:700}

/* autor */
.autor .wrap{display:grid;gap:28px;align-items:center}
@media (min-width:700px){.autor .com-foto{grid-template-columns:260px 1fr}}
.autor img{border-radius:20px;filter:saturate(.9);width:100%;max-width:320px}

/* oferta */
.oferta .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.oferta .sub{margin:0 auto}
.preco-card{width:100%;max-width:520px;margin-top:36px;padding:clamp(26px,5vw,40px);border-radius:24px;background:var(--n-bg);color:var(--n-ink);text-align:left;box-shadow:0 30px 60px -30px rgba(13,15,20,.45)}
.selo-oferta{display:inline-block;font:500 .72rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cta-ink);background:var(--cta);padding:7px 12px;border-radius:6px;margin-bottom:20px}
.inclusos{list-style:none;padding:0;margin:0 0 26px}
.inclusos li{padding:11px 0 11px 28px;border-bottom:1px solid var(--n-lin);position:relative;font-size:.98rem}
.inclusos li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:10px;border-radius:50%;background:var(--regulado)}
.inclusos li.extra{color:var(--cta);font-weight:600}
.inclusos li.extra::before{background:var(--cta)}
.valores{text-align:center}
.ancora{color:var(--n-mut);margin:0 0 4px;font-size:.95rem}
.parcela{font-family:var(--serif);font-size:clamp(2.6rem,9vw,3.6rem);line-height:1;margin:0 0 8px}
.avista{color:var(--n-mut);margin:0}
.preco-card .cta{width:100%}
.seguro{font-size:.82rem;color:var(--n-mut);text-align:center;margin:14px 0 0}
.garantia{display:flex;gap:18px;align-items:center;max-width:520px;margin-top:20px;text-align:left;font-size:.95rem;color:var(--d-mut)}
.garantia p{margin:0}
.garantia b{color:var(--d-ink)}
.g7{flex:0 0 64px;height:64px;border-radius:50%;border:1.5px solid var(--d-acc);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--d-acc);line-height:1}
.g7 b{font-family:var(--serif);font-weight:400;font-size:1.7rem;color:var(--d-acc)}
.g7 span{font:500 .55rem var(--mono);text-transform:uppercase;letter-spacing:.12em}

/* faq */
details{border-top:1px solid var(--d-lin)}
details:last-of-type{border-bottom:1px solid var(--d-lin)}
summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-weight:500;font-size:1.05rem;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:16px;font:400 1.6rem var(--sans);color:var(--d-acc);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--d-mut);padding-bottom:16px;max-width:680px}

/* final */
.final{text-align:center;padding-bottom:96px}
.final .sub{margin:0 auto;opacity:.85}
.final h2{max-width:760px;margin-left:auto;margin-right:auto}
footer{padding:0 0 130px;font-size:.8rem;text-align:center}
footer.tema-amanhecer{background:#F0B98D}
footer p{opacity:.7}

/* barra fixa de compra no celular */
.fixo{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(13,15,20,.92);backdrop-filter:blur(10px);color:var(--n-ink);border-top:1px solid var(--n-lin);transform:translateY(110%);transition:transform .28s ease}
.fixo.on{transform:none}
.fixo p{margin:0;font-size:.82rem;line-height:1.3;color:var(--n-mut)}
.fixo p b{display:block;color:var(--n-ink);font-size:1rem}
.fixo .cta{margin:0;width:auto;padding:13px 20px;font-size:.95rem}
@media (min-width:960px){.fixo{display:none}}

/* barra da prévia (só aparece na prévia) */
.previa{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:50;display:flex;gap:4px;padding:4px;background:#fff;border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.35);max-width:calc(100% - 24px);overflow-x:auto}
.previa a{white-space:nowrap;padding:8px 12px;border-radius:999px;font:500 .74rem var(--sans);color:#14171B;text-decoration:none}
.previa a[aria-current]{background:#14171B;color:#fff}
@media (min-width:960px){.previa{bottom:20px}}

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