/* ============================================================
   CRISTINA BEAUTY DESIGNER · FIXES / REFINEMENT LAYER
   Loaded LAST. Surgical overrides for the requested corrections.
   Items: #1 unified ribbon · #4 CTA visibility · #5 & #6 phrase
   presence · #7 team mobile · #8 service images mobile ·
   #10 desktop refinement · richer luxury gradients.
   ============================================================ */

/* ------------------------------------------------------------
   Richer signature gradients (palette: deep burgundy / soft brush
   / champagne). Deepens the wine family for more cinematic depth
   without hurting contrast. (user-requested "degradados").
   ------------------------------------------------------------ */
:root{
  --burgundy-deep: #6E0518;   /* from reference palette */
  --wine-ink:      #4E0610;
  --brush:         #D8D1C2;   /* soft brush neutral */
  --grad-wine:       linear-gradient(155deg, #8E0A14 0%, #861F18 46%, #6E0518 78%, #4E0610 100%);
  --grad-wine-rich:  linear-gradient(160deg, #A6172A 0%, #861F18 38%, #6E0518 74%, #4E0610 100%);
  --grad-wine-radial: radial-gradient(120% 120% at 20% 0%, #8E0A14 0%, #6E0518 55%, #4E0610 100%);
  --grad-gold:       linear-gradient(120deg, #9A7B36 0%, #C9A24E 30%, #ECD7A4 50%, #C9A24E 70%, #9A7B36 100%);
}

/* ============================================================
   #1 · UNIFIED LUXURY RIBBON  (single continuous marquee)
   ============================================================ */
.cbd-uniband{
  position: relative;
  overflow: hidden;
  background: var(--grad-wine-radial, var(--wine-deep));
  padding: clamp(0.95rem, 2.2vw, 1.55rem) 0;
  border-top: 1px solid rgba(201,169,97,0.20);
  border-bottom: 1px solid rgba(201,169,97,0.20);
  isolation: isolate;
}
.cbd-uniband::before{
  /* hairline gold sheen along the top edge */
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(229,208,152,0.55), transparent);
  z-index: 3;
}
.cbd-uniband-marquee{
  display: flex; width: max-content; will-change: transform;
  animation: cbdUniScroll 42s linear infinite;
}
/* uniband: perpetuo, sin pausa en hover */
.cbd-uniband-track{
  display: flex; align-items: center; flex: 0 0 auto;
  gap: clamp(0.9rem, 2.2vw, 2rem);
  padding-right: clamp(0.9rem, 2.2vw, 2rem);
}
.cbd-uniband-track > span{
  font-family: 'Italiana', serif;
  font-size: clamp(1.05rem, 2vw, 1.7rem);
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  background: var(--grad-gold);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: cbdUniShine 6s linear infinite;
}
.cbd-uniband-em{
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
  -webkit-text-fill-color: initial;
  color: rgba(251,248,243,0.74) !important;
  background: none !important;
}
.cbd-uniband-star{
  -webkit-text-fill-color: initial;
  background: none !important;
  color: var(--gold) !important;
  font-size: 0.7em !important;
  opacity: 0.9;
  transform: translateY(-0.06em);
}
.cbd-uniband-dot{
  -webkit-text-fill-color: initial;
  background: none !important;
  color: rgba(201,169,97,0.5) !important;
  font-size: 0.9em !important;
}
.cbd-uniband-fade{
  position: absolute; top:0; bottom:0; width: clamp(40px, 8vw, 120px);
  z-index: 2; pointer-events: none;
}
.cbd-uniband-fade--l{ left:0;  background: linear-gradient(90deg, var(--wine-ink) 0%, transparent 100%); }
.cbd-uniband-fade--r{ right:0; background: linear-gradient(270deg, var(--wine-ink) 0%, transparent 100%); }
@keyframes cbdUniScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes cbdUniShine{ 0%{ background-position: 220% 0; } 100%{ background-position: -120% 0; } }
@media (max-width: 640px){
  .cbd-uniband{ padding: 0.85rem 0; }
  .cbd-uniband-marquee{ animation-duration: 30s; }
}
@media (prefers-reduced-motion: reduce){
  .cbd-uniband-marquee{ animation: none; transform: translateX(0); }
  .cbd-uniband-track > span{ animation: none; }
}

/* ============================================================
   #4 · "TU TURNO" (cinema CTA) — guarantee it sits ABOVE the card
   so it can never be covered on desktop.
   ============================================================ */
.cbd-cinema-cta{ z-index: 40 !important; }
.cbd-cinema-stage{ z-index: 20; }

/* ============================================================
   #5 · "DISEÑAMOS MIRADAS, NO SOLO PESTAÑAS." — more presence,
   hierarchy, contrast, lighting, editorial impact.
   ============================================================ */
.cbd-show-hero{ z-index: 12; }
.cbd-show-hero::before{
  /* soft cinematic key-light behind the headline */
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; transform: translate(-50%,-50%);
  width: min(120vw, 1100px); height: min(70vh, 560px);
  background: radial-gradient(ellipse at center, rgba(229,208,152,0.16) 0%, rgba(201,169,97,0.06) 38%, transparent 70%);
  filter: blur(8px); pointer-events:none;
}
.cbd-show-h1{
  font-size: clamp(2.9rem, 9vw, 7rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 0.92 !important;
}
.cbd-show-line1{
  color: var(--cream) !important;
  text-shadow: 0 2px 1px rgba(0,0,0,0.25), 0 14px 40px rgba(0,0,0,0.55) !important;
}
.cbd-show-line2{
  /* the gold "no solo pestañas." — luminous, dominant */
  font-style: italic;
  filter: drop-shadow(0 10px 26px rgba(201,169,97,0.35)) drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  margin-top: 0.08em;
}
.cbd-show-hero::after{
  /* thin editorial rule under the statement */
  content:""; position:absolute;
  left:50%; transform: translateX(-50%);
  bottom: clamp(18%, 22vh, 26%);
  width: clamp(70px, 12vw, 150px); height:1px;
  background: linear-gradient(90deg, transparent, rgba(229,208,152,0.8), transparent);
  opacity: 0.9; pointer-events:none;
}

/* ============================================================
   #6 · "TU MIRADA LO CAMBIA TODO." — more light, contrast, life,
   cinematic glow, better integration with the wine card.
   ============================================================ */
.cbd-show-cta::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:42%; transform: translate(-50%,-50%);
  width: min(110vw, 900px); height: min(60vh, 460px);
  background: radial-gradient(ellipse at center, rgba(229,208,152,0.22) 0%, rgba(201,169,97,0.08) 40%, transparent 72%);
  filter: blur(6px); pointer-events:none;
}
.cbd-show-cta-h{
  font-size: clamp(2.3rem, 6.4vw, 5rem) !important;
  letter-spacing: -0.01em;
  /* brighter gold gradient + real glow so it reads luminous, not dead */
  background: linear-gradient(110deg, #C9A24E 0%, #ECD7A4 38%, #FFFFFF 52%, #ECD7A4 64%, #C9A24E 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 6px 20px rgba(229,208,152,0.45)) drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* ============================================================
   #7 · TEAM — clean, premium mobile composition + justified prose.
   The floating quote tags / question / fillers overlap the photo on
   phones (see screenshots). On small screens we present a calm,
   editorial "magazine cover" stack instead.
   ============================================================ */
/* Justify the descriptive prose for both Cristina & Ludovic */
.cbd-portrait-prose p{
  text-align: justify;
  -webkit-hyphens: auto; hyphens: auto;
  text-justify: inter-word;
}
.cbd-portrait-pullquote{ text-wrap: balance; }
.cbd-portrait-story{ width: 100%; }

@media (max-width: 768px){
  /* roomier, non-overlapping hero */
  .cbd-portrait-hero{
    min-height: auto;
    flex-direction: column;
    gap: 1.2rem;
    padding: 0.5rem 0 0.25rem;
  }
  /* hide the decorative floating fillers that collide on mobile */
  .cbd-portrait-tag,
  .cbd-portrait-question,
  .cbd-portrait-coord,
  .cbd-portrait-stat,
  .cbd-portrait-sign,
  .cbd-portrait-vlabel,
  .cbd-portrait-star{
    display: none !important;
  }
  /* big name sits cleanly above the photo, never clipped */
  .cbd-portrait-bigname{
    position: relative;
    bottom: auto; left: auto; transform: none;
    font-size: clamp(3.4rem, 19vw, 6rem);
    color: rgba(201,169,97,0.20);
    margin: 0 auto 0.2rem;
    text-align: center;
    line-height: 0.9;
  }
  .cbd-portrait-photo{
    width: min(72vw, 300px);
    margin: 0 auto;
  }
  /* keep the handle as a clean caption under the photo */
  .cbd-portrait-handle{
    position: relative;
    bottom: auto; left: auto; transform: none;
    margin: 0.9rem auto 0;
    font-size: 0.6rem;
    letter-spacing: 0.26em;
    opacity: 0.9;
  }
  /* tidy prose rhythm on phones */
  .cbd-portrait-prose p{ font-size: 0.92rem; line-height: 1.7; margin-bottom: 1rem; }
  .cbd-portrait-pullquote{ text-align: left; }
  .cbd-portrait-body{ gap: 1.5rem; }
}

/* Justify is great on wide measure; keep it left on very narrow text blocks
   to avoid rivers of whitespace */
@media (max-width: 420px){
  .cbd-portrait-prose p{ text-align: left; }
}

/* ============================================================
   #8 · SERVICE IMAGES — bulletproof on mobile.
   Force the media wells to render with a real box, cover-fit the
   image, and keep a luxe gradient placeholder so a missing/slow
   asset never looks "broken".
   ============================================================ */
.srv-x-ext-media,
.srv-x-panel-media,
.srv-x-lami-feat-media,
.srv-x-list-thumb{
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--wine-mid) 0%, var(--burgundy-deep) 60%, var(--wine-ink) 100%);
}
.srv-x-ext-media{ aspect-ratio: 1 / 1; min-height: 200px; }
.srv-x-ext-media img,
.srv-x-panel-media img,
.srv-x-lami-feat-media img,
.srv-x-list-thumb img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
}
@media (max-width: 1023px){
  /* explicitly counter any lazy/transform state that could hide them */
  #servicios img,
  #galeria img,
  #cbd-zoom img,
  .srv-x-ext-media img,
  .srv-x-cat-card img{
    opacity: 1 !important;
    visibility: visible !important;
  }
  .srv-x-ext-media{ min-height: 240px; }
  .srv-x-lami-feat-media{ min-height: 200px; }
}

/* ============================================================
   #10 · DESKTOP REFINEMENT — tighter composition, richer depth,
   premium whitespace and lighting on the weaker sections.
   ============================================================ */
/* Metrics band: use the richer wine gradient */
#metrics{
  background: var(--grad-wine-radial) !important;
}
/* The cinema card gets a slightly richer material */
.cbd-cinema-card{
  background: linear-gradient(145deg, var(--wine-mid) 0%, var(--burgundy-deep) 58%, var(--wine-ink) 100%) !important;
}
.cbd-show-card{
  background: linear-gradient(145deg, var(--wine-mid) 0%, var(--burgundy-deep) 60%, var(--wine-ink) 100%) !important;
}
/* Balance the giant brand mark + VIP card column on desktop */
@media (min-width: 1024px){
  .cbd-show-right > div{ align-items: flex-end !important; }
  .cbd-cinema-grid-inner{ align-items: center; }
}
/* Softer, more editorial section dividers (gold-line) */
.gold-line{
  background: linear-gradient(90deg, transparent, rgba(201,169,97,0.55), transparent) !important;
  height: 1px !important;
}

/* Subtle global lift for reveal entrances so mobile matches desktop feel */
@media (max-width: 1023px){
  .reveal{ transition-duration: 1s; }
}

/* #8 · [ELIMINADO] El antiguo mecanismo data-img-fallback ocultaba
   imágenes válidas (opacity:0 + overlay ::after) por condiciones de
   carrera en el detector JS. Las imágenes de servicios existen y
   cargan con normalidad, así que el mecanismo se retira por completo.
   Cualquier atributo data-img-fallback heredado queda inerte (sin
   reglas que oculten ni tapen). */
[data-img-fallback]{ position: relative; }
[data-img-fallback] img{ opacity: 1 !important; visibility: visible !important; }

/* ============================================================
   FIX · BADGE "DISEÑO PERSONALIZADO" — never clipped on mobile.
   The card has overflow:hidden and the badge uses negative inset
   values (right:-1.5% / bottom:8%), so on phones it can be
   partially clipped or pushed behind the sticky CTA bar.
   We pull it fully inside the card on small screens.
   ============================================================ */
@media (max-width: 1023px){
  .cbd-cinema-card{
    /* give the card bottom breathing room so the badge clears
       the sticky CTA bar (≈64px) and any OS navigation area    */
    padding-bottom: clamp(72px, 12vw, 96px) !important;
  }
  .cbd-cinema-badge--br{
    /* move badge fully inside card bounds */
    bottom: 4% !important;
    right:  4% !important;
  }
  .cbd-cinema-badge--tl{
    top:  4% !important;
    left: 4% !important;
  }
}
@media (max-width: 640px){
  /* on very small screens shrink card height so it fits without
     the badge getting clipped by the viewport + sticky bar      */
  .cbd-cinema-card{
    height: auto !important;
    min-height: min(74vh, 580px) !important;
    padding-bottom: 5rem !important;
  }
  .cbd-cinema-badge{
    /* smaller badge on phones so it sits comfortably           */
    padding: 0.45rem 0.7rem !important;
    font-size: 0.7rem !important;
    gap: 0.45rem !important;
  }
}

/* ============================================================
   FIX · "DISEÑAMOS MIRADAS, NO SOLO PESTAÑAS."
   MOBILE: The luxury-refine.js ScrollTrigger sets
   visibility:hidden on [data-show-hero] once scroll progress
   > 12 %, which on phones fires in under a second.
   On mobile there is no pinned card (build() is skipped), so
   the hero text should remain visible for the entire time the
   #showcase section is in the viewport, then scroll away
   naturally.

   DESKTOP: The GSAP timeline fades the text to autoAlpha:0.15
   and blurs it — it becomes a ghost behind the expanding card.
   We give it more initial prominence so it reads before the
   card grows, and set a min-opacity so it is never fully lost.
   ============================================================ */

/* --- MOBILE: always visible, clean editorial block --- */
@media (max-width: 1023px){
  #showcase{
    /* static, no pin — let content height drive the section */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(4rem, 10vw, 6rem) 0 clamp(3rem, 8vw, 5rem);
    gap: clamp(2rem, 5vw, 3.5rem);
  }
  .cbd-show-hero{
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    z-index: 10 !important;
    text-align: center;
    padding: 0 clamp(1.2rem, 5vw, 2.5rem);
    pointer-events: auto !important;
  }
  /* Guard: if JS ever sets inline visibility:hidden, override it */
  .cbd-show-hero[style*="visibility: hidden"],
  .cbd-show-hero[style*="visibility:hidden"]{
    visibility: visible !important;
    opacity: 1 !important;
  }
  .cbd-show-h1{
    font-size: clamp(2.6rem, 10vw, 4.2rem) !important;
    line-height: 1.0 !important;
    text-align: center !important;
  }
}

/* --- DESKTOP: hero text more prominent before card covers it --- */
@media (min-width: 1024px){
  /* El texto "Una mirada que se vuelve tu firma" debe NOTARSE en desktop,
     por encima de la tarjeta, como gran tipografía editorial de fondo. */
  .cbd-show-hero{
    font-size: clamp(3.5rem, 7.5vw, 6.5rem);
    z-index: 24 !important;          /* por encima de la tarjeta (z-20) */
    mix-blend-mode: screen;          /* se funde luminoso sobre el vino */
    pointer-events: none;
  }
  .cbd-show-line1{
    color: var(--cream) !important;
    text-shadow: 0 6px 30px rgba(74,10,10,.65), 0 2px 8px rgba(0,0,0,.4);
  }
  .cbd-show-hero.gsap-animating{
    min-opacity: 0.30; /* declarative hint; enforced by JS below */
  }
}

/* ============================================================
   FIX · BADGES ALINEADOS EN MÓVIL
   En móvil ambos badges deben apilarse en columna, anclados
   a la esquina inferior-izquierda, totalmente dentro de la card.
   ============================================================ */
@media (max-width: 1023px){
  /* Reposicionar ambos badges en un stack vertical */
  .cbd-cinema-badge--tl,
  .cbd-cinema-badge--br{
    position: absolute !important;
    left: clamp(0.8rem, 3vw, 1.2rem) !important;
    right: auto !important;
    top: auto !important;
  }
  .cbd-cinema-badge--tl{
    /* badge superior del stack */
    bottom: calc(clamp(0.8rem, 3vw, 1.2rem) + 3.6rem + 0.5rem) !important;
  }
  .cbd-cinema-badge--br{
    /* badge inferior del stack, bien dentro de la card */
    bottom: clamp(0.8rem, 3vw, 1.2rem) !important;
  }
  /* ancho máximo para que no desborde en pantallas angostas */
  .cbd-cinema-badge{
    max-width: calc(100% - clamp(1.6rem, 6vw, 2.4rem)) !important;
  }
}

/* ============================================================
   FIX · IMÁGENES DE TARJETAS DE EXTENSIONES — MOBILE + DESKTOP
   ============================================================
   Causa raíz (mobile):
     1. section:not(#hero):not(#metrics) recibe content-visibility:auto
        desde el <style> inline → #servicios queda "skippeado" en el
        render inicial cuando está fuera del viewport.
     2. Las imágenes tenían loading="lazy" → el browser nunca lanza
        la carga porque la sección está en content-visibility:auto
        y las imágenes están debajo del fold.
     3. onerror nunca dispara → la imagen fallida queda sin src válido
        → solo se ve el background-color vino del contenedor.

   Solución aplicada en index.html (ya corregida):
     loading="lazy" → loading="eager" en las 4 imágenes de extensiones.

   Solución CSS (este bloque):
     • Anular content-visibility:auto + contain en #servicios en todos
       los anchos (no solo mobile) usando una especificidad alta.
     • Garantizar que .srv-x-ext-media tenga height real mediante
       aspect-ratio + min-height SIN position:absolute en el img
       (que dependía de que el container tuviese dimensiones previas).
     • Asegurar opacity/visibility/display en todos los estados.
   ============================================================ */

/* ── 1 · Nunca aplicar content-visibility:auto a #servicios ── */
#servicios,
#servicios .srv-x-ext-zone,
#servicios .srv-x-chapter{
  content-visibility: visible !important;
  contain: none !important;
}

/* ── 2 · Container de imagen: dimensiones garantizadas ──────── */
.srv-x-ext-media{
  position: relative !important;
  display: block !important;
  /* aspect-ratio da la altura; min-height es el seguro en browsers viejos */
  aspect-ratio: 1 / 1 !important;
  min-height: 220px !important;
  overflow: hidden !important;
}

/* ── 3 · Imagen: in-flow, cubre el container ────────────────── */
/*   NO usamos position:absolute para no depender de que el
     container tenga height computado antes del paint.           */
.srv-x-ext-media img{
  display: block !important;
  width: 100% !important;
  /* height 100% en in-flow = hereda del container vía aspect-ratio */
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* sin position:absolute → no colapsa si el container no tiene
     altura computada antes del primer paint                     */
}

/* ── 4 · Fallback: nunca ocultar imagen en tarjetas de servicios */
.srv-x-ext-media[data-img-fallback] img,
.srv-x-panel-media[data-img-fallback] img,
.srv-x-lami-feat-media[data-img-fallback] img,
.srv-x-list-thumb[data-img-fallback] img,
.srv-x-cat-card[data-img-fallback] img{
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── 4b · SERVICE CONTAINERS: suprimir el ::after rojo.
   La regla global [data-img-fallback]::after genera un overlay
   position:absolute; inset:0 que cubre la imagen aunque esta
   tenga opacity:1. Para las tarjetas de servicios el propio
   background del contenedor (gradiente vino) actúa de placeholder
   cuando no hay imagen disponible — el ::after no es necesario
   y tapa el fallback cargado correctamente.                       */
.srv-x-ext-media[data-img-fallback]::after,
.srv-x-panel-media[data-img-fallback]::after,
.srv-x-lami-feat-media[data-img-fallback]::after,
.srv-x-list-thumb[data-img-fallback]::after,
.srv-x-cat-card[data-img-fallback]::after{
  display: none !important;
}

/* ── 4c · SERVICE IMAGES: z-index 1 para que SIEMPRE queden
   por encima de cualquier pseudo-elemento ::after o ::before
   del contenedor, incluso si el display:none de arriba fallase
   por alguna razón de especificidad en un browser antiguo.       */
.srv-x-ext-media > img,
.srv-x-panel-media > img,
.srv-x-lami-feat-media > img,
.srv-x-list-thumb > img{
  position: relative !important;
  z-index: 1 !important;
}

/* ── 5 · Mobile: refuerzo adicional ─────────────────────────── */
@media (max-width: 1023px){
  .srv-x-ext-media{
    /* en mobile la card es ancho completo; height explícita como respaldo */
    min-height: clamp(220px, 80vw, 380px) !important;
  }
  #servicios img{
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
}

/* ============================================================
   #11 · MARQUEE EDITORIAL — Fix overlap/duplicate text
   ============================================================
   Causa raíz:
   • .srv-x-marquee usa display:flex con 2 <span> idénticos.
   • Sin flex-shrink:0, los spans se encogen cuando el texto
     desborda → translateX(-100%) deja la duplicación visible.
   • top:55% del #servicios cae sobre el capítulo Cejas+Lami.
   • prefers-reduced-motion pausa la animación con ambos spans
     en translateX(0) → quedan literalmente uno encima del otro.

   Solución:
   • flex-shrink:0 + width:max-content → cada span mantiene su
     ancho real, la animación scrolls limpio.
   • Animación con stagger: el 2do span arranca a -50% → nunca
     coincide con el 1ero en pantalla.
   • Reduced-motion: ocultamos el 2do span en vez de pausar a
     ambos en la misma posición.
   • Mobile (≤1023px): bajamos opacidad y tamaño; ocultamos
     completamente en <768px para legibilidad.
   ============================================================ */

/* — Contenedor: que no recorte ni encoja a los hijos — */
.srv-x-marquee{
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  /* opacidad un poco más alta para que se vea intencional, no fantasmal */
  opacity: 0.08 !important;
  /* ligeramente más arriba para no caer justo en el capítulo Cejas */
  top: 38% !important;
  /* tamaño contenido para que no domine */
  font-size: clamp(5rem, 12vw, 14rem) !important;
  letter-spacing: -0.02em !important;
  /* z-index controlado: detrás del contenido, delante del mesh */
  z-index: 0 !important;
  /* aislar para que cualquier filtro no afecte capas externas */
  isolation: isolate !important;
  /* anti-aliasing más limpio en spans translúcidos */
  -webkit-font-smoothing: antialiased;
  filter: blur(0.6px);
}

/* — Cada span: ancho real, sin encoger, animación con offset — */
.srv-x-marquee span{
  display: inline-block !important;
  flex: 0 0 auto !important;          /* clave: no encoger ni crecer */
  width: max-content !important;       /* ancho = ancho del texto */
  white-space: nowrap !important;
  padding-right: 8ch !important;
  letter-spacing: 0.04em !important;
  animation: srvMarqueeFix 34s linear infinite !important;
  will-change: transform;
}

/* — Segundo span: comparte el MISMO timing para formar una cinta
     continua (sin delay desfasado que causaba el solapamiento) — */
.srv-x-marquee span:nth-child(2){
  animation-delay: 0s !important;
}

/* — Si hay 3 spans o más, los siguientes se ocultan para evitar
     que cualquier intento de duplicar contenido genere apilamiento — */
.srv-x-marquee span:nth-child(n+3){
  display: none !important;
}

/* — Keyframe propio: -100% del propio width (ya que es max-content) — */
@keyframes srvMarqueeFix{
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* — Reduced motion: ocultamos el 2do span en lugar de pausarlos
     ambos en translateX(0) (que es lo que causa overlap estático) — */
@media (prefers-reduced-motion: reduce){
  .srv-x-marquee span{
    animation: none !important;
    transform: none !important;
  }
  .srv-x-marquee span:nth-child(2){
    display: none !important;          /* mata el overlap estático */
  }
}

/* — Tablet / mobile landscape: tamaño y opacidad reducidos — */
@media (max-width: 1023px){
  .srv-x-marquee{
    font-size: clamp(4rem, 10vw, 8rem) !important;
    opacity: 0.04 !important;
    top: 32% !important;
  }
}

/* — Mobile portrait: ocultamos completamente (legibilidad > deco) — */
@media (max-width: 767px){
  .srv-x-marquee{
    display: none !important;
  }
}

/* — Garantía adicional: el contenido del #servicios siempre
     queda por encima del marquee decorativo — */
#servicios .srv-x-chapter[data-srv-chapter]{
  position: relative;
  z-index: 2;
}


/* ============================================================
   #12 · COUNTDOWN — Estado diario (8 AM – 8 PM)
   ============================================================
   La lógica vive en cristina-fixes.js. Aquí solo refinamos el
   look para que el número no se vea desesperado.

   • Cuando el estado es 'after-close', mostramos un layout
     más calmado (texto en lugar de 3 bloques de números).
   • Tipografía un poco más ligera, contraste suavizado.
   ============================================================ */

/* Más aire entre bloques, números más finos */
.reservar-countdown-clock{
  gap: 0.5rem !important;
}
.cd-block-r{
  padding: 0.55rem 0.65rem !important;
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(201,169,97,0.22) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.45);
}
.cd-num-r{
  font-size: clamp(1.3rem, 2.4vw, 1.65rem) !important;
  font-weight: 400 !important;
  color: var(--cherry);
  opacity: 0.92;
}
.cd-lbl-r{
  opacity: 0.62;
  font-size: 0.5rem !important;
}

/* Estado "cerrado": en lugar de mostrar 12h gigantes, mostramos
   una píldora elegante con mensaje. JS añade .is-closed al bloque. */
.reservar-countdown.is-closed .reservar-countdown-clock{
  display: none !important;
}
.reservar-countdown.is-closed .reservar-countdown-label{
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  color: var(--cherry) !important;
  opacity: 0.88;
  text-transform: none !important;
  line-height: 1.55 !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

/* Estado "antes de abrir": label suave en dorado */
.reservar-countdown.is-before-open .reservar-countdown-label{
  color: var(--gold-dark) !important;
}

/* Sticky CTA timer: si está cerrado, lo ocultamos en lugar de
   mostrar 12:00:00 estático que confunde */
.sticky-cta-timer.is-closed{
  display: none !important;
}


/* ============================================================
   #13 · CARDS EXTENSIONES — Recentrado de imágenes
   ============================================================
   Las fotos lash_clasicas.jpg / lash_humedas.jpg / etc. tienen
   el ojo en el tercio superior del frame. Con object-fit:cover
   y el default object-position:50% 50%, el crop deja los ojos
   muy arriba y la frente domina la card.

   Sube el centro de gravedad del crop al área de los ojos.
   ============================================================ */
.srv-x-ext-media img,
.srv-x-panel-media img,
.srv-x-lami-feat-media img,
.srv-x-list-thumb img{
  object-fit: cover !important;
  object-position: 50% 32% !important;  /* sube el centro al área del ojo */
}

/* En mobile el crop es más cuadrado: subir un poco más */
@media (max-width: 767px){
  .srv-x-ext-media img,
  .srv-x-panel-media img,
  .srv-x-lami-feat-media img,
  .srv-x-list-thumb img{
    object-position: 50% 38% !important;
  }
}


/* ============================================================
   #14 · MARQUEE — Override AGRESIVO sobre el fix #11
   ============================================================
   En la entrega anterior bajé opacidad y moví el marquee, pero
   seguía apareciendo encima de las cards de extensiones. Razón:
   `top: 38%` en una sección que mide >5000px sigue cayendo en
   medio del grid Extensiones.

   Solución definitiva:
   • Opacidad bajada a 0.025 (sigue ahí como textura pero no
     compite por atención).
   • Posicionado en el "valle" entre el header de la sección y
     el grid de extensiones (top: 8%).
   • Altura controlada con max-height y overflow:hidden.
   • Tamaño máximo más conservador.
   • Solo se muestra en desktop ≥1280px — en tablets ya
     compite demasiado con las cards.
   ============================================================ */
.srv-x-marquee{
  /* Confinar a una banda específica, no a toda la sección */
  top: 8% !important;
  bottom: auto !important;
  height: clamp(6rem, 14vw, 11rem) !important;
  max-height: 14vw !important;
  overflow: hidden !important;
  /* Casi invisible — solo textura */
  opacity: 0.028 !important;
  /* Tamaño más conservador */
  font-size: clamp(4rem, 9vw, 10rem) !important;
  z-index: 0 !important;
}

/* Tablet y mobile: ocultarlo. Reduce ruido y mejora performance. */
@media (max-width: 1279px){
  .srv-x-marquee{
    display: none !important;
  }
}


/* ============================================================
   #15 · TÍTULO DINÁMICO DE RESERVA — Estilo refinado
   ============================================================
   El <h3 data-selected-service-title> vive ahora FUERA del
   .reservar-frame (que tiene overflow:hidden y el frame-tag
   absoluto). Aquí solo le damos un toque luxury consistente.
   ============================================================ */
.reservar-frame-title[data-selected-service-title]{
  font-family: 'Italiana', serif;
  color: var(--cherry);
  margin: 0 0 0.85rem;
  line-height: 1.15;
  letter-spacing: -.005em;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  /* Pequeña línea dorada decorativa a la izquierda */
  padding-left: 0.9rem;
  border-left: 2px solid var(--gold);
}
@media (max-width: 767px){
  .reservar-frame-title[data-selected-service-title]{
    font-size: 1.1rem;
    margin-bottom: 0.65rem;
  }
}


/* ============================================================
   #16 · MARQUEE — Solución definitiva (estático, sin animación)
   ============================================================
   Causa raíz repetida:
   • El marquee tenía 2 spans animados con delay -40s sobre 80s.
   • A los ~40s de animación, AMBOS spans están en translateX(-50%)
     simultáneamente → en la MISMA posición → el texto se duplica
     visualmente generando "LUXSERVICIOS" (LUX + SERVICIOS).
   • Cualquier marquee con 2 spans del mismo width tiene este
     problema matemáticamente: en algún punto coinciden.

   Solución que YA NO falla:
   • Quitamos la animación (el texto se queda quieto).
   • Solo el primer span visible — el segundo se oculta.
   • Posicionamos en una banda fina arriba.
   • Opacidad muy baja → es textura editorial, NO texto leíble.
   • Texto legible "SERVICIOS · BEAUTY · LUXURY · ARTE · DETALLE"
     queda como capa decorativa estática.
   • Mobile/tablet: oculto (compite con cards).
   ============================================================ */

/* Override completo del marquee — anular fixes #11 y #14 */
.srv-x-marquee{
  display: flex !important;
  align-items: center !important;
  position: absolute !important;
  top: 8% !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  height: clamp(5rem, 11vw, 9rem) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.07 !important;            /* visible para PERCIBIR el movimiento */
  font-family: 'Italiana', serif !important;
  font-size: clamp(4rem, 8vw, 9rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 1 !important;
  color: var(--wine) !important;       /* vino vivo, no casi-negro */
  white-space: nowrap !important;
  transform: none !important;
  filter: none !important;
  isolation: isolate !important;
  user-select: none !important;
}

/* Ambos spans se desplazan en bucle perpetuo (marquee real) */
.srv-x-marquee span{
  display: inline-block !important;
  position: relative !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  margin: 0 !important;
  padding-right: 2ch !important;
  white-space: nowrap !important;
  text-align: left !important;
  animation: srvMarqueeFix 30s linear infinite !important;
  will-change: transform;
}
.srv-x-marquee span:not(:first-child){
  display: inline-block !important;   /* mostrar el 2º span para bucle continuo */
}

/* Tablet y mobile: ocultar todo el marquee */
@media (max-width: 1279px){
  .srv-x-marquee{
    display: none !important;
  }
}


/* ============================================================
   #17 · LAYOUT RESERVAR — Wrapper de columna central
   ============================================================
   Causa raíz:
   • El .reservar-grid tiene 3 columnas (left, center, right).
   • Al meter el <h3> como hijo directo del grid junto al frame,
     había 4 hijos en 3 slots → el aside (WhatsApp) se salía.
   
   Solución:
   • <div class="reservar-center-col"> envuelve h3 + frame.
   • Ocupa el slot center sin romper nada.
   ============================================================ */

.reservar-center-col{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  /* Hereda el comportamiento de columna del grid padre */
}

.reservar-center-col .reservar-frame{
  flex: 1;
  /* El frame ahora vive dentro del wrapper, ya no necesita ocupar
     directamente el slot del grid */
}

.reservar-frame-title[data-selected-service-title]{
  font-family: 'Italiana', serif;
  color: var(--cherry);
  margin: 0 0 0.85rem;
  line-height: 1.15;
  letter-spacing: -.005em;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  padding-left: 0.9rem;
  border-left: 2px solid var(--gold);
  text-align: left;
}
@media (max-width: 767px){
  .reservar-frame-title[data-selected-service-title]{
    font-size: 1.1rem;
    margin-bottom: 0.65rem;
  }
}


/* ============================================================
   FIX v120 · THE GLOW UP (Antes·Después) — velo blanco direccional.
   Causa: el bloque inline "Premium image entrance" ponía las fotos del
   comparador en opacity:0 (gsap.set) y el parallax de scroll animaba
   LAS MISMAS imágenes cada frame; el overwrite de GSAP mataba el tween
   de entrada a medio camino al bajar -> fotos semitransparentes sobre
   fondo crema ("humo blanco"). De subida el tween ya había completado
   fuera de viewport, por eso se veía limpio. Las imágenes de un slider
   comparador no deben llevar fade ni parallax (además desalinearían el
   antes/después). Se retiran de ambas listas en index y esta guardia
   garantiza el estado correcto pase lo que pase:                       */
.cbd-compare-figure img{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}