/* ═══ PRODUCTO: carrusel de categorías sobre bloque azul ═══
   REGLA DEL PROYECTO: este carrusel no depende de JavaScript.
   El desplazamiento es nativo (overflow-x + scroll-snap), así que funciona
   con el dedo y con el trackpad aunque los scripts no lleguen a correr.
   El JS solo revela las flechas, que nacen con [hidden].
   Por lo mismo esta sección ya no lleva data-anim: motion.js pone
   opacity: 0 en línea antes de observar el viewport, y si algo falla las
   tarjetas quedarían invisibles en vez de simplemente quietas. */
.producto { background: var(--azul); }

.producto .titulo { color: var(--crema); }
.producto .acento-mano { color: var(--amarillo); }

.producto__intro {
  color: var(--crema);
  font-size: var(--paso-2); /* grande: contraste AA-large sobre azul */
  font-weight: 500;
  max-width: 30ch;
  margin-block: var(--esp-2) var(--esp-1);
  line-height: 1.3;
}
/* Pista de uso: las tarjetas son el enlace, no hay botón adentro */
.producto__pista {
  color: var(--crema);
  font-size: var(--paso--1);
  font-weight: 500;
  max-width: 42ch;
}

.producto__envoltura { position: relative; }

/* ── Pista del carrusel ──
   El gutter iguala al de .contenedor en pantallas anchas: la primera
   tarjeta arranca alineada con el título y el resto se sale a sangre.
   El mismo valor va en scroll-padding para que la tarjeta enganchada
   no quede pegada al borde de la ventana. */
.producto__carrusel {
  --gutter-pista: max(calc(50vw - var(--ancho-max) / 2), clamp(1.25rem, 4vw, 2.5rem));
  --ancho-tarjeta: 28%; /* ~3.5 tarjetas: siempre se asoma la siguiente */

  list-style: none;
  margin: var(--esp-4) 0 0;
  padding: 0 var(--gutter-pista) var(--esp-2);
  display: flex;
  gap: var(--esp-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter-pista);
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.producto__carrusel::-webkit-scrollbar { display: none; }

/* Enganche al inicio: la lectura sigue de izquierda a derecha y la tarjeta
   siguiente siempre queda asomada a la derecha (centrar la escondería). */
.producto__item {
  flex: 0 0 var(--ancho-tarjeta);
  scroll-snap-align: start;
  display: flex;
}

.producto__card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: clamp(21rem, 46vw, 27rem);
  text-decoration: none;
  transition: transform var(--dur-media) var(--curva-salida),
              box-shadow var(--dur-media) var(--curva-salida);
}
.producto__card:hover,
.producto__card:focus-visible { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
.producto__card:active { transform: translateY(-2px); }
/* Hacia adentro: el contorno por fuera lo recortaría el contenedor scrollable */
.producto__card:focus-visible { outline-offset: -4px; }

/* ── Bloque de color: las seis tarjetas son iguales en estructura ──
   Ya no hay variante de foto, así que el modificador --bloque no distinguía
   nada: lo que sigue es lo que ES una tarjeta de producto, no una de sus
   versiones. Solo queda el modificador de color de fondo.
   El texto va en tinta en cinco de las seis: es el único color de la paleta
   que pasa 4.5:1 sobre coral (5.10:1), el fondo más claro-ajustado del set.
   La excepción es la tarjeta marino, ver abajo. */
.producto__card { color: var(--tinta); }
.producto__medio {
  flex: 1;
  display: grid; place-items: center;
  padding: var(--esp-3) var(--esp-3) 0;
}

/* ── Fondo de cada tarjeta: se asigna por el color dominante de su dibujo ──
   Los iconos pasaron de trazo marino monocromo (que se leía sobre cualquier
   cosa) al arte multicolor del cliente, así que el fondo ya no es libre: un
   monigote lima sobre tarjeta lima, o un corazón coral sobre coral o sobre
   naranja, simplemente desaparecen. La asignación es:
     camisas (monigote lima) va sobre crema, que es como lo presenta él
     kids (dos monigotes lima) sobre coral, máxima separación de tono
     gorras (gorra coral) sobre amarillo
     trajes de baño (azul) sobre hueso, azul sobre hueso da 3.50:1
     swim goggles (naranja) sobre marino, naranja sobre marino da 4.94:1
     totebags (corazón coral) sobre lima
   Si alguien mueve un fondo, tiene que mover también el dibujo. */
.producto__card--crema    { background: var(--crema); }
.producto__card--lima     { background: var(--lima); }
.producto__card--amarillo { background: var(--amarillo); }
.producto__card--coral    { background: var(--coral); }
.producto__card--hueso    { background: var(--hueso); }
/* La única tarjeta oscura del set. Marino sobre el azul de la sección da
   2.60:1, suficiente para que se lea como bloque aparte sin competir con el
   título. Sobre marino, tinta se hunde (1.35:1): el texto pasa a crema y
   queda en 11.09:1, mejor incluso que el tinta de las otras cinco. */
.producto__card--marino   { background: var(--marino); color: var(--crema); }

/* El dibujo es el único contenido de la mitad de arriba, así que va grande.
   Antes iba a .85 porque era un trazo marino plano y había que bajarle el
   peso; ahora es el arte real del cliente, con sus colores de marca, y
   cualquier velo lo ensucia y le baja el contraste contra el fondo. Va a 1.
   Alto y ancho fijos y cuadrados a propósito: así el .webp de 320x320 y el
   SVG de viewBox 120x120 ocupan exactamente la misma caja y no se nota
   cuál de los seis es imagen y cuál es vector. */
.producto__icono {
  --lado-icono: clamp(96px, 11vw, 128px);
  width: var(--lado-icono); height: var(--lado-icono);
  transform: rotate(-4deg);
  transition: transform var(--dur-media) var(--curva-salida);
}
.producto__card:hover .producto__icono,
.producto__card:focus-visible .producto__icono { transform: rotate(-1deg) scale(1.06); }

/* ── Texto ── */
.producto__texto {
  position: relative;
  margin-top: auto;
  padding: var(--esp-3);
  display: flex; flex-direction: column; gap: .4rem;
}
.producto__texto h3 { font-size: var(--paso-2); }
.producto__texto p { font-size: var(--paso--1); font-weight: 400; max-width: 30ch; }

/* ── Sello de WhatsApp: la señal de que la tarjeta entera es el pedido ──
   Marino sobre los cinco fondos claros: el más ajustado es coral, 3.77:1,
   por encima del 3:1 que pide un elemento gráfico (lima 6.21, hueso 9.10,
   amarillo 9.93, crema 11.09). El glifo amarillo sobre marino da 9.93:1.
   El aro crema se pierde sobre crema y hueso, pero ahí el disco marino ya
   contrasta 11.09:1 y 9.10:1, así que el sello se lee igual. */
.producto__marca {
  position: absolute; top: var(--esp-2); right: var(--esp-2);
  width: 2.25rem; height: 2.25rem;
  border-radius: 99px;
  display: grid; place-items: center;
  background: var(--marino); color: var(--amarillo);
  box-shadow: 0 0 0 2px rgba(255, 250, 244, .55), 0 4px 14px rgba(18, 61, 85, .3);
  transition: transform var(--dur-media) var(--curva-salida);
}
.producto__marca .icono { width: 1.1rem; height: 1.1rem; }
/* Sobre la tarjeta marino el disco marino se volvía invisible (1:1) y el
   sello quedaba colgado del aro crema semitransparente. Se invierte: disco
   crema, glifo marino, los dos a 11.09:1, y se apaga el aro porque alrededor
   de un disco crema solo lo engordaba dos píxeles. Misma pieza, al revés. */
.producto__card--marino .producto__marca {
  background: var(--crema); color: var(--marino);
  box-shadow: 0 4px 14px rgba(3, 39, 55, .45);
}
.producto__card:hover .producto__marca,
.producto__card:focus-visible .producto__marca { transform: scale(1.12) rotate(-6deg); }

/* ── Flechas (puro extra de escritorio, el JS les quita el [hidden]) ── */
.producto__controles {
  display: none;
  gap: var(--esp-1);
  justify-content: flex-end;
  width: min(100% - clamp(2.5rem, 8vw, 5rem), var(--ancho-max));
  margin: var(--esp-2) auto 0;
}
.producto__controles:not([hidden]) { display: flex; }
.producto__flecha {
  min-width: 48px; min-height: 48px;
  border-radius: 99px; border: 2px solid var(--crema);
  background: transparent; color: var(--crema);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background-color var(--dur-micro) var(--curva-suave),
              color var(--dur-micro) var(--curva-suave),
              transform var(--dur-micro) var(--curva-salida);
}
.producto__flecha:hover { background: var(--crema); color: var(--marino); transform: scale(1.06); }

/* ── Un solo CTA de sección, después del carrusel ── */
.producto__pedido {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--esp-2) var(--esp-3);
  margin-top: var(--esp-4);
}
.producto__pedido p {
  color: var(--crema);
  font-size: var(--paso-1);
  font-weight: 500;
  max-width: 34ch;
}

@media (max-width: 980px) {
  .producto__carrusel { --ancho-tarjeta: 40%; } /* ~2.5 tarjetas */
}
@media (max-width: 620px) {
  .producto__carrusel { --ancho-tarjeta: 78%; } /* ~1.28 tarjetas */
  .producto__pedido .boton { width: 100%; justify-content: center; }
}

/* Sin animación de scroll para quien pidió menos movimiento:
   las flechas usan scrollBy sin behavior, así manda esta regla. */
@media (prefers-reduced-motion: reduce) {
  .producto__carrusel { scroll-behavior: auto; }
}