/* Variables CSS */
:root {
    --primary-background: var(--bg-dark-gray);
    --secondary-background: var(--bg-black);
    --text-color: var(--text-gray-light);
    --highlight-color: var(--primary-red);
    --spacing-unit: 1rem;
    --card-width: 250px; /* Definimos el ancho de la tarjeta en desktop */
    --card-img-aspect-ratio: 2 / 3; /* Relación de aspecto para imágenes verticales (ancho/alto) */
    --card-border-width: 2px; /* Ancho del borde blanco */
    /* NUEVO: Espacio extra para la escala de hover */
    --hover-scale-padding: 2rem; /* Espacio extra para que la tarjeta escalada no se recorte */
}
/* --- FIX: Permitir que el escalado (hover) se vea sin romper el scroll --- */
/* Con el carrusel nativo el track es el contenedor de scroll (.native-scroll),
   no existe .slick-list. El scale 1.05 queda ligeramente recortado por
   overflow-y:auto del track; se acepta como limitación del scroll nativo. */

/* El contenedor principal controla el flujo y evita fugas de scroll */
.container-general {
    margin-top: -12px;
    padding-top: 0;
    overflow: hidden; /* Corta cualquier excedente que genere scroll fantasma */
    position: relative;
}

/* Acercar el carrusel a los grupos sin sobreponerlos */
#dynamic-categories {
    margin-top: 0;
}

/* Bajar el banner principal y reducir separación con el contenido */
.slider-films {
    padding-bottom: 0;
    margin-bottom: -2px;
}

.main {
  margin: 0 auto;
  padding: 0 20px;
}

.movies-rows {
  margin: 0 auto;
  padding: 0;
}

/* --- ESTILOS DE LA TARJETA (.card) --- */
.card {
    flex-shrink: 0;
    width: var(--card-width);
    position: relative;
    border-radius: 5px;
    border: var(--card-border-width) solid transparent;
    padding: 0;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.2s ease-out;
    background-color: var(--secondary-background);
    display: flex !important;
    flex-direction: column;
    box-shadow: rgb(0 0 0) 0px 16px 10px -10px;
    overflow: hidden; /* Mantiene la imagen recortada normalmente */
}

/* En hover, permitimos que el borde y el escalado se vean si sobresalen */
.card:hover {
    overflow: visible; 
    z-index: 100; /* Asegura que la tarjeta escalada esté sobre las demás */
    transform: scale(1.05); /* Efecto Disney+ */
    box-shadow: rgb(0 0 0 / 90%) 0px 30px 20px -10px;
}

/* El resaltado blanco de Disney+ al pasar el mouse */
.card::before {
  border-radius: 8px; /* Aumentado a 8px */
  border: 2px solid rgba(255, 255, 255, 0); 
  inset: 0px;
  content: "";
  position: absolute;
  transition: border 300ms ease-out 0s;
  z-index: 10; /* Siempre sobre la imagen y los detalles */
  pointer-events: none;
}

.card:hover::before {
  border: 2px solid rgba(249, 249, 249, 0.9); /* Afinado a 2px */
}

/* Contenedor de Imagen y Hover */
.card-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: var(--card-img-aspect-ratio);
    overflow: hidden;
    border-top-left-radius: 8px; /* Aumentado a 8px */
    border-top-right-radius: 8px; /* Aumentado a 8px */
}

.card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Desktop default */
}

/*  ------------------------  */
/* --- ESTILOS DE LOS DETALLES (DEBAJO DE LA IMAGEN) --- */
.card-details {
    background-color: var(--secondary-background);
    color: var(--text-color);

    z-index: 1;
    font-size: 0.8rem;
    flex-grow: 1;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    /* padding: 0.5rem; */ /* Padding interno de los detalles */
}

.card-details p {
    margin: 0;
    padding: 0.1rem 0;
}

.card-name {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-stock-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
}

.card-quantity span {
    font-weight: bold;
    color: var(--text-white);
}

.card-availability-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* margin-left: 0.5rem; */
    flex-shrink: 0;
}

.card-availability-indicator.status-available {
    background-color: #32CD32;
}

.card-availability-indicator.status-unavailable {
    background-color: #DC143C;
}
/* --- ESTILOS DE LOS DETALLES (NUEVO ESQUEMA 2 FILAS COMPACTO) --- */
.food-card {
    padding: 3px 4px 6px 4px; /* Optimizado: Reduce padding para ganar espacio */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 15%, #000 100%);
    border-bottom-left-radius: 8px; /* Aumentado a 8px */
    border-bottom-right-radius: 8px; /* Aumentado a 8px */
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 45px; /* Optimizado */
    max-height: 60px;
    height: auto;
    overflow: hidden;
}

.row-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 20px;
}

.nick-title {
    font-size: 13px; /* Igualar a buscador para consistencia */
    font-weight: 700;
    color: var(--text-white);
    margin: 0;
    
    /* LÓGICA FLEX PARA MAXIMIZAR ESPACIO */
    display: block; 
    flex: 1;            /* Ocupa TODO el espacio libre */
    min-width: 0;       /* Permite colapsar si es necesario */
    max-width: 100%;    /* Elimina restricción del 70% */
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.age-info {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0; /* No se encoge */
    white-space: nowrap; /* Evita saltos de línea */
}

.age-number {
    font-size: 13px; /* Aumentado 1px */
    color: var(--text-white);
    font-weight: 400;
}

.age-label {
    font-size: 13px; /* Aumentado 1px para igualar */
    color: var(--text-muted);
    font-weight: 400;
    text-transform: lowercase;
}

/* --- ESTRELLAS DE PRECISIÓN EN CARD --- */
.rating-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-white);
    flex-shrink: 0; /* No se encoge */
    white-space: nowrap; /* Evita saltos de línea */
}

.rating-number {
    font-size: 12px;
    color: var(--text-white);
    font-weight: 400;
}

.star-item-card {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    font-size: 12px;
    transform: translateY(-2px); /* Subido un poco más para nivelar perfectamente */
    flex-shrink: 0; /* No se encoge */
}

.star-empty-card {
    color: var(--text-muted); 
}

.star-fill-card {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    width: 0%;
    z-index: 2;
}

.star-fill-card i {
    width: 12px;
    color: var(--accent-gold);
    text-shadow: 0 0 3px rgba(255, 188, 17, 0.3); /* Contorno más fino y suave */
    display: block;
}

.status-dot {
    font-size: 28px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    margin-left: 6px !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
}

.status-dot::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    pointer-events: none;
}

.status-active {
    color: var(--status-active);
    text-shadow: 0 0 10px rgba(0, 230, 30, 0.7);
    animation: dotBlink 1.6s ease-in-out infinite;
}

.status-active::after {
    border: 2px solid var(--status-active);
    animation: dotRipple 1.6s ease-out infinite;
}

.status-inactive {
    color: var(--status-inactive);
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
    animation: dotBlink 1.6s ease-in-out infinite;
}

.status-inactive::after {
    border: 2px solid var(--status-inactive);
    animation: dotRipple 1.6s ease-out infinite;
}

@keyframes dotBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

@keyframes dotRipple {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(2.2); opacity: 0; }
}

.title {
  color: white;
  margin-bottom: 6px;
  margin-left: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 6px;
  position: relative;
  z-index: 5;
}

.title h3 {
  margin: 0;
  font-size: clamp(0.75rem, 0.55rem + 1.1vw, 0.9375rem); /* 12 px → 15 px */
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.88);
}

.title-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-left: -12px; /* compensa el padding para no correr el título hacia la derecha en reposo */
  border-radius: 20px;
  transition: all 0.2s ease;
  position: relative;
  z-index: 10;
  cursor: pointer;
}

.title-link:hover {
  color: #ff3333;
  background-color: rgba(245, 5, 17, 0.12);
  transform: translateX(4px);
  text-shadow: 0 0 8px rgba(245, 5, 17, 0.5);
}

.title-link:hover h3 {
  color: #fff;
}

.title-link:active {
  transform: translateX(7px) scale(0.92);
  color: var(--primary-red, #f50511);
  background-color: rgba(245, 5, 17, 0.2);
  text-shadow: 0 0 16px rgba(245, 5, 17, 0.85);
}

.title-link:active h3 {
  color: var(--primary-red, #f50511);
}

.view-all-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 20px;
  transition: all 0.2s ease;
  position: relative;
  z-index: 10;
  cursor: pointer;
}

.view-all-link:hover {
  color: #ff3333;
  background-color: rgba(245, 5, 17, 0.12);
  transform: translateX(4px);
  text-shadow: 0 0 8px rgba(245, 5, 17, 0.5);
}

.view-all-link:active {
  transform: translateX(7px) scale(0.92);
  color: var(--primary-red, #f50511);
  background-color: rgba(245, 5, 17, 0.2);
  text-shadow: 0 0 16px rgba(245, 5, 17, 0.85);
}

.view-all-link i {
  font-size: clamp(13px, 0.5rem + 1vw, 16px);
}

.view-all-link i:last-child {
  margin-left: -5px;
}

.list-title {
  color: white;
  padding-left: 0; /* Eliminado padding lateral */
  margin-top: 2px;
  margin-bottom: 5px;
  margin-left: 0;
}

.slider div img {
  border-radius: 10px;
  width: 100%;
  aspect-ratio: 2 / 3; /* Aspect Ratio genérico para tarjetas verticales */
  object-fit: cover;
  display: block;
}

/* =============================================
   Banner principal - MOBILE FIRST
   Imagenes recomendadas: 1080x720 (3:2)
   ============================================= */

/* Mobile (default) - imagen completa, protagonista */
#home-banner .slider div img {
  width: 100%;
  height: auto;
  aspect-ratio: unset;
  object-fit: unset;
  border-radius: 0;
  display: block;
}

#home-banner .cl {
  overflow: hidden;
}

#home-banner .slide {
  line-height: 0;
}

/* Tablet - limitar altura para no dominar */
@media (min-width: 768px) {
  #home-banner .slider div img {
    height: 50vw;
    max-height: 420px;
    object-fit: cover;
    object-position: center center;
  }
}

/* Desktop - mas compacto */
@media (min-width: 1200px) {
  #home-banner .slider div img {
    height: 30vw;
    max-height: 380px;
  }
}
/* Estilos de respuesta móviles (Media Queries) */

/* El h3 dentro de .title usa su propio clamp() — estas reglas aplican
   al contenedor y a elementos no-h3 (list-title, fallbacks). */
@media (min-width: 300px) {
  .list-title {
    font-size: 15px;
    font-weight: 600;
  }
}
@media (min-width: 482px) {
  .list-title {
    font-size: 17px;
    font-weight: 600;
  }
}
@media (min-width: 768px) {
  .list-title {
    font-size: 19px;
    font-weight: 600;
  }
}

/* ═══════════════════════════════════════════════
   TOP 10 — TÍTULO ESPECIAL
   ═══════════════════════════════════════════════ */

.title--top10 {
  padding: 2px 6px 2px 0;
  margin-bottom: 8px;
  position: relative;
  /* Acento lateral rojo vivo */
  border-left: 3px solid #f50511;
  padding-left: 8px;
  /* Halo rojo tenue detrás de toda la fila */
  background: linear-gradient(90deg, rgba(245,5,17,0.10) 0%, transparent 55%);
  border-radius: 0 4px 4px 0;
}

/* ── Link contenedor ── */
.top10-title-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* ── Badge: bolt + TOP + 10 ── */
.top10-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Rayo animado ── */
/* Doble clase para ganar especificidad ante reglas .fas genéricas en CSS de página */
.top10-bolt,
.fas.top10-bolt {
  font-size: 22px;
  display: inline-block;   /* transform requiere bloque */
  color: #ffcc00;
  margin-right: 0;         /* neutraliza .fas { margin-right } de perfil.css */
  text-shadow:
    0 0 6px  #ffcc00,
    0 0 14px #ff9900,
    0 0 28px rgba(255,80,0,0.7);
  animation: top10-bolt-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
  line-height: 1;
}

@keyframes top10-bolt-pulse {
  0%, 100% {
    text-shadow:
      0 0 4px  #ffcc00,
      0 0 10px #ff9900,
      0 0 20px rgba(255,80,0,0.5);
    transform: scale(1) rotate(0deg);
  }
  50% {
    text-shadow:
      0 0 8px  #fff,
      0 0 18px #ffcc00,
      0 0 32px #ff9900,
      0 0 48px rgba(245,5,17,0.25);
    transform: scale(1.25) rotate(-8deg);
  }
}

/* ── Wrapper texto TOP + 10 alineados ── */
.top10-text-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}

/* ── "TOP" — píldora roja pequeña ── */
.top10-label {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #ff2222, #c20000);
  padding: 2px 5px 2px 5px;
  border-radius: 3px;
  margin-bottom: 6px;  /* empuja hacia arriba respecto al "10" */
  box-shadow: 0 0 8px rgba(245,5,17,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* ── "10" — número grande con degradado metálico-rojo ── */
.top10-number {
  font-size: 36px;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -3px;
  /* Degradado: blanco-brillante arriba → rojo vivo abajo */
  background: linear-gradient(175deg,
    #ffffff  0%,
    #ffcccc 25%,
    #ff3333 55%,
    #cc0000 80%,
    #800000 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Sombra roja profunda */
  filter: drop-shadow(0 3px 10px rgba(245,5,17,0.65));
  /* Fuente de impacto */
  font-family: 'Impact', 'Arial Black', 'Arial Bold', sans-serif;
  transition: filter 0.2s ease;
}

/* Hover: intensifica el glow */
.top10-title-link:hover .top10-number {
  filter: drop-shadow(0 3px 18px rgba(245,5,17,0.95));
}

.top10-title-link:hover .top10-bolt {
  animation-duration: 0.55s;
}

/* Click: pulso más intenso y breve, distinto del hover */
.top10-title-link:active .top10-number {
  filter: drop-shadow(0 3px 26px rgba(245, 5, 17, 1));
}

.top10-title-link:active .top10-bolt {
  animation-duration: 0.3s;
}

/* Flecha "ver todo" junto al Top 10 */
.top10-view-all {
  color: rgba(255, 100, 80, 0.85);
  transition: color 0.2s, transform 0.2s;
}

.top10-view-all:hover {
  color: #ff3333;
  background-color: rgba(245,5,17,0.12);
  transform: translateX(4px);
}

/* Responsive: ajustar el "10" en pantallas pequeñas */
@media (max-width: 391px) {
  .top10-number { font-size: 28px; }
  .top10-bolt   { font-size: 17px; }
}
@media (min-width: 482px) {
  .top10-number { font-size: 38px; }
  .top10-bolt   { font-size: 24px; }
}
@media (min-width: 768px) {
  .top10-number { font-size: 42px; letter-spacing: -4px; }
  .top10-bolt   { font-size: 27px; }
  .top10-label  { font-size: 9px; }
}

/* ═══════════════════════════════════════════════
   SEPARADOR ENTRE CARRUSELES
   ═══════════════════════════════════════════════ */

@keyframes sep-breathe {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1;   }
}

@keyframes sep-shimmer {
  0%   { left: -45%; opacity: 0;   }
  8%   { opacity: 1;               }
  92%  { opacity: 1;               }
  100% { left: 145%; opacity: 0;   }
}

/* Carrusel del home aún no hidratado: las tarjetas se crean recién al acercarse
   al viewport (carrusel.js → _fillSlider). Se reserva la altura que ocuparán para
   que el scroll no salte cuando aparezcan.

   La estimación sigue los breakpoints de SLIDER_SETTINGS (nº de tarjetas visibles):
   alto ≈ ancho_tarjeta × 1.5 (aspect-ratio 2/3) + ~50px de la ficha inferior. */
.carousel-pending {
  min-height: calc(50vw + 50px); /* 3 tarjetas — móvil */
}
@media (max-width: 300px) {
  .carousel-pending { min-height: calc(75vw + 50px); }    /* 2 tarjetas */
}
@media (min-width: 483px) and (max-width: 860px) {
  .carousel-pending { min-height: calc(37.5vw + 50px); }  /* 4 tarjetas */
}
@media (min-width: 861px) and (max-width: 1200px) {
  .carousel-pending { min-height: calc(25vw + 50px); }    /* 6 tarjetas */
}
@media (min-width: 1201px) and (max-width: 1400px) {
  .carousel-pending { min-height: calc(18.75vw + 50px); } /* 8 tarjetas */
}
@media (min-width: 1401px) {
  .carousel-pending { min-height: calc(15vw + 50px); }    /* 10 tarjetas */
}

/* Top 10 del home: misma reserva, pero EXACTA.
   `.carousel-pending` puede permitirse aproximar (+50px) porque su hueco se rellena
   antes de que el usuario llegue; el Top 10 está arriba del todo y su aparición
   desplazaba la página entera — hasta 6 s después de cargar, cuando Slick termina.
   Medido en 390/360/768/1440: el grid mide EXACTAMENTE `ancho_tarjeta × 1.5 + 55px`,
   con ancho_tarjeta = 100vw / nº de tarjetas visibles. De ahí el `150vw/N + 55px`.
   El título no se reserva: va estático en el HTML, así que ya ocupa su altura real.
   La clase la retira `renderBoostTop()` cuando Slick ya transformó el grid; a partir
   de ahí manda el contenido, que mide lo mismo. */
/* `height` + `overflow:hidden`, NO `min-height`: mientras Slick no ha transformado el
   grid las 10 tarjetas se apilan en vertical y con `min-height` el contenedor crece
   hasta ~6400px (medido), desplazando todo lo de abajo justo antes de revelarse.
   Con altura fija el hueco es exactamente el reservado, pase lo que pase dentro. */
.top10-reserving #top10-grid {
  height: calc(50vw + 55px);                                        /* 3 tarjetas — móvil */
  overflow: hidden;
  visibility: hidden;   /* sin Slick las 10 tarjetas se apilan: se reserva, no se enseña */
}
@media (max-width: 299px) {
  /* 299 y no 300: medido, a 300px exactos Slick sigue mostrando 3 tarjetas.
     El `breakpoint: 300` de SLIDER_SETTINGS aplica por DEBAJO de ese ancho. */
  .top10-reserving #top10-grid { height: calc(75vw + 55px); }    /* 2 tarjetas */
}
@media (min-width: 483px) and (max-width: 860px) {
  .top10-reserving #top10-grid { height: calc(37.5vw + 55px); }  /* 4 tarjetas */
}
@media (min-width: 861px) and (max-width: 1200px) {
  .top10-reserving #top10-grid { height: calc(25vw + 55px); }    /* 6 tarjetas */
}
@media (min-width: 1201px) and (max-width: 1400px) {
  .top10-reserving #top10-grid { height: calc(18.75vw + 55px); } /* 8 tarjetas */
}
@media (min-width: 1401px) {
  .top10-reserving #top10-grid { height: calc(15vw + 55px); }    /* 10 tarjetas */
}

.carousel-separator {
  display: block;
  clear: both;
  width: 100%;
  box-sizing: border-box;
  height: 1px;
  margin: 1px 0 2px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(245, 5, 17, 0.12) 18%,
    rgba(245, 5, 17, 0.65) 50%,
    rgba(245, 5, 17, 0.12) 82%,
    transparent 100%
  );
  animation: sep-breathe 3s ease-in-out infinite;
}

.carousel-separator::after {
  content: '';
  position: absolute;
  top: 0;
  left: -45%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 120, 60, 0.45),
    rgba(255, 255, 255, 0.65),
    rgba(255, 120, 60, 0.45),
    transparent
  );
  animation: sep-shimmer 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: 0.8s;
}

/* ── Fin del carrusel ──────────────────────────────────────────────────────
   Última "tarjeta" de un carrusel que ya no tiene más perfiles que traer.

   No es decoración: un carrusel agotado y un carrusel roto se ven exactamente
   igual —deja de moverse y ya—, así que sin este remate no hay forma de
   distinguirlos. El movimiento es lo que se lee como "llegaste al final", de
   ahí que la entrada se dispare al ENTRAR EN PANTALLA (`.is-visible`, la pone
   el IntersectionObserver de carrusel.js) y no al insertarse: la tarjeta se
   añade mientras el usuario aún está varias páginas atrás, y una animación
   lanzada ahí ya habría terminado cuando llegue a verla. */
/* ⚠️ SIN padding lateral ni nada que ensanche el slide. Slick fija el ancho de
   cada slide con `jQuery.width()`, que con `box-sizing: border-box` SUMA el
   padding al `style.width`: 3px por lado dejaban esta tarjeta 6px más ancha que
   las demás, la suma de slides pasaba del ancho que Slick le dio al track
   (3256 contra 3250) y el remate se envolvía a una segunda fila, invisible bajo
   el `overflow:hidden` de `.slick-list`. El respiro lateral va DENTRO, en el
   margen del inner. */
.carousel-end {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.carousel-end__inner {
  position: relative;
  width: calc(100% - 6px);
  margin: 0 3px;
  /* Proporción de una tarjeta real (imagen 2/3 + ficha inferior), no 2/3 a
     secas: si no, el remate se queda visiblemente corto junto a las fotos. */
  aspect-ratio: 0.53;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(115% 85% at 50% 0%, rgba(245, 5, 17, 0.16), rgba(0, 0, 0, 0) 62%),
    #0a0a0a;
  border: 1px dashed rgba(245, 5, 17, 0.4);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
/* Huecos que completan la última página para que el remate sea alcanzable
   (ver _appendEndCard). No se ven; solo ocupan su sitio en la cuenta de Slick. */
.carousel-end-filler {
  visibility: hidden;
  height: 1px;
}

.carousel-end__inner:hover {
  border-color: rgba(245, 5, 17, 0.85);
  transform: scale(1.03);
}

/* Aro que late de fondo — mantiene la tarjeta "viva" cada vez que se vuelve a
   ella, no solo la primera vez que aparece. */
.carousel-end__ripple {
  position: absolute;
  top: 32%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 1px solid rgba(245, 5, 17, 0.5);
  opacity: 0;
  pointer-events: none;
}

.carousel-end__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, #f22, #a80000);
  box-shadow: 0 0 12px rgba(245, 5, 17, 0.55);
  opacity: 0;
  transform: scale(0.3);
}

.carousel-end__title {
  font-size: clamp(11px, 0.55rem + 0.6vw, 14px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
}

.carousel-end__hint {
  font-size: clamp(9px, 0.45rem + 0.4vw, 11px);
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: translateY(6px);
}

.carousel-end__cta {
  margin-top: 2px;
  padding: 4px 9px;
  border-radius: 20px;
  font-size: clamp(9px, 0.45rem + 0.4vw, 11px);
  font-weight: 600;
  white-space: nowrap;
  color: #ff6450;
  border: 1px solid rgba(245, 5, 17, 0.45);
  background: rgba(245, 5, 17, 0.08);
  opacity: 0;
  transform: translateY(6px);
}
.carousel-end__cta i { font-size: 8px; margin-left: 2px; }

/* Entrada escalonada: el aro late, el sello aparece y el texto sube detrás. */
.carousel-end.is-visible .carousel-end__ripple {
  animation: cend-ripple 2.6s ease-out 0.25s infinite;
}
.carousel-end.is-visible .carousel-end__icon {
  animation: cend-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.05s forwards;
}
.carousel-end.is-visible .carousel-end__title { animation: cend-rise 0.4s ease-out 0.24s forwards; }
.carousel-end.is-visible .carousel-end__hint  { animation: cend-rise 0.4s ease-out 0.34s forwards; }
.carousel-end.is-visible .carousel-end__cta   { animation: cend-rise 0.4s ease-out 0.44s forwards; }

@keyframes cend-pop {
  0%   { opacity: 0; transform: scale(0.3); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cend-rise {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes cend-ripple {
  0%   { opacity: 0.8; transform: scale(0.55); }
  70%  { opacity: 0;   transform: scale(2.1); }
  100% { opacity: 0;   transform: scale(2.1); }
}

/* Sin movimiento: el remate tiene que seguir siendo legible, así que se muestra
   entero de entrada en vez de quedarse invisible esperando una animación. */
@media (prefers-reduced-motion: reduce) {
  .carousel-end__ripple { display: none; }
  .carousel-end__icon,
  .carousel-end__title,
  .carousel-end__hint,
  .carousel-end__cta {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}