/* ============================================================
   TRANSICIÓN "CONSTRUYAMOS" — animación controlada por scroll
   ============================================================ */

.shatter-section {
	position: relative;
	height: 420vh;
	background: var(--color-primario);
}

.shatter-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Anillo expansivo — su posición (left/top) la calcula JS según dónde
   chocan realmente las dos palabras, no un 50%/50% fijo. */
.shatter-ring {
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	height: 160px;
	border: 2px solid var(--color-acento);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

/* Flash de pantalla completa */
.shatter-flash {
	position: absolute;
	inset: 0;
	background: var(--color-acento);
	opacity: 0;
	pointer-events: none;
}

/* Confeti — mismo criterio: posición calculada por JS. */
.shatter-confetti {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}
.shatter-piece {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 8px;
	margin: -4px 0 0 -10px;
	background: var(--color-acento);
	border-radius: 1px;
	opacity: 0;
	will-change: transform, opacity;
}

/* Contenido central */
.shatter-content {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 0 24px;
}

.shatter-text-wrap { position: relative; }

.shatter-title {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: clamp(2.4rem, 9vw, 6.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: .28em;
	color: #fff;
	margin: 0;
	opacity: 1;
	will-change: opacity;
}
.shatter-word { display: inline-block; will-change: transform; }
.shatter-word--accent { color: var(--color-acento); }

/* Fragmentos (misma copia del título): 10 gajos irregulares desde el punto de
   choque hasta el borde. Forma, centro de giro y física de caída de cada uno
   los calcula JS cada frame (ver shatter-scroll.js). */
.shatter-shards {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.shatter-shard {
	position: absolute;
	inset: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: .28em;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: clamp(2.4rem, 9vw, 6.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: #fff;
	opacity: 0;
	will-change: transform, opacity;
}
/* El clip-path real de cada fragmento lo calcula JS cada frame, hinchado en el
   punto exacto donde chocan las palabras (ver shatter-scroll.js). */

.shatter-subtitle {
	margin: 28px 0 0;
	font-size: clamp(1rem, 2.2vw, 1.3rem);
	font-weight: 500;
	color: var(--color-acento);
	opacity: 0;
	will-change: opacity, transform;
}

.shatter-hint {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: rgba(255,255,255,.4);
	opacity: 0;
	pointer-events: none;
}

/* Accesibilidad: sin animación para quien prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.shatter-section { height: auto; }
	.shatter-sticky { position: relative; height: auto; padding: 140px 0; }
	.shatter-ring, .shatter-flash, .shatter-confetti, .shatter-shards, .shatter-hint { display: none; }
	.shatter-title { opacity: 1; }
	.shatter-subtitle { opacity: 1; }
}