/*!
 * Agenda Regional Los Lagos — Summit de Convivencia Escolar
 * Estilos del front. Identidad: azul institucional + teal, minimalismo
 * expresivo (tipografía grande, alto contraste, mucho aire) y trama de red.
 *
 * Reglas de movimiento:
 *  - Sólo se animan transform / opacity / clip-path.
 *  - Curvas propias; nunca ease-in en elementos de interfaz.
 *  - Interacciones bajo 300 ms; entradas de sección hasta 560 ms.
 *  - Todo el movimiento se desactiva con prefers-reduced-motion.
 */

/* ============================================================== 1. TOKENS */

/* Los tokens viven en :root, no en .arls-block: hay piezas fijas —el botón
   "volver arriba"— que quedan fuera del árbol de los bloques y también los
   necesitan. Las variables de marca las inyecta PHP en otro :root. */
:root {
	/* Curvas (más fuertes que las nativas: dan intención al movimiento). */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

	/* Duraciones. */
	--t-press: 140ms;
	--t-ui: 200ms;
	--t-panel: 260ms;
	--t-reveal: 560ms;

	/* Escala tipográfica. */
	--arls-h1: clamp(2.2rem, 4vw, 3.6rem);
	--arls-h2: clamp(1.85rem, 3.9vw, 3.35rem);
	--arls-h3: clamp(1.2rem, 1.9vw, 1.65rem);
	--arls-h4: clamp(1.02rem, 1.3vw, 1.16rem);

	/* Tipografía de display: también responde al tamaño de títulos. */
	--arls-display: clamp(2rem, 3.6vw, 3.25rem);
	--arls-display-sub: clamp(0.98rem, 1.75vw, 1.4rem);
	--arls-stat: clamp(2.3rem, 4.6vw, 3.6rem);
	--arls-stat-sm: clamp(1.8rem, 3vw, 2.4rem);
	--arls-claim: clamp(1.3rem, 2.5vw, 2.05rem);
	--arls-foot-big: clamp(1.6rem, 4.2vw, 3.2rem);

	/* Espaciado. */
	--sp-1: 0.5rem;
	--sp-2: 0.875rem;
	--sp-3: 1.25rem;
	--sp-4: 1.875rem;
	--sp-5: 2.75rem;
	--sp-6: 4rem;
	--sp-7: 5.5rem;

	/* Altos, porque compiten con cabeceras y barras del tema. */
	--z-nav: 9990;
	--z-drawer: 9995;
	--z-top: 9980;
}

/* ============================================== 2. BLOQUE BASE Y ESQUEMAS */

.arls-block {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	margin-block: var(--arls-mar-top, 0px) var(--arls-mar-bot, 0px);
	padding-block: var(--arls-pad-top, 104px) var(--arls-pad-bot, 104px);
	background-color: var(--arls-bg, transparent);
	background-image: linear-gradient(148deg, var(--arls-bg2, transparent) 0%, transparent 62%);
	color: var(--arls-text, var(--scheme-text));
	font-family: var(--arls-font-b);
	font-size: var(--arls-fs, 17px);
	line-height: var(--arls-lh, 1.65);
	overflow: clip;
	-webkit-font-smoothing: antialiased;
}

.arls-block *,
.arls-block *::before,
.arls-block *::after {
	box-sizing: border-box;
}

.arls-block img,
.arls-block svg {
	max-width: 100%;
}

/* Todas las listas del plugin llevan su propio marcador (iconos, puntos o
   ninguno). La clase repetida (0,2,1) gana al clásico `.entry-content ul {
   padding-left: 40px }` de los temas, que desalineaba las tarjetas respecto
   del resto de la columna. */
.arls-block.arls-block :is(ul, ol) {
	padding-inline: 0;
	list-style: none;
}

.arls-block.is-light {
	--scheme-text: var(--arls-muted);
	--scheme-head: var(--arls-primary);
	--scheme-strong: var(--arls-ink);
	--scheme-card: #fff;
	--scheme-line: var(--arls-line);
	--scheme-soft: color-mix(in srgb, var(--arls-accent) 8%, #fff);
}

.arls-block.is-dark {
	--scheme-text: color-mix(in srgb, #fff 76%, var(--arls-primary));
	--scheme-head: #fff;
	--scheme-strong: #fff;
	--scheme-card: color-mix(in srgb, #fff 7%, transparent);
	--scheme-line: color-mix(in srgb, #fff 16%, transparent);
	--scheme-soft: color-mix(in srgb, var(--arls-accent) 16%, transparent);
}

/* Fallback para navegadores sin color-mix(). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.arls-block.is-dark {
		--scheme-text: rgba(255, 255, 255, 0.78);
		--scheme-card: rgba(255, 255, 255, 0.07);
		--scheme-line: rgba(255, 255, 255, 0.16);
		--scheme-soft: rgba(28, 163, 163, 0.16);
	}

	.arls-block.is-light {
		--scheme-soft: #f0f8f8;
	}
}

.arls-container {
	width: min(100% - 2.5rem, var(--arls-container, 1200px));
	margin-inline: auto;
}

/* Ancho completo dentro de temas que limitan el contenido.
   --arls-sbw lo fija el JS con el ancho real de la barra de desplazamiento,
   para que 100vw no provoque scroll horizontal. */
.arls-onepage--bleed > .arls-block {
	margin-inline: calc(50% - 50vw + var(--arls-sbw, 0px) / 2);
}

/* ================================================== 3. TIPOGRAFÍA COMÚN */

/* La clase se repite a propósito: sube la especificidad a 0,2,1 para ganarle
   a las reglas de tipografía del tema (del tipo `.entry-content h2`, 0,2,0)
   sin recurrir a !important. */
.arls-block.arls-block :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--arls-font-h);
}

/* Reset de márgenes con :where(), que no aporta especificidad.
   Con `.arls-block h2 { margin: 0 }` (0,1,1) el reset le ganaba a cada clase
   de componente (`.arls-tl__title`, 0,1,0) y anulaba todo el ritmo vertical
   del diseño. Así el reset vale 0,1,0 y, al ir antes en el archivo, cualquier
   componente posterior lo sobrescribe; las reglas sueltas del tema no. */
.arls-block :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, address) {
	margin: 0;
}

.arls-block h1,
.arls-block h2,
.arls-block h3,
.arls-block h4 {
	font-family: var(--arls-font-h);
	font-weight: var(--arls-fw-h, 800);
	line-height: 1.06;
	letter-spacing: var(--arls-tracking, -0.02em);
	color: var(--arls-heading, var(--scheme-head));
	text-wrap: balance;
}

.arls-h2 {
	font-size: calc(var(--arls-h2) * var(--arls-scale, 1));
	text-transform: var(--arls-caps, none);
}

.arls-h3 {
	font-size: calc(var(--arls-h3) * var(--arls-scale, 1));
	line-height: 1.2;
}

.arls-eyebrow {
	margin-bottom: 0.85rem;
	font-family: var(--arls-font-h);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--arls-accent-local, var(--arls-accent));
}

.arls-block .arls-eyebrow {
	--arls-accent-local: var(--arls-accent);
}

.arls-lead {
	max-width: 62ch;
	font-size: clamp(1.02rem, 1.35vw, 1.2rem);
	color: var(--arls-text, var(--scheme-text));
}

.arls-note,
.arls-source {
	font-size: 0.82rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--scheme-text) 82%, transparent);
}

.arls-source {
	margin-top: var(--sp-5);
	max-width: 92ch;
}

.arls-source--center {
	margin-inline: auto;
	text-align: center;
}

/* Sigue el ajuste global de «títulos en mayúsculas», como el resto de los
   titulares: así el texto se guarda en la base de datos con su capitalización
   natural —mejor para los lectores de pantalla— y es el CSS quien decide. */
.arls-bigclaim {
	text-transform: var(--arls-caps, none);
	font-family: var(--arls-font-h);
	font-size: calc(var(--arls-claim) * var(--arls-scale, 1));
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--arls-heading, var(--scheme-head));
	text-wrap: balance;
}

.arls-bigclaim--center {
	margin-top: var(--sp-5);
	text-align: center;
}

.arls-quote {
	display: flex;
	gap: 1rem;
	margin-top: var(--sp-4);
	padding: 1.4rem 1.6rem;
	border-left: 3px solid var(--arls-accent);
	border-radius: 0 var(--arls-radius) var(--arls-radius) 0;
	background: var(--scheme-soft);
	font-size: clamp(1.02rem, 1.5vw, 1.22rem);
	line-height: 1.5;
	color: var(--scheme-strong);
}

.arls-quote__ico {
	flex: none;
	width: 26px;
	height: 26px;
	color: var(--arls-accent);
}

/* Cabeceras de sección */
.arls-head {
	margin-bottom: var(--sp-6);
}

.arls-head--center {
	max-width: 56rem;
	margin-inline: auto;
	text-align: center;
}

.arls-head--center .arls-lead {
	margin-inline: auto;
}

.arls-head--split {
	display: grid;
	gap: var(--sp-3) var(--sp-5);
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: end;
}

/* Con una imagen al lado, alinear por abajo hunde el titular. Arriba es lo
   que hace que ambas columnas arranquen al mismo nivel. */
.arls-head--media {
	align-items: start;
}

@media (max-width: 860px) {
	.arls-head--split {
		grid-template-columns: 1fr;
	}
}

/* ==================================================== 4. BOTONES / CTA */

.arls-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 46px;
	padding: 0.78rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--arls-font-h);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: transform var(--t-press) var(--ease-out),
		background-color var(--t-ui) ease,
		border-color var(--t-ui) ease,
		color var(--t-ui) ease,
		box-shadow var(--t-ui) ease;
}

.arls-btn:active {
	transform: scale(0.97);
}

.arls-btn:focus-visible {
	outline: 3px solid var(--arls-accent-2);
	outline-offset: 3px;
}

.arls-btn .arls-ico {
	width: 19px;
	height: 19px;
	transition: transform var(--t-ui) var(--ease-out);
}

/* Los temas suelen redefinir color y subrayado de `a:hover` con selectores
   como `.entry-content a:hover` (0,2,0). Al fijar aquí cada estado con
   `.arls-block .arls-btn…:hover` (0,3,0) el botón conserva su texto legible
   sin necesidad de !important. */
.arls-block .arls-btn,
.arls-block .arls-btn:hover,
.arls-block .arls-btn:focus,
.arls-block .arls-btn:active,
.arls-block .arls-btn:visited {
	text-decoration: none;
}

.arls-btn--accent,
.arls-block .arls-btn--accent,
.arls-block .arls-btn--accent:hover,
.arls-block .arls-btn--accent:focus,
.arls-block .arls-btn--accent:active,
.arls-block .arls-btn--accent:visited {
	color: #fff;
}

.arls-btn--accent {
	background: var(--arls-accent);
	box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--arls-accent) 90%, #000);
}

.arls-btn--ghost,
.arls-block .arls-btn--ghost,
.arls-block .arls-btn--ghost:focus,
.arls-block .arls-btn--ghost:active,
.arls-block .arls-btn--ghost:visited {
	color: var(--scheme-head);
}

.arls-btn--ghost {
	border-color: color-mix(in srgb, var(--scheme-head) 26%, transparent);
	background: transparent;
}

.arls-btn--lg {
	min-height: 54px;
	padding: 1rem 1.9rem;
	font-size: 1.02rem;
}

.arls-btn--sm {
	min-height: 42px;
	padding: 0.6rem 1.15rem;
	font-size: 0.87rem;
}

.arls-btn--block {
	display: flex;
	width: 100%;
}

@media (hover: hover) and (pointer: fine) {
	.arls-btn--accent:hover {
		background: color-mix(in srgb, var(--arls-accent) 84%, #000);
		box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--arls-accent) 90%, #000);
	}

	.arls-block .arls-btn--ghost:hover {
		border-color: var(--arls-accent);
		color: var(--arls-accent);
	}

	.arls-btn:hover .arls-ico {
		transform: translateX(3px);
	}
}

/* Ningún enlace del sitio lleva subrayado. La clase repetida (0,3,1) gana a
   reglas del tema como `.entry-content a:hover { text-decoration: underline }`
   sin recurrir a !important. */
.arls-block.arls-block a,
.arls-block.arls-block a:is(:hover, :focus, :active, :visited),
.arls-block.arls-block button {
	text-decoration: none;
}

/* Spinner del botón de envío */
.arls-btn__spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid color-mix(in srgb, #fff 40%, transparent);
	border-top-color: #fff;
	border-radius: 50%;
}

.arls-btn.is-loading {
	pointer-events: none;
}

.arls-btn.is-loading .arls-btn__spinner {
	display: block;
	animation: arls-spin 620ms linear infinite;
}

@keyframes arls-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ======================================================== 5. ETIQUETAS */

.arls-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: var(--sp-5) 0 0;
	padding: 0;
	list-style: none;
}

.arls-tags--center {
	justify-content: center;
	margin-top: var(--sp-6);
}

.arls-tag {
	padding: 0.4rem 0.95rem;
	border: 1px solid var(--scheme-line);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--scheme-strong);
	transition: transform var(--t-ui) var(--ease-out), border-color var(--t-ui) ease;
}

@media (hover: hover) and (pointer: fine) {
	.arls-tag:hover {
		transform: translateY(-2px);
		border-color: var(--arls-accent);
	}
}

.arls-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--sp-4) 0 0;
	padding: 0;
	list-style: none;
}

.arls-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--scheme-line);
	border-radius: 999px;
	background: var(--scheme-card);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--scheme-strong);
}

.arls-chip .arls-ico {
	width: 17px;
	height: 17px;
	color: var(--arls-accent-2);
}

.arls-list {
	display: grid;
	gap: 0.9rem;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}

.arls-list li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	line-height: 1.5;
}

.arls-list__ico {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 0.2rem;
	padding: 3px;
	border-radius: 50%;
	background: var(--scheme-soft);
	color: var(--arls-accent);
}

/* ========================================================= 6. HEADER */

.arls-block--header {
	position: sticky;
	top: 0;
	z-index: var(--z-nav);
	padding: 0;
	overflow: visible;
	background: var(--arls-bg, #fff);
	border-bottom: 1px solid var(--arls-line);
}

.arls-topbar {
	background: var(--arls-primary);
	color: #fff;
	font-size: 0.8rem;
	transition: max-height var(--t-panel) var(--ease-out), opacity var(--t-ui) ease;
}

.arls-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 40px;
	padding-block: 0.45rem;
}

.arls-topbar__text {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: color-mix(in srgb, #fff 88%, transparent);
}

.arls-topbar__ico {
	width: 16px;
	height: 16px;
	color: var(--arls-accent-2);
	flex: none;
}

.arls-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex: none;
	font-weight: 700;
	color: var(--arls-accent-2);
	text-decoration: none;
	transition: transform var(--t-ui) var(--ease-out);
}

.arls-topbar__link .arls-ico {
	width: 15px;
	height: 15px;
}

@media (hover: hover) and (pointer: fine) {
	.arls-topbar__link:hover {
		transform: translateX(2px);
	}
}

.arls-nav__inner {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	min-height: 86px;
	transition: min-height var(--t-panel) var(--ease-out);
}

.arls-brand {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex: 0 1 auto;
	min-width: 0;
	text-decoration: none;
	max-width: 46%;
}

/* El tamaño se fija con max-height / max-width, no sólo con height: casi
   todos los temas de WordPress declaran `img { height: auto !important }`,
   que anularía una altura fija pero nunca puede saltarse un máximo. */
.arls-brand__logo {
	flex: none;
	width: auto;
	height: var(--arls-logo-h, 48px);
	max-height: var(--arls-logo-h, 48px);
	max-width: 280px;
	object-fit: contain;
	object-position: left center;
	transition: max-height var(--t-panel) var(--ease-out), height var(--t-panel) var(--ease-out);
}

.arls-brand__line {
	max-width: 22ch;
	font-size: 0.72rem;
	line-height: 1.28;
	font-weight: 600;
	color: var(--arls-muted);
	border-left: 1px solid var(--arls-line);
	padding-left: 0.85rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.arls-nav__menu {
	margin-left: auto;
}

.arls-nav__menu ul {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arls-nav__link {
	position: relative;
	display: block;
	padding: 0.6rem 0.8rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--arls-primary);
	text-decoration: none;
	border-radius: 8px;
	transition: color var(--t-ui) ease, background-color var(--t-ui) ease;
}

.arls-nav__link::after {
	content: "";
	position: absolute;
	left: 0.8rem;
	right: 0.8rem;
	bottom: 0.34rem;
	height: 2px;
	border-radius: 2px;
	background: var(--arls-accent);
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--t-panel) var(--ease-out);
}

.arls-nav__link.is-active {
	color: var(--arls-accent);
}

.arls-nav__link.is-active::after {
	clip-path: inset(0 0 0 0);
}

@media (hover: hover) and (pointer: fine) {
	.arls-nav__link:hover {
		color: var(--arls-accent);
		background: var(--arls-surface);
	}
}

.arls-nav__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: none;
}

.arls-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: transparent;
}

.arls-progress span {
	display: block;
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--arls-accent), var(--arls-accent-2));
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* Estado con scroll */
.arls-block--header.is-scrolled {
	box-shadow: 0 10px 30px -22px rgba(9, 30, 50, 0.6);
}

.arls-block--header.is-scrolled .arls-topbar {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
}

@media (min-width: 1081px) {
	/* Fijo de verdad: el JS lo cuelga del <body> y aquí se ancla arriba. */
	.arls-block--header.is-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
	}

	.arls-block--header.is-scrolled .arls-nav__inner {
		min-height: 64px;
	}

	.arls-block--header.is-scrolled .arls-brand__logo {
		height: var(--arls-logo-h-min, 40px);
		max-height: var(--arls-logo-h-min, 40px);
	}
}

.arls-header-spacer {
	flex: none;
	width: 100%;
}

/* Hamburguesa */
.arls-burger {
	display: none;
	width: 46px;
	height: 46px;
	padding: 12px;
	border: 1px solid var(--arls-line);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
}

.arls-burger span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--arls-primary);
	transition: transform var(--t-panel) var(--ease-out), opacity var(--t-ui) ease;
}

.arls-burger span + span {
	margin-top: 5px;
}

.arls-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.arls-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.arls-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Los temas pintan `button:hover` y `button:focus` con su color de marca
   (Astra usa --ast-global-color-1). Esos selectores valen 0,1,1 y le ganan a
   `.arls-burger` (0,1,0), así que al tocar el menú en el móvil el botón se
   quedaba azul: el foco no se suelta hasta tocar en otro sitio. Repetir la
   clase del bloque sube la especificidad a 0,2,0 y deja los cuatro estados
   con el mismo aspecto que en reposo, sin recurrir a !important. */
.arls-block .arls-burger,
.arls-block .arls-burger:hover,
.arls-block .arls-burger:focus,
.arls-block .arls-burger:focus-visible,
.arls-block .arls-burger:active {
	border-color: var(--arls-line);
	background: #fff;
	color: var(--arls-primary);
}

/* Las barras conservan su color en cualquier estado. */
.arls-block .arls-burger:hover span,
.arls-block .arls-burger:focus span,
.arls-block .arls-burger:active span {
	background: var(--arls-primary);
}

@media (max-width: 1240px) {
	.arls-brand__line {
		display: none;
	}
}

@media (max-width: 1080px) {
	.arls-nav__menu {
		display: none;
	}

	.arls-burger {
		display: block;
	}

	/* Al ocultarse el menú desaparece su margen automático, que era lo que
	   empujaba el grupo derecho. Pasa a las acciones para que la hamburguesa
	   quede pegada al borde derecho. */
	.arls-nav__actions {
		margin-left: auto;
	}
}

@media (max-width: 620px) {
	.arls-nav__cta {
		display: none;
	}

	.arls-topbar__text span {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* Drawer móvil */
.arls-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	background: color-mix(in srgb, var(--arls-primary) 55%, transparent);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--t-panel) var(--ease-out);
}

.arls-drawer[hidden] {
	display: none;
}

.arls-drawer.is-open {
	opacity: 1;
}

.arls-drawer__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(400px, 88vw);
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: 5.5rem 1.75rem 2rem;
	background: #fff;
	box-shadow: -30px 0 60px -30px rgba(9, 30, 50, 0.45);
	transform: translateX(100%);
	transition: transform 320ms var(--ease-drawer);
	overflow-y: auto;
}

.arls-drawer.is-open .arls-drawer__panel {
	transform: translateX(0);
}

.arls-drawer__close {
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	width: 46px;
	height: 46px;
	padding: 14px;
	border: 1px solid var(--arls-line);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: transform var(--t-press) var(--ease-out), border-color var(--t-ui) ease;
}

.arls-drawer__close:active {
	transform: scale(0.94);
}

/* El cajón vive fuera de `.arls-block`, así que no le llegan ni el reajuste de
   los botones ni el foco visible del plugin: se repiten aquí con `.arls-drawer`
   delante (0,2,0) para ganarle al `button:hover`/`button:focus` del tema. */
.arls-drawer .arls-drawer__close,
.arls-drawer .arls-drawer__close:hover,
.arls-drawer .arls-drawer__close:focus,
.arls-drawer .arls-drawer__close:focus-visible,
.arls-drawer .arls-drawer__close:active {
	border-color: var(--arls-line);
	background: #fff;
	color: var(--arls-primary);
}

.arls-drawer .arls-drawer__close:hover span,
.arls-drawer .arls-drawer__close:focus span,
.arls-drawer .arls-drawer__close:active span {
	background: var(--arls-primary);
}

/* Con el fondo ya fijo, el teclado necesita su propia señal: el tema apaga el
   contorno con `button:focus { outline: 0 }`. */
.arls-drawer .arls-drawer__close:focus-visible {
	outline: 3px solid var(--arls-accent);
	outline-offset: 2px;
}

.arls-drawer__close span {
	position: absolute;
	left: 12px;
	right: 12px;
	top: 50%;
	height: 2px;
	border-radius: 2px;
	background: var(--arls-primary);
}

.arls-drawer__close span:first-child {
	transform: rotate(45deg);
}

.arls-drawer__close span:last-child {
	transform: rotate(-45deg);
}

.arls-drawer__menu {
	display: grid;
	gap: 0.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arls-drawer__menu a {
	display: block;
	padding: 0.85rem 0.25rem;
	border-bottom: 1px solid var(--arls-line);
	font-family: var(--arls-font-h);
	font-size: 1.22rem;
	font-weight: 700;
	color: var(--arls-primary);
	text-decoration: none;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), color var(--t-ui) ease;
	transition-delay: calc(var(--i) * 34ms + 90ms);
}

.arls-drawer.is-open .arls-drawer__menu a {
	opacity: 1;
	transform: translateY(0);
}

.arls-drawer__note {
	margin-top: auto;
	font-size: 0.82rem;
	color: var(--arls-muted);
}

/* =========================================================== 7. HERO */

/* El espacio interior se aplica al contenedor de dentro, no al bloque: así
   .arls-hero ocupa el alto completo de la sección y el fondo fotográfico (y la
   trama) llegan de borde a borde, sin franjas arriba y abajo. Las variables son
   las mismas, de modo que los campos del backend siguen funcionando igual. */
.arls-block--hero {
	padding-block: 0;
}

.arls-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(var(--arls-hero-minh, 92vh), 900px);
	padding-block: var(--arls-pad-top, 48px) var(--arls-pad-bot, 80px);
}

/* Fondo fotográfico: por detrás de la trama y de las formas (z-index -2, un
   nivel más al fondo), a sangre completa y con la opacidad que se elija. */
/* Hijo directo de la sección (no de .arls-hero): su inset:0 se mide contra el
   bloque entero, así que cubre también cualquier espacio interior y ningún
   tema puede dejar una franja sin foto arriba o abajo. */
.arls-block--hero > .arls-hero__bg,
.arls-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
	opacity: var(--arls-hero-bg-op, 0.12);
	filter: blur(var(--arls-hero-bg-blur, 0px));
}

.arls-hero__slide {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center var(--arls-hero-bg-pos, center);
	opacity: 0;
	/* Transición y no keyframes: si se cambia de foto a media animación,
	   el fundido se retoma desde donde iba en vez de saltar. */
	transition: opacity var(--arls-hero-bg-fade, 1.6s) ease;
}

.arls-hero__slide.is-on {
	opacity: 1;
}

.arls-hero__bg.has-zoom .arls-hero__slide.is-on {
	animation: arls-kenburns calc(var(--arls-hero-bg-seg, 7s) + var(--arls-hero-bg-fade, 1.6s)) linear forwards;
}

@keyframes arls-kenburns {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.07);
	}
}

.arls-hero__canvas,
.arls-hero__blobs {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.arls-hero__canvas {
	width: 100%;
	height: 100%;
}

.arls-hero__blob {
	position: absolute;
	border-radius: 46% 54% 62% 38% / 52% 44% 56% 48%;
	filter: blur(0.5px);
	opacity: 0.9;
}

.arls-hero__blob--teal {
	top: -18%;
	right: -12%;
	width: min(46vw, 620px);
	aspect-ratio: 1.05;
	background: linear-gradient(150deg, var(--arls-accent), color-mix(in srgb, var(--arls-accent) 55%, #fff));
	opacity: 0.16;
	animation: arls-float 18s var(--ease-in-out) infinite alternate;
}

.arls-hero__blob--navy {
	bottom: -26%;
	left: -14%;
	width: min(40vw, 540px);
	aspect-ratio: 1.1;
	background: linear-gradient(150deg, var(--arls-deep), var(--arls-primary));
	opacity: 0.1;
	animation: arls-float 22s var(--ease-in-out) infinite alternate-reverse;
}

.arls-hero__grid {
	position: absolute;
	right: 4%;
	bottom: 6%;
	width: min(28vw, 340px);
	height: min(28vw, 340px);
	background-image: radial-gradient(circle, color-mix(in srgb, var(--arls-primary) 30%, transparent) 1.6px, transparent 1.7px);
	background-size: 17px 17px;
	-webkit-mask-image: radial-gradient(circle at 70% 70%, #000, transparent 72%);
	mask-image: radial-gradient(circle at 70% 70%, #000, transparent 72%);
	opacity: 0.55;
}

@keyframes arls-float {
	from {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	to {
		transform: translate3d(-3%, 4%, 0) rotate(9deg);
	}
}

.arls-hero__inner {
	display: grid;
	gap: clamp(2rem, 4vw, 3.6rem);
	grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
	align-items: center;
}

@media (max-width: 1000px) {
	.arls-hero__inner {
		grid-template-columns: 1fr;
	}
}

.arls-hero__title {
	font-size: calc(var(--arls-h1) * var(--arls-scale, 1));
	text-transform: var(--arls-caps, none);
}

.arls-hero__line {
	display: block;
	opacity: 0;
	transform: translateY(18px);
	animation: arls-rise 640ms var(--ease-out) forwards;
	animation-delay: calc(var(--i) * 70ms + 80ms);
}

@keyframes arls-rise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.arls-hero__rule {
	display: block;
	width: min(420px, 100%);
	height: 5px;
	margin: 1rem 0 1.2rem;
	border-radius: 4px;
	background: var(--arls-primary);
	clip-path: inset(0 100% 0 0);
	animation: arls-wipe 700ms var(--ease-out) 300ms forwards;
}

@keyframes arls-wipe {
	to {
		clip-path: inset(0 0 0 0);
	}
}

.arls-hero__summit {
	position: relative;
	padding-left: 1.4rem;
	border-left: 4px solid var(--arls-primary);
}

.arls-hero__kicker {
	font-family: var(--arls-font-h);
	font-size: calc(var(--arls-display) * var(--arls-scale, 1));
	font-weight: 900;
	line-height: 0.94;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--arls-primary);
}

.arls-hero__sub {
	margin-top: 0.5rem;
	font-family: var(--arls-font-h);
	font-size: calc(var(--arls-display-sub) * var(--arls-scale, 1));
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--arls-accent);
}

.arls-hero__sub span {
	display: block;
}

.arls-hero__claim {
	margin-top: 1.2rem;
	max-width: 46ch;
	font-family: var(--arls-font-h);
	font-size: clamp(0.95rem, 1.4vw, 1.12rem);
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--arls-primary);
}

.arls-hero__claim strong {
	letter-spacing: 0.22em;
	margin-right: 0.4rem;
}

.arls-hero__claim span {
	color: var(--arls-muted);
	letter-spacing: 0.02em;
}

.arls-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.6rem;
}

/* Tarjeta lateral del hero */
.arls-hero__card {
	padding: clamp(1.4rem, 2.5vw, 2rem);
	border: 1px solid var(--arls-line);
	border-radius: calc(var(--arls-radius) + 8px);
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(10px);
	box-shadow: 0 30px 70px -50px rgba(9, 30, 50, 0.6);
	opacity: 0;
	transform: translateY(20px);
	animation: arls-rise 640ms var(--ease-out) 360ms forwards;
}

.arls-hero__meta {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arls-hero__meta li {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
}

.arls-hero__meta .arls-ico {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 0.1rem;
	color: var(--arls-accent);
}

.arls-hero__meta strong {
	display: block;
	font-family: var(--arls-font-h);
	font-size: 1rem;
	line-height: 1.25;
	color: var(--arls-primary);
}

.arls-hero__meta small {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.83rem;
	color: var(--arls-muted);
}

.arls-hero__count {
	margin-top: 1.5rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--arls-line);
}

.arls-hero__count-note {
	margin-bottom: 0.7rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arls-muted);
}

.arls-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	width: 26px;
	height: 42px;
	margin-left: -13px;
	border: 2px solid color-mix(in srgb, var(--arls-primary) 30%, transparent);
	border-radius: 14px;
}

.arls-hero__scroll span {
	position: absolute;
	left: 50%;
	top: 8px;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--arls-accent);
	animation: arls-scrolldot 1.8s var(--ease-in-out) infinite;
}

@keyframes arls-scrolldot {
	0%,
	100% {
		transform: translateY(0);
		opacity: 1;
	}
	60% {
		transform: translateY(14px);
		opacity: 0.15;
	}
}

@media (max-width: 1000px) {
	.arls-hero__scroll {
		display: none;
	}
}

/* ==================================================== 8. CUENTA ATRÁS */

.arls-countdown {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
}

.arls-countdown__unit {
	padding: 0.7rem 0.35rem;
	border-radius: 14px;
	background: var(--scheme-soft, #eef7f7);
	text-align: center;
}

.arls-countdown__num {
	display: block;
	font-family: var(--arls-font-h);
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--arls-primary);
}

.arls-block.is-dark .arls-countdown__num {
	color: #fff;
}

.arls-countdown__label {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--arls-muted);
}

.arls-block.is-dark .arls-countdown__label {
	color: color-mix(in srgb, #fff 70%, transparent);
}

.arls-countdown.is-over {
	grid-template-columns: 1fr;
}

.arls-countdown__over {
	padding: 0.9rem 1rem;
	border-radius: 14px;
	background: var(--arls-accent);
	color: #fff;
	font-weight: 700;
	text-align: center;
}

/* ====================================================== 9. CICLO EMAM */

.arls-cycle {
	display: grid;
	gap: 1rem;
}

.arls-cycle--compact {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 1.5rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--arls-line);
	text-align: center;
}

.arls-cycle--full {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.6rem;
	position: relative;
}

/* En pantalla ancha la secuencia se lee de un vistazo, y para eso tiene que ir
   en una sola línea: manda el número de pasos (--n, que pone la plantilla), no
   el ancho disponible. Con `auto-fit` un quinto paso se caía al renglón de
   abajo y rompía la lectura de la cadena. Por debajo sigue repartiendo por
   ancho, que es lo correcto cuando ya no caben. */
@media (min-width: 1081px) {
	.arls-cycle--full {
		grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
	}
}

.arls-cycle__step {
	position: relative;
}

.arls-cycle--full .arls-cycle__step::after {
	content: "";
	position: absolute;
	top: 32px;
	left: calc(100% - 1.2rem);
	width: 1.6rem;
	height: 2px;
	background: color-mix(in srgb, var(--arls-accent) 45%, transparent);
}

.arls-cycle--full .arls-cycle__step:last-child::after {
	display: none;
}

/* El guión de unión dice «y después», así que sólo aparece donde la fila va
   entera. En cuanto la rejilla se parte en varios renglones, el último de cada
   uno apuntaba al vacío. */
@media (max-width: 1080.98px) {
	.arls-cycle--full .arls-cycle__step::after {
		display: none;
	}
}

.arls-cycle__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--arls-accent);
	color: #fff;
	transition: transform var(--t-panel) var(--ease-out);
}

.arls-cycle--compact .arls-cycle__dot {
	width: 42px;
	height: 42px;
}

.arls-cycle__dot .arls-ico {
	width: 24px;
	height: 24px;
}

.arls-cycle--compact .arls-cycle__dot .arls-ico {
	width: 20px;
	height: 20px;
}

.arls-cycle__label {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--arls-font-h);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--arls-primary);
}

.arls-cycle__name {
	margin-top: 0.9rem;
	font-size: calc(var(--arls-h4) * var(--arls-scale, 1));
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.arls-cycle__text {
	margin-top: 0.4rem;
	font-size: 0.93rem;
}

@media (hover: hover) and (pointer: fine) {
	.arls-cycle__step:hover .arls-cycle__dot {
		transform: translateY(-4px) scale(1.06);
	}
}

.arls-cycleblock {
	margin-top: var(--sp-6);
	padding: clamp(1.6rem, 3vw, 2.6rem);
	border: 1px solid var(--scheme-line);
	border-radius: calc(var(--arls-radius) + 6px);
	background: var(--scheme-soft);
}

.arls-cycleblock__title {
	margin-bottom: 1.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ===================================================== 10. CIFRAS */

.arls-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.1rem;
}

.arls-stat {
	position: relative;
	padding: clamp(1.4rem, 2.4vw, 2rem);
	border: 1px solid var(--scheme-line);
	border-radius: var(--arls-radius);
	background: var(--scheme-card);
	overflow: hidden;
	transition: transform var(--t-panel) var(--ease-out), border-color var(--t-ui) ease;
}

.arls-stat::before {
	content: "";
	position: absolute;
	inset: auto auto -40% -20%;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: var(--arls-accent);
	opacity: 0.07;
	transition: transform var(--t-reveal) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.arls-stat:hover {
		transform: translateY(-5px);
		border-color: color-mix(in srgb, var(--arls-accent) 55%, transparent);
	}

	.arls-stat:hover::before {
		transform: translate(12%, -12%) scale(1.15);
	}
}

.arls-stat__value {
	font-family: var(--arls-font-h);
	font-size: calc(var(--arls-stat) * var(--arls-scale, 1));
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	color: var(--arls-accent-2);
}

.arls-block.is-light .arls-stat__value {
	color: var(--arls-accent);
}

.arls-stat__label {
	margin-top: 0.7rem;
	font-size: 0.97rem;
	line-height: 1.45;
	color: var(--scheme-text);
}

.arls-stat__source {
	margin-top: 0.85rem;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--scheme-text) 70%, transparent);
}

.arls-stats--sm {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.arls-stat--sm {
	padding: 1.2rem 1.3rem;
}

.arls-stat--sm .arls-stat__value {
	font-size: calc(var(--arls-stat-sm) * var(--arls-scale, 1));
}

/* Comparativa en barras */
.arls-split {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 1.1rem;
	margin-top: 1.1rem;
}

@media (max-width: 900px) {
	.arls-split {
		grid-template-columns: 1fr;
	}
}

.arls-panel {
	padding: clamp(1.5rem, 2.6vw, 2.2rem);
	border: 1px solid var(--scheme-line);
	border-radius: var(--arls-radius);
	background: var(--scheme-card);
}

.arls-bars {
	display: grid;
	gap: 1.1rem;
	margin-top: 1.6rem;
}

.arls-bar__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.45rem;
}

.arls-bar__label {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--scheme-text);
}

.arls-bar__value {
	font-family: var(--arls-font-h);
	font-size: 1.15rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--scheme-head);
}

.arls-bar__track {
	height: 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--scheme-line) 70%, transparent);
	overflow: hidden;
}

.arls-bar__fill {
	display: block;
	height: 100%;
	width: var(--pct, 0%);
	border-radius: 999px;
	background: color-mix(in srgb, var(--scheme-head) 45%, transparent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 900ms var(--ease-out);
	transition-delay: calc(var(--i) * 90ms);
}

.arls-bar.is-highlight .arls-bar__fill {
	background: linear-gradient(90deg, var(--arls-accent), var(--arls-accent-2));
}

.arls-bar.is-highlight .arls-bar__value {
	color: var(--arls-accent-2);
}

.arls-block.is-light .arls-bar.is-highlight .arls-bar__value {
	color: var(--arls-accent);
}

.arls-bars.is-in .arls-bar__fill {
	transform: scaleX(1);
}

.arls-inclusion {
	margin-top: var(--sp-6);
}

.arls-inclusion__title {
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ================================================== 11. EJES / PILARES */

.arls-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.1rem;
}

.arls-pillar {
	position: relative;
	padding: clamp(1.5rem, 2.5vw, 2.1rem);
	border: 1px solid var(--scheme-line);
	border-radius: var(--arls-radius);
	background: var(--scheme-card);
	overflow: hidden;
	transition: transform var(--t-panel) var(--ease-out), border-color var(--t-ui) ease;
}

.arls-pillar__num {
	display: inline-block;
	font-family: var(--arls-font-h);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--arls-accent);
}

.arls-pillar__title {
	margin-top: 0.9rem;
	font-size: calc(var(--arls-h3) * var(--arls-scale, 1));
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.arls-pillar__text {
	margin-top: 0.6rem;
	font-size: 0.95rem;
}

.arls-pillar__glow {
	position: absolute;
	inset: auto -30% -60% auto;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--arls-accent), transparent 70%);
	opacity: 0.12;
	transition: transform var(--t-reveal) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.arls-pillar:hover {
		transform: translateY(-5px);
		border-color: color-mix(in srgb, var(--arls-accent) 55%, transparent);
	}

	.arls-pillar:hover .arls-pillar__glow {
		transform: translate(-14%, -14%) scale(1.2);
	}
}

/* Imagen 16:9 de la columna derecha. La proporción se fija en la imagen y no
   sólo en el contenedor: los temas declaran `img { height: auto !important }`,
   y con aspect-ratio esa altura automática se calcula desde el ancho. */
.arls-agenda__media,
.arls-imbe__media {
	position: relative;
	margin: 0;
	aspect-ratio: var(--arls-media-ratio, 16 / 9);
	border-radius: calc(var(--arls-radius) + 4px);
	overflow: hidden;
	background: var(--scheme-soft);
	box-shadow: 0 30px 60px -50px rgba(9, 30, 50, 0.7);
}

.arls-agenda__media img,
.arls-imbe__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

.arls-agenda__foot {
	margin-top: var(--sp-6);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--scheme-line);
}

.arls-agenda__foot .arls-source {
	margin-top: 1rem;
}

/* ======================================================= 12. RUTA */

.arls-road {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.6rem;
	margin: 0;
	padding: 2.6rem 0 0;
	list-style: none;
}

.arls-road__line {
	position: absolute;
	top: 8px;
	left: 6px;
	right: 6px;
	height: 2px;
	background: color-mix(in srgb, var(--scheme-line) 90%, transparent);
	overflow: hidden;
}

.arls-road__line span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--arls-accent), var(--arls-accent-2));
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 1200ms var(--ease-out);
}

.arls-road.is-in .arls-road__line span {
	transform: scaleX(1);
}

.arls-road__item {
	position: relative;
	padding-top: 1.6rem;
}

.arls-road__dot {
	position: absolute;
	top: -13px;
	left: 0;
	width: 14px;
	height: 14px;
	border: 3px solid var(--arls-bg, #fff);
	border-radius: 50%;
	background: color-mix(in srgb, var(--scheme-head) 40%, transparent);
	transition: transform var(--t-panel) var(--ease-out), background-color var(--t-ui) ease;
}

.arls-road__item.is-highlight .arls-road__dot {
	background: var(--arls-accent);
	transform: scale(1.35);
}

.arls-road__date {
	font-family: var(--arls-font-h);
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--scheme-head);
}

.arls-road__item.is-highlight .arls-road__date {
	color: var(--arls-accent);
}

.arls-road__text {
	margin-top: 0.45rem;
	font-size: 0.93rem;
}

@media (max-width: 760px) {
	.arls-road__line {
		display: none;
	}

	.arls-road__item {
		padding-top: 0;
		padding-left: 1.6rem;
		border-left: 2px solid var(--scheme-line);
	}

	.arls-road__dot {
		top: 4px;
		left: -8px;
	}
}

/* ================================================== 13. PROGRAMA */

.arls-programa__meta {
	display: grid;
	gap: 0.55rem;
	justify-items: start;
	font-size: 0.92rem;
}

.arls-programa__meta p {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.arls-programa__meta .arls-ico {
	width: 18px;
	height: 18px;
	color: var(--arls-accent);
	flex: none;
}

.arls-timeline {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arls-timeline__rail {
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 84px;
	width: 2px;
	background: color-mix(in srgb, var(--scheme-line) 90%, transparent);
	overflow: hidden;
}

.arls-timeline__rail span {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, var(--arls-accent), var(--arls-accent-2));
	transform: scaleY(0);
	transform-origin: 50% 0;
	transition: transform 1400ms var(--ease-out);
}

.arls-timeline.is-in .arls-timeline__rail span {
	transform: scaleY(1);
}

.arls-tl {
	position: relative;
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 1.4rem;
	padding-block: 0.85rem;
}

.arls-tl__time {
	position: relative;
	text-align: right;
	padding-right: 1.1rem;
}

.arls-tl__hour {
	font-family: var(--arls-font-h);
	font-size: 1.05rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--scheme-head);
}

.arls-tl__dot {
	position: absolute;
	top: 0.42rem;
	right: -6px;
	width: 12px;
	height: 12px;
	border: 2px solid var(--arls-bg, #fff);
	border-radius: 50%;
	background: color-mix(in srgb, var(--scheme-head) 35%, transparent);
	transition: transform var(--t-panel) var(--ease-out), background-color var(--t-ui) ease;
}

.arls-tl__body {
	padding: 1.15rem 1.4rem;
	border: 1px solid var(--scheme-line);
	border-radius: var(--arls-radius);
	background: var(--scheme-card);
	transition: transform var(--t-panel) var(--ease-out), border-color var(--t-ui) ease,
		box-shadow var(--t-ui) ease;
}

.arls-tl__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.68rem;
	border-radius: 999px;
	background: var(--scheme-soft);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--arls-accent);
}

.arls-tl__tag .arls-ico {
	width: 14px;
	height: 14px;
}

.arls-tl__title {
	margin-top: 0.7rem;
	font-size: calc(var(--arls-h4) * var(--arls-scale, 1));
	line-height: 1.28;
	letter-spacing: -0.005em;
}

.arls-tl__people {
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.28rem;
	font-size: 0.9rem;
	color: var(--scheme-text);
}

.arls-tl__people li {
	padding-left: 0.95rem;
	position: relative;
}

.arls-tl__people li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--arls-accent);
}

.arls-tl__detail {
	margin-top: 0.55rem;
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--scheme-text) 88%, transparent);
}

.arls-tl--conferencia .arls-tl__body {
	border-left: 3px solid var(--arls-accent);
}

.arls-tl--panel .arls-tl__body {
	border-left: 3px solid var(--arls-primary);
}

.arls-tl--pausa .arls-tl__body {
	background: transparent;
	border-style: dashed;
}

.arls-tl--pausa .arls-tl__tag {
	background: transparent;
	color: var(--scheme-text);
}

@media (hover: hover) and (pointer: fine) {
	.arls-tl:hover .arls-tl__body {
		transform: translateX(4px);
		border-color: color-mix(in srgb, var(--arls-accent) 50%, transparent);
		box-shadow: 0 18px 40px -34px rgba(9, 30, 50, 0.7);
	}

	.arls-tl:hover .arls-tl__dot {
		background: var(--arls-accent);
		transform: scale(1.25);
	}
}

@media (max-width: 700px) {
	.arls-timeline__rail {
		left: 5px;
	}

	.arls-tl {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		padding-left: 1.6rem;
	}

	.arls-tl__time {
		text-align: left;
		padding-right: 0;
	}

	.arls-tl__dot {
		right: auto;
		left: -1.6rem;
	}
}

/* ================================================= 14. SPEAKERS */

.arls-speakers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	column-gap: 1.4rem;
	/* Sin gap de filas: con subgrid cada tarjeta abarca 4 filas, así que un
	   row-gap se colaría tres veces DENTRO de la tarjeta. La separación entre
	   tarjetas se hace con el margen inferior de cada una. */
	row-gap: 0;
	margin-bottom: -1.4rem;
}

.arls-speaker {
	margin-bottom: 1.4rem;
}

.arls-speaker {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: calc(var(--arls-radius) + 4px);
	background: var(--scheme-card);
	border: 1px solid var(--scheme-line);
	overflow: hidden;
	transition: transform var(--t-panel) var(--ease-out), box-shadow var(--t-panel) var(--ease-out),
		border-color var(--t-ui) ease;
}

.arls-speaker:focus-visible {
	outline: 3px solid var(--arls-accent);
	outline-offset: 3px;
}

.arls-speaker__photo {
	position: relative;
	aspect-ratio: 1 / 1;
	margin: 1.4rem 1.4rem 0;
	background: linear-gradient(160deg, var(--arls-primary), var(--arls-accent));
	overflow: hidden;
}

.arls-speakers--hex .arls-speaker__photo {
	-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.arls-speakers--circle .arls-speaker__photo {
	border-radius: 50%;
}

.arls-speakers--round .arls-speaker__photo {
	border-radius: var(--arls-radius);
}

/* El tamaño se asegura con aspect-ratio, no con height.
   Los temas declaran `img { height: auto !important }`, y en un elemento
   reemplazado eso NO se resuelve por los offsets top/bottom sino por la
   proporción intrínseca: la foto quedaba a su alto natural y asomaba el
   fondo. Con aspect-ratio, `height: auto` se calcula desde el ancho y la
   imagen siempre llena el hexágono; object-fit se encarga del recorte. */
.arls-speaker__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	max-width: none;
	object-fit: cover;
	object-position: center 22%;
	display: block;
	transition: transform 620ms var(--ease-out), filter var(--t-panel) ease;
}

.arls-speakers.is-bw .arls-speaker__photo img {
	filter: grayscale(1) contrast(1.04);
}

.arls-speaker__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.6);
}

.arls-speaker__ph .arls-ico {
	width: 48px;
	height: 48px;
}

.arls-speaker__hour {
	position: absolute;
	left: 50%;
	bottom: 6%;
	transform: translateX(-50%);
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	font-family: var(--arls-font-h);
	font-size: 0.74rem;
	font-weight: 800;
	color: var(--arls-primary);
}

.arls-speaker__body {
	padding: 0 1.5rem 1.6rem;
	text-align: center;
}

/* El padding superior vive en la identidad, no en el contenedor: en un
   subgrid el del contenedor engorda la primera pista y abre un hueco justo
   debajo del cargo. El inferior sí puede quedarse, porque sólo afecta al
   cierre de la tarjeta. */
.arls-speaker__id {
	padding-top: 1.3rem;
}

/* Los cargos ocupan distinto número de renglones, así que la línea separadora
   y el título de la conferencia caían a alturas distintas en cada tarjeta.
   Con subgrid las cuatro comparten las mismas pistas verticales: foto,
   identidad, conferencia y reseña quedan al mismo nivel.
   Sin soporte de subgrid el bloque se ve como antes, sin romperse. */
@supports (grid-template-rows: subgrid) {
	/* Tres pistas: foto, identidad y el resto. La conferencia y la reseña
	   comparten pista para que la línea separadora quede alineada entre
	   tarjetas sin que la reseña tenga que esperar al título más largo. */
	.arls-speaker {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
	}

	.arls-speaker__body {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		align-content: start;
	}

	.arls-speaker__more {
		align-self: start;
	}
}

.arls-speaker__name {
	font-size: calc(var(--arls-h4) * var(--arls-scale, 1));
	line-height: 1.2;
}

.arls-speaker__role {
	margin-top: 0.4rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--scheme-text);
}

.arls-speaker__org {
	display: block;
	font-weight: 600;
	color: color-mix(in srgb, var(--scheme-text) 88%, transparent);
}

.arls-speaker__talk {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	justify-content: center;
	margin-top: 0.7rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--scheme-line);
	font-family: var(--arls-font-h);
	font-size: 0.93rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--arls-accent);
	text-align: left;
}

.arls-speaker__talk .arls-ico {
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 0.1rem;
}

.arls-speaker__bio {
	margin-top: 0.6rem;
	font-size: 0.86rem;
	line-height: 1.55;
	text-align: left;
	color: color-mix(in srgb, var(--scheme-text) 92%, transparent);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: -webkit-line-clamp 200ms linear;
}

@media (hover: hover) and (pointer: fine) {
	.arls-speaker:hover {
		transform: translateY(-6px);
		border-color: color-mix(in srgb, var(--arls-accent) 55%, transparent);
		box-shadow: 0 34px 60px -44px rgba(9, 30, 50, 0.75);
	}

	.arls-speaker:hover .arls-speaker__photo img {
		transform: scale(1.05);
	}

	.arls-speakers.is-bw .arls-speaker:hover .arls-speaker__photo img {
		filter: grayscale(0);
	}
}

.arls-speaker:hover .arls-speaker__bio,
.arls-speaker:focus-within .arls-speaker__bio {
	-webkit-line-clamp: 12;
}

/* ================================================== 15. PANELES */

.arls-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.4rem;
}

.arls-panelcard {
	padding: clamp(1.5rem, 2.6vw, 2.2rem);
	border: 1px solid var(--scheme-line);
	border-radius: calc(var(--arls-radius) + 4px);
	background: var(--scheme-card);
}

.arls-panelcard__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.4rem 1rem;
	align-items: start;
	padding-bottom: 1.2rem;
	margin-bottom: 1.2rem;
	border-bottom: 1px solid var(--scheme-line);
}

.arls-panelcard__index {
	font-family: var(--arls-font-h);
	font-size: 2.1rem;
	font-weight: 900;
	line-height: 0.9;
	color: color-mix(in srgb, var(--arls-accent) 55%, transparent);
}

.arls-panelcard__title {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arls-accent);
}

.arls-panelcard__sub {
	margin-top: 0.3rem;
	font-family: var(--arls-font-h);
	font-size: calc(var(--arls-h4) * var(--arls-scale, 1));
	font-weight: 700;
	line-height: 1.25;
	color: var(--scheme-head);
}

.arls-panelcard__hour {
	padding: 0.25rem 0.7rem;
	border: 1px solid var(--scheme-line);
	border-radius: 999px;
	font-family: var(--arls-font-h);
	font-size: 0.78rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--scheme-head);
}

.arls-panelcard__list {
	display: grid;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arls-person {
	display: flex;
	gap: 0.8rem;
	align-items: flex-start;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
	transition-delay: calc(var(--j) * 46ms + 120ms);
}

.arls-block.is-in .arls-person,
.arls-block:not(.arls-anim) .arls-person {
	opacity: 1;
	transform: translateY(0);
}

.arls-person__mark {
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: 0.5rem;
	border-radius: 2px;
	background: var(--arls-accent);
	transform: rotate(45deg);
}

.arls-person--empty .arls-person__mark {
	background: transparent;
	border: 1.5px dashed color-mix(in srgb, var(--scheme-text) 55%, transparent);
}

.arls-person__name {
	font-family: var(--arls-font-h);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--scheme-head);
}

.arls-person--empty .arls-person__name {
	color: color-mix(in srgb, var(--scheme-text) 80%, transparent);
	font-style: italic;
	font-weight: 600;
}

.arls-person__role {
	margin-top: 0.15rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--scheme-text);
}

/* ==================================================== 16. IMBE */

.arls-imbe {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(1.6rem, 3.4vw, 3.2rem);
}

@media (max-width: 940px) {
	.arls-imbe {
		grid-template-columns: 1fr;
	}
}

.arls-imbe__col > .arls-h3 {
	margin-top: var(--sp-4);
	margin-bottom: 0.4rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.arls-imbe__col > .arls-h3:first-child {
	margin-top: 0;
}

.arls-stages {
	display: grid;
	gap: 1rem;
}

.arls-stage {
	padding: 1.3rem 1.5rem;
	border-left: 3px solid var(--arls-accent);
	border-radius: 0 var(--arls-radius) var(--arls-radius) 0;
	background: var(--scheme-soft);
}

.arls-stage__badge {
	font-family: var(--arls-font-h);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arls-accent);
}

.arls-stage__text {
	margin-top: 0.5rem;
	font-family: var(--arls-font-h);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--scheme-head);
}

.arls-stage__who {
	margin-top: 0.5rem;
	font-size: 0.82rem;
	color: var(--scheme-text);
}

.arls-dims {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0.9rem;
	margin-top: 1.4rem;
}

.arls-dim {
	position: relative;
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--scheme-line);
	border-radius: var(--arls-radius);
	background: var(--scheme-card);
	transition: transform var(--t-panel) var(--ease-out), border-color var(--t-ui) ease;
}

.arls-dim__code {
	font-family: var(--arls-font-h);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--arls-accent);
}

.arls-dim__title {
	margin-top: 0.4rem;
	font-size: 1rem;
	line-height: 1.25;
}

.arls-dim__text {
	margin-top: 0.4rem;
	font-size: 0.86rem;
	line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
	.arls-dim:hover {
		transform: translateY(-4px);
		border-color: color-mix(in srgb, var(--arls-accent) 55%, transparent);
	}
}

.arls-crono {
	margin-top: var(--sp-6);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--scheme-line);
}

.arls-crono--solo {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.arls-crono > .arls-h3 {
	margin-bottom: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.arls-crono__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: crono;
}

.arls-crono__item {
	position: relative;
	padding: 1.3rem 1.4rem;
	border: 1px solid var(--scheme-line);
	border-radius: var(--arls-radius);
	background: var(--scheme-card);
	counter-increment: crono;
}

.arls-crono__item::before {
	content: counter(crono, decimal-leading-zero);
	position: absolute;
	top: 1rem;
	right: 1.2rem;
	font-family: var(--arls-font-h);
	font-size: 1.7rem;
	font-weight: 900;
	line-height: 1;
	color: color-mix(in srgb, var(--scheme-text) 16%, transparent);
}

.arls-crono__date {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--arls-accent);
}

.arls-crono__title {
	margin-top: 0.45rem;
	font-size: 1.02rem;
}

.arls-crono__text {
	margin-top: 0.35rem;
	font-size: 0.87rem;
	line-height: 1.5;
}

/* ================================================= 17. ENCUESTA */

.arls-survey {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
	gap: clamp(2rem, 4vw, 3.6rem);
	align-items: center;
}

@media (max-width: 940px) {
	.arls-survey {
		grid-template-columns: 1fr;
	}
}

.arls-survey__kicker {
	margin-bottom: 0.6rem;
	font-family: var(--arls-font-h);
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	font-weight: 600;
	color: var(--arls-accent-2);
}

.arls-survey__text {
	margin-top: 1.1rem;
	max-width: 60ch;
	font-size: 0.98rem;
}

.arls-survey__cta {
	margin-top: 1.8rem;
}

.arls-survey__privacy {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	margin-top: 1.5rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--scheme-line);
	border-radius: var(--arls-radius);
	font-size: 0.84rem;
	line-height: 1.5;
}

.arls-survey__privacy .arls-ico {
	flex: none;
	width: 19px;
	height: 19px;
	color: var(--arls-accent-2);
	margin-top: 0.1rem;
}

.arls-survey__contact {
	display: grid;
	gap: 0.15rem;
	margin-top: 1.3rem;
	font-size: 0.85rem;
	font-style: normal;
	color: color-mix(in srgb, var(--scheme-text) 88%, transparent);
}

.arls-survey__contact span:first-child {
	font-weight: 700;
	color: var(--scheme-head);
}

.arls-survey__aside {
	margin: 0;
	text-align: center;
}

.arls-survey__poster {
	position: relative;
	max-width: 400px;
	margin-inline: auto;
	padding: clamp(1rem, 2.2vw, 1.5rem);
	border-radius: calc(var(--arls-radius) + 6px);
	background: #fff;
	overflow: hidden;
	box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.8);
	transition: transform 420ms var(--ease-out);
}

.arls-survey__poster img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.arls-survey__shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
	transform: translateX(-120%);
	transition: transform 900ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.arls-survey__poster:hover {
		transform: scale(1.03);
	}

	.arls-survey__poster:hover .arls-survey__shine {
		transform: translateX(120%);
	}
}

/* En móvil el QR no necesita ocupar todo el ancho: con 220 px se escanea
   igual de bien y deja respirar al texto de alrededor. */
@media (max-width: 640px) {
	.arls-survey__poster {
		max-width: 220px;
		padding: 0.75rem;
	}
}

.arls-survey__note {
	margin-top: 1rem;
	font-size: 0.82rem;
	color: color-mix(in srgb, var(--scheme-text) 85%, transparent);
}

.arls-survey__partners {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 0.9rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--scheme-text) 78%, transparent);
}

/* =============================================== 18. INSCRIPCIÓN */

.arls-signup {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
	gap: clamp(2rem, 4vw, 3.4rem);
	align-items: stretch;
}

/* La columna izquierda es una pila: el mapa se estira para ocupar el hueco
   que queda hasta la altura del formulario. */
.arls-signup__intro {
	display: flex;
	flex-direction: column;
}

.arls-signup__map {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 260px;
	margin: var(--sp-4) 0 0;
	border: 1px solid var(--scheme-line);
	border-radius: calc(var(--arls-radius) + 6px);
	background: #fff;
	overflow: hidden;
	box-shadow: 0 30px 60px -50px rgba(9, 30, 50, 0.7);
}

.arls-signup__map iframe {
	flex: 1 1 auto;
	width: 100%;
	min-height: 200px;
	border: 0;
	filter: grayscale(0.3) contrast(1.02);
	transition: filter var(--t-panel) ease;
}

.arls-signup__map:hover iframe {
	filter: grayscale(0);
}

.arls-signup__mapinfo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: none;
	padding: 0.9rem 1.1rem;
	border-top: 1px solid var(--scheme-line);
	background: #fff;
	text-align: left;
}

.arls-signup__mapico {
	display: inline-flex;
	flex: none;
	color: var(--arls-accent);
}

.arls-signup__mapico .arls-ico {
	width: 20px;
	height: 20px;
}

.arls-signup__maptext {
	flex: 1;
	min-width: 0;
}

.arls-signup__maptext strong {
	display: block;
	font-family: var(--arls-font-h);
	font-size: 0.93rem;
	line-height: 1.25;
	color: var(--arls-primary);
}

.arls-signup__maptext small {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.78rem;
	color: var(--arls-muted);
}

.arls-signup__maplink {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex: none;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--arls-accent);
	transition: transform var(--t-ui) var(--ease-out);
}

.arls-signup__maplink .arls-ico {
	width: 15px;
	height: 15px;
}

@media (hover: hover) and (pointer: fine) {
	.arls-signup__maplink:hover {
		transform: translateX(2px);
	}
}

@media (max-width: 560px) {
	.arls-signup__mapinfo {
		flex-wrap: wrap;
	}

	.arls-signup__maplink {
		width: 100%;
		padding-top: 0.4rem;
	}
}

@media (max-width: 940px) {
	.arls-signup {
		grid-template-columns: 1fr;
	}
}

.arls-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.8rem;
	margin: var(--sp-4) 0 0;
	padding: 0;
	list-style: none;
}

.arls-fact {
	padding: 1rem 1.1rem;
	border: 1px solid var(--scheme-line);
	border-radius: var(--arls-radius);
	background: var(--scheme-card);
}

.arls-fact strong {
	display: block;
	font-family: var(--arls-font-h);
	font-size: 1.06rem;
	color: var(--scheme-head);
}

.arls-fact span {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--scheme-text) 82%, transparent);
}

.arls-signup__formwrap {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.4rem);
	border: 1px solid var(--scheme-line);
	border-radius: calc(var(--arls-radius) + 6px);
	background: #fff;
	box-shadow: 0 40px 80px -60px rgba(9, 30, 50, 0.65);
}

.arls-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem 0.9rem;
}

/* Las filas no son <p>, así que ningún tema puede inyectarles su margen de
   párrafo; aun así se deja explícito para no depender del reset. */
.arls-field,
.arls-check {
	margin: 0;
}

@media (max-width: 560px) {
	.arls-form__grid,
	.arls-facts {
		grid-template-columns: 1fr;
	}
}

.arls-field {
	display: grid;
	gap: 0.28rem;
	align-content: start;
}

.arls-field--full {
	grid-column: 1 / -1;
}

.arls-field label {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--arls-primary);
}

.arls-field__opt {
	font-weight: 500;
	color: var(--arls-muted);
}

.arls-field input,
.arls-field textarea,
.arls-select select {
	width: 100%;
	min-height: 46px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--arls-line);
	border-radius: 12px;
	background: #fff;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--arls-ink);
	transition: border-color var(--t-ui) ease, box-shadow var(--t-ui) ease;
}

.arls-field textarea {
	resize: vertical;
	min-height: 92px;
}

.arls-field input:focus,
.arls-field textarea:focus,
.arls-select select:focus {
	outline: none;
	border-color: var(--arls-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--arls-accent) 16%, transparent);
}

.arls-select {
	position: relative;
	display: block;
}

.arls-select::after {
	content: "";
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--arls-muted);
	border-bottom: 2px solid var(--arls-muted);
	transform: rotate(45deg);
	pointer-events: none;
}

.arls-select select {
	appearance: none;
	padding-right: 2.4rem;
}

.arls-field__error {
	font-size: 0.76rem;
	line-height: 1.3;
	font-weight: 600;
	color: #c0392b;
}

.arls-field.has-error input,
.arls-field.has-error textarea,
.arls-field.has-error select {
	border-color: #c0392b;
}

.arls-check {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.2rem 0.7rem;
	margin-top: 1.1rem;
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--arls-muted);
}

.arls-check input {
	width: 20px;
	height: 20px;
	margin-top: 0.15rem;
	accent-color: var(--arls-accent);
}

.arls-check .arls-field__error {
	grid-column: 2;
}

.arls-check a {
	color: var(--arls-accent);
}

.arls-check.has-error label {
	color: #c0392b;
}

.arls-form button[type="submit"] {
	margin-top: 1.3rem;
}

.arls-form__msg {
	margin-top: 0.9rem;
	font-size: 0.86rem;
	font-weight: 600;
	text-align: center;
	color: #c0392b;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out);
}

.arls-form__msg.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.arls-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Confirmación */
.arls-form__done {
	text-align: center;
	padding: 1.5rem 0.5rem;
}

.arls-form__done[hidden] {
	display: none;
}

.arls-form__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--arls-accent) 14%, #fff);
	color: var(--arls-accent);
	transform: scale(0.92);
	opacity: 0;
	transition: transform 380ms var(--ease-out), opacity 260ms ease;
}

.arls-form__done.is-in .arls-form__tick {
	transform: scale(1);
	opacity: 1;
}

.arls-form__tick .arls-ico {
	width: 30px;
	height: 30px;
	stroke-width: 2.4;
}

.arls-form__done p {
	margin-top: 0.6rem;
	max-width: 42ch;
	margin-inline: auto;
	color: var(--arls-muted);
}

/* =============================================== 19. INSTITUCIONES */

/* Banda de instituciones, con la misma jerarquía que los pendones oficiales:
   grupos etiquetados y separados por una línea fina. */
.arls-orgs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: stretch;
	padding: clamp(1.4rem, 3vw, 2.4rem) 0;
	border-block: 1px solid var(--scheme-line);
}

.arls-orgs__group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
	min-width: 0;
	padding-inline: clamp(0.8rem, 2vw, 1.8rem);
	text-align: center;
}

.arls-orgs__group + .arls-orgs__group {
	border-left: 1px solid var(--scheme-line);
}

.arls-orgs__label {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--scheme-head);
}

.arls-orgs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.9rem 1.4rem;
	margin: auto 0;
	padding: 0;
	list-style: none;
}

/* Los logos institucionales van en color: son marcas oficiales y deben
   leerse. El matiz de estado se hace con opacidad, no con desaturación. */
.arls-orgs__item img {
	display: block;
	max-width: 170px;
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0.92;
	transition: opacity var(--t-ui) ease, transform var(--t-panel) var(--ease-out);
}

.arls-block.is-dark .arls-orgs__item img {
	/* Sobre fondo oscuro los logos van sobre una tarjeta clara para no
	   perder contraste ni alterar los colores de marca. */
	padding: 0.5rem 0.7rem;
	border-radius: 10px;
	background: #fff;
}

@media (hover: hover) and (pointer: fine) {
	.arls-orgs__item:hover img {
		opacity: 1;
		transform: translateY(-3px);
	}
}

@media (max-width: 1080px) {
	.arls-orgs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.8rem 0;
	}

	.arls-orgs__group + .arls-orgs__group {
		border-left: 0;
	}
}

@media (max-width: 620px) {
	.arls-orgs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.arls-orgs__item img {
		max-height: 48px;
	}
}

/* ================================================= 20. UBICACIÓN */

.arls-place {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(1.8rem, 3.4vw, 3rem);
	align-items: center;
}

@media (max-width: 900px) {
	.arls-place {
		grid-template-columns: 1fr;
	}
}

.arls-place__address {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin-top: 1rem;
	font-weight: 600;
	color: var(--scheme-head);
}

.arls-place__address .arls-ico {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--arls-accent);
	margin-top: 0.15rem;
}

.arls-place__text {
	margin-top: 0.9rem;
	max-width: 54ch;
}

.arls-place__data {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin: 1.6rem 0;
}

.arls-place__data dt {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--arls-accent);
}

.arls-place__data dd {
	margin: 0.3rem 0 0;
	font-family: var(--arls-font-h);
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--scheme-head);
}

.arls-place__map {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: calc(var(--arls-radius) + 6px);
	border: 1px solid var(--scheme-line);
	overflow: hidden;
	box-shadow: 0 40px 80px -60px rgba(9, 30, 50, 0.7);
}

.arls-place__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(0.35) contrast(1.02);
	transition: filter var(--t-panel) ease;
}

.arls-place__map:hover iframe {
	filter: grayscale(0);
}

/* =================================================== 21. FOOTER */

.arls-block--footer {
	--arls-pad-bot: 2.5rem;
}

.arls-foot__claim {
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--scheme-line);
	text-align: center;
}

.arls-foot__big {
	max-width: 26ch;
	margin-inline: auto;
	text-wrap: balance;
	font-family: var(--arls-font-h);
	font-size: calc(var(--arls-foot-big) * var(--arls-scale, 1));
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: #fff;
}

.arls-foot__big span {
	display: block;
}

.arls-foot__cycle {
	margin-top: 1.1rem;
	font-family: var(--arls-font-h);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--arls-accent-2);
}

.arls-foot__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
	gap: var(--sp-4);
	padding-block: var(--sp-5);
}

@media (max-width: 820px) {
	.arls-foot__cols {
		grid-template-columns: 1fr;
		gap: var(--sp-4);
		/* Apiladas en una sola columna, las tres partes se leen mejor centradas. */
		text-align: center;
	}

	.arls-foot__logo {
		margin-inline: auto;
	}

	.arls-foot__social {
		justify-content: center;
	}

	/* Al pasar a dos líneas, el separador quedaría suelto al inicio de la segunda. */
	.arls-foot__copy strong::before {
		display: none;
	}
}

.arls-foot__logo {
	width: auto;
	height: 54px;
	max-height: 54px;
	max-width: 220px;
	object-fit: contain;
	object-position: left center;
	margin-bottom: 0.9rem;
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

.arls-foot__org {
	font-family: var(--arls-font-h);
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
}

.arls-foot__orgdesc {
	margin-top: 0.25rem;
	font-size: 0.84rem;
	color: var(--scheme-text);
}

.arls-foot__h {
	margin-bottom: 0.9rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arls-accent-2);
}

.arls-foot__links {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
}

.arls-foot__links a,
.arls-foot__plain {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--scheme-text);
	text-decoration: none;
	transition: color var(--t-ui) ease, transform var(--t-ui) var(--ease-out);
}

.arls-foot__links .arls-ico {
	width: 16px;
	height: 16px;
	color: var(--arls-accent-2);
	flex: none;
}

@media (hover: hover) and (pointer: fine) {
	.arls-foot__links a:hover {
		color: #fff;
		transform: translateX(3px);
	}
}

.arls-foot__social {
	display: flex;
	gap: 0.5rem;
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}

.arls-foot__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--scheme-line);
	border-radius: 50%;
	color: #fff;
	transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease,
		border-color var(--t-ui) ease;
}

.arls-foot__social a:active {
	transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
	.arls-foot__social a:hover {
		background: var(--arls-accent);
		border-color: var(--arls-accent);
	}
}

.arls-foot__bottom {
	padding-top: var(--sp-4);
	border-top: 1px solid var(--scheme-line);
	text-align: center;
}

.arls-foot__fund {
	max-width: 80ch;
	margin-inline: auto;
	font-size: 0.76rem;
	line-height: 1.6;
	text-wrap: balance;
	color: color-mix(in srgb, var(--scheme-text) 82%, transparent);
}

.arls-foot__copy {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.8rem;
	align-items: center;
	justify-content: center;
	margin-top: 1.1rem;
	font-size: 0.8rem;
	color: var(--scheme-text);
}

.arls-foot__copy strong::before {
	content: "·";
	margin-right: 0.8rem;
	color: color-mix(in srgb, var(--scheme-text) 45%, transparent);
}

.arls-foot__copy strong {
	color: var(--arls-accent-2);
	letter-spacing: 0.02em;
}

/* ============================================ 22. VOLVER ARRIBA */

.arls-totop {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: var(--z-top);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--arls-primary);
	color: #fff;
	box-shadow: 0 16px 34px -18px rgba(9, 30, 50, 0.85);
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px) scale(0.94);
	transition: opacity var(--t-panel) ease, transform var(--t-panel) var(--ease-out);
}

/* El botón se cuelga del <body>, fuera de .arls-block, así que necesita su
   propio blindaje. La clase repetida (0,2,1) gana a `.entry-content a:hover`
   del tema, que lo dejaba con la flecha en negro sobre azul. */
.arls-totop.arls-totop,
.arls-totop.arls-totop:hover,
.arls-totop.arls-totop:focus,
.arls-totop.arls-totop:active,
.arls-totop.arls-totop:visited {
	color: #fff;
	text-decoration: none;
}

/* Mismo motivo para los enlaces cuyo contraste depende del color: sobre
   fondo oscuro, un hover heredado del tema los volvería ilegibles. */
.arls-block .arls-foot__links a:is(:hover, :focus, :active, :visited),
.arls-block .arls-foot__social a:is(:hover, :focus, :active, :visited) {
	color: #fff;
}

.arls-block .arls-topbar__link:is(:hover, :focus, :active, :visited) {
	color: var(--arls-accent-2);
}

.arls-block .arls-nav__link:is(:focus, :active, :visited) {
	color: var(--arls-primary);
}

.arls-block .arls-nav__link:hover,
.arls-block .arls-nav__link.is-active {
	color: var(--arls-accent);
}

.arls-totop.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.arls-totop:active {
	transform: scale(0.94);
}

.arls-totop__ico {
	width: 20px;
	height: 20px;
	transform: rotate(-90deg);
}

/* ============================================== 23. ESQUELETO AJAX */

.arls-skeleton {
	display: grid;
	gap: 0.9rem;
	width: min(100% - 2.5rem, var(--arls-container, 1200px));
	margin-inline: auto;
	padding-block: 1rem;
}

.arls-skeleton__bar {
	display: block;
	height: 16px;
	border-radius: 8px;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--scheme-text) 9%, transparent) 25%,
		color-mix(in srgb, var(--scheme-text) 16%, transparent) 37%,
		color-mix(in srgb, var(--scheme-text) 9%, transparent) 50%
	);
	background-size: 400% 100%;
	animation: arls-shimmer 1.25s linear infinite;
	animation-delay: calc(var(--i) * 80ms);
}

.arls-skeleton__bar:first-child {
	height: 34px;
	width: 46%;
}

.arls-skeleton__bar:nth-child(3) {
	width: 82%;
}

.arls-skeleton__bar:last-child {
	width: 60%;
}

@keyframes arls-shimmer {
	to {
		background-position: -135% 0;
	}
}

.arls-block--hero .arls-skeleton {
	min-height: 60vh;
	align-content: center;
}

.arls-block__slot.is-error {
	display: grid;
	gap: 0.8rem;
	justify-items: center;
	padding-block: 2rem;
	text-align: center;
}

/* ============================================== 24. PATRONES DE FONDO */

.arls-pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

.arls-pattern__net {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.45;
}

.arls-net__lines line {
	stroke: currentColor;
	stroke-width: 0.7;
	opacity: 0.22;
}

.arls-net__dots circle {
	fill: currentColor;
	opacity: 0.3;
	transform-box: fill-box;
	transform-origin: center;
	animation: arls-pulse 5.5s var(--ease-in-out) infinite alternate;
	animation-delay: calc(var(--n) * 160ms);
}

@keyframes arls-pulse {
	from {
		opacity: 0.14;
		transform: scale(0.9);
	}
	to {
		opacity: 0.42;
		transform: scale(1.12);
	}
}

.arls-pattern__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.5px);
	background-size: 20px 20px;
	opacity: 0.11;
	-webkit-mask-image: linear-gradient(to top, #000, transparent 55%);
	mask-image: linear-gradient(to top, #000, transparent 55%);
}

.arls-pattern__blob {
	position: absolute;
	width: min(46vw, 560px);
	height: auto;
	fill: currentColor;
	opacity: 0.06;
}

.arls-pattern__blob--a {
	top: -16%;
	right: -12%;
	animation: arls-float 20s var(--ease-in-out) infinite alternate;
}

.arls-pattern__blob--b {
	bottom: -22%;
	left: -14%;
	animation: arls-float 26s var(--ease-in-out) infinite alternate-reverse;
}

/* ============================================== 25. REVELADO SCROLL */

.arls-anim {
	opacity: 0;
	transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
	will-change: opacity, transform;
}

.arls-anim--up {
	transform: translateY(26px);
}

.arls-anim--fade {
	transform: none;
}

.arls-anim--zoom {
	transform: scale(0.97);
}

.arls-anim--left {
	transform: translateX(-26px);
}

.arls-anim.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* El revelado deja cada bloque en `opacity: 0` hasta que el JS le pone `is-in`.
   Para lo que está arriba del pliegue eso significa una pantalla en blanco
   durante toda la descarga y ejecución del JS, que va en el pie y detrás de
   los del tema: en una conexión lenta Lighthouse no llega a pintar nada y
   aborta la medición con NO_FCP. El header y el hero se muestran desde el
   primer fotograma, con el HTML; el resto conserva su animación al hacer
   scroll, que es donde se aprecia y donde no cuesta nada. */
.arls-block--header.arls-anim,
.arls-block--hero.arls-anim {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Escalonado de hijos */
[data-arls-stagger] > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
	transition-delay: calc(var(--i, 0) * 54ms);
}

[data-arls-stagger].is-in > *,
.arls-block:not(.arls-anim) [data-arls-stagger] > * {
	opacity: 1;
	transform: translateY(0);
}

/* Sin JavaScript no hay nadie que reparta `is-in`, así que el contenido se
   quedaría invisible para siempre. La copia de `<noscript>` sólo cubre el modo
   AJAX; esto cubre también el render directo en PHP. Va después de las reglas
   que oculta, porque una consulta de medios no añade especificidad: si fuera
   antes, perdería la cascada y no serviría de nada. */
@media (scripting: none) {
	.arls-anim,
	[data-arls-stagger] > * {
		opacity: 1;
		transform: none;
	}

	.arls-bar__fill,
	.arls-road__line span,
	.arls-timeline__rail span {
		transform: none;
	}
}

/* ============================================== 26. UTILIDADES */

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

.arls-block a:focus-visible,
.arls-block button:focus-visible,
.arls-block input:focus-visible,
.arls-block select:focus-visible,
.arls-block textarea:focus-visible {
	outline: 3px solid var(--arls-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* El header deja escapar su sombra y el panel del menú. */
.arls-block--header {
	overflow: visible;
}

/* ======================================= 27. MOVIMIENTO REDUCIDO */

@media (prefers-reduced-motion: reduce) {
	.arls-block *,
	.arls-block *::before,
	.arls-block *::after,
	.arls-drawer *,
	.arls-totop {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	.arls-anim,
	[data-arls-stagger] > *,
	.arls-person,
	.arls-hero__line,
	.arls-hero__card {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.arls-hero__rule {
		clip-path: none !important;
		animation: none !important;
	}

	.arls-bar__fill,
	.arls-road__line span,
	.arls-timeline__rail span {
		transform: none !important;
	}

	.arls-hero__canvas {
		display: none;
	}

	.arls-hero__slide {
		transition: none !important;
		animation: none !important;
	}
}

/* ========================================== 28. IMPRESIÓN */

@media print {
	.arls-block--header,
	.arls-drawer,
	.arls-totop,
	.arls-hero__canvas,
	.arls-pattern,
	.arls-place__map {
		display: none !important;
	}

	.arls-block {
		padding-block: 1rem !important;
		background: #fff !important;
		color: #000 !important;
	}

	/* Al imprimir no hay scroll que dispare el revelado: todo debe verse. */
	.arls-anim,
	[data-arls-stagger] > *,
	.arls-person,
	.arls-hero__line,
	.arls-hero__card {
		opacity: 1 !important;
		transform: none !important;
	}

	.arls-hero__rule {
		clip-path: none !important;
	}
}

/* ============================================ 29. CARRUSEL DE IMÁGENES */

.arls-carousel {
	position: relative;
}

.arls-carousel__viewport {
	overflow: hidden;
	border-radius: calc(var(--arls-radius) + 4px);
}

.arls-carousel__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: var(--arls-car-gap, 1rem);
	/* Sólo transform: el desplazamiento no toca el layout. */
	transition: transform 620ms var(--ease-out);
	will-change: transform;
}

.arls-carousel__slide {
	flex: 0 0 calc(
		(100% - (var(--arls-car-visibles, 3) - 1) * var(--arls-car-gap, 1rem))
		/ var(--arls-car-visibles, 3)
	);
	min-width: 0;
}

.arls-carousel__figure {
	position: relative;
	margin: 0;
	aspect-ratio: var(--arls-car-ratio, 16 / 9);
	border-radius: var(--arls-radius);
	overflow: hidden;
	background: var(--scheme-soft);
}

/* La proporción se fija también en la imagen: con `height: auto !important`
   del tema, es lo único que hace que llene la caja. */
.arls-carousel__figure img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--arls-car-ratio, 16 / 9);
	max-width: none;
	object-fit: cover;
	display: block;
	transition: transform 700ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.arls-carousel__slide:hover .arls-carousel__figure img {
		transform: scale(1.04);
	}
}

.arls-carousel__pie {
	position: absolute;
	inset: auto 0 0;
	padding: 1.6rem 1rem 0.7rem;
	background: linear-gradient(to top, rgba(9, 30, 50, 0.75), transparent);
	color: #fff;
	font-size: 0.82rem;
	line-height: 1.35;
}

/* Controles */
.arls-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	border: 1px solid var(--scheme-line);
	border-radius: 50%;
	background: #fff;
	color: var(--arls-primary);
	cursor: pointer;
	box-shadow: 0 14px 30px -18px rgba(9, 30, 50, 0.7);
	transition: transform var(--t-press) var(--ease-out), opacity var(--t-ui) ease,
		background-color var(--t-ui) ease, color var(--t-ui) ease;
}

.arls-carousel__nav:active {
	transform: scale(0.94);
}

.arls-carousel__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

.arls-carousel__nav--prev {
	left: -10px;
}

.arls-carousel__nav--prev .arls-ico {
	transform: rotate(180deg);
}

.arls-carousel__nav--next {
	right: -10px;
}

.arls-carousel__nav .arls-ico {
	width: 20px;
	height: 20px;
}

@media (hover: hover) and (pointer: fine) {
	.arls-carousel__nav:hover {
		background: var(--arls-accent);
		border-color: var(--arls-accent);
		color: #fff;
	}
}

.arls-carousel__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.45rem;
	margin-top: 1.2rem;
}

.arls-carousel__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--scheme-text) 35%, transparent);
	cursor: pointer;
	transition: transform var(--t-ui) var(--ease-out), background-color var(--t-ui) ease;
}

.arls-carousel__dot.is-on {
	background: var(--arls-accent);
	transform: scale(1.35);
}

/* En pantallas medianas y pequeñas se reduce el número de imágenes a la vez. */
@media (max-width: 1000px) {
	.arls-carousel__slide {
		flex-basis: calc(
			(100% - min(var(--arls-car-visibles, 3), 2) * var(--arls-car-gap, 1rem) + var(--arls-car-gap, 1rem))
			/ min(var(--arls-car-visibles, 3), 2)
		);
	}
}

@media (max-width: 640px) {
	.arls-carousel__slide {
		flex-basis: 100%;
	}

	.arls-carousel__nav--prev {
		left: 4px;
	}

	.arls-carousel__nav--next {
		right: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arls-carousel__track {
		transition: none !important;
	}
}

/* Los temas dan a `button` su propio padding, fondo y color, y con
   `.entry-content button` (0,1,1) ganaban a las clases del carrusel: las
   flechas salían ovaladas y con el icono invisible. Con la clase repetida
   (0,2,0) recuperan su forma y su contraste. */
.arls-carousel .arls-carousel__nav,
.arls-carousel .arls-carousel__nav:hover,
.arls-carousel .arls-carousel__nav:focus,
.arls-carousel .arls-carousel__nav:active {
	box-sizing: border-box;
	width: 48px;
	min-width: 48px;
	height: 48px;
	min-height: 48px;
	padding: 0;
	border: 1px solid var(--scheme-line);
	border-radius: 50%;
	background: #fff;
	color: var(--arls-primary);
	font-size: 0;
	line-height: 0;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: 0 10px 26px -10px rgba(9, 30, 50, 0.55);
}

.arls-carousel .arls-carousel__nav .arls-ico {
	width: 20px;
	height: 20px;
	stroke-width: 2.2;
	flex: none;
}

@media (hover: hover) and (pointer: fine) {
	.arls-carousel .arls-carousel__nav:hover {
		background: var(--arls-accent);
		border-color: var(--arls-accent);
		color: #fff;
	}
}

.arls-carousel .arls-carousel__dot,
.arls-carousel .arls-carousel__dot:hover,
.arls-carousel .arls-carousel__dot:focus {
	box-sizing: border-box;
	width: 10px;
	min-width: 10px;
	height: 10px;
	min-height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	font-size: 0;
	line-height: 0;
	box-shadow: none;
}

/* Las flechas se apoyan en el borde de la imagen, no fuera del contenedor:
   así no se salen del ancho en pantallas justas. */
.arls-carousel__nav--prev {
	left: 8px;
}

.arls-carousel__nav--next {
	right: 8px;
}


/* ========================= 30. PORTADA DEL SUMMIT Y TARJETA DE HITO */

/* La portada del Summit reutiliza toda la maquinaria del hero, así que necesita
   sus mismas reglas base: el espacio interior lo pone .arls-hero, no la
   sección, y se muestra desde el primer fotograma sin esperar al JavaScript. */
.arls-block--hero_summit {
	padding-block: 0;
}

.arls-block--hero_summit.arls-anim {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Enlace de vuelta: quien entra directo a /summit desde un enlace compartido
   necesita una puerta de regreso a la Agenda, que es el sitio de verdad. */
.arls-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 1.1rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--arls-muted);
}

.arls-hero__back-ico {
	width: 14px;
	height: 14px;
	transform: rotate(180deg);
}

.arls-hero__back:hover {
	color: var(--arls-accent);
}

/* --------------------------------------- Tarjeta del próximo gran hito */

/* En la portada de la Agenda el Summit viaja aquí: visible, pero claramente
   por debajo del titular. Por eso la etiqueta es pequeña y el título de la
   tarjeta no compite en tamaño con el <h1> de la Agenda. */
.arls-hito__label {
	margin: 0 0 0.5rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--arls-accent);
}

.arls-hito__title {
	margin: 0 0 1.1rem;
	font-family: var(--arls-font-h);
	font-size: clamp(1.02rem, 1.5vw, 1.2rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--arls-primary);
}

.arls-hito__texto {
	margin: 1.1rem 0 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--arls-muted);
}

.arls-hito__cta {
	width: 100%;
	margin-top: 1.3rem;
	justify-content: center;
}

/* Pasado el evento la tarjeta ya no anuncia: recoge. Sin datos prácticos ni
   cuenta atrás, queda más corta, y el acento la mantiene como puerta de
   entrada a los resultados. */
.arls-hito.is-past {
	border-color: color-mix(in srgb, var(--arls-accent) 40%, var(--arls-line));
}

/* --------------------------------------------- Cuenta regresiva compacta */

/* Flexible y no en cuatro columnas fijas: en la portada se muestran tres
   unidades (sin segundos) y la rejilla de la versión grande dejaría un hueco. */
.arls-countdown--sm {
	display: flex;
	gap: 0.5rem;
}

.arls-countdown--sm .arls-countdown__unit {
	flex: 1 1 0;
}

.arls-countdown--sm .arls-countdown__num {
	font-size: clamp(1.05rem, 1.9vw, 1.4rem);
}

.arls-countdown--sm .arls-countdown__label {
	font-size: 0.6rem;
}

/* ------------------------------------------------ Compromiso Regional */

.arls-compromiso__foto {
	margin: 2.4rem 0 0;
	border-radius: var(--arls-radius);
	overflow: hidden;
}

.arls-compromiso__foto img {
	display: block;
	width: 100%;
	height: auto;
}

.arls-compromiso__firmas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1rem 1.6rem;
	margin: 2.4rem 0 0;
}

.arls-compromiso__firma {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	line-height: 1.4;
}

.arls-compromiso__firma strong {
	display: block;
	color: var(--scheme-strong);
}

.arls-compromiso__firma small {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.82rem;
	color: var(--scheme-text);
}

.arls-compromiso__ico {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 0.15rem;
	padding: 3px;
	border-radius: 50%;
	background: var(--scheme-soft);
	color: var(--arls-accent-2);
}

.arls-compromiso__cta {
	margin: 2.4rem 0 0;
	text-align: center;
}

/* El texto de «Qué es la Agenda» cuando comparte fila con la fotografía: se
   separa del titular y no se estira hasta el ancho de la columna, para que la
   línea siga siendo cómoda de leer. */
.arls-agenda__intro {
	margin-top: 1.4rem;
}

.arls-agenda__intro + .arls-agenda__intro {
	margin-top: 0.9rem;
}

/* La entradilla de «Medición y Evidencia» es larga: se le cede espacio
   estrechando la columna del titular, que al hacerlo reparte sus palabras en
   tres renglones y gana ritmo. Va dentro de la consulta de medios porque en
   móvil la cabecera se apila y esta regla, con más especificidad, le habría
   ganado a la que iguala las columnas a una sola. */
@media (min-width: 861px) {
	.arls-block--imbe .arls-head--split {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	}
}

/* Reducción de la fotografía de «Qué es la Agenda», sólo en escritorio. Se
   encoge pegada al borde derecho, que es la línea que comparte con las tarjetas
   de abajo: alinearla al centro rompería esa vertical. En móvil no se aplica
   porque la cabecera se apila y una foto encogida ahí sólo dejaría un hueco. */
@media (min-width: 861px) {
	.arls-agenda__media {
		width: var(--arls-media-ancho, 100%);
		margin-left: auto;
	}

	.arls-imbe__media {
		width: var(--arls-media-ancho, 100%);
		margin-right: auto;
	}
}

/* El titular de Bienestar docente dejó de ser un nombre («Índice Nacional de
   Bienestar Docente 2026») para ser una frase larga. Al tamaño de titular de
   sección ocupaba media pantalla, así que aquí baja a tamaño de afirmación:
   sigue mandando sobre el texto, pero sin comerse el bloque. */
.arls-block--encuesta .arls-h2 {
	font-size: calc(clamp(1.45rem, 2.5vw, 2.15rem) * var(--arls-scale, 1));
	line-height: 1.18;
}

/* La tarjeta del QR acompaña en altura a la columna de texto, en lugar de
   quedar flotando en el centro: con el texto largo las dos columnas terminaban
   a alturas muy distintas. El código se mantiene centrado dentro. */
@media (min-width: 941px) {
	.arls-survey {
		align-items: stretch;
	}

	/* Centrada: el conjunto de código, instituciones y condiciones es más corto
	   que la columna de texto, y centrado reparte el aire arriba y abajo en vez
	   de dejarlo todo al final. */
	.arls-survey__aside {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* El ancho explicito es imprescindible: dentro de un contenedor flex, los
	   márgenes automáticos laterales impiden que el elemento se estire y la
	   tarjeta se encogería hasta el tamaño de su contenido. */
	.arls-survey__poster {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
	}
}

/* El reseteo del bloque pone a cero el margen de todos los párrafos, así que
   un subtítulo colocado bajo el titular de una cabecera quedaba pegado a él.
   Se separa aquí, en la cabecera, y no en el párrafo: así vale para las tres
   secciones que lo usan y no afecta a los párrafos de otros sitios. */
.arls-head .arls-h2 + .arls-lead {
	margin-top: 1.25rem;
}

.arls-head .arls-lead + .arls-lead {
	margin-top: 0.9rem;
}

/* Alianzas es la única cabecera centrada cuyo texto es el mensaje principal de
   la sección, no un apoyo del titular: se le levanta el límite de ancho que
   llevan las demás para que ocupe la sección entera. */
.arls-block--sponsors .arls-head--center,
.arls-block--sponsors .arls-head--center .arls-lead {
	max-width: none;
}

/* El botón de «Sigue el proceso» cierra la sección centrado bajo el carrusel,
   separado de los puntos de navegación. */
.arls-carousel__cta {
	margin-top: 2.6rem;
	text-align: center;
}

/* ============================ 31. CONTACTO PARA INSTITUCIONES */

/* El formulario se centra y no ocupa todo el ancho: son diez campos y a lo
   ancho de la sección las líneas quedarían incómodas de recorrer. */
.arls-ci {
	max-width: 52rem;
	margin-inline: auto;
}

/* El aviso de que esto no es una adhesión va antes del formulario y con peso
   propio: es la advertencia que evita el malentendido, no una nota al pie. */
.arls-ci__aviso {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin-bottom: 2rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--scheme-line);
	border-left: 3px solid var(--arls-accent);
	border-radius: 0 var(--arls-radius) var(--arls-radius) 0;
	background: var(--scheme-card);
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--scheme-text);
}

.arls-ci__aviso .arls-ico {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 0.15rem;
	color: var(--arls-accent);
}

/* Subtítulo breve bajo un titular de sección. Más pequeño y discreto que el
   texto de apoyo habitual: es una pregunta que enmarca lo que viene, no un
   párrafo que haya que leer. */
.arls-head__sub {
	margin-top: 0.9rem;
	font-family: var(--arls-font-h);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--arls-muted);
}

.arls-block.is-dark .arls-head__sub {
	color: var(--scheme-text);
}

/* ==================================== 32. SOCIO ACADÉMICO */

/* El instructivo pide para esta parte «mucho más protagonismo visual»: por eso
   es un panel propio y no un logotipo más entre otros. El logo va en su propia
   caja blanca —los logotipos institucionales piden aire y fondo neutro— y el
   texto ocupa el resto. */
.arls-socio {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	margin: var(--sp-6) 0;
	padding: clamp(1.5rem, 3vw, 2.4rem);
	border: 1px solid var(--scheme-line);
	border-radius: calc(var(--arls-radius) + 6px);
	background: var(--scheme-soft);
}

@media (max-width: 780px) {
	.arls-socio {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

.arls-socio__marca {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 2vw, 1.6rem);
	border-radius: var(--arls-radius);
	background: #fff;
	box-shadow: 0 24px 50px -40px rgba(9, 30, 50, 0.6);
}

.arls-socio__marca img {
	display: block;
	width: 100%;
	max-width: 180px;
	height: auto;
}

.arls-socio__nombre {
	margin: 0.2rem 0 0.9rem;
	font-family: var(--arls-font-h);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--scheme-head);
}

.arls-socio__texto {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--scheme-text);
}

.arls-socio__texto + .arls-socio__texto {
	margin-top: 0.9rem;
}

/* Las dos líneas de medición, al mismo nivel: son paralelas, no sucesivas, y
   apilarlas sugería un orden que no existe. */
.arls-lineas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
}

/* La frase que resume el IMBE y su responsable cierran la presentación, antes
   de entrar en objetivos y dimensiones. */
.arls-imbe__firma {
	margin: var(--sp-5) 0 var(--sp-6);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--scheme-line);
	text-align: center;
}

/* La frase no se estira hasta el borde: centrada y a lo ancho de una lectura
   cómoda gana fuerza, que es lo que se le pide a un cierre. */
.arls-imbe__firma .arls-bigclaim {
	max-width: 46rem;
	margin-inline: auto;
}

.arls-imbe__inv {
	margin-top: 1.1rem;
	font-size: 0.94rem;
	color: var(--scheme-text);
}

.arls-imbe__inv-label {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arls-accent);
}

.arls-imbe__inv strong {
	color: var(--scheme-strong);
}

.arls-imbe__dimintro {
	margin-bottom: 1.4rem;
	font-size: 0.96rem;
	line-height: 1.6;
	color: var(--scheme-text);
}

/* La imagen opcional de los objetivos respira respecto de la lista que la
   precede. */
.arls-imbe__media {
	margin-top: var(--sp-5);
}

/* El titular del IMBE es largo —cuatro renglones— y el texto de al lado se
   iba casi noventa píxeles por encima de él, rompiendo la línea de base que
   comparten. A este tamaño las dos columnas terminan a la misma altura sin
   que el texto pierda legibilidad. */
.arls-block--imbe_detalle .arls-head--split .arls-lead {
	font-size: clamp(1rem, 1.25vw, 1.125rem);
}

/* La imagen de los objetivos, encajada con la columna de al lado.
   En vez de fijar un porcentaje —que se descuadraría en cuanto cambiara un
   texto—, la figura ocupa el alto que le sobra a su columna y deja que la
   proporción calcule su ancho. Así las dos columnas terminan siempre a la
   misma altura y la foto nunca se deforma.
   Va a partir de 941px porque por debajo la rejilla se apila y no hay
   ninguna columna con la que encajar. */
@media (min-width: 941px) {
	.arls-imbe {
		align-items: stretch;
	}

	.arls-imbe__col {
		display: flex;
		flex-direction: column;
	}

	.arls-imbe__media--encaja {
		flex: 1 1 auto;
		min-height: 0;
		width: 100%;
		/* El hueco manda sobre la proporción elegida: rellenando alto y ancho la
		   imagen es lo más grande posible y las columnas terminan a la vez. La
		   foto se recorta centrada, nunca se deforma. Conservar la proporción
		   aquí obligaba a elegir entre una imagen estrecha o una que se saliera
		   de la columna. */
		aspect-ratio: auto;
	}
}

/* Las condiciones de la encuesta, ya junto al QR: centradas bajo las
   instituciones y en dos columnas iguales, para que no queden colgando en una
   fila suelta de anchos distintos. */
.arls-chips--aside {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	margin-top: var(--sp-3);
}

.arls-chips--aside .arls-chip {
	justify-content: center;
	padding-inline: 0.75rem;
	font-size: 0.8rem;
	text-align: center;
}

@media (max-width: 560px) {
	.arls-chips--aside {
		grid-template-columns: 1fr;
	}
}

/* La nota del cronograma es una frase corta que cierra la sección, no una
   lista de fuentes: centrada acompaña al titular en vez de quedar colgando a
   la izquierda. Acotado a este bloque, porque la misma clase la usan las
   fuentes estadísticas de El desafío, que sí se leen mejor alineadas. */
.arls-block--cronograma .arls-source {
	margin-inline: auto;
	text-align: center;
}

/* Columna de redes: cada marca con su nombre y sus iconos debajo. El nombre no
   es un encabezado de columna —ya lo hay— sino la etiqueta de cada grupo. */
.arls-foot__marca {
	margin-top: 1.2rem;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--scheme-strong);
}

.arls-foot__marca:first-of-type {
	margin-top: 0;
}

.arls-foot__marca + .arls-foot__social {
	margin-top: 0.6rem;
}

.arls-foot__mas {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.9rem;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--arls-accent-2);
}

.arls-foot__mas .arls-ico {
	width: 15px;
	height: 15px;
}

@media (min-width: 821px) and (max-width: 1080px) {
	/* En tabletas cuatro columnas quedan estrechas: la de redes baja a segunda
	   fila junto a la marca, en vez de estrujar las cuatro. */
	.arls-foot__cols {
		grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.arls-foot__social {
		justify-content: center;
	}
}