/* ==========================================================================
   Senseben — Compra por categoría (Bento grid)
   Migrado desde prototipo/senseben-category-explorer/. Contenido fijo por
   ahora (tiers/íconos/descripciones hardcodeados en category-explorer.js),
   pero cada tarjeta enlaza a la categoría real vía categoria.php?slug=...
   (slug/nombre vienen de la BD, ver window.catExplorerData en index.php).
   El header (eyebrow/h2) y el contenedor de la sección reutilizan las
   clases ya existentes del sitio (.section, .container, .section-head) —
   acá solo van las variables de marca y el grid/tarjetas, escopados a
   .cat-explorer para no chocar con el resto de style.css. */

.cat-explorer {
  color-scheme: light;

  /* Paleta OFICIAL de marca Senseben (ficha del cliente). */
  --brand-marca: #9298ba;
  --brand-botones: #6f759c;
  --brand-fondo: #f8f9fc;
  --brand-contenedor: #91adba;
  --brand-texto-principal: #333333;
  --brand-texto-secundario: #8d8d8d;

  --foreground: var(--brand-texto-principal);
  --muted-foreground: var(--brand-texto-secundario);
  --card: #ffffff;
  --hairline: color-mix(in srgb, var(--brand-contenedor) 22%, white);
  --gradient-mist: linear-gradient(
    140deg,
    color-mix(in srgb, white 90%, transparent) 0%,
    color-mix(in srgb, var(--brand-fondo) 80%, transparent) 45%,
    color-mix(in srgb, var(--brand-contenedor) 55%, transparent) 100%
  );
  --shadow-soft: 0 1px 2px rgba(51, 51, 51, 0.05);

  /* Modo "hover" SOLO EN la tarjeta (no toca la sección): estas variables
     las redefine .cat-card en :hover y las heredan sus hijos (título,
     descripción, eyebrow "Destacado", etiqueta "Explorar") — ver más
     abajo. */
  --card-hover-gradient: linear-gradient(
    135deg,
    color-mix(in srgb, #9298ba 68%, white),
    color-mix(in srgb, #91adba 68%, white)
  );
  --card-dark-fg: var(--brand-fondo);

  --font-heading: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  color: var(--foreground);
}
.cat-explorer *, .cat-explorer *::before, .cat-explorer *::after { box-sizing: border-box; }

/* ---------- Fila de categorías padre (arriba del carrusel) ----------
   Filtra qué subcategorías muestra el carrusel de abajo. Vive fuera de
   .cat-explorer (usa la paleta global de style.css, no las variables
   locales de acá) porque en el markup es un hermano previo, no un hijo. */
.cat-parent-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 28px;
}
.cat-parent-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cat-parent-btn:hover { border-color: var(--color-marca); color: var(--color-plum); }
.cat-parent-btn.is-active {
  background: var(--color-marca);
  border-color: var(--color-marca);
  color: #fff;
}

/* Mobile: pastillas más chicas y con menos separación — aprovechar
   mejor el espacio angosto en vez de ocupar tanto alto. */
@media (max-width: 768px) {
  .cat-parent-nav { gap: 6px; }
  .cat-parent-btn { font-size: 11.5px; padding: 7px 12px; }
}

/* ---------- Carrusel infinito (muestra 2 tarjetas a la vez) ----------
   Mismo mecanismo que .blog-carrusel/.blog-track en style.css: máscara
   de desvanecido en los bordes, track en flex que se desplaza con
   transform vía JS (scroll continuo + flechas + dots). */
.cat-carrusel {
  position: relative;
  overflow: hidden;
  /* Padding generoso en los 4 lados: el hover de la tarjeta la levanta
     (translateY(-10px)) y le agrega una sombra grande — sin este
     espacio, el overflow:hidden (necesario para el carrusel) también
     recorta esa sombra, tanto arriba/abajo como en los costados. El
     ancho de tarjeta en JS ya descuenta este padding horizontal. */
  padding: 20px 20px 56px;
}
.cat-track {
  display: flex;
  width: max-content;
  gap: 1.25rem;
}
/* Ancho de tarjeta calculado en JS (--cat-card-width) contra el ancho
   real del carrusel, para que siempre se vea una cantidad EXACTA de
   tarjetas completas (2 en desktop/tablet, 1 en mobile) sin que sobre
   ni falte espacio — el valor fijo en rem de antes dejaba asomar un
   pedazo de la siguiente tarjeta según la resolución. */
.cat-track-card {
  flex: 0 0 var(--cat-card-width, 34rem);
  width: var(--cat-card-width, 34rem);
}

/* Modo grid: menos de 3 subcategorías en la categoría padre activa no
   alcanzan para un carrusel infinito con sentido — se muestran quietas,
   sin flechas ni dots. */
.cat-explorer.es-grid .cat-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  width: 100%;
}
.cat-explorer.es-grid .cat-track-card {
  width: 100%;
}
.cat-explorer.es-grid.es-unico .cat-track {
  display: flex;
  justify-content: center;
}
.cat-explorer.es-grid.es-unico .cat-track-card {
  width: 50%;
}
.cat-explorer.es-grid .cat-carrusel-arrow,
.cat-explorer.es-grid .cat-carrusel-nav-movil {
  display: none !important;
}

/* Flechas flotando SOBRE el carrusel, centradas verticalmente a los
   costados de las tarjetas — solo aparecen (fade in) al pasar el mouse
   sobre el carrusel, así no compiten visualmente con nada cuando no se
   están usando. El hover de cada flecha desplaza el propio glifo hacia
   el lado al que apunta (no un levantamiento vertical, que no tiene
   sentido para un control horizontal) — mismo lenguaje de
   micro-interacción que ya usa "Explorar →" dentro de las tarjetas. */
.cat-carrusel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 18px -6px rgba(51, 51, 51, 0.28);
  border: 1.5px solid color-mix(in srgb, var(--brand-marca) 45%, transparent);
  color: var(--brand-texto-principal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.cat-carrusel:hover .cat-carrusel-arrow { opacity: 1; pointer-events: auto; }
.cat-carrusel-arrow.prev { left: 10px; }
.cat-carrusel-arrow.next { right: 10px; }
.cat-carrusel-arrow span {
  display: inline-block;
  transition: transform 200ms var(--ease-out);
}
.cat-carrusel-arrow:hover { border-color: var(--brand-marca); color: var(--brand-marca); }
.cat-carrusel-arrow.prev:hover span { transform: translateX(-3px); }
.cat-carrusel-arrow.next:hover span { transform: translateX(3px); }
/* En mobile las flotantes se ocultan (no hay espacio para que "floten"
   sin tapar la tarjeta) y en su lugar aparecen las --movil, en la misma
   fila que los puntos de navegación (ver .cat-carrusel-nav-movil). */
@media (max-width: 640px) { .cat-carrusel-arrow:not(.cat-carrusel-arrow--movil) { display: none; } }

/* Tablet (y cualquier pantalla táctil sin hover real): las flotantes
   quedan siempre visibles, porque el "aparecer al pasar el mouse" nunca
   se dispara sin puntero — ahí no tiene sentido que dependan de :hover. */
@media (hover: none) and (min-width: 641px) {
  .cat-carrusel-arrow:not(.cat-carrusel-arrow--movil) {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Fila: flecha — puntos — flecha. Los puntos siempre van acá (en
   cualquier tamaño de pantalla); las flechas --movil de los costados
   solo se muestran en mobile (en desktop/tablet ya están las
   flotantes). */
.cat-carrusel-nav-movil {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
@media (max-width: 640px) { .cat-carrusel-nav-movil { margin-top: 0.35rem; } }

.cat-carrusel-arrow--movil {
  display: none;
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  width: 36px;
  height: 36px;
  font-size: 21px;
  box-shadow: none;
}
@media (max-width: 640px) { .cat-carrusel-arrow--movil { display: flex; } }

.cat-carrusel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cat-carrusel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hairline);
  transition: all 300ms ease;
  cursor: pointer;
}
.cat-carrusel-dot:hover { background: var(--brand-contenedor); }
.cat-carrusel-dot.activo { background: var(--brand-marca); width: 22px; border-radius: 4px; }

/* ---------- Tarjeta base ---------- */
.cat-card {
  /* Variables LOCALES de esta tarjeta — por defecto el tema claro normal;
     :hover las redefine solo dentro de esta misma tarjeta (no toca
     .cat-explorer ni afecta a las demás tarjetas de al lado). */
  --card-bg-color: var(--card);
  --card-bg-image: none;
  --card-fg: var(--brand-marca);
  --card-icon-bg: color-mix(in srgb, var(--brand-marca) 10%, white);
  --card-icon-fg: var(--brand-marca);

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  height: 100%;
  border-radius: 1rem;
  background-color: var(--card-bg-color);
  background-image: var(--card-bg-image);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out),
    border-color 350ms var(--ease-out), background-color 350ms var(--ease-out);
}
.cat-card > * { position: relative; z-index: 1; }

/* Hover SOLO en esta tarjeta: fondo = degradado Marca→Contenedor, letras/
   eyebrow/descripción/"Explorar" = el color más claro. El color del
   ÍCONO en sí (--card-icon-fg) se queda fijo en Marca (#9298BA) tanto en
   reposo como en hover — solo cambia el círculo de fondo detrás.
   --muted-foreground se redefine acá adentro: como las variables CSS
   heredan solo hacia los hijos de .cat-card, esto NO afecta al subtítulo
   de la sección ni a las demás tarjetas. */
.cat-card:hover {
  --card-bg-image: var(--card-hover-gradient);
  --card-fg: var(--card-dark-fg);
  --muted-foreground: var(--card-dark-fg);
  --card-icon-bg: var(--card-dark-fg);
  transform: translateY(-10px);
  border-color: color-mix(in srgb, var(--brand-marca) 40%, transparent);
  /* Sombra en negro puro: sobre un fondo ya saturado de color, una sombra
     basada en el gris de texto casi no se notaría — con negro se sigue
     leyendo la elevación 3D. */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), 0 20px 36px -16px rgba(0, 0, 0, 0.58);
}
.cat-card:hover .cat-card__explore--strong { color: var(--card-dark-fg); }
.cat-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-marca) 50%, transparent);
  outline-offset: 2px;
}

/* Aparición escalonada al entrar en viewport (JS agrega .is-visible al
   contenedor y fija --cat-delay por tarjeta). */
@keyframes cat-reveal {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.cat-explorer.is-visible .cat-card {
  animation: cat-reveal 0.5s var(--ease-out) both;
  animation-delay: var(--cat-delay, 0ms);
}

/* Ícono claro en reposo (como siempre); al hacer hover en LA TARJETA se
   invierte a oscuro→claro junto con el resto (usa las variables locales
   de .cat-card, que solo cambian dentro de esa tarjeta). */
.cat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0.75rem;
  border: 1px solid var(--hairline);
  background: var(--card-icon-bg);
  color: var(--card-icon-fg);
  transition: transform 300ms ease-out, background 350ms var(--ease-out), color 350ms var(--ease-out);
}
.cat-card:hover .cat-card__icon { transform: translateY(-2px); }
.cat-card__icon svg { display: block; }

/* Animación de "dibujo": el ícono está SIEMPRE presente en reposo
   (stroke-dashoffset: 0, sin animación de por medio); al hacer hover se
   dispara un ciclo único que lo "redibuja" desde oculto hasta completo
   (getTotalLength medido en JS, mismo patrón que prototipo/iconos/). Al
   salir del hover vuelve directo al estado de reposo (visible), sin
   dejar nada oculto. */
.cat-card__icon svg path,
.cat-card__icon svg circle,
.cat-card__icon svg ellipse,
.cat-card__icon svg rect,
.cat-card__icon svg line,
.cat-card__icon svg polyline,
.cat-card__icon svg polygon {
  stroke-dasharray: var(--icon-len, 0);
  stroke-dashoffset: 0;
}
@keyframes cat-icon-draw {
  from { stroke-dashoffset: var(--icon-len, 0); }
  to   { stroke-dashoffset: 0; }
}
.cat-card:hover .cat-card__icon svg path,
.cat-card:hover .cat-card__icon svg circle,
.cat-card:hover .cat-card__icon svg ellipse,
.cat-card:hover .cat-card__icon svg rect,
.cat-card:hover .cat-card__icon svg line,
.cat-card:hover .cat-card__icon svg polyline,
.cat-card:hover .cat-card__icon svg polygon {
  animation: cat-icon-draw 1600ms var(--ease-out);
}

.cat-card__explore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
}
.cat-card__explore--strong { color: var(--brand-marca); }
.cat-card__explore svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 300ms ease-out;
}
@keyframes cat-arrow-loop {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
.cat-card:hover .cat-card__explore svg {
  animation: cat-arrow-loop 900ms ease-in-out infinite;
}

/* ---------- Variante "Destacado" (2 tarjetas grandes) ---------- */
/* Altura FIJA (no min-height): así las 8 tarjetas quedan exactamente
   iguales sin importar si una descripción es más larga que otra. */
.cat-card--featured {
  height: 24rem;
  padding: 2.25rem;
}
@media (min-width: 640px) { .cat-card--featured { padding: 3rem; } }
@media (max-width: 640px) {
  .cat-card--featured { height: 17rem; padding: 1.25rem; }
  .cat-card--featured .cat-card__icon { width: 2.5rem; height: 2.5rem; }
  .cat-card--featured .cat-card__icon svg { width: 1.1rem; height: 1.1rem; }
  .cat-card--featured .cat-card__title { line-height: 1.15; }
}

/* Número de orden — guía visual del recorrido (01/02/03...), grande y
   translúcido en la esquina superior derecha. */
.cat-card--featured .cat-card__num {
  position: absolute;
  top: 0.75rem;
  right: 1.25rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--card-fg);
  opacity: 0.22;
  pointer-events: none;
  transition: color 350ms var(--ease-out);
}

/* Foto de producto de fondo: oculta en reposo, aparece solo con hover.
   El JS inserta un <img class="cat-card__photo"> como primer hijo de
   cada tarjeta destacada (product-ampoule = izquierda, product-regen =
   derecha). Encima de la foto va una capa (::after): degradado claro en
   reposo, oscuro sólido al 50% de opacidad en hover. */
.cat-card--featured .cat-card__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(1);
  transform-origin: top left;
  transition: opacity 350ms var(--ease-out), transform 1400ms var(--ease-out);
}
.cat-card--featured:hover .cat-card__photo {
  opacity: 1;
  transform: scale(1.08) translate(2%, 2%);
}

.cat-card--featured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--gradient-mist);
  transition: background 350ms var(--ease-out);
}
.cat-card--featured:hover::after {
  background: rgba(0, 0, 0, 0.5);
}

.cat-card--featured > * { position: relative; z-index: 2; }

.cat-card--featured .cat-card__icon { position: relative; width: 3.3rem; height: 3.3rem; }
.cat-card--featured .cat-card__icon svg { width: 1.375rem; height: 1.375rem; }

/* El ícono se queda arriba fijo; el body (título + descripción +
   "Explorar") ocupa el resto del alto y centra su contenido — así el
   título y el texto quedan justo a la mitad vertical de la tarjeta. */
.cat-card--featured { justify-content: flex-start; }
.cat-card--featured .cat-card__body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
}
.cat-card--featured .cat-card__title {
  margin: 0.5rem 0 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--card-fg);
  transition: color 350ms var(--ease-out);
}
@media (min-width: 640px) { .cat-card--featured .cat-card__title { font-size: 1.5rem; } }
.cat-card--featured .cat-card__desc {
  margin: 0.5rem 0 0;
  max-width: 26ch;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.cat-card--featured .cat-card__explore { margin-top: 1.5rem; }

/* ---------- Hover: split en 2 columnas (texto | foto completa) ----------
   En reposo la tarjeta se ve igual que siempre, pero al hacer hover deja
   de lado el fondo con degradado oscuro y pasa a un grid de 2 columnas —
   izquierda todo el contenido (ícono, título, descripción, "Explorar"),
   derecha la foto completa y libre, sin ninguna capa encima, con una
   sombra propia (drop-shadow, sigue el contorno real del PNG). */
.cat-card--featured:hover {
  display: grid;
  grid-template-columns: 35% 65%;
  grid-template-rows: auto auto 1fr;
  column-gap: 1.5rem;
  align-items: start;
  /* Colores y fondo se quedan como en reposo — nada de la inversión a
     texto claro/fondo oscuro que dispara .cat-card:hover más arriba
     (mayor especificidad acá, así que gana esta). */
  --card-bg-image: none;
  --card-fg: var(--brand-marca);
  --muted-foreground: var(--brand-texto-secundario);
  --card-icon-bg: color-mix(in srgb, var(--brand-marca) 10%, white);
}
/* La imagen queda libre, sin ninguna capa encima — el mist-gradient del
   ::after se apaga en hover (solo se ve en reposo). */
.cat-card--featured:hover::after { display: none; }
.cat-card--featured:hover .cat-card__num {
  display: none;
}
.cat-card--featured:hover .cat-card__icon {
  grid-column: 1;
  grid-row: 1;
}
.cat-card--featured:hover .cat-card__body {
  grid-column: 1;
  grid-row: 2;
  justify-content: flex-start;
  margin-top: 0.5rem;
}
.cat-card--featured:hover .cat-card__photo {
  position: static;
  grid-column: 2;
  grid-row: 1 / -1;
  width: 100%;
  opacity: 1;
  transform: none;
  object-fit: contain;
  filter: drop-shadow(0 10px 6px rgba(0, 0, 0, 0.35));
}
.cat-card--featured:hover .cat-card__explore--strong { color: var(--brand-marca); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .cat-explorer.is-visible .cat-card { animation: none; opacity: 1; }
  .cat-card:hover .cat-card__explore svg,
  .cat-card:hover .cat-card__icon svg path, .cat-card:hover .cat-card__icon svg circle,
  .cat-card:hover .cat-card__icon svg ellipse, .cat-card:hover .cat-card__icon svg rect,
  .cat-card:hover .cat-card__icon svg line, .cat-card:hover .cat-card__icon svg polyline,
  .cat-card:hover .cat-card__icon svg polygon {
    animation: none !important;
  }
  .cat-card, .cat-card__icon, .cat-card__explore svg, .cat-track {
    transition-duration: 1ms !important;
  }
}