/* ====== EFECTO COLLAPSE PARA TARJETAS ====== */
/* Fila: misma altura para todas las cards para que las adyacentes llenen todo el alto */
.cards-row {
  align-items: stretch;
}

.home-category-card {
  height: 650px;
  min-height: 650px;
  flex: 1;
  overflow: hidden;
  border-radius: 1.5rem;
  transition: flex 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), background-color 0.4s ease-out;
  background: var(--color-secondary-75);
  cursor: pointer;
  will-change: flex;
  animation: debounce 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Activa o Hover: expande */
.home-category-card.active,
.home-category-card:hover {
  flex: 2;
  background: var(--color-secondary-100);
  animation: bounce 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ===== ACTIVE se desactiva cuando hay hover en el contenedor ===== */
.cards-row:has(.home-category-card:hover)
  .home-category-card.active:not(:hover) {
  flex: 1;
  background: var(--color-secondary-75);
  animation: none;
}
/* Colapsa imagen, contenido, texto y subcategorías en esa "active" temporalmente desactivada */
.cards-row:has(.home-category-card:hover)
  .home-category-card.active:not(:hover)
  .imagen {
  height: 650px;
}
.cards-row:has(.home-category-card:hover)
  .home-category-card.active:not(:hover)
  .contenido {
  height: 98px;
}
.cards-row:has(.home-category-card:hover)
  .home-category-card.active:not(:hover)
  .contenido
  p {
  display: none;
}
.cards-row:has(.home-category-card:hover)
  .home-category-card.active:not(:hover)
  .subcategories {
  height: 0;
}

/* ---- Imagen: sin transición de height (evita saltillos al redibujar) ---- */
.home-category-card .imagen {
  height: 650px;
  overflow: hidden;
  border-radius: 1.5rem;
  flex-shrink: 0;
  /* Sin transition: el cambio de tamaño es instantáneo y evita enganchones */
  transition: none;
}
.home-category-card .imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-category-card.active .imagen,
.home-category-card:hover .imagen {
  height: 320px; /* menos altura para dar más espacio al contenido y que las pills no se corten */
}

/* ---- Contenido: píxeles para transición fluida ---- */
.home-category-card .contenido {
  height: 98px; /* colapsado: solo título */
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.home-category-card.active .contenido,
.home-category-card:hover .contenido {
  height: 330px; /* 650 - 320: más espacio para descripción + pills sin cortar */
  min-height: 0;
}

/* ---- Texto ---- */
.home-category-card .contenido p {
  display: none;
}
.home-category-card.active .contenido p,
.home-category-card:hover .contenido p {
  display: block;
}

/* ---- Subcategorías ---- */
.home-category-card .subcategories {
  height: 0;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  interpolate-size: allow-keywords;
}
.home-category-card.active .subcategories,
.home-category-card:hover .subcategories {
  height: auto;
}

/* ---- Animaciones (suaves, sin rebote brusco) ---- */
@keyframes bounce {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes debounce {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1.5%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .home-category-card,
  .home-category-card .imagen,
  .home-category-card .contenido,
  .home-category-card .subcategories {
    transition: none !important;
    animation: none !important;
  }
}

/* ====== MOBILE: Sin hover, todas desplegadas ====== */
@media (max-width: 640px) {
  /* Desactivar todos los efectos hover en mobile */
  .home-category-card:hover {
    flex: 1 !important;
    background: var(--color-secondary-100) !important; /* Mismo fondo que active/hover */
    animation: none !important;
    transition: none !important;
  }

  .home-category-card:hover .imagen {
    height: auto !important;
  }

  .home-category-card:hover .contenido {
    height: auto !important;
    min-height: fit-content !important;
  }

  .home-category-card:hover .contenido p {
    display: block !important;
  }

  .home-category-card:hover .subcategories {
    height: auto !important;
  }

  /* Desactivar reglas :has() en mobile */
  .cards-row:has(.home-category-card:hover) .home-category-card.active:not(:hover) {
    flex: 1 !important;
    background: var(--color-secondary-100) !important; /* Mismo fondo que active/hover */
    animation: none !important;
  }

  .cards-row:has(.home-category-card:hover) .home-category-card.active:not(:hover) .imagen {
    height: auto !important;
  }

  .cards-row:has(.home-category-card:hover) .home-category-card.active:not(:hover) .contenido {
    height: auto !important;
    min-height: fit-content !important;
  }

  .cards-row:has(.home-category-card:hover) .home-category-card.active:not(:hover) .contenido p {
    display: block !important;
  }

  .cards-row:has(.home-category-card:hover) .home-category-card.active:not(:hover) .subcategories {
    height: auto !important;
  }

  /* Todas las cards desplegadas en mobile (sin hover) */
  .home-category-card {
    flex: 1 !important;
    background: var(--color-secondary-100) !important; /* Mismo fondo que active/hover */
    transition: none !important;
    animation: none !important;
  }

  .home-category-card .imagen {
    height: auto !important;
    transition: none !important;
  }

  .home-category-card .contenido {
    height: auto !important;
    min-height: fit-content !important;
    transition: none !important;
  }

  .home-category-card .contenido p {
    display: block !important;
  }

  .home-category-card .subcategories {
    height: auto !important;
    transition: none !important;
  }

  /* Forzar estilos consistentes en los botones de subcategorías en mobile */
  .home-category-card .subcategories a {
    font-size: 0.875rem !important; /* text-sm = 14px */
    padding: 0.5rem 0.875rem !important; /* py-2 px-3.5 */
    background-color: var(--color-secondary-75) !important;
    color: white !important;
  }
}

/* Desktop: estilos consistentes para los botones de subcategorías */
@media (min-width: 640px) {
  .home-category-card .subcategories a {
    font-size: 1rem !important; /* text-[16px] = 16px */
    padding: 0.5rem 0.875rem !important; /* py-2 px-3.5 */
    background-color: var(--color-secondary-75) !important;
    color: white !important;
  }
}