/**
 * TÄLU · Lifestyle Slider (Diego Notas #44 + #45 2026-05-08)
 *
 * Franja COMPLETA sin contenedor — slides rectangulares pegados (sin gap),
 * sólo con sombra interior arriba/abajo. Loop infinito.
 *
 * Posición: DEBAJO de la cinta dorada del hero (Diego: "deben ir abajo de esta cinta").
 * NO clickeables — son mini banners para inspirar uso.
 *
 * Para subir imágenes: landing/assets/img/lifestyle/01.jpg ... 10.jpg
 * Aspect ratio recomendado: 1.6:1 (landscape) — ej. 1280x800px o 800x500px.
 */

.lifestyle-slider{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);  /* full-width breakout */
  overflow: hidden;
  padding: 0;
  background: #1a1410;  /* dark fallback antes de que carguen las imágenes */
  /* Sombra INTERIOR arriba y abajo — efecto "franja" */
  box-shadow:
    inset 0 8px 16px -6px rgba(0,0,0,.35),
    inset 0 -8px 16px -6px rgba(0,0,0,.35);
}

.lifestyle-track{
  display: flex;
  gap: 0;  /* SIN separación entre slides — Diego: "deben ir todas juntas" */
  width: max-content;
  animation: lifestyle-loop 90s linear infinite;
  will-change: transform;
}
.lifestyle-slider:hover .lifestyle-track{
  animation-play-state: paused;
}

.lifestyle-slide{
  flex: 0 0 auto;
  width: clamp(280px, 28vw, 480px);
  aspect-ratio: 1.6 / 1;
  overflow: hidden;
  position: relative;
  /* SIN border-radius, SIN border, SIN box-shadow propio (la sombra interior está en .lifestyle-slider) */
  background:
    linear-gradient(135deg, rgba(245,222,160,.4), rgba(201,163,93,.2)),
    linear-gradient(180deg, #f4efe8, #ece5db);
}

/* Placeholder mientras Diego no ha subido las imágenes */
.lifestyle-slide .placeholder{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 18px);
  color: rgba(138,106,50,.55);
  letter-spacing: .08em;
  background: repeating-linear-gradient(
    45deg,
    rgba(201,163,93,.04),
    rgba(201,163,93,.04) 12px,
    rgba(201,163,93,.08) 12px,
    rgba(201,163,93,.08) 24px
  );
  text-align: center;
  padding: 0 16px;
}

/* Cuando Diego sube imagen real: <img> dentro del .lifestyle-slide */
.lifestyle-slide img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Animación seamless: track tiene 20 slides (10 + 10 duplicados),
   anima del 0% al -50% para que cuando llegue ya esté en el inicio del segundo set,
   que es visualmente IDÉNTICO al inicio del primero (loop perfecto). */
@keyframes lifestyle-loop{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Mobile: slides un poco más estrechos */
@media (max-width: 600px){
  .lifestyle-slide{
    width: clamp(220px, 60vw, 320px);
  }
  .lifestyle-track{ animation-duration: 70s; }
}

@media (prefers-reduced-motion: reduce){
  .lifestyle-track{ animation: none; }
}