/* ================================================
   HOME — hero animado (mismo lenguaje que el hero de la tienda)
   Centrado y a todo el ancho del contenedor, sin mockup. El mensaje se
   reparte en 6 escenas cortas con tipografía grande; cada una entra y sale
   con un juego de letras distinto. La escena se dibuja a tamaño de diseño
   (1200×380; móvil 400×320) y todo se escala con --u = 1px de diseño según
   el ancho real. Regla de marca: la negrita (700) siempre va con el
   degradado; el resto del texto es regular (400).
   Animación en lib/js/home-hero.js (GSAP).
   ================================================ */

/* el hero animado ocupa todo el ancho y va centrado (sin columna de imagen) */
.fp-hero--animado .fp-hero__text {
	flex: 1;
	align-items: center;
	text-align: center;
}

.hh {
	/* medidas por formato (el JS lee --hh-ancho y --hh-k) */
	--hh-ancho: 1200;
	--hh-alto: 380;
	--hh-k: 1;

	--u: calc(100cqw / var(--hh-ancho));

	--hh-texto: var(--site-color-primary);
	--hh-grad-a: #8F67FF;
	--hh-grad-b: var(--site-color-7932011);
	--hh-contorno: rgba(143, 103, 255, 0.18);

	position: relative;
	width: 100%;
	container-type: inline-size;
	margin-bottom: 28px;
}

@media (max-width: 768px) {
	.hh {
		--hh-ancho: 400;
		--hh-alto: 320;
		--hh-k: 0.45;
	}
}

/* H1 solo para SEO y lectores de pantalla: el texto se anima en la escena */
.hh__h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.hh__escena {
	position: relative;
	width: 100%;
	aspect-ratio: var(--hh-ancho) / var(--hh-alto);
	color: var(--hh-texto);
	font-family: var(--site-typography-primary-font-family), sans-serif;
	-webkit-font-smoothing: antialiased;
}

.hh-oculto {
	opacity: 0;
	visibility: hidden;
}

/* sin JS (o con "reducir movimiento") solo se ve la primera escena, quieta */
.hh:not(.hh--lista) .hh__tiempo:not(.hh__t1) {
	visibility: hidden;
}

/* ---------- Palabra gigante en contorno ---------- */
.hh__gigante {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hh__gigante span {
	display: block;
	font-size: calc(260 * var(--u));
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--hh-contorno);
}

/* ---------- Escenas: centradas ---------- */
.hh__tiempo {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.hh__texto {
	margin: 0;
	font-family: var(--site-typography-primary-font-family), sans-serif;
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--hh-texto);
}

.hh__linea {
	display: block;
}

.hh .pal {
	display: inline-block;
	white-space: nowrap;
}

.hh .ch {
	display: inline-block;
}

.hh__degradado {
	font-weight: 700;
	background: linear-gradient(90deg, var(--hh-grad-a) 0%, var(--hh-grad-b) 50%, var(--hh-grad-a) 100%);
	background-size: 200% 100%;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	padding: 0 calc(6 * var(--u)) calc(8 * var(--u));
}

/* degradado partido en letras: cada letra lleva su trozo del degradado
   (el JS fija tamaño y posición) para que se mantenga continuo aunque las
   letras se muevan por separado */
.hh__degradado.hh--letras {
	background: none;
}

.hh--letras .ch {
	background-image: linear-gradient(90deg, var(--hh-grad-a) 0%, var(--hh-grad-b) 50%, var(--hh-grad-a) 100%);
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* relieve 3D de "Transformamos" (regla 3d-text-depth-layers de HyperFrames):
   el JS añade copias detrás del texto, desplazadas en diagonal y del morado
   al turquesa; la de delante (.hh__t1-l1) define el tamaño */
.hh__profundidad {
	position: relative;
	display: inline-block;
}

.hh__profundidad .hh__t1-l1:not(.hh__capa) {
	position: relative;
	z-index: 2;
}

.hh__capa {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	opacity: 0;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
	padding: 0 calc(6 * var(--u)) calc(8 * var(--u));
}

/* corte de línea en las palabras largas: solo en móvil (ver abajo) */
.hh .hh__corte {
	display: none;
}

/* "impacto": golpe con onda expansiva y ráfaga de puntos (particle-burst) */
.hh__impacto-caja {
	position: relative;
	display: inline-block;
}

.hh__impacto {
	position: relative;
	z-index: 2;
	display: inline-block;
}

.hh__ondas,
.hh__puntos {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	z-index: 1;
}

.hh__onda {
	position: absolute;
	width: calc(300 * var(--u));
	height: calc(300 * var(--u));
	margin-left: calc(-150 * var(--u));
	margin-top: calc(-150 * var(--u));
	border-radius: 50%;
	border: max(2px, calc(5 * var(--u))) solid var(--hh-grad-a);
	opacity: 0;
}

.hh__onda + .hh__onda {
	border-color: var(--hh-grad-b);
}

.hh__punto {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
}

/* máscara por palabra */
.hh__w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

.hh__wi {
	display: inline-block;
}

/* destellos */
.hh__destellos {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
}

.hh__destello {
	position: absolute;
	width: calc(22 * var(--u));
	height: calc(22 * var(--u));
	margin-left: calc(-11 * var(--u));
	margin-top: calc(-11 * var(--u));
}

.hh__destello svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------- Tamaños por escena (diseño 1200 de ancho) ---------- */
.hh__t1-l1 { font-size: calc(150 * var(--u)); }
.hh__t1-l2 { font-size: calc(60 * var(--u)); margin-top: calc(10 * var(--u)); }

.hh__t2-l1,
.hh__t2-l2 { font-size: calc(92 * var(--u)); }
.hh__t3-l2 { position: relative; display: inline-block; font-size: calc(150 * var(--u)); }

.hh__t4-l1,
.hh__t4-l2 { position: relative; font-size: calc(104 * var(--u)); }

.hh__t5-l1,
.hh__t5-l2 { font-size: calc(92 * var(--u)); }

.hh__t6-l1 { font-size: calc(66 * var(--u)); }
.hh__t6-l2 { position: relative; display: inline-block; font-size: calc(140 * var(--u)); }

/* "meses" se tacha y "días" ocupa su lugar; el JS encoge el hueco al ancho de "días" */
.hh__cambio {
	position: relative;
	display: inline-block;
	text-align: left;
	white-space: nowrap;
	vertical-align: top;
}

.hh__meses {
	position: relative;
	display: inline-block;
	color: var(--site-color-text);
}

.hh__tachado {
	position: absolute;
	left: -4%;
	right: -4%;
	top: 54%;
	height: max(3px, calc(9 * var(--u)));
	border-radius: 99px;
	background: var(--hh-grad-a);
	transform: scaleX(0);
	transform-origin: left center;
}

.hh__dias {
	position: absolute;
	left: 0;
	top: 0;
	white-space: nowrap;
}

/* ---------- Móvil: tamaños propios (diseño 400 de ancho), pueden partirse ---------- */
@media (max-width: 768px) {
	.hh__gigante span { font-size: calc(150 * var(--u)); }

	/* "Transfor / mamos" y "oportu / nidades." en dos líneas, más grandes */
	.hh .hh__corte { display: block; }

	.hh__t1-l1 { font-size: calc(80 * var(--u)); }
	.hh__t1-l2 { font-size: calc(34 * var(--u)); }

	.hh__t2-l1,
	.hh__t2-l2 { font-size: calc(46 * var(--u)); }
	.hh__t3-l2 { font-size: calc(92 * var(--u)); }

	.hh__t4-l1,
	.hh__t4-l2 { font-size: calc(48 * var(--u)); }

	.hh__t5-l1,
	.hh__t5-l2 { font-size: calc(46 * var(--u)); }

	.hh__t6-l1 { font-size: calc(36 * var(--u)); }
	.hh__t6-l2 { font-size: calc(84 * var(--u)); }
}