/*
 * HITO 2026: tema del recorrido por el edificio. El motor declara sus estilos en @layer sw,
 * así que estas reglas sin capa los sustituyen sin aumentar la especificidad.
 * Regla de contraste del diseño: texto blanco solo sobre la foto con capa Azul Comité ≥ 70 %.
 */

:root,
.sw-root {
	--sw-bg: var(--hito-navy);
	--sw-ink: var(--hito-on-navy);
	--sw-ink-soft: var(--hito-on-navy-soft);
	--sw-accent: var(--hito-green);
	--sw-font-display: var(--wp--preset--font-family--serif);
	--sw-font-body: var(--wp--preset--font-family--sans);
}

/* Foco en el texto: el video se atenúa en conjunto y la columna de copia lleva Azul Comité ≥ 90 %,
   desvanecido hacia la foto. */
.sw-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(15, 42, 61, 0.22);
}
.sw-copylayer::before {
	width: min(72vw, 1000px);
	background: linear-gradient(90deg, rgba(15, 42, 61, 0.95) 0%, rgba(15, 42, 61, 0.9) 52%, rgba(15, 42, 61, 0.55) 78%, rgba(15, 42, 61, 0) 100%);
}

/* Lectura del encabezado transparente sobre la parte alta del video. */
.sw-copylayer::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: calc(var(--hito-header-h) * 2);
	background: linear-gradient(180deg, rgba(15, 42, 61, 0.78), rgba(15, 42, 61, 0));
}

.sw-copy { width: min(46vw, 600px); }
/* Sin antetítulo ni numeración sobre los títulos (DESIGN.md): el título habla solo y los puntos
   de la derecha ya indican la posición en el recorrido. */
.sw-copy__num,
.sw-copy__eyebrow { display: none; }
/* Títulos en blanco puro sobre Azul Comité ≥ 90 %; la única luz verde es el filete de debajo. */
.sw-copy__title {
	font-weight: 500;
	font-size: clamp(2.75rem, 1.5rem + 3.4vw, 4.75rem);
	line-height: 1.04;
	color: var(--hito-on-navy);
	text-wrap: balance;
	text-shadow: none;
	font-variant-numeric: lining-nums;
}
.sw-copy__title::after {
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	margin-top: 1.25rem;
	background: var(--hito-green);
}

/* Primera escena: la afirmación institucional en grande, en la voz serif regular. */
.sw-copy:first-of-type { width: min(52vw, 720px); }
.sw-copy:first-of-type .sw-copy__title { font-weight: 400; font-size: clamp(2.75rem, 1.4rem + 4.2vw, 5.25rem); line-height: 1; }
.sw-copy:first-of-type .sw-copy__body { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); max-width: 40ch; }
.sw-copy__body {
	font-size: 1.1875rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
	max-width: 44ch;
	text-wrap: pretty;
	text-shadow: none;
}
.sw-copy__tags li {
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--hito-on-navy);
	background: transparent;
	border: 1px solid var(--hito-rule-on-navy);
}

/* Botón verde sobre Azul Comité (componente del sistema). */
.sw-btn {
	font-family: var(--sw-font-body);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.95rem 2.25rem;
	transition: background-color 0.2s, color 0.2s;
}
.sw-btn--primary { color: var(--wp--preset--color--ink, #272727); background: var(--hito-green); }
.sw-btn--primary:hover { color: var(--hito-navy); background: var(--hito-on-navy); transform: none; }
.sw-btn:focus-visible,
.sw-route__dot:focus-visible { outline: 2px solid var(--hito-green); outline-offset: 3px; }

/* Etiqueta del punto activo: recuadro plano de Azul Comité, sin píldora (solo los botones la llevan). */
.sw-route__label {
	font-family: var(--sw-font-body);
	letter-spacing: 0.06em;
	color: var(--hito-on-navy);
	background: var(--hito-navy);
	border: 1px solid var(--hito-rule-on-navy);
	border-radius: 0;
	backdrop-filter: none;
}
.sw-hint { font-family: var(--sw-font-body); font-weight: 600; color: var(--hito-on-navy-soft); }

/* La atmósfera está apagada: sin partículas ni su capa de composición. */
.sw-particles { display: none; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* El pie del sitio cubre el escenario fijo al final del recorrido. */
.hito-recorrido-activo footer.wp-block-template-part {
	position: relative;
	z-index: 70;
}

@media (max-width: 860px) {
	/* La capa cubre todo el bloque de texto con Azul Comité ≥ 90 % (el título de la primera escena
	   llega a la mitad de la pantalla) y se desvanece hacia la foto por encima. */
	.sw-copylayer::before {
		width: 100%;
		height: 82%;
		background: linear-gradient(0deg, rgba(15, 42, 61, 0.96) 0%, rgba(15, 42, 61, 0.9) 68%, rgba(15, 42, 61, 0) 100%);
	}
	/* Por encima de la indicación de desplazamiento (≈ 64 px). */
	.sw-copy { width: auto; bottom: calc(clamp(56px, 12dvh, 110px) + 64px + env(safe-area-inset-bottom)); }
	.sw-copy__title { font-size: clamp(2rem, 7vw, 2.75rem); }
	.sw-copy:first-of-type { width: auto; }
	.sw-copy:first-of-type .sw-copy__title { font-size: clamp(2.5rem, 10vw, 3.5rem); }
	.sw-copy:not(:first-of-type) .sw-copy__title { font-size: clamp(2.25rem, 8.5vw, 3rem); }
}