/* ============================================================
   SONRISA VIVA — HOME REDESIGN 2026
   Síntesis editorial: Collider · Noon · Giga · Portal
   Carga DESPUÉS de styles.css. No toca subpáginas.
   ============================================================ */

/* ─────────── DESIGN TOKENS ─────────── */
:root{
  /* Dark scale */
  --void:        #07080F;
  --void-2:      #0D0F1B;
  --void-3:      #161A2A;
  --void-4:      #1F2438;

  /* Premium accents */
  --gold:        #C9A86C;
  --gold-light:  #E6CC8F;
  --gold-glow:   rgba(201,168,108,0.18);
  --teal:        #1FCFC6;
  --teal-light:  #4DDDD2;
  --teal-glow:   rgba(31,207,198,0.20);

  /* Light scale */
  --pure:        #FFFFFF;
  --cream-1:     #FAF7F2;
  --cream-2:     #F2EDE3;
  --cream-3:     #E8E0D0;

  /* Lines */
  --line-light:  #E8E2D6;
  --line-light-2:#D8D2C4;
  --line-dark:   rgba(255,255,255,0.08);
  --line-dark-2: rgba(255,255,255,0.14);
  --line-dark-3: rgba(255,255,255,0.22);

  /* Text on dark */
  --t-light-1:   #F0F1F5;
  --t-light-2:   #B8BDD0;
  --t-light-3:   #8B92A8;
  --t-light-4:   #5A6178;

  /* Text on light */
  --t-dark-1:    #0E1220;
  --t-dark-2:    #44495C;
  --t-dark-3:    #6E7388;

  /* Las legacy vars (--accent, --off-white, --cream, --text, etc.)
     se controlan en pages.css globalmente (dark) y se re-scopean a
     valores light dentro de #modal-reserva. No las redefinimos aquí
     para no pisar pages.css. */

  /* Type */
  --font-serif:  'Fraunces', Georgia, serif;
  --font-sans:   'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shadows */
  --sh-card:    0 1px 3px rgba(14,18,32,.04), 0 12px 32px rgba(14,18,32,.06);
  --sh-glow:    0 0 0 1px var(--gold), 0 0 32px var(--gold-glow), 0 24px 48px rgba(0,0,0,.35);
  --sh-deep:    0 32px 64px rgba(0,0,0,.4);

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
}

html{scroll-behavior:smooth}
html, body{overflow-x:hidden;max-width:100vw}
body{
  background: var(--void);
  color: var(--t-light-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width:100%;
  position:relative
}

/* ─────────── HELPERS ─────────── */
.h-container{max-width:1320px;margin:0 auto;padding:0 2rem;width:100%}
.h-overline{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);font-weight:500;font-family:var(--font-sans)
}
.h-overline::before{
  content:'';width:18px;height:1px;background:var(--gold);opacity:.6
}
.h-overline.dark{color:var(--t-dark-2)}
.h-overline.dark::before{background:var(--t-dark-3)}

.h-eyebrow{
  display:inline-block;
  font-size:.68rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--t-light-3);
  font-family:var(--font-sans)
}

.h-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:100px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-dark-2);
  font-size:.75rem;color:var(--t-light-2);
  letter-spacing:.04em;font-weight:400;backdrop-filter:blur(8px)
}
.h-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}

/* ─────────── BUTTONS ─────────── */
.h-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border-radius:100px;
  font-family:var(--font-sans);font-size:.88rem;font-weight:500;
  letter-spacing:.01em;text-decoration:none;cursor:pointer;border:none;
  transition:transform .2s ease,box-shadow .25s ease,background .2s ease;
  white-space:nowrap;line-height:1
}
.h-btn-primary{background:var(--pure);color:var(--void);box-shadow:0 4px 16px rgba(255,255,255,.15)}
.h-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,255,255,.25)}
.h-btn-gold{background:var(--gold);color:var(--void);box-shadow:0 4px 24px var(--gold-glow)}
.h-btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 8px 32px var(--gold-glow)}
.h-btn-teal{background:var(--teal);color:var(--void)}
.h-btn-teal:hover{background:var(--teal-light);transform:translateY(-2px)}
.h-btn-ghost{background:transparent;color:var(--t-light-1);border:1px solid var(--line-dark-2)}
.h-btn-ghost:hover{background:rgba(255,255,255,.06);border-color:var(--line-dark-3)}
.h-btn-dark{background:var(--void-2);color:var(--t-light-1);border:1px solid var(--line-dark-2)}
.h-btn-dark:hover{background:var(--void-3);border-color:var(--gold);color:var(--gold)}
.h-btn-arrow svg{transition:transform .25s ease}
.h-btn-arrow:hover svg{transform:translateX(4px)}
.h-btn-lg{padding:18px 36px;font-size:.94rem}

/* ═══════════════════════════════════════════════════════
   NAV — Dark glass override
═══════════════════════════════════════════════════════ */
nav{
  height:72px !important;
  background: rgba(7,8,15,0.78) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border-bottom: 1px solid var(--line-dark) !important;
}
.nav-inner{padding:0 2rem !important;max-width:1320px !important}
.nav-logo-name{color:var(--t-light-1) !important;font-weight:400}
.nav-logo-tagline{color:var(--t-light-3) !important}
.nav-links a{color:var(--t-light-2) !important;font-weight:400}
.nav-links a:hover, .nav-links a.active, .nav-links li.active > a{color:var(--gold) !important}
.nav-tel{color:var(--t-light-2) !important}
.nav-tel:hover{color:var(--gold) !important}
.nav-cta{
  background:var(--gold) !important;
  color:var(--void) !important;
  padding:10px 20px !important;
  border-radius:100px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:500 !important;
  font-size:.83rem !important;
  box-shadow:0 4px 16px var(--gold-glow);
  transition:transform .2s,box-shadow .2s,background .2s
}
.nav-cta:hover{background:var(--gold-light) !important;transform:translateY(-1px);box-shadow:0 6px 20px var(--gold-glow)}
.nav-hamburger span{background:var(--t-light-1) !important}
.nav-mobile-menu{
  background:var(--void-2) !important;
  border-bottom:1px solid var(--line-dark) !important
}
.nav-mobile-menu a{color:var(--t-light-2) !important;border-bottom:1px solid var(--line-dark) !important}
.nav-mobile-menu a:hover, .nav-mobile-menu a.active{color:var(--gold) !important}
.nav-mobile-section{color:var(--t-light-4) !important}
.nav-mobile-cta{background:var(--gold) !important;color:var(--void) !important}

/* Dropdown — fondo oscuro */
.nav-dropdown{
  background:var(--void-2) !important;
  border:1px solid var(--line-dark-2) !important;
  box-shadow:0 24px 64px rgba(0,0,0,.6) !important
}
.nav-dropdown a{color:var(--t-light-2) !important}
.nav-dropdown a:hover{background:rgba(201,168,108,.10) !important;color:var(--gold) !important}
.nav-dropdown-divider{background:var(--line-dark) !important}

/* ═══════════════════════════════════════════════════════
   HERO — Dark dramatic con mesh gradient
═══════════════════════════════════════════════════════ */
.h-hero{
  position:relative;
  background:var(--void);
  padding:140px 0 100px;
  overflow:hidden;
  isolation:isolate
}
.h-hero::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 50% at 78% 30%, var(--gold-glow), transparent 70%),
    radial-gradient(50% 45% at 12% 70%, rgba(31,207,198,.10), transparent 65%),
    radial-gradient(80% 70% at 50% 100%, rgba(14,18,32,.4), transparent 60%);
  filter:blur(8px)
}
.h-hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 75%);
  opacity:.4
}
.h-hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:5rem;align-items:center
}
.h-hero-content{position:relative;z-index:2}
.h-hero-pill{margin-bottom:2.5rem}
.h-hero h1{
  font-family:var(--font-serif);
  font-size:clamp(2.5rem, 6vw, 5.6rem);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.025em;
  color:var(--t-light-1);
  margin-bottom:1.8rem
}
.h-hero h1 em{
  font-style:italic;font-weight:300;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, var(--teal-light) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.h-hero-desc{
  font-size:1.075rem;color:var(--t-light-2);font-weight:300;
  line-height:1.7;max-width:520px;margin-bottom:2.5rem
}
.h-hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem}
.h-hero-rating{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-top:1px solid var(--line-dark)
}
.h-hero-rating-stars{display:flex;gap:2px}
.h-hero-rating-stars span{
  width:13px;height:13px;background:var(--gold);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)
}
.h-hero-rating-text{font-size:.82rem;color:var(--t-light-2)}
.h-hero-rating-text strong{color:var(--t-light-1);font-weight:500}
.h-hero-rating-divider{width:1px;height:18px;background:var(--line-dark-2)}

.h-hero-visual{
  position:relative;height:540px;border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.5);
  border:1px solid var(--line-dark-2)
}
.h-hero-visual img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block
}
.h-hero-visual::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(7,8,15,.45) 100%);
  pointer-events:none
}
.h-hero-floating{
  position:absolute;background:rgba(13,15,27,.85);
  backdrop-filter:blur(20px);border:1px solid var(--line-dark-3);
  border-radius:var(--r-md);padding:14px 18px;
  box-shadow:var(--sh-deep);z-index:3
}
.h-hero-floating-1{top:24px;left:24px;display:flex;align-items:center;gap:12px}
.h-hero-floating-1 .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal);animation:pulse 2s infinite}
.h-hero-floating-1 .label{font-size:.75rem;color:var(--t-light-2);font-weight:400}
.h-hero-floating-1 .label strong{color:var(--t-light-1);font-weight:500}
.h-hero-floating-2{bottom:24px;right:24px;display:flex;align-items:center;gap:14px}
.h-hero-floating-2 .num{font-family:var(--font-serif);font-size:1.65rem;font-weight:300;color:var(--gold);letter-spacing:-.02em;line-height:1}
.h-hero-floating-2 .lbl{font-size:.7rem;color:var(--t-light-3);text-transform:uppercase;letter-spacing:.1em;margin-top:3px}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.6;transform:scale(1.4)}
}

/* ═══════════════════════════════════════════════════════
   MARQUEE — scroll de confianza
═══════════════════════════════════════════════════════ */
.h-marquee{
  background:var(--void-2);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  padding:18px 0;overflow:hidden;position:relative
}
.h-marquee::before, .h-marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none
}
.h-marquee::before{left:0;background:linear-gradient(90deg, var(--void-2), transparent)}
.h-marquee::after{right:0;background:linear-gradient(-90deg, var(--void-2), transparent)}
.h-marquee-track{
  display:flex;gap:4rem;width:max-content;
  animation:marquee 38s linear infinite;
  align-items:center
}
.h-marquee-item{
  display:flex;align-items:center;gap:10px;
  font-size:.82rem;color:var(--t-light-3);letter-spacing:.02em;
  white-space:nowrap;font-weight:400
}
.h-marquee-item svg{flex-shrink:0;color:var(--gold)}
.h-marquee-item strong{color:var(--t-light-1);font-weight:500}
.h-marquee-dot{width:5px;height:5px;border-radius:50%;background:var(--line-dark-3);flex-shrink:0}

@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ═══════════════════════════════════════════════════════
   STATS — 4 métricas grandes (estilo Giga)
═══════════════════════════════════════════════════════ */
.h-stats{
  background:var(--void);padding:120px 0;position:relative
}
.h-stats-header{
  display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;
  margin-bottom:5rem;align-items:end
}
.h-stats-header h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.05;letter-spacing:-.02em;color:var(--t-light-1)
}
.h-stats-header h2 em{font-style:italic;color:var(--gold)}
.h-stats-header p{
  font-size:1rem;color:var(--t-light-3);font-weight:300;line-height:1.7
}
.h-stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark)
}
.h-stat{
  padding:3rem 2.5rem 3.5rem;
  border-right:1px solid var(--line-dark);
  position:relative;overflow:visible;
  transition:background .3s ease;
  min-height:280px;display:flex;flex-direction:column
}
.h-stat:last-child{border-right:none}
.h-stat:hover{background:rgba(201,168,108,.04)}
.h-stat-icon{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-dark-2);border-radius:50%;
  color:var(--gold);margin-bottom:2.5rem
}
.h-stat-num{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2.5rem,4.5vw,4rem);
  letter-spacing:-.04em;line-height:1.05;
  color:var(--t-light-1);margin-bottom:.85rem;
  padding-bottom:.15em;
  white-space:nowrap;overflow:visible
}
.h-stat-num em{font-style:italic;color:var(--gold);font-size:.6em}
.h-stat-label{font-size:.85rem;color:var(--t-light-3);font-weight:400;line-height:1.4}

/* ═══════════════════════════════════════════════════════
   SERVICES — 6 cards dark glass con gold glow
═══════════════════════════════════════════════════════ */
.h-services{
  background:var(--void);padding:120px 0;position:relative
}
.h-services::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--line-dark-3), transparent)
}
.h-services-header{
  display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;
  margin-bottom:5rem;align-items:end
}
.h-services-header h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2.2rem,4.2vw,3.8rem);
  line-height:1.04;letter-spacing:-.025em;color:var(--t-light-1)
}
.h-services-header h2 em{
  font-style:italic;
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.h-services-header p{font-size:1rem;color:var(--t-light-3);line-height:1.75;font-weight:300;max-width:380px}

.h-services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem
}
.h-svc{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border:1px solid var(--line-dark);
  border-radius:var(--r-md);padding:2.25rem 2rem 2rem;
  transition:all .35s cubic-bezier(.23,1,.32,1);
  overflow:hidden;isolation:isolate
}
.h-svc::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(140% 100% at 0% 0%, var(--gold-glow), transparent 50%);
  opacity:0;transition:opacity .4s ease
}
.h-svc:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
  box-shadow:0 24px 48px rgba(0,0,0,.4), 0 0 0 1px var(--gold-glow)
}
.h-svc:hover::before{opacity:1}
.h-svc-num{
  font-family:var(--font-serif);font-style:italic;font-weight:300;
  font-size:.95rem;color:var(--gold);letter-spacing:.02em;
  margin-bottom:1.5rem;display:block
}
.h-svc-icon{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(201,168,108,.10);border:1px solid var(--line-dark-2);
  border-radius:12px;color:var(--gold);margin-bottom:1.5rem;
  transition:background .3s ease,border-color .3s ease
}
.h-svc:hover .h-svc-icon{background:rgba(201,168,108,.18);border-color:var(--gold)}
.h-svc-name{
  font-family:var(--font-serif);font-weight:400;
  font-size:1.5rem;line-height:1.15;letter-spacing:-.01em;
  color:var(--t-light-1);margin-bottom:1rem
}
.h-svc-desc{
  font-size:.9rem;color:var(--t-light-3);line-height:1.7;
  font-weight:300;margin-bottom:1.75rem;min-height:84px
}
.h-svc-meta{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:1.5rem;border-top:1px solid var(--line-dark)
}
.h-svc-price{
  font-family:var(--font-serif);font-weight:300;
  font-size:1.2rem;color:var(--gold);letter-spacing:-.01em
}
.h-svc-price em{font-style:italic;font-size:.7em;opacity:.7}
.h-svc-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;color:var(--t-light-2);text-decoration:none;
  font-weight:500;letter-spacing:.02em;
  transition:gap .25s ease,color .2s ease
}
.h-svc-link:hover{color:var(--gold);gap:10px}

/* ═══════════════════════════════════════════════════════
   PROCESS — 4 pasos timeline (estilo Giga)
═══════════════════════════════════════════════════════ */
.h-process{
  background:var(--cream-1);
  color:var(--t-dark-1);
  padding:120px 0;position:relative
}
.h-process-header{
  display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;
  margin-bottom:5rem;align-items:end
}
.h-process-header h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2.2rem,4.2vw,3.8rem);
  line-height:1.04;letter-spacing:-.025em;color:var(--t-dark-1)
}
.h-process-header h2 em{font-style:italic;color:#9C8038}
.h-process-header p{font-size:1rem;color:var(--t-dark-3);line-height:1.75;font-weight:300}

.h-process-steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;position:relative
}
.h-process-line{
  position:absolute;top:24px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--cream-3) 8%,
    var(--cream-3) 92%,
    transparent 100%);
  z-index:0
}
.h-process-step{position:relative;z-index:1;padding-right:2rem}
.h-process-num{
  width:48px;height:48px;border-radius:50%;
  background:var(--cream-1);border:1px solid var(--cream-3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:1rem;color:#9C8038;letter-spacing:.02em;
  margin-bottom:1.75rem;position:relative
}
.h-process-num::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px dashed var(--cream-3);opacity:.6
}
.h-process-time{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:#9C8038;font-weight:500;margin-bottom:.75rem
}
.h-process-name{
  font-family:var(--font-serif);font-weight:400;
  font-size:1.3rem;line-height:1.2;color:var(--t-dark-1);
  margin-bottom:.85rem
}
.h-process-body{
  font-size:.88rem;color:var(--t-dark-3);line-height:1.7;
  font-weight:300
}

/* ═══════════════════════════════════════════════════════
   FEATURE — Showcase tratamiento estrella
═══════════════════════════════════════════════════════ */
.h-feature{
  background:var(--void);
  padding:120px 0;position:relative
}
.h-feature-grid{
  display:grid;grid-template-columns:1fr 1.1fr;gap:5rem;align-items:center
}
.h-feature-visual{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line-dark-2);
  box-shadow:var(--sh-deep);height:600px
}
.h-feature-visual img{width:100%;height:100%;object-fit:cover;display:block}
.h-feature-visual-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(7,8,15,.7) 100%)
}
.h-feature-badge{
  position:absolute;top:24px;left:24px;
  background:rgba(13,15,27,.85);backdrop-filter:blur(20px);
  border:1px solid var(--line-dark-3);
  padding:8px 14px;border-radius:100px;
  font-size:.72rem;color:var(--gold);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase
}
.h-feature-content h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.05;letter-spacing:-.025em;color:var(--t-light-1);
  margin-bottom:1.75rem
}
.h-feature-content h2 em{
  font-style:italic;
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.h-feature-desc{
  font-size:1rem;color:var(--t-light-3);font-weight:300;line-height:1.75;
  margin-bottom:2.25rem
}
.h-feature-list{list-style:none;display:flex;flex-direction:column;gap:1rem;margin-bottom:2.5rem}
.h-feature-list li{
  display:flex;align-items:flex-start;gap:14px;
  font-size:.92rem;color:var(--t-light-2);line-height:1.5;font-weight:300
}
.h-feature-check{
  width:22px;height:22px;border-radius:50%;
  background:rgba(201,168,108,.12);border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  margin-top:2px
}
.h-feature-check::after{
  content:'';width:8px;height:4px;
  border-left:1.5px solid var(--gold);
  border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg) translate(1px,-1px)
}
.h-feature-cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.h-feature-price{
  font-family:var(--font-serif);font-style:italic;font-weight:300;
  font-size:1.05rem;color:var(--t-light-3)
}
.h-feature-price strong{
  font-style:normal;font-weight:400;
  font-size:1.6rem;color:var(--gold);letter-spacing:-.01em
}

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS — Cards estilo Collider
═══════════════════════════════════════════════════════ */
.h-testi{
  background:var(--void-2);padding:120px 0;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  position:relative;overflow:hidden
}
.h-testi::before{
  content:'';position:absolute;top:0;left:50%;width:50%;height:100%;
  background:radial-gradient(60% 50% at 50% 0%, var(--gold-glow), transparent 70%);
  transform:translateX(-50%);pointer-events:none;opacity:.5
}
.h-testi-header{text-align:center;max-width:680px;margin:0 auto 4.5rem;position:relative;z-index:1}
.h-testi-header h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.05;letter-spacing:-.025em;color:var(--t-light-1);
  margin-top:1.5rem
}
.h-testi-header h2 em{font-style:italic;color:var(--gold)}
.h-testi-header p{
  font-size:.95rem;color:var(--t-light-3);font-weight:300;line-height:1.7;
  margin-top:1rem
}
.h-testi-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;position:relative;z-index:1
}
.h-testi-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border:1px solid var(--line-dark);
  border-radius:var(--r-md);padding:2.25rem 2rem;
  display:flex;flex-direction:column;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease
}
.h-testi-card:hover{
  transform:translateY(-4px);border-color:var(--line-dark-3);
  box-shadow:0 24px 48px rgba(0,0,0,.3)
}
.h-testi-source{
  display:flex;align-items:center;gap:8px;margin-bottom:1.25rem;
  padding-bottom:1.25rem;border-bottom:1px solid var(--line-dark);
  flex-wrap:wrap
}
.h-testi-source svg{width:16px;height:16px}
.h-testi-source-label{
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-light-3);font-weight:500
}
.h-testi-stars{display:flex;gap:3px;margin-bottom:1.25rem}
.h-testi-stars span{
  width:13px;height:13px;background:var(--gold);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)
}
.h-testi-text{
  font-family:var(--font-serif);font-weight:300;font-style:italic;
  font-size:1.075rem;line-height:1.55;color:var(--t-light-1);
  margin-bottom:1.75rem;flex:1
}
.h-testi-author{
  display:flex;align-items:center;gap:14px;
  padding-top:1.25rem;border-top:1px solid var(--line-dark)
}
.h-testi-avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  color:var(--void);font-family:var(--font-serif);font-weight:500;
  font-size:.95rem;display:flex;align-items:center;justify-content:center;
  flex-shrink:0
}
.h-testi-name{font-size:.88rem;color:var(--t-light-1);font-weight:500;margin-bottom:2px}
.h-testi-meta{font-size:.74rem;color:var(--t-light-4)}

/* ═══════════════════════════════════════════════════════
   TEAM — Light section (estilo Noon)
═══════════════════════════════════════════════════════ */
.h-team{
  background:var(--cream-1);color:var(--t-dark-1);padding:120px 0
}
.h-team-header{
  display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;
  margin-bottom:4.5rem;align-items:end
}
.h-team-header h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2.2rem,4.2vw,3.8rem);
  line-height:1.04;letter-spacing:-.025em;color:var(--t-dark-1)
}
.h-team-header h2 em{font-style:italic;color:#9C8038}
.h-team-header p{font-size:1rem;color:var(--t-dark-3);line-height:1.75;font-weight:300}
.h-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.h-team-card{
  background:var(--pure);border:1px solid var(--line-light);
  border-radius:var(--r-md);overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease
}
.h-team-card:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
.h-team-portrait{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--cream-2)
}
.h-team-portrait img,
.h-team-portrait picture{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.h-team-card:hover .h-team-portrait img{transform:scale(1.04)}
.h-team-info{padding:1.75rem 1.5rem 1.75rem}
.h-team-name{
  font-family:var(--font-serif);font-weight:400;
  font-size:1.4rem;color:var(--t-dark-1);margin-bottom:6px;line-height:1.2
}
.h-team-role{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:#9C8038;font-weight:500;margin-bottom:1rem;display:block
}
.h-team-bio{font-size:.88rem;color:var(--t-dark-3);line-height:1.65;font-weight:300}

/* ═══════════════════════════════════════════════════════
   FAQ — Acordeón premium
═══════════════════════════════════════════════════════ */
.h-faq{background:var(--void);padding:120px 0}
.h-faq-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:5rem;align-items:start}
.h-faq-intro h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2rem,3.5vw,3rem);
  line-height:1.05;letter-spacing:-.02em;color:var(--t-light-1);
  margin:1.5rem 0 1.5rem
}
.h-faq-intro h2 em{font-style:italic;color:var(--gold)}
.h-faq-intro p{font-size:.95rem;color:var(--t-light-3);line-height:1.75;font-weight:300;margin-bottom:2rem}
.h-faq-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-dark)}
.h-faq-item{border-bottom:1px solid var(--line-dark)}
.h-faq-q{
  width:100%;background:none;border:none;padding:1.5rem 0;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  font-family:var(--font-serif);font-weight:400;
  font-size:1.1rem;color:var(--t-light-1);line-height:1.35;
  text-align:left;cursor:pointer;letter-spacing:-.005em;
  transition:color .2s ease
}
.h-faq-q:hover{color:var(--gold)}
.h-faq-q-icon{
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line-dark-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  position:relative;transition:background .25s ease,border-color .25s ease,transform .35s ease
}
.h-faq-q-icon::before, .h-faq-q-icon::after{
  content:'';position:absolute;background:var(--t-light-2);
  transition:transform .35s ease,background .25s ease
}
.h-faq-q-icon::before{width:11px;height:1px}
.h-faq-q-icon::after{width:1px;height:11px}
.h-faq-item.open .h-faq-q-icon{background:var(--gold);border-color:var(--gold);transform:rotate(45deg)}
.h-faq-item.open .h-faq-q-icon::before, .h-faq-item.open .h-faq-q-icon::after{background:var(--void)}
.h-faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.23,1,.32,1)
}
.h-faq-item.open .h-faq-a{max-height:500px}
.h-faq-a-inner{
  padding:0 0 1.75rem 0;
  font-size:.92rem;color:var(--t-light-3);line-height:1.75;font-weight:300;
  max-width:680px
}

/* ═══════════════════════════════════════════════════════
   CTA FINAL — Dramatic dark
═══════════════════════════════════════════════════════ */
.h-cta-final{
  background:var(--void);position:relative;
  padding:140px 0;overflow:hidden;isolation:isolate
}
.h-cta-final::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 80% at 30% 50%, rgba(201,168,108,.15), transparent 65%),
    radial-gradient(60% 70% at 80% 30%, rgba(31,207,198,.08), transparent 70%)
}
.h-cta-final-grid{
  display:grid;grid-template-columns:1.3fr 1fr;gap:5rem;align-items:center
}
.h-cta-final h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2.5rem,5vw,4.8rem);
  line-height:1.02;letter-spacing:-.03em;color:var(--t-light-1);
  margin:1.5rem 0
}
.h-cta-final h2 em{
  font-style:italic;
  background:linear-gradient(135deg, var(--gold), var(--gold-light) 50%, var(--teal-light));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.h-cta-final-desc{
  font-size:1.05rem;color:var(--t-light-3);line-height:1.7;font-weight:300;
  margin-bottom:2.5rem;max-width:520px
}
.h-cta-final-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.h-cta-final-meta{
  font-size:.78rem;color:var(--t-light-4);letter-spacing:.04em;
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap
}
.h-cta-final-meta span{display:inline-flex;align-items:center;gap:6px}
.h-cta-final-card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-dark-2);
  border-radius:var(--r-lg);padding:2.5rem;
  backdrop-filter:blur(20px)
}
.h-cta-card-label{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-light-3);margin-bottom:1.25rem;font-weight:500
}
.h-cta-card-feature{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line-dark);
  font-size:.92rem;color:var(--t-light-2);line-height:1.4
}
.h-cta-card-feature:last-of-type{border-bottom:none}
.h-cta-card-feature strong{color:var(--t-light-1);font-weight:500}
.h-cta-card-feature .ic{
  width:20px;height:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(201,168,108,.12);border-radius:50%;color:var(--gold)
}

/* ═══════════════════════════════════════════════════════
   FOOTER — Dark editorial
═══════════════════════════════════════════════════════ */
footer{
  background:var(--void) !important;
  border-top:1px solid var(--line-dark);
  padding:80px 0 40px;
  color:var(--t-light-2)
}
footer .footer-inner{max-width:1320px;margin:0 auto;padding:0 2rem}
footer .footer-grid{
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:3rem;
  padding-bottom:60px;border-bottom:1px solid var(--line-dark);margin-bottom:30px
}
footer .footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:1.5rem}
footer .footer-logo svg circle:first-of-type{stroke:var(--gold)}
footer .footer-logo svg circle:last-of-type{fill:var(--gold)}
footer .footer-logo-name{
  font-family:var(--font-serif);font-size:1.3rem;font-weight:400;
  color:var(--t-light-1);letter-spacing:-.005em
}
footer .footer-logo-sub{
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-light-4);margin-top:2px
}
footer .footer-address p,
footer .footer-hours p{
  font-size:.85rem;color:var(--t-light-3);line-height:1.7;font-weight:300;margin:0
}
footer .footer-hours{margin-top:1.25rem}
footer .footer-urgencias{
  color:var(--gold) !important;font-weight:500 !important;
  letter-spacing:.1em;font-size:.75rem !important;margin-top:8px !important
}
footer .footer-col h5{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-light-4);margin-bottom:1.25rem;font-weight:500;
  font-family:var(--font-sans)
}
footer .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.85rem;padding:0}
footer .footer-col a{
  font-size:.88rem;color:var(--t-light-2);text-decoration:none;
  font-weight:300;transition:color .2s ease
}
footer .footer-col a:hover{color:var(--gold)}
footer .footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
  font-size:.74rem;color:var(--t-light-4);letter-spacing:.04em
}
footer .footer-bottom-legal{display:flex;gap:1.5rem;flex-wrap:wrap}
footer .footer-bottom-legal a{
  color:var(--t-light-4);text-decoration:none;font-size:.74rem;
  transition:color .2s ease
}
footer .footer-bottom-legal a:hover{color:var(--gold)}

/* ═══════════════════════════════════════════════════════
   CHAT — restyle premium dark
═══════════════════════════════════════════════════════ */
.chat-win{
  background:var(--void-2) !important;
  border:1px solid var(--line-dark-2) !important;
  box-shadow:0 32px 80px rgba(0,0,0,.6) !important
}
.chat-head{
  background:linear-gradient(180deg, var(--void-3), var(--void-2)) !important;
  border-bottom:1px solid var(--line-dark) !important
}
.chat-avatar{
  background:linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
  color:var(--void) !important
}
.chat-head-name{color:var(--t-light-1) !important}
.chat-head-status{color:var(--teal) !important}
.chat-msgs{background:var(--void-2) !important}
.msg.bot{background:var(--void-3) !important;color:var(--t-light-1) !important}
.msg.user{background:var(--gold) !important;color:var(--void) !important}
.msg-ts{color:var(--t-light-4) !important}
.chat-quick{background:var(--void-2) !important;border-top:1px solid var(--line-dark) !important}
.q-btn{
  background:var(--void-3) !important;color:var(--t-light-2) !important;
  border:1px solid var(--line-dark) !important
}
.q-btn:hover{background:var(--gold) !important;color:var(--void) !important;border-color:var(--gold) !important}
.chat-inp-row{background:var(--void-2) !important;border-top:1px solid var(--line-dark) !important}
.chat-inp{
  background:var(--void-3) !important;color:var(--t-light-1) !important;
  border:1px solid var(--line-dark) !important
}
.chat-inp:focus{border-color:var(--gold) !important}
.chat-send{background:var(--gold) !important}
.chat-send:hover{background:var(--gold-light) !important}
.fab-main{
  background:linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
  box-shadow:0 8px 32px var(--gold-glow) !important
}

/* ═══════════════════════════════════════════════════════
   STICKY MOBILE CTA — restyle
═══════════════════════════════════════════════════════ */
.sm-cta-bar, #mobile-cta-bar{
  background:rgba(7,8,15,.92) !important;
  border-top:1px solid var(--line-dark-2) !important;
  backdrop-filter:blur(16px)
}
.sm-cta-call, #mobile-cta-bar a:first-child{
  background:rgba(255,255,255,.06) !important;
  color:var(--t-light-1) !important
}
.sm-cta-reserve, #mobile-cta-bar button{
  background:var(--gold) !important;color:var(--void) !important
}

/* ═══════════════════════════════════════════════════════
   SCROLL ANIMATIONS
═══════════════════════════════════════════════════════ */
/* Las clases .h-fade-in y [data-reveal] NO esconden el contenido por CSS.
   Las animaciones se aplican via JS con GSAP. Si GSAP falla, el contenido
   se sigue viendo. */

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 1100px){
  .h-hero-grid{grid-template-columns:1fr;gap:3.5rem}
  .h-hero-visual{height:420px}
  .h-stats-grid{grid-template-columns:repeat(2,1fr)}
  .h-stat:nth-child(2){border-right:none}
  .h-stat:nth-child(-n+2){border-bottom:1px solid var(--line-dark)}
  .h-services-grid{grid-template-columns:repeat(2,1fr)}
  .h-process-steps{grid-template-columns:repeat(2,1fr);gap:3rem 2rem}
  .h-process-line{display:none}
  .h-feature-grid{grid-template-columns:1fr;gap:3.5rem}
  .h-feature-visual{height:480px}
  .h-testi-grid{grid-template-columns:1fr 1fr}
  .h-testi-card:last-child{grid-column:1/-1}
  .h-team-grid{grid-template-columns:repeat(2,1fr)}
  .h-team-card:last-child{grid-column:1/-1;max-width:50%;margin:0 auto;width:100%}
  .h-faq-grid{grid-template-columns:1fr;gap:3rem}
  .h-cta-final-grid{grid-template-columns:1fr;gap:3rem}
  .h-stats-header, .h-services-header, .h-process-header, .h-team-header{
    grid-template-columns:1fr;gap:2rem
  }
  footer .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
}
@media (max-width: 768px){
  nav{height:64px !important}
  .nav-inner{padding:0 1.25rem !important}
  .nav-cta{padding:8px 14px !important;font-size:.78rem !important}
  .h-container{padding:0 1.25rem}
  .h-hero{padding:100px 0 70px}
  .h-hero h1{font-size:clamp(2rem,9vw,3.4rem)}
  .h-hero-actions .h-btn{flex:1;min-width:140px;padding:14px 20px;font-size:.84rem}
  .h-hero-visual{height:360px}
  .h-hero-floating{padding:10px 14px}
  .h-hero-floating-2 .num{font-size:1.3rem}
  .h-stats, .h-services, .h-process, .h-feature, .h-testi, .h-team, .h-faq, .h-cta-final{padding:80px 0}
  .h-stat{padding:2.5rem 1.75rem}
  .h-services-grid{grid-template-columns:1fr;gap:1rem}
  .h-svc{padding:2rem 1.75rem}
  .h-svc-desc{min-height:auto}
  .h-process-steps{grid-template-columns:1fr;gap:2.5rem}
  .h-feature-visual{height:340px}
  .h-feature-content h2{font-size:clamp(1.7rem,7vw,2.4rem)}
  .h-testi-grid{grid-template-columns:1fr}
  .h-testi-card:last-child{grid-column:auto}
  .h-team-grid{grid-template-columns:1fr}
  .h-team-card:last-child{max-width:100%}
  .h-cta-final h2{font-size:clamp(2rem,9vw,3.2rem)}
  .h-cta-final-card{padding:2rem 1.75rem}
  .h-marquee-track{gap:2.5rem;animation-duration:30s}
  footer{padding:60px 0 30px}
  footer .footer-grid{grid-template-columns:1fr;gap:2.5rem;padding-bottom:40px}
  footer .footer-bottom{flex-direction:column;align-items:flex-start;text-align:left}
}
@media (max-width: 480px){
  .h-stats-grid{grid-template-columns:1fr}
  .h-stat{border-right:none !important;border-bottom:1px solid var(--line-dark) !important}
  .h-stat:last-child{border-bottom:none !important}
  .h-stats-header h2, .h-services-header h2, .h-team-header h2, .h-process-header h2{font-size:clamp(1.8rem,8vw,2.4rem)}
  .h-hero-floating-1{display:none}
}

/* ═══════════════════════════════════════════════════════
   BOOKING MODAL — Premium dark left panel override
═══════════════════════════════════════════════════════ */
.bk-left-panel{
  background:linear-gradient(180deg, var(--void-2) 0%, var(--void) 100%) !important;
  border-right:1px solid var(--line-dark);
  position:relative;overflow:hidden
}
.bk-left-panel::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(70% 50% at 0% 0%, var(--gold-glow), transparent 65%);
  pointer-events:none
}
.bk-overline{color:var(--gold) !important;font-weight:500 !important}
.bk-headline{color:var(--t-light-1) !important;font-weight:300 !important}
.bk-headline em{color:var(--gold) !important}
.bk-subtext{color:var(--t-light-3) !important}
.bk-trust-list li{color:var(--t-light-2) !important}
.bk-check-icon{
  background:rgba(201,168,108,.15) !important;
  border:1px solid var(--gold)
}
.bk-check-icon::after{border-color:var(--gold) !important}
.bk-urgency{border-top:1px solid var(--line-dark) !important}
.bk-urgency-label{color:var(--gold) !important}
.bk-urgency-sub{color:var(--t-light-3) !important}
.bk-urgency-tel{color:var(--t-light-1) !important}
.bk-urgency-note{color:var(--t-light-4) !important}

/* Submit button premium */
.bk-submit{
  background:var(--void-2) !important;
  color:var(--t-light-1) !important;
  border:1px solid var(--line-dark-2);
  box-shadow:0 8px 24px rgba(14,18,32,.25) !important;
  transition:all .25s ease
}
.bk-submit:hover:not(:disabled){
  background:var(--gold) !important;
  color:var(--void) !important;
  border-color:var(--gold) !important;
  transform:translateY(-2px);
  box-shadow:0 12px 32px var(--gold-glow) !important
}