/* ════════════════════════════════════════════════════════════════════
   SD-UPGRADE · refinamiento v94 de las 4 landings de extensiones
   (clásicas · húmedas · híbridas · volumen express). Scoped a .sd-lash.
   Se carga DESPUÉS de service-detail.css · sd-lux.css · sd-lash.css,
   por lo que sus reglas tienen prioridad de cascada.

   Cubre:
   1) HERO · fondo más claro, vino rojo VIVO (no oscuro)
   2) TIRA / marquee de cifras · NUNCA se pausa (ni con el mouse encima)
   3) Sección tras el hero · rediseño editorial, solo texto, con movimiento
   4) "El ritual · en 4 momentos" · sin imágenes, tarjetas de texto elegantes
   5) "También te puede gustar" · tokens para el coverflow lashrail
   6) Paridad mobile / desktop (interacción, movimiento, diseño)
   ════════════════════════════════════════════════════════════════════ */

/* Tokens de marca canónicos, sólo para estas 4 páginas, para que el
   coverflow lashrail (reutilizado del home) use exactamente la paleta. */
.sd-lash{
  --u-wine:#861F18; --u-wine-deep:#4E0610; --u-wine-mid:#6E0518;
  --u-wine-bright:#A6172A; --u-cherry:#7A0712;
  --u-gold:#C9A24E; --u-gold-l:#ECD7A4; --u-gold-d:#9A7B36;
  --u-cream:#FBF6ED; --u-ink:#45070C; --u-paper:#FAF5EC; --u-pearl:#FFFEFC;
}

/* ════════ 1 · HERO — vino rojo VIVO, más claro ════════ */
/* Antes terminaba en #2C0309 (casi negro). Ahora se mantiene en el rango
   del vino vivo (#A6172A) → vino del logo (#861F18) → vino profundo. */
.sd-lash .sd-hero{
  background:
    radial-gradient(900px circle at 78% 14%, rgba(201,162,78,.20), transparent 56%),
    radial-gradient(150% 135% at 80% -12%, #A8182B 0%, #88121F 46%, #5C0710 100%) !important;
}
/* Glow superior un punto más luminoso para acompañar el vino vivo */
.sd-lash .sd-hero-glow{ opacity:1; }

/* ════════ 2 · TIRA / MARQUEE — siempre en movimiento ════════ */
/* La regla original (.sdlx-stats:hover .sdlx-stats-track{paused}) hacía que
   la tira se detuviera al pasar el mouse. La anulamos por completo. */
.sd-lash .sdlx-stats:hover .sdlx-stats-track,
.sd-lash .sdlx-stats .sdlx-stats-track{
  animation-play-state:running !important;
}
/* El contenido de la tira no captura el puntero → nada puede pausarla */
.sd-lash .sdlx-stats-track{ pointer-events:none; }
@media (prefers-reduced-motion:reduce){
  .sd-lash .sdlx-stats-track{ animation:none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   3 · SECCIÓN TRAS EL HERO — rediseño editorial (solo texto + movimiento)
   ════════════════════════════════════════════════════════════════════ */
.sd-lash .sd-body-lux{
  position:relative; overflow:hidden;
  background:
    radial-gradient(70% 90% at 88% 6%, rgba(201,162,78,.10), transparent 60%),
    radial-gradient(60% 80% at 4% 96%, rgba(122,7,18,.07), transparent 64%),
    linear-gradient(180deg, #FBF6ED 0%, #F6ECDB 100%) !important;
}
/* Aura difusa que deriva lentamente (técnica de los prompts de glow) */
.sd-lash .sdbx-aura{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.sd-lash .sdbx-aura span{
  position:absolute; border-radius:50%; filter:blur(64px);
  opacity:.55; mix-blend-mode:multiply; will-change:transform;
}
.sd-lash .sdbx-aura span:nth-child(1){
  width:48vw; max-width:600px; aspect-ratio:1; left:-12%; top:-16%;
  background:radial-gradient(circle, #F0DCA6 0%, transparent 68%);
  animation:sdbxDrift1 19s ease-in-out infinite;
}
.sd-lash .sdbx-aura span:nth-child(2){
  width:42vw; max-width:520px; aspect-ratio:1; right:-14%; bottom:-18%;
  background:radial-gradient(circle, #E7B9C0 0%, transparent 70%); opacity:.4;
  animation:sdbxDrift2 23s ease-in-out infinite;
}
.sd-lash .sdbx-aura span:nth-child(3){
  width:26vw; max-width:320px; aspect-ratio:1; right:24%; top:30%;
  background:radial-gradient(circle, #ECD7A4 0%, transparent 72%); opacity:.34;
  animation:sdbxDrift3 17s ease-in-out infinite;
}
@keyframes sdbxDrift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(5%,7%) scale(1.08); } }
@keyframes sdbxDrift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-6%,-5%) scale(1.12); } }
@keyframes sdbxDrift3{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-4%,6%) scale(.92); } }

.sd-lash .sd-body-lux .sd-body-grid{ position:relative; z-index:1; }

/* — Prosa: editorial, con acento dorado animado bajo el título — */
.sd-lash .sd-body-lux .sd-prose .sd-h2{
  position:relative; letter-spacing:-.01em;
}
.sd-lash .sd-body-lux .sd-prose .sd-h2::after{
  content:""; display:block; width:68px; height:3px; margin-top:1.05rem;
  border-radius:3px;
  background:linear-gradient(90deg,#9A7B36,#C9A24E,#ECD7A4,#C9A24E,#9A7B36);
  background-size:220% 100%; animation:sdbxShine 5.5s linear infinite;
}
@keyframes sdbxShine{ 0%{ background-position:220% 0; } 100%{ background-position:-120% 0; } }

.sd-lash .sd-body-lux .sd-lede{ color:#5a3f34; }
.sd-lash .sd-body-lux .sd-lede::first-letter{
  font-family:'Italiana',serif; font-size:1.18em; color:var(--u-cherry); font-style:normal;
}

/* Bloques con regla dorada vertical + tarjeta sutil para el destacado.
   El hover actúa SOBRE EL PSEUDO (la regla dorada), nunca sobre el bloque,
   para no interferir con la transición de aparición (.reveal usa transform). */
.sd-lash .sd-body-lux .sd-block{
  position:relative; padding-left:1.3rem;
}
.sd-lash .sd-body-lux .sd-block::before{
  content:""; position:absolute; left:0; top:.15rem; bottom:.15rem; width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--u-gold), rgba(201,162,78,.15));
  transition:width .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.sd-lash .sd-body-lux .sd-block:hover::before{
  width:3px; box-shadow:0 0 14px rgba(201,162,78,.6);
}
.sd-lash .sd-body-lux .sd-block-text.sd-italic{
  font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--u-wine);
  line-height:1.3;
}

/* — Tarjeta "Incluye" convertida en panel glass flotante — */
.sd-lash .sd-body-lux .sd-card{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(201,162,78,.10), transparent 55%),
    linear-gradient(162deg, rgba(255,255,255,.96), rgba(250,242,232,.9)) !important;
  border:1px solid rgba(201,162,78,.38) !important;
  box-shadow:
    0 34px 80px -34px rgba(92,7,16,.30),
    0 2px 0 rgba(255,255,255,.6) inset !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:sdbxFloat 8.5s ease-in-out infinite;
}
/* Usa la propiedad `translate` (independiente de `transform`) para que el
   flotado conviva con la animación de aparición .reveal (que usa transform). */
@keyframes sdbxFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -7px; } }
/* Filo dorado superior */
.sd-lash .sd-body-lux .sd-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--u-gold), var(--u-gold-l), var(--u-gold), transparent);
}
/* Ornamento de esquina */
.sd-lash .sd-body-lux .sd-card::after{
  content:"✦"; position:absolute; top:1rem; right:1.2rem; font-size:1rem;
  color:var(--u-gold); opacity:.55;
}
.sd-lash .sd-body-lux .sd-card .sd-block-label{ position:relative; z-index:1; }
.sd-lash .sd-body-lux .sd-check{
  background:radial-gradient(circle at 35% 30%, var(--u-gold-l), var(--u-gold) 60%, var(--u-gold-d));
  box-shadow:0 3px 10px rgba(154,123,54,.35);
}
.sd-lash .sd-body-lux .sd-hair{
  background:linear-gradient(90deg, transparent, rgba(201,162,78,.45), transparent);
}

/* CTA dorado con barrido de brillo (técnica del botón "book a call") */
.sd-lash .sd-body-lux .sd-btn-gold{ position:relative; overflow:hidden; }
.sd-lash .sd-body-lux .sd-btn-gold::after{
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); transition:left .8s cubic-bezier(.16,1,.3,1);
}
.sd-lash .sd-body-lux .sd-btn-gold:hover::after{ left:150%; }

@media (prefers-reduced-motion:reduce){
  .sd-lash .sdbx-aura span,
  .sd-lash .sd-body-lux .sd-card,
  .sd-lash .sd-body-lux .sd-prose .sd-h2::after{ animation:none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   4 · "EL RITUAL · EN 4 MOMENTOS" — sin imágenes, tarjetas de texto
   ════════════════════════════════════════════════════════════════════ */
/* Fondo de la sección un poco más luminoso y editorial */
.sd-lash .lash-ritual--text{
  background:
    radial-gradient(60% 70% at 12% 0%, rgba(201,162,78,.10), transparent 60%),
    linear-gradient(180deg,#F6ECDB,#FBF6ED) !important;
}

/* Tarjeta de momento: papel premium, sin foto */
.sd-lash .lash-ritual--text .lash-ritual-slide{
  background:linear-gradient(165deg, #FFFFFF 0%, #FBF4E8 100%) !important;
  border:1px solid rgba(201,162,78,.30);
  box-shadow:0 24px 56px -28px rgba(92,7,16,.30);
  border-radius:26px; overflow:hidden;
  /* [v114] La base con FOTO impone aspect-ratio 4/5 + min-height 380px;
     esta variante de TEXTO lo heredaba y dejaba un vacío enorme bajo el
     texto. Ahora la card mide lo que mide su contenido (las 4 igualan a
     la más alta por el stretch natural del track). */
  aspect-ratio:auto;
  min-height:0;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:clamp(1.5rem,2.6vw,1.9rem) clamp(1.4rem,2.4vw,1.8rem) clamp(1.7rem,3vw,2.1rem);
  transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s, border-color .45s;
}
/* Anula el degradado oscuro pensado para foto */
.sd-lash .lash-ritual--text .lash-ritual-slide::after{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--u-gold), var(--u-gold-l), var(--u-gold), transparent);
  inset:0 0 auto 0;
}
/* Índice gigante de marca de agua (contador automático 01–04) */
.sd-lash .lash-ritual--text .lash-ritual-track{ counter-reset:ritual; }
.sd-lash .lash-ritual--text .lash-ritual-slide{ counter-increment:ritual; }
.sd-lash .lash-ritual--text .lash-ritual-slide::before{
  content:counter(ritual, decimal-leading-zero);
  position:absolute; top:-.18em; right:.06em; z-index:0;
  font-family:'Italiana',serif; line-height:1;
  font-size:clamp(6rem, 16vw, 9.5rem);
  color:rgba(122,7,18,.07);
  pointer-events:none;
}
/* Oculta el medallón pequeño (lo sustituye la marca de agua) */
.sd-lash .lash-ritual--text .lash-ritual-num{ display:none; }
.sd-lash .lash-ritual--text .lash-ritual-body{
  position:relative; inset:auto; z-index:2; padding:0; color:var(--u-ink);
}
.sd-lash .lash-ritual--text .lash-ritual-body h3{
  font-family:'Italiana',serif; color:var(--u-cherry);
  font-size:clamp(1.45rem,2.6vw,1.75rem); margin:0 0 .55rem; line-height:1.1;
}
/* Pequeña etiqueta "Momento" sobre el título, vía ::before del h3 */
.sd-lash .lash-ritual--text .lash-ritual-body h3::before{
  content:"Momento " counter(ritual, decimal-leading-zero);
  display:block; font-family:'Manrope',sans-serif; font-size:.6rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--u-gold-d);
  margin-bottom:.6rem; font-weight:600;
}
.sd-lash .lash-ritual--text .lash-ritual-body p{
  font-family:'Manrope',sans-serif; color:#5a3f34; opacity:1;
  font-size:.94rem; line-height:1.6;
}
.sd-lash .lash-ritual--text .lash-ritual-slide:hover{
  transform:translateY(-8px);
  box-shadow:0 38px 72px -30px rgba(92,7,16,.40);
  border-color:rgba(201,162,78,.6);
}

/* Desktop: las 4 tarjetas en fila (sin scroll, lectura cómoda) */
@media (min-width:900px){
  .sd-lash .lash-ritual--text .lash-ritual-vp{ overflow:visible; }
  .sd-lash .lash-ritual--text .lash-ritual-track{ overflow:visible; gap:clamp(1rem,1.8vw,1.5rem); }
  .sd-lash .lash-ritual--text .lash-ritual-slide{ flex:1 1 0; max-width:none; }
  .sd-lash .lash-ritual--text .lash-ritual-ctrl{ display:none; }   /* flechas/dots sólo en mobile */
}
/* Mobile: conserva el carrusel deslizable (paridad de interacción) */
@media (max-width:899px){
  .sd-lash .lash-ritual--text .lash-ritual-slide{ flex:0 0 84%; max-width:420px; }
}

@media (prefers-reduced-motion:reduce){
  .sd-lash .lash-ritual--text .lash-ritual-slide{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════════
   5 · "TAMBIÉN TE PUEDE GUSTAR" — coverflow lashrail (reutilizado)
   Tokens con la paleta exacta del home para que el carrusel se vea igual.
   ════════════════════════════════════════════════════════════════════ */
.sd-lash .sd-related{
  --wine:#861F18; --wine-deep:#4E0610; --wine-mid:#6E0518; --wine-bright:#A6172A;
  --cherry:#7A0712; --gold:#C9A24E; --gold-light:#ECD7A4; --gold-dark:#9A7B36;
  --cream:#FBF6ED; --ink:#45070C; --pearl:#FFFEFC; --line:rgba(92,7,16,.12);
  --grad-gold:linear-gradient(120deg,#9A7B36,#C9A24E,#ECD7A4);
  position:relative; overflow:hidden;
}
/* Glow ambiental suave detrás del coverflow */
.sd-lash .sd-related::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%, rgba(201,162,78,.10), transparent 60%);
}
.sd-lash .sd-related .sd-container{ position:relative; z-index:1; }
/* El coverflow ya trae su responsive; sólo ajustamos el margen superior */
.sd-lash .sd-related .lashrail{ margin-top:clamp(1.5rem,4vw,2.75rem); }

/* ════════════════════════════════════════════════════════════════════
   6 · PARIDAD MOBILE — que no se pierda diseño ni interacción
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:980px){
  /* La sección editorial: el panel deja de flotar (mejor en táctil) y
     se reordena debajo de la prosa, manteniendo el aire elegante. */
  .sd-lash .sd-body-lux .sd-card{ animation:none; }
  .sd-lash .sd-body-lux .sdbx-aura span{ filter:blur(48px); }
}
@media (max-width:600px){
  .sd-lash .sd-body-lux{ background:linear-gradient(180deg,#FBF6ED,#F6ECDB) !important; }
  .sd-lash .sd-body-lux .sd-prose .sd-h2::after{ margin-top:.8rem; }
  .sd-lash .lash-ritual--text .lash-ritual-slide::before{ font-size:7rem; }
}