/* =========================================================
   PORTADA — PRODUCTOS DESTACADOS (carrusel dinámico)
   =========================================================
   Sección controlada por js/home-destacados.js, que lee
   data/products.json y pinta solo los productos con
   destacado=true y activo=true.

   Las tarjetas reutilizan las clases .product-card del
   catálogo (css/style.css), pero dentro de #destacadosSection
   se les da un lenguaje propio: líneas rectas (border-radius 0),
   planas (sin sombras ni elevación al hover) y sin el overlay
   "Ver producto", para que esta sección no se confunda con los
   contenedores de categorías (borde + sombra grande).
   ========================================================= */

/* La sección se oculta con el atributo [hidden] cuando no hay
   destacados o falla la carga, pero .seccion-general-1 usa
   display:flex y lo anularía: sin esta regla seguiría visible. */
#destacadosSection[hidden] {
  display: none !important;
}

.destacados-carrusel {
  width: 100%;
  min-width: 0;
  margin-bottom: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  overflow-anchor: none;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  container-type: inline-size;
}

.destacados-carrusel::-webkit-scrollbar {
  display: none;
}

.destacados-carrusel:focus-visible {
  outline: 2px solid #111;
  outline-offset: 4px;
}

.destacados-pista {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: max-content;
  min-width: 100%;
  will-change: transform;
}

/* Durante el gesto, la pista vuelve al flujo y Safari desplaza el
   contenedor con su scroll/inercia nativos. El área sigue siendo
   scrollable desde el inicio para que iOS reconozca el gesto. */
.destacados-carrusel.modo-tactil {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
}

.destacados-pista.destacados-marquee {
  animation-name: destacados-marquee-loop;
  animation-duration: 30s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

@keyframes destacados-marquee-loop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--destacados-fin), 0, 0); }
}

.destacados-grupo {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 18px;
}

.destacados-fila {
  display: flex;
  flex: 0 0 auto;
  gap: 16px;
  width: max-content;
}

.destacados-item {
  flex: 0 0 calc((100cqi - 48px) / 4);
  min-width: 0;
}

/* Tarjetas de altura igualada: el precio queda alineado en la
   fila aunque los títulos tengan líneas distintas. */
.destacados-item .product-card {
  display: flex;
  height: 100%;
}

.destacados-item .product-card-inner {
  flex: 1;
}

/* El esqueleton de carga reservaba 340px fijos; dentro del
   carrusel usa la misma proporción de imagen que la tarjeta
   real para que la fila no cambie de alto al llegar los datos. */
.destacados-pista .skeleton-image {
  height: auto;
  aspect-ratio: 1 / 1.2;
}

/* ------------------------------------------------------------
   TARJETAS EN ESTA SECCIÓN — rectas y planas
   ------------------------------------------------------------ */

#destacadosSection .product-card-inner,
#destacadosSection .product-skeleton {
  border-radius: 0;
  border-color: #e9e6e0;
  box-shadow: none;
}

#destacadosSection .product-card:hover .product-card-inner {
  transform: none;
  border-color: #111;
  box-shadow: none;
}

#destacadosSection .product-card:hover .product-image {
  transform: none;
}

#destacadosSection .product-overlay {
  display: none;
}

/* Etiqueta de descuento pegada a la esquina, sin pastilla */
#destacadosSection .product-badge {
  top: 0;
  left: 0;
  border-radius: 0;
  padding: 6px 10px;
  background: #111;
  letter-spacing: .06em;
}

/* Disponibilidad como etiqueta con contorno, sin relleno redondo */
#destacadosSection .product-stock,
#destacadosSection .product-stock.low-stock {
  border-radius: 0;
  background: transparent;
  border: 1px solid #d8e8dd;
  padding: 4px 8px;
  font-size: .66rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#destacadosSection .product-stock.low-stock {
  border-color: #f0dcc4;
}

/* Categoría en gris neutro: paleta sobria dentro de la sección */
#destacadosSection .product-category {
  color: #9b9b9b;
}

/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width: 992px) and (min-width: 769px) {
  .destacados-item {
    flex-basis: calc((100cqi - 32px) / 3);
  }
}

/* ------------------------------------------------------------
   MÓVIL
   ------------------------------------------------------------ */

@media (max-width: 768px) {
  .destacados-carrusel {
    margin-bottom: 32px;
  }

  .destacados-pista,
  .destacados-fila {
    gap: 10px;
  }

  .destacados-item {
    /* Dos tarjetas completas visibles en móvil. */
    flex-basis: calc((100cqi - 10px) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .destacados-carrusel {
    scroll-behavior: auto;
  }

  .destacados-pista.destacados-marquee {
    animation: none;
  }
}