@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@400;700&display=swap');

:root{
  --whatsapp:#25D366;
  --base:#FFFFFF;        /* branco puro */
  --rose-soft:#F5E9E9;   /* destaque suave (CTA) */
  --nude:#E0D2C8;        /* suporte (footer) */
  --accent:#B76E79;      /* ouro rosé */
  --text:#5C5454;        /* cinza quente */
  --shadow: 0 10px 30px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--base);
  color:var(--text);
  font-family:'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2{font-family:'Playfair Display', serif; color:var(--accent); font-weight:700; line-height:1.2; margin:0 0 .6rem}
.container{max-width:960px;margin:0 auto;padding:0 1.25rem}

/* ===== HERO (imagem intacta + laterais preenchidas com blur) ===== */
.hero-ambient{position:relative; isolation:isolate; padding:10px 0 0; background:var(--base)}
.hero-ambient::before{
  content:""; position:absolute; inset:0;
  background:url('../img/ImagemBanner.png') center/cover no-repeat;
  filter: blur(26px) saturate(1.05) brightness(.98);
  transform: scale(1.06);
  z-index:0;
}
.hero-inner{position:relative; z-index:1; display:flex; justify-content:center; padding:0 20px}
.hero-img{
  display:block; width:auto; height:auto;
  max-width:min(1100px,100%); max-height: clamp(180px, 52vh, 520px);
  border-radius:16px; box-shadow: var(--shadow);
}

/* ===== CTA elegante em rosa suave ===== */
.section, .cta, .plans{ text-align:center }
.cta{
  margin:2.2rem auto 2.6rem;
  background: var(--rose-soft);
  border-radius:16px;
  padding: 1.6rem 1.2rem;
}
.kicker{ text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; font-weight:700; color:var(--accent) }
.headline{ font-size:1.8rem; margin:.3rem 0 .6rem }
.subtext{ color:var(--text); opacity:.9; margin:0; font-size:1rem }

/* ===== Botões (ouro rosé) ===== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: .95rem 2rem; border-radius:999px; text-decoration:none;
  font-weight:700; font-size:1.02rem; letter-spacing:.02em;
  transition:.25s ease; box-shadow:0 10px 26px rgba(183,110,121,.20);
}
.btn-primary{ background:var(--accent); color:#fff; border:1px solid rgba(0,0,0,.02) }
.btn-primary:hover{ transform:translateY(-1px); filter:saturate(1.05) }
.btn svg{ width:20px; height:20px; stroke:#fff; stroke-width:1.6; fill:none }

/* ===== Cards de planos ===== */
section.section{ padding: 2.2rem 0 }
.section h2{ font-size:1.4rem; opacity:.95 }
.plans-grid{ display:grid; grid-template-columns:1fr; gap:1.1rem; margin:1.6rem 0 0 }
@media(min-width:900px){ .plans-grid{ grid-template-columns:repeat(3,1fr) } }
.plan{
  background:var(--base); border:1px solid rgba(0,0,0,.06);
  border-radius:16px; box-shadow: var(--shadow);
  padding:1.4rem 1.2rem;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.badge{ font-size:.72rem; font-weight:700; padding:.35rem .7rem; border-radius:999px; background:rgba(183,110,121,.10); color:var(--accent); letter-spacing:.04em }
.badge.hot{ background:rgba(183,110,121,.18) }
.badge.best{ background:rgba(183,110,121,.24) }
.plan h3{ margin:.2rem 0 0; font-family:'Playfair Display', serif; color:var(--accent); font-size:1.2rem }
.price{ font-size:2rem; font-weight:700; color:var(--text) }
.price small{ font-size:.8rem; opacity:.7; font-weight:700 }
.features{ list-style:none; padding:0; margin:.2rem 0 1.1rem; color:var(--text) }
.features li{ margin:.3rem 0; display:flex; align-items:center; gap:.5rem; justify-content:center; opacity:.95 }
.features svg{ width:18px; height:18px; stroke:var(--accent); stroke-width:1.6; fill:none }
.plan .btn{ width:100%; justify-content:center }

/* ===== Rodapé em nude/bege ===== */
footer{
  margin-top:2rem;
  background: var(--nude);
  color: var(--text);
  text-align:center;
  padding: 1.6rem 1rem;
  font-size:.92rem;
  border-top:1px solid rgba(0,0,0,.06);
}
/* ===== Botão de planos em verde WhatsApp ===== */
.btn-whatsapp{ background: var(--whatsapp); color:#fff; border:1px solid rgba(0,0,0,.02) }
.btn-whatsapp:hover{ transform:translateY(-1px); filter:saturate(1.05) }