/* Plataforma Luciene Jokoski — Autonomia na Vida Real
   Regras de design deste nicho:
   - o público chega exausto: leitura grande, respiro alto, zero ruído
   - contraste AA em tudo, foco sempre visível (muita navegação por teclado)
   - nenhuma imagem de criança, nenhum antes/depois (cláusula 9ª) */

:root{
  --areia:#FBF8F4;
  --papel:#FFFFFF;
  --tinta:#1C2A2E;
  --tinta-suave:#4A5B60;
  --verde:#2E6F62;
  --verde-fundo:#EAF2EF;
  --pessego:#D9825A;
  --borda:#E6DFD5;
  --sombra:0 1px 2px rgba(28,42,46,.04), 0 8px 24px rgba(28,42,46,.06);
  --raio:14px;
  --max:1080px;
}

@media (prefers-color-scheme: dark){
  :root{
    --areia:#12181A;
    --papel:#1A2225;
    --tinta:#ECF1F0;
    --tinta-suave:#A9B8BC;
    --verde:#6FBFAB;
    --verde-fundo:#1E2E2C;
    --pessego:#E8A87C;
    --borda:#2B3639;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--areia);
  color:var(--tinta);
  font:400 18px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
h1,h2,h3{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;line-height:1.2;font-weight:600;letter-spacing:-.01em;margin:0}
/* balance evita a linha órfã de 2 palavras no mobile — o H1 aqui é longo de propósito */
h1{font-size:clamp(1.9rem,5vw,3.1rem);text-wrap:balance}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
h3{font-size:1.15rem;font-family:inherit;font-weight:650}
p{margin:0 0 1em}
a{color:var(--verde)}
:focus-visible{outline:3px solid var(--pessego);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.estreito{max-width:720px}

/* ---------- topo ---------- */
.topo{padding:20px 0;border-bottom:1px solid var(--borda);background:var(--papel)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.marca{font-family:Georgia,serif;font-size:1.15rem;font-weight:600;text-decoration:none;color:var(--tinta)}
.marca span{display:block;font-family:system-ui,sans-serif;font-size:.75rem;font-weight:500;color:var(--tinta-suave);letter-spacing:.08em;text-transform:uppercase}
.topo nav{display:flex;gap:22px;font-size:.95rem}
.topo nav a{text-decoration:none;color:var(--tinta-suave)}
.topo nav a:hover{color:var(--verde)}

/* ---------- hero ---------- */
.hero{padding:72px 0 56px;background:var(--papel);border-bottom:1px solid var(--borda)}
.hero .selo{display:inline-block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--verde);background:var(--verde-fundo);padding:6px 14px;border-radius:999px;margin-bottom:24px}
.hero p.lead{font-size:1.2rem;color:var(--tinta-suave);max-width:60ch;margin-top:20px}

/* ---------- blocos ---------- */
section{padding:64px 0}
.rotulo{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:12px}

.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:32px}

.card{
  background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);
  padding:28px;box-shadow:var(--sombra);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:10px;transition:transform .15s ease,box-shadow .15s ease;
}
a.card:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(28,42,46,.06),0 14px 34px rgba(28,42,46,.10)}
.card .frente{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pessego);font-weight:650}
.card p{color:var(--tinta-suave);font-size:.98rem;margin:0}
.card .metodo{margin-top:auto;padding-top:14px;font-size:.85rem;color:var(--verde);font-weight:600}

.destaque{background:var(--verde-fundo);border-left:4px solid var(--verde);padding:22px 24px;border-radius:0 var(--raio) var(--raio) 0;margin:28px 0}
.destaque p:last-child{margin:0}

.cena{font-family:Georgia,serif;font-size:1.25rem;line-height:1.55;color:var(--tinta);border-left:3px solid var(--pessego);padding-left:22px;margin:0 0 28px}

ul.lista{list-style:none;padding:0;margin:24px 0}
ul.lista li{padding:12px 0 12px 34px;border-bottom:1px solid var(--borda);position:relative}
ul.lista li::before{content:"";position:absolute;left:6px;top:21px;width:9px;height:9px;border-radius:50%;background:var(--verde)}
ul.lista li:last-child{border-bottom:0}

/* ---------- botões ---------- */
.btn{
  display:inline-block;background:var(--verde);color:#fff;text-decoration:none;
  padding:16px 30px;border-radius:999px;font-weight:600;font-size:1rem;border:0;cursor:pointer;
  transition:filter .15s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn.secundario{background:transparent;color:var(--verde);border:1.5px solid var(--verde)}

/* ---------- formulário ---------- */
form{background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);padding:28px;box-shadow:var(--sombra)}
label{display:block;font-size:.9rem;font-weight:600;margin:16px 0 6px}
input,select{
  width:100%;padding:14px 16px;font:inherit;font-size:1rem;
  border:1.5px solid var(--borda);border-radius:10px;background:var(--areia);color:var(--tinta);
}
input:focus,select:focus{border-color:var(--verde)}
form .btn{width:100%;margin-top:24px}
.privacidade{font-size:.82rem;color:var(--tinta-suave);margin:16px 0 0}
.msg{margin-top:16px;padding:14px 16px;border-radius:10px;font-size:.95rem;display:none}
.msg.ok{display:block;background:var(--verde-fundo);color:var(--verde)}
.msg.erro{display:block;background:#FBEAE4;color:#A8452A}
@media (prefers-color-scheme: dark){.msg.erro{background:#3A211A;color:#E8A87C}}

/* ---------- rodapé ---------- */
.aviso{background:var(--verde-fundo);border-radius:var(--raio);padding:20px 24px;font-size:.92rem;color:var(--tinta-suave)}
footer{border-top:1px solid var(--borda);background:var(--papel);padding:44px 0;font-size:.9rem;color:var(--tinta-suave)}
footer a{color:var(--tinta-suave)}
footer .linhas{display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between}

@media (max-width:640px){
  body{font-size:17px}
  .hero{padding:52px 0 40px}
  section{padding:48px 0}
  .card{padding:22px}
}

/* ---------- catálogo estilo Netflix ----------
   Fileira horizontal com scroll-snap + poster da capa real do e-book.
   Fundo escuro é deliberado: separa "vitrine" de "leitura", e faz as 5 capas
   (cada uma de uma cor) brilharem sem competir com o texto acolhedor do resto. */
.catalogo{background:#0C1214;color:#F2F6F5;padding:64px 0}
.catalogo h2{color:#FFF}
.catalogo .rotulo{color:#8FA3A8}
.catalogo p.intro{max-width:62ch;color:#A9BCC0}

.fileira-wrap{position:relative}
.fileira{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:26px 4px 30px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#2E3B3F transparent;
}
.fileira::-webkit-scrollbar{height:8px}
.fileira::-webkit-scrollbar-thumb{background:#2E3B3F;border-radius:4px}
.fileira::-webkit-scrollbar-track{background:transparent}

.poster{
  flex:0 0 clamp(168px,44vw,228px);scroll-snap-align:start;
  text-decoration:none;color:inherit;display:block;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.poster img{
  width:100%;aspect-ratio:620/802;object-fit:cover;display:block;
  border-radius:10px;background:#1A2225;box-shadow:0 6px 20px rgba(0,0,0,.5);
  transition:box-shadow .22s ease;
}
.poster:hover,.poster:focus-visible{transform:scale(1.05)}
.poster:hover img{box-shadow:0 14px 38px rgba(0,0,0,.65)}
.poster .p-frente{display:block;margin-top:12px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pessego);font-weight:650}
.poster .p-titulo{display:block;font-size:.95rem;font-weight:650;line-height:1.3;margin-top:3px;color:#F2F6F5}
.poster .p-metodo{display:block;font-size:.8rem;color:#7FC7B4;margin-top:4px}

.seta{
  position:absolute;top:calc(50% - 34px);transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:#0C1214;font-size:1.3rem;line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.4);display:none;
}
.seta:hover{background:#fff}
.seta.esq{left:-16px} .seta.dir{right:-16px}
@media (min-width:900px){ .seta{display:block} }

/* capa grande na página do produto */
.produto-topo{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:start}
.produto-topo img{width:100%;border-radius:12px;box-shadow:var(--sombra)}
@media (max-width:760px){
  .produto-topo{grid-template-columns:1fr;gap:24px}
  .produto-topo .capa{max-width:210px}
}