/**
 * Bloque Estadísticas Animadas
 * 
 * Bloque con 3 estadísticas numéricas que se animan desde 0 al valor final.
 * Diseño elegante con título pequeño y números prominentes.
 * 
 * @package Vitruve_Custom_Theme
 */

@import '../styles/design-tokens.css';

/**
 * ANIMACIONES DE ENTRADA (estilo Apple)
 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Easing suave estilo Apple */
:root {
	--ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/**
 * CONTENEDOR PRINCIPAL
 */
.vitruve-animated-stats {
	padding: var(--space-20) 0;
	background-color: var(--bg-primary);
	color: var(--color-white);
}

/**
 * CONTAINER INTERNO
 */
.vitruve-animated-stats__container {
	margin: 0 auto;
	text-align: center;
}

/**
 * TÍTULO PRINCIPAL (pequeño y elegante)
 */
.vitruve-animated-stats__title {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-neutral-400);
	margin: 0 0 var(--space-12) 0;
	line-height: 1.5;
	/* Animación de entrada */
	opacity: 0;
	transform: translateY(30px);
}

.vitruve-animated-stats.is-visible .vitruve-animated-stats__title {
	animation: fadeInUp 1s var(--ease-apple) forwards;
}

/**
 * GRID DE ESTADÍSTICAS
 */
.vitruve-animated-stats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	width: 100%;
	margin: 0 auto;
	/* Animación de entrada */
	opacity: 0;
}

.vitruve-animated-stats.is-visible .vitruve-animated-stats__grid {
	animation: fadeIn 1.2s var(--ease-apple) 0.3s forwards;
}

/**
 * STAT INDIVIDUAL
 */
.vitruve-animated-stats__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	text-align: center;
	width: 100%;
}

/**
 * NÚMERO (grande y prominente)
 */
.vitruve-animated-stats__number {
	font-family: var(--font-heading);
	font-size: clamp(3rem, 6vw, 5rem);
	font-weight: var(--font-extrabold);
	line-height: 1;
	color: var(--color-primary-400);
	background: linear-gradient(
		135deg,
		var(--color-primary-400) 0%,
		var(--color-secondary) 100%
	);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/**
 * LABEL (descriptivo debajo del número)
 */
.vitruve-animated-stats__label {
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: var(--font-normal);
	color: var(--color-neutral-300);
	text-transform: lowercase;
	letter-spacing: 0.02em;
}

/**
 * ALINEACIONES
 */
.vitruve-animated-stats.alignwide {
	width: 100%;
	max-width: var(--container-xl);
}

.vitruve-animated-stats.alignfull {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/**
 * RESPONSIVE - TABLETS
 */
@media (max-width: 1024px) {
	.vitruve-animated-stats {
		padding: var(--space-16) 0;
	}

	.vitruve-animated-stats__title {
		font-size: var(--text-xs);
		margin-bottom: var(--space-10);
	}

	.vitruve-animated-stats__grid {
		gap: 0;
	}

	.vitruve-animated-stats__number {
		font-size: clamp(2.5rem, 5vw, 4rem);
	}

	.vitruve-animated-stats__label {
		font-size: var(--text-base);
	}
}

/**
 * RESPONSIVE - MOBILE
 */
@media (max-width: 640px) {
	.vitruve-animated-stats {
		padding: var(--space-12) 0;
	}

	.vitruve-animated-stats__container {
		padding: 0 var(--space-4);
	}

	.vitruve-animated-stats__title {
		font-size: 0.625rem; /* 10px */
		letter-spacing: 0.1em;
		margin-bottom: var(--space-8);
	}

	.vitruve-animated-stats__grid {
		grid-template-columns: 1fr;
		gap: var(--space-10);
		max-width: 300px;
	}

	.vitruve-animated-stats__number {
		font-size: clamp(2.5rem, 10vw, 3.5rem);
	}

	.vitruve-animated-stats__label {
		font-size: var(--text-sm);
	}
}

/**
 * MODO CLARO (opcional - si el bloque se usa en fondo claro)
 */
.vitruve-animated-stats.vitruve-animated-stats--light {
	background-color: var(--color-white);
	color: var(--color-neutral-900);
}

.vitruve-animated-stats.vitruve-animated-stats--light .vitruve-animated-stats__title {
	color: var(--color-neutral-600);
}

.vitruve-animated-stats.vitruve-animated-stats--light .vitruve-animated-stats__label {
	color: var(--color-neutral-600);
}

/**
 * ACCESIBILIDAD - Reducir animaciones
 */
@media (prefers-reduced-motion: reduce) {
	.vitruve-animated-stats__title,
	.vitruve-animated-stats__grid {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/**
 * PRINT
 */
@media print {
	.vitruve-animated-stats {
		padding: var(--space-8) 0;
		background-color: transparent;
		color: black;
	}

	.vitruve-animated-stats__number {
		background: none;
		-webkit-text-fill-color: currentColor;
		color: black;
	}
}