/* ==========================================================================
   La Heroica — estilos del theme
   Tercera Compañía de Bomberos de Santiago · 1863
   ========================================================================== */

:root {
	--lh-heading: var(--wp--preset--font-family--heading);
	--lh-red: var(--wp--preset--color--red);
	--lh-red-dark: var(--wp--preset--color--red-dark);
	--lh-gold: var(--wp--preset--color--gold);
	--lh-gold-soft: var(--wp--preset--color--gold-soft, #D8C79B);
	--lh-white: var(--wp--preset--color--white, #FFFFFF);
	--lh-paper: var(--wp--preset--color--paper, #EFEFEF);
	--lh-ink: var(--wp--preset--color--ink);
	--lh-muted: var(--wp--preset--color--muted);
	--lh-line: var(--wp--preset--color--line, #EFEFEF);
	--lh-radius-sm: 2px;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   FOCO DE TECLADO GLOBAL (accesibilidad)
   Anillo visible para navegación por teclado en TODO elemento interactivo. El
   theme solo definía :focus-visible en el chrome (buscador, modal); enlaces de
   tarjetas, flechas de carrusel, puntos, paginación y nav del footer quedaban
   sin indicación de foco. Usa :focus-visible (no :focus) para no molestar al
   clic con ratón. Los componentes con foco propio (más abajo) lo refinan.
   -------------------------------------------------------------------------- */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--lh-gold);
	outline-offset: 2px;
	border-radius: var(--lh-radius-sm);
}
/* El landmark <main> recibe el foco al usar el skip link (tabindex="-1"); no
   queremos anillo alrededor de todo el contenido. */
main:focus-visible {
	outline: none;
}

/* Utilidad de solo-lector + skip link (WCAG 2.4.1). Oculto pero enfocable; al
   recibir foco (Tab desde el inicio) se materializa arriba a la izquierda. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed;
	top: 0.6rem;
	left: 0.6rem;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	white-space: normal;
	padding: 0.7rem 1.2rem;
	background: var(--lh-red-dark);
	color: var(--lh-white);
	font-family: var(--lh-heading);
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--lh-radius-sm);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   REVELADO AL HACER SCROLL
   Mejora progresiva: la clase base .lh-reveal solo la añade reveal.js, así que
   sin JS (o con prefers-reduced-motion) todo el contenido queda visible.
   -------------------------------------------------------------------------- */
.lh-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--lh-rev-i, 0) * 90ms);
	will-change: opacity, transform;
}
.lh-reveal.is-in {
	opacity: 1;
	transform: none;
	will-change: auto; /* libera la capa de composición una vez revelado */
}
@media (prefers-reduced-motion: reduce) {
	.lh-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
/* STICKY: WordPress envuelve la parte de plantilla del encabezado en un
   `<header class="wp-block-template-part">`. El sticky DEBE ir en ESE envoltorio
   —cuyo contenedor es `.wp-site-blocks` (toda la página)— y no en `.site-header`
   interno, porque el padre de éste mide solo lo que el header y el sticky se
   «despegaría» al primer scroll (desaparecía). Se acota con la etiqueta `header`
   para no afectar al envoltorio del pie (`footer.wp-block-template-part`). */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
/* Con la barra de administración de WordPress (usuario logueado), en escritorio
   se desplaza el anclaje para que no quede tapada; en móvil la barra de WP no es
   fija, así que el anclaje queda en 0. */
@media (min-width: 783px) {
	.admin-bar header.wp-block-template-part {
		top: var(--wp-admin--admin-bar--height, 32px);
	}
}
.site-header {
	border-bottom: 3px solid var(--lh-gold);
	padding-block: 0.55rem;
}
.site-header__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	align-items: center;
	gap: 1rem;
}
.site-brand {
	align-items: center;
	gap: 0.8rem;
}
.site-brand__text {
	gap: 0 !important;
	justify-content: center;
	max-width: 320px; /* permite colapsar suave el bloque al condensar */
	overflow: hidden;
}
.site-title,
.site-title a {
	font-family: var(--lh-heading);
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	color: var(--lh-white) !important;
	text-decoration: none;
}
.site-tagline {
	margin: 0.18rem 0 0;
	font-family: var(--lh-heading);
	font-size: 0.7rem;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--lh-gold);
}
.site-header__actions {
	gap: 0.75rem;
	align-items: center;
}

/* Barra utilitaria superior (accesos secundarios + redes). Franja fina en el
   rojo principal de marca sobre el header; se oculta en móvil. */
.site-topbar {
	background: var(--lh-red, #C3360E);
	border-bottom: 1px solid rgba(186, 158, 96, 0.30);
	padding-block: 0.3rem;
	margin-block: -0.55rem 0.55rem; /* absorbe el padding del header sticky por arriba */
}
.site-topbar__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	gap: 1rem;
}
/* Nav de la barra superior: deliberadamente más pequeña que el menú principal.
   Se prefija con `.site-header .site-topbar` para GANAR en especificidad a
   `.site-header .wp-block-navigation` (que si no impone su 0.85rem). */
.site-header .site-topbar .topbar-nav {
	font-family: var(--lh-heading);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	--wp--style--block-gap: 1rem;
}
.site-header .site-topbar .topbar-nav a,
.site-header .site-topbar .topbar-nav .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.9) !important;
	text-decoration: none;
	padding-block: 0.1rem;
}
/* La barra fina no usa el subrayado animado del menú principal. */
.site-header .site-topbar .topbar-nav a::after {
	display: none;
}
/* Hover/foco a BLANCO pleno (no oro): el oro #BA9E60 sobre el rojo pleno de la
   topbar da ~1,7:1 de contraste (mínimo AA 4,5:1). El blanco mantiene un cambio
   de estado claro (de 90% a 100% de opacidad) con contraste holgado. */
.site-header .site-topbar .topbar-nav a:hover,
.site-header .site-topbar .topbar-nav a:focus {
	color: var(--lh-white) !important;
}
.topbar-social {
	gap: 0.15rem;
}
.topbar-social .wp-block-social-link {
	opacity: 0.8;
}
.topbar-social .wp-block-social-link:hover {
	opacity: 1;
}
@media (max-width: 781px) {
	.site-topbar {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   STICKY HEADER DE DOS ESTADOS — la clase `is-condensed` la añade
   assets/js/sticky-header.js al hacer scroll.
     · Al CARGAR (tope): escudo grande (50px) + bloque «Tercera Compañía · 1863».
     · Al hacer SCROLL: se colapsa la barra utilitaria, se oculta el bloque de
       título/bajada y el escudo encoge (→32px), quedando compacto al inicio del
       menú. Transiciones suaves; estáticas con prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.site-header {
	transition: padding-block 0.3s ease;
}
.site-topbar {
	max-height: 4rem;
	overflow: hidden;
	transition: max-height 0.32s ease, opacity 0.24s ease, padding-block 0.3s ease, margin-block 0.3s ease;
}
.site-header .wp-block-site-logo,
.site-header .wp-block-site-logo img {
	transition: width 0.3s ease, height 0.3s ease;
}
.site-brand__text {
	transition: max-width 0.3s ease, opacity 0.24s ease, margin 0.3s ease;
}
/* Estado condensado */
.site-header.is-condensed {
	padding-block: 0.32rem;
}
.site-header.is-condensed .site-topbar {
	max-height: 0;
	opacity: 0;
	padding-block: 0;
	margin-block: 0;
	border-bottom-color: transparent;
	pointer-events: none;
}
.site-header.is-condensed .wp-block-site-logo,
.site-header.is-condensed .wp-block-site-logo img {
	width: 32px !important;
	height: auto !important;
}
/* El bloque de título/bajada se colapsa: queda solo el escudo pequeño. */
.site-header.is-condensed .site-brand__text {
	max-width: 0;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}
/* Al condensar, la fila pasa de `space-between` a `flex-end` y se fuerza UNA sola
   línea (`nowrap`): el escudo deja de estar suelto a la izquierda y, en vez de
   envolver hacia arriba, queda en línea inmediatamente antes del primer ítem del
   menú («HOME»). El bloque de título ya está colapsado, así que la marca mide solo
   lo que el escudo. */
.site-header.is-condensed .site-header__inner {
	justify-content: flex-end;
	flex-wrap: nowrap;
}
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-topbar,
	.site-header .wp-block-site-logo,
	.site-header .wp-block-site-logo img,
	.site-brand__text {
		transition: none;
	}
}
/* Disparador de búsqueda del header: solo el icono; abre el modal lightbox. */
.lh-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0.35rem;
	cursor: pointer;
	color: var(--lh-white);
	transition: color 0.2s ease;
}
.lh-search-toggle:hover,
.lh-search-toggle:focus-visible {
	color: var(--lh-gold);
}
.lh-search-toggle svg {
	width: 1.4rem;
	height: 1.4rem;
}

/* --------------------------------------------------------------------------
   MODAL LIGHTBOX DE BÚSQUEDA — lo monta assets/js/search-modal.js y lo añade al
   <body>. Caja central grande sobre un velo oscuro; cierra con Esc, el botón × o
   clic en el fondo. Atrapa el foco mientras está abierto.
   -------------------------------------------------------------------------- */
.lh-search-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 18vh 1.2rem 0;
}
.lh-search-modal[hidden] {
	display: none;
}
.lh-search-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 26, 0.86);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.lh-search-modal__close {
	position: absolute;
	top: 1.2rem;
	right: 1.6rem;
	z-index: 1;
	background: transparent;
	border: 0;
	color: var(--lh-white);
	font-size: 2.4rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease, transform 0.2s ease;
}
.lh-search-modal__close:hover,
.lh-search-modal__close:focus-visible {
	color: var(--lh-gold);
	transform: rotate(90deg);
}
.lh-search-modal__form {
	position: relative;
	z-index: 1;
	width: min(760px, 94vw);
}
.lh-search-modal__label {
	display: block;
	text-align: center;
	margin-bottom: 1rem;
	color: var(--lh-gold);
	font-family: var(--lh-heading);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 3px;
	text-transform: uppercase;
}
.lh-search-modal__row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	border-bottom: 3px solid var(--lh-gold);
}
.lh-search-modal__input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	color: var(--lh-white);
	font-family: var(--lh-heading);
	font-weight: 700;
	font-size: clamp(1.6rem, 5vw, 2.8rem);
	line-height: 1.2;
	padding: 0.4rem 0.2rem;
}
.lh-search-modal__input::placeholder {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 400;
}
.lh-search-modal__submit {
	flex: 0 0 auto;
	background: transparent;
	border: 0;
	padding: 0.4rem;
	color: var(--lh-gold);
	cursor: pointer;
	transition: color 0.2s ease;
}
.lh-search-modal__submit:hover,
.lh-search-modal__submit:focus-visible {
	color: var(--lh-white);
}
.lh-search-modal__submit svg {
	width: clamp(1.6rem, 4vw, 2.1rem);
	height: clamp(1.6rem, 4vw, 2.1rem);
	display: block;
}
.lh-search-modal__hint {
	margin: 1rem 0 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.85rem;
}
@media (prefers-reduced-motion: no-preference) {
	.lh-search-modal:not([hidden]) .lh-search-modal__form {
		animation: lh-search-in 0.25s ease both;
	}
	.lh-search-modal:not([hidden]) .lh-search-modal__backdrop {
		animation: lh-fade-in 0.25s ease both;
	}
}
@keyframes lh-search-in {
	from { opacity: 0; transform: translateY(-14px); }
	to { opacity: 1; transform: none; }
}
@keyframes lh-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
.site-header .wp-block-navigation {
	font-family: var(--lh-heading);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	--wp--style--block-gap: 1.15rem;
}
.site-header .wp-block-navigation a,
.site-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--lh-white) !important;
	position: relative;
	padding-block: 0.3rem;
}
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation a:focus,
.site-header .wp-block-navigation .current-menu-item a {
	color: var(--lh-gold) !important;
}
.site-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--lh-gold);
	transition: width 0.25s ease;
}
.site-header .wp-block-navigation a:hover::after {
	width: 100%;
}
/* indicador (chevron) de los ítems con submenú */
.site-header .wp-block-navigation .wp-block-navigation__submenu-icon {
	color: var(--lh-gold);
}
/* Submenús desplegables (dropdowns de escritorio) */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--lh-red-dark);
	border: 1px solid rgba(186, 158, 96, 0.30);
	border-top: 3px solid var(--lh-gold);
	border-radius: 0 0 3px 3px;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
	padding-block: 0.3rem;
	min-width: 240px;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.15rem !important;
	font-size: 0.78rem;
	white-space: nowrap;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.site-header .wp-block-navigation__submenu-container a:hover {
	background: rgba(186, 158, 96, 0.16);
	color: var(--lh-gold) !important;
}
/* dentro del dropdown no usamos el subrayado animado */
.site-header .wp-block-navigation__submenu-container a::after {
	display: none;
}
/* botón hamburguesa + botón cerrar */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	color: var(--lh-white);
}
.site-header .wp-block-navigation__responsive-container-open svg,
.site-header .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}
/* overlay del menú móvil: fondo rojo oscuro, enlaces blancos */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--lh-red-dark) !important;
	padding-top: 4rem;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--lh-white) !important;
	font-family: var(--lh-heading);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1.15rem;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: var(--lh-gold) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a::after {
	display: none;
}
/* En el overlay: centrar todo y anular el "cajón" de dropdown de escritorio */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	justify-content: center !important;
	align-items: center !important;
	text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	min-width: 0 !important;
	padding: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.95rem !important;
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.lh-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: clamp(360px, var(--lh-hero-h, 64vh), 880px);
	padding-block: clamp(2.5rem, 6vh, 4.25rem);
	background: #5a1606;
	overflow: hidden;
}
/* Capa de imágenes (slider con crossfade) */
.lh-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
}
.lh-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.4s ease;
}
.lh-hero__slide.is-active {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.lh-hero__slide {
		transition: none;
	}
}
/* La primera diapositiva se sirve como <img> (LCP); debe cubrir igual que los fondos. */
img.lh-hero__slide {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.lh-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg,
		rgba(110, 29, 8, calc(var(--lh-ov, 0.6) * 0.78)) 0%,
		rgba(40, 10, 3, calc(var(--lh-ov, 0.6) + 0.15)) 100%);
}
.lh-hero > *:not(.lh-hero__bg) {
	position: relative;
	z-index: 2;
}
/* Crest del hero: el escudo BLANCO de trazo fino (Norma 2026) se pierde sobre
   fotos claras. Lo asentamos siempre con un velo radial oscuro detrás y un halo
   ceñido que perfila los filetes — legible sea cual sea el «oscurecido» del hero. */
.lh-hero__crest {
	position: relative;
	isolation: isolate;
}
.lh-hero__crest::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: 280px;
	height: 280px;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side,
		rgba(20, 6, 2, 0.55) 0%,
		rgba(20, 6, 2, 0.32) 55%,
		rgba(20, 6, 2, 0) 100%);
	pointer-events: none;
}
.lh-hero__crest img {
	width: 168px !important;
	filter:
		drop-shadow(0 0 2px rgba(0, 0, 0, 0.9))
		drop-shadow(0 0 7px rgba(0, 0, 0, 0.8))
		drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}
.lh-hero__title {
	margin: 0.5rem 0 0;
	font-size: clamp(2.8rem, 8vw, 5rem) !important;
	font-weight: 900;
	letter-spacing: -0.5px;
	line-height: 1.02;
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
}
.lh-hero__kicker {
	margin: 0.7rem 0 0;
	font-family: var(--lh-heading);
	font-weight: 500;
	font-size: clamp(0.95rem, 2.2vw, 1.2rem);
	letter-spacing: 4px;
	text-transform: uppercase;
}
.lh-hero__lead {
	max-width: 600px;
	margin: 1.3rem auto 0;
	font-size: 1.18rem;
	color: rgba(255, 255, 255, 0.92);
}
.lh-hero .wp-block-buttons {
	margin-top: 1.9rem;
	gap: 1rem;
}

/* --------------------------------------------------------------------------
   BOTONES (estilo outline genérico)
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent !important;
	border: 2px solid currentColor;
}
.lh-hero .is-style-outline .wp-block-button__link:hover {
	background-color: var(--lh-white) !important;
	color: var(--lh-red-dark) !important;
	border-color: var(--lh-white);
}

/* --------------------------------------------------------------------------
   CIFRAS
   -------------------------------------------------------------------------- */
.lh-stats {
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.lh-stats__row {
	gap: 1rem;
	align-items: stretch;
}
.lh-stat__num {
	margin: 0;
	font-family: var(--lh-heading);
	font-weight: 800;
	/* Figtree es de caja más ancha que Oswald condensada: bajamos un punto el
	   tamaño, apretamos el tracking y forzamos una sola línea con dígitos de
	   ancho fijo para que «163» y «59 000» no descuadren las columnas. */
	font-size: clamp(2rem, 4.4vw, 3rem);
	line-height: 1.05;
	letter-spacing: -1px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.lh-stat__label {
	margin: 0.4rem 0 0;
	font-family: var(--lh-heading);
	font-weight: 400;
	font-size: 0.8rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: 0.92;
}

/* --------------------------------------------------------------------------
   SECCIONES DE CONTENIDO
   -------------------------------------------------------------------------- */
.lh-about,
.lh-values,
.lh-legacy,
.lh-cta {
	padding-block: clamp(3.5rem, 7vw, 6rem);
}
.lh-kicker {
	margin: 0 0 0.3rem;
	font-family: var(--lh-heading);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--lh-red);
}
.lh-section-title {
	margin: 0.2rem 0 2.4rem;
	font-size: clamp(1.9rem, 4vw, 2.6rem) !important;
	letter-spacing: 0;
}

/* Quiénes somos */
.lh-about__title {
	margin: 0.2rem 0 1.1rem;
	font-size: clamp(1.9rem, 4vw, 2.6rem) !important;
	line-height: 1.14;
	letter-spacing: 0;
}
.lh-about .lh-muted {
	color: var(--lh-muted);
}
.lh-about__figure {
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(63, 12, 17, 0.28);
	border-bottom: 4px solid var(--lh-gold);
}
.lh-about__figure img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.lh-about__cap {
	margin: 0;
	padding: 0.6rem 0.85rem;
	background: var(--lh-red-dark);
	color: var(--lh-gold);
	font-family: var(--lh-heading);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
}

/* Tarjetas (valores + legado): superficie con relieve y respuesta al hover */
.lh-cards {
	gap: 1.8rem;
	margin-top: 0.5rem;
	align-items: stretch;
}
.lh-cards .wp-block-column {
	display: flex;
}
/* Tarjetas de contenido (valores / legado). */
.lh-card {
	background: var(--lh-white);
	border-top: 3px solid var(--lh-gold);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	flex: 1;
	padding: 1.6rem 1.5rem 1.7rem;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 10px 30px rgba(63, 12, 17, 0.10);
}
.lh-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 42px rgba(63, 12, 17, 0.17);
}
.lh-card h3 {
	margin: 0 0 0.6rem;
	font-size: 1.3rem !important;
	font-weight: 800;
	letter-spacing: 0;
}
.lh-values .lh-card h3 {
	color: var(--lh-ink);
}

/* --------------------------------------------------------------------------
   QUÉ HACEMOS — envoltura de la sección (kicker, título, bajada). Las dos
   unidades insignia B-3 / BT-3 se estilan en el bloque «UNIDADES» de abajo.
   -------------------------------------------------------------------------- */
.lh-services-section {
	padding-block: clamp(3.5rem, 7vw, 6rem);
}
.lh-services__lead {
	max-width: 720px;
	margin: -1.4rem auto 0.5rem;
	color: var(--lh-muted);
	font-size: 1.05rem;
	line-height: 1.6;
}
.lh-services__lead strong {
	color: var(--lh-ink);
}

/* --------------------------------------------------------------------------
   QUÉ HACEMOS · UNIDADES — dos paneles a sangre (B-3 / BT-3). Foto de fondo +
   velo; al hover/focus (escritorio) o .is-open (tap táctil, vía units.js) se
   revela la lista de emergencias. Diagramación angular de la Norma Gráfica.
   -------------------------------------------------------------------------- */
/* Full-bleed dentro del contenedor constrained: el .lh-units es hijo directo de
   la sección constrained, que impone `margin-inline:auto !important` + max-width;
   se revierte con la misma arma (!important) y el truco 100vw. Selector doblemente
   clasado (0,2,0) para vencer a `body .is-layout-constrained > :where()` (0,1,1). */
.lh-services-section .lh-units {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: 0 !important;
	margin-top: 2.2rem;
}
.lh-unit {
	position: relative;
	overflow: hidden;
	min-height: clamp(340px, 46vh, 560px);
	isolation: isolate;
}
/* Foto de fondo. La `background-image` la inyecta laheroica_units_inline_style()
   en wp_head (Personalizador → «Portada · Unidades», con fallback a los assets del
   theme), acotada por `[data-unit]`. Aquí solo el encuadre y el zoom al revelar. */
.lh-unit__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.6s ease;
}
.lh-unit:hover .lh-unit__media,
.lh-unit:focus-within .lh-unit__media,
.lh-unit.is-open .lh-unit__media {
	transform: scale(1.05);
}
.lh-unit__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(26, 26, 26, 0.9) 0%, rgba(26, 26, 26, 0.5) 38%, rgba(26, 26, 26, 0.12) 66%, rgba(26, 26, 26, 0) 100%);
	transition: background 0.4s ease;
}
.lh-unit:hover .lh-unit__scrim,
.lh-unit:focus-within .lh-unit__scrim,
.lh-unit.is-open .lh-unit__scrim {
	background: linear-gradient(to top, rgba(26, 26, 26, 0.95) 0%, rgba(26, 26, 26, 0.84) 55%, rgba(26, 26, 26, 0.64) 100%);
}
/* Cuerpo: contenido anclado abajo-izquierda, encima de la foto y el velo. */
.lh-unit__body {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: clamp(1.4rem, 3vw, 2.4rem);
	color: var(--lh-white);
	pointer-events: none; /* el clic lo captura el .lh-unit (units.js); el botón lo rehabilita */
}
/* El botón es solo el rótulo (kicker + título): contenido de frase válido. */
.lh-unit__toggle {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	pointer-events: auto;
}
.lh-unit__kicker {
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lh-gold);
}
.lh-unit__title {
	position: relative;
	padding-bottom: 0.7rem;
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	font-weight: 800;
	line-height: 1.12;
}
.lh-unit__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	background: var(--lh-gold);
}
/* Revelado: colapsado por defecto; se despliega al hover/focus/is-open. */
.lh-unit__reveal {
	max-height: 0;
	margin-top: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.42s ease, opacity 0.42s ease, margin-top 0.42s ease;
}
.lh-unit:hover .lh-unit__reveal,
.lh-unit:focus-within .lh-unit__reveal,
.lh-unit.is-open .lh-unit__reveal {
	max-height: 340px;
	margin-top: 0.7rem;
	opacity: 1;
}
.lh-unit__lead {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}
.lh-unit__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.34rem;
}
.lh-unit__list li {
	position: relative;
	padding-left: 1.15rem;
	font-size: 1rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.94);
}
.lh-unit__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	background: var(--lh-gold);
	/* viñeta angular achaflanada (huella de la estrella) */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 3px 100%, 0 calc(100% - 3px));
}
.lh-unit__toggle:focus-visible {
	outline: 3px solid var(--lh-gold);
	outline-offset: 4px;
}
@media (max-width: 700px) {
	.lh-services-section .lh-units {
		grid-template-columns: 1fr;
	}
	.lh-unit {
		min-height: clamp(300px, 62vw, 430px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.lh-unit__media,
	.lh-unit__scrim,
	.lh-unit__reveal {
		transition: none;
	}
}

/* La sección Legado es `constrained` (contenido a 760px por defecto), lo que dejaba
   las 3 tarjetas muy estrechas y altas. Se ensancha SOLO su fila de tarjetas a
   ~1120px (el layout constrained del core acota los hijos a la content-size, pero sin
   !important en el max-width → basta la mayor especificidad de `.lh-legacy .lh-cards`).
   Scopeado a .lh-legacy para no afectar a Valores, que reusa `.lh-cards`. */
.lh-legacy .lh-cards {
	max-width: 1120px;
	margin-inline: auto;
}

/* Legado (fondo oscuro): panel translúcido en vez de tarjeta crema */
.lh-legacy .lh-card {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(186, 158, 96, 0.22);
	border-top: 3px solid var(--lh-gold);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
	/* Columna: permite anclar el botón al pie (margin-top:auto) para que todas las
	   tarjetas —con títulos/textos de distinto largo— alineen su «Ver más». */
	display: flex;
	flex-direction: column;
}
.lh-legacy .lh-card:hover {
	background: rgba(255, 255, 255, 0.075);
	box-shadow: 0 22px 46px rgba(0, 0, 0, 0.4);
}
/* Icono de cada tarjeta del Legado: chip dorado angular achaflanado (mismo
   lenguaje que las viñetas de las unidades), afinado para la tarjeta oscura. El
   `align-self:flex-start` lo mantiene a 50px arriba-izquierda (la tarjeta es
   flex-column y por defecto estiraría a sus hijos). */
/* La tarjeta es flex-column, así que el chip es un flex item. El layout constrained
   de WP centra los hijos con `margin-inline: auto !important`; para anclar el chip a
   la IZQUIERDA (alineado con el título) hay que revertirlo con la misma arma
   (!important), scopeado bajo .lh-legacy. En «Qué hacemos» no hace falta porque allí
   el icono es inline (no flex item) y el margin auto resuelve a 0. */
.lh-legacy .lh-legacy__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 50px;
	height: 50px;
	margin-top: 0;
	margin-bottom: 1rem;
	margin-left: 0 !important;
	margin-right: auto !important;
	color: var(--lh-red);
	background: var(--lh-gold-soft, #D8C79B);
	/* chaflán inferior izquierdo — la huella de la estrella, a escala de chip */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 13px 100%, 0 calc(100% - 13px));
}
.lh-legacy .lh-legacy__icon svg {
	width: 28px;
	height: 28px;
}
.lh-legacy .lh-kicker {
	color: var(--lh-gold);
}
.lh-legacy .lh-section-title {
	color: var(--lh-white);
}
.lh-legacy .lh-card h3 {
	color: var(--lh-white);
}
.lh-legacy .lh-card p {
	color: rgba(255, 255, 255, 0.8);
}
.lh-legacy .lh-card .wp-block-buttons {
	/* Empuja el botón al pie de la tarjeta (misma altura en las 3) y lo centra. */
	margin-top: auto;
	padding-top: 1.4rem;
	display: flex;
	justify-content: center;
}
.lh-legacy .is-style-outline .wp-block-button__link {
	border-color: var(--lh-gold);
}
.lh-legacy .is-style-outline .wp-block-button__link:hover {
	background-color: var(--lh-gold) !important;
	color: var(--lh-red-dark) !important;
}

/* CTA Súmate */
.lh-cta {
	text-align: center;
}
.lh-cta__title {
	color: var(--lh-red-dark);
	letter-spacing: 0;
	font-size: clamp(2rem, 4.5vw, 2.8rem) !important;
}
.lh-cta p {
	max-width: 620px;
	margin: 1rem auto 1.6rem;
	font-size: 1.15rem;
	color: var(--lh-red-dark);
}
.lh-cta .wp-block-buttons {
	gap: 1rem;
}
.lh-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--lh-red-dark);
	color: var(--lh-white);
}
.lh-cta .is-style-outline .wp-block-button__link {
	color: var(--lh-red-dark);
	border-color: var(--lh-red-dark);
}
.lh-cta .is-style-outline .wp-block-button__link:hover {
	background-color: var(--lh-red-dark) !important;
	color: var(--lh-gold) !important;
}

/* --------------------------------------------------------------------------
   PORTADA · ÚLTIMAS NOTICIAS (Query Loop dinámico)
   -------------------------------------------------------------------------- */
.lh-news-section {
	padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}

/* meta compartida */
.lh-cat a {
	font-family: var(--lh-heading);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--lh-red);
	text-decoration: none;
}
.lh-date {
	color: var(--lh-muted);
	font-size: 0.82rem;
	margin: 0.25rem 0 0;
}

/* nota destacada */
.lh-featured {
	margin-bottom: 1.25rem;
}
.lh-featured .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}
.lh-featured .wp-block-post {
	background: var(--lh-white);
	border-radius: 6px;
	overflow: hidden;
	/* Spread negativo: la sombra se «ciñe» al ancho de la card para que el
	   overflow:hidden del slider no la corte por los lados. */
	box-shadow: 0 12px 24px -12px rgba(63, 12, 17, 0.3);
}
.lh-featured__row {
	gap: 0 !important;
}
.lh-featured__img {
	align-self: stretch;
}

/* Placeholder de marca: si la imagen no carga (p.ej. .heic) se ve el escudo */
.lh-newscard__img,
.lh-featured__img {
	background-color: var(--lh-red-dark);
	background-image: url("../images/escudo.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 38%;
}
.lh-news-section img {
	font-size: 0;
}
.lh-featured__img,
.lh-featured__img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}
.lh-featured .wp-block-column:last-child {
	padding: clamp(1.6rem, 3vw, 2.6rem);
}
.lh-featured__title {
	font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
	line-height: 1.16;
	letter-spacing: 0;
	text-transform: none;
	margin: 0.5rem 0 0.3rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lh-featured__title a {
	color: var(--lh-ink);
	text-decoration: none;
}
.lh-featured__title a:hover {
	color: var(--lh-red);
}
/* «Leer más» de la nota destacada: botón primario (estilo del theme) en lugar
   del enlace de texto que emite por defecto core/post-excerpt. */
.lh-featured .wp-block-post-excerpt__more-text,
.lh-news--duo__feat .wp-block-post-excerpt__more-text {
	margin: 1rem 0 0;
}
.lh-featured .wp-block-post-excerpt__more-link,
.lh-news--duo__feat .wp-block-post-excerpt__more-link {
	display: inline-block;
	padding: 0.7rem 1.7rem;
	background: var(--lh-red);
	color: var(--lh-white) !important;
	font-family: var(--lh-heading);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.2px;
	text-decoration: none;
	border-radius: 2px;
	transition: background 0.2s ease, transform 0.2s ease;
}
.lh-featured .wp-block-post-excerpt__more-link:hover,
.lh-featured .wp-block-post-excerpt__more-link:focus,
.lh-news--duo__feat .wp-block-post-excerpt__more-link:hover,
.lh-news--duo__feat .wp-block-post-excerpt__more-link:focus {
	background: var(--lh-red-dark);
	color: var(--lh-white) !important;
	transform: translateY(-1px);
}

/* slider auto-rotativo de la nota destacada (3 grandes, una por vista) */
.lh-featured-slider {
	position: relative;
	overflow: hidden;
	padding: 6px 12px 18px; /* deja respirar la sombra de las cards (lados + abajo) */
}
.lh-featured-slider .wp-block-post-template {
	display: flex !important;
	grid-template-columns: none !important;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.6s ease;
	will-change: transform;
}
.lh-featured-slider .wp-block-post {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
}
.lh-featured-slider__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.8rem;
}
.lh-featured-slider__dot {
	/* Área de toque de 24px (WCAG 2.5.8): el punto visible (~10px) se dibuja en
	   el content-box; el borde transparente amplía la zona pulsable sin agrandarlo. */
	width: 24px;
	height: 24px;
	padding: 0;
	border: 7px solid transparent;
	background-clip: content-box;
	border-radius: 50%;
	background-color: rgba(26, 20, 19, 0.18);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.lh-featured-slider__dot:hover {
	background-color: rgba(26, 20, 19, 0.4);
}
.lh-featured-slider__dot.is-active {
	background-color: var(--lh-red);
	transform: scale(1.25);
}
/* Botón de pausa/reanudar (lo inyecta featured-slider.js). Icono dibujado con
   CSS: dos barras (pausa) que pasan a triángulo (reproducir) en .is-paused. */
.lh-featured-slider__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	margin-left: 0.35rem;
	border: 0;
	background: transparent;
	color: rgba(26, 20, 19, 0.55);
	cursor: pointer;
	transition: color 0.2s ease;
}
.lh-featured-slider__toggle:hover {
	color: var(--lh-red);
}
.lh-featured-slider__toggle span {
	width: 8px;
	height: 11px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}
.lh-featured-slider__toggle.is-paused span {
	width: 0;
	height: 0;
	border-left: 11px solid currentColor;
	border-right: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}
@media (prefers-reduced-motion: reduce) {
	.lh-featured-slider .wp-block-post-template {
		transition: none;
	}
}

/* grilla de tarjetas */
.lh-newsgrid .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.6rem;
}
.lh-newsgrid .wp-block-post,
.lh-news--duo__feat .wp-block-post {
	background: var(--lh-white);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 8px 16px -6px rgba(63, 12, 17, 0.16);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lh-newsgrid .wp-block-post:hover,
.lh-news--duo__feat .wp-block-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 22px -8px rgba(63, 12, 17, 0.22);
}
.lh-newscard__img {
	background: var(--lh-red-dark);
	margin: 0;
}
.lh-newscard__img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.lh-newscard__body {
	padding: 0.9rem 1.1rem 1.2rem;
	/* La tarjeta es columna flex y su alto se iguala en la fila; el cuerpo crece
	   para llenar el alto restante (en vez de hugear su contenido) → su filete
	   dorado (is-style-lh-callout) termina PAREJO en toda la fila, aunque los
	   títulos tengan distinto número de líneas. Además es columna flex para poder
	   anclar la fecha al pie (margin-top:auto), de modo que las fechas de las 4
	   tarjetas también queden alineadas entre sí. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
/* Al volver el cuerpo flex, el layout constrained del core encoge y centra sus hijos
   (`margin-inline:auto !important`); se revierte con la misma arma y especificidad
   (0,2,0 > 0,1,1) para que sigan a ancho completo, alineados a la izquierda. */
.wp-block-post .lh-newscard__body > * {
	margin-inline: 0 !important;
}
.lh-newscard__body .lh-date {
	margin-top: auto;
}
.lh-newscard__title {
	font-size: 1.05rem !important;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	margin: 0.3rem 0 0;
	/* Acota a 2 líneas y reserva ese alto: todas las tarjetas quedan parejas
	   (mismo alto de cuerpo → fechas y bordes alineados en la fila). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}
.lh-newscard__title a {
	color: var(--lh-ink);
	text-decoration: none;
}
.lh-newscard__title a:hover {
	color: var(--lh-red);
}

/* botón "ver todas" */
.lh-news-section .wp-block-buttons {
	margin-top: 2.4rem;
}
.lh-news-section .is-style-outline .wp-block-button__link {
	color: var(--lh-red);
	border-color: var(--lh-red);
}
.lh-news-section .is-style-outline .wp-block-button__link:hover {
	background-color: var(--lh-red) !important;
	color: var(--lh-white) !important;
}

/* franja Guardia de la semana (barra de turno) */
.lh-guardia {
	padding-block: 0.85rem;
	border-top: 1px solid rgba(110, 29, 8, 0.25);
}
.lh-guardia .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}
.lh-guardia__row {
	align-items: center;
	gap: 0.9rem;
}
.lh-guardia__label {
	margin: 0;
	font-family: var(--lh-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.72rem;
	color: var(--lh-gold);
	background: var(--lh-red-dark);
	padding: 0.38rem 0.75rem;
	border-radius: 2px;
	white-space: nowrap;
}
.lh-guardia__title {
	margin: 0;
	font-size: 1.05rem !important;
	letter-spacing: 0;
	text-transform: none;
}
.lh-guardia__title a {
	color: var(--lh-red-dark);
	text-decoration: none;
}
.lh-guardia__title a:hover {
	text-decoration: underline;
}

/* banda Brigada Juvenil (texto + tarjeta dinámica)
   Placa angular oscura a sangre sobre la que va el texto; la tarjeta de la última
   actividad queda en el lado blanco, pisando el corte. La profundidad la da el
   CONTRASTE, no el ornamento (una cuña gris sobre blanco no se veía).

   La placa admite FOTO DE FONDO: `--lh-brigada-img` la inyecta el Personalizador
   («Portada · Brigada Juvenil», `laheroica_brigada_inline_style()` en functions.php)
   y `--lh-brigada-veil` gradúa el velo. Sin foto, la placa queda en grafito pleno.

   Todo son pseudo-elementos decorativos: sin nodos nuevos, así que el contenido
   horneado de la portada (Página «Home», id 85) no se toca.
     ::after  → polígono de oro (3 px más ancho): asoma como filo del corte
     ::before → la placa (velo + foto), encima del oro */
.lh-brigada {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.lh-brigada::before,
.lh-brigada::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
/* El corte cae entre la columna de texto (acaba al 50%) y la tarjeta (arranca al
   53%): el texto queda entero sobre la placa y el corte se hunde tras la tarjeta. */
.lh-brigada::before {
	z-index: -1;
	clip-path: polygon(0 0, 57% 0, 50% 100%, 0 100%);
	background-color: var(--lh-ink);
	background-image:
		linear-gradient(
			100deg,
			rgba(26, 26, 26, var(--lh-brigada-veil, 0.92)) 0 40%,
			rgba(26, 26, 26, calc(var(--lh-brigada-veil, 0.92) * 0.8)) 100%
		),
		var(--lh-brigada-img, none);
	background-size: auto, cover;
	background-position: center, center;
	background-repeat: no-repeat;
}
/* Mismo polígono, 3 px más ancho y en oro: al quedar DEBAJO de la placa, solo
   asoma por la diagonal → filo de oro sin poder poner un borde en la hipotenusa. */
.lh-brigada::after {
	z-index: -2;
	clip-path: polygon(0 0, calc(57% + 3px) 0, calc(50% + 3px) 100%, 0 100%);
	background: var(--lh-gold);
}
.lh-brigada__row {
	gap: 2.6rem;
}

/* Texto sobre la placa oscura. Acotado a la PRIMERA columna: la segunda es la
   tarjeta, que va sobre blanco (si no, «Última actividad» saldría blanco sobre
   blanco). */
/* El kicker es rojo por defecto: sobre la placa oscura daba ~2:1. En oro sube a
   ~6,5:1 y además es el color de acento de la Norma sobre fondo oscuro. */
.lh-brigada .wp-block-column:first-child .lh-kicker {
	color: var(--lh-gold);
}
.lh-brigada .wp-block-column:first-child .lh-about__title {
	color: var(--lh-white);
}
.lh-brigada .wp-block-column:first-child p:not(.lh-kicker) {
	color: rgba(255, 255, 255, 0.85);
}
.lh-brigada .wp-block-column:first-child .is-style-outline .wp-block-button__link {
	color: var(--lh-white);
	border-color: rgba(255, 255, 255, 0.55);
}
.lh-brigada .wp-block-column:first-child .is-style-outline .wp-block-button__link:hover {
	background-color: var(--lh-white) !important;
	color: var(--lh-ink) !important;
	border-color: var(--lh-white);
}

/* Tarjeta de la última actividad: lenguaje angular (sin radio, chaflán inferior
   derecho) + filete de oro. Sombra más honda: ahora tiene que despegar del blanco
   y del borde de la placa. */
.lh-bj .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
	/* La sombra va aquí: el clip-path del chaflán recortaría una box-shadow. */
	filter: drop-shadow(0 22px 44px rgba(26, 26, 26, 0.28));
}
.lh-bj .wp-block-post {
	border-radius: 0;
	border-top: 3px solid var(--lh-gold);
	box-shadow: none;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.lh-bj .wp-block-post:hover {
	box-shadow: none;
}

@media (max-width: 781px) {
	/* En una columna la placa se tumba a banda superior: el corte cae en el hueco
	   entre los botones (acaban al 43% del alto) y la tarjeta (arranca al 48%). */
	.lh-brigada::before {
		clip-path: polygon(0 0, 100% 0, 100% 44%, 0 47%);
	}
	.lh-brigada::after {
		clip-path: polygon(0 0, 100% 0, 100% calc(44% + 3px), 0 calc(47% + 3px));
	}
}

/* sección Emergencias (fondo rojo oscuro, tarjetas blancas) */
.lh-emerg-section {
	padding-block: clamp(3.5rem, 7vw, 6rem);
}
.lh-emerg-section .lh-kicker {
	color: var(--lh-gold);
}
.lh-emerg-section .lh-section-title {
	color: var(--lh-white);
}
.lh-emerg-grid .wp-block-post-template {
	gap: 1.6rem;
}
.lh-emerg-section .wp-block-buttons {
	margin-top: 2.4rem;
}
.lh-emerg-section .is-style-outline .wp-block-button__link {
	color: var(--lh-gold);
	border-color: var(--lh-gold);
}
.lh-emerg-section .is-style-outline .wp-block-button__link:hover {
	background-color: var(--lh-gold) !important;
	color: var(--lh-red-dark) !important;
}

@media (max-width: 781px) {
	.lh-featured__row {
		flex-wrap: wrap;
	}
	.lh-featured__row .wp-block-column {
		flex-basis: 100% !important;
	}
	.lh-featured__img img {
		aspect-ratio: 16 / 9;
		height: auto;
	}
}

/* --------------------------------------------------------------------------
   CARRUSELES (Emergencias / Noticias)
   -------------------------------------------------------------------------- */
.lh-carousel {
	--lh-cgap: 1.6rem;
	position: relative;
}
.lh-carousel .wp-block-post-template {
	display: flex !important;
	grid-template-columns: none !important;
	flex-wrap: nowrap;
	gap: var(--lh-cgap);
	margin: 0;
	padding: 6px 2px 22px; /* espacio abajo para la sombra (overflow-x recorta lo que sobra) */
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}
.lh-carousel .wp-block-post-template::-webkit-scrollbar {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.lh-carousel .wp-block-post-template {
		scroll-behavior: auto;
	}
}
.lh-carousel .wp-block-post {
	flex: 0 0 auto;
	width: calc((100% - 2 * var(--lh-cgap)) / 3); /* 3 visibles (emergencias) */
	scroll-snap-align: start;
}
/* Noticias: 4 visibles */
.lh-news-section .lh-carousel .wp-block-post {
	width: calc((100% - 3 * var(--lh-cgap)) / 4);
}
/* dentro del carrusel evitamos el "lift" vertical (lo recortaría el overflow) */
.lh-carousel .wp-block-post:hover {
	transform: none;
}

/* Controles */
.lh-carousel-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.6rem;
}
/* Flechas: base (también visible sin JS, dentro del nav) */
.lh-carousel-prev,
.lh-carousel-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.8rem;
	height: 2.8rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--lh-white);
	color: var(--lh-red);
	font-family: var(--lh-heading);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.lh-carousel-prev:hover,
.lh-carousel-next:hover {
	background: var(--lh-red);
	color: var(--lh-white);
}
/* Flechas superpuestas sobre las cards (estilo galería) */
.lh-carousel > .lh-carousel-prev,
.lh-carousel > .lh-carousel-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
}
.lh-carousel > .lh-carousel-prev {
	left: 0.7rem;
}
.lh-carousel > .lh-carousel-next {
	right: 0.7rem;
}
.lh-carousel > .lh-carousel-prev:hover,
.lh-carousel > .lh-carousel-next:hover {
	transform: translateY(-50%) scale(1.06);
}
.lh-carousel-dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.lh-carousel-dot {
	/* Área de toque de 24px (WCAG 2.5.8): punto visible (~8px) en el content-box. */
	width: 24px;
	height: 24px;
	padding: 0;
	border: 8px solid transparent;
	background-clip: content-box;
	border-radius: 50%;
	background-color: rgba(110, 29, 8, 0.25);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.lh-carousel-dot.is-active {
	background-color: var(--lh-red);
	transform: scale(1.3);
}
/* Variante sobre fondo oscuro (Emergencias): flechas blancas */
.lh-emerg-section .lh-carousel-prev,
.lh-emerg-section .lh-carousel-next {
	background: rgba(26, 8, 4, 0.55);
	color: var(--lh-white);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.lh-emerg-section .lh-carousel-prev:hover,
.lh-emerg-section .lh-carousel-next:hover {
	background: rgba(26, 8, 4, 0.85);
	color: var(--lh-white);
}
.lh-emerg-section .lh-carousel-dot {
	background-color: rgba(255, 255, 255, 0.35);
}
.lh-emerg-section .lh-carousel-dot.is-active {
	background-color: var(--lh-white);
}

@media (max-width: 900px) {
	.lh-carousel .wp-block-post,
	.lh-news-section .lh-carousel .wp-block-post {
		width: calc((100% - var(--lh-cgap)) / 2); /* 2 visibles */
	}
}
@media (max-width: 600px) {
	.lh-carousel .wp-block-post,
	.lh-news-section .lh-carousel .wp-block-post {
		width: 100%; /* 1 visible */
	}
}

/* --------------------------------------------------------------------------
   ARCHIVOS / CATEGORÍAS (listados)
   -------------------------------------------------------------------------- */
.lh-archive-head {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-bottom: 3px solid var(--lh-gold);
}
.lh-archive-head .lh-kicker {
	color: var(--lh-gold);
}
.lh-archive-title {
	margin: 0.2rem 0 0;
	color: var(--lh-white);
	font-size: clamp(2rem, 4.5vw, 3rem) !important;
	font-weight: 800;
	letter-spacing: -0.3px;
}
.lh-archive-desc {
	margin: 0.8rem auto 0;
	max-width: 640px;
	color: rgba(255, 255, 255, 0.82);
}
/* plantilla «Página con banner»: imagen destacada de fondo + título encima */
.lh-banner {
	border-bottom: 3px solid var(--lh-gold);
}
.lh-banner__title {
	margin: 0;
	color: var(--lh-white) !important;
	font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
	font-weight: 800;
	letter-spacing: -0.3px;
	line-height: 1.08;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.lh-archive-grid .wp-block-post-template {
	gap: 1.6rem;
}
.lh-newscard__excerpt {
	margin: 0.5rem 0 0;
	color: var(--lh-muted);
	font-size: 0.92rem;
	line-height: 1.55;
}

/* paginación */
.lh-pagination {
	margin-top: 2.6rem;
	gap: 0.4rem;
	align-items: center;
	flex-wrap: wrap;
}
.lh-pagination .page-numbers {
	display: inline-block;
	min-width: 2.4rem;
	padding: 0.45rem 0.7rem;
	text-align: center;
	border: 1px solid var(--lh-line, #EFEFEF);
	border-radius: var(--lh-radius-sm, 2px);
	color: var(--lh-ink);
	text-decoration: none;
	font-family: var(--lh-heading);
	font-weight: 500;
}
.lh-pagination .page-numbers.current {
	background: var(--lh-red);
	border-color: var(--lh-red);
	color: var(--lh-white);
}
.lh-pagination a.page-numbers:hover {
	background: var(--lh-red);
	border-color: var(--lh-red);
	color: var(--lh-white);
}
.lh-pagination .wp-block-query-pagination-previous,
.lh-pagination .wp-block-query-pagination-next {
	font-family: var(--lh-heading);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.82rem;
	color: var(--lh-red);
	text-decoration: none;
}
.lh-pagination .wp-block-query-pagination-previous:hover,
.lh-pagination .wp-block-query-pagination-next:hover {
	color: var(--lh-red-dark);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   PÁGINAS INTERNAS / NOTICIAS
   -------------------------------------------------------------------------- */
.lh-page__title {
	margin-bottom: 0.6rem;
}
.lh-post-meta {
	gap: 0.6rem;
	color: var(--lh-muted);
	font-size: 0.92rem;
	margin-bottom: 1.6rem;
}
.lh-page__img img {
	border-radius: 4px;
	margin-bottom: 1.5rem;
}
/* autor en la meta del single: "· Por <nombre>" (post-author-name no soporta prefix) */
.lh-post-meta .wp-block-post-author-name {
	font-style: italic;
}
.lh-post-meta .wp-block-post-author-name::before {
	content: "· Por ";
	font-style: normal;
}
/* etiquetas al cierre del artículo */
.lh-post-tags {
	margin-top: 1.6rem;
	color: var(--lh-muted);
	font-size: 0.85rem;
}
.lh-post-tags a {
	color: var(--lh-red);
	text-decoration: none;
}
.lh-post-tags a:hover {
	text-decoration: underline;
}
/* navegación anterior/siguiente */
.lh-post-nav {
	border-top: 1px solid var(--lh-line);
	gap: 1rem;
}
.lh-post-nav__next {
	text-align: right;
	margin-left: auto;
}
.lh-post-nav a {
	font-family: var(--lh-heading);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 0.82rem;
	text-decoration: none;
	color: var(--lh-ink);
}
.lh-post-nav a:hover {
	color: var(--lh-red);
}
.lh-news {
	margin-top: 1rem;
}
.lh-news__title a {
	font-family: var(--lh-heading);
	font-weight: 800;
	letter-spacing: 0;
	text-decoration: none;
	color: var(--lh-ink);
}
.lh-news__title a:hover {
	color: var(--lh-red);
}
.lh-news__date {
	color: var(--lh-muted);
	font-size: 0.85rem;
}
.lh-news__img img {
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
	padding-block: clamp(3rem, 5vw, 4rem) 1.4rem;
	border-top: 3px solid var(--lh-gold);
}
.site-footer,
.site-footer p {
	color: rgba(255, 255, 255, 0.8);
}
.footer-strong {
	margin: 0.8rem 0 0.2rem;
	font-family: var(--lh-heading);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--lh-white);
}
/* Aval institucional CBS — arquitectura de marca endosada (Norma Gráfica 2026 ·
   §Arquitectura). La marca CBS acompaña SIEMPRE a la Compañía: aquí, la versión
   resumida blanca bajo la identidad de la Tercera. La marca va por background-image
   (mismo patrón que escudo.png) para no fijar un dominio en el template estático. */
.footer-aval {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: 1.6rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-aval__mark {
	flex: 0 0 auto;
	width: 44px;
	height: 60px; /* relación 266×360 del recorte de la marca resumida */
	background: url("../images/cbs-resumida-blanco.png") center / contain no-repeat;
}
.footer-aval__text {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.5;
	letter-spacing: 0.3px;
	color: rgba(255, 255, 255, 0.7);
}
.footer-head {
	margin: 0 0 0.6rem;
	font-size: 1rem !important;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--lh-gold) !important;
}
.footer-muted {
	font-size: 0.95rem;
	line-height: 1.7;
}
.site-footer__bottom {
	margin-top: 2.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.82rem;
	opacity: 0.7;
}
/* menú de navegación del footer */
.footer-nav {
	font-family: var(--lh-heading);
	font-size: 0.9rem;
	letter-spacing: 0.5px;
	gap: 0.5rem !important;
}
.footer-nav a,
.footer-nav .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}
.footer-nav a:hover,
.footer-nav a:focus,
.footer-nav .wp-block-navigation-item__content:hover {
	color: var(--lh-gold);
}
/* iconos sociales del footer */
.footer-social {
	gap: 0.4rem;
}
.footer-social .wp-block-social-link a:hover {
	color: var(--lh-gold);
}
/* página 404 */
.lh-404__code {
	font-size: clamp(4rem, 14vw, 8rem) !important;
	line-height: 1;
	color: var(--lh-red);
	margin: 0.2rem 0 0.6rem;
}
.lh-404__search {
	max-width: 460px;
	margin: 1.6rem auto 2rem;
}
.lh-404__nav {
	font-family: var(--lh-heading);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	gap: 0.4rem 1.4rem !important;
}
.lh-404__nav a,
.lh-404__nav .wp-block-navigation-item__content {
	color: var(--lh-muted);
	text-decoration: none;
}
.lh-404__nav a:hover,
.lh-404__nav .wp-block-navigation-item__content:hover {
	color: var(--lh-red);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	/* Cifras en 2x2 (gana sobre el apilado de columnas de WP) */
	.lh-stats .lh-stats__row {
		flex-wrap: wrap !important;
		gap: 1.5rem 0.5rem;
	}
	.lh-stats .lh-stats__row > .wp-block-column {
		flex-basis: calc(50% - 0.5rem) !important;
		flex-grow: 0;
	}
	/* Header móvil: marca centrada arriba, menú centrado y envuelto debajo */
	.site-header__inner {
		flex-direction: column;
		justify-content: center;
		gap: 0.6rem;
	}
	.site-tagline {
		display: none !important;
	}
	.site-title,
	.site-title a {
		font-size: 1.1rem;
		letter-spacing: 1px;
	}
	.site-header .wp-block-site-logo img {
		width: 42px;
	}
	.site-nav,
	.site-header .wp-block-navigation {
		width: 100%;
		justify-content: center !important;
		flex-wrap: wrap;
		--wp--style--block-gap: 0.5rem 1.1rem;
		font-size: 0.82rem;
	}
	.lh-about__row {
		gap: 2rem;
	}
	.lh-hero__title {
		letter-spacing: -0.3px;
	}
}

/* --------------------------------------------------------------------------
   RENDIMIENTO — content-visibility en secciones below-fold de la portada.

   El navegador se salta el layout/paint de estas secciones hasta que están a
   punto de entrar en el viewport, recortando el trabajo del primer render.
   `contain-intrinsic-size: auto <estimación>`: el `auto` hace que, tras
   renderizarse una vez, el navegador RECUERDE la altura real (la estimación de
   600px solo aplica antes del primer render de cada sección) → sin saltos de
   scrollbar una vez visitadas.

   Deliberadamente EXCLUIDAS:
     · hero, stats, guardia, news: van arriba (hero es el LCP) o cerca del fold.
     · lh-news-section y lh-emerg-section: contienen CARRUSELES. `carousel.js`
       mide anchos (clientWidth/getBoundingClientRect) en el init; si midiera una
       sección con contención de tamaño (aún no renderizada) rompería el cálculo
       de páginas y ocultaría la navegación. Por eso no llevan content-visibility.

   Soporte: Chromium/Firefox/Safari 18+. Donde no se soporta, la propiedad se
   ignora (sin efecto). QA recomendada: hacer scroll completo verificando que la
   barra de desplazamiento no «salte» y que nada aparezca en blanco.
   -------------------------------------------------------------------------- */
.lh-services-section,
.lh-brigada,
.lh-about,
.lh-legacy,
.lh-cta,
.site-footer {
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}

/* ===================================================================
   Grillas de noticias insertables (patrones news-*)
   Grillas «desnudas»: sin marco de sección. Reusan .lh-newscard__* .lh-cat .lh-date
   =================================================================== */

/* Oculta el alt-text del placeholder de marca (como .lh-news-section img) */
.lh-news--uniforme img,
.lh-news--trio img,
.lh-news--hero img,
.lh-news--duo img,
.lh-news--bento img {
	font-size: 0;
}

/* E · Trío: exactamente 3 en fila; una sola columna en móvil.
   Rejilla propia sobre el post-template en flujo (sin la rejilla del core, que
   arrastra `container-type: inline-size`). */
.lh-news--trio .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6rem;
}
@media (max-width: 781px) {
	.lh-news--trio .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* D · Grilla uniforme: reusa .lh-newsgrid, sin cambios extra */

/* Armazón vertical de los patrones de dos bloques (A y B).
   NO usar `display:flex` aquí: el layout «constrained» del core le pone
   margin-inline:auto a los hijos y, en un contenedor flex en columna, un margen
   auto en el eje transversal ANULA el stretch → el hijo se encoge a su ancho de
   contenido. Y la rejilla del core (post-template en grid) lleva
   `container-type: inline-size`, cuyo contenido no aporta ancho intrínseco: la
   grilla colapsaba a 0 px de ancho y el texto se estrujaba en una tira de miles
   de px de alto (el «espacio en blanco» que estiraba la página).
   Flujo normal + margen entre hijos. La doble clase gana al `> * + *` del core. */
.wp-block-group.lh-news--hero > * + *,
.wp-block-group.lh-news--duo > * + * {
	margin-top: 1.6rem;
}
.lh-news--hero .lh-featured {
	margin-bottom: 0;
}
/* A · la fila de abajo son SIEMPRE 3 tarjetas → 3 columnas exactas (la rejilla
   del core con minimumColumnWidth abría 4 pistas a 1180 px y dejaba un hueco). */
.lh-news--hero .lh-newsgrid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 781px) {
	.lh-news--hero .lh-newsgrid .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}
/* B · 2 destacadas + grilla */
.lh-news--duo__feat .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.6rem;
}
.lh-news--duo__feat .lh-newscard__img img {
	aspect-ratio: 16 / 9;
}
@media (max-width: 781px) {
	.lh-news--duo__feat .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* C · Mosaico bento: primera tarjeta 2x2, resto 1x1 */
.lh-news--bento .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: 1.6rem;
}
.lh-news--bento .wp-block-post {
	grid-column: span 2;
}
.lh-news--bento .wp-block-post:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
/* La tarjeta grande estira su imagen para llenar las 2 filas */
.lh-news--bento .wp-block-post:first-child .lh-newscard__img {
	flex: 1;
}
.lh-news--bento .wp-block-post:first-child .lh-newscard__img img {
	height: 100%;
	aspect-ratio: auto;
}
@media (max-width: 781px) {
	.lh-news--bento .wp-block-post-template {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
	.lh-news--bento .wp-block-post,
	.lh-news--bento .wp-block-post:first-child {
		grid-column: auto;
		grid-row: auto;
	}
	.lh-news--bento .wp-block-post:first-child .lh-newscard__img {
		flex: none;
	}
	.lh-news--bento .wp-block-post:first-child .lh-newscard__img img {
		aspect-ratio: 4 / 3;
	}
}