/* =============================================================
   Dra. Viviane Franco — Nutrologia e Clínica
   Dark premium / gold, futuristic-elegant design system
   ============================================================= */

:root{
  /* Palette */
  --bg-deep:      #120c09;
  --bg-deep-2:    #1c130d;
  --bg-panel:     #241a12;
  --cream:        #f6efe1;
  --cream-dim:    #e7dcc6;
  --taupe:        #cbb99f;
  --taupe-dim:    #9c8b74;
  --brown:        #4a3324;
  --brown-deep:   #2c1e14;

  --gold-1:       #f3d99a;
  --gold-2:       #d9ab5c;
  --gold-3:       #a97a3b;
  --gold-grad:    linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 50%, var(--gold-3) 100%);
  --gold-grad-soft: linear-gradient(135deg, rgba(243,217,154,.18), rgba(169,122,59,.06));

  --line-dark:    rgba(246,239,225,.12);
  --line-light:   rgba(74,51,36,.14);

  --shadow-gold:  0 10px 40px -10px rgba(217,171,92,.45);
  --shadow-deep:  0 30px 60px -20px rgba(0,0,0,.55);

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  --container: 1180px;
  --radius: 22px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-deep);
  color:var(--cream);
  font-family:var(--font-sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:500; margin:0; color:var(--cream); }
p{ margin:0; }
.container{ max-width:var(--container); margin:0 auto; padding:0 28px; position:relative; z-index:1; }
.hide-mobile{ display:inline; }

/* ---------- texture / grain ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; z-index:1;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(217,171,92,.10) 0%, rgba(217,171,92,0) 70%);
  transform:translate(-50%,-50%); transition:opacity .4s ease;
  will-change:transform; opacity:0;
}
@media(hover:hover){ .cursor-glow.active{ opacity:1; } }

/* ---------- decorative orbs ---------- */
.hero-orbs{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; }
.orb-1{ width:460px; height:460px; top:-140px; right:-100px; background:radial-gradient(circle, rgba(217,171,92,.55), transparent 70%); }
.orb-2{ width:380px; height:380px; bottom:-160px; left:-120px; background:radial-gradient(circle, rgba(169,122,59,.4), transparent 70%); }
.orb-3{ width:260px; height:260px; top:35%; left:42%; background:radial-gradient(circle, rgba(246,239,225,.12), transparent 70%); }
.orb-soft{ opacity:.28; }

/* ================= HEADER ================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:background .4s ease, padding .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  padding:12px 0;
  background:rgba(18,12,9,.82);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line-dark);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-logo{ height:34px; width:auto; transition:transform .3s ease; }
.brand:hover .brand-logo{ transform:scale(1.03); }

.nav-desktop{ display:flex; gap:36px; }
.nav-desktop a{
  font-size:.92rem; letter-spacing:.03em; color:var(--cream-dim);
  position:relative; padding:6px 0; transition:color .3s ease;
}
.nav-desktop a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold-grad); transition:width .35s ease;
}
.nav-desktop a:hover{ color:var(--cream); }
.nav-desktop a:hover::after{ width:100%; }

.header-cta{ display:flex; align-items:center; gap:16px; }
.crm-badge{
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-1); border:1px solid rgba(217,171,92,.4);
  padding:6px 12px; border-radius:100px; white-space:nowrap;
}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; cursor:pointer; z-index:110;
}
.nav-toggle span{ width:100%; height:1.5px; background:var(--cream); transition:.3s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.nav-mobile{
  position:fixed; inset:0 0 0 auto; width:min(78vw,340px); height:100vh;
  background:var(--bg-deep-2); border-left:1px solid var(--line-dark);
  display:flex; flex-direction:column; gap:26px; padding:110px 34px 40px;
  transform:translateX(100%); transition:transform .45s cubic-bezier(.77,0,.18,1);
  z-index:105;
}
.nav-mobile.open{ transform:translateX(0); }
.nav-mobile a{ font-size:1.15rem; color:var(--cream-dim); }
.nav-mobile a.btn{ margin-top:12px; text-align:center; }

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:var(--font-sans); font-size:.95rem; letter-spacing:.02em;
  padding:14px 26px; border-radius:100px; border:1px solid transparent;
  cursor:pointer; transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  white-space:nowrap;
}
.btn-gold{
  background:var(--gold-grad); color:#2a1c0f; font-weight:500;
  box-shadow:var(--shadow-gold);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 46px -10px rgba(217,171,92,.6); }
.btn-gold svg{ transition:transform .3s ease; }
.btn-gold:hover svg{ transform:translateX(3px); }
.btn-sm{ padding:9px 20px; font-size:.82rem; }
.btn-lg{ padding:17px 34px; font-size:1rem; }

/* ================= HERO ================= */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:150px 0 100px; overflow:hidden;
  background:
    radial-gradient(ellipse 90% 60% at 80% 0%, rgba(217,171,92,.14), transparent 60%),
    linear-gradient(160deg, var(--bg-deep) 0%, var(--bg-deep-2) 55%, var(--brown-deep) 100%);
}
.hero-grid-lines{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(246,239,225,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,239,225,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 60% 30%, black, transparent 75%);
}
.hero-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.82rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-1); margin-bottom:22px;
}
.eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 12px 2px rgba(217,171,92,.7); }
.hero h1{
  font-size:clamp(2.4rem, 4.2vw, 3.6rem); line-height:1.14; letter-spacing:-.01em;
  color:var(--cream); margin-bottom:26px;
}
.hero h1 em{ font-style:italic; color:var(--gold-1); }
.hero-lead{ font-size:1.05rem; color:var(--taupe); max-width:520px; margin-bottom:16px; }
.hero-lead strong{ color:var(--cream); font-weight:500; }
.hero-actions{ margin-top:34px; }

.hero-visual{ position:relative; display:flex; justify-content:center; }
.hero-visual-mobile{ display:none; }
.hero-frame{
  position:relative; width:100%; max-width:420px; aspect-ratio:4/5;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-deep);
}
.hero-frame img{ width:100%; height:100%; object-fit:cover; }
.hero-frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(217,171,92,.16), transparent 40%, rgba(18,12,9,.35) 100%);
  pointer-events:none;
}
.hero-frame-ring{
  position:absolute; inset:-16px; border:1px solid rgba(217,171,92,.35);
  border-radius:calc(var(--radius) + 14px); pointer-events:none;
}

.scroll-hint{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  width:26px; height:42px; border:1px solid rgba(246,239,225,.35); border-radius:100px;
  display:flex; justify-content:center; padding-top:8px; z-index:2;
}
.scroll-hint span{
  width:4px; height:8px; border-radius:2px; background:var(--gold-1);
  animation:scrollDown 1.8s ease infinite;
}
@keyframes scrollDown{
  0%{ transform:translateY(0); opacity:1; }
  70%{ opacity:0; }
  100%{ transform:translateY(14px); opacity:0; }
}

/* ================= TICKER ================= */
.ticker{
  background:var(--bg-panel); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  overflow:hidden; padding:16px 0; position:relative; z-index:2;
}
.ticker-track{
  display:flex; gap:18px; width:max-content;
  animation:tickerScroll 32s linear infinite;
  font-family:var(--font-serif); font-style:italic; font-size:1.15rem;
  color:var(--cream-dim); white-space:nowrap;
}
.ticker-track .dot{ color:var(--gold-2); font-style:normal; font-size:.8rem; }
@keyframes tickerScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ================= SECTIONS ================= */
.section{ position:relative; padding:120px 0; overflow:hidden; }
.section-light{ background:var(--cream); color:var(--brown); }
.section-light h1, .section-light h2, .section-light h3{ color:var(--brown-deep); }
.section-dark{ background:linear-gradient(180deg, var(--bg-deep-2), var(--bg-deep)); }

.kicker{
  text-align:center; max-width:760px; margin:0 auto 18px;
  font-family:var(--font-serif); font-style:italic; font-size:1.35rem;
  color:var(--gold-3);
}
.kicker.centered{ margin-bottom:70px; font-size:1.5rem; color:var(--gold-3); }
.kicker strong{ font-style:normal; font-weight:600; }

.section-title{
  text-align:center; font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  max-width:820px; margin:0 auto 22px; line-height:1.25;
}
.section-title.light{ color:var(--cream); }
.section-sub{
  text-align:center; max-width:640px; margin:0 auto 56px;
  font-size:1.05rem; color:var(--taupe-dim);
}
.section-sub.light{ color:var(--taupe); }
.section-light .section-sub{ color:#6b5b47; }
.section-sub strong{ color:var(--brown-deep); font-weight:500; }
.section-dark .section-sub strong{ color:var(--cream); }

/* ---- check list ---- */
.check-list{ max-width:820px; margin:0 auto; }
.check-list li{
  display:flex; align-items:flex-start; gap:18px;
  padding:22px 10px; border-bottom:1px solid var(--line-light);
  font-size:1.08rem; color:#5a4a38; transition:padding-left .3s ease, background .3s ease;
}
.check-list li:first-child{ border-top:1px solid var(--line-light); }
.check-list li:hover{ padding-left:14px; background:rgba(169,122,59,.06); }
.check-list li strong{ color:var(--brown-deep); font-weight:600; }
.check-icon{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-grad); color:#2a1c0f; font-size:.85rem; font-weight:700;
  box-shadow:0 6px 18px -6px rgba(169,122,59,.6);
}
.closing-line{
  text-align:center; margin-top:56px; font-family:var(--font-serif);
  font-size:1.8rem; color:var(--brown-deep);
}

/* ---- feature cards ---- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:20px; }
.feature-card{
  position:relative; padding:44px 32px; border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(246,239,225,.06), rgba(246,239,225,.015));
  border:1px solid var(--line-dark); backdrop-filter:blur(6px);
  transition:transform .4s ease, border-color .4s ease, background .4s ease;
}
.feature-card:hover{
  transform:translateY(-8px);
  border-color:rgba(217,171,92,.5);
  background:linear-gradient(160deg, rgba(246,239,225,.09), rgba(246,239,225,.02));
}
.feature-star{
  display:inline-flex; width:46px; height:46px; border-radius:50%; margin-bottom:22px;
  align-items:center; justify-content:center; font-size:1.1rem; color:var(--gold-1);
  border:1px solid rgba(217,171,92,.4); background:rgba(217,171,92,.08);
}
.feature-card h3{ font-size:1.35rem; color:var(--cream); margin-bottom:12px; }
.feature-card p{ color:var(--taupe); font-size:.98rem; }

/* ---- about ---- */
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center; }
.about-visual{ position:relative; }
.about-frame{
  border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 60px -25px rgba(74,51,36,.4);
}
.about-frame img{ width:100%; height:100%; object-fit:cover; }

.about-gallery{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:16px;
  aspect-ratio:4/5;
}
.about-gallery-item{
  border-radius:16px; overflow:hidden; box-shadow:0 20px 40px -20px rgba(74,51,36,.45);
}
.about-gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.about-gallery-item:hover img{ transform:scale(1.08); }
.about-badge{
  position:absolute; bottom:-26px; right:-18px;
  background:var(--brown-deep); color:var(--gold-1);
  padding:16px 22px; border-radius:16px; text-align:center;
  box-shadow:var(--shadow-deep);
  display:flex; flex-direction:column; gap:2px;
}
.about-badge span{ font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); }
.about-badge strong{ font-family:var(--font-serif); font-size:1.5rem; }

.about-copy h2{ font-size:clamp(2rem,3.4vw,2.6rem); margin-bottom:26px; color:var(--brown-deep); }
.about-copy p{ color:#5a4a38; font-size:1.05rem; margin-bottom:18px; }
.about-copy strong{ color:var(--brown-deep); font-weight:600; }

/* ================= CTA FINAL ================= */
.cta-final{ padding:0; min-height:640px; display:flex; align-items:center; }
.cta-bg{ position:absolute; inset:0; z-index:0; }
.cta-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.cta-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(18,12,9,.94) 0%, rgba(18,12,9,.78) 46%, rgba(18,12,9,.35) 100%);
}
.cta-inner{ padding:140px 0; }
.cta-copy{ max-width:560px; }
.cta-copy h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); color:var(--cream); margin-bottom:22px; line-height:1.28; }
.cta-copy p{ color:var(--taupe); font-size:1.08rem; margin-bottom:34px; }
.cta-copy em{ color:var(--gold-1); font-style:italic; }
.cta-copy strong{ color:var(--cream); font-weight:500; }

/* ================= FOOTER ================= */
.site-footer{ position:relative; background:var(--bg-deep-2); border-top:1px solid var(--line-dark); overflow:hidden; padding-top:90px; }
.footer-inner{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:50px; padding-bottom:60px;
}
.footer-logo{ height:32px; margin-bottom:18px; }
.footer-brand p{ color:var(--taupe-dim); font-size:.92rem; max-width:280px; margin-bottom:20px; }
.footer-col h4{ font-family:var(--font-sans); font-weight:500; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-1); margin-bottom:20px; }
.footer-col a, .footer-col p{ display:block; color:var(--taupe); font-size:.92rem; margin-bottom:13px; transition:color .3s ease; }
.footer-col a:hover{ color:var(--gold-1); }
.footer-address{ line-height:1.7; }
.footer-bottom{ border-top:1px solid var(--line-dark); padding:22px 0; }
.footer-bottom-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; color:var(--taupe-dim); }

/* ================= WHATSAPP FAB ================= */
.whatsapp-fab{
  position:fixed; bottom:26px; right:26px; z-index:90;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transition:transform .3s ease;
}
.whatsapp-fab::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.55); animation:pulseRing 2.4s ease-out infinite;
}
.whatsapp-fab:hover{ transform:scale(1.08); }
@keyframes pulseRing{
  0%{ transform:scale(1); opacity:.8; }
  100%{ transform:scale(1.6); opacity:0; }
}

/* ================= REVEAL ANIMATION ================= */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }

/* ================= RESPONSIVE ================= */
@media(max-width:1024px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ display:none; }
  .hero-visual-mobile{ display:flex; justify-content:center; max-width:340px; margin:28px auto; }
  .about-grid{ grid-template-columns:1fr; gap:80px; }
  .about-visual{ max-width:380px; margin:0 auto; }
  .footer-inner{ grid-template-columns:1fr 1fr; row-gap:50px; }
}
@media(max-width:840px){
  .nav-desktop, .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .card-grid{ grid-template-columns:1fr; }
  .hero{ min-height:auto; align-items:flex-start; padding-top:130px; }
  .scroll-hint{ display:none; }
  .cta-inner{ padding:100px 0; }
}
@media(max-width:600px){
  .container{ padding:0 26px; }
  .hero{ padding-top:112px; padding-bottom:70px; }
  .hero h1{ font-size:2.1rem; margin-bottom:20px; }
  .hero-lead{ margin-bottom:12px; }
  .hero-actions{ margin-top:26px; }
  .hero-visual-mobile{ max-width:220px; margin:22px auto; }
  .section{ padding:88px 0; }
  .footer-inner{ grid-template-columns:1fr; }
  .footer-bottom-inner{ flex-direction:column; text-align:center; }
  .hide-mobile{ display:none; }
  .cta-copy{ max-width:100%; }
  .about-badge{ right:0; bottom:-20px; }
}