/* ════════════════════════════════════════════════════════════
   LASH RAIL · carrusel de cards flotantes (coverflow) — Cap 01
   Card central enfocada + laterales difuminadas. Totalmente visible
   en viewport, sin secuestrar scroll. Nav con flechas + contador.
   Imágenes EAGER (cargan siempre). Desktop + Mobile.
   ════════════════════════════════════════════════════════════ */

.lashrail { position: relative; margin-top: clamp(2rem, 5vw, 3.5rem); }

/* Escenario del coverflow */
.lashrail-stage {
  position: relative;
  height: clamp(340px, 46vw, 520px);
  display: flex; align-items: center; justify-content: center;
  perspective: 1600px;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.lashrail-track {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Cada card */
.lashrail-card {
  position: absolute; top: 50%; left: 50%;
  width: clamp(220px, 26vw, 300px);
  aspect-ratio: 3/4;
  border-radius: clamp(1rem, 1.6vw, 1.5rem);
  overflow: hidden; cursor: pointer;
  background: var(--wine-deep, #4E0610);
  box-shadow: 0 24px 60px rgba(74,10,10,0.35);
  transform: translate(-50%, -50%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s ease, box-shadow 0.5s ease;
  will-change: transform, opacity, filter;
}
/* Card central SÓLIDA: fondo opaco + sombra que la separa, para que
   NUNCA se transluzca con las cards de atrás (problema desktop). */
.lashrail-card[data-pos="0"]{
  background: #45070C !important;
  box-shadow:
    0 36px 80px rgba(74,10,10,0.55),
    0 0 0 1px rgba(201,169,97,0.55),
    0 0 0 6px rgba(255,255,255,0.06) !important;
}
.lashrail-card[data-pos="0"] img{
  opacity: 1 !important;
  /* Edición natural y elegante: realce sutil, nunca irreal */
  filter: saturate(1.04) contrast(1.02) brightness(1.01) !important;
}
/* Reflejo liquid-glass sobre la card central (no sobre las laterales) */
.lashrail-card[data-pos="0"]::before{
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.05) 22%, transparent 42%),
    linear-gradient(0deg, rgba(255,255,255,0.0) 70%, rgba(255,255,255,0.06) 100%);
  mix-blend-mode: screen;
}
.lashrail-card img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  opacity: 1 !important; visibility: visible !important;
}
.lashrail-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(74,10,10,0.55), transparent 45%);
  pointer-events: none;
}
.lashrail-card-num {
  position: absolute; top: 14px; left: 16px; z-index: 3;
  font-family: 'Italiana', serif; font-size: 1.5rem; color: var(--cream, #FCFBF9);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6); letter-spacing: 0.05em;
}
.lashrail-card-tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  padding: 0.45em 0.95em; border-radius: 999px;
  background: rgba(74,10,10,0.55); backdrop-filter: blur(8px);
  color: var(--cream, #FCFBF9); border: 1px solid rgba(230,211,160,0.3);
}
.lashrail-card.is-feat .lashrail-card-tag { background: var(--gold, #C9A24E); color: var(--cherry, #7A0712); border-color: transparent; }

/* Posiciones coverflow (las setea el JS via data-pos) */
.lashrail-card[data-pos="0"]  { transform: translate(-50%, -50%) translateX(0) scale(1) rotateY(0deg); opacity: 1 !important; filter: none; z-index: 5; }
.lashrail-card[data-pos="1"]  { transform: translate(-50%, -50%) translateX(96%) scale(0.72) rotateY(-16deg); opacity: 0.32; filter: blur(4px) brightness(0.7); z-index: 4; }
.lashrail-card[data-pos="-1"] { transform: translate(-50%, -50%) translateX(-96%) scale(0.72) rotateY(16deg); opacity: 0.32; filter: blur(4px) brightness(0.7); z-index: 4; }
.lashrail-card[data-pos="2"]  { transform: translate(-50%, -50%) translateX(160%) scale(0.54) rotateY(-22deg); opacity: 0.12; filter: blur(7px) brightness(0.55); z-index: 3; }
.lashrail-card[data-pos="-2"] { transform: translate(-50%, -50%) translateX(-160%) scale(0.54) rotateY(22deg); opacity: 0.12; filter: blur(7px) brightness(0.55); z-index: 3; }
.lashrail-card[data-pos="hidden"] { transform: translate(-50%, -50%) scale(0.5); opacity: 0; pointer-events: none; z-index: 1; }

/* Flechas */
.lashrail-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: clamp(44px, 5vw, 56px); height: clamp(44px, 5vw, 56px); border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(251,247,240,0.9); border: 1px solid rgba(197,163,90,0.4);
  color: var(--wine, #861F18); box-shadow: 0 10px 30px rgba(92,7,16,0.18);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.36,1), background 0.3s, box-shadow 0.3s;
}
.lashrail-nav:hover { transform: translateY(-50%) scale(1.1); background: #fff; box-shadow: 0 16px 40px rgba(92,7,16,0.28); }
.lashrail-nav:active { transform: translateY(-50%) scale(0.95); }
.lashrail-prev { left: clamp(0px, 2vw, 24px); }
.lashrail-next { right: clamp(0px, 2vw, 24px); }
.lashrail-nav svg { width: 40%; height: 40%; }

/* Panel de detalle bajo el rail */
.lashrail-detail {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: end;
  max-width: 920px; margin: 0 auto; padding: 0 1rem;
  border-top: 1px solid var(--line, rgba(92,7,16,0.12)); padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.lashrail-detail-main { min-width: 0; }
.lashrail-detail-kicker {
  display: block; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-dark, #9A7B36); margin-bottom: 0.5rem;
  opacity: 0; animation: lashFade 0.5s ease forwards;
}
.lashrail-detail-name {
  font-family: 'Italiana', serif; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1;
  color: var(--cherry, #7A0712); margin: 0 0 0.6rem;
  opacity: 0; animation: lashFade 0.5s ease 0.05s forwards;
}
.lashrail-detail-desc {
  font-size: 0.92rem; line-height: 1.6; color: var(--ink, #45070C); opacity: 0.72;
  max-width: 520px; margin: 0;
  animation: lashFade 0.5s ease 0.1s forwards;
}
/* ── Ideal para ti si ── */
.lashrail-detail-ideal {
  margin: 1rem 0 0; padding: 0.85rem 1rem; max-width: 520px;
  background: linear-gradient(150deg, rgba(201,162,78,0.10), rgba(201,162,78,0.03));
  border-left: 2px solid var(--gold, #C9A24E); border-radius: 0 12px 12px 0;
  opacity: 0; animation: lashFade 0.5s ease 0.15s forwards;
}
.lashrail-detail-ideal-label {
  display: block; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-dark, #9A7B36); font-weight: 600; margin-bottom: 0.3rem;
}
.lashrail-detail-ideal-text {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 1rem; line-height: 1.45; color: var(--wine-mid, #6E0518); margin: 0;
}
/* ── Meta: beauty session + Lash Refresh ── */
.lashrail-detail-meta {
  list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem;
  max-width: 520px; opacity: 0; animation: lashFade 0.5s ease 0.2s forwards;
}
.lashrail-detail-meta li {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: 'Manrope', sans-serif; font-size: 0.78rem; line-height: 1.35; color: var(--ink, #45070C);
}
.lashrail-detail-meta li span[aria-hidden] {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-size: 0.8rem; color: var(--gold-dark, #9A7B36);
  border: 1px solid rgba(201,162,78,0.4);
  background: radial-gradient(circle at 35% 30%, rgba(236,215,164,0.4), rgba(255,255,255,0.1));
}
.lashrail-detail-meta li b { font-weight: 500; color: var(--wine, #861F18); letter-spacing: 0.01em; }
.lashrail-detail-meta-refresh b { color: var(--gold-dark, #9A7B36); font-weight: 600; }
.lashrail-detail-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 0.85rem; }
.lashrail-detail-price { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: var(--wine, #861F18); line-height: 1; }
.lashrail-counter { font-size: 0.78rem; letter-spacing: 0.18em; color: var(--gold-dark, #9A7B36); }
.lashrail-counter b { color: var(--wine, #861F18); font-weight: 600; }
.lashrail-detail-btns { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.lashrail-btn {
  display: inline-flex; align-items: center; gap: 0.4em; text-decoration: none;
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  padding: 0.85em 1.4em; border-radius: 999px; transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
.lashrail-btn--ghost {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--wine, #861F18), var(--wine-deep, #4E0610));
  color: var(--gold-light, #ECD7A4);
  border: 1px solid rgba(201,169,97,0.4);
  box-shadow: 0 10px 26px -10px rgba(92,7,16,0.5);
}
.lashrail-btn--ghost::before {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(236,215,164,0.35), transparent);
  transition: left 0.7s cubic-bezier(0.16,1,0.3,1);
}
.lashrail-btn--ghost:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(92,7,16,0.6);
  border-color: var(--gold, #C9A24E);
}
.lashrail-btn--ghost:hover::before { left: 130%; }
.lashrail-btn--ghost svg, .lashrail-btn--ghost .arrow { transition: transform 0.3s ease; }
.lashrail-btn--ghost:hover svg, .lashrail-btn--ghost:hover .arrow { transform: translateX(3px); }
.lashrail-btn--gold { background: var(--grad-gold, linear-gradient(120deg,#9A7B36,#C9A24E,#ECD7A4)); color: var(--cherry, #7A0712); }
.lashrail-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(197,163,90,0.4); }

/* Dots */
.lashrail-dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.lashrail-dot { width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; background: rgba(134,31,24,0.2); transition: width 0.4s, background 0.3s; padding: 0; }
.lashrail-dot.is-active { width: 26px; border-radius: 999px; background: var(--gold-dark, #9A7B36); }

@keyframes lashFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Hint diagnóstico (reutiliza estilo svc3) */
.lashrail + .svc3-diag-hint { margin-top: clamp(1.75rem, 4vw, 2.75rem); }

/* ─────────── RESPONSIVE ─────────── */
@media (max-width: 760px) {
  .lashrail-stage { height: clamp(360px, 90vw, 460px); }
  .lashrail-card { width: clamp(220px, 64vw, 280px); }
  .lashrail-card[data-pos="1"]  { transform: translate(-50%, -50%) translateX(72%) scale(0.78) rotateY(-12deg); opacity: 0.4; }
  .lashrail-card[data-pos="-1"] { transform: translate(-50%, -50%) translateX(-72%) scale(0.78) rotateY(12deg); opacity: 0.4; }
  .lashrail-card[data-pos="2"], .lashrail-card[data-pos="-2"] { opacity: 0; pointer-events: none; }
  .lashrail-detail { grid-template-columns: 1fr; gap: 1.1rem; }
  .lashrail-detail-aside { align-items: flex-start; }
  .lashrail-detail-btns { justify-content: flex-start; }
  .lashrail-detail-price { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lashrail-card, .lashrail-detail-kicker, .lashrail-detail-name, .lashrail-detail-desc, .lashrail-detail-ideal, .lashrail-detail-meta { transition: none; animation: none; opacity: 1; }
}