/* =========================
   Código Mestre — style.min.css (versão limpa e estável)
   FOCO: CSS sem conflitos (remove duplicações/overrides)
   ========================= */

:root{
  --bg:#FAF9F6;
  --ink:#222;
  --muted:#6b6b72;
  --card:#fff;
  --stroke:#ECE9E2;
  --gold:#c8a048;
  --btn:#fae7a1;
  --btnb:#c79f3b;

  /* altura do banner (se você usar .top-banner) */
  --banner-h: clamp(110px, 11vw, 160px);

  /* altura da barra CTA (se existir sticky/fixed no final) */
  --cta-bar-h: 0px;
}

html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  overflow-x:hidden;
}

body{ padding-top: 0 !important; }

img{ max-width:100%; height:auto; }
a{ text-decoration:none; color:var(--ink); }

.container{
  max-width:960px;
  margin:0 auto;
  padding:0 16px;
  box-sizing:border-box;
}

h1,h2,h3{
  margin:0 0 12px;
  font-weight:500;
  line-height:1.2;
}

h1{ font-size:36px; }
p{ margin:0 0 14px; }

/* =========================
   BANNER TOPO (OPCIONAL)
   - USE APENAS se existir .top-banner no HTML
   - Sem duplicações e SEM !important
   ========================= */
.top-banner{
  position: relative;
  background: transparent;
  border-bottom: 1px solid var(--stroke);
  padding: 0;
  height: var(--banner-h);
  overflow: hidden;
}

.top-banner img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Desktop bem grande: um pouco mais baixo */
@media (min-width: 1200px){
  :root{ --banner-h: 140px; }
}

/* Mobile: levemente mais alto (sem comer a dobra) */
@media (max-width: 520px){
  :root{ --banner-h: 150px; }
}

/* =========================
   HEADER / HERO
   ========================= */
.header{
  padding:24px 0 14px;
  text-align:center;
  background:linear-gradient(180deg,#fff,transparent);
}

.lead{
  font-size:18px;
  color:var(--muted);
  margin:4px auto 2px;
}

.header .lead.reveal{
  margin:2px auto 4px;
  line-height:1.35;
}

/* Seção hero (se existir) — evita “vão” excessivo */
.hero{
  padding-top: 8px;
  margin-top: 0;
}

.hero-h1{
  margin-top: 8px;
}

/* =========================
   BOTÕES
   ========================= */
.btn{
  display:inline-block;
  padding:14px 20px;
  border-radius:12px;
  background:var(--btn);
  border:2px solid var(--btnb);
  font-weight:700;
  color:#000;
  transition:transform .18s,box-shadow .18s;
  max-width:100%;
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}

/* =========================
   SEÇÕES / CARDS
   ========================= */
.section{
  padding:32px 0;
  border-bottom:1px solid var(--stroke);
}

main > .section:first-of-type{
  padding-top:10px;
}

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:20px;
}

.columns-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

.price{
  font-size:34px;
  font-weight:900;
  color:var(--gold);
}

.footer{
  padding:24px 0;
  color:var(--muted);
  text-align:center;
  font-size:13px;
}

/* =========================
   ANIMAÇÕES
   ========================= */
@keyframes a{
  from{opacity:0;transform:translateY(18px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes b{
  from{opacity:0}
  to{opacity:1}
}

.reveal{
  opacity:0;
  transform:translateY(18px);
}
.in-view{ animation:a .65s ease forwards; }

.hero-title-anim{
  opacity:0;
  animation:b .5s ease .1s forwards;
}

/* =========================
   CTA fixo inferior (SE USAR)
   - mantém, mas sem forçar se você usa sticky no HTML
   ========================= */
.cta-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:#fff;
  border-top:1px solid var(--stroke);
  padding:12px 16px;
  display:flex;
  justify-content:center;
  gap:10px;
  transform:translateY(100%);
  transition:.35s;
}

.cta-bar.show{ transform:translateY(0); }

/* Evita o conteúdo ficar “por baixo” de CTA fixa/sticky */
main{ padding-bottom: 110px; }

/* =========================
   Premium trust row
   ========================= */
.premium-trust{
  max-width: 900px;
  margin: 28px auto;
  padding: 22px 24px;
  background: linear-gradient(180deg,#ffffff,#f5f2ea);
  border: 1px solid #ECE9E2;
  border-radius: 14px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  text-align:center;
  box-shadow: 0 8px 25px rgba(0,0,0,.05);
}

.premium-item{
  font-size:15px;
  color:#6b6b72;
}

.premium-item strong{
  display:block;
  margin-top:4px;
  font-size:16px;
  color:#222;
  font-weight:700;
}

.premium-divider{
  width:1px;
  height:48px;
  background:#ECE9E2;
}

/* Responsivo: premium trust */
@media (max-width: 768px){
  .premium-trust{
    flex-direction:column;
    gap:16px;
  }
  .premium-divider{
    width:60%;
    height:1px;
  }
}

/* =========================
   Depoimentos
   ========================= */
.testimonials-section{
  padding:60px 16px;
  text-align:center;
}

.section-title{ margin-bottom:40px; }

.testimonial-card{
  max-width:720px;
  margin:0 auto 32px auto;
  padding:24px;
  border-radius:16px;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--stroke);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  text-align:center;
}

.testimonial-title{
  font-size:18px;
  font-weight:600;
  margin-bottom:6px;
}

.testimonial-sub{
  font-size:14px;
  opacity:0.8;
  margin-bottom:18px;
}

.testimonial-card audio{
  width:100%;
  border-radius:10px;
}

.microcopy{
  margin-top:20px;
  font-size:12px;
  opacity:0.7;
}

.cta-wrapper{
  margin-top:24px;
  display:flex;
  justify-content:center;
}

/* =========================
   FIX: CTA buttons (Firefox/mobile)
   ========================= */
@media (max-width: 820px){
  .btn{
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
  }

  .cta-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    width:100% !important;
  }

  .cta-row .btn,
  .center a.btn,
  .card a.btn{
    width: 100% !important;
    max-width: 520px !important;
  }
}

/* =========================
   WhatsApp fixo
   - fica acima de CTA bar se existir (usa var --cta-bar-h)
   ========================= */
.whatsapp-fixo{
  position: fixed;
  right: 20px;
  bottom: calc(var(--cta-bar-h, 0px) + 14px);
  z-index: 99999;

  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  padding: 10px 16px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 14px 35px rgba(0,0,0,.25);
  transition: transform .2s ease;
}

/* estado inicial: escondido */
.whatsapp-fixo.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

/* quando liberar */
.whatsapp-fixo.is-hidden.is-show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}

/* =========================
   Rotator
   ========================= */
.impact-rotator{
  width:100%;
  max-width:720px;
  margin:14px auto;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
}
.impact-word{
  display:inline-block;
  transition:opacity 220ms ease;
  opacity:1;
}
.impact-word.is-fading{ opacity:0; }

/* =========================
   SVG overflow (se existir algum rodapé com svg)
   ========================= */
.footer-pro svg{
  overflow: visible;
}


/* Oculta botão WhatsApp completamente */
.whatsapp-fixo{
  display: none !important;
}