/* ============================================================
   Camila Reberte, Site Institucional
   Paleta herdada da LP do Guia da Gestação Segura, com fundo
   mais claro (--cream-page) para diferenciar site de produto.
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;background:#FCF9F1;color:#3A3A30;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
b,strong{font-weight:600}
p{margin:0 0 14px 0;line-height:1.8}
ul{list-style:none}

:root{
  --forest:#2A3D2E;
  --forest2:#1F2E22;
  --forest-soft:#3A5240;
  --gold:#D8B26E;
  --gold2:#E8C888;
  --gold-dark:#C0964C;
  --cream:#F5EFE2;        /* tom da LP (produto) */
  --cream-page:#FCF9F1;   /* tom mais claro do site institucional */
  --cream2:#EDE4D2;
  --cream-card:#FFFFFF;
  --sage:#8BA888;
  --text:#3A3A30;
  --subtle:#6E6A5C;
  --white:#fff;
}

.container{width:100%;max-width:1080px;margin:0 auto;padding:0 24px}
.container--narrow{max-width:760px}
.text-center{text-align:center}
.hidden{display:none!important}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:500}
em{font-style:italic;color:var(--gold-dark)}

/* ═══════ ANIMAÇÕES ═══════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes leafSway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(2.5deg)}}
@keyframes ctaPulse{0%,100%{box-shadow:0 8px 26px rgba(191,155,90,.28)}50%{box-shadow:0 10px 40px rgba(191,155,90,.5)}}
@keyframes shine{0%{background-position:-200% center}100%{background-position:200% center}}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.hero-anim{opacity:0;animation:fadeUp .8s ease forwards}
.leaf-branch g{animation:leafSway 9s ease-in-out infinite;transform-origin:50% 20%}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-anim{opacity:1;animation:none}
  .leaf-branch g,.btn-cta{animation:none!important}
  html{scroll-behavior:auto}
}

/* ═══════ HEADER / NAV ═══════ */
#site-header{position:sticky;top:0;z-index:50;background:rgba(252,249,241,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(191,155,90,.18);transition:box-shadow .3s}
#site-header.scrolled{box-shadow:0 4px 20px rgba(42,61,46,.06)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1080px;margin:0 auto}
.logo{font-family:'Fraunces',serif;font-weight:600;font-size:20px;color:var(--forest);letter-spacing:.3px}
.logo em{font-style:italic;color:var(--gold-dark)}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--text);position:relative;padding:4px 0}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold-dark);transition:width .25s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--forest)}
.nav-cta{background:var(--forest);color:var(--gold2)!important;padding:11px 22px;border-radius:30px;font-weight:600!important;font-size:13.5px!important}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--forest2)}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;z-index:60}
.menu-toggle span{width:24px;height:2px;background:var(--forest);border-radius:2px;transition:.3s}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  .menu-toggle{display:flex}
  .nav-links{position:fixed;top:0;right:-100%;height:100vh;width:min(320px,80vw);background:var(--cream-page);flex-direction:column;justify-content:center;gap:28px;transition:right .35s ease;box-shadow:-10px 0 30px rgba(0,0,0,.08)}
  .nav-links.open{right:0}
  .nav-cta{margin-top:8px}
}

/* ═══════ badges / divisores ═══════ */
.badge-pill{display:inline-block;background:var(--gold);color:var(--forest2);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:8px 20px;border-radius:30px}
.badge-forest{display:inline-block;background:var(--forest);color:var(--gold2);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:8px 20px;border-radius:30px}
.divisor{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 26px}
.divisor::before,.divisor::after{content:'';height:1px;width:48px;background:var(--gold)}
.divisor svg{width:16px;height:16px;color:var(--gold)}

/* ═══════ botões ═══════ */
.btn-cta{display:inline-block;background:var(--gold);color:var(--forest2);font-family:'Poppins',sans-serif;font-size:16px;font-weight:600;letter-spacing:.4px;padding:18px 38px;border-radius:40px;cursor:pointer;transition:background .25s,transform .2s,box-shadow .25s;border:none;text-align:center;box-shadow:0 8px 26px rgba(191,155,90,.28);animation:ctaPulse 2.8s ease-in-out infinite}
.btn-cta:hover{background:var(--gold-dark);color:#fff;transform:translateY(-3px) scale(1.02);box-shadow:0 14px 32px rgba(160,126,62,.4);animation-play-state:paused}
.btn-cta--full{display:block;width:100%}
.btn-cta--green{background:var(--forest);color:var(--gold2);animation:none}
.btn-cta--green:hover{background:var(--forest2);color:#fff}
.btn-outline{display:inline-block;border:1.5px solid var(--forest);color:var(--forest);font-weight:600;font-size:15px;padding:14px 30px;border-radius:40px;transition:.25s}
.btn-outline:hover{background:var(--forest);color:var(--gold2)}

/* ═══════ folhagem decorativa ═══════ */
.leaf-branch{position:absolute;pointer-events:none;opacity:.85;z-index:0}

/* ═══════ seções genéricas ═══════ */
section{padding:88px 24px;position:relative}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold-dark);margin-bottom:14px;display:block}
.section-title{font-size:clamp(28px,4vw,42px);color:var(--forest);line-height:1.25;margin-bottom:18px}
.section-lead{font-size:17px;color:var(--subtle);max-width:640px}
.mx-auto{margin-left:auto;margin-right:auto}

.sec-num{width:46px;height:46px;border-radius:50%;background:var(--forest);color:var(--gold2);font-family:'Fraunces',serif;font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.check-list li{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;font-size:16px;line-height:1.6}
.check-list li .ic{color:var(--gold-dark);flex-shrink:0;margin-top:2px;width:20px;height:20px}

/* cards */
.card{background:var(--cream-card);border-radius:20px;padding:32px;box-shadow:0 6px 28px rgba(43,38,32,.06)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:860px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr;gap:32px}}

/* FAQ */
details{border-bottom:1px solid rgba(191,155,90,.3)}
details:last-child{border-bottom:none}
summary{padding:22px 48px 22px 0;font-size:16px;font-weight:500;color:var(--forest);cursor:pointer;position:relative;list-style:none;transition:color .2s}
summary:hover{color:var(--gold-dark)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--gold-dark);transition:transform .25s}
details[open] summary::after{content:'\2212'}
.faq-answer{padding:0 0 22px 0;font-size:15px;color:var(--subtle);line-height:1.8}

/* ═══════ blog ═══════ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:48px}
@media(max-width:860px){.blog-grid{grid-template-columns:1fr}}
.post-card{background:var(--cream-card);border-radius:20px;overflow:hidden;box-shadow:0 6px 28px rgba(43,38,32,.06);transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(43,38,32,.12)}
.post-card img{height:200px;object-fit:cover}
.post-card-body{padding:24px;display:flex;flex-direction:column;flex:1}
.post-tag{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold-dark);margin-bottom:10px}
.post-title{font-family:'Fraunces',serif;font-size:19px;color:var(--forest);line-height:1.35;margin-bottom:10px}
.post-excerpt{font-size:14.5px;color:var(--subtle);flex:1;margin-bottom:16px}
.post-read{font-size:13.5px;font-weight:600;color:var(--forest);display:flex;align-items:center;gap:6px}

/* artigo individual */
.article-hero{background:linear-gradient(160deg,var(--cream-page) 0%,var(--cream2) 100%);padding:60px 24px 40px;text-align:center}
.article-meta{font-size:13.5px;color:var(--subtle);margin-top:14px}
.article-body{max-width:720px;margin:0 auto;padding:60px 24px;font-size:17px;line-height:1.85;color:var(--text)}
.article-body h2{font-size:26px;color:var(--forest);margin:40px 0 16px}
.article-body h3{font-size:20px;color:var(--forest-soft);margin:28px 0 12px}
.article-body ul{margin:0 0 20px 0}
.article-body ul li{position:relative;padding-left:26px;margin-bottom:10px;line-height:1.7}
.article-body ul li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--gold-dark)}
.article-callout{background:var(--cream2);border-left:4px solid var(--gold-dark);border-radius:12px;padding:22px 26px;margin:28px 0;font-style:italic;color:var(--forest-soft)}
.article-cta-box{background:var(--forest);border-radius:24px;padding:44px 36px;text-align:center;margin:48px 0;color:#fff}
.article-cta-box h3{color:var(--gold2);font-size:24px;margin-bottom:12px}
.article-cta-box p{color:rgba(255,255,255,.85);max-width:520px;margin:0 auto 22px}
.breadcrumb{font-size:13px;color:var(--subtle);margin-bottom:18px}
.breadcrumb a{color:var(--forest-soft);font-weight:600}

/* ═══════ hero reverso (foto à esquerda) ═══════ */
.grid-2--reverse{grid-template-columns:1fr 1fr}
.grid-2--reverse > *:first-child{order:1}
.grid-2--reverse > *:last-child{order:2}
@media(max-width:860px){.grid-2--reverse > *:first-child{order:2}.grid-2--reverse > *:last-child{order:1}}

/* ═══════ contador animado ═══════ */
.stat-num{display:inline-block}

/* ═══════ botões flutuantes (WhatsApp + Instagram) ═══════ */
.floating-actions{position:fixed;right:22px;bottom:24px;z-index:80;display:flex;flex-direction:column;align-items:center;gap:14px}
.floating-btn{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(42,61,46,.28);transition:transform .25s,box-shadow .25s;color:#fff}
.floating-btn:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 16px 36px rgba(42,61,46,.36)}
.floating-btn svg{width:28px;height:28px}
.floating-btn--whatsapp{background:#25D366;animation:floatPulse 3s ease-in-out infinite}
.floating-btn--instagram{background:radial-gradient(circle at 30% 110%,#ffdb8c 0%,#ee6a5b 30%,#c2185b 60%,#6a3a9a 100%);width:46px;height:46px}
.floating-btn--instagram svg{width:22px;height:22px}
@keyframes floatPulse{0%,100%{box-shadow:0 10px 28px rgba(37,211,102,.35)}50%{box-shadow:0 12px 38px rgba(37,211,102,.6)}}
@media(prefers-reduced-motion:reduce){.floating-btn--whatsapp{animation:none}}
@media(max-width:600px){.floating-actions{right:16px;bottom:16px}.floating-btn{width:50px;height:50px}.floating-btn--instagram{width:40px;height:40px}}

/* ═══════ voltar ao topo ═══════ */
.back-to-top{position:fixed;left:22px;bottom:24px;z-index:80;width:44px;height:44px;border-radius:50%;background:var(--forest);color:var(--gold2);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s;box-shadow:0 8px 20px rgba(42,61,46,.25)}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top svg{width:20px;height:20px}
@media(max-width:600px){.back-to-top{display:none}}

/* ═══════ cards de serviço ═══════ */
.service-card{background:var(--cream-card);border-radius:20px;padding:36px 32px;box-shadow:0 6px 28px rgba(43,38,32,.06);transition:transform .3s,box-shadow .3s}
.service-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(43,38,32,.12)}
.service-icon{width:52px;height:52px;border-radius:14px;background:var(--forest);color:var(--gold2);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.service-icon svg{width:26px;height:26px}

/* footer */
#site-footer{background:var(--forest2);color:rgba(255,255,255,.72);padding:60px 24px 30px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;max-width:1080px;margin:0 auto 40px}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr;gap:28px}}
.footer-logo{font-family:'Fraunces',serif;font-size:20px;color:var(--gold2);margin-bottom:12px}
.footer-col h4{font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold2);margin-bottom:16px}
.footer-col a,.footer-col li{display:block;font-size:14px;margin-bottom:10px;color:rgba(255,255,255,.72)}
.footer-col a:hover{color:var(--gold2)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;text-align:center;font-size:12.5px;max-width:1080px;margin:0 auto}