/* =================================================================
 * Frente Único — capa de marca sobre Blocksy.
 *
 * Estos estilos se cargan DESPUÉS de Blocksy y reciben las CSS vars
 * que theme.json emite automáticamente (--wp--preset--color--*,
 * --wp--preset--font-family--*, etc.).
 *
 * Tokens duplicados con los nombres "humanos" del proyecto Lovable
 * (--color-azul-boca, --font-display, …) para que las clases custom
 * y futuros bloques los sigan usando con la misma API.
 * ================================================================= */

/* -----------------------------------------------------------------
 * 1. Fuentes self-hosted.
 *    NOTA: los archivos .woff2 deben existir en /assets/fonts/.
 *    Descargá los packs desde gwfh.mranftl.com (ver README.md).
 * ----------------------------------------------------------------- */

@font-face {
	font-family: "Archivo Black";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/archivo-black-v23-latin-regular.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-v20-latin-500.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-v20-latin-600.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-v20-latin-700.woff2") format("woff2");
}

@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/space-grotesk-v22-latin-500.woff2") format("woff2");
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-v22-latin-700.woff2") format("woff2");
}

/* Lora — serif font for article-letter and similar long-form pages.
 * Google Fonts ships Lora v37 as a variable font (one woff2 per style covering
 * the full 400–700 weight axis). The 4 declarations below reference 2 unique
 * files: regular VF (400 + 700 normal) and italic VF (400 + 700 italic). */
@font-face {
	font-family: "Lora";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lora-v37-latin-regular.woff2") format("woff2");
}
@font-face {
	font-family: "Lora";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lora-v37-latin-italic.woff2") format("woff2");
}
@font-face {
	font-family: "Lora";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/lora-v37-latin-regular.woff2") format("woff2");
}
@font-face {
	font-family: "Lora";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/lora-v37-latin-italic.woff2") format("woff2");
}

/* -----------------------------------------------------------------
 * 2. Tokens "Lovable-style" (alias humanos).
 * ----------------------------------------------------------------- */

:root {
	/* Colores — espejan theme.json para que el CSS custom no dependa
	   exclusivamente de las vars de WP. */
	--color-azul-boca:      #0E3F7E;
	--color-azul-profundo:  #0A2E5C;
	--color-amarillo-boca:  #F4C600;
	--color-amarillo-suave: #FCE588;
	--color-blanco:         #FFFFFF;
	--color-gris-fondo:     #F5F6FA;
	--color-gris-borde:     #E5E7EB;
	--color-gris-medio:     #6B7280;
	--color-gris-texto:     #4A5568;
	--color-negro-texto:    #1A202C;
	--color-rojo-alerta:    #D32F2F;

	/* Fuentes. */
	--font-display: "Archivo Black", system-ui, sans-serif;
	--font-sans:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono:    "Space Grotesk", ui-monospace, monospace;

	/* Radios — base 0.5rem, mismas reglas que Lovable. */
	--radius:    0.5rem;
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);

	/* Foco — patrón repetido en todo el sitio Lovable. */
	--focus-ring: 2px solid var(--color-amarillo-boca);
	--focus-offset: 2px;
}

/* -----------------------------------------------------------------
 * 3. Reset / base mínimo (Blocksy ya trae uno; acá solo afinamos).
 * ----------------------------------------------------------------- */

body {
	font-family: var(--font-sans);
	color: var(--color-negro-texto);
	background-color: var(--color-blanco);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	letter-spacing: -0.01em;
	color: var(--color-azul-profundo);
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, textarea, select):focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* -----------------------------------------------------------------
 * 4. Helpers reutilizables.
 *    Pensados para usarse desde block patterns y bloques custom.
 * ----------------------------------------------------------------- */

.fu-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-amarillo-boca);
}

.fu-mono-num {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

.fu-section-azul {
	background-color: var(--color-azul-boca);
	color: var(--color-blanco);
}

.fu-section-azul :is(h1, h2, h3, h4) {
	color: var(--color-blanco);
}

.fu-section-muted {
	background-color: var(--color-gris-fondo);
}

/* -----------------------------------------------------------------
 * 5. Block patterns.
 *    Estilos de los patterns en /patterns/*.php. Cada pattern aplica
 *    una clase fu-pattern-<slug> a su wrapper para que estos selectores
 *    no compitan con los defaults de Blocksy ni con otros block themes.
 * ----------------------------------------------------------------- */

/* --- page-hero --------------------------------------------------- */
/* Outer: full-width band with the navy background and vertical breathing
   room. Horizontal padding lives on the inner wrapper so all hero content
   shares the same left edge regardless of viewport width. */
.fu-pattern-page-hero {
	padding-block: clamp(3rem, 6vw + 1rem, 5rem);
}

/* Inner: capped at wideSize (1280px) and centered by the outer's constrained
   layout (no align="wide" attribute needed — we override max-width here).
   Its own layout is "default" (flow), so its children fall on the same left
   edge instead of being individually auto-centered. */
.fu-pattern-page-hero__inner {
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--60);
}

.fu-pattern-page-hero__crumbs {
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 var(--wp--preset--spacing--50);
}

.fu-pattern-page-hero__title {
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin-top: var(--wp--preset--spacing--30);
}

.fu-pattern-page-hero__intro {
	max-width: 45rem;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.6;
	margin-top: var(--wp--preset--spacing--50);
}

/* --- section-header --------------------------------------------- */
.fu-pattern-section-header {
	margin-bottom: var(--wp--preset--spacing--70);
}

.fu-pattern-section-header__title {
	margin-top: var(--wp--preset--spacing--30);
	line-height: 1.1;
}

/* --- pull-quote ------------------------------------------------- */
.fu-pattern-pull-quote {
	max-width: 42rem;
	margin: var(--wp--preset--spacing--80) auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.fu-pattern-pull-quote__mark {
	font-size: 5rem;
	line-height: 1;
	margin: 0 0 -1rem;
}

.fu-pattern-pull-quote__body {
	font-family: Georgia, "Lora", serif;
	font-style: italic;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.6;
	margin: 0;
}

.fu-pattern-pull-quote__rule.wp-block-separator {
	width: 4rem;
	max-width: 4rem;
	height: 2px;
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--30);
	border: 0;
	opacity: 1;
}

.fu-pattern-pull-quote__author {
	margin: 0;
}

.fu-pattern-pull-quote__role {
	margin: var(--wp--preset--spacing--10) 0 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* --- stat-callout ----------------------------------------------- */
.fu-pattern-stat-callout {
	max-width: 64rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
	text-align: center;
}

.fu-pattern-stat-callout__number {
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40);
	line-height: 1;
}

.fu-pattern-stat-callout__subtitle {
	max-width: 32rem;
	margin-inline: auto;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.5;
}

/* --- info-row + info-table -------------------------------------- */
.fu-pattern-info-row {
	border-bottom: 1px solid var(--wp--preset--color--gris-borde);
	padding-block: var(--wp--preset--spacing--40);
}

.fu-pattern-info-row .wp-block-columns {
	margin-block: 0;
}

.fu-pattern-info-row__label p {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.fu-pattern-info-row__value p {
	margin: 0;
	font-weight: 500;
}

.fu-pattern-info-table {
	max-width: 48rem;
	margin-inline: auto;
}

.fu-pattern-info-table .fu-pattern-section-header {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* --- article-card ----------------------------------------------- */
.fu-pattern-article-card {
	border-bottom: 1px solid var(--wp--preset--color--gris-borde);
	padding-block: var(--wp--preset--spacing--50);
}

.fu-pattern-article-card .wp-block-columns {
	gap: var(--wp--preset--spacing--50);
	margin-block: 0;
}

.fu-pattern-article-card__media .wp-block-image,
.fu-pattern-article-card__media .wp-block-image img {
	border-radius: 4px;
}

.fu-pattern-article-card__meta {
	margin: 0 0 var(--wp--preset--spacing--20);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

.fu-pattern-article-card__date {
	color: var(--wp--preset--color--gris-medio);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400;
	letter-spacing: 0;
}

.fu-pattern-article-card__title {
	line-height: 1.2;
	margin: 0 0 var(--wp--preset--spacing--30);
}

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

.fu-pattern-article-card__title a:hover {
	color: var(--wp--preset--color--amarillo-boca);
}

.fu-pattern-article-card__excerpt {
	color: var(--wp--preset--color--gris-texto);
	line-height: 1.6;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.fu-pattern-article-card__cta a {
	text-decoration: none;
	font-weight: 600;
}

.fu-pattern-article-card__cta a:hover {
	text-decoration: underline;
}

/* --- related-posts ---------------------------------------------- */
.fu-pattern-related-posts {
	max-width: 64rem;
	margin-block: var(--wp--preset--spacing--90);
	margin-inline: auto;
}

.fu-pattern-related-posts__rule.wp-block-separator {
	width: 4rem;
	max-width: 4rem;
	height: 2px;
	margin: 0 auto var(--wp--preset--spacing--60);
	border: 0;
	opacity: 1;
}

.fu-pattern-related-posts__eyebrow {
	text-align: center;
}

.fu-pattern-related-posts__title {
	text-align: center;
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--60);
}

.fu-pattern-related-posts__grid {
	gap: var(--wp--preset--spacing--50);
}

.fu-pattern-related-posts__grid .wp-block-image img {
	border-radius: 4px;
	transition: transform .35s ease;
}

.fu-pattern-related-posts__grid .wp-block-column:hover .wp-block-image img {
	transform: scale(1.03);
}

.fu-pattern-related-posts__grid h4 a {
	color: inherit;
	text-decoration: none;
}

.fu-pattern-related-posts__grid h4 a:hover {
	color: var(--wp--preset--color--amarillo-boca);
}

/* -----------------------------------------------------------------
 * 6. Site header.
 *    Override de Blocksy: parts/header.html + inc/menus.php.
 * ----------------------------------------------------------------- */

.fu-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.fu-skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	z-index: 9999;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--azul-profundo);
	color: var(--wp--preset--color--blanco);
}

/* Outer band: sticky, blanco, sombra al scrollear (con scroll-driven via JS opcional;
   por ahora siempre con borde sutil). align:full lo hace span the viewport. */
.fu-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--gris-borde);
	backdrop-filter: saturate(150%) blur(8px);
	-webkit-backdrop-filter: saturate(150%) blur(8px);
	background-color: rgba(255, 255, 255, 0.92);
}

/* Capa de fondo opaco: la clase has-blanco-background-color del bloque se
   conserva, pero la opacidad anterior cae sobre ella. */
.fu-header.has-blanco-background-color {
	background-color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   Header — responsive nav:
   • Mobile/tablet (<1024px): [☰] [LOGO centered] [SUMATE] + nav slides in as sheet
   • Desktop (≥1024px):       [LOGO] [horizontal nav] [SUMATE] (no hamburger)
   Compact 72px height everywhere; 64px when scrolled. Logo 56→64px breakpoint.
   ============================================================ */
.fu-header__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	height: 72px;
	padding-inline: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	position: relative; /* anchor for absolute logo on mobile */
	transition: height .2s ease;
}
@media (min-width: 768px) {
	.fu-header__inner { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
	.fu-header__inner { padding-inline: 2rem; }
}
.fu-header.scrolled .fu-header__inner {
	height: 64px;
}

/* Logo — mobile: absolute-centered behind toggle/cta; desktop: flex-left in flow. */
.fu-header__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	pointer-events: none;
}
.fu-header__logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
	pointer-events: auto;
}
.fu-header__logo .custom-logo {
	width: 56px;
	height: 56px;
	max-width: 56px;
	max-height: 56px;
	object-fit: contain;
	border-radius: 9999px;
	background: var(--wp--preset--color--blanco);
}

/* Toggle (mobile only) — 40x40 with three bars. */
.fu-header__toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	color: var(--wp--preset--color--azul-boca);
	transition: background-color .15s ease;
	flex-shrink: 0;
}
.fu-header__toggle:hover {
	background-color: var(--wp--preset--color--gris-fondo);
}
.fu-header__toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .2s, opacity .2s;
	transform-origin: center;
}

/* SUMATE CTA — always visible right side. Compact mobile, comfortable desktop. */
.fu-header__cta {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	background-color: var(--wp--preset--color--amarillo-boca);
	color: var(--wp--preset--color--azul-profundo);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 6px;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background-color .15s, color .15s, transform .15s;
}
@media (min-width: 768px) {
	.fu-header__cta { padding: 9px 20px; font-size: 0.85rem; }
}
.fu-header__cta:hover {
	background-color: var(--wp--preset--color--azul-profundo);
	color: var(--wp--preset--color--amarillo-boca);
}
.fu-header__cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul-profundo);
	outline-offset: 2px;
}

/* Defensive: prevent rogue child widths from forcing horizontal scroll. */
html, body { overflow-x: hidden; }
.fu-header { overflow-x: clip; }

/* wpautop wraps [fu_primary_nav] shortcode output in <p>...</p>. Whether the
   browser auto-closes it or not, display:contents dissolves the <p> box so
   its children (if any) become direct flex children of .fu-header__inner.
   Safer than display:none — won't accidentally hide a nested <nav>. */
.fu-header__inner > p { display: contents; }

/* === MOBILE / TABLET (<1024px): nav is a fixed slide-in sheet === */
.fu-header__nav {
	display: block;
	position: fixed;
	inset: 0;
	background: var(--wp--preset--color--azul-profundo);
	padding: 5rem 1.5rem 2rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(100%);
	transition: transform .3s ease;
	z-index: 9999;
}
body.fu-menu-open .fu-header__nav { transform: translateX(0); }
body.fu-menu-open { overflow: hidden; }
body.fu-menu-open .fu-header { z-index: 9999; }
body.fu-menu-open .fu-header__toggle {
	z-index: 10000;
	color: var(--wp--preset--color--blanco);
}
body.fu-menu-open .fu-header__toggle:hover {
	background-color: rgba(255, 255, 255, 0.1);
}
body.fu-menu-open .fu-header__toggle .fu-header__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
body.fu-menu-open .fu-header__toggle .fu-header__toggle-bar:nth-child(2) {
	opacity: 0;
}
body.fu-menu-open .fu-header__toggle .fu-header__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Sheet menu list — block layout, yellow tops, collapsible subs (mobile defaults). */
.fu-header__menu {
	display: block;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 28rem;
}
.fu-header__menu > li {
	display: block;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.fu-header__menu > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--amarillo-boca);
	text-decoration: none;
	transition: color .15s ease, opacity .15s ease;
}
.fu-header__menu > li > a:hover { opacity: 0.85; }
.fu-header__menu > li.current-menu-item > a,
.fu-header__menu > li.current-menu-parent > a,
.fu-header__menu > li.current-menu-ancestor > a {
	color: var(--wp--preset--color--blanco);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--amarillo-boca);
	text-underline-offset: 4px;
}
.fu-header__menu > li.menu-item-has-children > a::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-right: 4px;
	order: 2;
	transition: transform .25s ease;
	flex-shrink: 0;
}
.fu-header__menu > li.menu-item-has-children.is-expanded > a::before {
	transform: rotate(-135deg);
}
.fu-header__menu .sub-menu {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0 0 0 1rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease, padding .25s ease;
}
.fu-header__menu > li.is-expanded > .sub-menu {
	max-height: 600px;
	padding-bottom: 0.5rem;
}
.fu-header__menu .sub-menu li { display: block; }
.fu-header__menu .sub-menu a {
	display: block;
	color: rgba(255, 255, 255, 0.75);
	padding: 0.5rem 0;
	font-size: 1rem;
	text-decoration: none;
	transition: color .15s ease;
}
.fu-header__menu .sub-menu a:hover,
.fu-header__menu .sub-menu .current-menu-item > a {
	background: transparent;
	color: var(--wp--preset--color--amarillo-boca);
}

/* === DESKTOP (≥1024px): logo left + horizontal nav + cta right === */
@media (min-width: 1024px) {
	/* Hamburger hidden — nav is inline. */
	.fu-header__toggle { display: none; }

	/* Logo: back in flow, left-aligned. 72px for prominence (up from 64). */
	.fu-header__logo {
		position: static;
		transform: none;
		pointer-events: auto;
	}
	.fu-header__logo .custom-logo {
		width: 72px;
		height: 72px;
		max-width: 72px;
		max-height: 72px;
	}

	/* Nav: takes ALL remaining space between logo and CTA via flex:1, then
	   centers its menu items via justify-content: center on the inner <ul>.
	   This places the nav items in the optical middle of the header,
	   regardless of logo/cta widths. */
	.fu-header__nav {
		display: flex;
		position: static;
		inset: auto;
		background: transparent;
		padding: 0;
		overflow: visible;
		transform: none;
		transition: none;
		z-index: auto;
		align-items: center;
		flex: 1; /* fill space between logo and cta */
	}

	/* Menu: horizontal row, centered within the nav box. */
	.fu-header__menu {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 1.75rem;
		margin: 0;
		padding: 0;
		max-width: none;
		width: 100%;
	}
	.fu-header__menu > li {
		display: list-item;
		border-bottom: 0;
		position: relative;
	}

	/* Top-level links: desktop style (azul-profundo uppercase compact). */
	.fu-header__menu > li > a {
		display: inline-block;
		padding: 0.5rem 0;
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--wp--preset--color--azul-profundo);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		text-decoration: none;
		white-space: nowrap;
		position: relative;
	}
	.fu-header__menu > li > a:hover { opacity: 1; }
	.fu-header__menu > li.current-menu-item > a,
	.fu-header__menu > li.current-menu-parent > a,
	.fu-header__menu > li.current-menu-ancestor > a {
		color: var(--wp--preset--color--azul-profundo);
		text-decoration: none;
	}
	/* Yellow underline animation under top-level links. */
	.fu-header__menu > li > a::after {
		content: "";
		position: absolute;
		left: 0; right: 0;
		bottom: -2px;
		height: 2px;
		background: var(--wp--preset--color--amarillo-boca);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform .2s ease-out;
	}
	.fu-header__menu > li > a:hover::after,
	.fu-header__menu > li.current-menu-item > a::after,
	.fu-header__menu > li.current-menu-parent > a::after,
	.fu-header__menu > li.current-menu-ancestor > a::after {
		transform: scaleX(1);
	}
	/* Kill mobile chevron on desktop (sub-menus use hover dropdown). */
	.fu-header__menu > li.menu-item-has-children > a::before { display: none; }

	/* Desktop dropdowns: absolute below parent, hover-revealed. */
	.fu-header__menu .sub-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 16rem;
		max-height: none;
		overflow: visible;
		background: var(--wp--preset--color--blanco);
		border: 1px solid var(--wp--preset--color--gris-borde);
		border-radius: 0.5rem;
		box-shadow: 0 10px 25px -5px rgba(10, 46, 92, 0.15), 0 6px 10px -6px rgba(10, 46, 92, 0.08);
		padding: 0.5rem 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity .15s, visibility .15s, transform .15s;
	}
	.fu-header__menu > li:hover > .sub-menu,
	.fu-header__menu > li:focus-within > .sub-menu,
	.fu-header__menu > li.is-expanded > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.fu-header__menu .sub-menu a {
		padding: 0.625rem 1rem;
		color: var(--wp--preset--color--gris-texto);
		font-size: 0.875rem;
	}
	.fu-header__menu .sub-menu a:hover,
	.fu-header__menu .sub-menu .current-menu-item > a {
		background: var(--wp--preset--color--amarillo-suave);
		color: var(--wp--preset--color--azul-profundo);
	}
}

/* -----------------------------------------------------------------
 * 7. Site footer.
 *    Override de Blocksy: parts/footer.html + inc/menus.php.
 * ----------------------------------------------------------------- */

/* Outer band: fondo azul-profundo edge-to-edge gracias a align:full.
   Sin border-top: el footer se diferencia por el cambio brusco de color. */
.fu-footer {
	font-family: var(--wp--preset--font-family--sans);
}

/* Contenido contenido a wideSize (1280px) y centrado dentro del fondo full-width.
   .is-layout-constrained del outer aplica margin-inline:auto automáticamente, pero
   declaramos explícito por defensiva. */
.fu-footer__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--80);
	padding-inline: var(--wp--preset--spacing--60);
}

.fu-footer__cols {
	gap: var(--wp--preset--spacing--70);
}

/* Logo del footer: 80px, fondo blanco para contraste sobre el azul. */
.fu-footer__brand .custom-logo {
	width: 80px;
	height: 80px;
	max-width: 80px;
	object-fit: contain;
	border-radius: 9999px;
	background: var(--wp--preset--color--blanco);
	padding: 4px;
}

.fu-footer__tagline {
	margin-top: var(--wp--preset--spacing--40);
	color: rgba(255, 255, 255, 0.85);
	max-width: 22rem;
	line-height: 1.5;
}

.fu-footer__address {
	margin-top: var(--wp--preset--spacing--30);
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.5;
}

.fu-footer__email {
	margin-top: var(--wp--preset--spacing--20);
}

.fu-footer__email a {
	color: var(--wp--preset--color--blanco);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.3);
	text-underline-offset: 2px;
	transition: color .12s, text-decoration-color .12s;
}

.fu-footer__email a:hover {
	color: var(--wp--preset--color--amarillo-boca);
	text-decoration-color: var(--wp--preset--color--amarillo-boca);
}

/* Eyebrow style: el color amarillo lo aplica el bloque (textColor=amarillo-boca).
   Acá solo damos la tipografía y el tracking. */
.fu-footer__heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
}

.fu-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.fu-footer__menu a {
	color: var(--wp--preset--color--blanco);
	font-size: 0.875rem;
	text-decoration: none;
	transition: color .12s;
}

.fu-footer__menu a:hover,
.fu-footer__menu .current-menu-item > a {
	color: var(--wp--preset--color--amarillo-boca);
}

/* Social-links: redondos transparentes con borde blanco/30, ícono blanco.
   Hover: fondo amarillo, ícono azul-profundo. Pisa el bg default del bloque
   sin !important — la especificidad alcanza. */
.fu-footer__social {
	margin: 0;
}

.fu-footer__social .wp-social-link {
	background-color: transparent;
}

.fu-footer__social .wp-social-link .wp-block-social-link-anchor,
.fu-footer__social .wp-social-link a {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--wp--preset--color--blanco);
	transition: background-color .15s, border-color .15s, color .15s;
}

.fu-footer__social .wp-social-link svg {
	fill: currentColor;
}

.fu-footer__social .wp-social-link:hover {
	background-color: transparent;
}

.fu-footer__social .wp-social-link:hover .wp-block-social-link-anchor,
.fu-footer__social .wp-social-link:hover a {
	background-color: var(--wp--preset--color--amarillo-boca);
	border-color: var(--wp--preset--color--amarillo-boca);
	color: var(--wp--preset--color--azul-profundo);
}

/* Bottom row. */
.fu-footer__bottom {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	gap: var(--wp--preset--spacing--30);
}

.fu-footer__copy,
.fu-footer__credit {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
}

.fu-footer__credit a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.2);
	text-underline-offset: 2px;
	transition: color .12s, text-decoration-color .12s;
}

.fu-footer__credit a:hover {
	color: var(--wp--preset--color--amarillo-boca);
	text-decoration-color: var(--wp--preset--color--amarillo-boca);
}

/* -----------------------------------------------------------------
 * 8. Overrides puntuales a Blocksy.
 *    Agregar acá según vayan apareciendo conflictos.
 * ----------------------------------------------------------------- */

/* ============================================================
   Home page — full-bleed alignfull (clean approach)
   Remove parent max-width clamps so .alignfull works natively.
   Inner content stays centered via WP constrained layout
   (.has-global-padding + theme.json contentSize: 1280px).
   ============================================================ */
body.home article.post-2073,
body.home article.post-2073 > .entry-content {
	max-width: none !important;
	width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ============================================================
   Internal pages — full-bleed alignfull (generalized).
   Auto-targets any page/post that uses the .fu-pattern-page-hero
   pattern. Removes the Blocksy ct-container max-width clamp on
   the article + .entry-content so .alignfull breaks out edge-to-edge.
   Uses :has() (WP 7.0 baseline is 2024+ browsers — supported).
   ============================================================ */
body:has(.fu-pattern-page-hero) article,
body:has(.fu-pattern-page-hero) article > .entry-content {
	max-width: none !important;
	width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ============================================================
   page-hero inner — constrain content to the 1280px wide-size
   so breadcrumbs / eyebrow / h1 / subhead align with the Blocksy
   header logo container. The pattern's source uses layout:default
   (is-layout-flow) which doesn't constrain — this CSS overrides
   without re-pushing the 8 migrated posts.

   Mirrors the home's fu-hero-inner: max-width 1280px (wideSize),
   centered horizontally, with the same spacing|60 inline padding.
   ============================================================ */
.fu-pattern-page-hero .fu-pattern-page-hero__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--60);
	box-sizing: border-box;
	width: 100%;
}
@media (max-width: 767px) {
	/* Match header's 16px mobile gutter so internal-page hero content
	   aligns vertically with the logo on the same axis. */
	.fu-pattern-page-hero .fu-pattern-page-hero__inner {
		padding-inline: 1rem;
	}
}

/* Home hero inner — matches Lovable px-4 mobile / lg:px-8 desktop. */
.fu-pattern-hero-home .fu-hero-inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1rem; /* 16px mobile */
	box-sizing: border-box;
	width: 100%;
}
@media (min-width: 1024px) {
	.fu-pattern-hero-home .fu-hero-inner {
		padding-inline: 2rem; /* 32px desktop */
	}
}

/* ============================================================
   Home hero — restore full-width on the cover's __inner-container.

   Core's wp-block-cover ships a rule that shrinks the inner-container
   to width:auto whenever a content-position class is applied. We re-
   assert width:100% with enough specificity to win. Two selectors so
   both is-position-center-left (current) and is-position-bottom-left
   (legacy) keep working through the pattern transition.
   ============================================================ */
.wp-block-cover.fu-pattern-hero-home.has-custom-content-position.is-position-center-left .wp-block-cover__inner-container,
.wp-block-cover.fu-pattern-hero-home.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container {
	width: 100%;
}

/* ============================================================
   Home hero — compact per Andy's design decision (deviates from
   Lovable's 60/70vh). Bounded: min 480px floor, 60vh natural,
   65vh max even on huge screens.
   ============================================================ */
.fu-pattern-hero-home {
	min-height: 480px !important; /* overrides inline 600px from block */
	height: 60vh;
	max-height: 65vh;
}

/* Mobile (<768px): the compact 60vh/65vh clamp + center-left vertical
   centering crops the top of the content behind the sticky header (the
   eyebrow reads "JUNIORS · DESDE 1953" because the first wrap line is
   hidden under the 72px header). On mobile, drop the height clamps and
   start content from the top with breathing room below the header. */
@media (max-width: 767px) {
	.fu-pattern-hero-home {
		height: auto !important;
		min-height: 60vh !important;
		max-height: none !important;
		align-items: flex-start !important;
	}
	.fu-pattern-hero-home > .wp-block-cover__inner-container {
		padding-top: 96px !important;  /* 72px sticky header + 24px buffer */
		padding-bottom: 40px !important;
	}
}

/* H1: 800px mobile-base, narrowed to 700px on desktop so line-2
   wraps naturally to "Vos hacés / LA DIFERENCIA." (2 lines), matching
   Lovable's visual rhythm — instead of one wide line stretching across
   the viewport. */
.fu-pattern-hero-home__title {
	max-width: 800px;
	margin: 0;
}
@media (min-width: 1024px) {
	.fu-pattern-hero-home__title {
		max-width: 700px;
	}
}
.fu-pattern-hero-home__title .fu-hero-line-1 {
	display: block;
	font-style: italic;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.875rem; /* 30px — Lovable text-3xl */
	line-height: 1.1;
}
@media (min-width: 768px) {
	.fu-pattern-hero-home__title .fu-hero-line-1 {
		font-size: 2.25rem; /* 36px — text-4xl */
	}
}
@media (min-width: 1024px) {
	.fu-pattern-hero-home__title .fu-hero-line-1 {
		font-size: 3rem; /* 48px — text-5xl */
	}
}
.fu-pattern-hero-home__title .fu-hero-line-2 {
	display: block;
	margin-top: 8px; /* Lovable mt-2 */
	color: #FFFFFF;
	font-size: 3rem; /* 48px — text-5xl */
	line-height: 1.05;
}
@media (min-width: 768px) {
	.fu-pattern-hero-home__title .fu-hero-line-2 {
		font-size: 3.75rem; /* 60px — text-6xl */
	}
}
@media (min-width: 1024px) {
	.fu-pattern-hero-home__title .fu-hero-line-2 {
		font-size: 4.5rem; /* 72px — text-7xl */
	}
}
.fu-pattern-hero-home__title .fu-hero-accent {
	color: var(--wp--preset--color--amarillo-boca);
}

/* Keeps the period attached to "DIFERENCIA" so it never wraps alone on a
   narrow viewport. Wrapping the unit (rather than just the dot) lets the
   line break happen BEFORE "DIFERENCIA." instead of between word and dot. */
.fu-nobreak {
	white-space: nowrap;
}

/* Subhead: max-width 600px, 18px mobile / 20px desktop. */
.fu-pattern-hero-home__subhead {
	max-width: 600px;
	margin: 0;
}
@media (min-width: 1024px) {
	.fu-pattern-hero-home__subhead {
		font-size: 1.25rem !important; /* 20px — overrides inline 1.125rem */
	}
}

/* Eyebrow: zero margin so the group's blockGap is the only vertical spacing. */
.fu-pattern-hero-home__eyebrow {
	margin: 0;
}

/* CTA row: vertical full-width stack on mobile, horizontal auto on sm+.
   Both buttons enforce 36px fixed height to match Lovable's h-9. */
.fu-pattern-hero-home__ctas {
	display: flex !important;
	flex-direction: column;
	gap: 1rem; /* 16px */
	align-items: stretch;
	flex-wrap: wrap;
}
.fu-pattern-hero-home__ctas .wp-block-button {
	width: 100%;
	margin: 0;
}
.fu-pattern-hero-home__ctas .wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 36px;
	box-sizing: border-box;
	line-height: 1;
	text-align: center;
}
@media (min-width: 640px) {
	.fu-pattern-hero-home__ctas {
		flex-direction: row;
		align-items: center;
	}
	.fu-pattern-hero-home__ctas .wp-block-button,
	.fu-pattern-hero-home__ctas .wp-block-button .wp-block-button__link {
		width: auto;
	}
}

/* -----------------------------------------------------------------
 * 9. Button hover states (hero + general CTAs).
 * ----------------------------------------------------------------- */

/* Outline button hover invert (used in hero) */
.fu-btn-outline-invert .wp-block-button__link {
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.fu-btn-outline-invert .wp-block-button__link:hover,
.fu-btn-outline-invert .wp-block-button__link:focus-visible {
	background-color: #FFFFFF !important;
	color: #0E3F7E !important;
	border-color: #FFFFFF !important;
}

/* Primary yellow button hover (subtle darken) */
.fu-btn-primary .wp-block-button__link {
	transition: filter 180ms ease;
}
.fu-btn-primary .wp-block-button__link:hover,
.fu-btn-primary .wp-block-button__link:focus-visible {
	filter: brightness(0.92);
}

/* -----------------------------------------------------------------
 * 10. Stats home — vertical dividers between columns on desktop.
 * ----------------------------------------------------------------- */
@media (min-width: 782px) {
	.fu-pattern-stats-home .fu-stat-divider {
		border-left: 1px solid #E5E7EB;
	}
}

/* -----------------------------------------------------------------
 * 11. Noticias home — card hover lift + image styling.
 * ----------------------------------------------------------------- */
.fu-pattern-noticias-home .wp-block-post {
	background: #FFFFFF;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(10, 46, 92, 0.06);
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.fu-pattern-noticias-home .wp-block-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px rgba(10, 46, 92, 0.12);
}
.fu-pattern-noticias-home .wp-block-post-featured-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}
.fu-pattern-noticias-home .wp-block-post-title a {
	color: #0A2E5C;
	text-decoration: none;
}
.fu-pattern-noticias-home .wp-block-post-title a:hover {
	color: #0E3F7E;
}
.fu-pattern-noticias-home .wp-block-post > * {
	padding-inline: 1.25rem;
}
.fu-pattern-noticias-home .wp-block-post-featured-image {
	padding-inline: 0;
}
.fu-pattern-noticias-home .wp-block-post > *:last-child {
	padding-bottom: 1.25rem;
}

/* Featured (left, large) card — taller image, larger title */
.fu-pattern-noticias-home .wp-block-columns > .wp-block-column:first-child .wp-block-post-featured-image img {
	height: 380px;
}
.fu-pattern-noticias-home .wp-block-columns > .wp-block-column:first-child .wp-block-post-title {
	font-size: 1.5rem;
}

/* Small (right) cards — shorter image, tighter title and excerpt */
.fu-pattern-noticias-home .wp-block-columns > .wp-block-column:last-child .wp-block-post-featured-image img {
	height: 180px;
}
.fu-pattern-noticias-home .wp-block-columns > .wp-block-column:last-child .wp-block-post-title {
	font-size: 1.1rem;
}
.fu-pattern-noticias-home .wp-block-columns > .wp-block-column:last-child .wp-block-post-excerpt {
	font-size: 0.9rem;
}

/* Category badge (post-terms) — amarillo-boca pill like Lovable.
 * Pill shape (border-radius: 9999px), generous horizontal padding, mono
 * uppercase with wide letter-spacing. The text is forced to singular
 * ("NOTICIA" / "EVENTO" / "COMUNICADO") by inc/news-query.php's
 * render_block_core/post-terms filter — CSS just handles the visual chip.
 *
 * Alignment: the badge's `padding` shorthand overrides the card-level
 * `padding-inline: 1.25rem` from `.wp-block-post > *` above (1278). To
 * keep the badge's LEFT EDGE aligned with the body text's left edge, we
 * apply `margin-inline-start: 1.25rem` here. RTL safe via the logical
 * property. `margin-top` separates the pill from the image above. */
.fu-pattern-noticias-home .wp-block-post-terms {
	display: inline-block;
	background: var(--wp--preset--color--amarillo-boca);
	color: var(--wp--preset--color--azul-profundo);
	padding: 0.35rem 0.85rem;
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.2;
	margin-top: var(--wp--preset--spacing--40);
	margin-inline-start: 1.25rem;
	margin-bottom: 0.75rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fu-pattern-noticias-home .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}
.fu-pattern-noticias-home .wp-block-post:hover .wp-block-post-terms {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px -4px rgba(244, 198, 0, 0.5);
}

/* -----------------------------------------------------------------
 * 12bis. Article letter — amber drop-cap (theme-global).
 *     Any paragraph with class `.has-drop-cap` (Gutenberg's drop-cap option)
 *     renders its first letter in amarillo-boca + display font. The previous
 *     version of this rule was scoped per page-id, which silently dropped
 *     the styling when a new page (e.g. 109 Pedro Edgardo) used a drop-cap
 *     without being added to the list. Theme-wide rule is simpler and self-
 *     maintaining.
 * ----------------------------------------------------------------- */
.has-drop-cap::first-letter {
	color: var(--wp--preset--color--amarillo-boca);
	font-family: var(--wp--preset--font-family--display);
	font-size: 5rem;
	line-height: 1;
	margin-right: 0.5rem;
	float: left;
}

/* -----------------------------------------------------------------
 * 12. Embed map — 16/9 responsive wrapper for Google Maps iframe.
 * ----------------------------------------------------------------- */
.fu-pattern-embed-map .fu-map-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(10, 46, 92, 0.08);
}
.fu-pattern-embed-map .fu-map-wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* -----------------------------------------------------------------
 * 13. /boca/acerca-de-los-5-grandes — featured image fills container.
 *     DOM: <div.fu-5grandes-hero-image.has-global-padding> > <figure.aligncenter>
 *     The figure is aligncenter (not alignwide) and size-large (capped at the
 *     image's native 720px). Three culprits: aligncenter centers/limits width,
 *     size-large caps it, and has-global-padding adds L/R padding to the group.
 * ----------------------------------------------------------------- */
.page-id-2076 .fu-5grandes-hero-image,
.page-id-2077 .fu-article-hero-image,
.page-id-2078 .fu-article-hero-image,
.page-id-69 .fu-article-hero-image,
.postid-2031 .fu-article-hero-image {
	max-width: 900px;
	margin-inline: auto;
}
.page-id-2076 .fu-5grandes-hero-image.has-global-padding,
.page-id-2077 .fu-article-hero-image.has-global-padding,
.page-id-2078 .fu-article-hero-image.has-global-padding,
.page-id-69 .fu-article-hero-image.has-global-padding,
.postid-2031 .fu-article-hero-image.has-global-padding {
	padding-inline: 0;
}
.page-id-2076 .fu-5grandes-hero-image .wp-block-image,
.page-id-2076 .fu-5grandes-hero-image .wp-block-image.aligncenter,
.page-id-2076 .fu-5grandes-hero-image figure.wp-block-image,
.page-id-2077 .fu-article-hero-image .wp-block-image,
.page-id-2077 .fu-article-hero-image .wp-block-image.aligncenter,
.page-id-2077 .fu-article-hero-image figure.wp-block-image,
.page-id-2078 .fu-article-hero-image .wp-block-image,
.page-id-2078 .fu-article-hero-image .wp-block-image.aligncenter,
.page-id-2078 .fu-article-hero-image figure.wp-block-image,
.page-id-69 .fu-article-hero-image .wp-block-image,
.page-id-69 .fu-article-hero-image .wp-block-image.aligncenter,
.page-id-69 .fu-article-hero-image figure.wp-block-image,
.postid-2031 .fu-article-hero-image .wp-block-image,
.postid-2031 .fu-article-hero-image .wp-block-image.aligncenter,
.postid-2031 .fu-article-hero-image figure.wp-block-image {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}
.page-id-2076 .fu-5grandes-hero-image .wp-block-image img,
.page-id-2077 .fu-article-hero-image .wp-block-image img,
.page-id-2078 .fu-article-hero-image .wp-block-image img,
.page-id-69 .fu-article-hero-image .wp-block-image img,
.postid-2031 .fu-article-hero-image .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}
.page-id-2076 .fu-5grandes-hero-image .wp-element-caption,
.page-id-2077 .fu-article-hero-image .wp-element-caption,
.page-id-2078 .fu-article-hero-image .wp-element-caption,
.page-id-69 .fu-article-hero-image .wp-element-caption,
.postid-2031 .fu-article-hero-image .wp-element-caption {
	margin-top: 0.75rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--gris-medio);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------
 * 14. /boca/acerca-de-los-5-grandes — "Seguí leyendo" cards.
 *     Uniform 16/9 image, hover lift, padding on text children.
 * ----------------------------------------------------------------- */
.page-id-2076 .fu-related-card {
	background: #FFFFFF;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(10, 46, 92, 0.06);
	transition: transform 220ms ease, box-shadow 220ms ease;
	display: flex;
	flex-direction: column;
}
.page-id-2076 .fu-related-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px rgba(10, 46, 92, 0.12);
}
.page-id-2076 .fu-related-card .wp-block-image,
.page-id-2076 .fu-related-card figure {
	margin: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.page-id-2076 .fu-related-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.page-id-2076 .fu-related-card > *:not(.wp-block-image):not(figure) {
	padding-inline: 1.25rem;
}
.page-id-2076 .fu-related-card > *:last-child {
	padding-bottom: 1.25rem;
}
.page-id-2076 .fu-related-card a {
	text-decoration: none;
}
.page-id-2076 .fu-related-card a:hover {
	color: var(--wp--preset--color--azul-boca);
}

/* Force all 3 related cards to equal height regardless of title length.
 * Image stays at top (fixed aspect ratio). The eyebrow paragraph gets
 * margin-top:auto, which pushes eyebrow + title together as a unit to the
 * bottom of the card — visual unit stays intact instead of the title
 * floating alone at the bottom while the eyebrow is stuck near the image. */
.page-id-2076 .wp-block-columns.is-layout-flex {
	align-items: stretch;
}
.page-id-2076 .wp-block-columns > .wp-block-column.fu-related-card {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
.page-id-2076 .fu-related-card .wp-block-image {
	flex-shrink: 0;
}
.page-id-2076 .fu-related-card > p:first-of-type {
	margin-top: auto;
	padding-top: 1.5rem;
}

/* -----------------------------------------------------------------
 * 15. /boca/mensaje-a-los-boquenses — 63-row trophy table.
 *     Compact monospaced numeric column, comfortable row height,
 *     subtle stripes (works with WP's is-style-stripes table style).
 * ----------------------------------------------------------------- */
.page-id-2078 .fu-mensaje-trophies {
	margin-top: 0;
	margin-bottom: 0;
}
.page-id-2078 .fu-mensaje-trophies table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.95rem;
}
.page-id-2078 .fu-mensaje-trophies thead th {
	background: var(--wp--preset--color--azul-profundo);
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	padding: 0.75rem 1rem;
}
.page-id-2078 .fu-mensaje-trophies tbody td {
	padding: 0.5rem 1rem;
	color: var(--wp--preset--color--azul-profundo);
	border-bottom: 1px solid #E5E7EB;
}
.page-id-2078 .fu-mensaje-trophies tbody td:first-child {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	color: var(--wp--preset--color--amarillo-boca);
	width: 3rem;
}
.page-id-2078 .fu-mensaje-trophies tbody td:nth-child(2) {
	font-family: var(--wp--preset--font-family--mono);
	width: 5rem;
}
.page-id-2078 .fu-mensaje-trophies.is-style-stripes tbody tr:nth-child(odd) {
	background-color: #F8FAFC;
}

/* -----------------------------------------------------------------
 * 16. /futbol-amateur — juvenile champions + stats tables.
 *     Two tables: 49-row year-by-year champions (8 cols, scrollable on mobile)
 *     and 28-row stats-by-club ranking. Boca cells/rows highlighted amber.
 * ----------------------------------------------------------------- */
.page-id-1053 .fu-amateur-table {
	margin-top: 0;
	margin-bottom: 0;
}
.page-id-1053 .fu-amateur-table.is-scrollable {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.page-id-1053 .fu-amateur-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.85rem;
}
.page-id-1053 .fu-amateur-table thead th {
	background: var(--wp--preset--color--azul-profundo);
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.6rem 0.5rem;
	text-align: left;
	white-space: nowrap;
}
.page-id-1053 .fu-amateur-table tbody td {
	padding: 0.4rem 0.5rem;
	color: var(--wp--preset--color--azul-profundo);
	border-bottom: 1px solid #E5E7EB;
	white-space: nowrap;
}
.page-id-1053 .fu-amateur-table tbody tr:nth-child(odd) td {
	background-color: #F8FAFC;
}
.page-id-1053 .fu-amateur-table td.fu-boca-cell {
	background-color: var(--wp--preset--color--amarillo-boca) !important;
	color: var(--wp--preset--color--azul-profundo);
	font-weight: 700;
}
.page-id-1053 .fu-amateur-table--champions tbody td:first-child {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
}
.page-id-1053 .fu-amateur-table--stats tbody td:nth-child(2),
.page-id-1053 .fu-amateur-table--stats tbody td:nth-child(3) {
	font-family: var(--wp--preset--font-family--mono);
	text-align: right;
	width: 5rem;
}

/* -----------------------------------------------------------------
 * 17. /audiovisuales/fotos — subtle sepia hover effect on thumbnails.
 *     Mirrors Lovable's `[&_img]:[filter:sepia(0.1)]` Tailwind utility.
 *     Scoped by gallery class (no page-id required) so it works on
 *     any page using the fu-fotos-gallery wrapper.
 * ----------------------------------------------------------------- */
.fu-fotos-gallery img {
	filter: sepia(0.1);
	transition: filter 500ms ease;
}
.fu-fotos-gallery a:hover img,
.fu-fotos-gallery a:focus-visible img,
.fu-fotos-gallery .wp-block-image:hover img {
	filter: sepia(0);
}

/* -----------------------------------------------------------------
 * 18. /audiovisuales/ hub — 2 large clickable cards (Fotos + Videos).
 *     Each card is a core/cover with a title link; CSS stretches the
 *     link to cover the whole card and adds the Lovable brightness
 *     hover behaviour (75% → 100%).
 * ----------------------------------------------------------------- */
.fu-audiovisuales-card {
	position: relative;
	overflow: hidden;
	transition: transform 220ms ease;
}
.fu-audiovisuales-card .wp-block-cover__image-background,
.fu-audiovisuales-card .wp-block-cover__video-background {
	filter: brightness(0.75);
	transition: filter 500ms ease;
}
.fu-audiovisuales-card:hover .wp-block-cover__image-background,
.fu-audiovisuales-card:hover .wp-block-cover__video-background {
	filter: brightness(1);
}
.fu-audiovisuales-card:hover {
	transform: translateY(-4px);
}
/* Stretch the title link across the whole card so the entire surface is
 * clickable. The ::after pseudo sits above the cover's overlay layer. */
.fu-audiovisuales-card .fu-audiovisuales-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 10;
}
.fu-audiovisuales-card .fu-audiovisuales-card__title a {
	color: inherit;
	text-decoration: none;
}
/* CTA line is hidden by default and fades in on hover, matching Lovable's
 * `opacity-0 group-hover:opacity-100`. */
.fu-audiovisuales-card .fu-audiovisuales-card__cta {
	opacity: 0;
	transition: opacity 220ms ease;
}
.fu-audiovisuales-card:hover .fu-audiovisuales-card__cta,
.fu-audiovisuales-card:focus-within .fu-audiovisuales-card__cta {
	opacity: 1;
}

/* -----------------------------------------------------------------
 * 19. /historia — left-align figcaptions across the page.
 *     Overrides WP's default .wp-element-caption text-align: center
 *     (which kicks in on aligncenter figures and on some Blocksy themes).
 * ----------------------------------------------------------------- */
.page-id-129 .wp-block-image figcaption,
.page-id-129 .wp-block-image .wp-element-caption {
	text-align: left;
}

/* -----------------------------------------------------------------
 * 22. Bio pages (Orgambide x2) — shared row-list for cargo + periodo.
 *     Used on /pedro-antonio-orgambide and /pedro-edgardo-orgambide.
 *     Two-column rows: role name (sans, azul-profundo) on the left,
 *     period/year (mono, gris-medio, tabular-nums) on the right.
 * ----------------------------------------------------------------- */
.fu-bio-rowlist {
	list-style: none;
	padding: 0;
	margin: 0;
}
.fu-bio-rowlist li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--gris-borde);
}
.fu-bio-rowlist__name {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 1rem;
	color: var(--wp--preset--color--azul-profundo);
	flex: 1 1 auto;
}
@media (min-width: 1024px) {
	.fu-bio-rowlist__name { font-size: 1.125rem; }
}
.fu-bio-rowlist__date {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.875rem;
	color: var(--wp--preset--color--gris-medio);
	white-space: nowrap;
	flex-shrink: 0;
}
.fu-bio-rowlist--2col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 2rem;
}
@media (min-width: 640px) {
	.fu-bio-rowlist--2col { grid-template-columns: 1fr 1fr; }
}
.fu-bio-photo-social {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--gris-medio);
}
.fu-bio-photo-social a {
	color: inherit;
	text-decoration: none;
}
.fu-bio-photo-social a:hover {
	color: var(--wp--preset--color--azul-profundo);
}

/* -----------------------------------------------------------------
 * 23. Bio pages — remove card-like framing from section modules.
 *     Lovable uses subtle horizontal-rule separators with content
 *     flowing to the rule edges (no internal indent). Our inline
 *     `padding-inline: spacing|60` (32px) creates a visible gap
 *     between the border-top and the content, making each section
 *     look like a bordered card. Shrinking to Lovable's px-4/lg:px-8
 *     (1rem mobile / 2rem desktop) + defensively killing any other
 *     border sides and background restores the flat-separator look.
 * ----------------------------------------------------------------- */
.page-id-115 .fu-bio-section,
.page-id-109 .fu-bio-section,
.page-id-115 .fu-bio-top,
.page-id-109 .fu-bio-top {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
	background: transparent !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	border-left: 0 !important;
}
@media (min-width: 1024px) {
	.page-id-115 .fu-bio-section,
	.page-id-109 .fu-bio-section,
	.page-id-115 .fu-bio-top,
	.page-id-109 .fu-bio-top {
		padding-left: 2rem !important;
		padding-right: 2rem !important;
	}
}

/* -----------------------------------------------------------------
 * 24. Bio + Historia — 2-column "image left, text right" parity with Lovable.
 *     The Gutenberg blocks use `are-vertically-aligned-top`, which leaves
 *     vertical whitespace below the photo when the right (text) column is
 *     much taller. Override to stretch the columns and let the figure/img
 *     fill the column height with object-fit:cover. Desktop only — on
 *     mobile the columns stack and stretch is meaningless.
 *     Affects: page-id-115 (Pedro Antonio), 109 (Pedro Edgardo), 129 (Historia).
 * ----------------------------------------------------------------- */
@media (min-width: 782px) {
	.page-id-115 .wp-block-columns.are-vertically-aligned-top,
	.page-id-109 .wp-block-columns.are-vertically-aligned-top,
	.page-id-129 .wp-block-columns.are-vertically-aligned-top {
		align-items: stretch;
	}
	.page-id-115 .wp-block-columns.are-vertically-aligned-top > .wp-block-column,
	.page-id-109 .wp-block-columns.are-vertically-aligned-top > .wp-block-column,
	.page-id-129 .wp-block-columns.are-vertically-aligned-top > .wp-block-column {
		display: flex;
		flex-direction: column;
		align-self: stretch;
	}
	.page-id-115 .wp-block-columns.are-vertically-aligned-top > .wp-block-column > .wp-block-image,
	.page-id-109 .wp-block-columns.are-vertically-aligned-top > .wp-block-column > .wp-block-image,
	.page-id-129 .wp-block-columns.are-vertically-aligned-top > .wp-block-column > .wp-block-image {
		margin: 0;
		flex: 1 1 auto;
		min-height: 320px;
		/* Column flex so an optional <figcaption> stacks BELOW the <img>
		 * instead of beside it (default row direction squished it to ~1ch
		 * on /historia/'s Baglietto image). */
		display: flex;
		flex-direction: column;
	}
	.page-id-115 .wp-block-columns.are-vertically-aligned-top > .wp-block-column > .wp-block-image img,
	.page-id-109 .wp-block-columns.are-vertically-aligned-top > .wp-block-column > .wp-block-image img,
	.page-id-129 .wp-block-columns.are-vertically-aligned-top > .wp-block-column > .wp-block-image img {
		width: 100%;
		/* flex:1 absorbs remaining vertical space (after figcaption is
		 * allocated its natural height). min-height:0 lets the img shrink
		 * below its intrinsic height inside the flex column. Without these,
		 * a tall figcaption would push the img out of view. */
		flex: 1 1 auto;
		min-height: 0;
		object-fit: cover;
		display: block;
		border-radius: inherit;
	}
	/* Pedro Edgardo (109) — exception to the stretch-to-fill rule above.
	 * Edgardo's right column contains ALL bio sections (formación, trayectoria,
	 * cargos, elecciones, AFA, delegaciones, publicaciones) flowing vertically,
	 * so the column is ~2000px tall. SET 1's `flex: 1 1 auto` on the image
	 * would stretch the photo to that full height — desproportionate. Scope
	 * SET 1 down so it does NOT apply inside `.fu-bio-top` on this page: the
	 * image takes its natural aspect-ratio (3:4 at 33% width) and the column
	 * stops aligning to the photo. The other tall pages (115 Pedro Antonio,
	 * 129 Historia) keep the original stretch behavior because their right
	 * columns are short enough that stretching looks correct.
	 *
	 * `align-self: flex-start` on each column (overriding SET 1's `align-self:
	 * stretch`) keeps both image and FORMACIÓN at Y=0 of fu-bio-top's content
	 * box (top of the row), without stretching to match each other's height.
	 * Resetting padding/margin top on the column + first child guarantees no
	 * stray offset pushes FORMACIÓN below the image's top edge. */
	.page-id-109 .fu-bio-top .wp-block-columns.are-vertically-aligned-top {
		align-items: flex-start !important;
	}
	.page-id-109 .fu-bio-top .wp-block-columns.are-vertically-aligned-top > .wp-block-column {
		align-self: flex-start !important;
		padding-top: 0 !important;
		margin-top: 0 !important;
	}
	.page-id-109 .fu-bio-top .wp-block-columns.are-vertically-aligned-top > .wp-block-column > :first-child {
		margin-top: 0 !important;
	}
	.page-id-109 .fu-bio-top .wp-block-columns.are-vertically-aligned-top > .wp-block-column > .wp-block-image {
		flex: 0 0 auto !important;
		min-height: 0 !important;
		margin-top: 0 !important;
	}
	.page-id-109 .fu-bio-top .wp-block-columns.are-vertically-aligned-top > .wp-block-column > .wp-block-image img {
		flex: 0 0 auto !important;
		min-height: 0 !important;
		height: auto !important;
	}

	/* Figcaption: sit below the image at natural height. No flex sizing
	 * needed — the parent's flex-direction:column handles the stacking. */
	.page-id-115 .wp-block-columns.are-vertically-aligned-top > .wp-block-column > .wp-block-image > figcaption,
	.page-id-109 .wp-block-columns.are-vertically-aligned-top > .wp-block-column > .wp-block-image > figcaption,
	.page-id-129 .wp-block-columns.are-vertically-aligned-top > .wp-block-column > .wp-block-image > figcaption {
		flex: 0 0 auto;
		width: 100%;
		margin-top: 0.5rem;
	}
}

/* -----------------------------------------------------------------
 * 24b. Bio pages — mobile (<782px): force the photo to fill its column.
 *     When wp:columns stack vertically on mobile, the photo column
 *     becomes full-width, but the <figure> + <img> render at the image's
 *     intrinsic size (e.g. 300×400), leaving whitespace on both sides.
 *     Force width:100% + height:auto so the photo fills the row while
 *     keeping its 3:4 aspect ratio.
 * ----------------------------------------------------------------- */
@media (max-width: 781px) {
	.fu-bio-top .wp-block-image,
	.fu-bio-top .wp-block-image img {
		width: 100% !important;
		max-width: 100% !important;
	}
	.fu-bio-top .wp-block-image img {
		height: auto !important;
	}
}

/* -----------------------------------------------------------------
 * 25. /la-bombonera (post 128) — chips, info table, mini-eyebrows,
 *     map iframe wrapper, and section framing override.
 * ----------------------------------------------------------------- */
/* Remove card framing on bombonera sections — same approach as bio pages.
 * Lovable uses subtle border-top separators with content flowing to the rule
 * edges (no internal indent). */
.page-id-128 .fu-bombonera-section {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
	background: transparent !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	border-left: 0 !important;
}
@media (min-width: 1024px) {
	.page-id-128 .fu-bombonera-section {
		padding-left: 2rem !important;
		padding-right: 2rem !important;
	}
}

/* Hero image — bombo1.jpg is intrinsically 610x190px, so without width:100%
 * the <figure> sizes to the image's natural width and leaves dead space on
 * the right of the alignwide wrapper (1024px). Force figure to fill the
 * wrapper and let the inline aspect-ratio:16/9 + object-fit:cover on the
 * <img> do the visual cropping. */
.page-id-128 .fu-bombonera-hero-image > .wp-block-image {
	width: 100%;
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
}
.page-id-128 .fu-bombonera-hero-image > .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Chips — bordered mono inline blocks for bus lines / door numbers. */
.fu-bombonera-chips {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.fu-bombonera-chips li {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--gris-borde);
	border-radius: 2px;
	padding: 0.25rem 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	color: var(--wp--preset--color--azul-profundo);
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

/* Mini-eyebrow (sub-section labels): two variants per Lovable. */
.fu-bombonera-mini-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gris-texto);
	margin: 0 0 0.75rem;
	font-weight: 500;
}
.fu-bombonera-mini-eyebrow--amber {
	color: var(--wp--preset--color--amarillo-boca);
	font-weight: 600;
}

/* InfoTable — definition-list style key/value rows. */
.fu-bombonera-info {
	list-style: none;
	padding: 0;
	margin: 0;
}
.fu-bombonera-info li {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--gris-borde);
}
@media (min-width: 768px) {
	.fu-bombonera-info li {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 1.5rem;
	}
}
.fu-bombonera-info li:last-child { border-bottom: 0; }
.fu-bombonera-info__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--gris-texto);
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.fu-bombonera-info__label { width: 33%; }
}
.fu-bombonera-info__value {
	color: var(--wp--preset--color--azul-profundo);
	font-size: 1rem;
	font-weight: 500;
}
@media (min-width: 768px) {
	.fu-bombonera-info__value {
		text-align: right;
		flex: 1 1 auto;
	}
}

/* Map iframe wrapper. */
.fu-bombonera-map {
	overflow: hidden;
	border-radius: 2px;
}
.fu-bombonera-map iframe {
	display: block;
	width: 100%;
	height: 400px;
	border: 0;
}

/* -----------------------------------------------------------------
 * 26. /nuestra-propuesta (post 103) — 12-item bicolumn grid.
 *     Items flow left-right-left-right (row-wise wrap) per Lovable.
 *     Each item: big mono amber number + medium azul-profundo text.
 *     Border-bottom on first 10 (not the last row). Right border on
 *     odd-index items (left column) to create the vertical divider
 *     between columns.
 * ----------------------------------------------------------------- */
.fu-propuestas-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (min-width: 768px) {
	.fu-propuestas-grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 4rem;
	}
}
@media (min-width: 1024px) {
	.fu-propuestas-grid { column-gap: 5rem; }
}
.fu-propuesta-item {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--gris-borde);
}
@media (min-width: 1024px) {
	.fu-propuesta-item { gap: 2rem; padding: 2rem 0; }
}
.fu-propuesta-item:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 768px) {
	.fu-propuesta-item:nth-child(odd) {
		border-right: 1px solid var(--wp--preset--color--gris-borde);
		padding-right: 1.5rem;
	}
	.fu-propuesta-item:nth-child(even) { padding-left: 1.5rem; }
}
@media (min-width: 1024px) {
	.fu-propuesta-item:nth-child(odd)  { padding-right: 2rem; }
	.fu-propuesta-item:nth-child(even) { padding-left: 2rem; }
}
.fu-propuesta-item__num {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: 3rem;
	color: var(--wp--preset--color--amarillo-boca);
	line-height: 1;
	min-width: 60px;
	flex-shrink: 0;
}
@media (min-width: 768px)  { .fu-propuesta-item__num { font-size: 2.25rem; } }
@media (min-width: 1024px) { .fu-propuesta-item__num { font-size: 3.75rem; min-width: 80px; } }
.fu-propuesta-item__text {
	flex: 1 1 auto;
	margin: 0;
	color: var(--wp--preset--color--azul-profundo);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.4;
}
@media (min-width: 1024px) { .fu-propuesta-item__text { font-size: 1.25rem; } }
.fu-propuesta-item__sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* -----------------------------------------------------------------
 * 27. /los-cracks (post 131) — 67-name multi-column list +
 *     "mi equipo favorito" callout with amber left border.
 * ----------------------------------------------------------------- */
.fu-cracks-list {
	list-style: none;
	padding: 0;
	margin: 0;
	columns: 1;
	column-gap: 3rem;
	column-fill: balance;
}
@media (min-width: 640px)  { .fu-cracks-list { columns: 2; } }
@media (min-width: 1024px) { .fu-cracks-list { columns: 3; } }
.fu-cracks-list li {
	padding: 0.5rem 0;
	font-size: 1rem;
	color: var(--wp--preset--color--azul-profundo);
	font-weight: 500;
	border-bottom: 1px solid rgba(229, 231, 235, 0.4);
	break-inside: avoid;
}
@media (min-width: 1024px) { .fu-cracks-list li { font-size: 1.125rem; } }

/* Pedro's signature block at the end of the opening quote. */
.fu-cracks-signature__rule {
	width: 3rem;
	height: 1px;
	background: var(--wp--preset--color--amarillo-boca);
	margin: 1.5rem auto 1rem;
}

/* "Mi equipo favorito" callout — bordered left amber box. */
.fu-cracks-callout {
	border-left: 4px solid var(--wp--preset--color--amarillo-boca);
	padding: 0.5rem 0 0.5rem 1.5rem;
	margin: 2rem 0;
}
.fu-cracks-callout__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gris-medio);
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}
.fu-cracks-callout__line {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--wp--preset--color--azul-profundo);
	margin: 0 0 1.5rem;
}
@media (min-width: 1024px) { .fu-cracks-callout__line { font-size: 1.25rem; } }
.fu-cracks-callout__line:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------
 * 28. /50o-aniversario (post 120) — 4-stat highlights grid + sepia
 *     gallery + amber accent rule between the carta and the crónica.
 * ----------------------------------------------------------------- */
.fu-aniv-highlights {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (min-width: 1024px) {
	.fu-aniv-highlights { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
.fu-aniv-highlights__card {
	background: rgba(252, 229, 136, 0.4);
	padding: 1.5rem 1rem;
	text-align: center;
	border-radius: 2px;
}
.fu-aniv-highlights__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.875rem;
	font-weight: 900;
	color: var(--wp--preset--color--azul-profundo);
	line-height: 1;
	margin: 0;
}
@media (min-width: 1024px) { .fu-aniv-highlights__num { font-size: 2.25rem; } }
.fu-aniv-highlights__label {
	font-family: var(--wp--preset--font-family--mono);
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gris-medio);
	line-height: 1.3;
}

/* Gallery sepia + hover scale (matches Lovable's [filter:sepia(20%)]). */
.fu-aniv-gallery img {
	filter: sepia(0.2);
	transition: filter 500ms ease, transform 500ms ease;
}
.fu-aniv-gallery .wp-block-image:hover img,
.fu-aniv-gallery a:hover img,
.fu-aniv-gallery a:focus-visible img {
	filter: sepia(0);
	transform: scale(1.05);
}

/* Short amber accent rule used as section divider. */
.fu-aniv-accent-rule {
	width: 4rem;
	height: 1px;
	background: var(--wp--preset--color--amarillo-boca);
	margin: 0 auto;
}

/* -----------------------------------------------------------------
 * 29. Article-card list — shared by /cabj/prensa (125) and
 *     /cabj/noticias (2079). Horizontal media+text card with
 *     thumbnail left, eyebrow + title + excerpt + "Leer nota →" right.
 *     Mirrors Lovable's <ArticleCard> component.
 * ----------------------------------------------------------------- */
.fu-article-list { display: flex; flex-direction: column; }

.fu-article-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem 0;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--gris-borde);
	transition: background-color 180ms ease;
}
.fu-article-card:last-child { border-bottom: 0; }
.fu-article-card:hover { background: rgba(10, 46, 92, 0.03); }

@media (min-width: 768px) {
	.fu-article-card { flex-direction: row; gap: 2rem; padding: 2rem 0; align-items: flex-start; }
}

.fu-article-card__thumb {
	flex-shrink: 0;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--gris-borde);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
	width: 100%;
}
@media (min-width: 768px) { .fu-article-card__thumb { width: 12rem; } }
@media (min-width: 1024px) { .fu-article-card__thumb { width: 14rem; } }

.fu-article-card__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fu-article-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

.fu-article-card__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gris-texto);
	margin: 0;
}
.fu-article-card__meta-tag {
	color: var(--wp--preset--color--amarillo-boca);
	font-weight: 500;
}
.fu-article-card__meta-sep { opacity: 0.6; }
.fu-article-card__meta-date {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
}

.fu-article-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1.2;
	color: var(--wp--preset--color--azul-profundo);
	margin: 0;
	transition: color 180ms ease;
}
@media (min-width: 1024px) { .fu-article-card__title { font-size: 1.5rem; } }
.fu-article-card:hover .fu-article-card__title { color: var(--wp--preset--color--amarillo-boca); }

.fu-article-card__excerpt {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--gris-texto);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
@media (min-width: 768px) { .fu-article-card__excerpt { -webkit-line-clamp: 2; } }

.fu-article-card__cta {
	font-size: 0.875rem;
	color: var(--wp--preset--color--azul-profundo);
	align-self: flex-start;
	margin-top: 0.25rem;
}
.fu-article-card:hover .fu-article-card__cta { text-decoration: underline; }

/* -----------------------------------------------------------------
 * 30. /cabj/prensa + /cabj/noticias v2 — Query Loop output
 *     adaptations (post-template <ul>/<li> resets + post-block
 *     internals styling) + native pagination styling + single post
 *     template layout (single.php).
 * ----------------------------------------------------------------- */

/* Query Loop wrapper resets — post-template emits <ul><li>...</li></ul>. */
.fu-cabj-list .wp-block-post-template {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.fu-cabj-list .wp-block-post-template > li {
	margin: 0;
	padding: 0;
}

/* Post-block internals inside the .fu-article-card group wrapper.
   Core blocks (post-featured-image, post-title, post-date, post-excerpt)
   emit their own classes — we re-skin them via the parent card class.

   Featured-image: WP's inline style sets width:100%; height:100%; object-fit:cover
   on the <img>, but aspect-ratio on the figure does NOT establish a containing
   block height for height:100%. So images with non-3:2 source ratios fall back
   to height:auto and create letterbox bands. Fix: absolutely position the <img>
   so it stretches to fill the figure's rendered box, then object-fit:cover crops. */
.fu-article-card .wp-block-post-featured-image {
	margin: 0;
	position: relative;
	flex-shrink: 0;
}
.fu-article-card .wp-block-post-featured-image a {
	position: absolute;
	inset: 0;
	display: block;
}
.fu-article-card .wp-block-post-featured-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover !important;
	display: block;
}
/* Mirror .fu-article-card__thumb sizing (v1 hand-composed) on the WP block. */
.fu-article-card .wp-block-post-featured-image { width: 100%; }
@media (min-width: 768px) {
	.fu-article-card .wp-block-post-featured-image { width: 12rem; }
}
@media (min-width: 1024px) {
	.fu-article-card .wp-block-post-featured-image { width: 14rem; }
}

/* Defeat is-layout-constrained's auto-margin centering on the card's children.
   Without this, the WP container CSS injects margin-left/right: auto !important
   on the figure + body, which pushes them to opposite ends of the flex row and
   makes the card look spread-out and inconsistent. */
.fu-article-card > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.fu-article-card .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1.2;
	color: var(--wp--preset--color--azul-profundo);
	margin: 0;
	transition: color 180ms ease;
}
@media (min-width: 1024px) { .fu-article-card .wp-block-post-title { font-size: 1.5rem; } }
.fu-article-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.fu-article-card .wp-block-post-title a:hover { color: var(--wp--preset--color--amarillo-boca); }

.fu-article-card .wp-block-post-date {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gris-texto);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.fu-article-card .wp-block-post-excerpt {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--gris-texto);
}
.fu-article-card .wp-block-post-excerpt p {
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
@media (min-width: 768px) {
	.fu-article-card .wp-block-post-excerpt p { -webkit-line-clamp: 2; }
}
.fu-article-card .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--azul-profundo);
	text-decoration: none;
}
.fu-article-card:hover .wp-block-post-excerpt__more-link { text-decoration: underline; }

/* Native Query Loop pagination (replaces v1 hand-composed .fu-news-pagination). */
.fu-cabj-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--gris-borde);
	font-size: 0.875rem;
	font-weight: 500;
}
.fu-cabj-pagination .wp-block-query-pagination-previous,
.fu-cabj-pagination .wp-block-query-pagination-next {
	color: var(--wp--preset--color--azul-profundo);
	text-decoration: none;
	transition: color 180ms ease;
}
.fu-cabj-pagination .wp-block-query-pagination-previous:hover,
.fu-cabj-pagination .wp-block-query-pagination-next:hover {
	color: var(--wp--preset--color--amarillo-boca);
}
.fu-cabj-pagination .wp-block-query-pagination-numbers {
	color: var(--wp--preset--color--gris-texto);
}
.fu-cabj-pagination .wp-block-query-pagination-numbers .current {
	color: var(--wp--preset--color--azul-profundo);
	font-weight: 700;
}

/* =================================================================
 * Single post template (single-post.php) — hero + featured image +
 * article body with a full typographic reading system.
 *
 * Layout strategy:
 *   .fu-single-post__hero-img   max-width 1280px (alignwide visual band)
 *   .fu-single-post__article    max-width 1024px (wrapper breathing room)
 *   .fu-single-post__body       max-width  680px (~65-75 ch reading width)
 *
 * The body is the reading column. Everything else gives it visual space.
 * ================================================================= */
.fu-single-post { display: block; }

.fu-single-post .fu-pattern-page-hero__crumbs a {
	color: inherit;
	text-decoration: underline;
}
.fu-single-post .fu-pattern-page-hero__crumbs a:hover {
	color: var(--wp--preset--color--amarillo-boca);
}

.fu-single-post__hero-img {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
	background: var(--wp--preset--color--gris-borde);
}
.fu-single-post__hero-img img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 60vh;
	object-fit: cover;
}

/* Wrapper: wider than the body so callouts/quotes/wide images can break out
   later if needed. Generous block padding for visual rest above/below. */
.fu-single-post__article {
	max-width: 1024px;
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem) var(--wp--preset--spacing--60);
}

/* Reading column: 680px caps the line length at ~65-75 chars for serif at 17px. */
.fu-single-post__body {
	max-width: 680px;
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.0625rem;            /* 17px */
	line-height: 1.75;
	color: var(--wp--preset--color--azul-profundo);
}
@media (min-width: 768px) {
	.fu-single-post__body { font-size: 1.125rem; }  /* 18px on tablet+ */
}

/* Mobile: tighten the article wrapper's horizontal padding and add explicit
   breathing room on the body + footer so text/images don't feel glued to
   the edges (including the "Volver a Prensa" back-link in the footer). */
@media (max-width: 767px) {
	.fu-single-post__article {
		padding-inline: 1rem;
	}
	.fu-single-post__body,
	.fu-single-post__footer {
		padding-inline: 1.5rem;
	}
}

/* Paragraphs */
.fu-single-post__body p {
	margin: 0 0 1.375em;
}
.fu-single-post__body p:last-child { margin-bottom: 0; }

/* Headings — display family, clear scale, generous top space. */
.fu-single-post__body h2,
.fu-single-post__body h3,
.fu-single-post__body h4 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	color: var(--wp--preset--color--azul-profundo);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 2.5em 0 0.75em;
}
.fu-single-post__body h2 { font-size: 1.75rem; }
.fu-single-post__body h3 { font-size: 1.375rem; }
.fu-single-post__body h4 { font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.04em; }
@media (min-width: 768px) {
	.fu-single-post__body h2 { font-size: 2rem; }
	.fu-single-post__body h3 { font-size: 1.5rem; }
}
.fu-single-post__body :is(h2, h3, h4):first-child { margin-top: 0; }

/* Blockquotes — serif italic with amber left border (matches brand). */
.fu-single-post__body blockquote {
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 3px solid var(--wp--preset--color--amarillo-boca);
	font-style: italic;
	color: var(--wp--preset--color--azul-profundo);
}
.fu-single-post__body blockquote p {
	margin: 0 0 0.75em;
	font-size: 1.0625em;
}
.fu-single-post__body blockquote p:last-child { margin-bottom: 0; }
.fu-single-post__body blockquote cite {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-style: normal;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--gris-texto);
}

/* Inline images — block + centered + max-width with breathing room. */
.fu-single-post__body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 2rem auto;
	border-radius: 2px;
}
.fu-single-post__body figure {
	margin: 2rem 0;
}
.fu-single-post__body figcaption {
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--gris-texto);
	text-align: center;
}

/* Lists — padding for marker visibility, amber bullet on ul. */
.fu-single-post__body ul,
.fu-single-post__body ol {
	margin: 0 0 1.375em;
	padding-left: 1.5rem;
}
.fu-single-post__body li { margin: 0 0 0.5em; }
.fu-single-post__body li:last-child { margin-bottom: 0; }
.fu-single-post__body ul li::marker {
	color: var(--wp--preset--color--amarillo-boca);
}
.fu-single-post__body ol li::marker {
	color: var(--wp--preset--color--gris-texto);
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
}

/* Inline links — azul-boca with subtle underline. */
.fu-single-post__body a {
	color: var(--wp--preset--color--azul-boca);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(14, 63, 126, 0.35);
	transition: color 180ms ease, text-decoration-color 180ms ease;
}
.fu-single-post__body a:hover {
	color: var(--wp--preset--color--azul-profundo);
	text-decoration-color: var(--wp--preset--color--amarillo-boca);
}

/* Inline emphasis */
.fu-single-post__body strong { font-weight: 700; color: var(--wp--preset--color--azul-profundo); }
.fu-single-post__body em { font-style: italic; }

/* Horizontal rule */
.fu-single-post__body hr {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--gris-borde);
	margin: 2.5rem auto;
	width: 6rem;
}

/* Drop-cap on the first paragraph — only when the body OPENS with a <p>.
   Posts that start with <blockquote>, <figure>, an image, or other non-text
   elements skip the drop-cap (which would look broken on the wrong element).
   Sized to span ~3 body lines (line-height 1.75 × 17px × 3 ≈ 89px ≈ 5.5rem). */
.fu-single-post__body > p:first-child::first-letter {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: 5rem;
	line-height: 0.9;
	float: left;
	margin: 0.4rem 0.75rem 0 0;
	color: var(--wp--preset--color--amarillo-boca);
}
@media (min-width: 768px) {
	.fu-single-post__body > p:first-child::first-letter { font-size: 5.5rem; }
}

/* Prensa (cat 15) — disable drop-cap. These are press clippings from external
   media, not authored narrative; the drop-cap reads as branding the source
   we're reproducing, which isn't the intent. post_class() adds .category-prensa
   to the article wrapper, so the cascade hits the body inside. */
.category-prensa .fu-single-post__body > p:first-child::first-letter {
	all: unset;
	font-size: inherit;
	color: inherit;
	float: none;
	margin: 0;
}

/* Legacy posts ship YouTube/Vimeo iframes with hardcoded width/height (e.g.
   640×360). Make them responsive: full width of the body column, 16:9 ratio. */
.fu-single-post__body iframe {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	display: block;
	margin: 2rem 0;
}

/* Code (rare in posts but defensible) */
.fu-single-post__body code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9em;
	background: rgba(14, 63, 126, 0.05);
	padding: 0.125em 0.375em;
	border-radius: 2px;
}

/* Footer — back link */
.fu-single-post__footer {
	max-width: 680px;
	margin: var(--wp--preset--spacing--70) auto 0;
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--gris-borde);
}
.fu-single-post__back a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	color: var(--wp--preset--color--gris-texto);
	text-decoration: none;
	transition: color 180ms ease;
}
.fu-single-post__back a:hover { color: var(--wp--preset--color--azul-profundo); }

/* -----------------------------------------------------------------
 * 24. Edgardo bio (post 109) — shrink drop-cap.
 *     Default drop-cap is 5rem (80px) — fits comfortably in 4–5 line
 *     paragraphs (Antonio, 5-Grandes, etc.) where the body text wraps
 *     around the floating letter. Edgardo's TRAYECTORIA paragraph is
 *     only 2 lines, so the 80px "M" reserves more vertical space than
 *     the text fills and visibly overflows. 3.5rem (56px) fits cleanly
 *     in the 2-line text block. Scoped per-page so global drop-cap
 *     (Antonio + 7 other migrated pages) is unchanged.
 * ----------------------------------------------------------------- */
.page-id-109 .has-drop-cap::first-letter {
	font-size: 3.5rem;
}

/* -----------------------------------------------------------------
 * 20. /historia — vertical timeline (used in Uniforme + Escudos).
 * ----------------------------------------------------------------- */
.fu-historia-timeline {
	list-style: none;
	padding: 0;
	margin: 0;
	border-left: 2px solid var(--wp--preset--color--gris-borde);
	margin-left: 0.5rem;
}
.fu-historia-timeline li {
	position: relative;
	padding: 1.5rem 0 1.5rem 2rem;
}
.fu-historia-timeline li::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 2.25rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--amarillo-boca);
}
.fu-historia-timeline__entry {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
@media (min-width: 768px) {
	.fu-historia-timeline__entry {
		flex-direction: row;
		align-items: baseline;
		gap: 1.5rem;
	}
}
.fu-historia-timeline__year {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--wp--preset--color--amarillo-boca);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.fu-historia-timeline__year { width: 8rem; }
}
.fu-historia-timeline__text {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--azul-profundo);
	margin: 0;
}
@media (min-width: 1024px) {
	.fu-historia-timeline__text { font-size: 1.125rem; }
}

/* -----------------------------------------------------------------
 * 21. /historia — Palmarés dark section: 3-stat grid + native details.
 * ----------------------------------------------------------------- */
.fu-historia-palmares-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 3rem;
}
@media (min-width: 768px) {
	.fu-historia-palmares-stats { grid-template-columns: 1fr 1fr 1fr; }
}
.fu-historia-palmares-stats__card {
	background: rgba(255, 255, 255, 0.05);
	padding: 2rem 1.5rem;
	border-left: 4px solid var(--wp--preset--color--amarillo-boca);
}
.fu-historia-palmares-stats__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 3rem;
	font-weight: 900;
	line-height: 1;
	color: #FFFFFF;
	margin: 0 0 0.5rem;
}
.fu-historia-palmares-stats__label {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.4;
}
.fu-historia-palmares-details details {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: #FFFFFF;
}
.fu-historia-palmares-details details:last-of-type {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.fu-historia-palmares-details summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.25rem 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	list-style: none;
	transition: color 200ms ease;
}
@media (min-width: 1024px) {
	.fu-historia-palmares-details summary { font-size: 1.25rem; }
}
.fu-historia-palmares-details summary::-webkit-details-marker { display: none; }
.fu-historia-palmares-details summary:hover { color: var(--wp--preset--color--amarillo-boca); }
.fu-historia-palmares-details summary::after {
	content: "▾";
	color: var(--wp--preset--color--amarillo-boca);
	transition: transform 300ms ease;
}
.fu-historia-palmares-details details[open] summary::after { transform: rotate(180deg); }
.fu-historia-palmares-details details > div {
	padding-bottom: 1.5rem;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	line-height: 1.8;
}
@media (min-width: 1024px) {
	.fu-historia-palmares-details details > div { font-size: 1.125rem; }
}
.fu-historia-palmares-details details ul {
	list-style: disc;
	padding-left: 1.25rem;
	margin: 0;
}
.fu-historia-palmares-details details ul li { margin-bottom: 0.5rem; }
.fu-historia-palmares-details details p { margin: 0; }

/* -----------------------------------------------------------------
 * 24. Back-to-top floating button.
 *     Globally rendered via inc/menus.php → wp_footer.
 *     Visible once scrollY > 400; smooth-scrolls to top (respects
 *     prefers-reduced-motion).
 * ----------------------------------------------------------------- */
.fu-back-to-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 2px solid var(--wp--preset--color--amarillo-boca);
	border-radius: 50%;
	background-color: var(--wp--preset--color--azul-boca);
	color: var(--wp--preset--color--amarillo-boca);
	cursor: pointer;
	z-index: 9998; /* one below the mobile menu overlay (9999) */
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	box-shadow:
		0 10px 15px -3px rgba(244, 198, 0, 0.30),
		0 4px 6px -4px rgba(244, 198, 0, 0.30);
	transition:
		opacity .3s ease,
		transform .3s ease,
		background-color .2s ease,
		box-shadow .2s ease;
}

.fu-back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.fu-back-to-top:hover,
.fu-back-to-top:focus-visible {
	background-color: var(--wp--preset--color--azul-profundo);
	box-shadow:
		0 20px 25px -5px rgba(244, 198, 0, 0.40),
		0 10px 10px -5px rgba(244, 198, 0, 0.30);
}

.fu-back-to-top:focus-visible {
	outline: 2px solid var(--wp--preset--color--amarillo-boca);
	outline-offset: 2px;
}

.fu-back-to-top:active {
	transform: translateY(0) scale(0.95);
}

.fu-back-to-top svg {
	width: 24px;
	height: 24px;
	transition: transform .2s ease;
}

.fu-back-to-top:hover svg {
	transform: scale(1.1);
}

@media (min-width: 1024px) {
	.fu-back-to-top {
		bottom: 32px;
		right: 32px;
		width: 56px;
		height: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fu-back-to-top {
		transition: opacity .15s ease;
		transform: none;
	}
	.fu-back-to-top.is-visible {
		transform: none;
	}
	.fu-back-to-top:active {
		transform: scale(0.95);
	}
}

/* -----------------------------------------------------------------
 * 25. Contact Form 7 — brand-coherent form styling.
 *     Constrains the form to 1024px max as a defensive cap (most
 *     pages also wrap it in narrower containers like Sumate's 720px).
 *     Inputs span the form's available width; labels, focus rings,
 *     and the submit button match brand tokens.
 * ----------------------------------------------------------------- */
.wpcf7 {
	max-width: 1024px;
	margin-inline: auto;
}

.wpcf7-form p {
	margin: 0 0 1.25rem;
}

.wpcf7-form label {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--azul-profundo);
	line-height: 1.4;
}

.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.5rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	max-width: 100%;
	padding: 0.65rem 0.85rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--wp--preset--color--azul-profundo);
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--gris-borde);
	border-radius: 6px;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.wpcf7-form textarea {
	min-height: 7rem;
	resize: vertical;
	font-family: var(--wp--preset--font-family--sans);
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	outline: none;
	border-color: var(--wp--preset--color--azul-boca);
	box-shadow: 0 0 0 3px rgba(14, 63, 126, 0.15);
}

.wpcf7-form input[aria-invalid="true"],
.wpcf7-form textarea[aria-invalid="true"] {
	border-color: var(--wp--preset--color--rojo-alerta);
}

.wpcf7-form .wpcf7-submit {
	display: inline-block;
	width: auto;
	padding: 0.85rem 1.75rem;
	background: var(--wp--preset--color--amarillo-boca);
	color: var(--wp--preset--color--azul-profundo);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.wpcf7-form .wpcf7-submit:hover {
	background: var(--wp--preset--color--azul-profundo);
	color: var(--wp--preset--color--amarillo-boca);
}
.wpcf7-form .wpcf7-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--amarillo-boca);
	outline-offset: 2px;
}
.wpcf7-form .wpcf7-submit:active {
	transform: scale(0.98);
}

.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--rojo-alerta);
}
.wpcf7 .wpcf7-response-output {
	margin-top: 1.5rem;
	padding: 0.85rem 1rem;
	border-radius: 6px;
	font-size: 0.9rem;
}
.wpcf7 form.sent .wpcf7-response-output {
	border: 1px solid #16a34a;
	background: #f0fdf4;
	color: #166534;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border: 1px solid var(--wp--preset--color--rojo-alerta);
	background: #fef2f2;
	color: #991b1b;
}

/* -----------------------------------------------------------------
 * Lightbox — brand-aligned overrides for vendored GLightbox.
 *     The default GLightbox skin is dark grey with flat fades. We
 *     push it toward our azul-profundo + amarillo-boca palette,
 *     add backdrop blur on the overlay, and bump z-index above
 *     the sticky header (9999). Video container width and image
 *     viewport caps match the spec (90vw / 85vh).
 * ----------------------------------------------------------------- */

/* Overlay: blurred dark backdrop. */
.goverlay {
	background: rgba(10, 46, 92, 0.92) !important; /* azul-profundo @ 0.92 */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Container z-index above sticky header (was 999999 default — but
   our header escalates to 9999 when menu is open, so 1000000 keeps
   the lightbox always on top). */
.glightbox-container {
	z-index: 1000000 !important;
}

/* Slide content: cap image to spec sizes. */
.gslide-image img {
	max-width: 90vw !important;
	max-height: 85vh !important;
	border-radius: 4px;
	box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
}

/* Video container: cap width per spec, keep 16:9. */
.gslide-video {
	max-width: min(90vw, 1280px) !important;
}

/* Close button — yellow-on-azul, larger tap target. */
.gclose {
	width: 44px !important;
	height: 44px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 6px !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
	right: 1rem !important;
	top: 1rem !important;
	opacity: 1 !important;
}
.gclose:hover,
.gclose:focus-visible {
	background: rgba(255, 217, 0, 0.15) !important; /* amarillo-boca @ low alpha */
}
.gclose svg {
	width: 22px !important;
	height: 22px !important;
}
.gclose svg path {
	fill: var(--wp--preset--color--amarillo-boca, #FFD900) !important;
}

/* Prev/next arrows — circular yellow chevrons. */
.gprev, .gnext {
	width: 48px !important;
	height: 48px !important;
	background: rgba(255, 217, 0, 0.12) !important;
	border-radius: 9999px !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
	opacity: 1 !important;
}
.gprev:hover, .gnext:hover,
.gprev:focus-visible, .gnext:focus-visible {
	background: var(--wp--preset--color--amarillo-boca, #FFD900) !important;
	transform: translateY(-50%) scale(1.05);
}
.gprev svg path,
.gnext svg path {
	fill: var(--wp--preset--color--amarillo-boca, #FFD900) !important;
}
.gprev:hover svg path,
.gnext:hover svg path {
	fill: var(--wp--preset--color--azul-profundo, #0A2E5C) !important;
}

/* Caption/title under the slide. */
.gslide-title {
	color: var(--wp--preset--color--blanco, #FFFFFF) !important;
	font-family: var(--wp--preset--font-family--sans, sans-serif) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	text-align: center !important;
	margin-top: 1rem !important;
	max-width: 90vw !important;
	line-height: 1.5 !important;
}
.gslide-desc {
	color: rgba(255, 255, 255, 0.75) !important;
	font-size: 0.8125rem !important;
}

/* Hide GLightbox's default "more text" link (we set it to empty in init too). */
.gdesc-inner .gdesc-link { display: none !important; }

/* Counter (1/12) — small mono badge top-left. */
.gcounter {
	position: fixed !important;
	left: 1rem !important;
	top: 1.2rem !important;
	color: rgba(255, 255, 255, 0.7) !important;
	font-family: var(--wp--preset--font-family--mono, monospace) !important;
	font-size: 0.8125rem !important;
	letter-spacing: 0.08em !important;
}

/* Embed overlay (videos) — invisible click target sitting on top of the
   <iframe>. Must cover the whole embed area without showing anything. */
.fu-embed-lightbox-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	cursor: pointer;
	background: transparent;
}
/* Parent wp-block-embed wrapper needs relative positioning so the absolute
   overlay above anchors to it. WP usually doesn't set it. */
.wp-block-embed:has(.fu-embed-lightbox-overlay),
.wp-block-embed:has(.fu-embed-lightbox-overlay) .wp-block-embed__wrapper {
	position: relative;
}
/* Subtle play-on-hover affordance: tinted backdrop appears when hovering
   the embed area, signaling that clicking will open the lightbox player. */
.wp-block-embed:hover .fu-embed-lightbox-overlay {
	background: rgba(10, 46, 92, 0.12);
	transition: background-color 0.2s ease;
}

/* Smooth fade-in for the whole lightbox shell on open. */
.glightbox-open .glightbox-container,
.glightbox-open .goverlay {
	animation: fuLightboxFade 0.25s ease-out;
}
@keyframes fuLightboxFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Reduce-motion respect. */
@media (prefers-reduced-motion: reduce) {
	.glightbox-open .glightbox-container,
	.glightbox-open .goverlay,
	.gprev, .gnext, .gclose {
		animation: none !important;
		transition: none !important;
	}
}