/*
  LevNutri — Design System Compartilhado
  Erika Pacheco · Nutricionista · CRN-25105262
  levnutri.com
*/

/* ── TOKENS ─────────────────────────────────────── */
:root {
  --cream:    #FAF7F2;
  --cream2:   #F3EDE3;
  --cream3:   #EBE3D6;
  --sage:     #4A6645;
  --sage-md:  #5A8A62;
  --sage-lt:  #B5CEAD;
  --sage-xs:  #E4EFE1;
  --terra:    #C97D5B;
  --terra-dk: #9A5535;
  --terra-lt: #EDD5C4;
  --terra-xs: #F9EBE3;
  --ink:      #2C2416;
  --ink-md:   #5C4E3A;
  --ink-lt:   #9C8E7C;
  --ink-xs:   #C4B8A8;
  --white:    #FFFFFF;
  --border:   rgba(44,36,22,.09);
  --ff-h:     'Cormorant Garamond', serif;
  --ff-b:     'DM Sans', sans-serif;
  --r-sm:     10px;
  --r-md:     18px;
  --r-lg:     24px;
  --r-pill:   50px;
  --sp-xs:    8px;
  --sp-s:     16px;
  --sp-m:     32px;
  --sp-l:     64px;
  --sp-xl:    96px;
}

/* ── RESET ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--ff-b);font-size:16px;line-height:1.75;color:var(--ink-md);background:var(--cream);overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* ── LAYOUT ─────────────────────────────────────── */
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 32px;}
.wrap-narrow{width:100%;max-width:740px;margin:0 auto;padding:0 32px;}

/* ── TIPOGRAFIA ─────────────────────────────────── */
.tag{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--terra);margin-bottom:14px;}
.h2{font-family:var(--ff-h);font-size:clamp(30px,4vw,48px);font-weight:600;line-height:1.2;color:var(--ink);margin-bottom:14px;}
.h2 em{font-style:italic;color:var(--terra);}
.lead{font-size:17px;font-weight:300;color:var(--ink-md);line-height:1.8;max-width:580px;}

/* ── NAVEGAÇÃO ─────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;background:rgba(250,247,242,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);transition:box-shadow .3s;}
.nav.scrolled{box-shadow:0 2px 20px rgba(44,36,22,.07);}
.nav-row{display:flex;align-items:center;justify-content:space-between;}
.nav-brand{display:flex;align-items:center;text-decoration:none;}
.nav-mark{width:36px;height:36px;border-radius:10px;background:var(--sage);display:flex;align-items:center;justify-content:center;font-family:var(--ff-h);font-size:17px;font-weight:700;color:var(--white);}
.nav-name{font-family:var(--ff-h);font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.nav-name span{color:var(--sage);}
.nav-logo-img{height:44px;width:auto;display:block;object-fit:contain;}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center;}
.nav-links a{font-size:14px;font-weight:400;color:var(--ink-md);transition:color .2s;}
.nav-links a:hover{color:var(--sage);}
.nav-links a.ativo{color:var(--sage);font-weight:500;}
.nav-cta{background:var(--terra)!important;color:var(--white)!important;padding:10px 22px!important;border-radius:var(--r-pill)!important;font-weight:500!important;font-size:13px!important;transition:background .2s!important;}
.nav-cta:hover{background:var(--terra-dk)!important;}
.nav-mobile-cta{display:none;background:var(--terra);color:var(--white);padding:9px 18px;border-radius:var(--r-pill);font-size:13px;font-weight:500;}

/* ── BOTÕES ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-b);font-size:15px;font-weight:500;padding:15px 30px;border-radius:var(--r-pill);border:none;cursor:pointer;text-decoration:none;transition:background .2s,transform .15s,box-shadow .2s;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--terra);color:var(--white);}
.btn-primary:hover{background:var(--terra-dk);box-shadow:0 8px 24px rgba(201,125,91,.3);}
.btn-sage{background:var(--sage);color:var(--white);}
.btn-sage:hover{background:#3a5234;box-shadow:0 8px 24px rgba(74,102,69,.25);}
.btn-white{background:var(--white);color:var(--sage);}
.btn-white:hover{background:var(--cream2);}
.btn-outline{background:transparent;color:var(--ink-md);border:1.5px solid var(--ink-xs);}
.btn-outline:hover{border-color:var(--ink-md);background:var(--cream2);}
.btn-outline-white{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.4);}
.btn-outline-white:hover{border-color:var(--white);background:rgba(255,255,255,.08);}
.btn-ghost{background:none;border:none;padding:15px 0;color:var(--ink-md);font-size:14px;font-weight:400;cursor:pointer;text-decoration:none;transition:color .2s;}
.btn-ghost:hover{color:var(--sage);transform:none;}

/* ── BARRA DE NÚMEROS (verde) ──────────────────── */
.numbar{background:var(--sage);padding:22px 0;}
.numbar-row{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;}
.numbar-item{display:flex;align-items:center;gap:12px;color:var(--white);}
.numbar-item strong{font-family:var(--ff-h);font-size:24px;font-weight:600;}
.numbar-item span{font-size:13px;opacity:.8;}

/* ── CABEÇALHO DE SEÇÃO CENTRALIZADO ────────────── */
.sec-head{text-align:center;margin-bottom:56px;}
.sec-head .lead{margin:0 auto;text-align:center;}

/* ── DEPOIMENTO ─────────────────────────────────── */
.depo-author{display:flex;align-items:center;gap:12px;}
.depo-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-h);font-size:17px;font-weight:600;flex-shrink:0;}
.depo-nome{font-size:14px;font-weight:500;color:var(--ink);display:block;}
.depo-cidade{font-size:12px;color:var(--ink-lt);}

/* ── SEÇÃO CTA VERDE FINAL ─────────────────────── */
/* Mesma estrutura da página emagrecimento (referência) */
.cta-band{background:var(--sage);padding:var(--sp-xl) 0;text-align:center;position:relative;overflow:hidden;}
.cta-band::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;}
.cta-band .tag{color:var(--sage-lt);}
.cta-band .h2{color:var(--white);}
.cta-band .h2 em{color:var(--sage-lt);}
.cta-band .lead{color:rgba(255,255,255,.72);margin:0 auto var(--sp-m);}
.cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;position:relative;}
.cta-micro{margin-top:20px;font-size:13px;color:rgba(255,255,255,.45);position:relative;}

/* ── WHATSAPP ───────────────────────────────────── */
.wpp-float{position:fixed;bottom:26px;right:26px;z-index:200;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(37,211,102,.38);transition:transform .2s;}
.wpp-float:hover{transform:scale(1.08);}
.wpp-float svg{width:26px;height:26px;}

/* ── RODAPÉ ─────────────────────────────────────── */
.footer{background:var(--ink);padding:52px 0;text-align:center;}
.footer-logo{font-family:var(--ff-h);font-size:22px;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:6px;}
.footer-logo span{color:var(--sage-lt);}
.footer p{font-size:13px;color:rgba(255,255,255,.38);line-height:1.9;}
.footer-links{display:flex;justify-content:center;gap:24px;margin-bottom:20px;flex-wrap:wrap;}
.footer-links a{font-size:13px;color:rgba(255,255,255,.45);transition:color .2s;}
.footer-links a:hover{color:rgba(255,255,255,.8);}

/* ── ANIMAÇÕES ──────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.anim-up{animation:fadeUp .8s ease both;}


/* ── MENU HAMBURGUER (mobile) ────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 200;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all .3s ease;
}
.nav-hamburger.aberto span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.aberto span:nth-child(2) { opacity: 0; }
.nav-hamburger.aberto span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Menu mobile overlay */
.menu-mobile {
  display: none;
  position: fixed;
  top: 72px;
  left: 0; right: 0;
  background: rgba(250,247,242,.98);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 24px 20px 32px;
  z-index: 99;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 8px 32px rgba(44,36,22,.08);
}
.menu-mobile.aberto { display: flex; }
.menu-mobile a {
  display: block;
  font-family: var(--ff-b);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-md);
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: color .2s;
}
.menu-mobile a:hover { color: var(--sage); }
.menu-mobile a.ativo { color: var(--sage); font-weight: 500; }
.menu-mobile a.menu-cta {
  margin-top: 20px;
  background: var(--terra);
  color: var(--white);
  border: none;
  border-radius: var(--r-pill);
  text-align: center;
  padding: 16px;
  font-weight: 500;
  font-size: 16px;
}
.menu-mobile a.menu-cta:hover { background: var(--terra-dk); }

@media(max-width:900px){
  .nav-hamburger { display: flex; }
  .nav-mobile-cta { display: none !important; }
}

/* ── RESPONSIVO ─────────────────────────────────── */
@media(max-width:900px){
  .nav-links{display:none;}
  .nav-mobile-cta{display:inline-flex;}
  .wrap,.wrap-narrow{padding:0 20px;}
  .numbar-row{flex-direction:column;gap:0;align-items:stretch;}
  .numbar-item{padding:10px 20px;width:100%;justify-content:center;}
  .numbar-item+.numbar-item{border-left:none;border-top:1px solid rgba(255,255,255,.15);}
  .numbar-item strong{font-size:18px;}
  .numbar-item span{font-size:12px;}
}
@media(max-width:600px){
  :root{--sp-xl:64px;--sp-l:40px;}
  .cta-btns{flex-direction:column;align-items:center;}
  .cta-btns a{width:100%;max-width:320px;justify-content:center;}
  .footer-links{gap:16px;}
  .h2{font-size:clamp(26px,7vw,36px);}
}