:root{
  --bg: #0A0A0A;
  --card: #141414;
  --card-2: #1a1a1a;
  --gold: #C9A84C;
  --gold-bright: #E4C676;
  --gold-deep: #8F7530;
  --gold-dim: #6b5a28;
  --cream: #F0E6CC;
  --cream-dim: #a69c86;
  --line: rgba(201,168,76,0.22);
  --line-strong: rgba(201,168,76,0.45);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background: var(--bg);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.55;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }

/* Custom cursor */
.cursor{
  position: fixed; top:0; left:0;
  width: 10px; height: 10px;
  border-radius:50%;
  background: var(--gold);
  box-shadow: 0 0 20px var(--gold);
  pointer-events:none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .25s, height .25s, background .25s;
}
.cursor.ring{
  position: fixed; top:0; left:0;
  width: 36px; height: 36px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: width .3s cubic-bezier(.2,.7,.3,1), height .3s cubic-bezier(.2,.7,.3,1), border-color .25s;
  mix-blend-mode: normal;
}
.cursor.hover{ width: 18px; height: 18px; background: var(--gold-bright);}
.cursor.ring.hover{ width: 58px; height: 58px; border-color: var(--gold-bright);}
@media (hover:none){ body{ cursor:auto; } .cursor{ display:none;} }

/* Grain */
body::before{
  content:""; position: fixed; inset:0;
  pointer-events:none; z-index: 80;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

.serif{ font-family:'Cormorant Garamond', serif;}
.italiana{ font-family:'Italiana', serif; letter-spacing: 0.14em;}
.eyebrow{
  font-family:'DM Sans', sans-serif;
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold);
  display:inline-flex; align-items:center; gap: 14px;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background: var(--gold); display:inline-block;
}

/* NAVBAR */
nav{
  position: fixed; top:0; left:0; right:0; z-index: 60;
  display:flex; align-items:center; justify-content: space-between;
  padding: 22px 56px;
  transition: background .35s ease, padding .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
nav.scrolled{
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(10px);
  padding: 14px 56px;
  border-bottom: 1px solid var(--line);
}
.nav-brand{ display:flex; align-items:center; gap: 14px;}
.brand-mark{
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 14px;
  overflow: hidden;
  background: #050403;
  border: 1px solid rgba(201,168,76,0.25);
  box-shadow: 0 0 0 1px rgba(201,168,76,0.08), inset 0 0 20px rgba(201,168,76,0.08);
}
.brand-logo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  display: block;
}
.nav-brand .brand-mark{ flex: 0 0 auto; }
.nav-links{ display:flex; gap: 36px; align-items:center;}
.nav-links a{
  text-decoration:none;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cream-dim);
  position: relative;
  transition: color .25s;
}
.nav-links a:hover{ color: var(--gold);}
.nav-links a::after{
  content:""; position: absolute; left: 0; bottom: -8px; height:1px; width: 0;
  background: var(--gold); transition: width .3s;
}
.nav-links a:hover::after{ width: 100%; }
.nav-cta{
  padding: 11px 22px; border: 1px solid var(--gold); color: var(--gold);
  background: transparent; text-decoration: none;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  transition: all .3s;
}
.nav-cta:hover{ background: var(--gold); color: var(--bg);}

/* HERO */
.hero{
  min-height: 100vh;
  position: relative;
  display:grid; place-items:center;
  padding: 140px 56px 80px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(201,168,76,0.09), transparent 60%),
    var(--bg);
}
#particles{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.hero-inner{
  position: relative; z-index: 3;
  text-align: center;
  max-width: 1200px; width: 100%;
}
.hero-kicker{
  display:flex; align-items:center; justify-content:center; gap: 18px;
  font-size: 13px; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 40px;
}
.hero-kicker span{ width: 40px; height: 1px; background: var(--gold); opacity: .6;}
.hero-crown{
  color: var(--gold); font-size: 22px; letter-spacing: 0.6em; margin-bottom: 10px;
  font-family:'Italiana', serif;
}
.hero-logo{
  display:block;
  width: min(82vw, 700px);
  max-height: 58vh;
  height: auto;
  margin: 16px auto 32px;
  object-fit: contain;
  filter: drop-shadow(0 16px 40px rgba(201,168,76,0.14));
  will-change: transform;
}
.hero-tag{
  font-family:'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(22px, 2.6vw, 34px);
  color: var(--cream);
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  will-change: transform;
}
.hero-tag em{ color: var(--gold); font-style: italic;}
.hero-sub{
  color: var(--cream-dim);
  font-size: 14px;
  letter-spacing: 0.05em;
  max-width: 620px; margin: 0 auto 48px;
}
.hero-ctas{ display:flex; gap: 18px; justify-content:center; flex-wrap: wrap;}
.btn{
  display:inline-flex; align-items:center; gap: 14px;
  padding: 18px 32px;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--gold);
  background: var(--gold); color: var(--bg);
  transition: all .35s cubic-bezier(.2,.7,.3,1);
  cursor: none;
}
.btn:hover{ background: transparent; color: var(--gold); letter-spacing: 0.38em;}
.btn.ghost{ background: transparent; color: var(--cream); border-color: rgba(240,230,204,0.3);}
.btn.ghost:hover{ color: var(--gold); border-color: var(--gold);}
.hero-scroll{
  position:absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  font-size: 9px; letter-spacing: 0.45em; color: var(--cream-dim); text-transform: uppercase;
  z-index: 3;
}
.hero-scroll::after{
  content:""; display:block; width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  margin: 10px auto 0;
  animation: scrollbar 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollbar{
  0%,100%{ transform: scaleY(0.4); opacity: .3;}
  50%{ transform: scaleY(1); opacity: 1;}
}

/* STATS */
.stats{
  background: linear-gradient(180deg, #0a0a0a, #0e0e0e);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 60px 56px;
}
.stats-grid{
  max-width: 1400px; margin: 0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.stat{
  text-align:center;
  position: relative;
  padding: 10px 20px;
}
.stat + .stat::before{
  content:""; position:absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line-strong), transparent);
}
.stat-num{
  font-family:'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(54px, 5.5vw, 76px);
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  font-style: italic;
}
.stat-num .plus{ font-size: 0.5em; vertical-align: 0.5em; font-style: normal; margin-left: 4px;}
.stat-lbl{
  font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--cream-dim); font-weight: 400;
}
.stat-word{
  font-family:'Cormorant Garamond', serif;
  font-style: italic; font-size: 46px; color: var(--gold);
}

/* SECTIONS */
section{ padding: 120px 56px; position: relative;}
.section-head{
  display:grid; grid-template-columns: 1fr 1.4fr; gap: 80px;
  margin-bottom: 72px;
  align-items: end;
}
.section-title{
  font-family:'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(52px, 6.5vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  color: var(--cream);
}
.section-title em{ font-style: italic; color: var(--gold); font-weight: 400;}
.section-kicker{ margin-bottom: 24px; }
.section-lede{
  font-family:'Cormorant Garamond', serif;
  font-style: italic; font-size: 22px;
  color: var(--cream-dim); line-height: 1.5; max-width: 540px;
}

/* ABOUT */
.about{
  background:
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(201,168,76,0.06), transparent 60%),
    var(--bg);
}
.about-grid{
  display:grid; grid-template-columns: 0.9fr 1.2fr;
  gap: 80px; align-items: start;
}
.portrait-wrap{
  position: sticky; top: 120px;
  aspect-ratio: 3/4;
  width: 100%;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 40% at 50% 35%, rgba(240,230,204,0.14), transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 65%, rgba(201,168,76,0.18), transparent 60%),
    linear-gradient(160deg, #231c12 0%, #0e0b08 60%, #050404 100%);
  position: relative;
  overflow: hidden;
}
.portrait-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
  filter: saturate(0.98) contrast(1.02);
}
.portrait-wrap::after{
  content:"M"; font-family:'Cormorant Garamond', serif;
  font-style: italic; font-size: 520px;
  color: rgba(201,168,76,0.06); font-weight: 400;
  position: absolute; top: 44%; left:50%; transform: translate(-50%,-50%);
  line-height: 1; pointer-events: none; z-index: 0;
}
.portrait-wrap .stamp{
  position:absolute; left:20px; top: 20px;
  display:inline-flex; align-items:center; gap: 10px;
  font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--cream-dim); z-index: 2;
}
.portrait-wrap .stamp::before{ content:""; width: 14px; height: 1px; background: var(--gold);}
.portrait-wrap .portrait-caption{
  position:absolute; bottom: 20px; left: 20px; right: 20px;
  font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--cream-dim);
  display:flex; justify-content: space-between; z-index: 2;
}
.portrait-wrap .portrait-caption em{
  font-family:'Cormorant Garamond', serif; font-style: italic;
  color: var(--gold); font-size: 14px; letter-spacing: 0.02em;
}
.portrait-corners{ position:absolute; inset:0; pointer-events:none; z-index: 2;}
.portrait-corners i{ position:absolute; width:22px; height:22px; border:1px solid var(--gold);}
.portrait-corners i:nth-child(1){ top:-1px; left:-1px; border-right:0; border-bottom:0;}
.portrait-corners i:nth-child(2){ top:-1px; right:-1px; border-left:0; border-bottom:0;}
.portrait-corners i:nth-child(3){ bottom:-1px; left:-1px; border-right:0; border-top:0;}
.portrait-corners i:nth-child(4){ bottom:-1px; right:-1px; border-left:0; border-top:0;}

.about-text h3{
  font-family:'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  color: var(--cream);
}
.about-text h3 em{ font-style: italic; color: var(--gold);}
.about-text p{
  color: var(--cream-dim); font-size: 15px;
  line-height: 1.85; margin-bottom: 20px; max-width: 580px;
}
.pull-quote{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0 32px 32px;
  margin: 40px 0;
  position: relative;
  font-family:'Cormorant Garamond', serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.2;
  color: var(--gold);
  letter-spacing: -0.005em;
}
.pull-quote::before{
  content:"\201C"; position:absolute; left:-6px; top:-20px;
  font-size: 120px; color: rgba(201,168,76,0.18); line-height: 1;
  font-family:'Cormorant Garamond', serif;
}
.credentials{
  display:grid; grid-template-columns: repeat(2,1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 40px;
}
.credential{
  background: var(--card);
  padding: 24px 22px;
  display:flex; gap: 16px; align-items:flex-start;
  transition: background .3s;
}
.credential:hover{ background: var(--card-2);}
.credential-ico{
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--gold);
  display:grid; place-items:center;
  color: var(--gold);
}
.credential-ico svg{ width: 60%; height: 60%; stroke: currentColor; stroke-width:1; fill: none;}
.credential strong{
  font-family:'Cormorant Garamond', serif;
  font-weight: 400; font-style: italic;
  font-size: 22px; color: var(--cream);
  display:block; margin-bottom: 4px;
}
.credential span{ color: var(--cream-dim); font-size: 12px; letter-spacing: 0.04em;}

/* SERVICES */
.services{
  background: linear-gradient(180deg, #0a0a0a, #0c0c0c);
}
.service-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  perspective: 1200px;
}
.service-card{
  position: relative;
  background: linear-gradient(160deg, rgba(26,22,15,0.9), rgba(12,11,9,0.95));
  border: 1px solid var(--line);
  padding: 40px 32px 36px;
  min-height: 420px;
  display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s;
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}
.service-card::before{
  content:""; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,10%), rgba(201,168,76,0.18), transparent 40%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.service-card:hover::before{ opacity: 1;}
.service-card:hover{
  border-color: var(--gold);
  /* Sombra expresiva en capas + micro borde interior dorado */
  box-shadow:
    0 30px 80px -30px rgba(201,168,76,0.32),
    0 0 0 1px rgba(201,168,76,0.14),
    inset 0 1px 0 rgba(201,168,76,0.08);
}
.service-card > *{ transform: translateZ(0); position: relative; z-index: 2;}
.service-num{
  font-family:'Cormorant Garamond', serif; font-style: italic;
  font-size: 13px; color: var(--gold);
  letter-spacing: 0.16em;
  margin-bottom: 28px;
  display:flex; justify-content:space-between; align-items:center;
}
.service-num span{ opacity: .6;}
.service-icon{
  width: 54px; height: 54px;
  margin-bottom: 26px;
  display:grid; place-items:center;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.service-icon svg{ width: 58%; height: 58%; stroke: currentColor; stroke-width: 1; fill: none;}
.service-name{
  font-family:'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 36px; line-height: 1;
  color: var(--cream);
  margin-bottom: 14px;
}
.service-name em{ font-style: italic; color: var(--gold);}
.service-desc{
  font-size: 14px; color: var(--cream-dim); line-height: 1.7;
  margin-bottom: 24px; flex: 1;
}
.service-meta{
  display:flex; justify-content: space-between; align-items:center;
  padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cream-dim);
}
.service-meta .arrow{
  color: var(--gold);
  font-family:'Cormorant Garamond', serif; font-style: italic;
  font-size: 14px; letter-spacing: 0.02em;
}

/* STOP SUGAR */
.stopsugar{
  background: #111111;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ss-inner{
  padding: 120px 56px;
  display:grid; grid-template-columns: 1.2fr 1fr;
  gap: 80px; align-items: center;
  position: relative;
  overflow: hidden;
  max-width: 1600px; margin: 0 auto;
}
.ss-inner::before{
  content:"STOP SUGAR";
  position: absolute;
  bottom: -80px; right: -40px;
  font-family:'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 300px;
  color: rgba(201,168,76,0.04);
  line-height: 0.85;
  letter-spacing: -0.02em;
  pointer-events: none;
}
.ss-tag{
  display:inline-flex; align-items:center; gap: 14px;
  color: var(--gold);
  font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
  margin-bottom: 28px;
}
.ss-tag::before{ content:""; width:28px; height:1px; background: var(--gold);}
.ss-title{
  font-family:'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(56px, 7.5vw, 120px);
  line-height: 0.92;
  margin-bottom: 30px;
  letter-spacing: -0.02em;
}
.ss-title em{ font-style: italic; color: var(--gold);}
.ss-lede{
  font-family:'Cormorant Garamond', serif;
  font-style: italic; font-size: 22px;
  color: var(--cream); max-width: 500px;
  line-height: 1.5; margin-bottom: 32px;
}
.ss-stats{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}
.ss-stat{
  background: #111111; padding: 20px 18px;
}
.ss-stat small{
  font-size: 9px; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--cream-dim); display:block; margin-bottom: 6px;
}
.ss-stat strong{
  font-family:'Cormorant Garamond', serif; font-style: italic;
  font-weight: 400; font-size: 22px; color: var(--gold);
}
.ss-visual{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(240,230,204,0.12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 30% 80%, rgba(201,168,76,0.2), transparent 55%),
    linear-gradient(160deg, #231c12, #0a0806 80%);
  border: 1px solid var(--line-strong);
}
.ss-stamp{
  position:absolute; top: 28px; left: 28px;
  width: 120px; height: 120px; border-radius:50%;
  border: 1px solid var(--gold);
  display:grid; place-items:center;
  color: var(--gold);
  text-align:center;
  font-family:'Cormorant Garamond', serif; font-style: italic;
  font-size: 14px;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(4px);
  animation: spin 22s linear infinite;
}
.ss-stamp::before{
  content:""; position:absolute; inset: 8px; border-radius:50%;
  border: 1px dashed rgba(201,168,76,0.35);
}
@keyframes spin{ to{ transform: rotate(360deg);} }
.ss-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* RESULTS */
.results{
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(201,168,76,0.06), transparent 55%),
    linear-gradient(180deg, #0b0b0b, #0a0a0a);
  padding: 140px 56px;
  position: relative;
}
.results .section-head{ margin-bottom: 64px;}
.result-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.result-card{
  background: var(--card);
  border: 1px solid var(--line);
  padding: 14px 14px 24px;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), border-color .5s, box-shadow .5s;
  opacity: 0;
  transform: translateY(32px);
}
.result-card.in{ opacity: 1; transform: none;}
.result-card:hover{
  border-color: var(--gold);
  box-shadow: 0 20px 60px -20px rgba(201,168,76,0.35), 0 0 0 1px rgba(201,168,76,0.25);
  transform: translateY(-4px);
}
.result-split{
  position: relative;
  display:grid; grid-template-columns: 1fr 1fr;
  aspect-ratio: 5/4;
  overflow: hidden;
  margin-bottom: 20px;
}
.result-split::after{
  content:"";
  position: absolute; top: 10%; bottom: 10%; left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  transform: translateX(-50%);
  z-index: 3;
}
.result-half{
  position: relative; overflow: hidden;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.result-card:hover .result-half{ transform: scale(1.04);}

/* Overlay "Ver caso" al hacer hover sobre la galería de resultados */
.result-split::before{
  content:"Ver caso →";
  position:absolute; inset:0; z-index:5;
  background:rgba(8,6,3,0.58);
  backdrop-filter:blur(3px);
  display:grid; place-items:center;
  font-size:10px; letter-spacing:0.44em; text-transform:uppercase;
  color:var(--gold);
  opacity:0; transition:opacity .4s;
  pointer-events:none;
}
.result-card:hover .result-split::before{ opacity:1;}
.result-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
}
.result-half.before{
  background:
    radial-gradient(ellipse 60% 50% at 50% 55%, rgba(240,230,204,0.06), transparent 60%),
    linear-gradient(160deg, #141210, #070605);
}
.result-half.after{
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(240,230,204,0.28), transparent 60%),
    radial-gradient(ellipse 50% 40% at 40% 70%, rgba(201,168,76,0.25), transparent 55%),
    linear-gradient(160deg, #2a2218, #0e0b08 80%);
}
.result-half .half-label{
  position:absolute; top: 16px; left: 16px;
  font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--cream);
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(3px);
  z-index: 2;
}
.result-half.after .half-label{
  border-color: var(--gold);
  color: var(--gold);
}
.result-card .tag-row{
  display:flex; justify-content: space-between; align-items:center;
  padding: 0 8px;
}
.result-tag{
  font-family:'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--cream);
}
.result-tag em{ color: var(--gold);}
.result-meta{
  font-size: 9px; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--cream-dim);
}
.results-quote{
  font-family:'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.22;
  color: var(--cream);
  text-align:center;
  max-width: 920px;
  margin: 96px auto 40px;
  letter-spacing: -0.005em;
  position: relative;
}
.results-quote em{ color: var(--gold);}
.results-quote::before, .results-quote::after{
  content:""; display:block; width: 60px; height: 1px;
  background: var(--gold); margin: 0 auto;
}
.results-quote::before{ margin-bottom: 36px;}
.results-quote::after{ margin-top: 36px;}
.results-cta{
  display:flex; justify-content: center;
}

/* TESTIMONIALS */
.testimonials{
  background: var(--bg);
  padding: 160px 56px 140px;
  position:relative;
  overflow: hidden;
}
.testimonials::before{
  content:"\201C";
  position:absolute; top: 20px; left: 56px;
  font-family:'Cormorant Garamond', serif;
  color: rgba(201,168,76,0.08);
  font-size: 460px; line-height: 0.8; font-weight: 400;
  pointer-events: none;
}
.t-stage{
  max-width: 1200px; margin: 0 auto; text-align: center; position: relative; z-index: 2;
}
.t-eyebrow{
  justify-content:center; display:inline-flex; margin-bottom: 56px;
}
.t-quote{
  font-family:'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.2;
  color: var(--cream);
  margin: 0 auto 50px;
  max-width: 1000px;
  min-height: 240px;
  display:grid; place-items: center;
  transition: opacity .45s;
}
.t-quote em{ font-style: italic; color: var(--gold);}
.t-attr{
  display:flex; flex-direction:column; align-items:center; gap: 10px;
}
.t-attr .line{ width:40px; height:1px; background: var(--gold);}
.t-attr .name{
  font-family:'Cormorant Garamond', serif; font-style: italic;
  font-size: 22px; color: var(--gold);
}
.t-attr .role{
  font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--cream-dim);
}
.t-dots{
  display:flex; gap: 14px; justify-content:center; margin-top: 56px;
}
.t-dot{
  width: 32px; height: 1px; background: var(--line-strong);
  cursor: none; transition: background .3s, transform .3s;
}
.t-dot.active{ background: var(--gold); height: 2px;}

/* CONTACT CTA */
.contact{
  background:
    radial-gradient(ellipse 60% 60% at 20% 0%, rgba(201,168,76,0.22), transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(201,168,76,0.12), transparent 60%),
    #1a1400;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding: 140px 56px;
  position: relative;
  overflow: hidden;
}
.contact-inner{
  max-width: 1400px; margin: 0 auto;
  display:grid; grid-template-columns: 1.3fr 1fr;
  gap: 80px; align-items: center;
}
.contact h2{
  font-family:'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(56px, 7vw, 108px);
  line-height: 0.96;
  margin: 22px 0 30px;
  letter-spacing: -0.015em;
  color: var(--cream);
}
.contact h2 em{ font-style: italic; color: var(--gold);}
.contact p.lede{
  font-family:'Cormorant Garamond', serif; font-style: italic;
  font-size: 22px;
  color: var(--cream-dim); max-width: 520px; margin-bottom: 40px;
}
.contact-cta-row{ display:flex; gap: 16px; flex-wrap: wrap;}
.contact-card{
  background: rgba(10,8,3,0.72);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
  padding: 44px 40px;
}
.contact-card h4{
  font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 24px; font-weight: 500;
}
.contact-card .row{
  display:flex; align-items:flex-start; gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--cream);
}
.contact-card .row:last-child{ border-bottom: 0;}
.contact-card .row small{
  display:block;
  font-size: 9px; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--cream-dim); margin-bottom: 4px;
}
.contact-card .row strong{
  font-family:'Cormorant Garamond', serif; font-style: italic;
  font-weight: 400; font-size: 20px; color: var(--cream); display:block;
}
.contact-card .row .ico{
  width: 28px; height: 28px; flex: none;
  border: 1px solid var(--gold);
  display:grid; place-items:center;
  color: var(--gold);
}
.contact-card .row .ico svg{ width: 14px; height: 14px; stroke: currentColor; stroke-width:1.2; fill:none;}

/* FOOTER */
footer{
  background: #050505;
  padding: 80px 56px 36px;
  border-top: 1px solid var(--line);
}
.foot-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
}
.foot-brand{ display:flex; flex-direction:column; gap: 16px;}
.foot-mark{ display:flex; align-items:center; gap: 14px;}
.foot-mark .brand-mark{
  width: 74px;
  height: 74px;
  border-radius: 16px;
}
.foot-brand p{
  color: var(--cream-dim); font-size: 13px; line-height: 1.8;
  max-width: 320px;
}
.foot-col h4{
  font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px; font-weight: 500;
}
.foot-col a, .foot-col p{
  display:block;
  color: var(--cream-dim);
  text-decoration: none;
  font-size: 13px; line-height: 2.2;
  transition: color .2s;
}
.foot-col a:hover{ color: var(--gold);}
.foot-bottom{
  margin-top: 60px; padding-top: 24px;
  border-top: 1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  color: var(--cream-dim);
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
}
.foot-bottom em{
  font-family:'Cormorant Garamond', serif; font-style: italic;
  font-size: 14px; color: var(--gold); letter-spacing: 0.02em; text-transform: none;
}

/* Floating WhatsApp */
.wa-float{
  position: fixed; right: 28px; bottom: 28px;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  display:grid; place-items:center;
  box-shadow: 0 12px 40px rgba(201,168,76,0.4), 0 0 0 6px rgba(201,168,76,0.12);
  z-index: 70; text-decoration: none;
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 12px 40px rgba(201,168,76,0.4), 0 0 0 6px rgba(201,168,76,0.12);}
  50%{ box-shadow: 0 12px 50px rgba(201,168,76,0.55), 0 0 0 14px rgba(201,168,76,0.04);}
}

/* ─── REVEAL SYSTEM ─────────────────────────────────────────────────────── */
/* --reveal-delay se asigna por JS según el orden del hijo en la sección    */
.reveal{
  opacity:0; transform:translateY(28px);
  transition: opacity .85s cubic-bezier(.25,.46,.45,.94) var(--reveal-delay,0ms),
              transform .85s cubic-bezier(.25,.46,.45,.94) var(--reveal-delay,0ms);
}
.reveal.in{ opacity:1; transform:none;}

/* Desde la izquierda */
.reveal-l{
  opacity:0; transform:translateX(-36px);
  transition: opacity .9s cubic-bezier(.25,.46,.45,.94) var(--reveal-delay,0ms),
              transform .9s cubic-bezier(.25,.46,.45,.94) var(--reveal-delay,0ms);
}
.reveal-l.in{ opacity:1; transform:none;}

/* Desde la derecha */
.reveal-r{
  opacity:0; transform:translateX(36px);
  transition: opacity .9s cubic-bezier(.25,.46,.45,.94) var(--reveal-delay,0ms),
              transform .9s cubic-bezier(.25,.46,.45,.94) var(--reveal-delay,0ms);
}
.reveal-r.in{ opacity:1; transform:none;}

/* Scale up */
.reveal-scale{
  opacity:0; transform:scale(0.94);
  transition: opacity .9s cubic-bezier(.25,.46,.45,.94) var(--reveal-delay,0ms),
              transform .9s cubic-bezier(.25,.46,.45,.94) var(--reveal-delay,0ms);
}
.reveal-scale.in{ opacity:1; transform:none;}

/* En mobile los laterales hacen slide-up simple para evitar overflow */
@media(max-width:840px){
  .reveal-l, .reveal-r{ transform:translateY(28px);}
}

/* ─── MODAL DE CONTACTO ─────────────────────────────────────────────── */
.modal-overlay{
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(5,4,2,0.9);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.modal-overlay.active{
  opacity: 1;
  pointer-events: all;
}
.modal-box{
  position: relative;
  background: var(--card);
  border: 1px solid var(--line-strong);
  width: 100%; max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 52px 48px 44px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.modal-box::-webkit-scrollbar{ width: 4px;}
.modal-box::-webkit-scrollbar-track{ background: transparent;}
.modal-box::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius: 2px;}
.modal-close{
  position: absolute; top: 20px; right: 20px;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--cream-dim);
  font-size: 20px; line-height: 1;
  cursor: none;
  display: grid; place-items: center;
  transition: border-color .2s, color .2s;
}
.modal-close:hover{ border-color: var(--gold); color: var(--gold);}
.modal-eyebrow{
  font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.modal-eyebrow::before{ content:""; width: 22px; height: 1px; background: var(--gold);}
.modal-title{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1;
  color: var(--cream);
  margin-bottom: 10px;
}
.modal-title em{ font-style: italic; color: var(--gold);}
.modal-sub{
  font-size: 13px; color: var(--cream-dim);
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}
.field-wrap{
  margin-bottom: 18px;
  position: relative; /* necesario para micro-anim */
}
.field-wrap label{
  display: block;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cream-dim); margin-bottom: 8px;
  transition: color .25s;
}
/* El label se ilumina en dorado cuando el campo está enfocado */
.field-wrap:focus-within label{ color: var(--gold);}
.field-wrap .optional{
  color: var(--gold-dim); text-transform: none; letter-spacing: 0; font-size: 10px;
}
.field-wrap input,
.field-wrap select,
.field-wrap textarea{
  width: 100%;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
  transition: border-color .25s;
  -webkit-appearance: none;
  appearance: none;
}
.field-wrap input::placeholder,
.field-wrap textarea::placeholder{ color: var(--cream-dim); opacity: 0.5;}
.field-wrap input:focus,
.field-wrap select:focus,
.field-wrap textarea:focus{
  border-color: var(--gold);
  /* Glow suave dorado al enfocar */
  box-shadow: 0 0 0 3px rgba(201,168,76,0.09), 0 2px 16px rgba(201,168,76,0.07);
  outline: none;
}
.field-wrap input[aria-invalid="true"],
.field-wrap select[aria-invalid="true"],
.field-wrap textarea[aria-invalid="true"]{ border-color: #c9564c;}
.field-wrap select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23a69c86' stroke-width='1.2' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: none;
}
.field-wrap select option{ background: var(--card); color: var(--cream);}
.field-wrap textarea{ resize: vertical; min-height: 80px;}
.field-error{
  display: none;
  font-size: 11px; color: #c9564c;
  margin-top: 5px; letter-spacing: 0.02em;
}
.hp-field{ position: absolute; left: -9999px; top: -9999px; overflow: hidden; height: 1px; width: 1px;}
.field-check{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.field-check input[type="checkbox"]{ width: 16px; height: 16px; accent-color: var(--gold); cursor: none; flex: none;}
.field-check label{ font-size: 13px; color: var(--cream-dim); cursor: none;}
.btn-submit{
  width: 100%;
  padding: 16px 24px;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  font-weight: 500;
  background: var(--gold); color: var(--bg);
  border: 1px solid var(--gold);
  cursor: none;
  transition: background .3s, color .3s, letter-spacing .3s;
}
.btn-submit:hover:not(:disabled){ background: transparent; color: var(--gold); letter-spacing: 0.38em;}
.btn-submit:disabled{ opacity: 0.6; cursor: not-allowed;}
.form-feedback{
  margin-top: 14px;
  font-size: 13px; text-align: center;
  min-height: 20px;
  transition: opacity .3s;
}
.form-feedback.success{ color: #7fc99a;}
.form-feedback.error{ color: #c9564c;}

/* ─── WAVE DIVIDERS entre secciones (inyectados por JS) ─────────────────── */
.section-wave{
  width:100%; overflow:hidden; height:52px; line-height:0;
  position:relative; z-index:2; pointer-events:none;
  margin:0; padding:0; display:block;
}
.section-wave svg{ display:block; width:100%; height:100%;}

/* ─── HAMBURGER + MOBILE NAV ─────────────────────────────────────────────── */
.nav-hamburger{
  display: none;
  background: none; border: none; padding: 8px 4px;
  cursor: pointer; z-index: 62; flex-direction: column; gap: 6px; flex: none;
}
.nav-hamburger span{
  display: block; width: 22px; height: 1px;
  background: var(--gold);
  transition: transform .3s ease, opacity .25s ease, width .3s ease;
  transform-origin: center;
}
.nav-hamburger span:nth-child(2){ width: 14px; }
.nav-hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); width: 22px; }
.nav-hamburger.open span:nth-child(2){ opacity: 0; }
.nav-hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.nav-mobile{
  display: none;
  position: fixed; inset: 0; z-index: 61;
  background: rgba(8,7,4,0.97);
  backdrop-filter: blur(12px);
  flex-direction: column; align-items: center; justify-content: center;
  padding: 100px 40px 60px;
}
.nav-mobile.open{ display: flex; }
.nav-mobile-links{
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 320px;
  border-top: 1px solid var(--line);
  margin-bottom: 40px;
}
.nav-mobile-links a{
  display: block;
  font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--cream-dim); text-decoration: none;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  width: 100%; text-align: center;
  transition: color .2s;
}
.nav-mobile-links a:hover{ color: var(--gold); }
.nav-mobile-cta{
  display: inline-block;
  font-size: 11px; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  padding: 16px 48px;
  border: 1px solid var(--gold);
  transition: background .3s, color .3s;
}
.nav-mobile-cta:hover{ background: var(--gold); color: var(--bg); }

/* ─── MOBILE ≤ 840px ────────────────────────────────────────────────────── */
@media (max-width: 840px){
  /* Cursor */
  body{ cursor: auto;} .cursor{ display: none;}

  /* NAV */
  nav{ padding: 16px 24px; }
  nav.scrolled{ padding: 12px 24px; }
  .nav-links{ display: none;}
  .nav-cta{ display: none;}
  .nav-hamburger{ display: flex; }

  /* HERO */
  .hero{ padding: 110px 24px 64px; min-height: 100svh; }
  .hero-kicker{ font-size: 11px; letter-spacing: 0.28em; margin-bottom: 24px; gap: 12px;}
  .hero-kicker span{ width: 24px;}
  .hero-logo{ max-height: 46vh; margin: 8px auto 20px;}
  .hero-tag{ font-size: clamp(20px, 5.5vw, 28px);}
  .hero-sub{ font-size: 13px; letter-spacing: 0.03em; margin-bottom: 36px;}
  .hero-ctas{ gap: 14px;}
  .btn{ padding: 16px 24px;}

  /* STATS */
  .stats{ padding: 52px 24px;}
  .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 32px;}
  .stat + .stat::before{ display: none;}

  /* SECTIONS */
  section{ padding: 80px 24px;}
  .section-head{ grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px;}
  .section-title{ font-size: clamp(38px, 9.5vw, 56px); line-height: 1.0;}
  .section-lede{ font-size: 18px; max-width: 100%;}

  /* ABOUT */
  .about-grid{ grid-template-columns: 1fr; gap: 44px;}
  .portrait-wrap{ position: relative; top: 0; max-width: 300px; margin: 0 auto;}
  .about-text p{ max-width: 100%;}
  .pull-quote{ font-size: clamp(22px, 5.5vw, 32px); padding: 22px 0 22px 18px; margin: 28px 0;}
  .credentials{ grid-template-columns: 1fr;}

  /* SERVICES */
  .service-grid{ grid-template-columns: 1fr;}
  .service-card{ min-height: unset; padding: 32px 24px 28px;}

  /* STOP SUGAR */
  .ss-inner{ grid-template-columns: 1fr; padding: 80px 24px; gap: 48px;}
  .ss-inner::before{ content: none;}
  .ss-title{ font-size: clamp(42px, 11vw, 80px);}

  /* RESULTS */
  .results{ padding: 80px 24px;}
  .result-grid{ grid-template-columns: 1fr; gap: 16px;}
  .results-quote{ font-size: clamp(26px, 6.5vw, 44px); margin: 60px auto 32px;}

  /* TESTIMONIALS */
  .testimonials{ padding: 80px 24px;}
  .testimonials::before{ font-size: 160px; top: 0; left: 16px;}
  .t-quote{ font-size: clamp(24px, 6vw, 40px); min-height: 160px;}
  .t-eyebrow{ margin-bottom: 36px;}

  /* CONTACT */
  .contact{ padding: 80px 24px;}
  .contact-inner{ grid-template-columns: 1fr; gap: 48px;}
  .contact h2{ font-size: clamp(40px, 10.5vw, 72px);}
  .contact-card{ padding: 28px 20px;}

  /* FOOTER */
  footer{ padding: 60px 24px 32px;}
  .foot-grid{ grid-template-columns: 1fr 1fr; gap: 36px;}
  .foot-mark .brand-mark{ width: 60px; height: 60px;}
  .foot-bottom{ flex-direction: column; gap: 14px; text-align: center;}

  /* MODAL */
  .modal-overlay{ padding: 16px;}
  .modal-box{ padding: 36px 22px 32px;}

  /* Cursor overrides (touch) */
  .t-dot{ cursor: auto;}
  .btn-submit{ cursor: auto;}
  .modal-close{ cursor: auto;}
  .field-check input[type="checkbox"]{ cursor: auto;}
  .field-check label{ cursor: auto;}
  .field-wrap select{ cursor: auto;}
}

/* ─── MUY PEQUEÑO ≤ 400px ───────────────────────────────────────────────── */
@media (max-width: 400px){
  .hero-kicker{ font-size: 9.5px; letter-spacing: 0.22em;}
  .hero-logo{ max-height: 40vh;}
  .hero-ctas{ flex-direction: column; align-items: stretch;}
  .hero-ctas .btn{ justify-content: center;}
  .stats-grid{ grid-template-columns: 1fr; gap: 24px;}
  .foot-grid{ grid-template-columns: 1fr;}
}