/* ==========================================================================
   Borde, sombra y movimiento de las piezas de la portada.

   Un solo archivo para dos plugins: lo usan el carrusel de categorías y
   marcas (de acá) y el bloque de imágenes (del slider). Las clases son
   genéricas a propósito —hh-*— y se cuelgan del contenedor de la fila; de
   ahí para abajo cada uno tiene su marcado y su selector de pieza.

   Qué es "la pieza" en cada caso lo declara el propio plugin, redefiniendo
   --hh-pieza. Acá se estila lo que sea que esté adentro.
   ========================================================================== */

.hh-borde .hh-pieza {
	border: var(--hh-borde-ancho, 1px) solid var(--hh-borde-color, #e5e5e5);
	border-radius: var(--hh-borde-radio, 10px);
	overflow: hidden;
}

.hh-sombra-suave .hh-pieza {
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
	border-radius: var(--hh-borde-radio, 10px);
}

.hh-sombra-media .hh-pieza {
	box-shadow: 0 4px 10px rgba(0, 0, 0, .09), 0 2px 4px rgba(0, 0, 0, .05);
	border-radius: var(--hh-borde-radio, 10px);
}

.hh-sombra-fuerte .hh-pieza {
	box-shadow: 0 10px 24px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .07);
	border-radius: var(--hh-borde-radio, 10px);
}

/* --- Movimiento al pasar el mouse ----------------------------------------
   El zoom va sobre la IMAGEN y el contenedor recorta, no al revés: si se
   agranda la pieza entera, empuja a las de al lado y la fila entera se
   mueve. Agrandando solo la imagen dentro de su recuadro, nada cambia de
   lugar. */
.hh-anim-acercar .hh-pieza,
.hh-anim-alejar .hh-pieza,
.hh-anim-brillo .hh-pieza {
	overflow: hidden;
	border-radius: var(--hh-borde-radio, 10px);
}

.hh-anim-acercar .hh-pieza img,
.hh-anim-alejar .hh-pieza img,
.hh-anim-brillo .hh-pieza img {
	transition: transform .35s ease, filter .35s ease;
	will-change: transform;
}

.hh-anim-acercar .hh-pieza:hover img,
.hh-anim-acercar .hh-pieza:focus-within img {
	transform: scale(1.06);
}

/* "Alejar" parte de una imagen apenas agrandada y vuelve a su tamaño: si
   partiera del tamaño real, encogerla dejaría ver el fondo por los bordes. */
.hh-anim-alejar .hh-pieza img {
	transform: scale(1.06);
}

.hh-anim-alejar .hh-pieza:hover img,
.hh-anim-alejar .hh-pieza:focus-within img {
	transform: scale(1);
}

.hh-anim-brillo .hh-pieza img {
	filter: brightness(.94);
}

.hh-anim-brillo .hh-pieza:hover img,
.hh-anim-brillo .hh-pieza:focus-within img {
	filter: brightness(1.04);
}

/* "Levantar" sí mueve la pieza entera, pero con translate, que no ocupa
   espacio nuevo: las de al lado se quedan donde están. */
.hh-anim-subir .hh-pieza {
	transition: transform .25s ease, box-shadow .25s ease;
	will-change: transform;
}

.hh-anim-subir .hh-pieza:hover,
.hh-anim-subir .hh-pieza:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, .10);
}

/* Quien pidió que la pantalla se quede quieta, se queda quieta. */
@media (prefers-reduced-motion: reduce) {
	.hh-anim-acercar .hh-pieza img,
	.hh-anim-alejar .hh-pieza img,
	.hh-anim-brillo .hh-pieza img,
	.hh-anim-subir .hh-pieza {
		transition: none;
		transform: none;
	}
}