/* ════════════════════════════════════════════════════════════════
   CRISTINA BEAUTY DESIGNER · CBD ELEVATE
   Capa de elevación luxury — carga FINAL (gana la cascada).
   ════════════════════════════════════════════════════════════════
   Construida SOBRE el sistema de tokens existente (no lo reemplaza,
   lo extiende). Tres disciplinas trabajando juntas:
     · frontend-design → tipografía editorial, profundidad de
       superficie, acentos en oro, jerarquía y ritmo visual.
     · UI UX Pro Max  → contraste/accesibilidad, focus visible,
       touch targets, formularios y conversión.
     · Emil Kowalski  → micro-interacción táctil, curvas de easing
       fuertes, feedback de press, transiciones afinadas.

   Principios de seguridad:
     · Mobile-first; todo escala con clamp() o media queries.
     · Hover gateado a (hover:hover) → táctil sin estados pegados.
     · prefers-reduced-motion RE-AFIRMADO al final (no se regresa
       accesibilidad por el orden de carga).
     · !important quirúrgico: solo en las propiedades que elevo, y
       sin aplanar el responsive existente.
     · No elimina ni oculta secciones; no toca la lógica JS.
   ════════════════════════════════════════════════════════════════ */

/* ── 0 · TOKENS AÑADIDOS (no redefinen los existentes) ───────────── */
:root{
  /* Sombras dimensionales con tinte VINO — profundidad luxury real
     (las del sistema base son deliberadamente planas; estas dan cuerpo
     a las superficies clave: cards, CTAs y módulos de conversión). */
  --elev-shadow-card: 0 1px 1px rgba(78,6,16,.05),
                      0 7px 18px -8px rgba(78,6,16,.12),
                      0 26px 52px -24px rgba(78,6,16,.20);
  --elev-shadow-lift: 0 2px 4px rgba(78,6,16,.06),
                      0 20px 40px -12px rgba(78,6,16,.22),
                      0 44px 88px -34px rgba(78,6,16,.26);
  --elev-ring-gold:   0 0 0 1px rgba(201,162,78,.30) inset;

  /* Curvas Emil — más fuertes que las nativas (más “intención”). */
  --elev-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --elev-ease-spring: cubic-bezier(0.34, 1.46, 0.5, 1);
  --elev-press:       130ms;

  /* Filo de oro refinado para hairlines/acentos. */
  --elev-hairline: linear-gradient(90deg,
                     transparent,
                     rgba(201,162,78,.50) 16%,
                     rgba(236,215,164,.95) 50%,
                     rgba(201,162,78,.50) 84%,
                     transparent);
  /* Gradiente de oro champagne con brillo (texto/acentos premium). */
  --elev-gold-sheen: linear-gradient(100deg,
                     #9A7B36 0%, #C9A24E 28%, #ECD7A4 50%,
                     #C9A24E 72%, #9A7B36 100%);
}

/* ════ 1 · REFINAMIENTO TIPOGRÁFICO EDITORIAL (global, sin tamaños) ══
   Lo que separa “se ve bien” de “se siente impreso”: suavizado fino,
   kerning, ligaduras y equilibrio de líneas. No cambia ni un tamaño,
   solo la CALIDAD de render. */
html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body{
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Títulos: optical-sizing (Fraunces brilla con esto) + balance de
   líneas (elimina huérfanas) + tracking afinado en display. */
h1, h2, h3,
.font-display,
.hero-v3-headline, .hero-v3-line-1, .hero-v3-line-2,
.card-title, .visit-card-title, .svc3-head, .faq-summary,
[class*="-headline"], [class*="-title"]{
  font-optical-sizing: auto;
  text-wrap: balance;
}
/* Títulos display muy grandes en Italiana/Fraunces: tracking más ceñido
   = más editorial (la elegancia vive en el detalle del espaciado). */
.hero-v3-headline,
.font-display{
  letter-spacing: -0.012em;
}

/* Eyebrows / kickers (etiquetas en mayúscula con oro): tracking más
   amplio y peso afinado = firma editorial coherente en toda la página. */
[class*="eyebrow"], [class*="kicker"], [class*="-overline"]{
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

/* ════ 2 · PROFUNDIDAD DE SUPERFICIE — CARDS PREMIUM ════════════════
   Sombra dimensional con tinte vino + transición afinada + lift suave
   gateado + feedback de press. La sombra usa !important para asegurar
   la profundidad; el transform de hover NO lo usa → si una card ya
   tiene su propio movimiento, el suyo manda (cero conflicto). */
.card-luxury, .service-card, .testimonial-card,
.visit-card, .visit-social-card, .moment-x-card{
  transition: transform .55s var(--elev-ease-out),
              box-shadow .55s var(--elev-ease-out),
              border-color .45s var(--elev-ease-out) !important;
}
/* lashrail-card: excluida de transition:transform — su layout
   usa data-pos con translate+scale+rotateY encadenados; sobrescribir
   el transform desde aquí saca las cards de su posición. */
.lashrail-card{
  transition: box-shadow .55s var(--elev-ease-out),
              border-color .45s var(--elev-ease-out) !important;
}
@media (hover: hover) and (pointer: fine){
  .card-luxury:hover, .service-card:hover, .testimonial-card:hover,
  .visit-card:hover, .moment-x-card:hover{
    transform: translateY(-6px);
  }
  .card-luxury:hover, .service-card:hover, .testimonial-card:hover,
  .visit-card:hover, .moment-x-card:hover, .lashrail-card:hover{
    box-shadow: var(--elev-shadow-lift) !important;
  }
}
/* Press: Emil. .lashrail-card excluida — no sobreescribir su transform. */
.card-luxury:active, .service-card:active, .testimonial-card:active,
.visit-card:active, .moment-x-card:active{
  transform: translateY(-1px) scale(0.996) !important;
  transition-duration: var(--elev-press) !important;
}

/* ════ 3 · SISTEMA DE CTA — coherencia + conversión + tacto Emil ════
   (a) Coherencia tipográfica: el CTA usaba 'Inter' (fuera del sistema);
       lo paso a Manrope, la sans de la marca.
   (b) Transición por propiedad (no 'all' — regla Emil).
   (c) Feedback de press real en todos los CTA. */
.btn-premium{
  font-family: 'Manrope', sans-serif !important;
}
.btn-premium, .btn-ghost, .qs-cta, .lux-next-btn, .svc3-diag-btn,
.testi-cta-btn, .visit-card-cta, .lashrail-btn, .trabaja-row-cta{
  transition: transform .35s var(--elev-ease-out),
              box-shadow .35s var(--elev-ease-out),
              background-color .35s var(--elev-ease-out),
              border-color .35s var(--elev-ease-out),
              color .35s var(--elev-ease-out) !important;
}
/* Hover del CTA primario: realce de oro más rico y dimensional. */
@media (hover: hover) and (pointer: fine){
  .btn-premium:hover{
    box-shadow: 0 14px 44px -12px rgba(201,162,78,.55),
                0 0 36px rgba(201,162,78,.22),
                var(--elev-ring-gold) !important;
  }
}
/* Press (Emil): el botón confirma que “escuchó” el toque. */
.btn-premium:active, .btn-ghost:active, .qs-cta:active,
.lux-next-btn:active, .svc3-diag-btn:active, .testi-cta-btn:active,
.visit-card-cta:active, .lashrail-btn:active, .trabaja-row-cta:active{
  transform: translateY(0) scale(0.97) !important;
  transition-duration: var(--elev-press) !important;
}

/* ════ 4 · NAVEGACIÓN — micro-pulido ════════════════════════════════
   Subrayado de oro que se revela desde el centro (gentil) + press.
   No toca el glassmorphism ni el estado scrolled existentes. */
.lux-nav-menu a, .lux-nav-link{
  position: relative;
  transition: color .35s var(--elev-ease-out) !important;
}
@media (hover: hover) and (pointer: fine){
  .lux-nav-menu a::after, .lux-nav-link::after{
    content: '';
    position: absolute;
    left: 50%; bottom: -3px;
    width: 0; height: 1px;
    background: var(--gold);
    transform: translateX(-50%);
    transition: width .4s var(--elev-ease-out);
    pointer-events: none;
  }
  .lux-nav-menu a:hover::after, .lux-nav-link:hover::after{
    width: 70%;
  }
}
.lux-nav-menu a:active, .lux-nav-link:active{ opacity: .82; }

/* ════ 5 · FORMULARIOS — el Diagnóstico IA es ruta de conversión ════
   Focus ring de oro suave + bordes afinados + transición. Accesible
   (UI UX Pro Max: focus visible, contraste, target táctil). */
input[type="text"], input[type="tel"], input[type="email"],
input[type="search"], textarea, select,
#diag-form input, #diagnostico input, #diagnostico textarea{
  transition: border-color .3s var(--elev-ease-out),
              box-shadow .3s var(--elev-ease-out),
              background-color .3s ease !important;
}
input[type="text"]:focus-visible, input[type="tel"]:focus-visible,
input[type="email"]:focus-visible, input[type="search"]:focus-visible,
textarea:focus-visible, select:focus-visible,
#diag-form input:focus-visible, #diagnostico input:focus-visible{
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201,162,78,.18),
              0 1px 2px rgba(78,6,16,.06) !important;
  outline: none !important;
}
/* Target táctil mínimo en móvil (UI UX Pro Max ≥44px). */
@media (max-width: 768px){
  input[type="text"], input[type="tel"], input[type="email"],
  textarea, select, #diag-form input{
    min-height: 46px;
  }
}

/* ════ 6 · FAQ — acordeón editorial ═════════════════════════════════
   Acento de oro al abrir + interacción de la cabecera + press.
   No toca el mecanismo nativo <details>; solo lo viste mejor. */
.faq-summary{
  transition: color .3s var(--elev-ease-out),
              background-color .3s ease,
              padding-left .35s var(--elev-ease-out) !important;
  cursor: pointer;
}
.faq-item{
  transition: border-color .4s var(--elev-ease-out) !important;
}
.faq-item[open]{
  border-color: rgba(201,162,78,.35) !important;
}
.faq-item[open] > .faq-summary{
  color: var(--cherry) !important;
}
@media (hover: hover) and (pointer: fine){
  .faq-summary:hover{ color: var(--cherry) !important; }
}
.faq-summary:active{ transform: scale(0.996); }
@media (max-width: 768px){
  .faq-summary{ min-height: 44px; }
}

/* ════ 7 · ACENTOS EN ORO — hairlines y divisores ═══════════════════
   Filo de oro luminoso para separadores finos (firma de marca). */
.lux-divider, .section-divider, .hr-gold, .cbd-divider{
  border: none !important;
  height: 1px !important;
  background: var(--elev-hairline) !important;
}

/* ════ 8 · FEEDBACK GLOBAL DE PRESS (Emil) ══════════════════════════
   Cualquier botón/control interactivo confirma el toque. Gentil,
   universal, y nunca bloquea la interacción. */
button:not(.btn-premium):not(.btn-ghost),
[role="button"]:not(.faq-summary){
  transition: transform var(--elev-press) var(--elev-ease-out),
              opacity var(--elev-press) ease;
}
button:not(.btn-premium):not(.btn-ghost):active,
[role="button"]:not(.faq-summary):active{
  transform: scale(0.97);
}

/* ════ 9 · IMÁGENES — encuadre premium (sutil, gateado) ═════════════
   Micro-zoom al hover en figuras con foco, sin tocar la galería gal2
   (que tiene su propio sistema). */
@media (hover: hover) and (pointer: fine){
  .visit-card img, .testimonial-card img{
    transition: transform .7s var(--elev-ease-out);
  }
  .visit-card:hover img, .testimonial-card:hover img{
    transform: scale(1.035);
  }
}

/* ════ 9.5 · PRESENCIA SIEMPRE-VISIBLE (conversión + jerarquía) ═════
   Elevación en reposo de lo que más importa a la reserva: el CTA
   primario y las cards de paquetes ganan cuerpo y deseo aun sin
   interacción. Sutil, on-brand, sin afectar fondos oscuros. */
.btn-ghost{
  font-family: 'Manrope', sans-serif !important;
}
.btn-premium{
  box-shadow: 0 2px 6px rgba(78,6,16,.12),
              0 11px 30px -12px rgba(78,6,16,.28),
              0 0 0 1px rgba(201,162,78,.22) !important;
}
.card-luxury{
  box-shadow: var(--elev-shadow-card) !important;
}

/* ════ 10 · REDUCED MOTION — RE-AFIRMADO ════════════════════════════
   Crítico: como esta capa carga al final con !important, debo volver a
   imponer reduced-motion aquí o se perdería por orden de cascada.
   (Accesibilidad UI UX Pro Max P1 + criterio Emil: cero movimiento de
   posición; se conservan color/opacidad que ayudan a comprender.) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .card-luxury:active, .service-card:active, .testimonial-card:active,
  .visit-card:active, .moment-x-card:active, .lashrail-card:active,
  .btn-premium:active, .btn-ghost:active, .qs-cta:active,
  .lux-next-btn:active, .svc3-diag-btn:active, .testi-cta-btn:active,
  button:active, [role="button"]:active{
    transform: none !important;
  }
  .card-luxury:hover, .service-card:hover, .testimonial-card:hover,
  .visit-card:hover, .moment-x-card:hover, .lashrail-card:hover,
  .visit-card:hover img, .testimonial-card:hover img{
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   CRISTINA BEAUTY DESIGNER · CBD PHASE 2
   Intervención visual profunda — carga DESPUÉS de cbd-elevate.css.
   ════════════════════════════════════════════════════════════════
   Fase 2 = cambios VISIBLES y estructurales de lenguaje visual, no
   solo pulido. Tres disciplinas, con más fuerza:
     · frontend-design → jerarquía tipográfica real (escala/peso),
       profundidad de paleta aplicada, acento de oro luminoso, ritmo.
     · UI UX Pro Max  → des-saturación móvil, respiración, legibilidad,
       jerarquía de conversión, target táctil.
     · Emil Kowalski  → tacto fino que se siente caro, sin exceso.
   Seguridad: mobile-first, hover gateado, reduced-motion re-afirmado,
   sin romper layout (verificado con render headless).
   ════════════════════════════════════════════════════════════════ */

/* ════ 1 · PALETA APLICADA — más profunda y luminosa ════════════════
   No cambia la identidad (vino/oro/perla); intensifica su APLICACIÓN:
   oro más presente y con brillo, vino más rico, contraste más nítido. */
:root{
  /* Oro con más cuerpo para acentos sólidos (más saturado, sigue cálido) */
  --p2-gold:        #C9A24E;
  --p2-gold-bright: #E2BE6B;
  /* Vino más profundo y dimensional para gradientes oscuros */
  --p2-grad-wine:   linear-gradient(155deg, #9A0E1E 0%, #6E0518 46%, #3E040D 100%);
  /* Ivory base con un punto más de calidez editorial */
  --p2-ivory-warm:  #FBF4E8;
}

/* Eyebrows / kickers: tracking más amplio + oro más vivo = firma
   editorial inmediata y coherente en toda la página. */
.hero-v3-eyebrow-text, .svc3-kicker, .qs-eyebrow, .moment-x-eyebrow,
.srv-x-eyebrow, .net-eyebrow, .mfx-eyebrow, .lux-next-eyebrow,
.trabaja-eyebrow, .reserve-ritual-kicker, .sticky-cta-eyebrow,
[class*="eyebrow"], [class*="kicker"]{
  letter-spacing: 0.34em !important;
  font-weight: 600 !important;
}

/* Números editoriales (cards, FAQ, pasos): más grandes y dorados =
   jerarquía visible y aire de revista. */
.card-number, .faq-num, .moment-x-card-num, .lashrail-card-num,
[class*="-num"]:not([class*="phone"]):not(input){
  color: var(--p2-gold) !important;
  letter-spacing: 0.04em !important;
}

/* Divisores y costuras: filo de oro luminoso (ya en elevate, aquí se
   refuerza el brillo central). */
.lux-divider, .section-divider, .hr-gold, .cbd-divider, .cbd-footer-accent{
  background: linear-gradient(90deg,
    transparent,
    rgba(201,162,78,.45) 14%,
    rgba(226,190,107,1) 50%,
    rgba(201,162,78,.45) 86%,
    transparent) !important;
}

/* Riqueza del vino: el header de métricas y secciones oscuras ganan
   profundidad dimensional (degradado más contrastado). */
#metrics{
  background: var(--p2-grad-wine) !important;
}

/* ════ 2 · JERARQUÍA TIPOGRÁFICA — escala real, no solo kerning ═════
   Sube el contraste entre display y cuerpo: titulares más grandes y
   ceñidos, eyebrows más finos. Todo con clamp() → responsive seguro.
   (Verificado contra overflow en móvil con render.) */

/* Titular hero — la primera impresión manda. Más presencia + tracking
   negativo editorial. */
.headline-hero, .hero-v3-headline{
  letter-spacing: -0.022em !important;
  line-height: 0.96 !important;
  font-weight: 400;
}

/* Titulares de sección — un punto más grandes y ceñidos. */
.headline-xl{
  font-size: clamp(2.6rem, 5.2vw, 4.4rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.02 !important;
}
.headline-section{
  letter-spacing: -0.015em !important;
  line-height: 1.06 !important;
}

/* Palabra-acento en cursiva (Cormorant) dentro de titulares: que
   respire y contraste con más color. */
.headline-xl .italic, .headline-section .italic,
.font-editorial.italic{
  font-style: italic;
}

/* Cuerpo editorial: medida legible + interlineado generoso (lectura
   premium, UI UX Pro Max readable-measure). */
.font-editorial:not(.italic), p.cbd-dcopy, p.cbd-mcopy{
  line-height: 1.62;
}

/* ════ 3 · SUPERFICIES — cards con cuerpo siempre visible ══════════
   Más profundidad en reposo (no solo en hover), borde de oro sutil y
   radio más generoso = sofisticación inmediata. */
.card-luxury, .service-card, .visit-card, .moment-x-card{
  border: 1px solid rgba(201,162,78,.18) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 1px rgba(78,6,16,.05),
              0 8px 20px -8px rgba(78,6,16,.14),
              0 30px 60px -28px rgba(78,6,16,.22) !important;
}
.testimonial-card{
  border-radius: 18px !important;
  box-shadow: 0 1px 1px rgba(78,6,16,.04),
              0 10px 26px -10px rgba(78,6,16,.16) !important;
}
@media (hover: hover) and (pointer: fine){
  .card-luxury:hover, .service-card:hover, .visit-card:hover, .moment-x-card:hover{
    border-color: rgba(201,162,78,.42) !important;
    box-shadow: 0 2px 4px rgba(78,6,16,.06),
                0 22px 44px -12px rgba(78,6,16,.24),
                0 48px 92px -36px rgba(78,6,16,.28) !important;
  }
}

/* ════ 4 · CTA — más presencia, jerarquía y deseo de reserva ═══════
   El CTA primario gana cuerpo y un realce de oro en reposo; el ghost
   se afina para una jerarquía clara (primario vs secundario). */
.btn-premium{
  padding: 1.05rem 2.3rem !important;
  letter-spacing: 0.2em !important;
  box-shadow: 0 3px 8px rgba(78,6,16,.16),
              0 14px 34px -12px rgba(78,6,16,.32),
              0 0 0 1px rgba(201,162,78,.28) !important;
}
@media (hover: hover) and (pointer: fine){
  .btn-premium:hover{
    box-shadow: 0 16px 48px -12px rgba(201,162,78,.6),
                0 0 42px rgba(201,162,78,.26),
                0 0 0 1px rgba(201,162,78,.55) !important;
  }
}
.btn-ghost{
  letter-spacing: 0.18em !important;
}

/* ════ 5 · FAQ — más clara, usable y refinada ══════════════════════ */
.faq-item{
  border-radius: 14px !important;
  transition: border-color .4s var(--elev-ease-out, ease),
              background-color .4s ease !important;
}
.faq-summary{
  padding: 1.15rem 1.25rem !important;
  gap: 1rem !important;
}
.faq-num{
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}
.faq-q{
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  line-height: 1.35 !important;
}
.faq-toggle{
  transition: transform .35s var(--elev-ease-out, ease), color .3s ease !important;
}
.faq-item[open] .faq-toggle{
  transform: rotate(45deg) !important;   /* el "+" gira a "×" */
  color: var(--p2-gold) !important;
}
.faq-item[open]{
  background: rgba(251,246,237,.5) !important;
  border-color: rgba(201,162,78,.40) !important;
}

/* ════ 6 · FOOTER — más ordenado, elegante y confiable ═════════════ */
.cbd-footer-col-title{
  letter-spacing: 0.22em !important;
  color: var(--p2-gold) !important;
}
.cbd-footer-link{
  transition: color .3s var(--elev-ease-out, ease),
              padding-left .3s var(--elev-ease-out, ease) !important;
}
@media (hover: hover) and (pointer: fine){
  .cbd-footer-link:not(.cbd-footer-link-static):hover{
    color: var(--gold-light, #ECD7A4) !important;
    padding-left: 6px !important;
  }
}
.cbd-footer-link-cta{
  color: var(--p2-gold-bright) !important;
  font-weight: 600 !important;
}

/* ════ 7 · MÓVIL — menos saturación, más respiración y ritmo ═══════
   Petición explícita: reducir ruido decorativo, mejorar legibilidad,
   aire y jerarquía en pantallas pequeñas. */
@media (max-width: 768px){
  /* Atenúa elementos puramente decorativos que recargan el móvil. */
  .hero-geom-layer, .hero-svg-art, [class*="-watermark"],
  [aria-hidden="true"][class*="geom"]{
    opacity: 0.4 !important;
  }
  /* Marcas de agua gigantes: mucho más discretas en móvil. */
  .cbd-footer-mark, [class*="footer-mark"]{
    opacity: 0.05 !important;
  }
  /* Más aire de lectura en titulares de sección. */
  .headline-xl{
    font-size: clamp(2.2rem, 9vw, 3rem) !important;
    line-height: 1.05 !important;
  }
  /* Respiración interna de cards en móvil. */
  .card-luxury, .service-card, .visit-card{
    border-radius: 18px !important;
  }
  /* Cuerpo más legible. */
  p{ line-height: 1.6; }
}

/* ════ 8 · REDUCED MOTION — re-afirmado (accesibilidad P1) ══════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .faq-item[open] .faq-toggle{ transform: rotate(45deg) !important; }
}

/* ════════════════════════════════════════════════════════════════
   CRISTINA BEAUTY DESIGNER · CBD PHASE 3 — quirúrgico por sección
   Carga DESPUÉS de cbd-phase2.css.
   ════════════════════════════════════════════════════════════════
   Intervención enfocada en las 5 secciones que más venden:
   Hero · Servicios · Paquetes · Diagnóstico IA · CTAs.
   Solo APARIENCIA: no toca lógica, data-attributes, IDs ni la
   estructura que usan GSAP / lashrail / diag-engine.
   Verificado antes/después con render headless.
   ════════════════════════════════════════════════════════════════ */

:root{
  --p3-gold-grad: linear-gradient(100deg,#9A7B36,#C9A24E 38%,#ECD7A4 52%,#C9A24E 66%,#9A7B36);
  --p3-ease: cubic-bezier(0.22,1,0.36,1);
}

/* ══════════════════════════════════════════════════════════════════
   1 · HERO — primera impresión más impactante
   ══════════════════════════════════════════════════════════════════ */
/* Eyebrow del hero: más fino, dorado y editorial. */
.hero-v3-eyebrow-text{
  letter-spacing: 0.42em !important;
  font-weight: 600 !important;
}
/* CTA primario del hero (la conversión nº1): más cuerpo, oro
   dimensional y un realce que invita. NO toca .magnetic-pro. */
.hero-v3-cta-primary{
  box-shadow: 0 4px 10px rgba(78,6,16,.18),
              0 16px 40px -12px rgba(78,6,16,.34),
              0 0 0 1px rgba(201,162,78,.34) !important;
}
@media (hover: hover) and (pointer: fine){
  .hero-v3-cta-primary:hover{
    box-shadow: 0 18px 52px -12px rgba(201,162,78,.6),
                0 0 44px rgba(201,162,78,.28),
                0 0 0 1px rgba(201,162,78,.6) !important;
  }
}
.hero-v3-cta-primary:active{ transform: translateY(0) scale(.975) !important; }
/* Ghost del hero: jerarquía clara como secundario, pero elegante. */
.hero-v3-cta-ghost{
  letter-spacing: 0.16em !important;
}
@media (hover: hover) and (pointer: fine){
  .hero-v3-cta-ghost:hover{
    border-color: var(--gold, #C9A24E) !important;
    color: var(--cherry, #7A0712) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   2 · SERVICIOS — más fáciles de entender y elegir
   ══════════════════════════════════════════════════════════════════ */
/* El gran número de capítulo: pieza editorial protagonista. */
.svc3-num{
  background: var(--p3-gold-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  opacity: .9 !important;
  letter-spacing: -0.02em !important;
}
/* Kicker de capítulo: más fino y con oro vivo. */
.svc3-kicker{
  letter-spacing: 0.36em !important;
  color: var(--gold-dark, #9A7B36) !important;
  font-weight: 600 !important;
}
/* Título de capítulo: jerarquía más fuerte; el acento en cursiva
   gana color y aire. */
.svc3-title{
  letter-spacing: -0.015em !important;
  line-height: 1.04 !important;
}
.svc3-title em{
  color: var(--wine-bright, #A6172A) !important;
  font-style: italic !important;
}
.svc3-lead{
  line-height: 1.55 !important;
}
/* Card del carrusel: superficie más premium y profunda (sin tocar
   la lógica lashrail ni sus data-attributes). */
.lashrail-card{
  border-radius: 18px !important;
  box-shadow: 0 2px 6px rgba(78,6,16,.10),
              0 22px 50px -18px rgba(78,6,16,.30) !important;
}
.lashrail-card-num{
  background: var(--p3-gold-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Precios escaneables (compartido): el precio es decisión de compra,
   debe leerse al instante y sentirse premium. */
.price-tag{
  font-family: 'Italiana', serif !important;
  font-size: clamp(2.2rem, 3.4vw, 2.9rem) !important;
  line-height: 1 !important;
  color: var(--cherry, #7A0712) !important;
  letter-spacing: 0.005em !important;
}

/* ══════════════════════════════════════════════════════════════════
   3 · PAQUETES — más atractivos y orientados a reserva
   ══════════════════════════════════════════════════════════════════ */
/* Superficie de las cards de paquete: cuerpo y borde de oro. */
#paquetes .service-card{
  border: 1px solid rgba(201,162,78,.20) !important;
  box-shadow: 0 1px 1px rgba(78,6,16,.05),
              0 10px 26px -10px rgba(78,6,16,.16),
              0 34px 64px -30px rgba(78,6,16,.22) !important;
}
@media (hover: hover) and (pointer: fine){
  #paquetes .service-card:hover{
    transform: translateY(-8px);
    border-color: rgba(201,162,78,.45) !important;
  }
}
/* Descripción del paquete: legible y elegante. */
#paquetes .pack-for{
  line-height: 1.5 !important;
  min-height: 2.8em;
}
/* Lista de beneficios: viñeta de oro tipo "incluido" → claridad +
   percepción de valor (fácil de elegir). */
#paquetes ul li{
  list-style: none !important;
  position: relative;
  padding-left: 1.4rem !important;
  margin-bottom: .15rem;
}
#paquetes ul li::before{
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold, #C9A24E);
  box-shadow: 0 0 0 3px rgba(201,162,78,.18);
}
/* "Ahorra S/X" → pill de valor, visible y deseable. */
#paquetes .text-xs.italic{
  display: inline-block;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  padding: .28rem .7rem !important;
  border-radius: 999px;
  background: rgba(201,162,78,.14) !important;
  color: var(--gold-dark, #9A7B36) !important;
}

/* ★ Card DESTACADA (Signature Glow) — claramente LA elección.
   Clase añadida en HTML preservando todo lo demás. */
.pkg-featured{
  border-width: 2px !important;
  box-shadow: 0 6px 16px rgba(78,6,16,.28),
              0 30px 70px -20px rgba(122,7,18,.45),
              0 0 44px -6px rgba(201,162,78,.30) !important;
}
.pkg-featured .text-xs.italic{
  background: rgba(236,215,164,.16) !important;
  color: var(--gold-light, #ECD7A4) !important;
}
.pkg-featured ul li::before{
  background: var(--gold-light, #ECD7A4);
  box-shadow: 0 0 0 3px rgba(236,215,164,.16);
}
@media (min-width: 1024px){
  .pkg-featured{
    transform: translateY(-14px) scale(1.025);
    z-index: 2;
  }
  @media (hover: hover) and (pointer: fine){
    .pkg-featured:hover{ transform: translateY(-20px) scale(1.025); }
  }
}

/* ══════════════════════════════════════════════════════════════════
   4 · DIAGNÓSTICO IA — apariencia de herramienta premium
   ══════════════════════════════════════════════════════════════════ */
/* El "instrumento": superficie con cuerpo, filo de oro y profundidad
   real (deja de parecer un formulario). */
.diag-machine{
  border: 1px solid rgba(201,162,78,.26) !important;
  border-radius: 24px !important;
  box-shadow: 0 2px 4px rgba(78,6,16,.05),
              0 24px 60px -22px rgba(78,6,16,.28),
              0 60px 120px -50px rgba(78,6,16,.22) !important;
  background:
     radial-gradient(120% 80% at 50% -10%, rgba(201,162,78,.06), transparent 60%),
     linear-gradient(180deg, #FFFFFF 0%, var(--paper, #FAF5EC) 100%) !important;
}
/* Indicador de paso "01/04": número editorial + total discreto. */
.diag-step-num{
  font-family: 'Italiana', serif !important;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
  color: var(--cherry, #7A0712) !important;
  letter-spacing: .02em !important;
}
/* Barra de progreso: precisión de instrumento (track fino + fill oro). */
.diag-step-progress{
  border-radius: 999px !important;
}
.diag-progress-fill{
  background: linear-gradient(90deg, var(--gold-dark,#9A7B36), var(--gold,#C9A24E), var(--gold-light,#ECD7A4)) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 12px rgba(201,162,78,.4) !important;
  transition: width .6s var(--p3-ease) !important;
}
/* Título de pregunta: más fuerte y editorial. */
.diag-step-title{
  letter-spacing: -0.01em !important;
  line-height: 1.12 !important;
}
/* Opciones (generadas por diag-engine.js): cards interactivas premium.
   Solo restyle de .diag-option — la lógica las crea, el CSS las viste. */
.diag-option{
  border: 1px solid rgba(201,162,78,.22) !important;
  border-radius: 14px !important;
  transition: transform .28s var(--p3-ease),
              border-color .28s var(--p3-ease),
              box-shadow .28s var(--p3-ease),
              background-color .28s var(--p3-ease) !important;
}
@media (hover: hover) and (pointer: fine){
  .diag-option:hover{
    transform: translateY(-2px);
    border-color: rgba(201,162,78,.5) !important;
    box-shadow: 0 10px 26px -10px rgba(78,6,16,.18) !important;
  }
}
.diag-option:active{ transform: scale(.99) !important; }
.diag-option.selected, .diag-option[aria-checked="true"]{
  border-color: var(--gold, #C9A24E) !important;
  box-shadow: 0 0 0 2px rgba(201,162,78,.22) !important;
}
/* Stats de invitación: números dorados con más presencia. */
.diag-invite-num{
  color: var(--gold-dark, #9A7B36) !important;
  letter-spacing: .01em !important;
}
.diag-invite-lbl{
  letter-spacing: .22em !important;
}
/* Badge "IA lista para ti": filo de oro más definido. */
.diag-ai-label{
  letter-spacing: .26em !important;
}

/* ══════════════════════════════════════════════════════════════════
   5 · CTAs — más claros, visibles y persuasivos (refuerzo global)
   ══════════════════════════════════════════════════════════════════ */
/* El CTA de paquete gana cuerpo y consistencia con el sistema. */
#paquetes .reserve-link{
  letter-spacing: .2em !important;
}
.reserve-link:active{ transform: scale(.97) !important; }

/* ══════════════════════════════════════════════════════════════════
   6 · MÓVIL — menos saturación, más aire, mejor lectura/conversión
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  /* Card destacada: sin desplazamiento que rompa el flujo apilado. */
  .pkg-featured{ transform: none !important; }
  /* Decorativos del diagnóstico: discretos en móvil. */
  #diagnostico [aria-hidden="true"][style*="blur"]{ opacity: .03 !important; }
  /* Más aire en el instrumento. */
  .diag-machine{ border-radius: 20px !important; }
  /* Números de capítulo de servicios: presentes pero sin saturar. */
  .svc3-num{ opacity: .8 !important; }
  /* Precios bien legibles en móvil. */
  .price-tag{ font-size: clamp(2rem, 9vw, 2.6rem) !important; }
}

/* ══════════════════════════════════════════════════════════════════
   7 · REDUCED MOTION — re-afirmado
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .pkg-featured{ transform: none !important; }
  .hero-v3-cta-primary:active, .diag-option:active, .reserve-link:active{
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   CRISTINA BEAUTY DESIGNER · CBD-FIX-CARDS
   Carga ÚLTIMA (tras cbd-phase3.css).
   ════════════════════════════════════════════════════════════════
   Dos correcciones quirúrgicas:
   1. Cards lashrail — glass UHD: quita el overlay oscuro que estaba
      ENCIMA de la imagen y lo reemplaza por sombra exterior + filo
      de cristal puro en el borde. Imagen 100% nítida.
   2. Zoom elegante en imágenes de Cejas / Lami / Depilación —
      restaura el micro-zoom que existía pero había quedado inhibido
      por conflictos de especificidad (transition-duration más breve
      que el !important de cristina-optimize).
   Reglas de seguridad:
     · No se toca el sistema de posicionamiento data-pos.
     · No se toca GSAP ni lashrail.js.
     · hover gateado a (hover:hover) — táctil sin estados pegados.
     · prefers-reduced-motion re-afirmado.
   ════════════════════════════════════════════════════════════════ */

/* ══ 1 · CARDS LASHRAIL — glass UHD ═══════════════════════════════

   ANTES: ::after ponía un gradiente vino al 55% de opacidad
   DENTRO de la card, encima de la imagen → la apagaba y opacaba.

   AHORA:
   · Se anula el ::after oscuro (contenido vacío + sin fondo).
   · La sombra exterior pasa al box-shadow de la propia card.
   · El glass ::before de la card central se afina: reflejo solo
     en el borde superior-izquierdo (filo de luz, no capa completa).
   · La imagen en data-pos="0" sale con brillo/contraste UHD real.
   La sombra de profundidad que rodeaba el carrusel se mantiene
   vía box-shadow exterior (nunca dentro de la imagen). */

/* Quitar el overlay oscuro interno */
.lashrail-card::after {
  background: none !important;
  /* El tag de nombre/número vive en z-index:3 en el HTML;
     el ::after ya no debe interferir con la imagen. */
}

/* Box-shadow exterior más dimensional con tinte vino
   (reemplaza la función de "profundidad" que hacía el ::after) */
.lashrail-card[data-pos="0"] {
  box-shadow:
    0 0 0 1px rgba(201,169,97,.55),          /* filo de oro */
    0 0 0 4px rgba(255,255,255,.07),          /* halo de cristal */
    0 32px 72px -12px rgba(74,10,10,.60),    /* sombra proyectada */
    0 60px 120px -30px rgba(74,10,10,.35),   /* penumbra profunda */
    0 -6px 32px rgba(201,162,78,.08) !important;  /* halo de oro suave */
}

/* Glass ::before refinado: solo el filo superior-izquierdo
   (corte de luz, efecto UHD — no capa sobre toda la imagen) */
.lashrail-card[data-pos="0"]::before {
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.32) 0%,
      rgba(255,255,255,.10) 8%,
      transparent 22%),
    linear-gradient(to bottom,
      rgba(255,255,255,.08) 0%,
      transparent 16%) !important;
  /* Confinado al borde: usa un gradiente que se desvanece rápido
     para que el centro de la imagen quede libre y nítido */
  mix-blend-mode: screen !important;
  border-radius: inherit !important;
}

/* Imagen de la card central: UHD real
   saturate ligeramente más rico + contrast justo + brightness cero
   (sin aclarar, que apaga los tonos oscuros de lujo) */
.lashrail-card[data-pos="0"] img {
  filter: saturate(1.08) contrast(1.04) brightness(1.00)
          drop-shadow(0 0 0 transparent) !important;
  image-rendering: -webkit-optimize-contrast; /* Chrome UHD hint */
}

/* Cards laterales: sin overlay interno (solo su blur+opacity nativo) */
.lashrail-card[data-pos="1"] img,
.lashrail-card[data-pos="-1"] img,
.lashrail-card[data-pos="2"] img,
.lashrail-card[data-pos="-2"] img {
  /* No añadir filtros extra — ya tienen blur/brightness en el padre */
  filter: none;
}

/* ══ 2 · ZOOM ELEGANTE EN CEJAS / LAMI / DEPILACIÓN ═══════════════

   Las reglas de hover con scale() YA existen en el HTML inline y en
   svc3-services.css. El problema era que la transition en
   cristina-optimize.css (línea 99) define una duración con
   !important que en algunos casos ganaba sobre la del hover handler.
   Se reafirman aquí con mayor especificidad y !important para que
   las transiciones de imagen sean suaves y el scale() se vea.

   Clases objetivo:
   · .srv-x-ext-media img    → Cejas (cards con scale(1.08) en hover)
   · .srv-x-lami-feat-media img → Lami Lash / Lami Brow (scale 1.05)
   · .svc3-depil-visual img  → Depilación (scale 1.05)
   · .svc3-card-media img    → Cards de servicio genéricas
   · .srv-x-panel-media img  → Paneles de servicio
   Todas con overflow:hidden en el padre → zoom contenido. */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  /* ── TRANSICIONES (especificidad alta para ganar sobre cristina-optimize) */

  /* Imagen visual lateral de Cejas (la grande a la derecha del grid) */
  .svc3-cejas-visual img {
    transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
  }
  /* Thumbnail de filas de servicio (Brow Henna, Diseño Cejas, Tinturación) */
  .svc3-row:hover .svc3-row-media img {
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  /* Imagen featured de Lami Lash / Lami Brow */
  .lami-featured-image {
    overflow: hidden;
  }
  .lami-featured-image img {
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
  }
  /* Depilación */
  .svc3-depil-visual img {
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
  }
  /* Cards genéricas de servicio (svc3-card-media) */
  .svc3-card-media img {
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.7s ease !important;
    will-change: transform;
  }

  /* ── HOVER ZOOM RULES */

  /* Cejas visual — zoom editorial desde el hover del bloque */
  .svc3-cejas-grid:hover .svc3-cejas-visual img,
  .svc3-cejas-visual:hover img {
    transform: scale(1.06) !important;
  }

  /* Thumbnails filas Cejas */
  .svc3-row:hover .svc3-row-media img {
    transform: scale(1.08) !important;
  }

  /* Lami Lash / Lami Brow featured image */
  .lami-featured:hover .lami-featured-image img,
  .lami-featured-image:hover img {
    transform: scale(1.05) !important;
  }

  /* Depilación */
  .svc3-depil-visual:hover img {
    transform: scale(1.05) !important;
  }

  /* Cards genéricas */
  .svc3-card:hover .svc3-card-media img {
    transform: scale(1.05) !important;
  }
}

/* ══ 3 · REDUCED MOTION — re-afirmado ═══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .lashrail-card::before,
  .lashrail-card::after { transition: none !important; }

  .svc3-cejas-visual img,
  .svc3-row-media img,
  .lami-featured-image img,
  .svc3-depil-visual img,
  .svc3-card-media img {
    transition: none !important;
    will-change: auto;
  }
  .svc3-cejas-grid:hover .svc3-cejas-visual img,
  .svc3-cejas-visual:hover img,
  .svc3-row:hover .svc3-row-media img,
  .lami-featured:hover .lami-featured-image img,
  .lami-featured-image:hover img,
  .svc3-card:hover .svc3-card-media img,
  .svc3-depil-visual:hover img {
    transform: none !important;
    filter: none !important;
  }
}

/* ══ 4 · SCROLL TARGET — #reservar-iframe ══════════════════════════
   El botón "Reservar Beauty Session" del carrusel de pestañas apunta
   ahora a #reservar-iframe (el contenedor del Setmore + título).
   scroll-margin-top compensa el nav sticky (≈72px) más un respiro
   visual de 16px para que el título quede perfectamente encuadrado. */
#reservar-iframe {
  scroll-margin-top: 88px;
}

/* ══ 5 · iPad VERTICAL FIX (768px – 1023px) ════════════════════════
   Tres correcciones quirúrgicas exclusivas para iPad en modo portrait.
   NO afectan mobile (<768px) ni desktop (≥1024px).

   A) Nav: reduce la barra para que logo + "ABIERTO LUN-SÁB" + RESERVAR
      quepan sin chocarse, y ajusta el gap del logo.
   B) Dropdown: añade max-width y overflow para que el panel de
      "Servicios" (y cualquier otro) no se desborde de la pantalla.
   C) Hero: limita min-height a un valor razonable para iPad portrait
      (el hero heredaba 100vh → ~1180px de espacio en blanco).
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {

  /* A · NAV BAR ─────────────────────────────────────────────────── */

  /* Reduce el gap lateral para que los elementos no se aprieten */
  .lux-nav-bar {
    padding-left: clamp(1rem, 3vw, 1.5rem) !important;
    padding-right: clamp(1rem, 3vw, 1.5rem) !important;
    gap: 0.75rem !important;
  }

  /* Logo: reduce gap entre "CRISTINA" y el divisor "| BEAUTY DESIGNER" */
  .lux-nav-logo {
    gap: 0.55rem !important;
  }

  /* "BEAUTY DESIGNER" un poco más pequeño para que no apriete */
  .lux-nav-logo-sub {
    font-size: 0.52rem !important;
    letter-spacing: 0.18em !important;
  }

  /* Reduce gap entre "ABIERTO" y el botón RESERVAR */
  .lux-nav-actions {
    gap: 0.55rem !important;
  }

  /* "ABIERTO · LUN-SÁB": texto más compacto */
  .lux-nav-status {
    font-size: 0.58rem !important;
    letter-spacing: 0.1em !important;
    gap: 0.35rem !important;
  }

  /* Botón RESERVAR: padding reducido para que no desborde */
  .lux-nav-cta {
    padding: 0.55rem 1rem !important;
    font-size: 0.68rem !important;
  }

  /* B · DROPDOWN PANEL ──────────────────────────────────────────── */

  /* El panel usa left:50% + translateX(-50%) sin límite de viewport.
     Se ancla al borde izquierdo del ítem y se acota a la pantalla. */
  .lux-nav-panel {
    left: auto !important;
    right: auto !important;
    transform: translateY(10px) !important;
  }
  .lux-nav-item.is-open .lux-nav-panel {
    transform: translateY(0) !important;
  }

  /* El panel interior: máximo el ancho de la pantalla menos márgenes */
  .lux-nav-panel-inner {
    max-width: min(640px, 94vw) !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }

  /* Las columnas del menú se adaptan al espacio disponible */
  .lux-nav-col {
    min-width: 160px !important;
    flex: 1 1 160px !important;
  }

  /* Panel de feature (promo vino): se achica para no desbordarse */
  .lux-nav-feature {
    min-width: 180px !important;
    flex: 1 1 180px !important;
    padding: 1rem 1.1rem !important;
  }

  /* "Servicios" es el ítem más a la izquierda en el nav desktop;
     en iPad, el panel se alinea desde el borde del ítem sin salirse */
  .lux-nav-item:first-child .lux-nav-panel,
  .lux-nav-item:nth-child(1) .lux-nav-panel {
    left: 0 !important;
    right: auto !important;
    transform: translateY(10px) !important;
  }
  .lux-nav-item:first-child.is-open .lux-nav-panel,
  .lux-nav-item:nth-child(1).is-open .lux-nav-panel {
    transform: translateY(0) !important;
  }

  /* C · HERO ────────────────────────────────────────────────────── */

  /* En iPad portrait (820×1180px), el hero heredaba min-height:100vh
     → generaba ~1180px de espacio en blanco antes del contenido.
     Lo limitamos a un valor cómodo para tablet portrait. */
  .hero-v3 {
    min-height: 85vh !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   iPad PORTRAIT — 3 fixes quirúrgicos
   Rango afectado: 1024px (exacto) donde el nav horizontal aparece
   por primera vez. Mobile (≤768px) y desktop (≥1200px) no se tocan.
   ══════════════════════════════════════════════════════════════════

   PROBLEMA 1 · Panel dropdown desbordado
   El panel usa left:50% + translateX(-50%) centrado en el ítem.
   A 1024px el panel de 3 columnas (min-width:max-content) excede
   el viewport hacia la izquierda cuando el ítem está cerca del
   borde izquierdo del nav. Fix: anclar con clamp()/max-content
   y dejar que el panel empiece desde el borde izquierdo del nav
   en lugar de centrarse en el ítem.

   PROBLEMA 2 · Nav-bar apretado: logo + ABIERTO·LUN-SÁB + RESERVAR
   A exactamente 1024px conviven el logo, el menú horizontal, el
   status "ABIERTO·LUN-SÁB" y el botón RESERVAR — demasiados
   elementos para ese ancho. Fix: reducir gap y padding del nav-bar
   y del logo-sub solo en 1024–1199px.

   PROBLEMA 3 · Espacio gigante en el hero (captura 2 sin menú)
   hero-v3 tiene min-height:100vh que en un iPad Pro 12.9" portrait
   es ~1366px de alto — el contenido no lo llena y deja un bloque
   vacío visible. El @media (max-width:768px) ya lo baja a 90vh pero
   no cubre el rango 769–1024px. Fix: ajustar a 85vh en ese rango.
   ══════════════════════════════════════════════════════════════════ */

/* ── FIX 1 · Panel dropdown: contener dentro del viewport ──────── */
@media (min-width: 1024px) and (max-width: 1199px) {

  /* Anclar el panel al viewport en lugar de centrarlo en el ítem.
     Usamos left:0 + translateX(0) y limitamos el ancho total. */
  .lux-nav-item[data-lux-dd]:first-child .lux-nav-panel,
  .lux-nav-item[data-lux-dd].is-open:first-child .lux-nav-panel {
    left: 0 !important;
    transform: translateY(0) !important;
    right: auto;
  }
  /* Para cualquier panel que desborde: clamp su posición */
  .lux-nav-panel {
    /* left:50% se mantiene pero el panel no puede salir del viewport */
    max-width: calc(100vw - 2rem);
  }
  .lux-nav-item.is-open .lux-nav-panel {
    transform: translateX(-50%) translateY(0);
    /* Si el panel se va a la izquierda del viewport, lo frenamos */
    left: max(50%, 280px) !important;
  }
  /* El panel inner más compacto en tablet */
  .lux-nav-panel-inner {
    gap: 1.2rem !important;
    padding: 1.25rem 1.5rem !important;
  }
  .lux-nav-col {
    min-width: 160px !important;
  }
  .lux-nav-feature {
    min-width: 180px !important;
    padding: 1rem 1.2rem !important;
  }
}

/* ── FIX 2 · Nav-bar: logo y actions no se chocan ──────────────── */
@media (min-width: 1024px) and (max-width: 1199px) {

  /* Menos padding horizontal en el nav-bar */
  .lux-nav-bar {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    gap: 0.6rem !important;
  }
  /* Logo más compacto: sub-texto más pequeño */
  .lux-nav-logo {
    gap: 0.5rem !important;
  }
  .lux-nav-logo-name {
    font-size: 1.1rem !important;
    letter-spacing: 0.1em !important;
  }
  .lux-nav-logo-sub {
    font-size: 0.5rem !important;
    letter-spacing: 0.22em !important;
  }
  .lux-nav-logo-div {
    height: 14px !important;
  }
  /* Menú horizontal: gap más apretado */
  .lux-nav-menu {
    gap: 0.3rem !important;
  }
  .lux-nav-link {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.4rem !important;
  }
  /* Actions: ocultar el status ABIERTO·LUN-SÁB en este rango
     para dar espacio al botón RESERVAR */
  .lux-nav-status {
    display: none !important;
  }
  /* Botón RESERVAR más compacto */
  .lux-nav-cta {
    padding: 0.6rem 1.1rem !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.1em !important;
  }
  .lux-nav-actions {
    gap: 0.5rem !important;
  }
}

/* ── FIX 3 · Hero: eliminar espacio gigante en iPad portrait ────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-v3 {
    min-height: 85vh !important;
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
  }
}

/* ── Seguridad: ninguno de los fixes toca mobile ni desktop puro ──
   Mobile (≤768px): sus reglas propias en index.html siguen vigentes.
   Desktop (≥1200px): sin cambios — todo funciona como antes.
   Reduced motion: no hay animaciones nuevas en estos fixes. ─────── */