/* ==========================================================================
   Velas Velia — Home · Sección CATEGORÍAS
   --------------------------------------------------------------------------
   Réplica visual del CategoryStrip del Storefront: encabezado de sección y
   una fila de categorías en círculo (foto squircle redonda con borde blanco).
   Consume EXCLUSIVAMENTE tokens del sistema (tokens.css) y clases vv-.
   ========================================================================== */

/* --- Bloque de sección -------------------------------------------------- */
.vv-home-categorias {
	padding-block: var(--space-16) var(--space-2); /* 56px arriba, holgura abajo */
}

/* Crest sobre el título (margen como en SectionHeading del diseño) */
.vv-home-categorias__crest {
	margin-bottom: var(--space-3);
}

/* --- Grid de círculos --------------------------------------------------- */
.vv-home-categorias__grid {
	list-style: none;
	margin: var(--space-8) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr); /* 6 columnas como el diseño */
	gap: var(--space-5);
}

.vv-home-categorias__item {
	margin: 0;
}

/* --- Enlace de categoría ------------------------------------------------- */
.vv-home-categorias__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
	color: inherit;
	cursor: pointer;
}

/* --- Círculo de foto ---------------------------------------------------- */
.vv-home-categorias__circle {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-pill);
	overflow: hidden;
	background: var(--gold-050);
	border: 3px solid var(--white);
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

/* Lift suave en hover (coherente con el resto de tarjetas) */
.vv-home-categorias__link:hover .vv-home-categorias__circle {
	transform: var(--hover-lift);
	box-shadow: var(--shadow-md);
}

.vv-home-categorias__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Estado vacío del fallback (sin imagen real cargada) */
.vv-home-categorias__circle--empty {
	background: var(--gold-100);
}

/* Círculo con icono de marca (categoría sin imagen) */
.vv-home-categorias__circle--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gold-100);
}

.vv-home-categorias__icon {
	width: 44%;
	height: 44%;
	color: var(--gold-600);
	display: inline-flex;
}

.vv-home-categorias__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* --- Nombre de categoría ------------------------------------------------- */
.vv-home-categorias__name {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--text-sm);
	color: var(--ink-700);
	line-height: var(--leading-snug);
}

.vv-home-categorias__link:hover .vv-home-categorias__name {
	color: var(--gold-700);
}

/* ==========================================================================
   Responsive — la fila de 6 se reorganiza en pantallas menores
   ========================================================================== */
@media (max-width: 900px) {
	.vv-home-categorias__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6);
	}
}

@media (max-width: 520px) {
	.vv-home-categorias {
		padding-block: var(--space-12) var(--space-2);
	}

	.vv-home-categorias__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5);
	}
}