/* ============================================================================
   CARRUSEL DE ITEMS — la mecanica del movimiento
   ============================================================================

   Construido sobre scroll nativo, no sobre una libreria. El navegador ya sabe
   desplazar con inercia, seguir el dedo y frenar donde corresponde; una
   libreria reimplementa todo eso peor y cobra 30-40 KB por hacerlo.

   scroll-snap hace el resto: cada tarjeta se acomoda sola al borde izquierdo
   al soltar. Es lo que separa un carrusel de una fila que se corre.

   Usa los tokens de tokens.css. Ningun valor suelto.
   ========================================================================= */

.carr-pista {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Espacio para que la elevacion del hover no quede recortada arriba ni
     abajo por el propio overflow del contenedor. */
  padding: 4px 4px 8px;
  /* En celular el desplazamiento tiene que ser del carrusel, no de la pagina
     entera cuando se llega al extremo. */
  overscroll-behavior-x: contain;

  /* La barra se oculta pero el scroll sigue vivo: el dedo y la rueda
     funcionan igual. Ocultarla con overflow:hidden habria matado las dos. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carr-pista::-webkit-scrollbar { display: none; }

/* La pista recibe foco de teclado: con las flechas del teclado se desplaza,
   que es el comportamiento nativo de un contenedor con scroll. */
.carr-pista:focus-visible {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: 4px;
  border-radius: var(--radio-2);
}

.carr-item {
  /* Ancho fijo y sin encoger: es lo que hace que la fila se desborde y por lo
     tanto que haya algo que desplazar. Con flex:1 las tarjetas se comprimirian
     para entrar todas y no habria carrusel. */
  flex: 0 0 280px;
  scroll-snap-align: start;

  /* El radio de tarjeta vive ACA y no en una clase del marcado. Antes cada
     tarjeta traia rounded-xl escrito: dos lugares que dicen lo mismo y que se
     separan el dia que alguien cambia uno. Es el mismo valor de siempre
     -12px-, ahora con nombre. */
  border-radius: var(--radio-2);

  /* overflow:hidden es lo que evita el error mas comun del carrusel: la imagen
     de arriba sobresaliendo por la esquina redondeada de la tarjeta. */
  overflow: hidden;
}

/* La imagen que ocupa el borde superior lleva redondeadas SOLO las dos
   esquinas de arriba. Redondear las cuatro deja dos muescas blancas donde la
   imagen se separa del cuerpo de la tarjeta.
   La proporcion se declara aca -y no en el marcado- para que todas las
   figuras del carrusel midan igual: es lo que mantiene la fila alineada y el
   CLS en cero. */
.carr-figura {
  aspect-ratio: 16 / 10;
  border-radius: var(--radio-2-arriba);
}

/* En celular la tarjeta se asoma: el 84% deja ver el borde de la siguiente,
   que es la senal de "hay mas a la derecha" que mejor funciona en tactil.
   Mejor que cualquier flecha, porque se entiende sin explicacion. */
/* En celular la tarjeta mide 78% del ANCHO DE PANTALLA, no un valor fijo: asi el
   asomo de la siguiente es igual a 320, 375 o 414px. El padding lateral y el
   scroll-padding son lo que evita que la primera y la ultima queden cortadas al
   ras del borde. */
@media (max-width: 639px) {
  /* 82% del ancho de pantalla: deja asomar la siguiente (senal tactil de "hay
     mas") y da mas ancho util que el 78% anterior, que a 320px dejaba la
     tarjeta en 250px y apretaba la fila de precio. El tope en px evita que en
     una tablet angosta la tarjeta se vuelva gigante. */
  .carr-item { flex: 0 0 82vw; max-width: 320px; }
  .carr-pista {
    gap: .75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    scroll-padding-inline: 1rem;
  }
}

/* ============================================================================
   CUERPO DE LA TARJETA — tipografia fluida, y la fila de precio que se
   desbordaba en pantallas chicas.
   ============================================================================

   EL PROBLEMA QUE RESUELVE: a 320px la fila inferior tenia tres elementos
   -precio, boton de lista y "Cotizar"- peleando por el ancho, y el precio
   ("L 1,100.00") caia en dos renglones: la "L" arriba y el numero abajo.

   No se arregla achicando la letra hasta que entre -eso es comprimir el layout
   de escritorio-. En movil el bloque es DISTINTO: el precio en su fila, el CTA
   a ancho completo debajo. En escritorio, donde si hay lugar, conviven en una
   sola fila. Cada tamano con su solucion, no una version encogida de la otra.
   ========================================================================= */

/* Padding reducido en movil: el de escritorio (1rem) se comia el ancho util. */
.carr-cuerpo { padding: .75rem; }
@media (min-width: 640px) { .carr-cuerpo { padding: 1rem; } }

/* Titulo del NOMBRE del item: fluido y con dos renglones reservados
   (line-clamp-2 + min-height) para que el precio alinee entre tarjetas. */
.carr-nombre {
  font-size: clamp(.875rem, .82rem + .25vw, .95rem);
  min-height: 2.5rem;
}
.carr-meta { min-height: 1rem; }

/* --- El bloque de precio + acciones --------------------------------------- */
.carr-pie {
  margin-top: auto;                 /* ancla abajo: precio a la misma altura */
  padding-top: .75rem;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;           /* MOVIL: precio arriba, CTA abajo */
  gap: .625rem;
  min-width: 0;
}

/* Fila del precio. En movil comparte renglon con el boton de lista, que por
   ser chico no comprime el precio. */
.carr-precio-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
}

/* EL PRECIO ES INDIVISIBLE. white-space:nowrap es lo que impide que el simbolo
   y el numero se separen en dos lineas. Tamano fluido: no puede medir igual a
   320 que a 1440. */
.carr-precio {
  color: var(--brand-texto, var(--brand));
  font-weight: 700;
  font-size: clamp(1rem, .9rem + .8vw, 1.2rem);
  line-height: 1.1;
  white-space: nowrap;
}

/* CUANDO LOS PRECIOS ESTAN OCULTOS.
   El texto que ocupa el lugar del precio ("Consultar precio") no es un precio y
   no puede verse como uno: es el doble de largo, y con el tamano y el nowrap
   del precio empujaba al boton de Cotizar fuera de la tarjeta.
   Mas chico, que pueda achicarse, y con puntos suspensivos si no entra. El
   boton NO cede: con los precios apagados es lo unico que le queda al cliente
   para averiguar cuanto sale. */
.carr-precio.es-consulta {
  font-size: clamp(.8rem, .74rem + .35vw, .95rem);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}

/* El boton "+" agrega el item a la LISTA DE COTIZACION (store Alpine 'cotiza',
   el carrito de WhatsApp). Es real, no un vestigio: se queda. Aca solo se le da
   tamano y forma; el color lo maneja el :class de Alpine segun este o no en la
   lista. */
.carr-mas {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
}
/* 44px de area tactil donde se toca con el dedo (WCAG 2.5.8). */
@media (pointer: coarse) {
  .carr-mas { width: 2.75rem; height: 2.75rem; }
}

/* "Cotizar": el CTA principal. En MOVIL ocupa el ancho completo -area tactil
   generosa y jerarquia clara-; en escritorio vuelve a su ancho natural. */
.carr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  min-height: 44px;
  padding: .5rem .9rem;
  border-radius: var(--radio-1);
  font-size: .8125rem;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;      /* "Cotizar" NUNCA se comprime ni se corta */
}

/* CONTAINER QUERY, no @media.
   -----------------------------------------------------------------------------
   El problema real no era el ancho de la PANTALLA sino el de la TARJETA: a
   1280px con 4 columnas cada tarjeta mide ~228px y "Cotizar" se cortaba, aunque
   la pantalla fuera enorme. El breakpoint por viewport (min-width:640px) no
   podia saberlo. Medido con puppeteer (medir_boton.mjs): en una sola fila el
   bloque precio + "+" + Cotizar necesita 230px (3 cifras), 240 (4), 258 (5).
   Umbral 260px: la fila unica solo se arma cuando la TARJETA da ese ancho; si
   no, se apila (precio arriba, Cotizar a ancho completo abajo), en cualquier
   ancho de pantalla. .carr-cq (el cuerpo de la tarjeta) es el contenedor. */
.carr-cq { container-type: inline-size; container-name: carrcard; }

@container carrcard (min-width: 260px) {
  .carr-pie { flex-direction: row; align-items: center; gap: .5rem; }
  .carr-precio-fila { display: contents; }
  .carr-precio { margin-right: auto; }
  .carr-cta { width: auto; }
}

/* Sin soporte de container queries (navegadores viejos): se cae al criterio
   por viewport de antes, que al menos funciona en escritorio ancho. */
@supports not (container-type: inline-size) {
  @media (min-width: 640px) {
    .carr-pie { flex-direction: row; align-items: center; gap: .5rem; }
    .carr-precio-fila { display: contents; }
    .carr-precio { margin-right: auto; }
    .carr-cta { width: auto; }
  }
}

/* Titulo de seccion, fluido: de 1.35rem a 320px hasta 1.875rem en escritorio. */
.carr-titulo {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.15;
}

/* --- ARRASTRE CON EL MOUSE -------------------------------------------------
   Mientras se arrastra se corta la seleccion de texto y el snap. Sin quitar el
   snap, el contenedor pelea contra el puntero: cada movimiento intenta
   acomodarse a una tarjeta y el arrastre se siente trabado. */
.carr-pista.carr-arrastrando {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}
@media (hover: hover) {
  .carr-pista { cursor: grab; }
}

/* --- FLECHAS ---------------------------------------------------------------
   SOBRE EL AREA TACTIL DE 44px

   El boton mide 36x36 con el mouse y 44x44 en pantalla tactil. Los 44 los da
   la regla `@media (pointer: coarse)` de tokens.css, que agranda el boton solo
   donde se toca con el dedo.

   Se probo primero el truco del pseudo-elemento invisible -inset:-4px, como el
   que usan los puntos de posicion- y NO funciona en un <button>: se midio con
   un clic real 3px por debajo del borde y el evento lo recibe el contenedor,
   no el boton. Queda documentado para no volver a intentarlo.

   Con mouse, 36px cumple el minimo de WCAG 2.5.8 (24x24). Agrandar el dibujo a
   44 en escritorio cambiaria el encabezado de todas las secciones, que es
   justo lo que esta auditoria no debe hacer. */

/* Se atenuan en vez de desaparecer. Si desaparecieran, el grupo de controles
   cambiaria de ancho y el encabezado saltaria de lugar al llegar al extremo. */
.carousel-arrow[disabled],
.carousel-arrow[aria-disabled="true"] {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* --- TARJETA DE PUBLICIDAD -------------------------------------------------
   Misma medida, misma forma y mismo radio que una tarjeta de catalogo: eso lo
   da .carr-item, que comparten. Aca solo cambia el color.

   El fondo es el azul de la marca, no un color nuevo: la tarjeta tiene que
   distinguirse sin gritar.

   PERO EL AZUL DE MARCA PELADO NO SIRVE PARA TEXTO BLANCO. Se midio: blanco
   sobre #0092ce da 3.5:1, y el minimo de WCAG AA para texto normal es 4.5:1.
   La primera version de esta tarjeta ponia el titulo en blanco sobre ese azul
   y no pasaba.

   No se cambia la paleta -esta prohibido y con razon-: se oscurece el MISMO
   azul mezclandolo con negro, que es lo que permite la regla de "ajusta
   opacidad, peso u overlay". Al 78% de brand queda 5.3:1, con margen para que
   el degradado no baje del minimo en ninguna parte de la tarjeta.

   El degradado sigue yendo hacia el secundario, para que la tarjeta tenga
   cuerpo, pero tambien oscurecido. */
.carr-promo {
  /* Color solido primero, degradado encima. Dos razones: un navegador sin
     color-mix se queda con un fondo azul correcto en vez de una tarjeta
     transparente con letras blancas invisibles, y cualquier medidor de
     contraste puede leer un color de fondo real. */
  background-color: color-mix(in srgb, var(--brand) 78%, #000);
  background-image: linear-gradient(135deg,
              color-mix(in srgb, var(--brand) 78%, #000) 0%,
              color-mix(in srgb, color-mix(in srgb, var(--brand) 80%, var(--brand2)) 74%, #000) 100%);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--t-base) var(--curva-salida),
              transform var(--t-base) var(--curva-salida);
}
/* La elevacion al pasar el mouse, solo en escritorio: en tactil el hover se
   queda pegado despues del toque y la tarjeta queda levantada sin razon. */
@media (hover: hover) {
  .carr-promo:hover {
    box-shadow: var(--sombra-marca-2);
    transform: translateY(-2px);
  }
}
.carr-promo a { text-decoration: none; }

/* La etiqueta que avisa que es publicidad.

   Empezo siendo blanco sobre un fondo blanco al 22%: 2.65:1 medido, que no
   pasa ni el minimo de texto grande. Y es texto de 10px, o sea el que mas
   contraste necesita.

   Ahora es al revés: pastilla blanca con el texto en azul oscurecido, 7.6:1.
   Ademas se lee como una etiqueta y no como parte del titulo. */
.carr-promo-etiqueta {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: var(--radio-pill);
  background: #fff;
  color: color-mix(in srgb, var(--brand) 62%, #000);
}

/* --- PUNTOS DE POSICION ---------------------------------------------------- */
.carr-punto {
  width: 6px;
  height: 6px;
  border-radius: var(--radio-pill);
  background: color-mix(in srgb, var(--brand) 30%, #ffffff);
  transition: width var(--t-base), background-color var(--t-base);
  /* El area tactil se agranda sin agrandar el dibujo. */
  position: relative;
}
.carr-punto::after {
  content: '';
  position: absolute;
  inset: -12px;
}
.carr-punto[aria-current="true"] {
  width: 20px;
  background: var(--brand);
}

/* --- SKELETON --------------------------------------------------------------
   Se usa cuando las tarjetas todavia no llegaron. Reserva exactamente el mismo
   alto que una tarjeta real, asi la pagina no salta cuando aparecen. */
.carr-skeleton {
  flex: 0 0 280px;
  height: 320px;
  border-radius: var(--radio-2);
  background: linear-gradient(100deg,
              #f1f5f9 30%, #e2e8f0 50%, #f1f5f9 70%);
  background-size: 300% 100%;
  animation: carr-brillo 1.4s ease-in-out infinite;
}
@keyframes carr-brillo {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

/* --- MENOS MOVIMIENTO ------------------------------------------------------
   Quien lo pidio conserva el carrusel -sigue pudiendo desplazarlo- pero sin
   desplazamiento animado: los saltos son instantaneos. */
@media (prefers-reduced-motion: reduce) {
  .carr-pista { scroll-behavior: auto; }
  .carr-skeleton { animation: none; }
}


/* ============================================================================
   BARRA HORIZONTAL DE CATEGORIAS
   ============================================================================

   Vive en este archivo y no en uno nuevo porque comparte toda la mecanica del
   carrusel: se desplaza de costado con el dedo, se acomoda con scroll-snap y
   esconde la barra de scroll. Un archivo mas por seis reglas seria una peticion
   HTTP mas por nada.
   ========================================================================= */
.cat-barra-envoltura {
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  padding: .75rem 0;
}

.cat-barra {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Respiro a los costados: sin esto la primera y la ultima quedan pegadas al
     borde de la pantalla en celular y parecen cortadas. */
  padding: 2px 2px 4px;
}
.cat-barra::-webkit-scrollbar { display: none; }

.cat-chip {
  display: flex;
  align-items: center;
  gap: .625rem;
  /* 44px de alto minimo: es el area tactil que se puede acertar con el pulgar
     yendo en el bus, que es donde se usa esto. */
  min-height: 44px;
  padding: .5rem .875rem .5rem .5rem;
  border: 1px solid #e2e8f0;
  border-radius: var(--radio-pill);
  background: #fff;
  white-space: nowrap;
  scroll-snap-align: start;
  flex: 0 0 auto;
  transition: border-color var(--t-base) var(--curva-salida),
              box-shadow var(--t-base) var(--curva-salida),
              transform var(--t-rapida) var(--curva-salida);
}
@media (hover: hover) {
  .cat-chip:hover {
    border-color: var(--brand);
    box-shadow: var(--sombra-1);
  }
}
/* :active tambien en tactil: es la unica confirmacion de que el toque entro
   antes de que cargue la pagina siguiente. */
.cat-chip:active { transform: scale(.98); }

.cat-chip-icono {
  width: 32px;
  height: 32px;
  border-radius: var(--radio-1);
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.cat-chip-texto { display: flex; flex-direction: column; line-height: 1.15; }
.cat-chip-nombre { font-size: 13px; font-weight: 600; color: #1e293b; }
.cat-chip-cuenta { font-size: 11px; color: #64748b; }

/* La etiqueta "Nuevo". Verde y no azul: el azul es el color de la marca y aca
   competiria con el icono de la izquierda. */
.cat-chip-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: var(--radio-pill);
  background: #d1fae5;
  color: #065f46;   /* 7.4:1 sobre ese fondo: pasa AA y AAA */
}

@media (prefers-reduced-motion: reduce) {
  .cat-barra { scroll-behavior: auto; }
  .cat-chip:active { transform: none; }
}