/* ============================================================
   ESTILOS DA LANDING PAGE — Planner de Casamento
   As cores da marca ficam no bloco :root abaixo (edite ali).
   ============================================================ */

/* ---------- Fontes hospedadas localmente (melhor desempenho) ---------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/cormorantgaramond.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 700;font-display:swap;src:url('fonts/cormorantgaramond-italic.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/jost.woff2') format('woff2')}

:root{
  /* ---- PALETA DA MARCA (edite aqui) — VERDE OLIVA ---- */
  --paper:      #F7F4EC;   /* fundo geral, marfim quente */
  --surface:    #E6E8D9;   /* sálvia suave p/ cartões */
  --ink:        #2F3320;   /* texto principal, verde-terra escuro */
  --ink-soft:   #61634A;   /* texto secundário */
  --wine:       #414A26;   /* cor principal / botões — verde oliva escuro */
  --wine-dark:  #2D3418;   /* hover dos botões — oliva profundo */
  --gold:       #B79A5B;   /* detalhes / preço — dourado champanhe */
  --gold-ink:   #7A6526;   /* dourado escuro p/ TEXTO em fundo claro (acessibilidade) */
  --line:       #DEDCC8;   /* linhas finas */
  --success:    #566333;   /* selos de garantia */

  --maxw: 680px;
  --radius: 14px;
  --shadow: 0 18px 40px -22px rgba(58,46,42,.45);
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-ui:'Jost', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-ui); font-weight:400; line-height:1.65;
  font-size:17px; -webkit-font-smoothing:antialiased;
  /* trava qualquer vazamento lateral sem quebrar a barra sticky (clip != scroll container) */
  overflow-x:clip; overflow-wrap:break-word;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
section{padding:46px 0}

/* ---------- Tipografia ---------- */
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.1; margin:0 0 .4em; overflow-wrap:break-word}
h1{font-size:clamp(2.05rem,7vw,3.4rem); letter-spacing:-.5px}
h2{font-size:clamp(1.75rem,6vw,2.6rem)}
h3{font-size:clamp(1.25rem,4.5vw,1.45rem)}
p{margin:0 0 1.05em}
.eyebrow{
  font-family:var(--font-ui); font-size:.72rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold-ink);
  margin:0 0 14px;
}
/* na seção escura (fundo oliva) mantém o dourado claro, que já tem bom contraste */
.questions .eyebrow{color:var(--gold)}
.center{text-align:center}
.lead{font-size:1.12rem; color:var(--ink-soft)}
strong{font-weight:600; color:var(--ink)}
em{font-style:italic}

/* ---------- Ornamento divisor (assinatura) ---------- */
.ornament{display:flex; align-items:center; justify-content:center; gap:14px; margin:8px auto 30px; color:var(--gold)}
.ornament::before,.ornament::after{content:""; height:1px; width:60px; background:linear-gradient(90deg,transparent,var(--gold))}
.ornament::after{background:linear-gradient(90deg,var(--gold),transparent)}
.ornament span{font-size:1.1rem}

/* ---------- Barra fixa topo ---------- */
.topbar{
  position:sticky; top:0; z-index:50; background:var(--wine); color:#fff;
  font-size:clamp(.72rem,3.2vw,.82rem); letter-spacing:.02em; text-align:center;
  padding:9px 14px; line-height:1.4;
}
.topbar b{font-weight:600}
#count{font-variant-numeric:tabular-nums; font-weight:600}

/* ---------- Botões ---------- */
.btn{
  display:block; width:100%; text-align:center; text-decoration:none;
  background:var(--wine); color:#fff; font-family:var(--font-ui);
  font-weight:600; font-size:1.02rem; letter-spacing:.02em;
  padding:18px 24px; border-radius:var(--radius); border:none; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .15s ease, background .2s ease;
}
.btn:hover{background:var(--wine-dark); transform:translateY(-2px)}
/* foco visível de teclado em todos os elementos interativos */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px; border-radius:6px;
}
.btn small{display:block; font-weight:300; font-size:.78rem; opacity:.9; margin-top:3px; letter-spacing:.04em}
.btn.ghost{background:transparent; color:var(--wine); box-shadow:none; border:1.5px solid var(--line); font-weight:500}
.btn.ghost:hover{background:var(--surface); color:var(--wine-dark)}
.cta-note{font-size:.82rem; color:var(--ink-soft); text-align:center; margin-top:12px}

/* ---------- Hero ---------- */
.hero{padding-top:40px; text-align:center}
.hero .price-anchor{
  display:inline-flex; align-items:baseline; flex-wrap:wrap; justify-content:center;
  gap:6px 12px; margin:6px 0 4px; max-width:100%;
  font-family:var(--font-display);
}
.hero .old{font-size:1.3rem; color:var(--ink-soft); text-decoration:line-through}
.hero .now{font-size:clamp(2.8rem,13vw,3.6rem); font-weight:700; color:var(--wine); line-height:1}
.hero .cur{font-size:1.4rem; color:var(--wine); align-self:flex-start; margin-top:.4em}
.badge{
  display:inline-block; background:var(--surface); color:var(--wine-dark);
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px; margin-bottom:18px;
}
.hero-img{margin:26px auto 0; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--line)}

/* ---------- MacBook com o planner na tela (hero) ---------- */
.hero-visual{margin-top:22px}
.hero-mac{
  /* posição da TELA dentro da imagem do MacBook — ajuste fino aqui se precisar */
  --screen-top:1.6%; --screen-left:10.3%; --screen-width:79.4%; --screen-height:88%;
  position:relative; width:100%; max-width:520px; margin:0 auto;
}
.hero-mac-frame{width:100%; height:auto; display:block; position:relative; z-index:1}
.hero-mac-screen{
  position:absolute; z-index:2;
  top:var(--screen-top); left:var(--screen-left);
  width:var(--screen-width); height:var(--screen-height);
  object-fit:cover; border-radius:2px;
}
/* wrappers <picture> (WebP com fallback) — não alteram o layout */
.hero-mac picture{display:block}
.testi-card picture{display:block; width:100%; height:100%}
.founder picture{display:block; width:120px; margin:0 auto 18px}
.founder picture img{margin:0; display:block}

/* ---------- Hero em duas colunas (texto + MacBook) ---------- */
@media (min-width:820px){
  .hero-grid{
    max-width:980px; display:grid; grid-template-columns:1.02fr .98fr;
    gap:46px; align-items:start; text-align:left;
  }
  .hero-grid .ornament{margin-left:0; margin-right:auto}
  .hero-grid .trust{justify-content:flex-start}
  .hero-visual{margin-top:0; transform:translateX(28px)}
}
.trust{display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:center; margin-top:18px; font-size:.82rem; color:var(--ink-soft)}
.trust span{display:inline-flex; align-items:center; gap:6px}
.trust svg{width:15px; height:15px; color:var(--success)}

/* ---------- Blocos de perguntas ---------- */
.questions{background:var(--wine); color:#fff}
.questions h2{color:#fff}
.qlist{list-style:none; padding:0; margin:26px 0 0}
.qlist li{
  font-family:var(--font-display); font-style:italic; font-size:1.35rem;
  padding:16px 0; border-bottom:1px solid rgba(255,255,255,.16);
}
.qlist li:last-child{border-bottom:none}
.questions .lead{color:rgba(255,255,255,.85)}

/* ---------- Lista de benefícios ---------- */
.feature{display:flex; gap:15px; padding:16px 0; border-bottom:1px solid var(--line)}
.feature:last-child{border-bottom:none}
.feature .ic{flex:0 0 40px; height:40px; border-radius:10px; background:var(--surface);
  display:grid; place-items:center; color:var(--wine)}
.feature .ic svg{width:20px;height:20px}
.feature h3{font-size:1.2rem; margin:2px 0 4px}
.feature p{margin:0; color:var(--ink-soft); font-size:.98rem}

/* ---------- Bônus ---------- */
.bonus{background:var(--surface); border-radius:var(--radius); padding:24px; margin-bottom:16px; border:1px solid var(--line)}
.bonus .tag{font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--wine)}
.bonus h3{margin:6px 0 8px}
.bonus .val{font-family:var(--font-display); font-style:italic; color:var(--ink-soft); margin-top:10px}
.bonus .val b{color:var(--wine); font-style:normal}

/* ---------- Preço / planos ---------- */
.plans{display:grid; grid-template-columns:minmax(0,1fr); gap:22px; max-width:480px; margin-inline:auto}
.plan{background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 24px; position:relative; min-width:0}
.plan.hot{border:2px solid var(--gold); box-shadow:var(--shadow)}
.plan .ribbon{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#fff; font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; padding:6px 16px; border-radius:999px;
  white-space:nowrap; max-width:calc(100% - 16px);
}
.plan h3{text-align:center; margin-bottom:4px}
.plan .sub{text-align:center; color:var(--ink-soft); font-size:.9rem; margin:-2px 0 18px}
.plan ul{list-style:none; padding:0; margin:0 0 22px}
.plan li{padding:9px 0 9px 30px; position:relative; font-size:.97rem; border-bottom:1px solid var(--line)}
.plan li:last-child{border-bottom:none}
.plan li::before{content:"✓"; position:absolute; left:0; top:8px; color:var(--wine); font-weight:700}
.plan .price{text-align:center; font-family:var(--font-display); margin:0 0 20px; overflow-wrap:anywhere}
.plan .price .old{display:block; font-family:var(--font-ui); font-size:.95rem; color:var(--ink-soft); margin:0 0 4px}
.plan .price .old .strike{text-decoration:line-through}
.plan .price .big{font-size:clamp(2.4rem,9vw,3rem); font-weight:700; color:var(--wine); line-height:1; overflow-wrap:anywhere}
.plan .price .par{display:block; font-family:var(--font-ui); font-size:.85rem; color:var(--ink-soft); margin-top:4px}
.plan .price .today{
  display:inline-block; margin-top:14px; background:var(--wine); color:#fff;
  font-family:var(--font-ui); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; padding:6px 14px; border-radius:999px;
}

/* ---------- Garantia ---------- */
.guarantee{background:var(--wine); color:#fff; text-align:center; border-radius:var(--radius); padding:34px 26px}
.guarantee h2{color:#fff}
.seal{width:92px; height:92px; margin:0 auto 16px; border-radius:50%; border:2px solid var(--gold);
  display:grid; place-items:center; font-family:var(--font-display); line-height:1; color:#fff}
.seal b{font-size:2rem; font-weight:700}
.seal span{font-size:.62rem; letter-spacing:.18em; text-transform:uppercase}
.guarantee p{color:rgba(255,255,255,.86); max-width:460px; margin:0 auto 4px}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line); padding:6px 0}
.faq summary{
  cursor:pointer; list-style:none; padding:16px 34px 16px 0; position:relative;
  font-family:var(--font-display); font-size:1.28rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:14px; font-size:1.5rem; color:var(--wine); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--ink-soft); margin:0 0 16px; font-size:.98rem}

/* ---------- Fundadora ---------- */
.founder{background:var(--surface); border-radius:var(--radius); padding:30px 26px}
.founder img{width:120px; height:120px; border-radius:50%; object-fit:cover; margin:0 auto 18px; border:3px solid #fff; box-shadow:var(--shadow)}
.founder p{font-size:1.02rem}
.founder .sig{font-family:var(--font-display); font-style:italic; font-size:1.5rem; color:var(--wine); margin-top:8px}

/* ---------- Final ---------- */
.final{text-align:center}
.final .now{font-family:var(--font-display); font-size:clamp(2.6rem,12vw,3.2rem); font-weight:700; color:var(--wine); line-height:1; margin:4px 0}
.final .old{color:var(--ink-soft); text-decoration:line-through; font-family:var(--font-display); font-size:1.2rem}

footer{background:var(--ink); color:rgba(255,255,255,.72); text-align:center; padding:34px 22px; font-size:.85rem}
footer a{color:var(--gold); text-decoration:none}
footer p{margin:.3em 0}

/* ---------- Página de política / termos ---------- */
.legal{padding:44px 0}
.legal h1{font-size:clamp(1.9rem,6vw,2.6rem); margin-bottom:.3em}
.legal h2{font-size:clamp(1.35rem,4.5vw,1.7rem); margin:32px 0 .4em}
.legal p{color:var(--ink-soft)}
.legal a{color:var(--wine); text-decoration:underline}
.legal-list{margin:0 0 1.05em; padding-left:22px; color:var(--ink-soft)}
.legal-list li{margin:8px 0}

/* ---------- Checklist (blocos de benefícios) ---------- */
.checklist{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin:24px 0}
.checklist-title{font-family:var(--font-display); font-size:1.25rem; color:var(--ink); margin:0 0 10px}
.checklist ul{list-style:none; padding:0; margin:0}
.checklist li{position:relative; padding:9px 0 9px 30px; font-size:1rem; color:var(--ink)}
.checklist li + li{border-top:1px solid var(--line)}
.checklist li::before{content:"✓"; position:absolute; left:0; top:9px; color:var(--wine); font-weight:700}

/* ---------- Depoimentos (carrossel) ---------- */
.testi{overflow:hidden; padding:12px 0 20px; margin-top:6px}
.testi-track{
  position:relative; display:flex; gap:16px; width:max-content;
  will-change:transform; animation:testiMarquee 30s linear infinite;
}
@keyframes testiMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--shift, 50%)))}
}
/* fallback (movimento reduzido): sem animação, rolagem manual */
.testi-track.is-static{animation:none; width:auto; overflow-x:auto; scrollbar-width:none}
.testi-track.is-static::-webkit-scrollbar{display:none}
.testi-card{
  flex:0 0 min(80%, 300px); aspect-ratio:1 / 1; margin:0; padding:10px; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.testi-card img{width:100%; height:100%; object-fit:contain; display:block; border-radius:8px}
.testi-stars{color:var(--gold); letter-spacing:2px; font-size:.95rem; margin-bottom:10px}
.testi-card blockquote{
  margin:0 0 16px; font-family:var(--font-display); font-style:italic;
  font-size:1.12rem; line-height:1.5; color:var(--ink);
}
.testi-card figcaption{display:flex; align-items:center; gap:10px}
.testi-av{
  flex:0 0 42px; width:42px; height:42px; border-radius:50%; background:var(--wine);
  color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-size:1.15rem;
}
.testi-meta{display:flex; flex-direction:column; line-height:1.3; min-width:0}
.testi-meta b{font-size:.92rem; color:var(--ink)}
.testi-meta small{font-size:.78rem; color:var(--ink-soft)}

/* ---------- Chips de categorias (Seção 07) ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:24px 0}
.chip{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; font-size:.9rem; color:var(--ink);
  box-shadow:0 8px 18px -16px rgba(58,46,42,.55);
}

/* ---------- Bloco de quebra de objeção ---------- */
.objection{background:var(--surface); border-left:4px solid var(--wine); border-radius:var(--radius); padding:24px 26px; margin-top:30px}
.objection h3{font-size:1.4rem; margin:0 0 12px}
.objection p:last-child{margin-bottom:0}

/* ---------- Popup de prova social ---------- */
.social-proof{
  position:fixed; left:18px; bottom:18px; z-index:60;
  width:min(320px, calc(100vw - 36px)); pointer-events:none;
}
.sp-card{
  position:relative; display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--wine);
  border-radius:14px; padding:12px 30px 12px 14px; box-shadow:var(--shadow);
  pointer-events:auto; opacity:0; transform:translateY(16px);
  transition:transform .45s cubic-bezier(.16,.84,.44,1), opacity .45s ease;
}
.sp-card.sp-show{opacity:1; transform:translateY(0)}
.sp-icon{
  flex:0 0 38px; width:38px; height:38px; border-radius:50%;
  background:var(--surface); color:var(--wine); display:grid; place-items:center;
}
.sp-icon svg{width:19px; height:19px}
.sp-body{min-width:0; line-height:1.35}
.sp-name{
  margin:0; font-family:var(--font-ui); font-weight:600; font-size:.9rem;
  color:var(--ink); display:flex; align-items:center; gap:5px;
}
.sp-verified{color:var(--success); display:inline-flex; flex:0 0 auto}
.sp-verified svg{width:14px; height:14px}
.sp-text{margin:2px 0 0; font-size:.82rem; color:var(--ink-soft)}
.sp-text b{color:var(--wine); font-weight:600}
.sp-time{margin:3px 0 0; font-size:.72rem; font-weight:500; color:var(--gold); letter-spacing:.02em}
.sp-close{
  position:absolute; top:7px; right:8px; width:22px; height:22px; padding:0;
  border:none; background:transparent; color:var(--ink-soft);
  font-size:1.2rem; line-height:1; cursor:pointer; border-radius:50%;
}
.sp-close:hover{background:var(--surface); color:var(--ink)}

@media (max-width:480px){
  .social-proof{left:10px; bottom:10px; width:min(280px, calc(100vw - 20px))}
  .sp-card{gap:10px; padding:10px 28px 10px 12px}
  .sp-icon{flex-basis:32px; width:32px; height:32px}
  .sp-name{font-size:.85rem}
  .sp-text{font-size:.78rem}
}
/* movimento reduzido: sem deslize, apenas fade suave */
@media (prefers-reduced-motion:reduce){
  .sp-card{transform:none !important; transition:opacity .3s ease !important}
  .sp-card.sp-show{transform:none !important}
}

/* ---------- Telas bem pequenas (320–360px) ---------- */
@media (max-width:360px){
  .wrap{padding:0 16px}
  section{padding:38px 0}
  .bonus{padding:20px}
  .plan{padding:24px 18px}
  .guarantee{padding:28px 18px}
  .founder{padding:26px 18px}
  .trust{gap:6px 14px}
}

/* ---------- Desktop / telas maiores ---------- */
@media (min-width:600px){
  body{font-size:18px}
  section{padding:60px 0}
  .btn{width:auto; min-width:280px; margin:0 auto}
  .cta-block{display:flex; flex-direction:column; align-items:center}
}
/* Card do plano um pouco maior no PC, sempre centralizado */
@media (min-width:768px){
  .plans{max-width:520px}
  .plan{padding:40px 36px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
  .btn:hover{transform:none}
}