/*
 * Components — buttons, header, nav, cards, sponsor wall, footer.
 * Loaded after base.css.
 */

/* ====================================================================
   Buttons
   ==================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 0.875em 1.75em;
	border: 1px solid transparent;
	border-radius: var(--r-full);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out),
		transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.btn:active {
	transform: translateY(1px);
}

.btn--primary {
	background: var(--c-brand-500);
	color: var(--c-text-on-brand);
	box-shadow: 0 6px 18px rgba(8, 124, 191, 0.32);
}

.btn--primary:hover {
	background: var(--c-brand-600);
	color: var(--c-white);
	box-shadow: 0 10px 26px rgba(8, 124, 191, 0.40);
}

.btn--secondary {
	background: transparent;
	color: var(--c-brand-600);
	border-color: var(--c-brand-200);
}

.btn--secondary:hover {
	background: var(--c-brand-50);
	border-color: var(--c-brand-400);
	color: var(--c-brand-700);
}

.btn--ghost {
	background: transparent;
	color: var(--c-text-strong);
	border-color: var(--c-border-strong);
}

.btn--ghost:hover {
	background: var(--c-bg-muted);
	color: var(--c-text-strong);
}

/* On dark backgrounds */
.btn--on-dark {
	background: rgba(255, 255, 255, 0.1);
	color: var(--c-white);
	border-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(8px);
}

.btn--on-dark:hover {
	background: var(--c-white);
	color: var(--c-brand-700);
	border-color: var(--c-white);
}

/* On the CTA band's gradient the primary blue would sink into the background,
   so the main action inverts to white. */
.btn--on-gradient {
	background: var(--c-white);
	color: var(--c-brand-700);
	border-color: var(--c-white);
}

.btn--on-gradient:hover {
	background: var(--c-brand-50);
	color: var(--c-brand-800);
}

.btn--lg {
	padding: 1.05em 2.25em;
	font-size: var(--fs-base);
}

.btn--sm {
	padding: 0.7em 1.25em;
	font-size: var(--fs-xs);
}

.btn--block {
	width: 100%;
}

/* Arrow that slides on hover */
.btn__arrow {
	transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .btn__arrow {
	transform: translateX(3px);
}

/* Plain text link with an arrow — for "read more" style calls */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: var(--fw-semi);
	font-size: var(--fs-sm);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-brand-600);
}

.link-arrow svg {
	transition: transform var(--dur-base) var(--ease-out);
}

.link-arrow:hover svg {
	transform: translateX(4px);
}

/* ====================================================================
   Site header
   ==================================================================== */

.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--z-header);
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: transparent;
	transition: height var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

/* Solid once scrolled, or on any page without a full-bleed hero */
.site-header.is-stuck,
.site-header--solid {
	height: var(--header-h-sticky);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
	box-shadow: 0 1px 0 rgba(16, 45, 74, 0.08), var(--shadow-sm);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-header__brand {
	display: flex;
	align-items: center;
	flex: none;
	margin-inline-end: auto;
	text-decoration: none;
}

/* The logo is a wide lockup (icons above two lines of type), so it needs
   real height to stay legible — a 40px cap renders the wordmark unreadable. */
.site-header__logo {
	width: auto;
	height: clamp(46px, 4.4vw, 64px);
	transition: height var(--dur-base) var(--ease-out),
		filter var(--dur-base) var(--ease-out);
}

.site-header.is-stuck .site-header__logo {
	height: clamp(38px, 3.4vw, 48px);
}

/* Over a dark hero the logo flips to white; once stuck it returns to colour */
.site-header--over-hero:not(.is-stuck) .site-header__logo {
	filter: brightness(0) invert(1);
}

/* ---- Primary navigation ---- */

.nav-primary {
	display: none;
}

@media (min-width: 1040px) {
	.nav-primary {
		display: block;
	}
}

.nav-primary ul {
	display: flex;
	align-items: center;
	gap: clamp(var(--sp-4), 1.6vw, var(--sp-6));
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-primary a {
	position: relative;
	display: block;
	padding-block: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-ink-700);
	text-decoration: none;
	white-space: nowrap;
}

.site-header--over-hero:not(.is-stuck) .nav-primary a {
	color: rgba(255, 255, 255, 0.92);
}

/* Underline grows from the centre */
.nav-primary a::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	width: 0;
	height: 2px;
	background: currentColor;
	border-radius: var(--r-full);
	transform: translateX(-50%);
	transition: width var(--dur-base) var(--ease-out);
}

.nav-primary a:hover::after,
.nav-primary .current-menu-item > a::after,
.nav-primary .current_page_item > a::after {
	width: 100%;
}

.nav-primary a:hover,
.nav-primary .current-menu-item > a {
	color: var(--c-brand-500);
}

.site-header--over-hero:not(.is-stuck) .nav-primary a:hover,
.site-header--over-hero:not(.is-stuck) .nav-primary .current-menu-item > a {
	color: var(--c-white);
}

/* ---- Header actions ---- */

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex: none;
}

.lang-switcher {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.06em;
}

.lang-switcher a {
	display: block;
	padding: var(--sp-1) var(--sp-2);
	border-radius: var(--r-sm);
	color: var(--c-ink-400);
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out);
}

.lang-switcher a:hover {
	color: var(--c-brand-500);
	background: var(--c-brand-50);
}

.lang-switcher .is-active a {
	color: var(--c-ink-900);
}

.site-header--over-hero:not(.is-stuck) .lang-switcher a {
	color: rgba(255, 255, 255, 0.6);
}

.site-header--over-hero:not(.is-stuck) .lang-switcher .is-active a {
	color: var(--c-white);
}

.site-header--over-hero:not(.is-stuck) .lang-switcher a:hover {
	color: var(--c-white);
	background: rgba(255, 255, 255, 0.14);
}

.lang-switcher__sep {
	color: var(--c-border-strong);
}

/* Hide the registration CTA in the header on small screens — it lives in
   the mobile drawer instead, where it gets full width. */
.site-header__cta {
	display: none;
}

@media (min-width: 600px) {
	.site-header__cta {
		display: inline-flex;
	}
}

/* ---- Menu toggle (mobile) ---- */

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--r-sm);
	cursor: pointer;
	color: var(--c-ink-800);
}

@media (min-width: 1040px) {
	.menu-toggle {
		display: none;
	}
}

.site-header--over-hero:not(.is-stuck) .menu-toggle {
	color: var(--c-white);
}

.menu-toggle__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: var(--r-full);
	transition: background-color var(--dur-fast) var(--ease-out);
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: var(--r-full);
	transition: transform var(--dur-base) var(--ease-out);
}

.menu-toggle__bars::before {
	transform: translateY(-7px);
}

.menu-toggle__bars::after {
	transform: translateY(7px);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars {
	background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
	transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
	transform: rotate(-45deg);
}

/* ---- Mobile drawer ---- */

.nav-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-menu);
	display: grid;
	place-items: center;
	background: var(--c-bg-inverse);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-base) var(--ease-out),
		visibility var(--dur-base) var(--ease-out);
}

.nav-drawer.is-open {
	opacity: 1;
	visibility: visible;
}

@media (min-width: 1040px) {
	.nav-drawer {
		display: none;
	}
}

.nav-drawer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.nav-drawer li + li {
	margin-block-start: var(--sp-5);
}

.nav-drawer a {
	font-size: var(--fs-lg);
	font-weight: var(--fw-semi);
	color: var(--c-white);
	text-decoration: none;
}

.nav-drawer a:hover {
	color: var(--c-brand-300);
}

.nav-drawer__footer {
	margin-block-start: var(--sp-9);
	display: grid;
	justify-items: center;
	gap: var(--sp-5);
}

/* Lock scroll behind the open drawer */
body.has-drawer-open {
	overflow: hidden;
}

/* ====================================================================
   Cards
   ==================================================================== */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--c-bg-muted);
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.card:hover .card__media img {
	transform: scale(1.04);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-5);
	flex: 1;
}

.card__meta {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--c-brand-500);
}

.card__title {
	font-size: var(--fs-md);
	font-weight: var(--fw-semi);
	line-height: var(--lh-snug);
}

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

/* Stretched link: the whole card is clickable, but only the title is a
   real link — keeps the accessibility tree clean. */
.card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.card__excerpt {
	font-size: var(--fs-sm);
	color: var(--c-text);
	margin-block-start: auto;
}

/* ---- Feature card (icon + text, no image) ---- */

.feature {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-6);
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	transition: transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.section--inverse .feature {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
}

.feature__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--r-md);
	background: var(--c-brand-100);
	color: var(--c-brand-600);
	margin-bottom: var(--sp-2);
}

.section--inverse .feature__icon {
	background: rgba(8, 124, 191, 0.28);
	color: var(--c-brand-300);
}

.feature__title {
	font-size: var(--fs-md);
	font-weight: var(--fw-semi);
}

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

/* ---- Stat ---- */

.stat {
	text-align: center;
}

/*
 * Las cinco cifras de la home. En móvil el --col-min de 170px sólo daba para
 * una columna y la fila se estiraba cinco pantallas hacia abajo; a dos por
 * fila se leen como el bloque de datos que son. Como son cinco, la última se
 * lleva el ancho completo en vez de quedar coja a un lado.
 */
@media (max-width: 560px) {
	.auto-grid.stats-row {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-5) var(--sp-4);
	}

	.auto-grid.stats-row > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

.stat__value {
	display: block;
	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-text-strong);
	font-variant-numeric: tabular-nums;
}

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

/* ====================================================================
   Sponsor wall
   ====================================================================
   The weakest part of the current site: hundreds of logos at wildly
   different aspect ratios, dumped in one flat list. Here each logo sits
   in a fixed-ratio cell and is contained, never stretched — so a wide
   wordmark and a square badge read as equals.
*/

.sponsor-tier + .sponsor-tier {
	margin-block-start: var(--sp-9);
}

.sponsor-tier__label {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin-block-end: var(--sp-6);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.sponsor-tier__label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-border);
}

.sponsor-grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
	align-items: stretch;
	--sponsor-h: 150px;
}

/* ---- Un nivel de patrocinio por rejilla ----------------------------
   La categoría no se rotula: se lee en cuántos logos caben por fila y en
   el tamaño de la celda. Coincide con reference/Patrocinios.png.        */

.sponsor-grid + .sponsor-grid {
	margin-block-start: var(--sp-4);
}

.sponsor-grid--diamante,
.sponsor-grid--platinum {
	grid-template-columns: repeat(4, 1fr);
	--sponsor-h: 172px;
	gap: var(--sp-5);
}

/* Los Diamante se separan de los Platinum con una línea, como en el
   sitio anterior. */
.sponsor-grid--platinum {
	margin-block-start: var(--sp-6);
	padding-block-start: var(--sp-6);
	border-block-start: 1px solid var(--c-border);
}

.sponsor-grid--oro {
	grid-template-columns: repeat(5, 1fr);
	--sponsor-h: 142px;
}

/* Las dos últimas filas de Oro, un punto más pequeñas. */
.sponsor-grid--oro > :nth-child(n + 11) {
	--sponsor-h: 136px;
}

.sponsor-grid--plata {
	grid-template-columns: repeat(6, 1fr);
	--sponsor-h: 120px;
}

.sponsor-grid--aval {
	grid-template-columns: repeat(6, 1fr);
	--sponsor-h: 132px;
}

/* Media Partners: 5 arriba y 6 abajo. 30 columnas es el mínimo común
   múltiplo de 5 y 6, así una fila de cinco (span 6) y otra de seis
   (span 5) encajan exactas sin dos rejillas separadas. El logo se
   limita por altura, así que se ve del mismo tamaño en ambas filas. */
.sponsor-grid--media {
	grid-template-columns: repeat(30, 1fr);
	--sponsor-h: 132px;
}

.sponsor-grid--media > * {
	grid-column: span 5;
}

.sponsor-grid--media > :nth-child(-n + 5) {
	grid-column: span 6;
}

/* Por debajo de escritorio las filas fijas no caben: se relajan a una
   rejilla elástica y los logos siguen conservando su altura. */
@media (max-width: 1040px) {
	.sponsor-grid--diamante,
	.sponsor-grid--platinum,
	.sponsor-grid--oro,
	.sponsor-grid--plata,
	.sponsor-grid--aval {
		grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	}

	.sponsor-grid--media {
		grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	}

	.sponsor-grid--media > *,
	.sponsor-grid--media > :nth-child(-n + 5) {
		grid-column: auto;
	}
}

/*
 * En móvil se mantiene la jerarquía de tamaños de escritorio, pero con dos
 * anchos en vez de cuatro: a dos por fila los 55 logos ocupaban casi seis
 * pantallas seguidas. Diamante y Platinum, que son los que se compran caros,
 * siguen a dos por fila; las categorías menores pasan a tres y la sección se
 * acorta más o menos a la mitad.
 */
@media (max-width: 560px) {
	.sponsor-grid--diamante,
	.sponsor-grid--platinum {
		grid-template-columns: repeat(2, 1fr);
		--sponsor-h: 148px;
	}

	.sponsor-grid--oro,
	.sponsor-grid--plata,
	.sponsor-grid--aval,
	.sponsor-grid--media {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-3);
		--sponsor-h: 96px;
	}

	/* A tres por fila ya no hay sitio para distinguir las dos últimas filas
	   de Oro: se igualan todas. */
	.sponsor-grid--oro > :nth-child(n + 11) {
		--sponsor-h: 96px;
	}
}

.sponsor {
	display: grid;
	place-items: center;
	/* A definite height, not aspect-ratio. A percentage height on the logo
	   only resolves against a parent whose own height is definite; with
	   aspect-ratio it falls back to auto, and tall or square logos then
	   render at intrinsic size and spill over their neighbours. Wide, short
	   logos happen to fit either way, which is what made the bug look
	   random. */
	height: var(--sponsor-h, 150px);
	padding: var(--sp-4);
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	/* Grid items default to min-width/min-height:auto, which is the logo's
	   intrinsic size — a 1366px-wide wordmark then refuses to shrink and
	   spills over its neighbours. */
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

.sponsor:hover {
	border-color: var(--c-brand-200);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

/* Fill the cell and let object-fit do the scaling. Sizing the box with
   max-width/max-height instead leaves the limits unresolved against an
   aspect-ratio-derived height, and the bitmap renders at natural size. */
/* Bounded in absolute units, deliberately. A percentage max-height here has
   to resolve against the parent, and browsers fall back to the intrinsic
   aspect ratio from the img's width/height attributes when that resolution
   is indefinite — which upscaled square logos to full width and pushed them
   over their neighbours. calc() on a fixed cell height is always definite. */
.sponsor img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(var(--sponsor-h, 150px) - var(--sp-4) * 2);
	object-fit: contain;
	object-position: center;
	/* A todo color siempre: los patrocinadores pagan por su marca, y el gris
	   de reposo la escondía hasta que alguien pasara el ratón por encima. */
}

/* ====================================================================
   Speakers
   ==================================================================== */

.speaker {
	text-align: center;
}

.speaker__photo {
	position: relative;
	aspect-ratio: 1;
	margin-inline: auto;
	margin-block-end: var(--sp-4);
	border-radius: var(--r-full);
	overflow: hidden;
	background: var(--c-bg-muted);
	max-width: 200px;
	box-shadow: var(--shadow-md);
}

.speaker__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

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

.speaker__name {
	font-size: var(--fs-base);
	font-weight: var(--fw-semi);
	line-height: var(--lh-snug);
}

.speaker__role {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	margin-block-start: var(--sp-1);
}

.speaker__social {
	display: flex;
	justify-content: center;
	gap: var(--sp-2);
	margin-block-start: var(--sp-3);
	padding: 0;
	list-style: none;
}

.speaker__social a {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var(--r-full);
	background: var(--c-bg-muted);
	color: var(--c-ink-600);
	transition: background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

.speaker__social a:hover {
	background: var(--c-brand-500);
	color: var(--c-white);
}

/* ====================================================================
   Agenda timeline
   ==================================================================== */





/* Standing footnote under the programme ("this agenda is not final…").
   Quiet by design: it qualifies the timeline, it does not compete with it. */
.agenda-note {
	margin-block-start: var(--sp-8);
	padding-block-start: var(--sp-5);
	border-block-start: 1px solid var(--c-border);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	text-align: center;
	text-wrap: pretty;
}

.agenda-note :is(h1, h2, h3, h4, h5, h6) {
	font-size: inherit;
	font-weight: var(--fw-medium);
	color: inherit;
	letter-spacing: 0;
}

.agenda-note > * + * {
	margin-block-start: var(--sp-2);
}










/* ====================================================================
   Footer — tres columnas
   ====================================================================
   Reproduce el pie anterior (reference/Footer.png) sobre el fondo oscuro
   del tema: el congreso con su llamada, la ADTS y AF Comunicación.
*/

.site-footer {
	background: var(--c-bg-inverse);
	color: rgba(255, 255, 255, 0.76);
	padding-block: var(--sp-10) var(--sp-6);
	font-size: var(--fs-sm);
}

.site-footer a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
}

/* :not(.btn) es imprescindible. Sin él, esta regla gana por especificidad
   sobre .btn--on-dark:hover y el texto del botón se volvía blanco justo
   cuando el fondo pasaba a blanco: el botón quedaba en blanco. */
.site-footer a:not(.btn):hover {
	color: var(--c-white);
	text-decoration: underline;
}

.site-footer__heading {
	margin-block-end: var(--sp-9);
	font-size: var(--fs-lg);
	color: var(--c-white);
	text-align: center;
}

.site-footer__grid {
	display: grid;
	gap: var(--sp-8) var(--sp-7);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	align-items: start;
}

.footer-col {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	/* Logo, datos, redes y botón centrados en su columna. */
	align-items: center;
	text-align: center;
}

/* Los tres logos, en blanco y sin caja ni fondo. El envoltorio solo
   centra: no pinta nada. */
.footer-col__logo-wrap {
	display: grid;
	place-items: center;
}

.footer-col__logo {
	width: auto;
	height: clamp(68px, 5.8vw, 88px);
	filter: brightness(0) invert(1);
}

/* AF entrega su logo ya en blanco sobre transparente: no hace falta teñirlo. */
.footer-col__logo--white {
	filter: none;
}

/*
 * El de la ADTS es el más cuadrado de los tres, así que a igual altura se ve
 * más pequeño y su texto queda más apretado. Un 15 % más lo equilibra.
 */
.footer-col__logo--adts {
	height: clamp(78px, 6.7vw, 101px);
}

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

.footer-col__text {
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

.footer-col__text strong {
	color: var(--c-white);
}

/* ---- Filas con icono ---- */

.footer-lines {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
	/* El bloque va centrado en la columna, pero las líneas se leen mejor
	   alineadas a la izquierda: son direcciones de varias líneas. */
	text-align: left;
}

.footer-line {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-3);
	align-items: start;
	line-height: var(--lh-normal);
}

.footer-line__icon {
	margin-block-start: 0.15em;
	color: var(--c-brand-300);
	flex: none;
}

/* ---- Redes ---- */

.social-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin: var(--sp-1) 0 0;
	padding: 0;
	list-style: none;
}

.social-list a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--c-white);
	transition: background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
}

.social-list a:hover {
	background: var(--c-brand-500);
	border-color: var(--c-brand-500);
	text-decoration: none;
}

/* ---- Línea final ---- */

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	align-items: center;
	justify-content: space-between;
	margin-block-start: var(--sp-9);
	padding-block-start: var(--sp-5);
	border-block-start: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.55);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ====================================================================
   Editorial content
   ====================================================================
   Applied to the_content() output. The old site had no consistent
   typography here because every page was assembled in a builder.
*/

.entry-content {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
}

.entry-content > * + * {
	margin-block-start: var(--sp-5);
}

.entry-content h2 {
	margin-block-start: var(--sp-8);
	font-size: var(--fs-lg);
}

.entry-content h3 {
	margin-block-start: var(--sp-7);
	font-size: var(--fs-md);
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.4em;
}

.entry-content li + li {
	margin-block-start: var(--sp-2);
}

.entry-content img,
.entry-content figure {
	border-radius: var(--r-md);
	overflow: hidden;
}

.entry-content figcaption {
	margin-block-start: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	text-align: center;
}

.entry-content a:not(.btn) {
	color: var(--c-link);
	text-decoration: underline;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.entry-content th,
.entry-content td {
	padding: var(--sp-3) var(--sp-4);
	border-block-end: 1px solid var(--c-border);
	text-align: start;
}

.entry-content th {
	font-weight: var(--fw-semi);
	color: var(--c-text-strong);
	background: var(--c-bg-subtle);
}

/* Wide content must scroll inside itself, never the page */
.entry-content > table,
.entry-content .wp-block-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* ====================================================================
   Search form
   ==================================================================== */

.search-form {
	display: flex;
	gap: var(--sp-2);
}

.search-form__field {
	flex: 1;
	min-width: 0;
	padding: 0.875em 1.25em;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-full);
	background: var(--c-white);
	color: var(--c-text-strong);
	font-size: var(--fs-sm);
}

.search-form__field::placeholder {
	color: var(--c-text-muted);
}

.search-form__field:focus {
	border-color: var(--c-brand-400);
	outline: none;
	box-shadow: 0 0 0 3px var(--c-brand-100);
}

/* ====================================================================
   Pagination
   ==================================================================== */

.pagination {
	margin-block-start: var(--sp-9);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--sp-3);
	border: 1px solid var(--c-border);
	border-radius: var(--r-full);
	color: var(--c-text);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	transition: border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

.pagination a.page-numbers:hover {
	border-color: var(--c-brand-400);
	color: var(--c-brand-600);
}

.pagination .page-numbers.current {
	background: var(--c-brand-500);
	border-color: var(--c-brand-500);
	color: var(--c-white);
}

.pagination .dots {
	border-color: transparent;
}

/* ====================================================================
   Comments
   ==================================================================== */

.comments-area {
	margin-block-start: var(--sp-9);
}

.comment-list {
	margin: var(--sp-6) 0 0;
	padding: 0;
	list-style: none;
}

.comment-list li {
	padding-block: var(--sp-5);
	border-block-start: 1px solid var(--c-border);
}

.comment-list .children {
	margin-block-start: var(--sp-4);
	padding-inline-start: var(--sp-5);
	list-style: none;
	border-inline-start: 2px solid var(--c-border);
}

.comment-meta {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	margin-block-end: var(--sp-2);
}

.comment-form label {
	display: block;
	margin-block-end: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--c-text-strong);
}

.comment-form input:not([type="submit"]),
.comment-form textarea {
	width: 100%;
	padding: 0.75em 1em;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-sm);
	background: var(--c-white);
	font-size: var(--fs-sm);
}

.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--c-brand-400);
	outline: none;
	box-shadow: 0 0 0 3px var(--c-brand-100);
}

/* Botón de llamada mayor que .btn--lg. Se usa en el registro, donde la página
   entera existe para que se pulse. */
.btn--xl {
	padding: 1.15em 2.75em;
	font-size: var(--fs-md);
	font-weight: var(--fw-semi);
}

/* ====================================================================
   Entradas del blog: galería, vídeo y ancho
   ==================================================================== */

/*
 * El artículo se lee en medida de lectura, pero la galería y el vídeo se
 * salen de la columna hasta el ancho del contenedor. Se hace con márgenes
 * negativos calculados: la diferencia entre el ancho de la caja y el ancho
 * de lectura, repartida a los dos lados, con tope en el ancho de la ventana
 * para que nunca aparezca barra horizontal.
 */
.container--breakout {
	--breakout: max(0px, min(
		calc((100vw - var(--gutter) * 2 - 82ch) / 2),
		calc((var(--container) - 82ch) / 2)
	));
}

.container--breakout .entry-content .gallery,
.container--breakout .entry-content .wp-block-gallery,
.container--breakout .entry-content figure.is-provider-youtube,
.container--breakout .entry-content .wp-block-embed {
	margin-inline: calc(var(--breakout) * -1);
	width: calc(100% + var(--breakout) * 2);
	max-width: none;
}

/* ---- Galería ---- */

/*
 * El shortcode [gallery] de WordPress imprime .gallery con .gallery-item por
 * foto y una clase gallery-columns-N. Se ignora esa cuenta de columnas: las
 * entradas la traen a 5, que en móvil son cinco tiras de 60 px. Se rellena
 * por ancho mínimo y la rejilla decide cuántas caben.
 */
.entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
	gap: var(--sp-3);
	margin-block: var(--sp-8);
	/*
	 * auto-fill deja las pistas vacías al final, así que una galería de dos
	 * fotos se pegaba al margen izquierdo con tres huecos a la derecha. Con
	 * esto el sobrante se reparte a los dos lados y el grupo queda centrado.
	 */
	justify-content: center;
}

/*
 * Galerías de una, dos o tres fotos: sin esto salen a 190 px, del tamaño de
 * una miniatura, en una fila de 1130 px. Se les da un ancho propio para que
 * la foto se vea. Cuatro o más ya llenan la fila por su cuenta.
 */
.entry-content .gallery:not(:has(.gallery-item:nth-child(2))) {
	grid-template-columns: minmax(0, 620px);
}

.entry-content .gallery:has(.gallery-item:nth-child(2)):not(:has(.gallery-item:nth-child(3))) {
	grid-template-columns: repeat(2, minmax(0, 420px));
}

.entry-content .gallery:has(.gallery-item:nth-child(3)):not(:has(.gallery-item:nth-child(4))) {
	grid-template-columns: repeat(3, minmax(0, 330px));
}

/*
 * En móvil la galería cabía a una foto por fila: la del 7mo Congreso, con
 * veintiséis, medía 7.964 px de alto —diez pantallas seguidas de fotos—. A dos
 * columnas se queda en la mitad y las caras siguen reconociéndose.
 */
@media (max-width: 640px) {
	.entry-content .gallery,
	.entry-content .gallery:has(.gallery-item:nth-child(3)):not(:has(.gallery-item:nth-child(4))) {
		grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	}
}

.entry-content .gallery br {
	display: none;
}

.entry-content .gallery-item {
	margin: 0 !important;
	width: auto !important;
	float: none !important;
}

.entry-content .gallery-icon {
	display: block;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--c-bg-muted);
}

.entry-content .gallery-item a,
.entry-content .gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Todas las miniaturas al mismo alto: las fotos de congreso mezclan vertical
   y horizontal y sin esto la rejilla queda dentada. */
.entry-content .gallery-item img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	/*
	 * El recorte se ancla arriba, no al centro. Son fotos de grupo de cuerpo
	 * entero: en las verticales, un 4/3 centrado se queda con la franja del
	 * medio —los torsos— y corta las caras, que es lo único que identifica a
	 * quien sale. En las horizontales el recorte va por el ancho, así que
	 * esta línea no las toca.
	 */
	object-position: center 22%;
	border: 0 !important;
	transition: transform var(--dur-slow) var(--ease-out);
}

.entry-content .gallery-item a:hover img {
	transform: scale(1.05);
}

.entry-content .gallery-caption {
	margin-block-start: var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

/* ---- Vídeo ---- */

/*
 * Los oEmbed de YouTube venían a 1200 px y eran el elemento más grande de la
 * página. Se limitan a 720 px y se centran, igual que la imagen destacada:
 * alineados a la izquierda quedaban descolgados dentro de la columna.
 */
.entry-content iframe,
.entry-content .wp-block-embed iframe {
	display: block;
	width: 100%;
	max-width: 720px;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-inline: auto;
	border-radius: var(--r-md);
}

.entry-content .wp-block-embed,
.entry-content figure.is-provider-youtube {
	margin-block: var(--sp-7);
}

.entry-content .wp-block-embed__wrapper {
	max-width: 720px;
	margin-inline: auto;
}

/* ---- Volver al blog ---- */

.entry-back {
	margin-block-start: var(--sp-8);
	padding-block-start: var(--sp-6);
	border-block-start: 1px solid var(--c-border);
}

/* ---- Visor de imagen ---- */

/* display:grid sólo cuando está abierto: un <dialog> cerrado se oculta
   con display:none, y declararlo aquí dejaba la equis flotando sobre la
   página. */
.lightbox[open] {
	display: grid;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	place-items: center;
	padding: var(--sp-6);
	background: rgba(9, 26, 43, 0.92);
	backdrop-filter: blur(6px);
	border: 0;
}

.lightbox::backdrop {
	background: transparent;
}

.lightbox img {
	max-width: 100%;
	max-height: 85vh;
	width: auto;
	height: auto;
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
}

.lightbox__close {
	position: absolute;
	inset-block-start: var(--sp-4);
	inset-inline-end: var(--sp-4);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--r-full);
	background: rgba(255, 255, 255, 0.1);
	color: var(--c-white);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.lightbox__close:hover {
	background: var(--c-white);
	color: var(--c-brand-700);
}

.lightbox__count {
	position: absolute;
	inset-block-end: var(--sp-5);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.7);
}

/* ---- Imagen destacada de la entrada ---- */

/*
 * Solapa ligeramente la cabecera, como antes, pero sin recortar: se centra y
 * se limita por altura, así una foto vertical se ve entera y un cartel
 * apaisado tampoco pierde los lados.
 */
.entry-media {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	margin: calc(var(--sp-7) * -1) 0 0;
}

.entry-media img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 440px;
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-lg);
}

@media (max-width: 700px) {
	.entry-media img {
		max-height: 340px;
	}
}

/* WordPress envuelve el oEmbed en un <p> cuando viene de [embed]; sin esto
   el centrado del iframe no tiene contra qué centrarse. */
.entry-content p:has(> iframe) {
	text-align: center;
}

/*
 * Entradilla: el párrafo de arranque de la nota. En cursiva y justificada a
 * ambos lados para separarla del cuerpo, como en una nota de prensa impresa.
 *
 * La partición de palabras va con la justificación: sin ella, el navegador
 * sólo puede estirar los espacios y en castellano —de palabras largas— eso
 * abre calles blancas entre columnas de texto.
 */
.entry-content .entry-lede {
	font-size: var(--fs-base);
	font-style: italic;
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	line-height: var(--lh-normal);
	color: var(--c-text-strong);
	margin-block-end: var(--sp-6);
}

.entry-content .entry-lede strong {
	font-style: normal;
	color: var(--c-brand-700);
}

/*
 * Cifra resaltada dentro de un párrafo. Es <b> y no <strong>: llama la
 * atención sobre el dato, pero no le da a la palabra una importancia
 * semántica que un lector de pantalla tendría que anunciar.
 *
 * El azul oscuro da 7,22:1 sobre el fondo turquesa de la sección y 12,63:1
 * sobre blanco, así que cumple AA en las dos superficies donde aparece.
 */
.mark {
	color: var(--c-brand-700);
	font-weight: var(--fw-bold);
}