/* =========================================================================
 * Carrusel de categorías — [cosmetica_categorias_carrusel]
 * Solo tokens de STYLEGUIDE. Sin imágenes ni fondos por CSS.
 * ====================================================================== */

.cosmetica-catcar {
	/* Tamaño del icono de la card (responsive más abajo). */
	--catcar-img: 45px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	width: var(--ancho-body);
	max-width: 100%;
	margin-inline: auto;
	font-family: var(--fuente-texto);
	color: var(--color-primario);
}
.cosmetica-catcar *,
.cosmetica-catcar *::before,
.cosmetica-catcar *::after { box-sizing: border-box; }

/* ------------------------------------------------------------ Pista */
.cosmetica-catcar__track {
	--catcar-gap: 30px;
	--catcar-visible: 7;
	display: flex;
	gap: var(--catcar-gap);
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch; /* swipe táctil */
	scrollbar-width: none;
}
.cosmetica-catcar__track::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------- Card */
.cosmetica-catcar__card {
	flex: 0 0 calc( ( 100% - ( var(--catcar-visible) - 1 ) * var(--catcar-gap) ) / var(--catcar-visible) );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	/* Padding interno para que la sombra no toque el contenido. */
	padding: 16px 12px;
	background: transparent;
	border: 1px solid var(--color-primario);
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
	color: var(--color-primario);
	/* Sombra siempre visible, derivada del token (sin color literal). */
	box-shadow: 0 4px 16px color-mix( in srgb, var(--color-primario) 12%, transparent );
	transition: box-shadow .25s ease, border-color .25s ease;
}
.cosmetica-catcar__card:hover {
	border-color: var(--color-secundario);
	box-shadow: 0 6px 20px color-mix( in srgb, var(--color-primario) 18%, transparent );
}

/* Dos imágenes superpuestas, tamaño uniforme. */
.cosmetica-catcar__media {
	position: relative;
	display: block;
	width: var(--catcar-img);
	height: var(--catcar-img);
	flex: 0 0 auto;
}
.cosmetica-catcar__img {
	position: absolute;
	inset: 0;
	display: block;
	width: var(--catcar-img);
	height: var(--catcar-img);
	object-fit: contain;
	transition: opacity .25s ease;
}
.cosmetica-catcar__img--normal { opacity: 1; }
.cosmetica-catcar__img--hover { opacity: 0; }
/* Solo hay efecto si la categoría tiene imagen hover cargada. */
.cosmetica-catcar__card.has-hover:hover .cosmetica-catcar__img--normal { opacity: 0; }
.cosmetica-catcar__card.has-hover:hover .cosmetica-catcar__img--hover { opacity: 1; }

.cosmetica-catcar__name {
	font-family: var(--fuente-titulos);
	font-size: 19px;
	line-height: 1.2;
	color: var(--color-primario);
	transition: color .25s ease;
}
.cosmetica-catcar__card:hover .cosmetica-catcar__name { color: var(--color-secundario); }

/* ---------------------------------------------------------- Flechas */
.cosmetica-catcar__arrow {
	display: none;
	place-items: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-primario);
	cursor: pointer;
	transition: color .2s ease;
}
/* Solo se muestran si las cards desbordan. */
.cosmetica-catcar.has-overflow .cosmetica-catcar__arrow { display: grid; }
.cosmetica-catcar__arrow:hover { color: var(--color-secundario); background: transparent; }
.cosmetica-catcar__arrow.is-disabled { opacity: .3; pointer-events: none; }
.cosmetica-catcar__arrow svg { display: block; }

/* ------------------------------------------------------ Responsive */
@media (max-width: 1023px) {
	.cosmetica-catcar { --catcar-img: 35px; }
	.cosmetica-catcar__track { --catcar-visible: 4; }
	/* Tablet: título -10% (19px → 17.1px), padding 15px y flechas garantizadas
	   (no dependen solo de .has-overflow del JS; a estos anchos las cards
	   siempre desbordan). El box-sizing:border-box mantiene el ancho de card. */
	.cosmetica-catcar__name { font-size: 17.1px; }
	.cosmetica-catcar__card { padding: 15px; }
	.cosmetica-catcar__arrow { display: grid; }
}
@media (max-width: 767px) {
	.cosmetica-catcar { --catcar-img: 30px; }
	.cosmetica-catcar__track { --catcar-visible: 2; }
	/* Móvil: título 15px, padding 10px y flechas garantizadas. */
	.cosmetica-catcar__name { font-size: 15px; }
	.cosmetica-catcar__card { padding: 10px; }
	.cosmetica-catcar__arrow { display: grid; }
}