/* ==========================================================================
   navegacion.css — Menú de categorías (acordeón) + carrusel 3D de portadas.
   Mobile-first. Solo se anima transform/opacity para que el trabajo lo haga
   la GPU y no el hilo principal.
   Paleta tomada de la configuración global: #f7f3fb (fondo) y #34114a (tinta).
   ========================================================================== */

:root {
  --nv-fondo: #f7f3fb;
  --nv-tinta: #34114a;
  --nv-violeta: #6a0dad;
  --nv-borde: #ece4f5;
  --nv-suave: #7a6b88;
  --nv-blanco: #ffffff;
  --nv-sombra: 0 1.25rem 2.5rem -1.5rem rgba(52, 17, 74, .45);
  --nv-curva: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. CARRUSEL 3D (coverflow)
   Cada tarjeta se posiciona con translate3d + rotateY: una sola propiedad
   animada, compuesta por la GPU. Sin librerías externas.
   ========================================================================== */

.cv {
  position: relative;
  margin: 0 auto;
  padding: 1rem 0 3.25rem;
  perspective: 75rem;
  perspective-origin: 50% 45%;
  touch-action: pan-y;               /* deja el scroll vertical al navegador */
  user-select: none;
}

.cv__pista {
  position: relative;
  height: 21rem;
  transform-style: preserve-3d;
}

.cv__item {
  position: absolute;
  top: 0;
  left: 50%;
  width: 15rem;
  height: 100%;
  margin-left: -7.5rem;              /* mitad del ancho: centra sin layout */
  border-radius: 1rem;
  overflow: hidden;
  background: var(--nv-fondo);
  box-shadow: var(--nv-sombra);
  cursor: pointer;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  transition: transform .55s var(--nv-curva), opacity .55s var(--nv-curva);
  text-decoration: none;
  color: inherit;
  display: block;
}
.cv__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* Velo degradado para que el texto se lea sobre cualquier foto */
.cv__item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(52, 17, 74, .85), rgba(52, 17, 74, 0));
  pointer-events: none;
}
.cv__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1rem 1.1rem;
  color: #fff;
}
.cv__nombre {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
}
.cv__meta {
  display: block;
  margin-top: .2rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .82;
}

/* Las laterales se atenúan; solo la central queda nítida */
.cv__item[data-pos="0"] { z-index: 5; }
.cv__item:not([data-pos="0"]) { filter: saturate(.85) brightness(.92); }
.cv__item[aria-hidden="true"] { pointer-events: none; }

/* Controles */
.cv__nav {
  position: absolute;
  top: 45%;
  z-index: 10;
  width: 2.75rem;
  height: 2.75rem;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--nv-tinta);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--nv-sombra);
  transition: background-color .25s var(--nv-curva), color .25s var(--nv-curva);
}
.cv__nav:hover { background: var(--nv-violeta); color: #fff; }
.cv__nav:focus-visible { outline: 2px solid var(--nv-violeta); outline-offset: 3px; }
.cv__nav--prev { left: .5rem; }
.cv__nav--next { right: .5rem; }
.cv__nav svg { width: .85rem; height: .85rem; }

.cv__puntos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .75rem;
  display: flex;
  justify-content: center;
  gap: .4rem;
}
/* El punto mantiene ancho fijo y se estira con transform: así la animación
   la resuelve la GPU y no dispara recálculo de maquetación. */
.cv__punto {
  width: 1.35rem;
  height: .45rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d9cde8;
  cursor: pointer;
  transform: scaleX(.333);
  transform-origin: center;
  transition: transform .3s var(--nv-curva), background-color .3s var(--nv-curva);
}
.cv__punto[aria-selected="true"] { transform: scaleX(1); background: var(--nv-violeta); }

/* Tablet */
@media (min-width: 48rem) {
  .cv__pista { height: 28rem; }
  .cv__item { width: 20rem; margin-left: -10rem; }
  .cv__nav--prev { left: 1.5rem; }
  .cv__nav--next { right: 1.5rem; }
}

/* Escritorio */
@media (min-width: 64rem) {
  .cv { padding-bottom: 4rem; }
  .cv__pista { height: 32rem; }
  .cv__item { width: 23rem; margin-left: -11.5rem; }
}

/* Pantallas amplias: aprovechamos el espacio sin que se vea vacío */
@media (min-width: 90rem) {
  .cv__pista { height: 35rem; }
  .cv__item { width: 26rem; margin-left: -13rem; }
}

/* Respeta la preferencia del sistema de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
  .nav-cats__panel, .nav-cats__hijas, .cv__item, .cv__punto, .nav-cats__flecha, .nav-cats__sub svg {
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   5. TARJETAS DE CATEGORÍA — imagen cuadrada uniforme
   Evita el descuadre entre fotos de distinto tamaño.
   ========================================================================== */
.cat-tarjetas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;                   /* separación proporcional en móvil */
  padding: 0;
  margin: 0;
  list-style: none;
}

.cat-tarjeta {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: var(--nv-blanco);
  box-shadow: 0 .125rem .5rem rgba(52, 17, 74, .08);
  text-decoration: none;
  color: var(--nv-tinta);
  transition: transform .2s var(--nv-curva), box-shadow .2s var(--nv-curva);
  -webkit-tap-highlight-color: transparent;
}
.cat-tarjeta:active {
  transform: scale(.97);
  box-shadow: 0 .0625rem .25rem rgba(52, 17, 74, .12);
}
.cat-tarjeta:focus-visible { outline: 2px solid var(--nv-violeta); outline-offset: 2px; }

.cat-tarjeta__img {
  width: 100%;
  aspect-ratio: 1 / 1;           /* todas cuadradas, sin importar el original */
  object-fit: cover;
  display: block;
  background: var(--nv-fondo);
}

.cat-tarjeta__titulo {
  display: block;
  min-height: 2.75rem;           /* zona de toque cómoda */
  padding: .7rem .75rem;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

@media (min-width: 30rem) { .cat-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; } }
@media (min-width: 48rem) { .cat-tarjetas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; } }
@media (min-width: 64rem) { .cat-tarjetas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; } }


/* ==========================================================================
   3. ACORDEÓN DE CATEGORÍAS EN EL NAVBAR
   Vive dentro de la barra de navegación existente. En escritorio se abre
   como panel flotante; en móvil se despliega en línea dentro del menú.
   ========================================================================== */
.nav-cats { position: relative; }

.nav-cats__boton {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;            /* área táctil de 44px */
  padding: .35rem .25rem;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-cats__boton:hover { color: var(--nv-violeta); }
.nav-cats__boton:focus-visible { outline: 2px solid var(--nv-violeta); outline-offset: 3px; border-radius: .3rem; }
.nav-cats__flecha { transition: transform .3s var(--nv-curva); flex-shrink: 0; }
.nav-cats__boton[aria-expanded="true"] .nav-cats__flecha { transform: rotate(180deg); }

.nav-cats__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s var(--nv-curva);
}

.nav-cats__lista { list-style: none; margin: 0; padding: .35rem 0; }
.nav-cats__fila { display: flex; align-items: stretch; }

.nav-cats__enlace {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .55rem .9rem;
  font-size: .92rem;
  color: var(--nv-tinta);
  text-decoration: none;
  border-radius: .5rem;
  transition: background-color .2s var(--nv-curva), color .2s var(--nv-curva);
  -webkit-tap-highlight-color: transparent;
}
/* Solo en equipos con mouse: en el teléfono el :hover se queda pegado después
   de tocar y deja el fondo morado puesto. */
@media (hover: hover) and (pointer: fine) {
  .nav-cats__enlace:hover { background: var(--nv-fondo); color: var(--nv-violeta); }
  .nav-cats__sub:hover { color: var(--nv-violeta); background: var(--nv-fondo); }
}
.nav-cats__enlace:active { background: transparent; color: var(--nv-violeta); }
.nav-cats__enlace.active { color: var(--nv-violeta); font-weight: 600; background: var(--nv-fondo); }
.nav-cats__enlace--todo {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nv-violeta);
}

.nav-cats__sub {
  width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  background: none;
  color: var(--nv-suave);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: .5rem;
}
.nav-cats__sub svg { transition: transform .3s var(--nv-curva); }
.nav-cats__item[data-abierto="true"] > .nav-cats__fila .nav-cats__sub svg { transform: rotate(180deg); }

.nav-cats__hijas {
  list-style: none;
  margin: 0;
  padding-left: .9rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s var(--nv-curva);
}
.nav-cats__hijas .nav-cats__enlace { font-size: .86rem; color: var(--nv-suave); }

/* Escritorio: panel flotante bajo el botón */
@media (min-width: 721px) {   /* justo donde termina el menú lateral (720px) */
  .nav-cats__panel {
    position: absolute;
    top: calc(100% + .5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    width: 15rem;
    background: var(--nv-blanco);
    border: 1px solid var(--nv-borde);
    border-radius: .8rem;
    box-shadow: var(--nv-sombra);
    max-height: 0;
  }
  .nav-cats__panel--abierto { max-height: min(70vh, 30rem) !important; overflow-y: auto; }
}

/* Mensajes del contenedor de tarjetas (respuesta de api/tarjetas.php) */
.tarjetas-vacio,
.tarjetas-cargando {
  grid-column: 1 / -1;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--nv-suave);
  font-size: .95rem;
}
.tarjetas-vacio a { color: var(--nv-violeta); font-weight: 600; }

/* ==========================================================================
   4. CARRUSEL: acabado más nítido y elegante
   ========================================================================== */
.cv__item {
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 1.5rem 2.75rem -1.25rem rgba(52, 17, 74, .5);
}
.cv__item[data-pos="0"] {
  box-shadow: 0 2rem 3.5rem -1.25rem rgba(52, 17, 74, .55);
}
/* Las laterales se aclaran en vez de oscurecerse: se lee más limpio */
.cv__item:not([data-pos="0"]) { filter: saturate(.92) brightness(1.02) contrast(.97); }
.cv__item:not([data-pos="0"])::after { opacity: .55; }
.cv__item::after { transition: opacity .45s var(--nv-curva); }

.cv__pie { padding: 1.15rem 1.15rem 1.25rem; }
.cv__nombre {
  font-size: 1.1rem;
  letter-spacing: .01em;
  text-shadow: 0 .0625rem .5rem rgba(52, 17, 74, .45);
}
/* Solo la tarjeta central muestra el título a plena opacidad */
.cv__item:not([data-pos="0"]) .cv__pie { opacity: .78; }
.cv__pie { transition: opacity .45s var(--nv-curva); }

/* ==========================================================================
   5. AISLAMIENTO DEL ACORDEÓN FRENTE AL CSS DEL NAVBAR
   El sitio define `.nav ul { display:flex; gap:30px }` y `.nav a { padding:4px 0 }`,
   reglas pensadas para el menú horizontal. Como nuestra lista está anidada
   dentro de ese <nav>, las heredaba y las categorías se encimaban.
   Acá se neutraliza solo dentro del panel, sin tocar el menú principal.
   ========================================================================== */
.nav .nav-cats__lista,
.nav .nav-cats__hijas {
  display: block;               /* anula el flex heredado */
  gap: 0;
  align-items: initial;
  width: 100%;
  margin: 0;
  padding: .35rem 0;
  list-style: none;
}
.nav .nav-cats__hijas { padding: 0 0 0 .9rem; }

.nav .nav-cats__item {
  display: block;
  width: 100%;
  border: 0;
}

.nav .nav-cats__fila {
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* El enlace del panel no debe heredar el subrayado dorado ni el padding
   del menú horizontal. */
.nav .nav-cats__enlace {
  display: flex;
  align-items: center;
  width: 100%;
  padding: .6rem .9rem;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;          /* nombres largos bajan de línea */
  border-bottom: 0;
}
.nav .nav-cats__enlace::after { display: none; }
.nav .nav-cats__enlace--todo { font-size: .72rem; font-weight: 700; }

/* El botón "Categorías" sí conserva el aspecto del menú principal */
.nav .nav-cats__boton { font-weight: 600; font-size: .92rem; }

/* Panel un poco más ancho: los nombres largos ("Pantalones Y Shorts") entran
   sin quebrarse raro. */
@media (min-width: 721px) {   /* justo donde termina el menú lateral (720px) */
  .nav-cats__panel { width: 17rem; }
}

/* Con 14 categorías los puntos no caben en una línea en móvil: se acomodan
   en varias filas en vez de desbordar. */
.cv__puntos { flex-wrap: wrap; row-gap: .35rem; padding: 0 1rem; }
@media (max-width: 30rem) {
  .cv__punto { width: 1.1rem; height: .38rem; }
}

/* ==========================================================================
   6. "CATEGORÍAS" COMO SUBTEMA DE "PRODUCTOS"
   Se lee como una rama del ítem anterior, no como una sección aparte.
   ========================================================================== */
.nav-cats__boton {
  font-weight: 500;              /* un punto menos que los ítems principales */
  color: var(--nv-suave);
}
.nav-cats__boton:hover,
.nav-cats__boton[aria-expanded="true"] { color: var(--nv-violeta); }

/* Escritorio: viñeta que lo cuelga visualmente de "Productos" */
@media (min-width: 721px) {   /* justo donde termina el menú lateral (720px) */
  .nav .nav-cats__boton {
    font-size: .84rem;
    font-weight: 500;
    padding-left: .9rem;
    position: relative;
  }
  .nav .nav-cats__boton::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: .4rem;
    height: 1px;
    background: currentColor;
    opacity: .45;
  }
  .nav ul { gap: 22px; }         /* se acerca a "Productos" */
}

/* Móvil: sangría dentro del menú desplegable */
@media (max-width: 47.99rem) {
  .nav .nav-cats { padding-left: 1.1rem; border-left: 2px solid var(--nv-borde); margin-left: .4rem; }
  .nav .nav-cats__boton { font-size: .95rem; width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   7. CARRUSEL: que se entienda QUÉ es cada foto
   Antes la imagen se recortaba para llenar la tarjeta (object-fit: cover) y
   en fotos de producto quedaba un acercamiento donde no se reconocía nada.
   Ahora la foto se ve COMPLETA (contain) sobre una copia difuminada de sí
   misma, que rellena el fondo sin franjas vacías.
   ========================================================================== */
.cv__fondo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(1.75rem) saturate(1.15) brightness(.9);
  transform: scale(1.25);        /* evita bordes translúcidos del desenfoque */
  z-index: 0;
}
.cv__item img {
  position: relative;
  z-index: 1;
  object-fit: contain;           /* la foto completa, sin recortes */
  padding: 1.1rem 1.1rem 3.25rem;
}
.cv__item::after { z-index: 2; }
.cv__pie { z-index: 3; }

/* ==========================================================================
   CATEGORÍAS DENTRO DEL MENÚ MÓVIL
   El acordeón funcionaba, pero se veía de otra época al lado del resto: cada
   categoría con su rayita, todas del mismo peso y tamaño, como una lista de
   sistema. Acá se reescribe para que hable el mismo idioma que la tienda:
     · "Categorías" se comporta como los demás ítems del menú (con su raya),
       pero al abrirse pasa a violeta y la flecha gira.
     · Las categorías NO llevan rayas: la jerarquía la dan la sangría, el
       tamaño menor y el espacio. Menos líneas, más aire.
     · "Ver todo" usa la micro-etiqueta dorada en mayúsculas que ya se usa en
       la portada ("CATÁLOGO COMPLETO"), así se reconoce como parte de la casa.
     · Al tocar, la categoría elegida se marca con una pastilla suave y un
       filete violeta a la izquierda, en vez de quedar con un fondo pegado.
   Nada de esto cambia el comportamiento: los mismos elementos, las mismas
   clases y los mismos eventos.
   ========================================================================== */
@media (max-width: 720px) {
  .nav .nav-cats { width: 100%; }

  /* --- El botón que abre el acordeón --- */
  .nav .nav-cats__boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 6px;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--ink, #271533);
    border-bottom: 1px solid var(--orchid-line);
    transition: color .2s var(--nv-curva);
  }
  .nav .nav-cats__boton[aria-expanded="true"] {
    color: var(--violet, #6A0DAD);
    border-bottom-color: transparent;   /* al abrirse se une con su contenido */
  }
  .nav .nav-cats__flecha { opacity: .55; transition: transform .3s var(--nv-curva), opacity .2s; }
  .nav .nav-cats__boton[aria-expanded="true"] .nav-cats__flecha { opacity: 1; }

  /* --- El panel desplegado --- */
  .nav .nav-cats__panel { width: 100%; background: transparent; }
  .nav .nav-cats__lista {
    margin: 0;
    padding: 2px 0 12px 12px;
    border-left: 0;                 /* fuera la línea guía: sobraba */
    border-bottom: 1px solid var(--orchid-line);
  }
  .nav .nav-cats__fila { display: flex; align-items: center; gap: 2px; }

  /* --- Cada categoría --- */
  .nav .nav-cats__panel a {
    position: relative;
    padding: 10px 12px;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.35;
    color: #5B4A6B;
    border-bottom: 0;               /* sin rayitas: eso era lo que envejecía */
    border-radius: .55rem;
    background: none;
    transition: color .18s var(--nv-curva), background-color .18s var(--nv-curva);
  }

  /* "Ver todo": la micro-etiqueta dorada de la casa */
  .nav .nav-cats__enlace--todo {
    margin-bottom: 2px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold, #C9A24B);
  }

  /* Estado elegido: pastilla suave + filete violeta, sin bloque de color */
  .nav .nav-cats__enlace.active {
    background: rgba(106, 13, 173, .06);
    color: var(--violet, #6A0DAD);
    font-weight: 600;
  }
  .nav .nav-cats__enlace.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 1.1rem;
    border-radius: 2px;
    background: var(--violet, #6A0DAD);
  }

  /* Al tocar: un destello breve, no un fondo que se queda puesto.
     En pantalla táctil el navegador deja pegado el :hover, por eso el
     resaltado permanente vive en @media (hover: hover). */
  .nav .nav-cats__enlace:hover,
  .nav .nav-cats__enlace:focus,
  .nav .nav-cats__sub:hover { background: none; }
  .nav .nav-cats__enlace:active { background: rgba(106, 13, 173, .06); }

  /* --- Subcategorías: un escalón más adentro y más chicas --- */
  .nav .nav-cats__hijas { padding-left: 14px; }
  .nav .nav-cats__hijas .nav-cats__enlace { font-size: .86rem; color: #7A6E88; }

  /* Flechita de subnivel: área táctil cómoda y discreta */
  .nav .nav-cats__sub {
    min-width: 40px;
    min-height: 40px;
    color: #A79BB5;
    border-radius: .55rem;
  }
  .nav .nav-cats__item[data-abierto="true"] > .nav-cats__fila .nav-cats__sub { color: var(--violet, #6A0DAD); }
}