/*
 * Sections — hero, countdown, page-specific composition.
 * Loaded after components.css.
 */

/* ====================================================================
   Hero
   ====================================================================
   Replaces the Revolution Slider. The headline is real, selectable,
   indexable text — not baked into a 17 MB PNG.
*/

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(520px, 84svh, 860px);
	/*
	 * El hero medía 1038 px en una ventana de 800: un 130 % de la pantalla,
	 * así que al llegar no se veía ni el indicador ni el inicio de la
	 * sección siguiente. Los recortes de aquí y de los bloques de abajo lo
	 * bajan a poco más de una pantalla.
	 */
	padding-block: calc(var(--header-h) + var(--sp-5)) var(--sp-5);
	overflow: hidden;
	background: var(--c-bg-inverse);
	color: var(--c-white);
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__media img,
.hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	/* A touch of blur keeps the room's atmosphere while dissolving any
	   signage in the shot (past-edition backdrops, sponsor walls) that
	   would otherwise compete with the headline. */
	filter: blur(3px) saturate(1.05);
	/* La escala cumple dos funciones: tapa los bordes blandos que deja el
	   desenfoque y deja margen para que el parallax se desplace sin
	   descubrir franjas vacías. Con 1.14 sobre un hero de ~1020 px sobran
	   unos 71 px por lado, holgado para el recorrido de 50 px. */
	transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.14);
	will-change: transform;
}

/* Sin parallax el desplazamiento no existe, así que basta la escala mínima
   que tapa el desenfoque. */
@media (prefers-reduced-motion: reduce) {
	.hero__media img,
	.hero__media video {
		transform: scale(1.04);
		will-change: auto;
	}
}

/* Three-part scrim.
 *
 * The headline uses three brand colours, and mid-tone colour over a photo is
 * where contrast dies: measured against a bright patch of this image, the
 * blue and teal lines came in at 1.83:1 and 1.87:1, well under the 3:1 that
 * WCAG AA requires for large text. Washing the colours out to near-white
 * would fix the ratio and lose the point, so the scrim does the work instead.
 *
 * The horizontal pass is the important one: the copy is left-aligned, so
 * density is concentrated on the left and released on the right, keeping the
 * room visible where nothing sits on top of it. The vertical pass anchors the
 * bottom, and the last is the brand wash that ties the photo to the palette.
 */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
			to right,
			rgba(16, 45, 74, 0.72) 0%,
			rgba(16, 45, 74, 0.6) 38%,
			rgba(16, 45, 74, 0.18) 72%,
			rgba(16, 45, 74, 0.05) 100%
		),
		linear-gradient(
			to top,
			rgba(16, 45, 74, 0.8) 0%,
			rgba(16, 45, 74, 0.5) 45%,
			rgba(16, 45, 74, 0.25) 100%
		),
		linear-gradient(
			120deg,
			rgba(8, 124, 191, 0.34),
			rgba(7, 151, 152, 0.26)
		);
}

.hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.hero__eyebrow {
	/* inline-block, not inline-flex: the ordinal ("8vo") and the label are
	   one phrase, and flex gap would push them apart as separate items. */
	display: inline-block;
	padding: var(--sp-2) var(--sp-4);
	margin-block-end: var(--sp-5);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--r-full);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(8px);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--c-white);
}

/* Ordinal suffix ("8vo", "7ma"). Without resetting the tracking the
   uppercase letter-spacing tears the ordinal off its numeral. */
.hero__eyebrow sup,
.edition__number sup {
	font-size: 0.62em;
	letter-spacing: 0;
	vertical-align: super;
	margin-inline-start: 0.02em;
}

/* The headline is three sentences from the flyer, each on its own line and
   each in its own colour. Because the line breaks are structural (one line
   per sentence) the type must be sized to the LONGEST sentence rather than
   left to wrap — at --fs-3xl "Más que salud." alone overflowed the viewport. */
/* Logo sobre la imagen: el nombre del congreso se lee desde el propio
   isologo, más grande que en la cabecera. En blanco puro porque sobre una
   fotografía oscura el azul de marca pierde contraste. */
.hero__logo {
	height: clamp(58px, 6.6vw, 108px);
	width: auto;
	margin-block-end: var(--sp-4);
	filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(16, 45, 74, 0.45));
}

.hero__title {
	max-width: 22ch;
	font-size: clamp(2.125rem, 1.35rem + 3.1vw, 4rem);
	font-weight: var(--fw-black);
	line-height: 1.04;
	letter-spacing: var(--tracking-tight);
	color: var(--c-white);
	/* balance would fight the explicit one-sentence-per-line structure */
	text-wrap: nowrap;
}

.hero__title span {
	display: block;
}

/* Three steps of the flyer ramp: white → cyan → teal. */
.hero__title span:nth-child(1) {
	color: var(--c-white);
}

.hero__title span:nth-child(2) {
	color: var(--c-brand-300);
}

.hero__title span:nth-child(3) {
	color: var(--c-teal-400);
}

/* Below ~380px even the shortest sizing can clip the longest sentence,
   so let it wrap rather than overflow the page. */
@media (max-width: 380px) {
	.hero__title {
		text-wrap: wrap;
		font-size: 1.875rem;
	}
}

.hero__lede {
	/* 64ch en vez de 56: a 19 px la entradilla ocupaba tres líneas y
	   empujaba el contador fuera de la pantalla. */
	max-width: 64ch;
	margin-block-start: var(--sp-4);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: rgba(255, 255, 255, 0.86);
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-7);
	margin-block-start: var(--sp-5);
}

/* El contador necesita aire propio: pegado a la fila de iconos se leía como
   parte de ella. */
.hero .countdown {
	margin-block-start: var(--sp-5);
}

.hero__meta-item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.9);
}

.hero__meta-item svg {
	flex: none;
	color: var(--c-brand-300);
}

.hero__meta-item strong {
	display: block;
	color: var(--c-white);
	font-weight: var(--fw-semi);
	font-size: var(--fs-base);
	line-height: 1.3;
}

.hero__meta-item span {
	display: block;
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.6);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-block-start: var(--sp-4);
}

/* Scroll hint */
.hero__scroll {
	position: absolute;
	/* Physical properties on purpose: logical insets resolve against the
	   element's own writing-mode here, and this element is vertical-rl. */
	bottom: var(--sp-5);
	right: var(--gutter);
	display: none;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	writing-mode: vertical-rl;
}

@media (min-width: 1040px) {
	.hero__scroll {
		display: flex;
	}
}

.hero__scroll::after {
	content: "";
	width: 1px;
	height: 48px;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.6),
		transparent
	);
}

/* ====================================================================
   Countdown
   ====================================================================
   Rendered server-side with the correct values so it is never blank
   before JS runs; the script only keeps it ticking.
*/

.countdown {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.countdown__unit {
	min-width: 74px;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(8px);
	text-align: center;
}

.countdown__value {
	display: block;
	font-size: var(--fs-lg);
	font-weight: var(--fw-black);
	line-height: 1.1;
	color: var(--c-white);
	font-variant-numeric: tabular-nums;
}

.countdown__label {
	display: block;
	margin-block-start: var(--sp-1);
	font-size: 0.6875rem;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}

/* Light variant for use outside the hero */
.countdown--light .countdown__unit {
	background: var(--c-brand-50);
	border-color: var(--c-brand-100);
}

.countdown--light .countdown__value {
	color: var(--c-brand-700);
}

.countdown--light .countdown__label {
	color: var(--c-text-muted);
}

/* ====================================================================
   Section headings
   ==================================================================== */

.section-head {
	max-width: var(--container-text);
	margin-block-end: var(--sp-8);
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.section-head--center .eyebrow {
	justify-content: center;
}

.section-head__title {
	font-size: var(--fs-xl);
}

.section-head__text {
	margin-block-start: var(--sp-4);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
}

/* Heading with an action on the right (e.g. "Blog" + "see all") */
.section-head--row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	align-items: flex-end;
	justify-content: space-between;
	max-width: none;
}

/* ====================================================================
   Split — image beside text
   ==================================================================== */

.split {
	display: grid;
	gap: var(--sp-8);
	align-items: center;
}

@media (min-width: 900px) {
	.split {
		grid-template-columns: 1fr 1fr;
		gap: clamp(var(--sp-8), 5vw, var(--sp-11));
	}

	.split--reverse .split__media {
		order: 2;
	}
}

.split__media {
	position: relative;
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	aspect-ratio: 4 / 3;
}

.split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Small floating stat card overlapping the image */
.split__badge {
	position: absolute;
	inset-block-end: var(--sp-5);
	inset-inline-start: var(--sp-5);
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);

	/*
	 * Blanco translúcido para que se intuya la foto detrás. El desenfoque no
	 * es solo estético: promedia el fondo, así que lo que hay bajo la placa no
	 * es un píxel cualquiera de la foto sino la media de la zona —
	 * rgb(136, 114, 113) en la imagen actual. Con eso, al 70 % el fondo
	 * efectivo queda en rgb(219, 212, 212) y la leyenda gris en 4,86:1, por
	 * encima del 4,5:1 que pide WCAG AA (la cifra, 12,45:1).
	 *
	 * Ojo al cambiar la foto de la sección: sobre un fondo casi negro este
	 * mismo 70 % dejaría la leyenda en 3,34:1 y habría que subirlo.
	 */
	background: rgb(255 255 255 / 0.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Sin backdrop-filter no hay promedio: detrás del texto queda el detalle
   crudo de la foto, así que se sube la opacidad para no perder legibilidad. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.split__badge {
		background: rgb(255 255 255 / 0.88);
	}
}

/* El texto de la placa iba en --fs-sm y en gris claro (#8a919b): a ese tamaño
   se quedaba en 3,1:1 sobre el blanco de la tarjeta, por debajo del 4,5:1 que
   pide WCAG AA para texto normal. Se oscurece el gris, que además es el de la
   marca, y así el cuerpo puede bajar sin perder legibilidad. */
.split__badge .stat__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-ink-600);
	margin-block-start: var(--sp-1);
}

/*
 * La placa ocupaba casi un tercio de la fotografía. Se encoge: el número baja
 * de --fs-2xl a --fs-xl, la leyenda a --fs-sm y el relleno se reduce.
 *
 * El gris de la leyenda se queda en --c-ink-600, que sobre el blanco al 70 %
 * de la placa da 4,86:1. Bajar el cuerpo por debajo de 18,66 px no cambia el
 * listón de WCAG —sigue siendo 4,5:1 para texto normal—, así que el contraste
 * aguanta el recorte. Con el gris claro de antes no habría aguantado.
 */
.split__badge {
	padding: var(--sp-3) var(--sp-4);
}

.split__badge .stat__value {
	font-size: var(--fs-xl);
}

/* ====================================================================
   Editions strip (previous congresses)
   ==================================================================== */

.editions {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/*
 * A una tarjeta por fila el 3/4 se traduce en 446px de alto: media pantalla
 * por edición, siete veces seguidas. A dos por fila la proporción vertical
 * sigue funcionando y la tira entera cabe en poco más de una pantalla.
 */
@media (max-width: 560px) {
	.editions {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-3);
	}

	.edition {
		padding: var(--sp-4);
	}

	.edition__number {
		font-size: var(--fs-md);
	}
}

.edition {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 3 / 4;
	padding: var(--sp-5);
	border-radius: var(--r-lg);
	overflow: hidden;
	color: var(--c-white);
	text-decoration: none;
	background: var(--c-bg-inverse);
	isolation: isolate;
}

.edition img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.edition::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(16, 45, 74, 0.88),
		rgba(16, 45, 74, 0.15) 65%
	);
	transition: opacity var(--dur-base) var(--ease-out);
}

.edition:hover img {
	transform: scale(1.06);
}

.edition__number {
	display: block;
	font-size: var(--fs-lg);
	font-weight: var(--fw-black);
	line-height: 1;
	color: var(--c-white);
}

.edition__meta {
	display: block;
	margin-block-start: var(--sp-1);
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.75);
}

/* ====================================================================
   Sectors — "Conectamos sectores. Impulsamos el futuro."
   ====================================================================
   The flyer expresses this as a twelve-segment wheel. Redrawing that wheel
   in HTML would be illegible on a phone and impossible to translate, so
   the same idea is carried by a grid whose accent colours step along the
   flyer's own teal → navy ramp, in the flyer's own order.
*/

.sectors {
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.sector-card {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-text-strong);
	transition: transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}

.sector-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}

.sector-card::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	margin-block-start: 0.45em;
	border-radius: var(--r-full);
	background: var(--sector-tint, var(--c-brand-500));
}

/* Twelve steps of the flyer's ramp, in the wheel's clockwise order. */
.sectors > :nth-child(1)  { --sector-tint: #079798; }
.sectors > :nth-child(2)  { --sector-tint: #0a8f96; }
.sectors > :nth-child(3)  { --sector-tint: #0d889a; }
.sectors > :nth-child(4)  { --sector-tint: #10829e; }
.sectors > :nth-child(5)  { --sector-tint: #0c7ca6; }
.sectors > :nth-child(6)  { --sector-tint: #0a7cb4; }
.sectors > :nth-child(7)  { --sector-tint: #087cbf; }
.sectors > :nth-child(8)  { --sector-tint: #0f70ab; }
.sectors > :nth-child(9)  { --sector-tint: #14669c; }
.sectors > :nth-child(10) { --sector-tint: #185d92; }
.sectors > :nth-child(11) { --sector-tint: #1a588c; }
.sectors > :nth-child(12) { --sector-tint: #1c5487; }

/* ---- Three pillars (INNOVACIÓN | NETWORKING | INVERSIÓN) ---- */

.pillars {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--sp-4) var(--sp-6);
	margin-block-start: var(--sp-8);
	padding-block-start: var(--sp-6);
	border-block-start: 1px solid var(--c-border);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* nth-of-type, not nth-child: the <i> dividers sit between the spans, so
   nth-child would count them and shift every colour by one. */
.pillars span:nth-of-type(1) { color: var(--c-brand-500); }
.pillars span:nth-of-type(2) { color: var(--c-teal-500); }
.pillars span:nth-of-type(3) { color: var(--c-brand-500); }

.pillars i {
	width: 1px;
	height: 1.2em;
	background: var(--c-border-strong);
}

/* ====================================================================
   CTA band
   ==================================================================== */

.cta-band {
	position: relative;
	padding-block: var(--section-y);
	/* The flyer's wheel ramp, reversed so the deep navy anchors the left
	   edge and the teal lifts the right. */
	background: linear-gradient(
		135deg,
		var(--c-navy-700),
		var(--c-brand-500) 55%,
		var(--c-teal-500)
	);
	color: var(--c-white);
	overflow: hidden;
	isolation: isolate;
}

/* Soft light bloom, keeps the flat gradient from looking like a swatch */
.cta-band::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: -40%;
	inset-inline-end: -10%;
	width: 60vw;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.18),
		transparent 68%
	);
}

.cta-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
}

.cta-band__title {
	max-width: 22ch;
	font-size: var(--fs-xl);
	color: var(--c-white);
}

.cta-band__text {
	max-width: 46ch;
	margin-block-start: var(--sp-3);
	color: rgba(255, 255, 255, 0.85);
}

/* ====================================================================
   Page header (inner pages)
   ==================================================================== */

.page-hero {
	position: relative;
	padding-block: calc(var(--header-h) + var(--sp-9)) var(--sp-9);
	background: var(--c-bg-inverse);
	color: var(--c-white);
	overflow: hidden;
	isolation: isolate;
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		120deg,
		rgba(8, 124, 191, 0.35),
		rgba(7, 151, 152, 0.22)
	);
}

.page-hero__title {
	font-size: var(--fs-2xl);
	color: var(--c-white);
}

.page-hero__lede {
	max-width: 56ch;
	margin-block-start: var(--sp-4);
	color: rgba(255, 255, 255, 0.82);
}

.breadcrumbs {
	margin-block-end: var(--sp-4);
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.6);
}

.breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--c-white);
}

/* ====================================================================
   "Sobre el congreso" (template-about.php)
   ==================================================================== */

/* Cabecera con foto. Sobre el degradado plano del .page-hero normal el
   titular ya tenía contraste de sobra; con foto detrás hace falta un velo
   propio, así que la imagen entra por debajo del degradado existente y se
   le suma una capa oscura fija. */
.page-hero--media {
	padding-block: calc(var(--header-h) + var(--sp-10)) var(--sp-10);
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero--media::before {
	background:
		linear-gradient(
			to right,
			rgba(9, 26, 43, 0.92) 0%,
			rgba(9, 26, 43, 0.78) 45%,
			rgba(9, 26, 43, 0.55) 100%
		),
		linear-gradient(120deg, rgba(8, 124, 191, 0.3), rgba(7, 151, 152, 0.2));
}

/* ---- Lista de cifras con etiqueta (mercado global) ---- */

.figure-list {
	display: grid;
	gap: var(--sp-4);
	margin-block-start: var(--sp-6);
	padding: 0;
	list-style: none;
}

.figure-list__item {
	display: grid;
	gap: var(--sp-1);
	padding-inline-start: var(--sp-4);
	border-inline-start: 3px solid var(--c-brand-200);
}

.figure-list__value {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: var(--fw-black);
	line-height: 1.15;
	color: var(--c-text-strong);
}

.figure-list__label {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* ---- Dato destacado en una línea ---- */

.highlight-line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-3);
	margin-block-start: var(--sp-6);
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--r-md);
	background: var(--c-teal-100);
}

.highlight-line__value {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-black);
	line-height: 1;
	color: var(--c-teal-700);
}

.highlight-line__text {
	flex: 1 1 14ch;
	font-size: var(--fs-sm);
	color: var(--c-ink-600);
}

/* ---- Cita de fuente ---- */

.source-note {
	margin-block-start: var(--sp-5);
	font-size: var(--fs-xs);
	line-height: 1.6;
	color: var(--c-text-muted);
}

.source-note--on-dark {
	margin-block-start: var(--sp-8);
	text-align: center;
}

/* ---- Métrica con icono (República Dominicana) ---- */

.metric {
	display: grid;
	justify-items: center;
	gap: var(--sp-2);
	padding: var(--sp-6) var(--sp-4);
	text-align: center;
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, 0.04);
}

.metric__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-block-end: var(--sp-1);
	border-radius: var(--r-full);
	background: rgba(8, 124, 191, 0.28);
	color: var(--c-brand-300);
}

.metric__value {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-black);
	line-height: 1.1;
	letter-spacing: var(--tracking-tight);
	color: var(--c-white);
}

.metric__label {
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
}

/* Mismo criterio que las cifras de la portada: a una por fila la banda se
   estiraba cuatro pantallas. Dos por fila, con la cifra un punto más
   pequeña para que quepa sin partirse en sílabas. */
@media (max-width: 560px) {
	.section--inverse .auto-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-3);
	}

	.metric {
		padding: var(--sp-5) var(--sp-3);
	}

	.metric__value {
		font-size: var(--fs-md);
	}

	.metric__label {
		font-size: var(--fs-xs);
	}
}

/* ---- Tarjeta de impacto, más apretada que .feature ---- */

.feature--compact {
	padding: var(--sp-5);
	gap: var(--sp-2);
}

.feature--compact .feature__icon {
	width: 44px;
	height: 44px;
	margin-bottom: 0;
}

/* ---- Ejes temáticos ---- */

.topics {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

@media (min-width: 800px) {
	.topics {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-3) var(--sp-5);
	}
}

.topic {
	display: flex;
	align-items: baseline;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--r-md);
	background: var(--c-bg-subtle);
	transition: background var(--dur-base) var(--ease-out);
}

.topic:hover {
	background: var(--c-brand-50);
}

.topic__number {
	flex: none;
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: var(--fw-black);
	line-height: 1;
	color: var(--c-brand-300);
	font-variant-numeric: tabular-nums;
}

.topic__text {
	font-size: var(--fs-base);
	color: var(--c-text-strong);
}

/* ---- Sectores como etiquetas ---- */

.chips {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.chip {
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-text-strong);
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--r-full);
}

/* ====================================================================
   Modalidades de patrocinio (template-sponsorship.php)
   ==================================================================== */

/*
 * La comparativa necesita todo el ancho disponible: son cinco columnas y
 * veintiuna filas. Dentro de .container--text (68ch) cada beneficio se partía
 * en cuatro líneas. Aquí va en .container--wide y, cuando ni así cabe, la
 * tabla desplaza en horizontal dentro de su propia caja — nunca la página.
 */
.plan-table-wrap {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	background: var(--c-white);
}

.plan-table {
	width: 100%;
	min-width: 820px;
	border-collapse: collapse;
	/* Un escalón más que antes (era --fs-sm): las cantidades de cada
	   celda —2, 4, 6, 8, «2 × 2 m»— son el dato que se compara, y a 15 px
	   se leían como letra pequeña. */
	font-size: var(--fs-base);
	text-align: start;
}

.plan-table th,
.plan-table td {
	padding: var(--sp-3) var(--sp-4);
	border-block-end: 1px solid var(--c-border);
	vertical-align: middle;
}

/* La primera columna se queda fija al desplazar: sin ella, en cuanto la tabla
   se mueve un poco ya no se sabe qué beneficio se está mirando. */
.plan-table th[scope="row"],
.plan-table thead th:first-child {
	position: sticky;
	inset-inline-start: 0;
	z-index: 1;
	min-width: 260px;
	background: var(--c-white);
	font-weight: var(--fw-medium);
	text-align: start;
	color: var(--c-text-strong);
}

.plan-table thead th {
	position: sticky;
	inset-block-start: 0;
	z-index: 2;
	/* Fondo propio y línea gruesa: la fila de categorías es la clave de
	   lectura de la tabla y tiene que separarse del cuerpo. */
	background: var(--c-bg-subtle);
	border-block-end: 3px solid var(--c-border-strong);
	padding-block: var(--sp-4);
}

/* La esquina superior izquierda queda por encima de las dos capas fijas
   (columna y cabecera) y comparte el fondo de la fila de categorías. */
.plan-table thead th:first-child {
	z-index: 3;
	background: var(--c-bg-subtle);
	font-size: var(--fs-md);
	font-weight: var(--fw-black);
	color: var(--c-text-strong);
}

.plan-th {
	text-align: center;
	min-width: 132px;
}

.plan-th__name {
	display: block;
	font-size: var(--fs-lg);
	font-weight: var(--fw-black);
	letter-spacing: var(--tracking-tight);
	color: var(--c-text-strong);
}


/* Un color por categoría, sin escribir "Diamante" en cada celda. */
.plan-th--plata .plan-th__name { color: #7b8494; }
.plan-th--oro .plan-th__name { color: #a9791d; }
.plan-th--platinum .plan-th__name { color: var(--c-teal-600); }
.plan-th--diamante .plan-th__name { color: var(--c-brand-600); }

.plan-table td {
	text-align: center;
}

/*
 * La celda del grupo abarca las cinco columnas, y una celda con colspan no
 * puede quedarse fija: al desplazar la tabla el rótulo se iba por la
 * izquierda y la fila quedaba como una banda gris vacía. Lo que se fija es
 * el span de dentro.
 */
.plan-group th {
	padding: 0;
	background: var(--c-bg-subtle);
	text-align: start;
	position: static;
}

.plan-group__label {
	position: sticky;
	inset-inline-start: 0;
	display: inline-block;
	padding: var(--sp-4) var(--sp-4) var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--c-brand-600);
}

.plan-table tbody tr:hover td,
.plan-table tbody tr:hover th[scope="row"] {
	background: var(--c-brand-50);
}

/*
 * En móvil la primera columna se comía la pantalla.
 *
 * Con 260 px de columna de beneficios sobre un ancho útil de ~335 px no
 * quedaba sitio ni para la primera categoría: se veía una lista de beneficios
 * y ni un solo dato, así que la tabla parecía rota y había que girar el
 * teléfono para entender que había algo más.
 *
 * Estrechando la columna a 140 px entra "Plata" entera. Los beneficios largos
 * pasan a ocupar tres o cuatro líneas, que es un precio barato: ver una
 * categoría es lo que revela que la tabla se desplaza hacia la derecha, y a
 * partir de ahí el gesto es evidente.
 */
@media (max-width: 640px) {
	.plan-table {
		font-size: var(--fs-sm);
		/*
		 * Bajar el mínimo de la columna no bastaba: con la tabla forzada a
		 * 820 px, el sobrante se reparte entre las columnas y la primera se
		 * quedaba igual de ancha. Es el total el que manda.
		 */
		min-width: 600px;
	}

	.plan-table th,
	.plan-table td {
		padding: var(--sp-3) var(--sp-2);
	}

	.plan-table th[scope="row"],
	.plan-table thead th:first-child {
		min-width: 140px;
		/* Las palabras largas —"internacionales", "acreditaciones"— no caben
		   en 140 px y desbordarían la celda fija. */
		hyphens: auto;
		overflow-wrap: break-word;
	}

	.plan-th {
		min-width: 96px;
	}

	.plan-th__name {
		font-size: var(--fs-base);
	}

	.plan-table thead th:first-child {
		font-size: var(--fs-sm);
	}
}

.plan-yes {
	display: inline-grid;
	place-items: center;
	color: var(--c-teal-600);
}

/* La cabecera de "Beneficio" no compite con los nombres de categoría, pero
   sí marca de qué va la primera columna. */
/* El guion va en gris de texto secundario, no en un gris cualquiera: tiene
   que leerse como "no incluido", no desaparecer. */
.plan-no {
	color: var(--c-ink-400);
	font-size: var(--fs-lg);
	line-height: 1;
}

.plan-text {
	display: inline-block;
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--c-text);
}



.table-hint {
	margin-block-start: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
	text-align: center;
}

/* Cuando la tabla cabe entera no hay nada que deslizar. */
@media (min-width: 900px) {
	.table-hint {
		display: none;
	}
}



/* ====================================================================
   Registro (template-register.php)
   ==================================================================== */

/* La llamada va sola en su sección, centrada y sobre el degradado de marca:
   es lo único que la página quiere que ocurra. */
.register-cta__inner {
	display: grid;
	justify-items: center;
	gap: var(--sp-5);
	padding: var(--sp-8) var(--sp-6);
	text-align: center;
	border-radius: var(--r-xl);
	background: var(--c-bg-subtle);
	border: 1px solid var(--c-border);
}

.register-cta__title {
	font-size: var(--fs-xl);
	font-weight: var(--fw-black);
	line-height: 1.1;
	letter-spacing: var(--tracking-tight);
	color: var(--c-text-strong);
}

/* La segunda línea es la frase de apoyo, no otro titular. */
.register-cta__title span {
	display: block;
	margin-block-start: var(--sp-2);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	letter-spacing: 0;
	color: var(--c-text);
}

.register-cta__note {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

/* ---- Fila de datos del evento ---- */

.event-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-5) var(--sp-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.event-fact {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.event-fact__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--r-full);
	background: var(--c-brand-100);
	color: var(--c-brand-600);
}

.event-fact strong {
	display: block;
	font-size: var(--fs-base);
	font-weight: var(--fw-semi);
	color: var(--c-text-strong);
}

.event-fact__note {
	display: block;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* En móvil cada dato ocupa su propia fila. Centrados uno a uno los iconos
   quedaban en escalera, así que se apila el bloque y se centra entero. */
@media (max-width: 620px) {
	.event-facts {
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
		margin-inline: auto;
		gap: var(--sp-4);
	}
}

/* ---- Precio ---- */

.price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-3);
	margin-block-start: var(--sp-5);
}

.price__value {
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	line-height: 1;
	letter-spacing: var(--tracking-tight);
	color: var(--c-brand-600);
}

.price__note {
	font-size: var(--fs-md);
	color: var(--c-text-muted);
}

/* ---- Lista con palomita ---- */

.check-list {
	display: grid;
	gap: var(--sp-3);
	margin-block-start: var(--sp-6);
	padding: 0;
	list-style: none;
}

.check-list__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	font-size: var(--fs-base);
}

.check-list__icon {
	flex: none;
	margin-block-start: 0.15em;
	color: var(--c-teal-600);
}

/* ---- Tarjeta de descuento por grupo ---- */

.discount-card {
	display: grid;
	align-content: start;
	gap: var(--sp-4);
	padding: var(--sp-7) var(--sp-6);
	border-radius: var(--r-lg);
	background: var(--c-white);
	border: 1px solid var(--c-border);
	box-shadow: var(--shadow-lg);
}

.discount-card__title {
	font-size: var(--fs-lg);
	font-weight: var(--fw-black);
	letter-spacing: var(--tracking-tight);
}

.discount-card__text {
	font-size: var(--fs-sm);
	color: var(--c-ink-600);
}

.discount-list {
	display: grid;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.discount-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-block: var(--sp-3);
	border-block-end: 1px solid var(--c-border);
}

.discount-list li:last-child {
	border-block-end: 0;
}

.discount-list__label {
	font-size: var(--fs-sm);
}

.discount-list__value {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-black);
	line-height: 1;
	color: var(--c-teal-600);
}

.discount-card__legal {
	font-size: var(--fs-xs);
	text-align: center;
}

/* ====================================================================
   Agenda (template-agenda.php)
   ==================================================================== */

/*
 * Los dos días, uno detrás del otro.
 *
 * Estuvieron en paralelo mientras la agenda de prueba tenía once actividades
 * por día. El programa real no es simétrico: el día 1 es sólo el cóctel y el
 * día 2 son quince sesiones, así que en dos columnas quedaba una franja de
 * 209 px al lado de otra de 1.826 y más de metro y medio de blanco.
 *
 * En una sola columna se lee como lo que es —una noche y luego una jornada— y
 * de paso el ancho de lectura se puede acotar: a todo lo ancho del contenedor
 * los títulos de panel llegaban a pasar de mil píxeles por línea.
 */
.agenda-grid {
	display: grid;
	gap: var(--sp-8);
	max-width: 820px;
	margin-inline: auto;
}

.agenda-col__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-3);
	padding-block-end: var(--sp-4);
	margin-block-end: var(--sp-5);
	border-block-end: 2px solid var(--c-border-strong);
}

.agenda-col__badge {
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--r-full);
	background: var(--c-brand-500);
	color: var(--c-white);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.agenda-col__title {
	font-size: var(--fs-lg);
	font-weight: var(--fw-black);
	letter-spacing: var(--tracking-tight);
}

/* ---- Línea de tiempo ---- */

.timeline {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.timeline__item {
	position: relative;
	padding-inline-start: var(--sp-6);
}

/* El hilo y su punto. El hilo se corta en el último elemento para que no
   sobresalga por debajo de la agenda. */
.timeline__item::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 5px;
	width: 2px;
	background: var(--c-border);
}

.timeline__item:last-child::before {
	inset-block-end: auto;
	height: 22px;
}

.timeline__item::after {
	content: "";
	position: absolute;
	inset-block-start: 18px;
	inset-inline-start: 0;
	width: 12px;
	height: 12px;
	border-radius: var(--r-full);
	background: var(--c-white);
	border: 2px solid var(--c-brand-400);
}

/* Registro, pausas y almuerzo son logística: mismo hilo, punto apagado. */
.timeline__item--logistics::after {
	border-color: var(--c-ink-300, #b9bfc7);
}

/* ---- Sesión ---- */

.session {
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	/* Tinte de marca en todas las actividades, desplegables o no: el blanco
	   sobre blanco dejaba la columna plana. */
	background: var(--c-bg-subtle);
	transition: border-color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.session[open] {
	border-color: var(--c-brand-200);
	box-shadow: var(--shadow-lg);
}

/*
 * Misma tarjeta que las desplegables: fondo blanco y borde sólido. Antes
 * llevaban fondo azul tenue y borde punteado para marcar "todavía sin
 * participantes", pero eso es un estado del contenido, no algo que el
 * público deba leer — y con el punteado a 1 px sobre el tinte, actividades
 * como "Palabras de apertura" parecían no tener recuadro.
 */
.session--plain {
	display: grid;
	gap: var(--sp-2);
	padding: var(--sp-4) var(--sp-5);
}

.session__head {
	display: grid;
	gap: var(--sp-2);
	padding: var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-5);
	cursor: pointer;
	list-style: none;
}

/* Safari sigue pintando el triángulo del summary sin esto. */
.session__head::-webkit-details-marker {
	display: none;
}

.session__head:hover .session__title {
	color: var(--c-brand-600);
}

.session__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
}

.session__time {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--c-text-strong);
	font-variant-numeric: tabular-nums;
}

.session__kind {
	padding: 2px var(--sp-2);
	border-radius: var(--r-sm);
	background: var(--c-brand-50);
	color: var(--c-brand-700);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

/* El gris claro sobre el azul tenue daba 2,61:1, por debajo del 4,5:1 que
   pide WCAG AA para texto pequeño. Con el gris de cuerpo sube a 5,7:1 y la
   etiqueta sigue leyéndose como secundaria frente a las de color sólido. */
.timeline__item--logistics .session__kind {
	background: var(--c-bg-muted);
	color: var(--c-ink-600);
}

.session__title {
	font-size: var(--fs-md);
	font-weight: var(--fw-semi);
	line-height: 1.3;
	color: var(--c-text-strong);
	transition: color var(--dur-base) var(--ease-out);
}

.session--plain .session__title {
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	color: var(--c-text);
}

.session__who,
.session__room {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.session__room {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
}

/* Flecha de despliegue, en la esquina superior derecha del cabezal. */
.session__chevron {
	position: absolute;
	inset-block-start: var(--sp-5);
	inset-inline-end: var(--sp-4);
	width: 9px;
	height: 9px;
	border-inline-end: 2px solid var(--c-brand-500);
	border-block-end: 2px solid var(--c-brand-500);
	transform: rotate(45deg);
	transition: transform var(--dur-base) var(--ease-out);
}

.session__head {
	position: relative;
}

.session[open] .session__chevron {
	transform: rotate(-135deg);
}

.session__body {
	padding: 0 var(--sp-5) var(--sp-5);
	border-block-start: 1px solid var(--c-border);
	margin-block-start: var(--sp-1);
	padding-block-start: var(--sp-5);
}

.session__desc {
	font-size: var(--fs-sm);
	color: var(--c-text);
	margin-block-end: var(--sp-5);
}

/* ---- Fichas de personas ---- */

.person-list {
	display: grid;
	gap: var(--sp-4);
}

.person {
	display: grid;
	grid-template-columns: 68px 1fr;
	gap: var(--sp-4);
	align-items: start;
}

/* El moderador va primero y separado, para que no se confunda con los
   panelistas. */
.person--lead {
	padding-block-end: var(--sp-4);
	border-block-end: 1px solid var(--c-border);
}

.person__photo {
	width: 68px;
	height: 68px;
	border-radius: var(--r-full);
	overflow: hidden;
	background: var(--c-bg-muted);
	display: grid;
	place-items: center;
}

.person__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.person__placeholder {
	color: var(--c-ink-400, #8a919b);
}

.person--lead .person__photo {
	box-shadow: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-brand-400);
}

.person__role-tag {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--c-brand-600);
	margin-block-end: var(--sp-1);
}

.person__name {
	font-size: var(--fs-base);
	font-weight: var(--fw-semi);
	line-height: 1.3;
	color: var(--c-text-strong);
}

.person__role {
	margin-block-start: 2px;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.person__role strong {
	color: var(--c-text);
	font-weight: var(--fw-semi);
}

.person__bio {
	margin-block-start: var(--sp-2);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--c-text);
}

/* ====================================================================
   Contacto (template-contact.php)
   ==================================================================== */

.contact-grid {
	display: grid;
	gap: var(--sp-7);
}

/* El formulario pesa más que los datos: dos tercios contra uno. */
@media (min-width: 900px) {
	.contact-grid {
		grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
		gap: var(--sp-8);
		align-items: start;
	}
}

.contact-form .section-head__title {
	margin-block-end: var(--sp-6);
}

.contact-side {
	display: grid;
	gap: var(--sp-4);
}

/*
 * Tarjetas oscuras: es lo que permite usar el logotipo blanco de AF, que es
 * el único que existe en alta resolución. De paso separan los datos de
 * contacto del formulario sin necesidad de una línea divisoria.
 */
.contact-card {
	display: grid;
	justify-items: center;
	gap: var(--sp-4);
	padding: var(--sp-6) var(--sp-5);
	border-radius: var(--r-lg);
	background: var(--c-bg-inverse);
	color: rgba(255, 255, 255, 0.78);
	text-align: center;
}

.contact-card a {
	color: inherit;
	text-decoration: none;
}

.contact-card a:hover {
	color: var(--c-white);
	text-decoration: underline;
}

/*
 * El de la ADTS es más cuadrado que el de AF, así que a igual altura se ve
 * más pequeño; se le da el mismo 15 % de más que en el pie. Se distingue por
 * no llevar el modificador --white, que es justo el del logotipo alargado.
 */
.contact-card__logo {
	width: auto;
	height: clamp(68px, 5.8vw, 86px);
	filter: brightness(0) invert(1);
}

.contact-card__logo--white {
	height: clamp(58px, 5vw, 74px);
	filter: none;
}

.contact-card__name {
	font-size: var(--fs-md);
	font-weight: var(--fw-semi);
	color: var(--c-white);
}

.contact-lines {
	font-size: var(--fs-sm);
	width: 100%;
}

/* ---- Indicador "Descubre" de las cabeceras interiores ---- */

/*
 * Centrado y horizontal, al contrario que el de la portada, que va en
 * vertical a la derecha. Y visible también en móvil: la duda de si la página
 * sigue hacia abajo es peor en pantalla pequeña, no menor.
 */
.page-hero__scroll {
	position: absolute;
	inset-block-end: var(--sp-5);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.4rem var(--sp-4);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--r-full);
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	/* Más discreto que el resto de botones: es una pista, no una acción. Va
	   un escalón por debajo del texto pequeño del tema. */
	font-size: 0.75rem;
	font-weight: var(--fw-semi);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--c-white);
	text-decoration: none;
	transition: background-color var(--dur-base) var(--ease-out);
}

.page-hero__scroll:hover {
	background: rgba(255, 255, 255, 0.22);
	color: var(--c-white);
}

.page-hero__scroll-arrow {
	width: 7px;
	height: 7px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	animation: congreso-bob 1.9s var(--ease-out) infinite;
}

/* El movimiento es el que comunica "hay más abajo"; el rótulo solo lo
   confirma. Aun así se apaga cuando el sistema pide menos animación. */
@keyframes congreso-bob {
	0%, 60%, 100% { transform: rotate(45deg) translate(-2px, -2px); }
	30% { transform: rotate(45deg) translate(2px, 2px); }
}

@media (prefers-reduced-motion: reduce) {
	.page-hero__scroll-arrow {
		animation: none;
	}
}

/* La cabecera necesita sitio para el indicador. */
.page-hero--media {
	padding-block-end: var(--sp-10);
}

/* ---- Coctel inaugural ---- */

/*
 * Cierra el primer día y es el momento social del congreso, así que se sale
 * del blanco del resto de la columna: fondo en degradado de marca, texto en
 * blanco y punto propio en el hilo. No es un tipo más de sesión.
 */
.timeline__item--coctel::after {
	background: var(--c-teal-400);
	border-color: var(--c-teal-400);
	box-shadow: 0 0 0 4px rgba(42, 176, 176, 0.22);
}

.timeline__item--coctel {
	/* Sin filete: la tarjeta entera va en color. */
	--tipo: transparent;
}

.timeline__item--coctel .session {
	border-color: transparent;
	background: linear-gradient(120deg, var(--c-navy-700, #1c5487), var(--c-teal-600));
	color: rgba(255, 255, 255, 0.82);
}

.timeline__item--coctel .session__title,
.timeline__item--coctel .session__time {
	color: var(--c-white);
}

.timeline__item--coctel .session__who,
.timeline__item--coctel .session__room {
	color: rgba(255, 255, 255, 0.75);
}

/* Etiqueta invertida, no un blanco translúcido: sobre el extremo verde del
   degradado el blanco al 18 % dejaba el texto en 3,62:1, por debajo de AA.
   Con la pastilla blanca y el texto en navy son 7,9:1 en todo el recorrido. */
.timeline__item--coctel .session__kind {
	background: var(--c-white);
	color: var(--c-navy-700, #1c5487);
}

.timeline__item--coctel .session__chevron {
	border-color: var(--c-white);
}

.timeline__item--coctel .session__head:hover .session__title {
	color: rgba(255, 255, 255, 0.85);
}

/* Al desplegarlo, la ficha vuelve a fondo claro: una reseña sobre degradado
   se lee mal y el contraste no llegaría a AA. */
.timeline__item--coctel .session__body {
	border-block-start-color: rgba(255, 255, 255, 0.25);
	margin-inline: 1px;
	margin-block-end: 1px;
	padding-block-start: var(--sp-5);
	border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
	background: var(--c-white);
	color: var(--c-text);
}

/* ---- Conferencias y paneles ---- */

/*
 * Los dos tipos que llevan personas se distinguen por color y por la forma
 * del punto en el hilo, no por el tamaño: el coctel es el que manda en la
 * columna y estos no deben competir con él.
 *
 *   Conferencia → azul de marca, punto lleno   (una voz)
 *   Panel       → verde azulado, punto en aro  (varias voces)
 *
 * Dos variables por tipo porque el color que se lee bien como filete no es
 * el que da contraste suficiente detrás de texto blanco: el tono claro va en
 * el borde y el punto, el oscuro en la etiqueta.
 */
.timeline__item--conferencia {
	--tipo: var(--c-brand-500);
	--tipo-fuerte: var(--c-brand-600);
}

.timeline__item--panel {
	--tipo: var(--c-teal-500);
	--tipo-fuerte: var(--c-teal-600);
}

/*
 * Cada actividad lleva su filete. Antes sólo lo tenían conferencia y panel,
 * y al lado de ellas las demás —"Palabras de apertura", el registro, las
 * pausas— parecían no tener recuadro. El color cambia, el filete no.
 */
.timeline__item--apertura,
.timeline__item--cierre {
	--tipo: var(--c-navy-700, #1c5487);
	--tipo-fuerte: var(--c-navy-700, #1c5487);
}

.timeline__item--logistics {
	--tipo: var(--c-ink-300);
}

.timeline__item .session {
	border-inline-start: 3px solid var(--tipo, var(--c-border));
}

.timeline__item .session[open] {
	border-color: var(--c-border);
	border-inline-start-color: var(--tipo);
}

/* Etiqueta en sólido: es lo que identifica el tipo de un vistazo al recorrer
   la columna. Blanco sobre el tono oscuro da 6,1:1 en azul y 5,0:1 en teal. */
.timeline__item--conferencia .session__kind,
.timeline__item--panel .session__kind,
.timeline__item--apertura .session__kind,
.timeline__item--cierre .session__kind {
	background: var(--tipo-fuerte);
	color: var(--c-white);
}

/* Punto lleno: una sola persona expone. */
.timeline__item--conferencia::after,
.timeline__item--apertura::after,
.timeline__item--cierre::after {
	background: var(--tipo);
	border-color: var(--tipo);
}

/* Aro grueso: varias personas conversan. */
.timeline__item--panel::after {
	border-width: 3px;
	border-color: var(--tipo);
	background: var(--c-white);
}

.timeline__item--conferencia .session__chevron,
.timeline__item--panel .session__chevron {
	border-color: var(--tipo-fuerte);
}

/*
 * En móvil los tres datos del evento se apilan (162 px) y los dos botones
 * también (129 px), así que el hero se iba a 879 px sobre una pantalla de
 * 812. Aquí se aprieta lo que no cuesta legibilidad para que la sección
 * siguiente asome igual que en escritorio.
 */
@media (max-width: 700px) {
	.hero {
		padding-block: calc(var(--header-h) + var(--sp-4)) var(--sp-4);
	}

	.hero__lede {
		margin-block-start: var(--sp-3);
	}

	.hero__meta {
		gap: var(--sp-3) var(--sp-6);
		margin-block-start: var(--sp-4);
	}

	.hero .countdown {
		margin-block-start: var(--sp-4);
	}

	.hero__actions {
		margin-block-start: var(--sp-4);
	}

	/* Los dos botones en fila: apilados sumaban 129 px de los 879. */
	.hero__actions .btn {
		flex: 1 1 auto;
		padding-inline: var(--sp-4);
	}
}

/* Aviso de la tarjeta de descuentos: es una condición, no un adorno, así que
   va bajo la lista y por encima del botón, donde se lee antes de decidir. */
.discount-card__note {
	font-size: var(--fs-xs);
	line-height: 1.5;
	/* Gris de cuerpo, no el gris apagado: es una condición de la tarifa y
	   a 14 px el apagado daba 3,18:1, por debajo del 4,5:1 de WCAG AA. */
	color: var(--c-ink-600);
	margin-block-start: calc(var(--sp-2) * -1);
}