/* =========================================================
   FEATURES CAROUSEL — StellaTV (CENTERED, RESPONSIVE)
   - Siempre centrado
   - Sin huecos visibles
   - Loop infinito CSS puro
   ========================================================= */

:root{
  --feat-speed: 34s;
  --feat-gap: 18px;

  --feat-w: 320px;
  --feat-h: 176px;

  /* ancho visible del carrusel (para que no sea pantalla completa) */
  --feat-viewport: 1040px;
}

/* Contenedor general (centrado) */
.featCarousel{
  margin-top: 26px;
  display: flex;
  justify-content: center;
}

/* Ventana centrada */
.featViewport{
  width: min(var(--feat-viewport), 100%);
  overflow: hidden;
  padding: 8px 0;
}

/* Track infinito */
.featTrack{
  display: flex;
  gap: var(--feat-gap);
  width: max-content;
  will-change: transform;

  animation: featScroll var(--feat-speed) linear infinite;
  transform: translateZ(0);
}

/* Cards */
.featCard{
  width: var(--feat-w);
  min-width: var(--feat-w);
  height: var(--feat-h);

  position: relative;
  overflow: hidden;

  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));

  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset;

  transform: perspective(900px) rotateY(-5deg);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Glow */
.featCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 240px at 20% 20%, rgba(255,60,172,.16), transparent 60%),
    radial-gradient(420px 240px at 80% 85%, rgba(43,134,197,.12), transparent 60%);
  opacity:.95;
  pointer-events:none;
}

/* Shine */
.featCard::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-60%;
  width: 70%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: rotate(18deg);
  opacity: .55;
  animation: featShine 3.6s ease-in-out infinite;
  pointer-events:none;
}

.featCard:hover{
  border-color: rgba(255,60,172,.26);
  box-shadow:
    0 24px 80px rgba(0,0,0,.60),
    0 0 0 1px rgba(255,255,255,.07) inset;
  transform: perspective(900px) rotateY(-2deg) translateY(-2px);
}

/* Texto arriba de brillos */
.featCard > *{ position: relative; z-index: 1; }

/* Animación: mueve exactamente la mitad (porque duplicamos en HTML) */
@keyframes featScroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(calc(-50% - (var(--feat-gap) / 2))); }
}

@keyframes featShine{
  0%, 55%{ transform: translateX(0) rotate(18deg); opacity:.22; }
  85%{ transform: translateX(210%) rotate(18deg); opacity:.58; }
  100%{ transform: translateX(210%) rotate(18deg); opacity:.22; }
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px){
  :root{
    --feat-viewport: 760px;
    --feat-w: 280px;
    --feat-h: 170px;
  }
}

@media (max-width: 520px){
  :root{
    --feat-viewport: 360px; /* centrado en móvil */
    --feat-w: 260px;
    --feat-h: 168px;
    --feat-speed: 28s;
  }
}