/* ============================================================
   LUX DENTAL — Cinematic luxury renovation
   Gold-on-black system · Cinzel / Cormorant Garamond / Jost
   ============================================================ */

:root{
  /* gold (hue-tweakable via --gold-h) */
  --gold-h: 41;
  --gold:        hsl(var(--gold-h) 48% 54%);
  --gold-light:  hsl(var(--gold-h) 62% 78%);
  --gold-bright: hsl(var(--gold-h) 80% 86%);
  --gold-deep:   hsl(var(--gold-h) 46% 36%);
  --gold-line:   hsl(var(--gold-h) 40% 50% / 0.30);
  --gold-glow:   hsl(var(--gold-h) 70% 60% / 0.28);

  /* warm near-blacks */
  --bg:        #0a0908;
  --bg-2:      #0e0c0a;
  --surface:   #141110;
  --surface-2: #1b1714;
  --marble:    #100d0b;

  --ink:       #f5efe3;   /* warm white text */
  --ink-soft:  #c7bda c; /* placeholder, overwritten below */
  --ink-mut:   #a89e8d;
  --ink-faint: #6f6657;

  --city: #3f6f9e;        /* cool night-blue accent, used sparingly */

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 80px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --serif: "Cormorant Garamond", Georgia, serif;
  --roman: "Cinzel", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
}
:root{ --ink-soft:#cfc6b6; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.no-scroll{ overflow:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:#000; }

/* film grain + vignette over everything */
.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-4%,2%)} 66%{transform:translate(3%,-3%)} 100%{transform:translate(0,0)}
}
body.no-grain .grain{ display:none; }

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--roman);
  font-weight:600;
  font-size:clamp(11px,1vw,13px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex; align-items:center; gap:.9em;
}
.eyebrow::before{
  content:""; width:clamp(24px,4vw,52px); height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.eyebrow.center::after{
  content:""; width:clamp(24px,4vw,52px); height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.eyebrow.center{ justify-content:center; }

h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.07; letter-spacing:-0.01em; }
.display{ font-size:clamp(40px,7vw,104px); line-height:.95; }
.h-xl{ font-size:clamp(36px,5.6vw,84px); }
.h-lg{ font-size:clamp(30px,4vw,58px); }
.h-md{ font-size:clamp(24px,2.6vw,38px); }
.serif-it{ font-style:italic; }
.gold-text{
  background:linear-gradient(100deg,var(--gold-deep),var(--gold-light) 45%,var(--gold-bright) 55%,var(--gold) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{ font-size:clamp(17px,1.5vw,21px); color:var(--ink-soft); font-weight:300; max-width:60ch; }
.muted{ color:var(--ink-mut); }
.mono{ font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:12px; letter-spacing:.04em; }

/* ---------- buttons ---------- */
.btn{
  --pad:1.05em 2em;
  display:inline-flex; align-items:center; gap:.7em;
  padding:var(--pad);
  font-family:var(--sans); font-weight:500; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase;
  border-radius:2px; cursor:pointer; border:1px solid transparent;
  transition:transform .5s var(--ease-out), background .4s, color .4s, box-shadow .5s, border-color .4s;
  position:relative; overflow:hidden;
}
.btn svg{ width:16px; height:16px; }
.btn-gold{
  background:
    linear-gradient(180deg,
      hsl(var(--gold-h) 78% 80%) 0%,
      hsl(var(--gold-h) 65% 64%) 16%,
      hsl(var(--gold-h) 52% 50%) 50%,
      hsl(var(--gold-h) 58% 56%) 78%,
      hsl(var(--gold-h) 48% 42%) 100%);
  color:#2a1c05;
  border:1px solid hsl(var(--gold-h) 55% 42%);
  text-shadow:0 1px 0 hsl(var(--gold-h) 85% 84% / .5);
  box-shadow:
    inset 0 1px 0 hsl(var(--gold-h) 92% 90% / .85),
    inset 0 -1px 1px hsl(var(--gold-h) 45% 28% / .55),
    0 10px 28px -12px hsl(var(--gold-h) 55% 32% / .7);
}
.btn-gold::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg, transparent 36%, hsl(var(--gold-h) 95% 95% / .55) 48%, transparent 60%);
  transform:translateX(-120%); transition:transform .7s var(--ease-out);
}
.btn-gold:hover{ transform:translateY(-3px); box-shadow:
    inset 0 1px 0 hsl(var(--gold-h) 92% 92% / .9),
    inset 0 -1px 1px hsl(var(--gold-h) 45% 28% / .5),
    0 18px 42px -14px hsl(var(--gold-h) 58% 34% / .8); }
.btn-gold:hover::after{ transform:translateX(120%); }
.btn-ghost{
  background:transparent; color:var(--ink);
  border-color:var(--gold-line);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-light); transform:translateY(-3px); background:hsl(var(--gold-h) 40% 50% / .06); }
.btn-lg{ --pad:1.2em 2.6em; font-size:15px; }

/* ---------- layout ---------- */
section{ position:relative; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.pad-y{ padding-block:clamp(90px,12vw,180px); }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--gold-line),transparent); border:0; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(38px); transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out); will-change:transform,opacity; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s } .reveal.d5{ transition-delay:.4s }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none} .grain{display:none} }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px var(--gut);
  transition:background .5s var(--ease), backdrop-filter .5s, padding .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:hsl(36 20% 4% / .72);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  border-bottom-color:var(--gold-line);
  padding-block:12px;
}
.nav-links{ display:flex; align-items:center; gap:clamp(18px,2vw,36px); }
.nav-links a{
  font-size:13px; letter-spacing:.04em; color:var(--ink-soft); font-weight:400;
  position:relative; padding-block:6px; transition:color .35s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .4s var(--ease-out);
}
.nav-links a:hover{ color:var(--gold-light); } .nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-burger{ display:none; flex-direction:column; gap:5px; width:30px; height:24px; justify-content:center; cursor:pointer; }
.nav-burger span{ height:1.5px; background:var(--gold-light); transition:transform .4s var(--ease), opacity .3s; }

/* logo lockup */
.logo{ display:inline-flex; align-items:center; gap:13px; }
.logo-mark{ width:38px; height:38px; flex:none; }
.logo-mark .tooth{ fill:none; stroke:url(#goldGrad); stroke-width:5; }
.logo-mark .spark{ fill:url(#goldGrad); }
.logo-word{ display:flex; flex-direction:column; line-height:.86; }
.logo-word .lux{ font-family:var(--roman); font-weight:700; font-size:20px; letter-spacing:.34em; }
.logo-word .lux b{ font-weight:700; }
.logo-word .dental{ font-family:var(--roman); font-weight:400; font-size:10.5px; letter-spacing:.46em; color:var(--ink-soft); padding-left:.16em; }
.logo .lux{ background:linear-gradient(160deg,var(--gold-light),var(--gold) 55%,var(--gold-deep)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, hsl(36 25% 3% / .92) 0%, hsl(36 25% 3% / .6) 34%, hsl(36 25% 3% / .32) 62%, hsl(36 25% 3% / .4) 100%),
    linear-gradient(180deg, hsl(36 25% 3% / .25) 0%, transparent 32%, transparent 54%, hsl(36 25% 3% / .62) 90%, var(--bg) 100%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding-top:clamp(96px,13vh,150px); padding-bottom:clamp(80px,12vh,120px); }
.hero h1{ margin:.26em 0 .5em; max-width:15ch; text-shadow:0 2px 40px hsl(36 25% 2% / .6); }
.hero .lead{ max-width:42ch; text-shadow:0 1px 24px hsl(36 25% 2% / .7); }
.hero .lead-x{ max-width:46ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; }
.hero-aside{
  position:absolute; right:var(--gut); bottom:clamp(28px,5vh,54px); z-index:2;
  text-align:right; display:flex; flex-direction:column; gap:14px; align-items:flex-end;
}
@media (max-width:900px){ .hero-aside{ display:none; } }
.rating{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.stars{ color:var(--gold); letter-spacing:2px; font-size:15px; }
.scroll-cue{
  position:absolute; left:var(--gut); bottom:26px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--roman); font-size:10px; letter-spacing:.4em; color:var(--ink-mut); text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:46px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--gold-light); animation:cue 2.1s var(--ease-in-out,ease) infinite; }
@keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(300%)} }

.top-bar{
  position:absolute; top:0; left:0; right:0; z-index:2;
  display:flex; justify-content:center; gap:28px; flex-wrap:wrap;
  padding:9px var(--gut); font-size:11.5px; letter-spacing:.06em; color:var(--ink-soft);
  background:hsl(36 25% 3% / .35); border-bottom:1px solid hsl(var(--gold-h) 40% 50% / .12);
}
.top-bar span{ display:inline-flex; align-items:center; gap:7px; }
.top-bar .g-star{ color:var(--gold); }
@media (max-width:720px){ .top-bar{ display:none; } }

/* ============================================================
   STRIP / stats
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--gold-line); border-block:1px solid var(--gold-line); }
.stat{ background:var(--bg); padding:clamp(28px,4vw,46px) clamp(18px,3vw,40px); text-align:center; }
.stat .num{ font-family:var(--serif); font-size:clamp(40px,5vw,68px); line-height:1; color:var(--gold-light); }
.stat .lab{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mut); margin-top:10px; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   ENFOQUE (split editorial)
   ============================================================ */
.split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px,6vw,96px); align-items:center; }
.split.rev{ grid-template-columns:1fr 1.05fr; }
@media (max-width:900px){ .split,.split.rev{ grid-template-columns:1fr; gap:48px; } }
.enfoque blockquote{ font-family:var(--serif); font-size:clamp(28px,3.4vw,46px); line-height:1.18; font-weight:400; color:var(--ink); margin:.2em 0; }
.enfoque blockquote em{ color:var(--gold-light); font-style:italic; }
.enfoque .lead{ margin-top:24px; }

/* media frame / placeholder */
.frame{ position:relative; border:1px solid var(--gold-line); background:var(--marble); overflow:hidden; }
.frame::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 80px hsl(36 25% 2% / .8); pointer-events:none; }
.frame .corner{ position:absolute; width:18px; height:18px; border:1px solid var(--gold); z-index:3; }
.frame .corner.tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.frame .corner.tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.frame .corner.bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.frame .corner.br{ bottom:10px; right:10px; border-left:0; border-top:0; }
.frame img,.frame video{ width:100%; height:100%; object-fit:cover; display:block; }

.ph{
  position:relative; width:100%; aspect-ratio:4/5;
  background:
    repeating-linear-gradient(135deg, hsl(36 12% 9%) 0 14px, hsl(36 12% 11%) 14px 28px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
}
.ph .ph-ico{ width:34px; height:34px; opacity:.5; }
.ph .mono{ color:var(--ink-faint); max-width:24ch; }
.ph .ph-tag{ font-family:var(--roman); letter-spacing:.3em; font-size:11px; color:var(--gold-deep); text-transform:uppercase; }

/* ============================================================
   3D IMPLANT SECTION (pinned) — copy on the left, implant right
   ============================================================ */
.scene-sec{ position:relative; background:var(--bg-2); }
.scene-pin{ position:sticky; top:0; height:100svh; overflow:hidden; }
#implant-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; }
.scene-glow{
  position:absolute; left:70%; top:52%; transform:translate(-50%,-50%);
  width:58vmin; height:58vmin; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, var(--gold-glow), transparent 62%);
  filter:blur(20px);
}
.scene-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, hsl(36 25% 3% /.94) 0%, hsl(36 25% 3% /.8) 26%, hsl(36 25% 3% /.34) 50%, transparent 66%);
}
.scene-copy{
  position:absolute; z-index:3; left:0; top:0; height:100%;
  width:clamp(340px,44vw,560px); padding-left:var(--gut); padding-right:24px;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(26px,5vh,52px);
}
.scene-head h2{ margin-top:.4em; }
.step-track{ position:relative; }
.step{ position:absolute; inset:0; opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.step.active{ opacity:1; transform:none; position:relative; }
.step .step-no{ font-family:var(--roman); color:var(--gold); letter-spacing:.3em; font-size:12px; }
.step h3{ font-family:var(--serif); font-size:clamp(24px,2.6vw,32px); margin:.3em 0 .4em; }
.step p{ color:var(--ink-soft); font-size:15px; max-width:40ch; }
.step-progress{ position:relative; margin-top:26px; display:flex; gap:8px; }
.step-progress i{ width:26px; height:2px; background:var(--gold-line); display:block; transition:background .4s; }
.step-progress i.on{ background:var(--gold); }
@media (max-width:860px){
  .scene-copy{ width:auto; right:0; padding-right:var(--gut); justify-content:flex-end; padding-bottom:clamp(40px,8vh,84px); }
  .scene-scrim{ background:linear-gradient(180deg, hsl(36 25% 3% /.25) 0%, transparent 28%, hsl(36 25% 3% /.62) 60%, hsl(36 25% 3% /.94) 100%); }
  .scene-glow{ left:50%; top:36%; }
  .step p{ max-width:46ch; }
}

/* ============================================================
   CLÍNICA (video loop)
   ============================================================ */
.clinic-sec{ position:relative; min-height:100svh; overflow:hidden; background:#000; }
.clinic-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.clinic-veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, hsl(36 25% 3% /.72), transparent 30%, transparent 52%, hsl(36 25% 3% /.88)),
            linear-gradient(90deg, hsl(36 25% 3% /.55) 0%, transparent 46%); }
.clinic-copy{ position:absolute; z-index:2; left:var(--gut); bottom:clamp(60px,10vh,120px); max-width:min(620px,80vw); }
.clinic-copy h2{ margin:.2em 0 .35em; }
.clinic-meta{ position:absolute; z-index:2; right:var(--gut); top:50%; transform:translateY(-50%); text-align:right; display:flex; flex-direction:column; gap:22px; }
.clinic-meta .row .k{ font-family:var(--roman); font-size:11px; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; }
.clinic-meta .row .v{ font-size:15px; color:var(--ink-soft); margin-top:5px; }
@media (max-width:820px){ .clinic-meta{ display:none; } }

/* ============================================================
   ESPECIALIDADES (tilt cards)
   ============================================================ */
.sec-head{ display:flex; flex-direction:column; gap:18px; max-width:64ch; }
.sec-head.center{ align-items:center; text-align:center; margin-inline:auto; gap:24px; }
.spec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:clamp(40px,6vw,72px); }
@media (max-width:900px){ .spec-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .spec-grid{ grid-template-columns:1fr; } }
.card{
  position:relative; min-height:0;
  background:linear-gradient(180deg,var(--surface),var(--marble));
  border:1px solid var(--gold-line); overflow:hidden;
  transition:transform .4s var(--ease-out), border-color .5s, box-shadow .5s;
  display:flex; flex-direction:column;
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s; z-index:3; pointer-events:none;
  background:radial-gradient(180px 180px at var(--mx,50%) var(--my,0%), hsl(var(--gold-h) 50% 50% /.16), transparent 70%);
}
.card:hover{ border-color:var(--gold); box-shadow:0 30px 60px -30px #000, 0 0 0 1px var(--gold-line); transform:translateY(-4px); }
.card:hover::before{ opacity:1; }
.card-media{ position:relative; aspect-ratio:16/11; overflow:hidden; flex:none; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-out); filter:saturate(.9) brightness(.9) contrast(1.02); }
.card:hover .card-media img{ transform:scale(1.07); }
.card-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, hsl(36 25% 4% /.15) 0%, transparent 38%, hsl(36 25% 5% /.55) 100%); }
.card-body{ padding:22px 26px 26px; display:flex; flex-direction:column; flex:1; position:relative; z-index:2; }
.card .ix{ position:absolute; top:14px; left:16px; z-index:2; font-family:var(--roman); font-size:12px; letter-spacing:.2em; color:var(--gold-light); text-shadow:0 1px 6px #000; }
.card h3{ font-family:var(--serif); font-size:clamp(21px,1.8vw,27px); }
.card p{ color:var(--ink-mut); font-size:14px; margin-top:9px; }
.card .tags{ margin-top:auto; padding-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.card .tag{ font-size:11px; letter-spacing:.04em; color:var(--ink-soft); border:1px solid var(--gold-line); border-radius:100px; padding:4px 11px; }
.card .arr{ position:absolute; right:14px; top:13px; z-index:2; color:var(--gold-light); opacity:0; transform:translateX(-6px); transition:opacity .4s,transform .4s; filter:drop-shadow(0 1px 4px #000); }
.card:hover .arr{ opacity:1; transform:none; }

/* feature wide card: image right, copy left */
.card.wide{ grid-column:span 2; flex-direction:row; align-items:stretch; }
.card.wide .card-body{ flex:1 1 0; min-width:0; justify-content:center; padding:clamp(28px,3vw,42px); }
.card.wide .card-media{ flex:1 1 0; min-width:0; aspect-ratio:auto; }
.card.wide .ix{ position:static; text-shadow:none; margin-bottom:6px; }
@media (max-width:900px){ .card.wide{ grid-column:span 2; flex-direction:column; } .card.wide .card-media{ aspect-ratio:16/11; } }
@media (max-width:560px){ .card.wide{ grid-column:span 1; } }

/* ============================================================
   ARMONIZACIÓN
   ============================================================ */
.armo{ background:linear-gradient(180deg,var(--bg),var(--bg-2)); }
.armo .doctor-credit{ display:inline-flex; align-items:center; gap:12px; margin-top:8px; }
.pill-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.pill{ border:1px solid var(--gold-line); border-radius:100px; padding:9px 18px; font-size:13.5px; color:var(--ink-soft); transition:border-color .4s,color .4s,background .4s; }
.pill:hover{ border-color:var(--gold); color:var(--gold-light); background:hsl(var(--gold-h) 40% 50% /.06); }

/* ============================================================
   FONASA banner
   ============================================================ */
.fonasa{ position:relative; overflow:hidden; background:var(--marble); border-block:1px solid var(--gold-line); }
.fonasa .glow{ position:absolute; right:-10%; top:-40%; width:60vmax; height:60vmax; background:radial-gradient(circle,var(--gold-glow),transparent 60%); pointer-events:none; }
.fonasa .wrap{ position:relative; z-index:1; }
.fonasa-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
@media (max-width:900px){ .fonasa-grid{ grid-template-columns:1fr; } }
.benefit{ display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:26px; align-items:center; padding:24px 0; border-top:1px solid var(--gold-line); }
.benefit:last-child{ border-bottom:1px solid var(--gold-line); }
.benefit .big{ font-family:var(--serif); font-size:clamp(34px,4vw,52px); color:var(--gold-light); line-height:1; white-space:nowrap; }
.benefit .t{ font-size:16px; color:var(--ink); } .benefit .s{ font-size:14px; color:var(--ink-mut); margin-top:4px; }

/* ============================================================
   EQUIPO
   ============================================================ */
.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:clamp(40px,6vw,68px); }
@media (max-width:740px){ .team-grid{ grid-template-columns:1fr; } }
.doc{ display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; padding:26px; border:1px solid var(--gold-line); background:linear-gradient(180deg,var(--surface),var(--marble)); }
.doc .portrait{ width:130px; height:160px; flex:none; }
.doc h3{ font-family:var(--serif); font-size:26px; }
.doc .role{ font-family:var(--roman); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:6px 0 12px; }
.doc p{ font-size:14px; color:var(--ink-mut); }
.doc .links{ display:flex; gap:14px; margin-top:14px; }
.doc .links a{ font-size:12.5px; color:var(--gold-light); border-bottom:1px solid var(--gold-line); padding-bottom:2px; }
@media (max-width:480px){ .doc{ grid-template-columns:1fr; text-align:center; justify-items:center; } }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testi{ background:var(--bg-2); }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:clamp(40px,6vw,68px); }
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .testi-grid{ grid-template-columns:1fr; } }
.quote{ padding:30px 28px; border:1px solid var(--gold-line); background:var(--surface); display:flex; flex-direction:column; gap:16px; position:relative; }
.quote .mark{ font-family:var(--serif); font-size:64px; line-height:.5; color:var(--gold-deep); height:30px; }
.quote .stars{ font-size:14px; }
.quote p{ font-size:15px; color:var(--ink-soft); line-height:1.65; }
.quote .who{ margin-top:auto; display:flex; align-items:center; gap:12px; }
.quote .av{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); display:flex; align-items:center; justify-content:center; color:#1a1304; font-weight:600; font-family:var(--roman); font-size:14px; flex:none; }
.quote .who .n{ font-size:14px; } .quote .who .src{ font-size:12px; color:var(--ink-faint); }
.google-badge{ display:inline-flex; align-items:center; gap:14px; padding:14px 22px; border:1px solid var(--gold-line); border-radius:100px; margin-top:10px; }
.google-badge .gv{ font-family:var(--serif); font-size:34px; color:var(--gold-light); line-height:1; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:clamp(40px,6vw,68px); }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr; } }
.post{ border:1px solid var(--gold-line); background:var(--surface); overflow:hidden; transition:border-color .4s, transform .5s var(--ease-out); }
.post:hover{ border-color:var(--gold); transform:translateY(-4px); }
.post .pimg{ aspect-ratio:16/10; }
.post .pbody{ padding:24px 24px 26px; }
.post .kicker{ font-family:var(--roman); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.post h3{ font-family:var(--serif); font-size:23px; line-height:1.12; margin:12px 0 12px; }
.post p{ font-size:14px; color:var(--ink-mut); }
.post .more{ margin-top:16px; font-size:12.5px; letter-spacing:.06em; color:var(--gold-light); display:inline-flex; gap:8px; align-items:center; text-transform:uppercase; }

/* ============================================================
   UBICACIÓN
   ============================================================ */
.loc-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:0; border:1px solid var(--gold-line); }
@media (max-width:860px){ .loc-grid{ grid-template-columns:1fr; } }
.loc-info{ padding:clamp(34px,4vw,56px); display:flex; flex-direction:column; gap:30px; background:var(--surface); }
.loc-info .row .k{ font-family:var(--roman); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); display:flex; gap:9px; align-items:center; }
.loc-info .row .v{ font-size:16.5px; color:var(--ink); margin-top:8px; line-height:1.5; }
.loc-info .row .v small{ display:block; color:var(--ink-mut); font-size:13.5px; margin-top:3px; }
.loc-map{ position:relative; min-height:360px; filter:grayscale(1) contrast(1.05) brightness(.82) sepia(.25); }
.loc-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.loc-map .mapveil{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 70px hsl(36 25% 2% /.6); background:hsl(var(--gold-h) 40% 40% /.05); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{ position:relative; overflow:hidden; text-align:center; background:var(--marble); }
.final .glow{ position:absolute; left:50%; top:60%; transform:translate(-50%,-50%); width:80vmax; height:60vmax; background:radial-gradient(circle,var(--gold-glow),transparent 60%); pointer-events:none; }
.final .wrap{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:26px; }
.final h2{ max-width:18ch; }
.final .hero-cta{ justify-content:center; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:#070605; border-top:1px solid var(--gold-line); padding-block:clamp(56px,7vw,84px) 30px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-col h4{ font-family:var(--roman); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.foot-col a,.foot-col p{ display:block; font-size:14px; color:var(--ink-mut); margin-bottom:9px; transition:color .3s; }
.foot-col a:hover{ color:var(--gold-light); }
.foot-tag{ font-size:14px; color:var(--ink-soft); max-width:34ch; margin-top:16px; line-height:1.6; }
.foot-bottom{ margin-top:clamp(40px,6vw,68px); padding-top:24px; border-top:1px solid var(--gold-line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-faint); }

/* ---------- mobile nav drawer ---------- */
@media (max-width:1000px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(340px,82vw);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:26px;
    padding:60px 40px; background:hsl(36 22% 5% / .98); backdrop-filter:blur(20px);
    transform:translateX(100%); transition:transform .5s var(--ease-out); z-index:1001;
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:18px; }
  .nav-burger{ display:flex; z-index:1002; }
  .nav .nav-cta .btn{ display:none; }
}

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:1200;
  display:inline-flex; align-items:center; gap:10px; padding:13px 20px 13px 16px;
  background:
    linear-gradient(180deg,
      hsl(var(--gold-h) 78% 80%) 0%,
      hsl(var(--gold-h) 62% 62%) 18%,
      hsl(var(--gold-h) 52% 50%) 52%,
      hsl(var(--gold-h) 48% 42%) 100%);
  color:#2a1c05; font-weight:600;
  border:1px solid hsl(var(--gold-h) 55% 42%);
  border-radius:100px; font-size:14px; letter-spacing:.02em;
  text-shadow:0 1px 0 hsl(var(--gold-h) 85% 84% / .5);
  box-shadow:
    inset 0 1px 0 hsl(var(--gold-h) 92% 90% / .85),
    inset 0 -1px 1px hsl(var(--gold-h) 45% 28% / .5),
    0 12px 32px -12px hsl(var(--gold-h) 55% 30% / .75);
  transition:transform .5s var(--ease-out), box-shadow .5s;
}
.wa-float:hover{ transform:translateY(-3px) scale(1.02); box-shadow:
    inset 0 1px 0 hsl(var(--gold-h) 92% 92% / .9),
    inset 0 -1px 1px hsl(var(--gold-h) 45% 28% / .5),
    0 20px 46px -12px hsl(var(--gold-h) 58% 34% / .85); }
.wa-float svg{ width:22px; height:22px; }
@media (max-width:560px){ .wa-float span{ display:none; } .wa-float{ padding:14px; } }

/* preloader */
.preload{ position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; transition:opacity .9s var(--ease), visibility .9s; }
.preload.done{ opacity:0; visibility:hidden; }
.preload .logo-mark{ width:64px; height:64px; animation:breathe 2.4s var(--ease) infinite; }
.preload .pbar{ width:160px; height:1px; background:var(--gold-line); position:relative; overflow:hidden; }
.preload .pbar i{ position:absolute; inset:0; width:40%; background:var(--gold); animation:slide 1.3s var(--ease) infinite; }
.preload .pw{ font-family:var(--roman); letter-spacing:.4em; font-size:11px; color:var(--gold); text-transform:uppercase; }
@keyframes breathe{ 0%,100%{transform:scale(1);opacity:.85} 50%{transform:scale(1.06);opacity:1} }
@keyframes slide{ 0%{left:-40%} 100%{left:100%} }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
#tweaks-panel{
  position:fixed; top:50%; right:20px; transform:translateY(-50%) translateX(120%);
  width:300px; max-width:calc(100vw - 32px); z-index:9500;
  background:hsl(36 22% 6% / .94); backdrop-filter:blur(20px) saturate(120%);
  border:1px solid var(--gold-line); border-radius:6px;
  box-shadow:0 30px 80px -20px #000, 0 0 0 1px hsl(36 25% 2% /.6);
  font-family:var(--sans); color:var(--ink);
  transition:transform .55s var(--ease-out), opacity .4s; opacity:0; pointer-events:none;
  max-height:calc(100vh - 40px); overflow-y:auto;
}
#tweaks-panel.open{ transform:translateY(-50%) translateX(0); opacity:1; pointer-events:auto; }
#tweaks-panel header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 13px; border-bottom:1px solid var(--gold-line); position:sticky; top:0; background:inherit; }
#tweaks-panel header span{ font-family:var(--roman); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
#tw-close{ background:none; border:0; color:var(--ink-mut); font-size:16px; cursor:pointer; line-height:1; padding:4px; transition:color .3s; }
#tw-close:hover{ color:var(--gold-light); }
.tw-body{ padding:6px 18px 20px; display:flex; flex-direction:column; gap:22px; }
.tw-body section h5{ font-family:var(--roman); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mut); margin:16px 0 11px; font-weight:600; }
.tw-swatches{ display:flex; gap:10px; }
.tw-swatches button{ width:38px; height:38px; border-radius:50%; border:1px solid var(--gold-line); cursor:pointer; padding:0; position:relative; transition:transform .3s; }
.tw-swatches button:hover{ transform:scale(1.08); }
.tw-swatches button[aria-checked="true"]{ box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--gold); }
.tw-radio{ display:flex; flex-direction:column; gap:7px; }
.tw-radio button{ text-align:left; background:hsl(36 14% 10%); border:1px solid var(--gold-line); color:var(--ink-soft); padding:10px 13px; border-radius:4px; cursor:pointer; font-size:13px; font-family:var(--sans); transition:border-color .3s, color .3s, background .3s; }
.tw-radio button:hover{ border-color:hsl(var(--gold-h) 40% 50% /.6); }
.tw-radio button[aria-checked="true"]{ border-color:var(--gold); color:var(--gold-light); background:hsl(var(--gold-h) 40% 50% /.08); }
.tw-range{ width:100%; -webkit-appearance:none; appearance:none; height:2px; background:var(--gold-line); border-radius:2px; outline:none; accent-color:var(--gold); }
.tw-range::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--gold); cursor:pointer; box-shadow:0 0 0 4px hsl(var(--gold-h) 40% 50% /.18); }
.tw-range::-moz-range-thumb{ width:16px; height:16px; border:0; border-radius:50%; background:var(--gold); cursor:pointer; }
.tw-row{ display:flex; align-items:center; justify-content:space-between; }
.tw-switch{ width:42px; height:23px; border-radius:100px; background:hsl(36 14% 14%); border:1px solid var(--gold-line); cursor:pointer; position:relative; transition:background .3s; padding:0; }
.tw-switch::after{ content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--ink-mut); transition:transform .3s, background .3s; }
.tw-switch[aria-checked="true"]{ background:hsl(var(--gold-h) 45% 30%); }
.tw-switch[aria-checked="true"]::after{ transform:translateX(19px); background:var(--gold-light); }
.tw-val{ font-family:ui-monospace,monospace; font-size:11px; color:var(--gold-light); }