/* Landing — A Linguagem das 36 Cartas */

:root{
  --bg:#1e1220; --surface:#2a1a2e; --raised:#37243c;
  --line:#54395a; --line-soft:#412c48;
  --ink:#eee2cc; --ink-dim:#d6c4c4; --muted:#ab92a8;
  --gold:#d5a75f; --gold-deep:#b2894a; --gold-wash:rgba(213,167,95,.12);
  --wine:#c96b7c; --titulo:#e3bd7d;
  --shadow:0 18px 40px rgba(22,9,22,.5);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f2e6d1; --surface:#faf3e6; --raised:#e9dabf;
    --line:#d2bd98; --line-soft:#e0d1b3;
    --ink:#35232c; --ink-dim:#5a4350; --muted:#87687d;
    --gold:#8d681c; --gold-deep:#735414; --gold-wash:rgba(141,104,28,.11);
    --wine:#7c2334; --titulo:#6f1f30;
    --shadow:0 14px 32px rgba(96,62,40,.18);
  }
}
:root[data-theme="light"]{
  --bg:#f2e6d1; --surface:#faf3e6; --raised:#e9dabf;
  --line:#d2bd98; --line-soft:#e0d1b3;
  --ink:#35232c; --ink-dim:#5a4350; --muted:#87687d;
  --gold:#8d681c; --gold-deep:#735414; --gold-wash:rgba(141,104,28,.11);
  --wine:#7c2334; --titulo:#6f1f30;
  --shadow:0 14px 32px rgba(96,62,40,.18);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Lora', Georgia, serif; font-size:1.02rem; line-height:1.7;
}
::selection{ background:var(--gold); color:var(--bg) }
a{ color:var(--gold); text-decoration:none }
a:hover{ text-decoration:underline }
a:focus-visible, .btn:focus-visible, button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

.fundo-estrelas{
  position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.25;
  background-image:
    radial-gradient(1px 1px at 10% 20%, var(--gold) 1px, transparent 2px),
    radial-gradient(1px 1px at 70% 60%, var(--gold) 1px, transparent 2px),
    radial-gradient(1px 1px at 40% 80%, var(--gold) 1px, transparent 2px),
    radial-gradient(1px 1px at 85% 15%, var(--gold) 1px, transparent 2px),
    radial-gradient(1px 1px at 15% 75%, var(--gold) 1px, transparent 2px),
    radial-gradient(1px 1px at 55% 30%, var(--gold) 1px, transparent 2px);
  background-size:800px 800px;
}

/* Topo */
.topo{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom:1px solid var(--line-soft);
  padding:.9rem 1.4rem;
  display:flex; justify-content:space-between; align-items:center; gap:.8rem;
}
.topo .direita{ display:flex; align-items:center; gap:.6rem }
.topo .marca{
  font-family:'Cinzel', serif; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
}
.topo .link-topo{
  font-family:'Cinzel', serif; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.4rem .8rem; border:1px solid var(--gold-deep); border-radius:99px;
  color:var(--gold); text-decoration:none;
}
.topo .link-topo:hover{ background:var(--gold-wash); text-decoration:none }

/* Botões */
.btn{
  display:inline-block; font-family:'Cinzel', serif; font-size:.85rem; letter-spacing:.18em; text-transform:uppercase;
  padding:1rem 2.2rem; border-radius:99px; border:1px solid var(--gold-deep);
  background:linear-gradient(180deg, var(--gold), var(--gold-deep));
  color:#241a20 !important; font-weight:600;
  box-shadow:var(--shadow); transition:transform .15s;
  text-decoration:none;
}
.btn:hover{ transform:translateY(-2px); text-decoration:none }
.btn-grande{ padding:1.2rem 3rem; font-size:.95rem }
.cta-nota{ font-size:.82rem; color:var(--muted); margin-top:.9rem }

/* Hero */
.hero{
  text-align:center; padding:4.5rem 1.3rem 4rem; overflow:hidden; position:relative;
  background:radial-gradient(ellipse 85% 65% at 50% -10%, var(--gold-wash), transparent 70%);
  border-bottom:1px solid var(--line-soft);
}
.eyebrow{ font-family:'Cinzel', serif; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); margin:0 0 1.2rem }
.hero h1{
  font-family:'Cinzel', serif; font-weight:500; font-size:clamp(2.2rem, 6.5vw, 3.8rem);
  line-height:1.1; margin:0; letter-spacing:.05em; color:var(--titulo); text-wrap:balance;
}
.hero h1 .fio{
  display:block; font-size:.4em; letter-spacing:.28em; color:var(--gold);
  margin-top:.8rem; font-weight:400;
}
.hero-sub{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:clamp(1.15rem, 2.5vw, 1.4rem); color:var(--ink-dim);
  max-width:34em; margin:1.6rem auto 0; text-wrap:balance;
}
.autora-linha{ font-size:.9rem; color:var(--muted); margin:1rem 0 2rem }
.autora-linha b{ color:var(--gold); font-weight:600 }

.leque-real{
  display:flex; justify-content:center; align-items:flex-end;
  margin:2.4rem auto 2.6rem; min-height:200px;
}
.leque-real img{
  width:clamp(96px, 22vw, 150px); height:auto;
  border-radius:9px; border:1px solid var(--line);
  box-shadow:var(--shadow); background:#fff;
}
.leque-real img:nth-child(1){ transform:rotate(-10deg) translateX(14px) translateY(8px) }
.leque-real img:nth-child(2){ transform:translateY(-6px); z-index:2; position:relative }
.leque-real img:nth-child(3){ transform:rotate(10deg) translateX(-14px) translateY(8px) }

/* Sections */
main{ max-width:960px; margin:0 auto; padding:0 1.2rem }
section{ padding:3.8rem 0; border-bottom:1px solid var(--line-soft) }
section:last-of-type{ border-bottom:none }
.rot{
  font-family:'Cinzel', serif; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); display:block; text-align:center; margin-bottom:.8rem;
}
h2{
  font-family:'Cormorant Garamond', serif; font-weight:600;
  font-size:clamp(1.7rem, 4vw, 2.3rem); margin:0 0 1.6rem;
  text-align:center; color:var(--titulo); text-wrap:balance;
}

/* Método (cards) */
.grade{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; margin-top:2rem }
.cartao{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px;
  padding:1.4rem 1.4rem 1.2rem;
}
.cartao .ic{ font-size:1.3rem; color:var(--gold); display:block; margin-bottom:.6rem }
.cartao h3{ font-family:'Cormorant Garamond', serif; font-size:1.25rem; font-weight:600; margin:0 0 .5rem }
.cartao p{ font-size:.93rem; color:var(--ink-dim); margin:0 }

/* Capítulos */
.capitulos{ list-style:none; padding:0; max-width:640px; margin:2rem auto 0 }
.capitulos li{
  display:flex; gap:1rem; align-items:baseline;
  padding:.7rem 0; border-bottom:1px dashed var(--line-soft); font-size:.98rem;
}
.capitulos .num{
  font-family:'Cinzel', serif; font-size:.7rem; letter-spacing:.15em; color:var(--gold);
  flex:0 0 6.5rem;
}

/* Amostra */
.amostra{
  max-width:66ch; margin:2rem auto 0;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden; position:relative;
}
.amostra-capa{
  display:flex; gap:1.4rem; align-items:center; padding:1.6rem;
  border-bottom:1px solid var(--line-soft);
  background:radial-gradient(ellipse 90% 120% at 15% 0%, var(--gold-wash), transparent 60%);
  flex-wrap:wrap;
}
.amostra-capa img{ width:104px; border-radius:8px; border:1px solid var(--line); background:#fff }
.amostra-capa .num{ font-family:'Cinzel', serif; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin:0 0 .3rem }
.amostra-capa h3{ font-family:'Cormorant Garamond', serif; font-size:1.8rem; font-weight:600; margin:0 0 .5rem; color:var(--titulo) }
.chips{ display:flex; gap:.4rem; flex-wrap:wrap; margin:0 }
.chip{
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.2rem .6rem; border-radius:99px; border:1px solid var(--line);
  color:var(--ink-dim); background:var(--raised);
}
.chip.pos{ color:#93c2a1; border-color:#93c2a1; background:rgba(147,194,161,.12) }
.amostra-corpo{ padding:1.5rem 1.6rem 0 }
.amostra-corpo h4{
  font-family:'Cinzel', serif; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:1.4rem 0 .5rem;
}
.amostra-corpo p, .amostra-corpo li{ font-size:.95rem }
.amostra-corpo ul{ padding-left:1.2rem; margin:.2rem 0 1rem }

.veu{ position:relative; height:150px; margin-top:-40px }
.veu::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, var(--surface) 70%);
}
.veu-cta{ position:absolute; bottom:1.4rem; left:0; right:0; text-align:center; z-index:2 }
.veu-cta span{
  display:block; font-family:'Cormorant Garamond', serif; font-style:italic;
  color:var(--ink-dim); margin-bottom:.8rem;
}

/* Autora */
.autora{
  display:grid; grid-template-columns:auto 1fr; gap:1.6rem;
  max-width:640px; margin:2rem auto 0; align-items:start;
}
@media (max-width:560px){ .autora{ grid-template-columns:1fr } }
.autora .selo-a{
  width:88px; height:88px; border-radius:50%; border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel', serif; font-size:1.6rem; color:var(--gold); background:var(--surface);
}
.autora p{ margin:0 0 .8rem }

/* FAQ */
details.faq{
  max-width:640px; margin:0 auto .6rem; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:10px; padding:.9rem 1.2rem;
}
details.faq summary{
  cursor:pointer; font-weight:600;
  font-family:'Cormorant Garamond', serif; font-size:1.12rem; list-style:none;
}
details.faq summary::-webkit-details-marker{ display:none }
details.faq summary::after{ content:" +"; color:var(--gold) }
details.faq[open] summary::after{ content:" –" }
details.faq p{ font-size:.93rem; color:var(--ink-dim); margin:.7rem 0 0 }

/* CTA final */
.cta-final{ text-align:center; padding:4rem 1rem }

/* Footer */
footer{
  text-align:center; padding:2.5rem 1.2rem 3rem;
  color:var(--muted); font-size:.85rem;
  border-top:1px solid var(--line-soft);
}
footer .selo{
  font-family:'Cinzel', serif; letter-spacing:.3em; text-transform:uppercase;
  font-size:.66rem; color:var(--gold); display:block; margin-bottom:.6rem;
}
footer p{ margin:.3rem 0 }
footer .links-legais{ font-size:.75rem; color:var(--muted) }
footer .links-legais a{ color:var(--muted); margin:0 .4rem }
footer strong{ color:var(--ink) }

/* Tema toggle (dentro do topo, no fluxo) */
#tema-btn{
  width:2.4rem; height:2.4rem; border-radius:50%;
  border:1px solid var(--gold-deep); background:var(--surface); color:var(--gold);
  font-size:1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
#tema-btn:hover{ background:var(--raised) }

@media (max-width: 640px){
  .capitulos .num{ flex-basis:5rem }
  .amostra-capa{ padding:1.2rem; gap:1rem }
  .amostra-capa img{ width:80px }
}