/* Extras de la home v2: puntero pixel-art, estela de estrellas, arrastre de
   stickers, tira de claims y barra de carga. Se encola solo en esa página. */

/* Tipografía arcade autoalojada (Press Start 2P, SIL OFL), igual que GSAP:
   sin CDN de terceros. */
@font-face {
	font-family: "Press Start 2P";
	src: url("../fonts/press-start-2p.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* --- Tira de claims (nodo 109:883 del rediseño v2) ---
   El v1 era una fila de iconos y, debajo, una sola línea con los cuatro claims.
   El v2 empareja cada icono con su palabra: cuatro columnas independientes. */
.yoy-tira {
	display: flex;
	/* Las cuatro columnas van SIEMPRE en una línea en escritorio: con Press Start 2P
	   («Compite.» es la palabra ancha) un wrap deja la cuarta suelta debajo. */
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(16px, 2.6vw, 50px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.yoy-tira__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(10px, .94vw, 18px);
	text-align: center;
}

.yoy-tira__icono {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: clamp(38px, 4.1vw, 79px);       /* alto de los iconos del v2 (79px) */
}

.yoy-tira__icono svg {
	width: auto;
	height: 100%;
}

.yoy-tira__claim {
	font-family: "Press Start 2P", "Courier New", monospace;
	font-size: clamp(11px, 1.15vw, 22px);   /* 22px a 1920 */
	line-height: 1.4;
	letter-spacing: .02em;
	white-space: nowrap;
}

/* Elementor añade `transition: ... transform .4s` a todos sus widgets, y una transición
   en curso gana en la cascada hasta a !important: GSAP Draggable movía el sticker pero el
   transform nunca llegaba a pintarse. Se conservan las demás transiciones y se quita la de
   transform. Mismo arreglo sirve para la home original cuando se quiera activar allí. */
.yoy-drag {
	transition: background .3s ease, border .3s ease, border-radius .3s ease, box-shadow .3s ease !important;
}

body {
	cursor: url("../img/yoy-cursor.png") 0 0, auto;
}

a,
button,
label,
summary,
[role="button"],
input[type="submit"],
.elementor-button {
	cursor: url("../img/yoy-cursor-link.png") 0 0, pointer;
}

.yoy-estela {
	position: fixed;
	inset: 0;
	z-index: 9999;
	overflow: hidden;
	pointer-events: none;
}

.yoy-estela__chispa {
	position: absolute;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	image-rendering: pixelated;
	will-change: transform, opacity;
	/* steps(): la estela se apaga a saltos, como el resto de la iconografía */
	animation: yoy-chispa var(--yoy-vida, 700ms) steps(6, end) forwards;
}

@keyframes yoy-chispa {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1) rotate(var(--yoy-giro, 0deg));
	}
	to {
		opacity: 0;
		transform: translate3d(var(--yoy-dx, 0), var(--yoy-dy, 20px), 0) scale(.35) rotate(var(--yoy-giro, 0deg));
	}
}

@media (prefers-reduced-motion: reduce) {
	.yoy-estela { display: none; }
}

@media (max-width: 700px) {
	/* En móvil no caben las cuatro en fila: pasan a dos y dos.
	   Los iconos son pixel-art y a 38px (el suelo del clamp de escritorio) quedan
	   pequeños y sueltos en la retícula 2×2; se suben a ~54px para que tengan
	   presencia, y el claim de Press Start a 13px para que se lea sin forzar. */
	.yoy-tira { flex-wrap: wrap; gap: 28px 24px; max-width: 320px; margin-inline: auto; }
	.yoy-tira__item { flex: 0 0 calc(50% - 12px); }
	.yoy-tira__icono { height: 54px; }
	.yoy-tira__claim { font-size: 13px; }
}