/* ============================================================
   TOKENS : ajuste os valores para casar com sua paleta atual
   ============================================================ */
:root{
  --bg:        #F6ECDE;   /* fundo creme */
  --bg-alt:    #F3E8D8;   /* faixas alternadas */
  --ink:       #2B211C;   /* texto principal */
  --ink-soft:  #5C554B;   /* texto secundário */
  --gold:      #B08A47;   /* acento dourado da marca */
  --gold-deep: #886634;   /* hover do acento */
  --line:      #EADCC9;   /* bordas e divisores */
  --white:     #FFFFFF;
  --ivory:     #F8F1E7;   /* Marfim Quente: cards e caixas */

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Outfit', Arial, sans-serif;

  --max: 1040px;
  --espaco-secao: 4rem;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 1.5rem; }

section{ padding:var(--espaco-secao) 0; }
section.alt{ background:var(--bg-alt); }

h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.2; }
h2{ font-size:clamp(28px,4vw,48px); }

.eyebrow{
  font-family:var(--sans);
  font-size:10px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:block;
  margin-bottom:1.1rem;
}

/* ============================================================
   CORREÇÃO 11 : skip link
   O link "Ir para o conteúdo principal" estava visível no
   layout. Ele deve ficar oculto e aparecer apenas quando
   recebe foco de teclado (Tab). Este CSS resolve.
   ============================================================ */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  background:var(--ink);
  color:var(--white);
  padding:.6rem 1.2rem;
  font-family:var(--sans);
  font-size:.85rem;
  z-index:1000;
}
.skip-link:focus{
  left:1rem;
  top:1rem;
}

/* ============================================================
   BOTÕES : CTA primário agora é sólido e de alto contraste.
   O fantasma fica reservado para ações secundárias.
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 28px;
  min-height:50px;
  border-radius:4px;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
  cursor:pointer;
  border:1px solid transparent;
  text-align:center;
}
.btn-primary{
  background:var(--gold);
  color:var(--white);
  box-shadow:0 8px 24px rgba(142,98,34,.22);
}
.btn-primary:hover,
.btn-primary:focus-visible{
  background:var(--gold-deep);
}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  border-color:var(--gold);
  color:var(--gold-deep);
}
a:focus-visible,
.btn:focus-visible,
button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ============================================================
   HEADER
   ============================================================ */
header{
  padding:1.8rem 0;
  border-bottom:1px solid var(--line);
}
header .wrap{ display:flex; justify-content:space-between; align-items:center; }
.brand{ display:inline-block; text-decoration:none; }
.brand-nome{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(18px,2vw,26px);
  font-weight:500; letter-spacing:0.16em;
  text-transform:uppercase; color:#2B211C;
  line-height:1; display:block;
}
.brand-sub{
  font-family:'Outfit', Arial, sans-serif;
  font-size:clamp(6.5px,0.58vw,8.5px);
  font-weight:400; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--gold-deep);
  line-height:1; display:block; margin-top:4px;
  text-align:justify; text-align-last:justify;
}

/* ============================================================
   SEÇÃO 1 : HERO
   ============================================================ */
.hero{ text-align:center; padding:5rem 0 var(--espaco-secao); }
.hero h1{
  font-size:clamp(28px,4.5vw,54px);
  max-width:21ch;
  margin:0 auto .9rem;
}
.hero .poetic{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.25rem, 2.6vw, 1.6rem);
  color:var(--gold-deep);
  margin-bottom:1.8rem;
}
.hero p.lead{
  max-width:58ch;
  margin:0 auto 2.4rem;
  color:var(--ink-soft);
}
.hero .cta-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   SEÇÃO 2 : DOR (um site parado envelhece)
   ============================================================ */
.pain h2{
  text-align:center;
  margin-bottom:3rem;
}
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.card{
  border:1px solid var(--line);
  background:var(--ivory);
  padding:1.8rem 1.6rem;
}
.card strong{
  display:block;
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:600;
  margin-bottom:.5rem;
}
.card p{ font-size:.95rem; color:var(--ink-soft); }
@media (max-width:760px){ .cards{ grid-template-columns:1fr; } }

/* ============================================================
   SEÇÃO 3 : CÓDIGO PURO (diferencial, saiu do rodapé)
   ============================================================ */
.craft{ text-align:center; }
.craft h2{
  margin-bottom:1.2rem;
}
.craft p{ max-width:62ch; margin:0 auto; color:var(--ink-soft); }
.craft .pillars{
  display:flex;
  justify-content:center;
  gap:2.5rem;
  flex-wrap:wrap;
  margin-top:2.6rem;
}
.craft .pillars span{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.15rem;
  color:var(--gold-deep);
}

/* ============================================================
   SEÇÃO 3.5 : POR QUE TURI?
   ============================================================ */
.turi-verbos h2{ margin-bottom:.8rem; }
.verbos-lista{
  list-style:none;
  display:grid;
  gap:1.6rem;
  margin-top:2.2rem;
  margin-bottom:2.8rem;
}
.verbo-item{ display:grid; gap:.35rem; }
.verbo-destaque{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.8vw,1.9rem);
  font-weight:500;
  color:var(--gold-deep);
  line-height:1.1;
}
.verbo-frase{ font-size:.98rem; color:var(--ink-soft); line-height:1.65; }

/* ============================================================
   CITAÇÃO FECHAMENTO
   ============================================================ */
.citacao-fechamento{
  text-align:center;
  padding:6rem 0;
}
.citacao-filete{
  width:44px;
  height:2px;
  background:var(--gold);
  margin:0 auto 2rem;
}
.citacao-fechamento p{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(24px,3vw,38px);
  color:var(--ink);
  max-width:28ch;
  margin:0 auto;
  line-height:1.4;
}
.citacao-destaque{
  color:var(--gold-deep);
}

/* ============================================================
   SEÇÃO 4 : O QUE ESTÁ INCLUÍDO
   ============================================================ */
.included .grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.4rem;
  margin-top:2.6rem;
}
.included .item{
  border:1px solid var(--line);
  background:var(--ivory);
  padding:1.7rem 1.6rem;
}
.included .item strong{
  display:block;
  font-family:var(--serif);
  font-size:1.18rem;
  font-weight:600;
  margin-bottom:.45rem;
}
.included .item p{ font-size:.95rem; color:var(--ink-soft); }
@media (max-width:760px){ .included .grid{ grid-template-columns:1fr; } }

/* ============================================================
   SEÇÃO 5 : PROCESSO
   ============================================================ */
.process h2{ margin-bottom:2.6rem; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.step .num{
  font-family:var(--serif);
  font-size:2.4rem;
  color:var(--gold-deep);
  display:block;
  margin-bottom:.4rem;
}
.step p{ font-size:.98rem; color:var(--ink-soft); }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }

/* ============================================================
   TRANSIÇÃO PRÉ-PLANOS
   ============================================================ */
.planos-intro{
  text-align:center;
}
.planos-intro h2{
  margin-bottom:1.4rem;
}
.planos-intro-wpp{
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-color:var(--gold);
}
.planos-intro-wpp:hover{ color:var(--gold-deep); }

/* ============================================================
   SEÇÃO 6 : PLANOS (dois planos + toggle mensal/anual em CSS)
   ============================================================ */
.pricing h2{
  text-align:center;
  margin-bottom:.8rem;
}
.pricing .launch{
  text-align:center;
  max-width:60ch;
  margin:0 auto 2.4rem;
  color:var(--ink-soft);
  font-size:.98rem;
}
.pricing .launch em{ color:var(--gold-deep); font-style:normal; font-weight:500; }

/* toggle por checkbox, sem JavaScript */
.billing-toggle{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  margin-bottom:3rem;
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
#billing{ position:absolute; opacity:0; }
.switch{
  width:54px; height:28px;
  border:1px solid var(--gold);
  border-radius:28px;
  position:relative;
  cursor:pointer;
  display:inline-block;
}
.switch::after{
  content:"";
  position:absolute;
  top:3px; left:4px;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--gold);
  transition:left .25s ease;
}
#billing:checked ~ .billing-toggle .switch::after,
#billing:checked + label.switch::after{ left:28px; }
#billing:focus-visible + label.switch{ outline:2px solid var(--gold); outline-offset:3px; }

.price-annual{ display:none; }
#billing:checked ~ .plans .price-monthly{ display:none; }
#billing:checked ~ .plans .price-annual{ display:block; }

.plans{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.6rem;
  max-width:880px;
  margin:0 auto;
}
.plan{
  border:1px solid var(--line);
  background:var(--ivory);
  padding:2.4rem 2.1rem;
  display:flex;
  flex-direction:column;
  position:relative;
}
.plan.featured{ border-color:var(--gold); }
.plan .badge{
  position:absolute;
  top:-0.85rem; left:50%;
  transform:translateX(-50%);
  background:var(--gold);
  color:var(--white);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:.35rem 1.1rem;
  white-space:nowrap;
}
.plan h3{ font-size:1.55rem; font-weight:600; }
.plan .tagline{
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold-deep);
  margin:.2rem 0 1.4rem;
}
.plan .price{ font-family:var(--serif); font-size:2.6rem; line-height:1; }
.plan .price small{
  font-family:var(--sans);
  font-size:.95rem;
  color:var(--ink-soft);
}
.plan .price-note{
  font-size:.85rem;
  color:var(--ink-soft);
  margin:.5rem 0 1.6rem;
}
.plan ul{
  list-style:none;
  margin-bottom:2rem;
  flex-grow:1;
}
.plan li{
  font-size:.95rem;
  padding:.45rem 0 .45rem 1.6rem;
  position:relative;
  color:var(--ink-soft);
}
.plan li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--gold);
}
.plan li.off{ opacity:.45; }
.plan li.off::before{ content:"·"; }
.plan .btn{ width:100%; }
@media (max-width:760px){ .plans{ grid-template-columns:1fr; } }

/* ============================================================
   SEÇÃO 7 : GARANTIA
   ============================================================ */
.guarantee{ text-align:center; }
.guarantee h2{
  font-size:clamp(24px,3.2vw,40px);
  margin-bottom:1rem;
}
.guarantee p{ max-width:58ch; margin:0 auto; color:var(--ink-soft); }

/* ============================================================
   SEÇÃO 8 : FAQ (accordion nativo com details/summary)
   ============================================================ */
.faq h2{ margin-bottom:2.4rem; }
.faq details{
  border:1px solid var(--line);
  background:var(--ivory);
  margin-bottom:.9rem;
}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:1.3rem 3.2rem 1.3rem 1.5rem;
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  position:absolute;
  right:1.5rem;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--gold);
  transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq details p{
  padding:0 1.5rem 1.4rem;
  font-size:.96rem;
  color:var(--ink-soft);
}

/* ============================================================
   SEÇÃO 9 : CTA FINAL
   ============================================================ */
.final{ text-align:center; }
.final h2{
  margin-bottom:2.2rem;
}
.final .cta-row{
  display:flex;
  gap:1.2rem;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.final .wa-link{
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-color:var(--gold);
}
.final .wa-link:hover{ color:var(--gold-deep); }

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  border-top:1px solid var(--line);
  padding:2.6rem 0;
  text-align:center;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
footer p + p{ margin-top:.6rem; }

.billing-em{ color:var(--gold-deep); font-style:normal; }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}

@media print {
  .skip-link { display: none; }
}