/* ============================================================
   CRISTINA BEAUTY DESIGNER · cristina-optimize.css
   ------------------------------------------------------------
   Capa FINAL de optimización (se carga después de premium /
   luxury-refine / fixes). Objetivo: más fluidez en mobile y
   desktop SIN tocar la estética luxury ni el contenido.

   Reglas:
   - No usa !important salvo donde es estrictamente necesario
     para neutralizar hover en táctil.
   - No oculta secciones ni reduce contenido.
   - Excluye explícitamente las secciones "pinned" (ScrollTrigger)
     de content-visibility, porque el pin + content-visibility
     rompe el cálculo de altura.
   ============================================================ */

/* ── 1. RENDER COST · content-visibility en secciones simples ──
   Solo secciones largas, fuera de viewport y NO pinneadas.
   El navegador se salta su render/layout hasta acercarse.
   contain-intrinsic-size evita saltos de scroll (reserva altura). */
#faq,
#ubicacion,
#proximamente-unas,
#unete,
#networking {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* Nunca aplicar a secciones con pin/scrub (romperían su altura):
   #hero, #showcase, #orbital, #cbd-zoom, #servicios, #transformacion,
   .lux-campaign, [data-flowart], [data-cbd-cinema], #cbd-story-pin */

/* ── 2. MOBILE · reducir efectos caros (Safari/Chrome móvil) ──
   backdrop-filter y blur grandes son los mayores causantes de
   jank en móvil. Los suavizamos manteniendo el look (fondos
   translúcidos sólidos en vez de blur en tiempo real). */
@media (max-width: 767px) {

  /* backdrop-filter es costosísimo en móvil → lo quitamos y
     compensamos con un fondo semi-opaco que se ve igual de premium */
  .cbd-show-cta,
  .hero-v3-chip,
  .lux-nav,
  .srv-x-promesa,
  .cbd-orbital-card,
  [style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* sombras enormes → sombras ligeras (mismo aire, menos repaint) */
  .card-luxury,
  .srv-x-ext-card,
  .net-pillar,
  .cbd-pkg-card,
  .visit-card {
    box-shadow: 0 8px 24px rgba(60, 20, 30, 0.10);
  }

  /* parallax y transform 3D fuerte → lo calmamos en móvil */
  [data-parallax],
  [data-magnetic] {
    transform: none !important;
  }

  /* filtros blur permanentes (decorativos) fuera de viewport
     pesan en compositing; los reducimos en móvil */
  .srv-x-mesh,
  .lux-cat-bg,
  .cbd-show-grid {
    filter: none !important;
  }
}

/* ── 3. TÁCTIL · neutralizar hover que se "pega" en móvil ──
   En pantallas táctiles los :hover quedan activados tras el tap.
   Forzamos el estado de reposo para cards/CTAs. */
@media (hover: none) and (pointer: coarse) {
  .card-luxury:hover,
  .srv-x-ext-card:hover,
  .net-pillar:hover,
  .cbd-pkg-card:hover {
    transform: none;
  }
}

/* ── 4. MOTION POLISH ──
   La landing YA tiene un sistema de reveal sólido y coordinado con
   GSAP (.reveal→.in, [data-lux-fade], [data-apple-reveal] vía
   cristina-fixes.js, todo respetando prefers-reduced-motion).
   NO añadimos un sistema paralelo (sería un parche y causaría doble
   animación). En su lugar, solo refinamos la curva de entrada para
   que se sienta un poco más editorial y menos "pesada" (1.2s → 0.9s
   con una curva más fina), sin cambiar la mecánica existente. */
.reveal {
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 5. REDUCED MOTION · respeto total ──
   Si el sistema pide menos movimiento, todo aparece sin animar. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ── 6. ESTABILIDAD · sin scroll horizontal accidental ──
   Salvaguarda global: nada debe desbordar el ancho de viewport.
   Usamos overflow-x: clip (no 'hidden') porque clip NO crea un
   contenedor de scroll y por tanto NO rompe position: sticky. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* ── 7. IMÁGENES · aparición limpia + sin CLS extra ──
   Aspect-ratio ya está en fixes.css para las cards; reforzamos
   un fade-in suave cuando la imagen termina de decodificar. */
img[loading="lazy"] {
  background: linear-gradient(110deg, rgba(245, 238, 230, 0.6), rgba(235, 225, 215, 0.4));
}

/* ============================================================
   SERVICIOS · sistema de imágenes (img simples, fase Servicios)
   Cada media usa <img class="srv-x-img" data-svc="..."> directo
   sobre el archivo .jpg/.jpeg REAL. object-fit:cover + centrado +
   object-position por servicio. Sin <picture>/webp (que rompía
   la carga cuando el .webp no existía) y sin onerror frágil.
   ============================================================ */
.srv-x-img,
.srv-x-ext-media .srv-x-img,
.srv-x-panel-media .srv-x-img,
.srv-x-lami-feat-media .srv-x-img,
.srv-x-list-thumb .srv-x-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* base: centrado */
  opacity: 1;
  visibility: visible;
  /* fade-in suave al decodificar (no depende de JS) */
  animation: srvImgIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes srvImgIn {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: none; }
}

/* Encuadre individual por servicio (object-position) — evita que
   una foto quede mal centrada (ojo/ceja fuera de cuadro). */
.srv-x-img[data-svc="clasicas"]      { object-position: center 42%; }
.srv-x-img[data-svc="humedas"]       { object-position: center 40%; }
.srv-x-img[data-svc="hibridas"]      { object-position: center 42%; }
.srv-x-img[data-svc="volumen"]       { object-position: 35% 42%; }
/* Fotos reales de trabajo de cejas (cristinaclienta2): la ceja está
   en el centro-inferior del encuadre → bajamos el foco. */
.srv-x-img[data-svc="brow-henna"]    { object-position: center 60%; }
.srv-x-img[data-svc="lami-brow"]     { object-position: center 58%; }
/* Diseño de Cejas usa la foto de consulta/asesoría (cristinaclienta):
   enfocamos los rostros. */
.srv-x-img[data-svc="diseno-cejas"]  { object-position: center 32%; }
.srv-x-img[data-svc="lami-lash"]     { object-position: center 45%; }

/* NO mostrar el placeholder rojo (✦ sobre vino) como estado normal.
   El <img> siempre apunta a un .jpg real que existe. */
.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 {
  content: none !important;
}
/* Blindaje contra la regla global [data-img-fallback] img{opacity:0}
   de cristina-fixes.css: una imagen real de servicio NUNCA se oculta,
   esté o no marcada como fallback. Alta especificidad para ganar. */
#servicios [data-img-fallback] img,
#servicios .srv-x-img,
.srv-x-ext-media[data-img-fallback] .srv-x-img,
.srv-x-panel-media[data-img-fallback] .srv-x-img,
.srv-x-lami-feat-media[data-img-fallback] .srv-x-img,
.srv-x-list-thumb[data-img-fallback] .srv-x-img {
  opacity: 1 !important; /* nunca ocultar la imagen real */
  visibility: visible !important;
}

/* Microinteracción premium del CTA de servicio (desktop) */
@media (hover: hover) and (pointer: fine) {
  .srv-x-ext-cta,
  .srv-x-list-cta,
  .srv-x-lami-feat-cta {
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, background-color 0.35s ease;
  }
  .srv-x-ext-card:hover .srv-x-ext-cta svg,
  .srv-x-lami-feat:hover .srv-x-lami-feat-cta svg {
    transform: translateX(4px);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  }
}

/* MOBILE · imágenes de servicio SIEMPRE visibles al primer ingreso.
   Sin lazy ni transform que las esconda; el well mantiene altura. */
@media (max-width: 1023px) {
  #servicios .srv-x-img,
  #servicios img {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .srv-x-ext-card .srv-x-ext-cta,
  .srv-x-list-cta,
  .srv-x-lami-feat-cta {
    /* CTA táctil cómodo */
    min-height: 44px;
  }
}

/* ============================================================
   BLINDAJE TOTAL DE IMÁGENES v4 (svc3 / lashrail / story / team)
   Las imágenes reales NUNCA se ocultan ni dependen de lazy-load
   dentro de contenedores animados. Alta especificidad.
   ============================================================ */
.svc3-card-media img,
.svc3-row-media img,
.svc3-cejas-visual img,
.lashrail-card img,
.story2-frame img,
#servicios img,
.sd-rel-media img,
.sd-hero-media img {
  opacity: 1 !important;
  visibility: visible !important;
  background: none !important;
}
/* Quitar el degradado de placeholder lazy en imágenes de servicio/galería
   (mostraba un rectángulo gris cuando lazy no disparaba) */
.svc3-card-media img[loading="lazy"],
.lashrail-card img[loading="lazy"],
.svc3-row-media img[loading="lazy"],
.svc3-cejas-visual img[loading="lazy"] {
  background: none !important;
}