/* 7Sense — Manifiesto Scroll
   Aislamiento: todo cuelga de #sspm-root y el reset usa :where() (especificidad 0)
   para no ganarle nunca a las clases propias ni tocar el tema. */

:where(#sspm-root) :where(*, *::before, *::after) {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	background: none;
	font: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	list-style: none;
}

#sspm-root {
	--ink: #f4f1ea;
	--dim: rgba(244, 241, 234, .62);
	--gold: #c8a96a;
	--bg: #06060a;
	--serif: "Cormorant Garamond", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
	--sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

	position: relative;
	display: block;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
	overflow: clip;
}

#sspm-root .sspm-track {
	position: relative;
	height: 760vh;
}

#sspm-root .sspm-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: var(--bg);
	contain: layout paint style;
}

#sspm-root .sspm-canvas {
	opacity: 0;
	transition: opacity 1.1s ease;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* El velo necesita degradado radial en el centro: sobre los frames claros
   el texto blanco se pierde justo donde está. */
#sspm-root.is-ready .sspm-canvas { opacity: 1; }

#sspm-root .sspm-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 80% at 50% 50%, rgba(4, 4, 8, .72) 0%, rgba(4, 4, 8, .46) 45%, rgba(4, 4, 8, .22) 100%),
		linear-gradient(to bottom, rgba(4, 4, 8, .78) 0%, rgba(4, 4, 8, .18) 32%, rgba(4, 4, 8, .28) 68%, rgba(4, 4, 8, .86) 100%);
}

#sspm-root .sspm-grain {
	position: absolute;
	inset: -50%;
	pointer-events: none;
	opacity: .05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	animation: sspm-grain 1.1s steps(3) infinite;
}

@keyframes sspm-grain {
	0%   { transform: translate3d(0, 0, 0); }
	33%  { transform: translate3d(-2%, 1.5%, 0); }
	66%  { transform: translate3d(1.5%, -1%, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* ---------- Capítulos ---------- */

#sspm-root .sspm-beats {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
}

#sspm-root .sspm-beat {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(980px, 86vw);
	transform: translate(-50%, calc(-50% + var(--y, 0px)));
	opacity: var(--o, 0);
	text-align: center;
	transition: opacity .55s ease;
	will-change: transform, opacity;
}

#sspm-root .sspm-kicker {
	font-family: var(--sans);
	font-size: clamp(10px, .78vw, 12px);
	letter-spacing: .42em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: clamp(18px, 2.4vw, 30px);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}

#sspm-root .sspm-kicker span {
	display: inline-block;
	margin-right: .35em;
	opacity: .75;
}

#sspm-root .sspm-beat.is-in .sspm-kicker {
	opacity: 1;
	transform: none;
}

#sspm-root .sspm-lead {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(25px, 3.5vw, 54px);
	line-height: 1.22;
	letter-spacing: -.005em;
	text-wrap: balance;
	margin-bottom: clamp(18px, 2.2vw, 28px);
	text-shadow: 0 2px 36px rgba(0, 0, 0, .55);
}

#sspm-root .sspm-body {
	font-family: var(--sans);
	font-weight: 300;
	font-size: clamp(13px, 1.12vw, 17px);
	line-height: 1.78;
	color: var(--dim);
	max-width: 62ch;
	margin: 0 auto;
	text-wrap: pretty;
	text-shadow: 0 1px 24px rgba(0, 0, 0, .6);
}

/* Palabra a palabra: cada una sube desde su propia máscara, con retardo en cadena. */
#sspm-root .sspm-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding: 0 .02em;
}

#sspm-root .sspm-w > span {
	display: inline-block;
	transform: translate3d(0, 115%, 0) rotate(3deg);
	filter: blur(6px);
	opacity: 0;
	transition:
		transform .95s cubic-bezier(.16, 1, .3, 1),
		filter .8s ease,
		opacity .8s ease;
	transition-delay: calc(var(--i, 0) * 26ms);
}

#sspm-root .sspm-body .sspm-w > span {
	transition-duration: .8s;
	transition-delay: calc(140ms + var(--i, 0) * 13ms);
}

#sspm-root .sspm-beat.is-in .sspm-w > span {
	transform: none;
	filter: blur(0);
	opacity: 1;
}

/* Salida: se van sin cadena, todas juntas y hacia arriba. */
#sspm-root .sspm-beat.is-out .sspm-w > span {
	transition-delay: 0ms;
	transition-duration: .5s;
	transform: translate3d(0, -60%, 0);
	filter: blur(5px);
	opacity: 0;
}

/* ---------- Cierre con el logo ---------- */

#sspm-root .sspm-outro {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	opacity: var(--o, 0);
	pointer-events: none;
}

#sspm-root .sspm-logo {
	display: block;
	width: clamp(96px, 13vw, 184px);
	height: auto;
	margin: 0 auto;
	filter: invert(1) drop-shadow(0 0 42px rgba(200, 169, 106, .35));
	transform: scale(var(--s, .92));
	transition: transform .2s linear;
}

#sspm-root .sspm-sign {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%) translateY(calc((1 - var(--so, 0)) * 12px));
	white-space: nowrap;
	margin-top: clamp(20px, 2.6vw, 34px);
	font-family: var(--sans);
	font-size: clamp(9px, .72vw, 11px);
	letter-spacing: .46em;
	text-transform: uppercase;
	color: var(--gold);
	opacity: var(--so, 0);
}

/* ---------- Detalles de interfaz ---------- */

#sspm-root .sspm-hint {
	position: absolute;
	left: 50%;
	bottom: clamp(22px, 3.4vh, 40px);
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 10px;
	letter-spacing: .4em;
	text-transform: uppercase;
	color: var(--dim);
	opacity: var(--o, 1);
	transition: opacity .5s ease;
	pointer-events: none;
}

#sspm-root .sspm-hint span {
	display: block;
	width: 34px;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--gold));
	animation: sspm-sweep 2.2s ease-in-out infinite;
}

@keyframes sspm-sweep {
	0%, 100% { transform: translateX(-6px); opacity: .35; }
	50%      { transform: translateX(6px);  opacity: 1; }
}

#sspm-root .sspm-rail {
	position: absolute;
	right: clamp(14px, 2vw, 30px);
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: min(240px, 34vh);
	background: rgba(244, 241, 234, .16);
}

#sspm-root .sspm-rail i {
	position: absolute;
	left: -1px;
	top: 0;
	width: 3px;
	height: calc(var(--p, 0) * 100%);
	background: var(--gold);
	box-shadow: 0 0 12px rgba(200, 169, 106, .6);
}

#sspm-root .sspm-fallback {
	padding: 8vh 6vw;
	font-family: var(--sans);
	line-height: 1.8;
	color: var(--dim);
}

#sspm-root .sspm-fallback p { margin-bottom: 1.4em; }

/* ---------- Móvil ---------- */

@media (max-width: 782px) {
	#sspm-root .sspm-track { height: 700vh; }
	#sspm-root .sspm-beat  { width: 88vw; }
	#sspm-root .sspm-lead  { font-size: clamp(23px, 6.4vw, 34px); }
	#sspm-root .sspm-body  { font-size: 13.5px; line-height: 1.7; }
	#sspm-root .sspm-rail  { display: none; }
	#sspm-root .sspm-veil  {
		background:
			radial-gradient(130% 70% at 50% 50%, rgba(4, 4, 8, .8) 0%, rgba(4, 4, 8, .55) 50%, rgba(4, 4, 8, .3) 100%),
			linear-gradient(to bottom, rgba(4, 4, 8, .82) 0%, rgba(4, 4, 8, .3) 35%, rgba(4, 4, 8, .4) 65%, rgba(4, 4, 8, .9) 100%);
	}
}

/* ---------- Accesibilidad ---------- */

@media (prefers-reduced-motion: reduce) {
	#sspm-root .sspm-grain { animation: none; }
	#sspm-root .sspm-hint span { animation: none; }
	#sspm-root .sspm-w > span {
		transition-duration: .01ms;
		transition-delay: 0ms;
	}
}

/* =================================================================
   sspm-fix-contraste  —  el titular quedaba negro sobre negro

   El tema (Flatsome) pinta TODOS los encabezados con un bloque inline:
       h1, h2, h3, h4, h5, h6, .heading-font { color: #191919 }

   El reset de este plugin usa :where(#sspm-root) :where(*) { color: inherit },
   que a proposito tiene especificidad 0 para no pisar nada. El efecto
   secundario es que CUALQUIER regla del tema le gana. Resultado: .sspm-lead
   (que es un h2) se pintaba en #191919 sobre el fondo #06060a del manifiesto
   -> contraste 1.15:1, invisible. Y como los 340 .sspm-w heredan de el, la
   frase grande de los 6 capitulos desaparecia entera.

   Se redeclara SOLO el color. #sspm-root .sspm-lead tiene especificidad
   (1,1,0) y le gana al (0,1,0) del tema, asi que no hace falta !important.
   Contraste resultante: 17.93:1.
   ================================================================= */

#sspm-root .sspm-lead,
#sspm-root .sspm-lead .sspm-w,
#sspm-root h1, #sspm-root h2, #sspm-root h3,
#sspm-root h4, #sspm-root h5, #sspm-root h6 {
  color: #f4f1ea;
}