/*
 * Sistema visual APMV.
 *
 * Criterio: institucional, editorial, profesional y humano. Una asociación
 * gremial con setenta y cinco años, no una startup.
 *
 * Lo que NO hay aquí, y es deliberado: degradados decorativos, sombras difusas
 * por sistema, glassmorphism, animaciones de entrada al hacer scroll, ni
 * rejillas infinitas de tarjetas con icono y dos líneas. El sistema se sostiene
 * con tres cosas: **aire, filetes y jerarquía tipográfica**.
 *
 * Y una condición que manda sobre el resto: **el foco visible no se quita en
 * ningún sitio**. Si algo se puede enfocar, se ve enfocado.
 *
 * Las fichas están en tokens.css. Aquí no se escribe ni un color ni una medida
 * a mano.
 */

/* =========================================================================
   1 · Base
   ========================================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Con la cabecera fija, un ancla no puede quedar debajo de ella. */
	scroll-padding-top: 8rem;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--apmv-papel);
	color: var(--apmv-grafito);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-base);
	line-height: var(--apmv-interlinea-lectura);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* =========================================================================
   2 · Tipografía
   ========================================================================= */

h1,
h2,
h3,
h4 {
	font-family: var(--apmv-serif);
	font-weight: 600;
	line-height: var(--apmv-interlinea-titular);
	letter-spacing: var(--apmv-tracking-titular);
	color: var(--apmv-grafito);
	margin: 0 0 var(--apmv-e4);
	text-wrap: balance;
}

h1 {
	font-size: var(--apmv-txt-2xl);
	line-height: var(--apmv-interlinea-apretada);
}

h2 {
	font-size: var(--apmv-txt-xl);
	margin-top: var(--apmv-e7);
}

h3 {
	font-size: var(--apmv-txt-l);
	margin-top: var(--apmv-e6);
}

h4 {
	font-size: var(--apmv-txt-m);
}

p,
li {
	max-width: var(--apmv-medida-texto);
}

p {
	margin: 0 0 var(--apmv-e4);
}

/* La cursiva de Spectral es la que lleva las citas institucionales. */
blockquote {
	margin: var(--apmv-e6) 0;
	padding-left: var(--apmv-e5);
	border-left: var(--apmv-filete-marca) solid var(--apmv-dorado);
	font-family: var(--apmv-serif);
	font-size: var(--apmv-txt-m);
	font-style: italic;
	color: var(--apmv-verde-tinta);
}

blockquote p:last-child {
	margin-bottom: 0;
}

strong {
	font-weight: 600;
}

/* Los números de la Biblioteca se alinean en columna. */
.apmv-cifra,
time {
	font-variant-numeric: tabular-nums;
}

a {
	color: var(--apmv-verde-profundo);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--apmv-transicion);
}

a:hover {
	color: var(--apmv-verde-tinta);
}

/*
 * Foco. Una sola regla, para todo lo enfocable, y no se anula en ninguna parte
 * de esta hoja. Es lo que hace navegable el sitio con teclado.
 */
:focus-visible {
	outline: var(--apmv-foco-grosor) solid var(--apmv-foco-color);
	outline-offset: var(--apmv-foco-separacion);
	border-radius: var(--apmv-radio);
}

/* =========================================================================
   3 · Estructura
   ========================================================================= */

.apmv-contenedor {
	width: 100%;
	max-width: var(--apmv-ancho-contenedor);
	margin-inline: auto;
	padding-inline: var(--apmv-margen-lateral);
}

.apmv-principal {
	display: block;
	padding-block: var(--apmv-e7) var(--apmv-aire-seccion);
}

/*
 * En la portada el hero va pegado a la cabecera: el aire de arriba lo pone el
 * propio hero. Se resuelve con la clase que WordPress ya pone en el `body`, sin
 * que la cabecera tenga que saber qué plantilla la está usando.
 */
.home .apmv-principal {
	padding-block-start: 0;
}

.apmv-seccion {
	padding-block: var(--apmv-aire-seccion);
}

.apmv-seccion--velo {
	background: var(--apmv-papel-alterno);
}

/* Banda de cierre de la portada (Afíliate), Fase 5, 2026-09-14: color sólido
   y peso visual propio, como el mockup aprobado — antes era una sección
   blanca más, indistinguible del resto y fácil de perderse al final del
   recorrido. */
.apmv-seccion--cierre {
	padding-block: var(--apmv-e7);
	background: var(--apmv-verde-tinta);
	color: var(--apmv-blanco);
}

.apmv-cierre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--apmv-e4);
}

.apmv-cierre__etiqueta {
	display: inline-block;
	margin-bottom: var(--apmv-e2);
	color: var(--apmv-dorado);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-xs);
	font-weight: 600;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

.apmv-cierre__titulo {
	margin: 0;
	color: var(--apmv-blanco);
}

.apmv-cierre__texto p.apmv-cierre__cuerpo {
	margin: var(--apmv-e2) 0 0;
	max-width: 40rem;
	color: var(--apmv-blanco);
}

.apmv-cierre__accion {
	margin: 0;
	flex-shrink: 0;
}

.apmv-seccion--cierre :focus-visible {
	outline-color: var(--apmv-blanco);
}

/* Mismo motivo que en el hero: sobre `--apmv-verde-tinta`, un botón
   `--apmv-verde-profundo` no da suficiente contraste consigo mismo. */
.apmv-seccion--cierre .apmv-boton {
	background: var(--apmv-blanco);
	color: var(--apmv-verde-tinta);
}

.apmv-seccion--cierre .apmv-boton:hover {
	background: var(--apmv-verde-velo);
	color: var(--apmv-verde-tinta);
}

/* Columna editorial: para leer seguido, no para maquetar. */
.apmv-editorial {
	max-width: var(--apmv-ancho-editorial);
}

.apmv-editorial > * {
	max-width: none;
}

/* Salto al contenido: el primer elemento enfocable de la página. */
.apmv-salto {
	position: absolute;
	left: var(--apmv-e4);
	top: var(--apmv-e4);
	z-index: 100;
	padding: var(--apmv-e3) var(--apmv-e4);
	background: var(--apmv-verde-tinta);
	color: var(--apmv-blanco);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--apmv-radio-boton);
	transform: translateY(-200%);
	transition: transform var(--apmv-transicion);
}

.apmv-salto:focus {
	transform: translateY(0);
	color: var(--apmv-blanco);
}

/*
 * Ruta de migas.
 *
 * Va dentro del contenido y por encima del título, en cuerpo pequeño: dice
 * dónde está esta página sin competir con lo que la página tiene que decir.
 * Cuando existe, el contenido arranca antes, porque la ruta ya hace de aire.
 */
.apmv-principal:has(> .apmv-migas) {
	padding-block-start: var(--apmv-e5);
}

.apmv-migas {
	padding-block-end: var(--apmv-e5);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-xs);
	color: var(--apmv-gris-lectura);
}

.apmv-migas__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--apmv-e1) var(--apmv-e2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.apmv-migas__paso {
	display: flex;
	align-items: baseline;
	gap: var(--apmv-e2);
	margin: 0;
}

/*
 * El separador es decorativo y se genera desde CSS. El texto alternativo vacío
 * —la segunda parte de `content`— evita que un lector de pantalla lea «barra»
 * entre cada escalón. Donde no se soporte, se lee la ruta con la barra: molesto,
 * no roto.
 */
.apmv-migas__paso + .apmv-migas__paso::before {
	content: "/" / "";
	color: var(--apmv-gris-filete);
}

.apmv-migas a {
	color: var(--apmv-verde-profundo);
	text-decoration-color: var(--apmv-gris-filete);
	text-underline-offset: 0.2em;
}

.apmv-migas a:hover {
	text-decoration-color: currentcolor;
}

/* La página actual no es un enlace y no debe parecerlo. */
.apmv-migas [aria-current="page"] {
	color: var(--apmv-grafito);
	font-weight: 600;
}

/* =========================================================================
   4 · Cabecera y navegación
   ========================================================================= */

/*
 * La cabecera se queda arriba al hacer scroll. `sticky` no saca el elemento
 * del flujo: la página no cambia de altura ni salta al engancharse. El z-index
 * la pone por encima del contenido y del botón de WhatsApp (40).
 */
.apmv-cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	background: var(--apmv-papel);
}

/*
 * Y se despega cuando pegarla sería peor que no hacerlo.
 *
 * Por debajo de 60rem el menú es plegable **porque JavaScript lo pliega**
 * (`.apmv-nav--js`). Sin JavaScript el panel se queda desplegado dentro del
 * flujo y la cabecera mide unos 800 px: fijarla ahí tapa la página entera en
 * cuanto se desplaza, y lo que quede debajo no se puede ni pulsar. Lo encontró
 * la batería end-to-end el 2026-10-05, en las pruebas sin JavaScript: el botón
 * «Filtrar» de la Biblioteca quedaba debajo de la cabecera y el clic se lo
 * comía ella.
 *
 * `:not(:has(...))` y no una clase nueva: el estado ya existe en el marcado, no
 * hace falta inventar otro. En escritorio no se toca —el menú va en la misma
 * fila y la cabecera mide poco más de 90 px, con o sin JavaScript—. Y en un
 * navegador sin `:has()` la regla entera se descarta: la cabecera se queda
 * fija, que es el comportamiento anterior, no una página rota.
 */
@media (max-width: 60rem) {

	.apmv-cabecera:not(:has(.apmv-nav--js)) {
		position: static;
	}
}

.apmv-cabecera__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--apmv-e5);
	min-height: 6rem;
	padding-block: var(--apmv-e3);
}

/*
 * El logotipo ES el enlace a Inicio (DP-02). No hay entrada textual «Inicio»
 * en el menú, y por eso el logotipo tiene que llevar un texto accesible que
 * diga a dónde va.
 */
.apmv-marca {
	display: inline-flex;
	align-items: center;
	gap: var(--apmv-e3);
	text-decoration: none;
	color: var(--apmv-verde-tinta);
	font-family: var(--apmv-serif);
	font-weight: 600;
	font-size: var(--apmv-txt-m);
	line-height: 1.1;
}

.apmv-marca img,
.apmv-marca .custom-logo {
	max-height: 4.5rem;
	width: auto;
}

.apmv-nav {
	display: flex;
	align-items: center;
	gap: var(--apmv-e5);
}

.apmv-nav__lista {
	display: flex;
	align-items: center;
	gap: var(--apmv-e5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.apmv-nav__lista li {
	max-width: none;
	margin: 0;
}

.apmv-nav__lista a {
	display: inline-block;
	padding-block: var(--apmv-e2);
	color: var(--apmv-grafito);
	font-size: var(--apmv-txt-s);
	font-weight: 500;
	text-decoration: none;
	border-bottom: var(--apmv-filete) solid transparent;
}

.apmv-nav__lista a:hover,
.apmv-nav__lista .current-menu-item > a,
.apmv-nav__lista .current_page_item > a {
	color: var(--apmv-verde-tinta);
	border-bottom-color: var(--apmv-dorado);
}

/* La llamada a la acción de la cabecera. Una sola, y siempre la misma. */
.apmv-nav__cta {
	flex-shrink: 0;
}

.apmv-nav__aviso {
	margin: 0;
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
}

/* Botón de menú en móvil. Oculto en escritorio; sin JavaScript no estorba. */
.apmv-nav__boton {
	display: none;
	align-items: center;
	gap: var(--apmv-e2);
	padding: var(--apmv-e2) var(--apmv-e3);
	border: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	border-radius: var(--apmv-radio-boton);
	background: var(--apmv-papel);
	color: var(--apmv-grafito);
	font-family: inherit;
	font-size: var(--apmv-txt-s);
	font-weight: 600;
	cursor: pointer;
}

.apmv-nav__boton:hover {
	border-color: var(--apmv-verde-profundo);
	color: var(--apmv-verde-tinta);
}

/* -------------------------------------------------------------------------
   4.1 · Desplegables de «La APMV» y «Noticias»
   -------------------------------------------------------------------------
   Dos, y solo dos. El enlace del padre sigue llevando a su página; quien
   despliega es un botón hermano (ver `clases/class-apmv-walker-nav.php`).

   Sin JavaScript no hay `apmv-nav--js`: el submenú se queda en el flujo,
   visible y en columna. Es el mismo fallo controlado que ya tiene el menú
   móvil — incómodo, pero navegable.
   ------------------------------------------------------------------------- */

.apmv-nav__lista .menu-item-has-children {
	display: flex;
	align-items: center;
	gap: var(--apmv-e1);
}

.apmv-nav__desplegar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--apmv-e1);
	border: 0;
	background: none;
	color: var(--apmv-gris-lectura);
	cursor: pointer;
	line-height: 0;
}

.apmv-nav__desplegar:hover {
	color: var(--apmv-verde-tinta);
}

.apmv-nav__chevron {
	width: 1rem;
	height: 1rem;
	transition: transform var(--apmv-transicion);
}

.apmv-nav__desplegar[aria-expanded="true"] .apmv-nav__chevron {
	transform: rotate(180deg);
}

.apmv-nav__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.apmv-nav__submenu[hidden] {
	display: none;
}

.apmv-nav__submenu a {
	display: block;
	border-bottom: 0;
}

/*
 * Solo con JavaScript: el submenú sale del flujo y flota bajo su sección.
 * `min-width` en `ch` para que el nombre más largo —«Casa del Médico
 * Veterinario»— no se parta en dos líneas.
 */
.apmv-nav--js .apmv-nav__lista .menu-item-has-children {
	position: relative;
}

.apmv-nav--js .apmv-nav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 30ch;
	padding: var(--apmv-e2) 0;
	border: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	border-top: var(--apmv-filete) solid var(--apmv-dorado);
	background: var(--apmv-papel);
	box-shadow: 0 0.5rem 1.5rem rgb(26 32 24 / 8%);
}

.apmv-nav--js .apmv-nav__submenu a {
	padding: var(--apmv-e2) var(--apmv-e4);
	white-space: nowrap;
}

.apmv-nav--js .apmv-nav__submenu a:hover,
.apmv-nav--js .apmv-nav__submenu .current-menu-item > a,
.apmv-nav--js .apmv-nav__submenu .current_page_item > a {
	background: var(--apmv-verde-velo);
	color: var(--apmv-verde-tinta);
}

/*
 * El último desplegable del menú se abre hacia dentro: anclado a la izquierda
 * se saldría por el borde derecho de la ventana en pantallas justas.
 */
.apmv-nav--js .apmv-nav__lista > li:last-child .apmv-nav__submenu {
	left: auto;
	right: 0;
}

/* =========================================================================
   5 · Hero
   =========================================================================
   Dos estados, uno activo a la vez. Sin carrusel: nada se mueve solo.
   ESCRITORIO: composición partida del mockup aprobado (MOCKUP-01-INICIO) —
   panel sólido con el texto a la izquierda, fotografía a pleno brillo a la
   derecha, sin velo. Corregido el 2026-09-14 (Fase 5): la versión anterior
   ponía el texto ENCIMA de la fotografía con un velo degradado, que no es lo
   que el mockup aprobado muestra — y, con el texto ya fuera de la foto, el
   velo deja de tener función de contraste que cumplir.
   MÓVIL: hero partido igual, pero en vertical. El texto baja debajo de la
   imagen en lugar de ponerse al lado. Es lo que permite conservar la
   fotografía de la Casa del Médico Veterinario **y** el rótulo **y** la
   legibilidad, que en una pantalla estrecha no caben las tres cosas juntas.
   SIN FOTOGRAFÍA (hero institucional antes de que la APMV suba una, o
   cualquier estado sin imagen): una sola columna, sin partir nada — no hay
   segunda mitad que mostrar.
   ========================================================================= */

.apmv-hero {
	position: relative;
	display: block;
	min-height: clamp(28rem, 20rem + 20vw, 38rem);
	background: var(--apmv-verde-tinta);
	color: var(--apmv-blanco);
	overflow: hidden;
}

.apmv-hero--sin-imagen {
	display: block;
	min-height: 0;
}

.apmv-hero__medio {
	position: absolute;
	inset: 0;
}

.apmv-hero__medio img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Velo verde en degradado horizontal sobre la fotografía (mockup aprobado,
 * DP-01): intenso donde va el texto, a la izquierda, y hacia transparente
 * a la derecha, para que la fotografía se vea luminosa donde no hay texto
 * encima. rgba() en vez de var() porque no hay un token con alfa para
 * --apmv-verde-tinta (#1d4205). Los topes (0.88 → 0.72 → 0.32 → 0) se
 * calcularon para que, incluso sobre una zona casi blanca de la foto, el
 * tramo donde cae el texto (`.apmv-hero__texto`, hasta 34rem de ancho)
 * siga pasando el contraste AA con texto blanco.
 */
.apmv-hero__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(29, 66, 5, 0.88) 0%,
		rgba(29, 66, 5, 0.72) 50%,
		rgba(29, 66, 5, 0.32) 75%,
		rgba(29, 66, 5, 0) 100%
	);
}

.apmv-hero__cuerpo {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: inherit;
	padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

.apmv-hero--sin-imagen .apmv-hero__cuerpo {
	display: block;
	min-height: 0;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

/* El marcador dentro del hero, sobre fondo oscuro. */
.apmv-hero .apmv-pendiente {
	background: rgba(255, 255, 255, 0.14);
	border-bottom-color: var(--apmv-dorado);
	color: var(--apmv-blanco);
}

.apmv-hero__texto {
	max-width: 34rem;
}

.apmv-hero__marca {
	display: inline-block;
	margin-bottom: var(--apmv-e4);
	padding-bottom: var(--apmv-e2);
	border-bottom: var(--apmv-filete) solid var(--apmv-dorado);
	color: var(--apmv-blanco);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-xs);
	font-weight: 600;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

.apmv-hero__titular {
	margin: 0 0 var(--apmv-e4);
	color: var(--apmv-blanco);
	font-size: var(--apmv-txt-3xl);
}

.apmv-hero__entrada {
	margin: 0 0 var(--apmv-e6);
	max-width: 34rem;
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--apmv-txt-m);
}

.apmv-hero__fecha {
	display: block;
	margin-bottom: var(--apmv-e4);
	color: var(--apmv-dorado);
	font-size: var(--apmv-txt-s);
	font-weight: 600;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

.apmv-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--apmv-e4);
}

/* =========================================================================
   6 · Botones
   ========================================================================= */

.apmv-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--apmv-e2);
	padding: var(--apmv-e3) var(--apmv-e5);
	border: var(--apmv-filete) solid transparent;
	border-radius: var(--apmv-radio-boton);
	background: var(--apmv-verde-profundo);
	color: var(--apmv-blanco);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-s);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--apmv-transicion), border-color var(--apmv-transicion);
}

.apmv-boton:hover {
	background: var(--apmv-verde-tinta);
	color: var(--apmv-blanco);
}

.apmv-boton--secundario {
	background: transparent;
	border-color: currentcolor;
	color: var(--apmv-verde-profundo);
}

.apmv-boton--secundario:hover {
	background: var(--apmv-verde-velo);
	color: var(--apmv-verde-tinta);
}

/* Sobre el hero, donde el fondo es oscuro. */
.apmv-hero .apmv-boton {
	background: var(--apmv-blanco);
	color: var(--apmv-verde-tinta);
}

.apmv-hero .apmv-boton:hover {
	background: var(--apmv-verde-velo);
	color: var(--apmv-verde-tinta);
}

.apmv-hero .apmv-boton--secundario {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.8);
	color: var(--apmv-blanco);
}

.apmv-hero .apmv-boton--secundario:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--apmv-blanco);
}

.apmv-hero :focus-visible {
	outline-color: var(--apmv-blanco);
}

/* =========================================================================
   7 · Encabezados de sección
   ========================================================================= */

.apmv-encabezado {
	max-width: var(--apmv-ancho-editorial);
	margin-bottom: var(--apmv-e6);
}

.apmv-encabezado__icono {
	display: block;
	width: 2rem;
	height: 2rem;
	margin-bottom: var(--apmv-e3);
	color: var(--apmv-verde-profundo);
}

.apmv-encabezado__etiqueta {
	display: block;
	margin-bottom: var(--apmv-e2);
	color: var(--apmv-dorado-profundo);
	font-size: var(--apmv-txt-xs);
	font-weight: 700;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

.apmv-encabezado__titulo {
	margin: 0 0 var(--apmv-e3);
}

/*
 * Un encabezado con identificador es destino de enlace —«Investigación» del
 * menú principal apunta al de Ciencia Panameña—. Sin este aire, el salto deja
 * el título pegado al borde superior de la ventana y no se ve que empieza una
 * sección.
 */
.apmv-encabezado__titulo[id] {
	scroll-margin-top: var(--apmv-e6);
}

.apmv-encabezado__titulo::after {
	content: "";
	display: block;
	width: 3rem;
	margin-top: var(--apmv-e3);
	border-top: var(--apmv-filete-marca) solid var(--apmv-dorado);
}

.apmv-encabezado__entrada {
	margin: 0;
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-m);
}

.apmv-seccion__pie {
	margin-top: var(--apmv-e6);
}

/* =========================================================================
   8 · Listados y fichas
   ========================================================================= */

.apmv-listado {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--apmv-e6);
}

.apmv-listado--rejilla {
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.apmv-listado li {
	max-width: none;
}

.apmv-ficha {
	padding-top: var(--apmv-e5);
	border-top: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	max-width: var(--apmv-medida-texto);
}

.apmv-listado--rejilla .apmv-ficha {
	max-width: none;
}

.apmv-ficha__titulo {
	margin: 0 0 var(--apmv-e2);
	font-size: var(--apmv-txt-l);
}

.apmv-ficha__titulo a {
	text-decoration: none;
}

.apmv-ficha__titulo a:hover {
	text-decoration: underline;
}

/* Metadatos: familia estrecha, para que quepan sin encogerse. */
.apmv-ficha__datos,
.apmv-ficha__clasificacion {
	margin: 0 0 var(--apmv-e2);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-s);
	color: var(--apmv-gris-lectura);
}

.apmv-ficha__datos span + span::before,
.apmv-ficha__datos span + time::before {
	content: " · ";
	color: var(--apmv-gris-filete);
}

/*
 * Distingue Noticia de Evento en Actualidad. Es texto, no solo color: el
 * nombre del tipo va siempre en la etiqueta, nunca solo el tono del fondo.
 */
.apmv-etiqueta-tipo {
	display: inline-block;
	padding: 0.1em 0.6em;
	border-radius: var(--apmv-radio);
	font-weight: 700;
	font-size: var(--apmv-txt-xs);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.apmv-etiqueta-tipo--noticia {
	background: var(--apmv-verde-niebla);
	color: var(--apmv-verde-profundo);
}

.apmv-etiqueta-tipo--evento {
	background: var(--apmv-papel-alterno);
	color: var(--apmv-dorado-profundo);
	border: var(--apmv-filete-fino) solid var(--apmv-dorado);
}

.apmv-etiqueta-tipo--investigacion {
	background: var(--apmv-verde-tinta);
	color: var(--apmv-blanco);
}

.apmv-ficha__resumen {
	margin: 0 0 var(--apmv-e3);
	color: var(--apmv-gris-lectura);
}

.apmv-ficha__estado {
	display: inline-block;
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-verde-profundo);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
	font-weight: 700;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

.apmv-ficha__estado--celebrado,
.apmv-ficha__estado--sin_fecha {
	color: var(--apmv-gris-lectura);
}

.apmv-ficha__acceso {
	margin: var(--apmv-e3) 0 0;
}

/* =========================================================================
   Cuadrícula de eventos — archivo de `/eventos/` (2026-09-16)

   Una tarjeta por evento, en vez de la lista que reutilizaba `.apmv-ficha`:
   esa lista nunca pintaba la imagen del evento, y con arte de verdad
   cargado (el Simposio) la ausencia se notaba. Tres columnas en escritorio,
   dos en tableta, una en móvil — igual que pide el patrón de portales de
   entradas, pero con las esquinas casi rectas y el borde fino del resto del
   sistema visual, no con esquinas muy redondeadas ni sombras difusas.
   ========================================================================= */

.apmv-eventos-cuadricula {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--apmv-e6);
	list-style: none;
	margin: 0 0 var(--apmv-e7);
	padding: 0;
}

.apmv-eventos-cuadricula li {
	max-width: none;
}

@media (min-width: 48rem) {

	.apmv-eventos-cuadricula {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 75rem) {

	.apmv-eventos-cuadricula {
		grid-template-columns: repeat(3, 1fr);
	}
}

.apmv-tarjeta-evento {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--apmv-papel);
	border: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	border-radius: var(--apmv-radio);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(29, 66, 5, 0.06);
	transition: border-color var(--apmv-transicion), box-shadow var(--apmv-transicion);
}

.apmv-tarjeta-evento:hover {
	border-color: var(--apmv-verde);
	box-shadow: 0 4px 12px rgba(29, 66, 5, 0.12);
}

/* El foco visible envuelve la tarjeta entera, no solo el texto del título:
   el enlace real es pequeño, pero el área clicable es la tarjeta completa
   (ver la nota de accesibilidad en la plantilla), y quien navega con
   teclado necesita ver ese mismo alcance. */
.apmv-tarjeta-evento:focus-within {
	outline: var(--apmv-filete-marca) solid var(--apmv-verde-profundo);
	outline-offset: 2px;
}

/* `4 / 5`, no `16 / 9`: el cartel real de un evento (el Simposio) es un
   afiche vertical, y un marco panorámico lo dejaba flotando, pequeño, en un
   sobrante de fondo — exactamente lo que evita compartir la misma
   proporción en todos los anchos, en vez de solo en móvil (cierre de
   Eventos, 2026-09-17). */
.apmv-tarjeta-evento__medio {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--apmv-verde-niebla);
}

.apmv-tarjeta-evento__medio picture {
	display: block;
	width: 100%;
	height: 100%;
}

.apmv-tarjeta-evento__medio img {
	display: block;
	width: 100%;
	height: 100%;
	/* `contain`, nunca `cover`: el arte puede llevar texto y logo propios
	   (el Simposio los lleva), y recortarlo perdería información. */
	object-fit: contain;
}

/* Un solo próximo evento aprovecha el ancho disponible en vez de quedarse
   en un tercio de la cuadrícula de tres columnas — la proporción entre
   imagen, título, fecha, lugar y CTA se aprecia mejor con más aire. Con dos
   o más eventos, `.apmv-eventos-cuadricula` sigue escalando 1/2/3 columnas
   como siempre. */
.apmv-eventos-cuadricula--uno {
	max-width: 34rem;
	margin-inline: auto;
}

@media (min-width: 48rem) {

	.apmv-eventos-cuadricula--uno {
		grid-template-columns: 1fr;
		max-width: 40rem;
	}
}

.apmv-tarjeta-evento__estado {
	display: inline-block;
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
	font-weight: 700;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
	color: var(--apmv-verde-profundo);
}

.apmv-tarjeta-evento__medio .apmv-tarjeta-evento__estado {
	position: absolute;
	top: var(--apmv-e3);
	left: var(--apmv-e3);
	padding: 0.3em 0.7em;
	background: rgba(255, 255, 255, 0.92);
	border-radius: var(--apmv-radio);
}

.apmv-tarjeta-evento__estado--celebrado,
.apmv-tarjeta-evento__estado--sin_fecha {
	color: var(--apmv-gris-lectura);
}

.apmv-tarjeta-evento__estado--suelto {
	margin-bottom: var(--apmv-e2);
}

.apmv-tarjeta-evento__cuerpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--apmv-e5);
}

.apmv-tarjeta-evento__fecha {
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-verde-profundo);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-s);
	font-weight: 700;
	letter-spacing: var(--apmv-tracking-etiqueta);
}

.apmv-tarjeta-evento__titulo {
	margin: 0 0 var(--apmv-e2);
	font-size: var(--apmv-txt-l);
	line-height: 1.25;
}

.apmv-tarjeta-evento__enlace {
	color: inherit;
	text-decoration: none;
}

.apmv-tarjeta-evento__enlace:hover {
	text-decoration: underline;
}

/* El patrón «stretched link»: el enlace real es el título, y su `::after`
   se estira sobre toda la tarjeta. Un único enlace, con un destino y un
   texto accesible con sentido — no hace falta otro enlace ni un `tabindex`
   en el `<article>`. */
.apmv-tarjeta-evento__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
}

.apmv-tarjeta-evento__sede {
	margin: 0;
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-s);
}

.apmv-tarjeta-evento__cta {
	margin-top: auto;
	padding-top: var(--apmv-e4);
	color: var(--apmv-verde-profundo);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-s);
	font-weight: 700;
}

.apmv-tarjeta-evento__cta::after {
	content: " →";
}

/* =========================================================================
   Cuadrícula de Actualidad — archivo de /actualidad/ y bloque de portada
   (ciclo de mejora visual, 2026-09-16)

   Mismo patrón que la cuadrícula de eventos: tres columnas en escritorio, dos
   en tableta, una en móvil, con la tarjeta entera clicable. La diferencia es
   la miniatura, que aquí sí puede recortarse con `object-fit: cover` —una
   noticia no lleva texto ni logotipo propios dentro del arte, a diferencia
   del cartel de un evento—, y el estado sin imagen: en vez de omitir el
   bloque de medio, se pinta un panel de color con el nombre del tipo. Una
   sección de noticias sin ninguna fotografía real todavía no debe verse
   como una lista de texto.
   ========================================================================= */

.apmv-actualidad-cuadricula {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--apmv-e6);
	list-style: none;
	margin: 0 0 var(--apmv-e6);
	padding: 0;
}

.apmv-actualidad-cuadricula li {
	max-width: none;
}

@media (min-width: 48rem) {

	.apmv-actualidad-cuadricula {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 75rem) {

	.apmv-actualidad-cuadricula {
		grid-template-columns: repeat(3, 1fr);
	}
}

.apmv-tarjeta-actualidad {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--apmv-papel);
	border: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	border-radius: var(--apmv-radio);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(29, 66, 5, 0.06);
	transition: border-color var(--apmv-transicion), box-shadow var(--apmv-transicion);
}

.apmv-tarjeta-actualidad:hover {
	border-color: var(--apmv-verde);
	box-shadow: 0 4px 12px rgba(29, 66, 5, 0.12);
}

.apmv-tarjeta-actualidad:focus-within {
	outline: var(--apmv-filete-marca) solid var(--apmv-verde-profundo);
	outline-offset: 2px;
}

.apmv-tarjeta-actualidad__medio {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--apmv-verde-niebla);
}

/* Miniatura configurada a mano en una noticia externa: ocupa el medio, y si el portal la bloquea el onerror la quita. */
.apmv-tarjeta-actualidad__medio .apmv-tarjeta-externa__imagen-externa {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.apmv-tarjeta-actualidad__medio img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El cartel de un evento puede llevar texto y logotipo propios —el del
   Simposio los lleva—: recortarlo con `cover` los perdería. La tarjeta y la
   cuadrícula de Actualidad no cambian; solo la miniatura de un evento con
   imagen real se comporta distinto de la de una noticia (cierre de Eventos,
   2026-09-17). */
.apmv-tarjeta-actualidad__medio--evento:not(.apmv-tarjeta-actualidad__medio--vacio) img {
	object-fit: contain;
}

/* Sin imagen: un panel de color con el nombre del tipo, no un icono suelto
   ni un hueco en blanco. El texto es el mismo dato que ya lleva la etiqueta
   —Noticia o Evento—, solo que aquí ocupa el sitio de la miniatura. */
.apmv-tarjeta-actualidad__medio--vacio {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--apmv-e4);
	text-align: center;
}

.apmv-tarjeta-actualidad__medio--vacio.apmv-tarjeta-actualidad__medio--noticia {
	background: var(--apmv-verde-niebla);
}

.apmv-tarjeta-actualidad__medio--vacio.apmv-tarjeta-actualidad__medio--evento {
	background: var(--apmv-papel-alterno);
}

.apmv-tarjeta-actualidad__marca {
	font-family: var(--apmv-serif);
	font-style: italic;
	font-size: var(--apmv-txt-l);
	color: var(--apmv-verde-profundo);
}

.apmv-tarjeta-actualidad__medio--evento .apmv-tarjeta-actualidad__marca {
	color: var(--apmv-dorado-profundo);
}

.apmv-tarjeta-actualidad__etiqueta {
	position: absolute;
	top: var(--apmv-e3);
	left: var(--apmv-e3);
	padding: 0.3em 0.7em;
	background: rgba(255, 255, 255, 0.92);
	border-radius: var(--apmv-radio);
}

.apmv-tarjeta-actualidad__etiqueta--suelta {
	display: inline-block;
	margin-bottom: var(--apmv-e2);
}

.apmv-tarjeta-actualidad__cuerpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--apmv-e5);
}

.apmv-tarjeta-actualidad__fecha {
	display: block;
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

.apmv-tarjeta-actualidad__titulo {
	margin: 0 0 var(--apmv-e2);
	font-size: var(--apmv-txt-l);
	line-height: 1.25;
	/* Título a un máximo de tres líneas: una tarjeta con un titular largo no
	   puede alargar toda la fila de la cuadrícula. */
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.apmv-tarjeta-actualidad__enlace {
	color: inherit;
	text-decoration: none;
}

.apmv-tarjeta-actualidad__enlace:hover {
	text-decoration: underline;
}

/* Patrón «stretched link»: el título es el único enlace real, y su `::after`
   se estira sobre toda la tarjeta. */
.apmv-tarjeta-actualidad__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Ilustración con el título dentro del arte (3:2): a 16:9 con `cover` se
   perdería parte del título, así que la miniatura conserva su proporción. La
   etiqueta de tipo baja a la esquina inferior para no tapar ese título. */
.apmv-tarjeta-actualidad__medio--ilustracion {
	aspect-ratio: 3 / 2;
}

.apmv-tarjeta-actualidad__medio--ilustracion .apmv-tarjeta-actualidad__etiqueta {
	top: auto;
	bottom: var(--apmv-e3);
}

.apmv-tarjeta-actualidad__autor {
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-s);
}

.apmv-tarjeta-actualidad__resumen {
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.apmv-tarjeta-actualidad__clasificacion {
	margin: auto 0 0;
	padding-top: var(--apmv-e2);
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
}

/* Publicaciones relacionadas dentro de otra página (hoy, Una Sola Salud):
   separadas del texto que las precede y con un filete de cabecera. Una sola
   tarjeta no debe estirarse al ancho completo. */
.apmv-relacionadas {
	margin-top: var(--apmv-e8);
	padding-top: var(--apmv-e6);
	border-top: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
}

.apmv-relacionadas__titulo {
	margin: 0 0 var(--apmv-e5);
	font-size: var(--apmv-txt-l);
}

.apmv-actualidad-cuadricula--relacionadas {
	margin-bottom: 0;
}

/* La versión de portada solo lleva tres tarjetas: nunca necesita la tercera
   columna a partir de tableta ancha, y se ve mejor a dos columnas holgadas. */
@media (min-width: 75rem) {

	.apmv-actualidad-cuadricula--portada {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================================================================
   Noticias veterinarias recomendadas — enlaces curados a portales externos
   (ciclo de mejora visual, 2026-09-16)

   Mismo lenguaje visual que la cuadrícula de Actualidad, con tres
   diferencias deliberadas: la miniatura no tiene panel de color propio por
   tipo —todas son la misma cosa, un enlace externo—, lleva siempre el
   distintivo del portal de origen superpuesto, y el título nunca es el único
   aviso de que se sale del sitio: el enlace añade `rel="noopener external"`,
   se abre en pestaña nueva y lleva texto para lector de pantalla aparte.
   ========================================================================= */

.apmv-noticias-externas {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--apmv-e6);
	list-style: none;
	margin: var(--apmv-e6) 0 0;
	padding: 0;
}

.apmv-noticias-externas li {
	max-width: none;
}

@media (min-width: 48rem) {

	.apmv-noticias-externas {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 75rem) {

	.apmv-noticias-externas {
		grid-template-columns: repeat(3, 1fr);
	}
}

.apmv-tarjeta-externa {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--apmv-papel);
	border: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	border-radius: var(--apmv-radio);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(29, 66, 5, 0.06);
	transition: border-color var(--apmv-transicion), box-shadow var(--apmv-transicion);
}

.apmv-tarjeta-externa:hover {
	border-color: var(--apmv-verde);
	box-shadow: 0 4px 12px rgba(29, 66, 5, 0.12);
}

.apmv-tarjeta-externa:focus-within {
	outline: var(--apmv-filete-marca) solid var(--apmv-verde-profundo);
	outline-offset: 2px;
}

.apmv-tarjeta-externa__medio {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	padding: var(--apmv-e4);
	background: var(--apmv-verde-niebla);
	text-align: center;
}

.apmv-tarjeta-externa__medio img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.apmv-tarjeta-externa__marca {
	/*
	 * Sin `position`: como contenido normal del flujo, queda siempre por
	 * debajo de la imagen externa (`position: absolute`) en el orden de
	 * pintado, sea cual sea el orden en el marcado. Con `position: relative`
	 * aquí competiría por capa con esa imagen y, al ir detrás en el DOM,
	 * ganaría — el distintivo institucional tapando la fotografía real que
	 * se acaba de cargar, en vez de quedar escondido detrás.
	 */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--apmv-e2);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
	font-weight: 700;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
	color: var(--apmv-verde-profundo);
}

/* El icono de recambio institucional: un trazo sobrio, nunca una fotografía
   inventada. Vive detrás de la imagen externa cuando la hay —su `onerror`
   solo tiene que quitarla para dejarlo a la vista— y es lo único que se pinta
   cuando la ficha no tiene ninguna imagen real. */
.apmv-tarjeta-externa__marca .apmv-encabezado__icono {
	width: 2rem;
	height: 2rem;
	opacity: 0.55;
}

.apmv-tarjeta-externa__fuente {
	position: absolute;
	top: var(--apmv-e3);
	left: var(--apmv-e3);
	padding: 0.3em 0.7em;
	background: rgba(29, 66, 5, 0.85);
	color: var(--apmv-blanco);
	border-radius: var(--apmv-radio);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
	font-weight: 700;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

.apmv-tarjeta-externa__cuerpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--apmv-e5);
}

.apmv-tarjeta-externa__fecha {
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

.apmv-tarjeta-externa__titulo {
	margin: 0 0 var(--apmv-e2);
	font-size: var(--apmv-txt-l);
	line-height: 1.25;
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.apmv-tarjeta-externa__enlace {
	color: inherit;
	text-decoration: none;
}

.apmv-tarjeta-externa__enlace:hover {
	text-decoration: underline;
}

.apmv-tarjeta-externa__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
}

.apmv-tarjeta-externa__resumen {
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.apmv-tarjeta-externa__cta {
	margin-top: auto;
	padding-top: var(--apmv-e4);
	color: var(--apmv-verde-profundo);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-s);
	font-weight: 700;
}

.apmv-tarjeta-externa__cta::after {
	content: " ↗";
}

/* =========================================================================
   Investigación de médicos veterinarios panameños — subsección de
   Actualidad (2026-09-17)

   Mismo lenguaje visual que `.apmv-tarjeta-externa` —también enlaza siempre
   a una fuente ajena a la APMV—, con dos añadidos propios de esta
   subsección: una línea de metadatos científicos rastreable (tipo de
   contenido, revista, año, DOI) y un bloque de identificación del
   investigador, deliberadamente más pequeño y después del resumen: la
   investigación es el protagonista, la persona es el hilo humano que la
   acompaña, no una ficha de currículo.
   ========================================================================= */

.apmv-investigaciones {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--apmv-e6);
	list-style: none;
	margin: var(--apmv-e6) 0 0;
	padding: 0;
}

.apmv-investigaciones li {
	max-width: none;
}

@media (min-width: 48rem) {

	.apmv-investigaciones {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 75rem) {

	.apmv-investigaciones {
		grid-template-columns: repeat(2, 1fr);
	}
}

.apmv-tarjeta-investigacion {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--apmv-papel);
	border: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	border-radius: var(--apmv-radio);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(29, 66, 5, 0.06);
	transition: border-color var(--apmv-transicion), box-shadow var(--apmv-transicion);
}

.apmv-tarjeta-investigacion:hover {
	border-color: var(--apmv-verde);
	box-shadow: 0 4px 12px rgba(29, 66, 5, 0.12);
}

.apmv-tarjeta-investigacion:focus-within {
	outline: var(--apmv-foco-grosor) solid var(--apmv-foco-color);
	outline-offset: var(--apmv-foco-separacion);
}

.apmv-tarjeta-investigacion__medio {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	padding: var(--apmv-e4);
	background: var(--apmv-verde-niebla);
	text-align: center;
}

.apmv-tarjeta-investigacion__medio img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.apmv-tarjeta-investigacion__etiqueta {
	position: absolute;
	top: var(--apmv-e3);
	left: var(--apmv-e3);
	/*
	 * A diferencia de `.apmv-tarjeta-externa__fuente` —que no comparte fila
	 * con ninguna otra etiqueta—, aquí conviven dos distintivos en la misma
	 * esquina superior: «Investigación» y la fuente. Sin un tope de ancho,
	 * una fuente larga («University of Saskatchewan») y la tarjeta angosta de
	 * una cuadrícula de una sola columna (móvil) acababan solapándose y
	 * cortando el texto de las dos. Cada una se queda a su lado con
	 * seguridad, y si no cabe, recorta con puntos suspensivos en vez de
	 * invadir a la otra.
	 */
	max-width: calc(50% - var(--apmv-e4));
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.apmv-tarjeta-investigacion__etiqueta--suelta {
	display: inline-block;
	margin: 0 0 var(--apmv-e2);
}

.apmv-tarjeta-investigacion__marca {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--apmv-e2);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
	font-weight: 700;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
	color: var(--apmv-verde-profundo);
}

.apmv-tarjeta-investigacion__marca .apmv-encabezado__icono {
	width: 2rem;
	height: 2rem;
	opacity: 0.55;
}

.apmv-tarjeta-investigacion__fuente {
	position: absolute;
	top: var(--apmv-e3);
	right: var(--apmv-e3);
	max-width: calc(50% - var(--apmv-e4));
	padding: 0.3em 0.7em;
	overflow: hidden;
	background: rgba(29, 66, 5, 0.85);
	color: var(--apmv-blanco);
	border-radius: var(--apmv-radio);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
	font-weight: 700;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.apmv-tarjeta-investigacion__cuerpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--apmv-e5);
}

.apmv-tarjeta-investigacion__meta {
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

.apmv-tarjeta-investigacion__titulo {
	margin: 0 0 var(--apmv-e2);
	font-size: var(--apmv-txt-l);
	line-height: 1.25;
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.apmv-tarjeta-investigacion__enlace {
	color: inherit;
	text-decoration: none;
}

.apmv-tarjeta-investigacion__enlace:hover {
	text-decoration: underline;
}

.apmv-tarjeta-investigacion__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
}

.apmv-tarjeta-investigacion__resumen {
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.apmv-tarjeta-investigacion__doi {
	margin: 0 0 var(--apmv-e4);
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
	word-break: break-word;
}

/* Identificación del investigador: siempre más pequeña y más discreta que el
   título de la investigación, con un filete superior que la separa del
   resumen — el hilo humano de la historia, no su titular. */
.apmv-tarjeta-investigacion__investigador {
	display: flex;
	align-items: center;
	gap: var(--apmv-e3);
	margin-top: auto;
	padding-top: var(--apmv-e4);
	border-top: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
}

.apmv-tarjeta-investigacion__foto {
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
}

.apmv-tarjeta-investigacion__nombre {
	margin: 0;
	font-size: var(--apmv-txt-s);
	line-height: 1.4;
}

.apmv-tarjeta-investigacion__nombre-completo {
	display: block;
	font-weight: 700;
	color: var(--apmv-grafito);
}

.apmv-tarjeta-investigacion__detalle {
	display: block;
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-xs);
}

.apmv-tarjeta-investigacion__credito {
	margin: var(--apmv-e2) 0 0;
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-xs);
	font-style: italic;
}

.apmv-tarjeta-investigacion__cta {
	display: inline-block;
	margin-top: var(--apmv-e4);
	color: var(--apmv-verde-profundo);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-s);
	font-weight: 700;
}

.apmv-tarjeta-investigacion__cta::after {
	content: " →";
}

/* =========================================================================
   Tarjeta de evento destacado en la portada (cierre de Eventos, 2026-09-17)

   El carrusel de eventos de la Fase 6 (2026-09-14) se retiró: reemplazado
   definitivamente por esta tarjeta destacada, sin flechas ni indicadores.
   Ver `contenido/eventos/LEEME.md` para el detalle de la decisión.
   ========================================================================= */

.apmv-evento-tarjeta__medio img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--apmv-radio);
}

.apmv-evento-tarjeta__cuerpo {
	padding-top: var(--apmv-e4);
}

.apmv-evento-tarjeta__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--apmv-e3);
	margin: 0;
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-s);
}

/* El único evento vigente se pinta como bloque destacado, en su propia
   sección de portada (cierre de Eventos, 2026-09-17). El texto va siempre
   antes que el arte —en el orden de lectura y en el DOM visual, con
   `order`—: en móvil y tableta se lee primero, con la imagen debajo; en
   escritorio se reparten el ancho lado a lado, texto a la izquierda.

   El arte de un evento puede llevar texto y logotipo propios —el cartel del
   Simposio los lleva—, así que aquí también `object-fit: contain`, nunca
   `cover`: cortar la imagen perdería justo esa información. Como el cartel
   real es un afiche vertical, se limita la altura del bloque (`max-height`)
   para que no domine la portada entera; dentro de ese límite se ve completo,
   sin recorte ni deformación. */
.apmv-evento-tarjeta--destacado {
	display: flex;
	flex-direction: column;
	background: var(--apmv-papel);
	border: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	border-radius: var(--apmv-radio);
	overflow: hidden;
}

.apmv-evento-tarjeta--destacado .apmv-evento-tarjeta__medio {
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 20rem;
	background: var(--apmv-verde-niebla);
}

.apmv-evento-tarjeta--destacado .apmv-evento-tarjeta__medio img {
	width: auto;
	height: 100%;
	max-width: 100%;
	max-height: 20rem;
	object-fit: contain;
	border-radius: 0;
}

.apmv-evento-tarjeta--destacado .apmv-evento-tarjeta__cuerpo {
	order: -1;
	padding: var(--apmv-e5);
}

@media (min-width: 60rem) {

	.apmv-evento-tarjeta--destacado {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		align-items: stretch;
	}

	.apmv-evento-tarjeta--destacado .apmv-evento-tarjeta__medio {
		max-height: none;
	}

	.apmv-evento-tarjeta--destacado .apmv-evento-tarjeta__medio img {
		width: 100%;
		height: 100%;
		max-height: 26rem;
	}

	.apmv-evento-tarjeta--destacado .apmv-evento-tarjeta__cuerpo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--apmv-e7) var(--apmv-e6);
	}
}

.apmv-evento-tarjeta__resumen {
	margin: var(--apmv-e3) 0 0;
	color: var(--apmv-gris-lectura);
	max-width: 42rem;
}

.apmv-evento-tarjeta__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apmv-e3);
	margin-top: var(--apmv-e4);
}

/*
 * El aviso de que un documento no se descarga NO es un botón desactivado: es
 * texto. Un botón que no hace nada obliga a probarlo para descubrirlo.
 */
.apmv-ficha__acceso--sin-descarga {
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-s);
}

.apmv-ficha-completa {
	max-width: var(--apmv-ancho-editorial);
}

/* Imagen destacada de una ficha completa (hoy: noticia de Actualidad).
   Mismo `object-fit: cover` que la tarjeta de la cuadrícula, para que la
   fotografía se recorte sin deformarse sea cual sea su proporción original. */
.apmv-ficha-completa__imagen-destacada {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: var(--apmv-e5) 0;
	border-radius: var(--apmv-radio);
	object-fit: cover;
}

/* El cartel oficial de un evento (el Simposio, hoy) es un afiche vertical
   con texto y logotipo propios: cortarlo a `16 / 9` perdería justo esa
   información, así que aquí no se fuerza ninguna proporción — se ve
   completo, a su ancho natural, con un tope razonable para no dominar la
   página en pantallas anchas (cierre de Eventos, 2026-09-17). */
.apmv-ficha-completa__imagen-destacada--evento {
	aspect-ratio: auto;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 42rem;
	margin-inline: auto;
	object-fit: contain;
	background: var(--apmv-verde-niebla);
}

/* La ilustración de un artículo lleva el título y un diagrama dentro del
   propio arte (3:2): recortarla a `16 / 9` los cortaría. Se ve completa, a
   su proporción, sin bandas ni deformación. */
.apmv-ficha-completa__imagen-destacada--ilustracion {
	aspect-ratio: auto;
	height: auto;
	object-fit: contain;
}

/* Firma de un artículo: quién lo escribió y con qué credenciales. Bajo el
   título es un dato de cabecera; al final repite la firma de la autora, como
   en el documento original. */
.apmv-firma {
	margin: 0 0 var(--apmv-e5);
}

.apmv-firma__autor {
	margin: 0;
	font-family: var(--apmv-serif);
	font-size: var(--apmv-txt-m);
	line-height: var(--apmv-interlinea-apretada);
	color: var(--apmv-grafito);
}

.apmv-firma__por {
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
	color: var(--apmv-gris-lectura);
	margin-inline-end: var(--apmv-e1);
}

.apmv-firma__credenciales {
	margin: var(--apmv-e1) 0 0;
	max-width: var(--apmv-medida-estrecha);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-s);
	line-height: 1.4;
	color: var(--apmv-gris-lectura);
}

.apmv-firma--cierre {
	margin: var(--apmv-e6) 0 var(--apmv-e5);
	padding-top: var(--apmv-e4);
	border-top: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
}

.apmv-ficha__temas-rotulo {
	font-weight: 700;
	margin-inline-end: var(--apmv-e1);
}

.apmv-ficha__bibliografia {
	margin: var(--apmv-e5) 0;
	padding: var(--apmv-e5);
	background: var(--apmv-verde-niebla);
	border-left: var(--apmv-filete-marca) solid var(--apmv-dorado);
	display: grid;
	grid-template-columns: minmax(7rem, auto) 1fr;
	gap: var(--apmv-e2) var(--apmv-e5);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-s);
}

.apmv-ficha__bibliografia dt {
	color: var(--apmv-gris-lectura);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.apmv-ficha__bibliografia dd {
	margin: 0;
	color: var(--apmv-grafito);
}

.apmv-ficha__contacto {
	list-style: none;
	margin: var(--apmv-e4) 0 0;
	padding: 0;
}

.apmv-ficha__contacto li {
	margin-bottom: var(--apmv-e2);
}

/* Mapa de la Casa del Médico Veterinario, en Contacto (Fase 4, 2026-09-14).
   `aspect-ratio` reemplaza al viejo truco de "padding-top: 56.25%": el
   iframe llena el contenedor sin depender de JavaScript ni de un alto fijo,
   y se mantiene 16:9 en cualquier ancho, incluido el móvil. */
.apmv-mapa {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: var(--apmv-e5) 0 0;
	background: var(--apmv-verde-niebla);
	border-radius: var(--apmv-radio);
	overflow: hidden;
}

.apmv-mapa iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.apmv-mapa__enlace {
	margin: var(--apmv-e2) 0 0;
	font-size: var(--apmv-txt-s);
}

/* =========================================================================
   9 · Cronología — Galería de Presidentes
   =========================================================================
   No depende de fotografías. Es una cronología tipográfica y el retrato es
   mejora progresiva. Decisión de la Fase B §8.2.
   ========================================================================= */

.apmv-cronologia {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: var(--apmv-ancho-editorial);
}

.apmv-cronologia__item {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: var(--apmv-e5);
	padding-block: var(--apmv-e4);
	border-top: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	max-width: none;
	align-items: start;
}

/* Con retrato: una columna más, al principio. Sin retrato —la mayoría de los
   casos hasta 2026-09-14, y siempre que la APMV no cargue una imagen nueva—
   la fila sigue siendo la cronología tipográfica de dos columnas de siempre. */
.apmv-cronologia__item--con-retrato {
	grid-template-columns: 3.5rem 9rem 1fr;
}

.apmv-cronologia__retrato {
	width: 3.5rem;
	height: 3.5rem;
	object-fit: cover;
	border: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
}

.apmv-cronologia__periodos {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

.apmv-cronologia__periodo {
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-s);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--apmv-verde-profundo);
	letter-spacing: 0.02em;
	padding-top: 0.35em;
}

/* Un periodo incompleto —hueco cronológico— o en disputa entre las fuentes
   documentales del proyecto se marca igual: la ausencia o la incertidumbre se
   muestran, nunca se disimulan. Un periodo en disputa nunca imprime un año. */
.apmv-cronologia__periodo--parcial {
	color: var(--apmv-gris-lectura);
	font-weight: 400;
}

/* Texto introductorio de la Galería de Presidentes (2026-09-14): un
   homenaje, no una nota técnica — por eso lleva el color y el cuerpo de un
   párrafo editorial normal, sin la cursiva discreta del aviso de abajo. */
.apmv-cronologia__intro {
	max-width: var(--apmv-ancho-editorial);
	margin: 0 0 var(--apmv-e5);
	color: var(--apmv-grafito);
}

/* Aviso editorial de la condición 10 de la autorización de la Galería de
   Presidentes (2026-09-14): discreto, no un aviso de alerta. Usado en la
   ficha individual, debajo del retrato. */
.apmv-cronologia__aviso {
	max-width: var(--apmv-ancho-editorial);
	margin: 0 0 var(--apmv-e4);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
	font-style: italic;
}

/* Mismo aviso, al pie de la cronología completa en vez de debajo de un
   retrato: el margen va arriba, no abajo. */
.apmv-cronologia__pie {
	max-width: var(--apmv-ancho-editorial);
	margin: var(--apmv-e4) 0 0;
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
	font-style: italic;
}

.apmv-cronologia__nombre {
	margin: 0;
	font-family: var(--apmv-serif);
	font-size: var(--apmv-txt-m);
	font-weight: 600;
	letter-spacing: 0;
}

.apmv-cronologia__nombre a {
	text-decoration: none;
}

.apmv-cronologia__nombre a:hover {
	text-decoration: underline;
}

.apmv-cronologia__nota {
	margin: var(--apmv-e1) 0 0;
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
}

/* Reseña biográfica de la ficha individual (Fase 1, 2026-09-14): solo se
   pinta cuando el estado de la reseña es "verificada" — la plantilla nunca
   recibe una reseña pendiente de validación, así que este bloque no necesita
   ninguna lógica de aviso. */
.apmv-resena {
	max-width: var(--apmv-ancho-editorial);
	margin: var(--apmv-e4) 0 0;
}

.apmv-resena__texto {
	margin: 0;
	color: var(--apmv-grafito);
}

.apmv-resena__areas {
	margin: var(--apmv-e1) 0 0;
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
}

.apmv-resena__areas-etiqueta {
	font-weight: 600;
}

/* =========================================================================
   10 · Áreas de Acción
   =========================================================================
   Cuatro tarjetas con iconografía sobria (DP-03). El icono acompaña; no
   sustituye al texto ni carga significado por su cuenta.
   ========================================================================= */

.apmv-areas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--apmv-e5);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.apmv-area {
	max-width: none;
	padding: var(--apmv-e5);
	background: var(--apmv-papel);
	border: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	border-top: var(--apmv-filete-marca) solid var(--apmv-verde);
}

.apmv-area__icono {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	margin-bottom: var(--apmv-e3);
	color: var(--apmv-verde-profundo);
}

/*
 * Ficha ilustrada (ciclo de mejora visual, 2026-09-17): la foto ocupa el
 * ancho completo de la tarjeta, a ras del filete —igual que hacen ya las
 * tarjetas de Actualidad— y el icono sobrio desaparece, porque la foto real
 * cumple ese mismo papel de identificador visual sin ser un adorno suelto.
 * `padding: 0` en la tarjeta traslada el aire de siempre a `__cuerpo`, que es
 * quien ahora lo necesita.
 */
.apmv-area--ilustrada {
	padding: 0;
}

.apmv-area__imagen {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--apmv-verde-niebla);
}

.apmv-area__imagen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.apmv-area--ilustrada .apmv-area__cuerpo {
	padding: var(--apmv-e4) var(--apmv-e5) var(--apmv-e5);
}

.apmv-area__titulo {
	margin: 0 0 var(--apmv-e2);
	font-size: var(--apmv-txt-m);
}

.apmv-area__titulo a {
	text-decoration: none;
}

.apmv-area__resumen {
	margin: 0;
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
}

/* =========================================================================
   11 · Estados vacíos y avisos
   =========================================================================
   La página se ve bien SIN contenido, que es como nace el sitio y como está
   el día del lanzamiento.
   ========================================================================= */

.apmv-vacio {
	max-width: var(--apmv-ancho-editorial);
	padding: var(--apmv-e5);
	background: var(--apmv-verde-niebla);
	border-left: var(--apmv-filete-marca) solid var(--apmv-dorado);
}

.apmv-vacio p {
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-gris-lectura);
}

.apmv-vacio p:last-child {
	margin-bottom: 0;
}

.apmv-aviso {
	max-width: var(--apmv-ancho-editorial);
	padding: var(--apmv-e4) var(--apmv-e5);
	border-left: var(--apmv-filete-marca) solid var(--apmv-verde-profundo);
	background: var(--apmv-verde-velo);
}

.apmv-aviso--alerta {
	border-left-color: var(--apmv-alerta);
	background: var(--apmv-alerta-velo);
}

.apmv-aviso p:last-child {
	margin-bottom: 0;
}

/*
 * Marcador del proyecto. Se ve. Un hueco honesto y visible se acaba
 * rellenando; un dato de relleno que parece real, no.
 */
.apmv-pendiente {
	padding: 0.1em 0.35em;
	background: var(--apmv-verde-velo);
	border-bottom: var(--apmv-filete-fino) dashed var(--apmv-dorado-profundo);
	color: var(--apmv-gris-lectura);
	font-family: var(--apmv-estrecha);
	font-size: 0.92em;
	white-space: nowrap;
}

/*
 * A diferencia de `.apmv-pendiente`, este texto no es un marcador interno del
 * proyecto: es una frase real ("la política está en preparación") que puede
 * quedarse en producción. Se atenúa como nota al pie de la casilla, sin el
 * subrayado punteado que marca un hueco por rellenar.
 */
.apmv-pendiente-discreto {
	color: var(--apmv-gris-lectura);
	font-size: 0.92em;
}

/* =========================================================================
   12 · Formularios — capa visual base
   =========================================================================
   El motor es del Sprint 4. Aquí solo está la presentación, para que llegue
   ya resuelta: campos legibles, errores asociados y foco visible.
   ========================================================================= */

.apmv-formulario {
	max-width: var(--apmv-ancho-editorial);
}

.apmv-campo {
	margin-bottom: var(--apmv-e5);
}

.apmv-campo__etiqueta {
	display: block;
	margin-bottom: var(--apmv-e2);
	font-size: var(--apmv-txt-s);
	font-weight: 600;
}

.apmv-campo__obligatorio {
	color: var(--apmv-alerta);
	font-weight: 700;
}

.apmv-campo__ayuda {
	display: block;
	margin-bottom: var(--apmv-e2);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
}

.apmv-campo input[type="text"],
.apmv-campo input[type="email"],
.apmv-campo input[type="tel"],
.apmv-campo input[type="url"],
.apmv-campo input[type="search"],
.apmv-campo select,
.apmv-campo textarea {
	width: 100%;
	padding: var(--apmv-e3);
	border: var(--apmv-filete-fino) solid var(--apmv-gris-lectura);
	border-radius: var(--apmv-radio);
	background: var(--apmv-papel);
	color: var(--apmv-grafito);
	font-family: inherit;
	font-size: var(--apmv-txt-base);
	line-height: 1.4;
}

.apmv-campo textarea {
	min-height: 9rem;
	resize: vertical;
}

.apmv-campo--error input,
.apmv-campo--error select,
.apmv-campo--error textarea {
	border-color: var(--apmv-alerta);
	border-width: var(--apmv-filete);
	background: var(--apmv-alerta-velo);
}

/*
 * El error va junto a su campo y se anuncia con texto, no solo con color.
 * Distinguir un campo erróneo únicamente por el borde rojo deja fuera a quien
 * no percibe ese rojo.
 */
.apmv-campo__error {
	display: block;
	margin-top: var(--apmv-e2);
	color: var(--apmv-alerta);
	font-size: var(--apmv-txt-s);
	font-weight: 600;
}

.apmv-campo--consentimiento {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--apmv-e3);
	align-items: start;
	padding: var(--apmv-e4);
	background: var(--apmv-verde-niebla);
	border-left: var(--apmv-filete-marca) solid var(--apmv-verde);
}

.apmv-campo--consentimiento input {
	margin-top: 0.3em;
	width: 1.1rem;
	height: 1.1rem;
}

.apmv-campo--consentimiento label {
	max-width: none;
	font-size: var(--apmv-txt-s);
}

/*
 * Resumen de errores. Es lo primero que se lee al fallar el envío y lleva el
 * foco puesto: quien navega con teclado o con lector de pantalla no tiene que
 * ir a buscar qué salió mal.
 */
.apmv-aviso ul {
	margin: var(--apmv-e3) 0 0;
	padding-left: var(--apmv-e5);
}

.apmv-aviso li {
	margin-bottom: var(--apmv-e2);
	max-width: none;
}

.apmv-aviso--alerta a {
	color: var(--apmv-alerta);
}

/* Texto solo para lectores de pantalla. Nunca `display: none`: eso lo oculta
   también a quien lo necesita. */
.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;
}

/* Trampa de robots. Se esconde de la vista y del lector de pantalla. */
.apmv-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =========================================================================
   13 · Pie
   ========================================================================= */

.apmv-pie {
	margin-top: var(--apmv-aire-seccion);
	padding-block: var(--apmv-e7) var(--apmv-e5);
	background: var(--apmv-verde-tinta);
	color: rgba(255, 255, 255, 0.88);
}

.apmv-pie a {
	color: var(--apmv-blanco);
}

.apmv-pie :focus-visible {
	outline-color: var(--apmv-blanco);
}

.apmv-pie__rejilla {
	display: grid;
	gap: var(--apmv-e6);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	padding-bottom: var(--apmv-e6);
	border-bottom: var(--apmv-filete-fino) solid rgba(255, 255, 255, 0.2);
}

.apmv-pie__titulo {
	margin: 0 0 var(--apmv-e3);
	color: var(--apmv-blanco);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-xs);
	font-weight: 700;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

.apmv-pie__nombre {
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-blanco);
	font-family: var(--apmv-serif);
	font-size: var(--apmv-txt-m);
	font-weight: 600;
}

.apmv-pie__contacto,
.apmv-pie__redes,
.apmv-pie__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.apmv-pie__contacto li,
.apmv-pie__lista li {
	margin-bottom: var(--apmv-e2);
	max-width: none;
	font-size: var(--apmv-txt-s);
}

/*
 * El acceso a Contacto desde el pie. Desde que Contacto salió de la cabecera,
 * este enlace es su puerta permanente: va subrayado y con el mismo cuerpo que
 * el resto del bloque, para que se lea como un enlace y no como un pie de nota.
 */
.apmv-pie__enlace-contacto {
	margin: var(--apmv-e3) 0 0;
	max-width: none;
	font-size: var(--apmv-txt-s);
}

.apmv-pie__enlace-contacto a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * El horario del pie va en dos líneas —los días y el rango de horas—, cada una
 * entera. El reparto lo hace `apmv_tema_horario_lineas()` en PHP; aquí solo se
 * dice que cada trozo ocupa su propia línea.
 *
 * Deliberadamente **sin `white-space: nowrap`**: lo que había que evitar era
 * que «4:00 p. m.» se partiera por la mitad, y de eso se encargan los espacios
 * duros del propio texto. Prohibir el corte entero obligaría a la columna a
 * ensancharse en pantallas pequeñas, que es peor que el problema.
 */
.apmv-pie__horario-linea {
	display: block;
}

.apmv-pie__etiqueta {
	display: block;
	color: rgba(255, 255, 255, 0.65);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
	font-weight: 700;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

.apmv-pie__redes,
.apmv-pie__legales {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apmv-e4);
}

/*
 * Los avisos legales tienen su propia clase y no reutilizan la de las redes.
 * Compartirla hacía que «no se pinta ninguna red sin enlace» fuese falso en
 * cuanto existía un aviso legal — y la prueba lo cazó.
 */
.apmv-pie__legales {
	list-style: none;
	margin: 0;
	padding: 0;
}

.apmv-pie__legales li {
	max-width: none;
}

.apmv-pie__redes {
	align-items: center;
}

.apmv-pie__redes li {
	max-width: none;
}

/* Iconos de redes sociales: mismo trazo sobrio que el resto del tema, nunca
   el nombre escrito. El nombre sigue existiendo para quien usa lector de
   pantalla, en el `aria-label` del propio enlace. */
.apmv-pie__red-enlace {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--apmv-radio);
	color: rgba(255, 255, 255, 0.85);
	transition: color var(--apmv-transicion), background-color var(--apmv-transicion);
}

.apmv-pie__red-enlace:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--apmv-blanco);
}

.apmv-pie__red-icono {
	width: 1.4rem;
	height: 1.4rem;
}

.apmv-pie__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--apmv-e3);
	padding-top: var(--apmv-e5);
	font-family: var(--apmv-estrecha);
	font-size: var(--apmv-txt-xs);
	color: rgba(255, 255, 255, 0.7);
}

.apmv-pie__legal p {
	margin: 0;
	max-width: none;
}

/*
 * Crédito de desarrollo. Es la fila de más abajo, con flex-basis: 100% para
 * que caiga en su propia línea bajo el copyright y el menú legal, y con
 * menor opacidad porque la marca del portal sigue siendo la APMV, no LEES.
 */
.apmv-pie__credito {
	flex-basis: 100%;
	color: rgba(255, 255, 255, 0.6);
}

.apmv-pie .apmv-pendiente {
	background: rgba(255, 255, 255, 0.12);
	border-bottom-color: var(--apmv-dorado);
	color: rgba(255, 255, 255, 0.9);
}

/* =========================================================================
   14 · Paginación y navegación entre entradas
   ========================================================================= */

/*
 * Buscador y filtros de la Biblioteca. Es un formulario `method="get"`
 * corriente: sin JavaScript se ve igual y funciona igual, solo que sin el
 * auto-envío que pudiera añadirse como mejora.
 */
.apmv-filtro-biblioteca {
	max-width: none;
	margin-bottom: var(--apmv-e6);
	padding: var(--apmv-e5);
	background: var(--apmv-verde-niebla);
	border-left: var(--apmv-filete-marca) solid var(--apmv-verde);
}

.apmv-filtro-biblioteca__campos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--apmv-e4);
}

.apmv-filtro-biblioteca__campos .apmv-campo {
	margin-bottom: 0;
}

.apmv-filtro-biblioteca__acciones {
	display: flex;
	align-items: center;
	gap: var(--apmv-e4);
	margin-top: var(--apmv-e5);
}

.apmv-enlace-limpiar {
	font-size: var(--apmv-txt-s);
}

.apmv-resultado-resumen {
	margin-bottom: var(--apmv-e5);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
}

.apmv-ficha__cita {
	margin-top: var(--apmv-e6);
	padding: var(--apmv-e4);
	background: var(--apmv-papel-alterno);
	font-size: var(--apmv-txt-s);
}

.apmv-ficha__cita-etiqueta {
	display: block;
	margin: 0 0 var(--apmv-e2);
	font-size: var(--apmv-txt-s);
	font-weight: 700;
}

.apmv-ficha__cita-texto {
	margin: 0 0 var(--apmv-e3);
}

/*
 * Botón «Copiar cita» / «Copiar DOI»: nace `hidden` en el marcado (ver
 * `single-apmv_documento.php`) porque solo tiene sentido con la Clipboard
 * API del navegador. `ficha-documento.js` lo muestra al arrancar si la API
 * existe; sin JavaScript, la cita y el DOI siguen visibles y seleccionables
 * a mano — el botón nunca es la única forma de copiarlos.
 */
.apmv-boton-copiar {
	display: inline-flex;
	align-items: center;
	gap: var(--apmv-e2);
	padding: var(--apmv-e2) var(--apmv-e3);
	border: var(--apmv-filete-fino) solid var(--apmv-gris-lectura);
	border-radius: var(--apmv-radio);
	background: var(--apmv-papel);
	color: var(--apmv-verde-tinta);
	font-family: inherit;
	font-size: var(--apmv-txt-xs);
	font-weight: 600;
	cursor: pointer;
}

.apmv-boton-copiar:hover,
.apmv-boton-copiar:focus-visible {
	border-color: var(--apmv-verde-profundo);
	background: var(--apmv-verde-velo);
}

.apmv-boton-copiar[data-apmv-copiado] {
	border-color: var(--apmv-verde-profundo);
	color: var(--apmv-verde-profundo);
}

/*
 * Mismo defecto ya documentado varias veces en este tema:
 * `display: inline-flex` de arriba empata en especificidad con
 * `[hidden] { display: none }` del navegador y gana, así que el botón nace
 * visible aunque el marcado lo ponga `hidden`.
 */
.apmv-boton-copiar[hidden] {
	display: none;
}

.apmv-ficha__doi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--apmv-e3);
}

.apmv-ficha__acceso-nota {
	margin-top: var(--apmv-e2);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-xs);
}

.apmv-paginacion {
	margin-top: var(--apmv-e7);
	padding-top: var(--apmv-e5);
	border-top: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
}

.apmv-paginacion .page-numbers {
	display: inline-block;
	padding: var(--apmv-e2) var(--apmv-e3);
	text-decoration: none;
}

.apmv-paginacion .current {
	background: var(--apmv-verde-velo);
	font-weight: 700;
}

/* =========================================================================
   15 · Presentación institucional y franja inferior
   =========================================================================
   Dos piezas del ciclo de mejora visual del Home, 2026-09-16, para acercar
   la portada al mockup aprobado sin rehacer el sistema visual:
   - La presentación de «La APMV», en dos columnas asimétricas con un icono
     institucional a la derecha (bloque 3 del mockup).
   - La franja de tres columnas que cierra la portada antes de Afíliate —
     Actualidad, Biblioteca Virtual y Trayectoria y sede—, leída como un solo
     tramo horizontal en vez de tres secciones apiladas.
   ========================================================================= */

/*
 * Fondo decorativo, ciclo de mejora visual 2026-09-17: la franja se sentía
 * demasiado en blanco. El collage ya viene editado en tonos muy lavados
 * (`assets/img/fondos/banner-collage-apmv.png`); un degradado hacia el papel
 * del sitio lo hunde en la esquina inferior derecha para acompañar sin
 * competir con el bloque de texto de la izquierda. `overflow: hidden` recorta
 * el sobrante por arriba cuando la sección es más baja que la imagen, dejando
 * a la vista justo la franja inferior — donde está el collage, no el cielo.
 */
.apmv-presentacion {
	display: flex;
	align-items: flex-start;
	gap: var(--apmv-e8);
	overflow: hidden;
	background-color: var(--apmv-papel);
	background-repeat: no-repeat, no-repeat;
	background-position: right bottom, right bottom;
	background-size: auto, min(46rem, 62%) auto;
	background-image:
		linear-gradient(
			to left,
			transparent 0%,
			var(--apmv-verde-velo) 38%,
			var(--apmv-papel) 60%
		),
		url("../img/fondos/banner-collage-apmv.png");
}

.apmv-presentacion__texto {
	flex: 1 1 auto;
	min-width: 0;
}

.apmv-franja__columnas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--apmv-e8);
	align-items: start;
}

/*
 * Con dos o una columna, la cuadrícula no puede seguir siendo de tres
 * carriles fijos: el tercero quedaría vacío en vez de repartirse entre los
 * bloques que sí existen (visible al pasar a borrador las cinco noticias
 * con Lorem ipsum el 2026-09-21, que dejó Actualidad sin nada que pintar).
 * `minmax(0, …)` + `justify-content: center` limita el ancho de cada
 * columna en vez de estirarla a la mitad o a la totalidad de los 76rem del
 * contenedor, y centra el conjunto resultante.
 *
 * No hace falta acotar esto a una media query de escritorio: por debajo de
 * 60rem la regla de más abajo fuerza `grid-template-columns: 1fr` sobre
 * `.apmv-franja__columnas` sin importar el modificador, y esa regla gana el
 * empate de especificidad por ir después en la hoja de estilos.
 */
.apmv-franja__columnas--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 28rem));
	justify-content: center;
}

.apmv-franja__columnas--cols-1 {
	grid-template-columns: minmax(0, 30rem);
	justify-content: center;
}

.apmv-franja__col {
	min-width: 0;
}

.apmv-franja__titulo {
	margin: 0 0 var(--apmv-e2);
	padding-bottom: var(--apmv-e2);
	border-bottom: var(--apmv-filete-marca) solid var(--apmv-dorado);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-s);
	font-weight: 700;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
	color: var(--apmv-grafito);
}

.apmv-franja__subtexto {
	margin: 0 0 var(--apmv-e5);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
}

.apmv-franja__destacado {
	margin-bottom: var(--apmv-e5);
}

.apmv-franja__destacado-medio {
	margin-bottom: var(--apmv-e3);
}

.apmv-franja__destacado-medio img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.apmv-franja__destacado-titulo {
	margin: var(--apmv-e2) 0;
	font-family: var(--apmv-serif);
	font-size: var(--apmv-txt-m);
	font-weight: 600;
	line-height: var(--apmv-interlinea-titular);
}

.apmv-franja__destacado-titulo a {
	text-decoration: none;
}

.apmv-franja__destacado-datos {
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
}

.apmv-franja__destacado-fecha {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--apmv-e3);
	color: var(--apmv-dorado-profundo);
	font-size: var(--apmv-txt-xs);
	font-weight: 600;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

.apmv-franja__lista {
	list-style: none;
	margin: 0 0 var(--apmv-e4);
	padding: 0;
}

.apmv-franja__item {
	max-width: none;
	padding-block: var(--apmv-e3);
	border-top: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	display: flex;
	flex-direction: column;
	gap: var(--apmv-e1);
}

.apmv-franja__fecha-corta {
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-xs);
}

.apmv-franja__item a {
	text-decoration: none;
	font-weight: 600;
}

/*
 * La primera ficha de Actualidad, con miniatura (2026-09-20). Es lo único que
 * la distingue del resto de la lista: mismo filete, misma fecha, mismo título
 * —la jerarquía la da la imagen, no un cuerpo de letra mayor ni una etiqueta
 * «destacada»—. Un poco más de aire por debajo para que la miniatura no quede
 * pegada al filete de la ficha siguiente, y para que la columna no se sienta
 * más pesada que Biblioteca y Sede.
 */
.apmv-franja__item--con-medio {
	gap: var(--apmv-e2);
	padding-bottom: var(--apmv-e4);
}

.apmv-franja__item-medio {
	display: block;
	margin-bottom: var(--apmv-e1);
}

.apmv-franja__pie {
	margin: var(--apmv-e4) 0 0;
}

.apmv-enlace-flecha {
	display: inline-flex;
	align-items: center;
	gap: var(--apmv-e2);
	font-size: var(--apmv-txt-s);
	font-weight: 600;
	text-decoration: none;
}

.apmv-enlace-flecha::after {
	content: "\2192";
	transition: transform var(--apmv-transicion);
}

.apmv-enlace-flecha:hover::after {
	transform: translateX(0.2em);
}

/* Biblioteca Virtual: lista de accesos por tipo de documento. */

.apmv-biblioteca-accesos {
	list-style: none;
	margin: 0 0 var(--apmv-e4);
	padding: 0;
}

.apmv-biblioteca-accesos__item {
	border-top: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
}

.apmv-biblioteca-accesos__item:last-child {
	border-bottom: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
}

.apmv-biblioteca-accesos__enlace {
	display: flex;
	align-items: flex-start;
	gap: var(--apmv-e3);
	padding-block: var(--apmv-e3);
	text-decoration: none;
	color: var(--apmv-grafito);
}

.apmv-biblioteca-accesos__enlace:hover {
	color: var(--apmv-verde-tinta);
}

.apmv-biblioteca-accesos__enlace:hover .apmv-biblioteca-accesos__icono {
	color: var(--apmv-verde-tinta);
}

.apmv-biblioteca-accesos__icono {
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: 0.15rem;
	color: var(--apmv-verde-profundo);
}

.apmv-biblioteca-accesos__texto {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.apmv-biblioteca-accesos__nombre {
	font-weight: 600;
}

.apmv-biblioteca-accesos__descripcion {
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-xs);
}

.apmv-franja__medio {
	margin-bottom: var(--apmv-e3);
}

/*
 * Mismo recorte para las dos imágenes de la franja —la miniatura de la primera
 * ficha de Actualidad y la fotografía de la sede—: 4:3 exacto, ancho completo
 * de la columna y `object-fit: cover`, que encuadra sin deformar. Una sola
 * regla, para que no haya dos criterios de recorte en el mismo tramo.
 */
.apmv-franja__medio img,
.apmv-franja__item-medio img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Ilustración de un artículo con el título dentro del arte (3:2): a 4:3 se
   recortarían los lados y con ellos el borde del título. */
.apmv-franja__item-medio--ilustracion img {
	aspect-ratio: 3 / 2;
}

.apmv-franja__texto {
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
}

/* =========================================================================
   16 · Responsive
   =========================================================================
   Móvil primero es la prioridad del proyecto. Estos ajustes son los que
   cambian de verdad la composición, no retoques.
   ========================================================================= */

@media (max-width: 60rem) {

	.apmv-cabecera__fila {
		flex-wrap: wrap;
		gap: var(--apmv-e3);
		min-height: 5.25rem;
	}

	/*
	 * El logo gana presencia en escritorio (DP-02); en tableta y móvil se
	 * modera un poco para que no compita con el botón de menú en la misma
	 * fila.
	 */
	.apmv-marca img,
	.apmv-marca .custom-logo {
		max-height: 3.75rem;
	}

	/*
	 * Con el menú desplegado, la fila de la cabecera crece hasta la altura del
	 * panel. Si el logotipo sigue centrado en esa fila, se va solo hasta la
	 * mitad de la lista, lejos del botón que acaba de pulsarse. Anclado
	 * arriba se queda donde estaba. Con el menú cerrado no cambia nada: el
	 * logotipo es el elemento más alto de la fila.
	 */
	.apmv-marca {
		align-self: flex-start;
	}

	.apmv-nav__boton {
		display: inline-flex;
	}

	/*
	 * Menú desplegable en móvil. Cerrado, ocupa cero; abierto, se lee en
	 * columna. `hidden` lo controla el JavaScript; sin JavaScript el menú
	 * queda visible, que es el fallo correcto.
	 */
	.apmv-nav__panel {
		flex-basis: 100%;
		order: 3;
		/*
		 * Con la cabecera fija, el menú abierto no puede salirse de la
		 * pantalla: si lo hiciera, sus últimas entradas quedarían fuera de
		 * alcance. Se desplaza dentro de sí mismo.
		 */
		max-height: calc(100vh - 6rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.apmv-nav__panel[hidden] {
		display: none;
	}

	/*
	 * La navegación ocupa todo lo que el logotipo deja libre, y su contenido
	 * se alinea a la derecha. Sin el `flex: 1` la barra se anchaba solo lo que
	 * medían el botón y Afíliate, y como el panel desplegado mide el 100 % de
	 * ella, el menú abierto en tableta caía en la mitad derecha de la pantalla
	 * con medio ancho vacío al lado del logotipo. Ahí no había nada que leer:
	 * era un hueco, no aire.
	 */
	.apmv-nav {
		flex: 1;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: var(--apmv-e3);
	}

	.apmv-nav__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: var(--apmv-e2);
	}

	.apmv-nav__lista a {
		display: block;
		padding: var(--apmv-e3) 0;
		border-bottom: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	}

	.apmv-nav__lista a:hover,
	.apmv-nav__lista .current-menu-item > a {
		border-bottom-color: var(--apmv-dorado);
	}

	/*
	 * ACORDEÓN EN MÓVIL Y TABLETA. El mismo botón que en escritorio abre un
	 * desplegable flotante, aquí despliega la sección hacia abajo dentro del
	 * menú. Nada flota, nada se sale de pantalla y no hay una segunda capa
	 * que cerrar.
	 */
	.apmv-nav__lista .menu-item-has-children {
		flex-wrap: wrap;
		gap: 0;
		border-bottom: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	}

	.apmv-nav__lista .menu-item-has-children > a {
		flex: 1 1 auto;
		border-bottom: 0;
	}

	/* Área de toque cómoda: el botón ocupa toda la altura de su fila. */
	.apmv-nav__desplegar {
		flex: 0 0 auto;
		padding: var(--apmv-e3);
	}

	.apmv-nav__chevron {
		width: 1.25rem;
		height: 1.25rem;
	}

	.apmv-nav--js .apmv-nav__lista .menu-item-has-children {
		position: static;
	}

	.apmv-nav--js .apmv-nav__submenu,
	.apmv-nav__submenu {
		position: static;
		flex-basis: 100%;
		min-width: 0;
		margin: 0 0 var(--apmv-e2);
		padding: 0 0 0 var(--apmv-e4);
		border: 0;
		border-left: var(--apmv-filete) solid var(--apmv-dorado);
		background: none;
		box-shadow: none;
	}

	.apmv-nav--js .apmv-nav__submenu a,
	.apmv-nav__submenu a {
		padding: var(--apmv-e3) 0;
		white-space: normal;
		border-bottom: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
	}

	.apmv-nav--js .apmv-nav__submenu li:last-child a {
		border-bottom: 0;
	}

	.apmv-nav--js .apmv-nav__submenu a:hover,
	.apmv-nav--js .apmv-nav__submenu .current-menu-item > a {
		background: none;
	}

	/*
	 * HERO PARTIDO EN VERTICAL (DP-01). En escritorio el hero se parte en dos
	 * columnas (texto | foto); aquí se deshace la rejilla y se vuelve a una
	 * sola columna, imagen arriba y texto abajo — no caben las dos mitades
	 * una junto a otra en una pantalla estrecha.
	 */
	.apmv-hero {
		display: block;
		min-height: 0;
	}

	.apmv-hero__medio {
		position: relative;
		inset: auto;
		aspect-ratio: 16 / 9;
	}

	/*
	 * El velo solo protege el contraste del texto cuando va superpuesto a
	 * la fotografía (escritorio). Aquí el texto baja debajo de la imagen
	 * sobre el fondo verde sólido del hero, así que el velo no pinta nada.
	 */
	.apmv-hero__velo {
		display: none;
	}

	.apmv-hero__cuerpo {
		display: block;
		min-height: 0;
		padding-block: var(--apmv-e6) var(--apmv-e7);
	}

	.apmv-hero__texto {
		max-width: none;
	}

	.apmv-presentacion {
		flex-direction: column;
		gap: var(--apmv-e5);
		/* Menos protagonismo en tableta: el texto pasa a ocupar todo el ancho,
		   así que el fondo se reduce para no quedar detrás de las líneas. */
		background-size: auto, min(24rem, 46%) auto;
	}

	/* Franja inferior: de tres columnas a una sola, en el orden de lectura de la Fase B. */
	.apmv-franja__columnas {
		grid-template-columns: 1fr;
		gap: var(--apmv-e7);
	}
}

@media (max-width: 40rem) {

	.apmv-marca img,
	.apmv-marca .custom-logo {
		max-height: 3.25rem;
	}

	.apmv-cronologia__item,
	.apmv-cronologia__item--con-retrato {
		grid-template-columns: 1fr;
		gap: var(--apmv-e1);
	}

	.apmv-cronologia__periodo {
		padding-top: 0;
	}

	.apmv-cronologia__periodos {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--apmv-e2);
	}

	.apmv-cronologia__retrato {
		width: 4.5rem;
		height: 4.5rem;
	}

	.apmv-ficha__bibliografia {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.apmv-ficha__bibliografia dd {
		margin-bottom: var(--apmv-e3);
	}

	.apmv-hero__acciones .apmv-boton {
		width: 100%;
	}

	/*
	 * Móvil: rendimiento y lectura por delante del adorno. Se retira la capa
	 * de imagen (el navegador no la descarga si la regla no aplica) y queda
	 * solo el degradado, que en este ancho no aporta nada — franja lisa.
	 */
	.apmv-presentacion {
		background-image: none;
	}
}

/* Impresión: sin cabecera, sin pie, sin fondos. */
@media print {

	.apmv-cabecera,
	.apmv-pie,
	.apmv-salto,
	.apmv-hero__medio,
	.apmv-hero__velo {
		display: none;
	}

	body {
		color: #000000;
	}
}

/* ---------------------------------------------------------------------------
   Separación entre secciones de una misma página
   --------------------------------------------------------------------------

   Añadido tras la prueba en móvil de Actualidad (feedback de Angie, sept.
   2026): en pantallas estrechas las secciones se leen una detrás de otra, sin
   las columnas que en escritorio ya insinúan dónde termina cada bloque, y
   «Investigación de médicos veterinarios panameños» parecía la continuación de
   las noticias.

   El filete superior es deliberadamente discreto: marca el límite sin añadir
   una caja ni un fondo más. Donde la sección ya trae velo de color, el fondo
   se basta y el filete sobra. */
.apmv-seccion--separada {
	border-top: var(--apmv-filete-fino) solid var(--apmv-gris-filete);
}

.apmv-seccion--velo.apmv-seccion--separada {
	border-top: 0;
}

/* ---------------------------------------------------------------------------
   Documento de referencia
   --------------------------------------------------------------------------

   Bloque discreto al pie de un área que remite a una ficha de la Biblioteca.
   No es una tarjeta más ni un reclamo: es una nota al pie con un botón. */
.apmv-referencia {
	max-width: var(--apmv-ancho-editorial);
	margin-top: var(--apmv-e7);
	padding: var(--apmv-e5);
	border-left: var(--apmv-filete-marca) solid var(--apmv-dorado);
	background: var(--apmv-papel-alterno);
}

.apmv-referencia__rotulo {
	margin: 0 0 var(--apmv-e2);
	color: var(--apmv-dorado-profundo);
	font-size: var(--apmv-txt-xs);
	font-weight: 700;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

.apmv-referencia__titulo {
	margin: 0 0 var(--apmv-e2);
	font-weight: 700;
}

.apmv-referencia__autoria {
	margin: 0 0 var(--apmv-e4);
	color: var(--apmv-gris-lectura);
	font-size: var(--apmv-txt-s);
}

.apmv-referencia__accion {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Acceso flotante a WhatsApp
   --------------------------------------------------------------------------

   Un botón, y nada más: ni ventana que se abre sola, ni chat simulado, ni
   mensaje que interrumpe la lectura. Se pulsa cuando alguien quiere escribir,
   no cuando la web quiere que escriba.

   El número y el mensaje vienen de Ajustes APMV. Esta hoja solo decide cómo se
   ve. */
.apmv-whatsapp {
	position: fixed;
	right: var(--apmv-whatsapp-margen);
	bottom: var(--apmv-whatsapp-margen);
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--apmv-whatsapp-tamano);
	height: var(--apmv-whatsapp-tamano);
	border-radius: 50%;
	background: var(--apmv-whatsapp);
	color: var(--apmv-blanco);

	/*
	 * Dos capas, y la primera no es decorativa. El botón flota sobre lo que
	 * haya debajo, y al final de cada página lo que hay debajo es el pie,
	 * verde oscuro: contra él, el verde del botón se queda en 2,43:1, por
	 * debajo del 3:1 que pide la WCAG 2.1 para un control (1.4.11). El aro
	 * blanco lo separa de cualquier fondo —sobre el papel blanco ni se ve, y
	 * sobre el pie contrasta 16:1—. La segunda capa sí es la sombra.
	 */
	box-shadow:
		0 0 0 2px var(--apmv-blanco),
		0 0.25rem 0.75rem rgb(26 32 24 / 22%);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.apmv-whatsapp__icono {
	width: 1.75rem;
	height: 1.75rem;
}

.apmv-whatsapp:hover,
.apmv-whatsapp:focus-visible {
	background: var(--apmv-whatsapp-hover);
	color: var(--apmv-blanco);
	transform: translateY(-2px);
}

/*
 * El rótulo no es un `title`: el navegador lo enseñaría al cabo de un segundo,
 * y el lector de pantalla lo leería además del `aria-label`, dos veces lo
 * mismo. Es un texto del propio botón, oculto a la accesibilidad, que se
 * asoma al pasar el ratón o al llegar con el teclado. Va a la izquierda, nunca
 * hacia fuera del papel, así que no puede provocar desplazamiento horizontal.
 */
.apmv-whatsapp__rotulo {
	position: absolute;
	right: calc(100% + var(--apmv-e2));
	padding: var(--apmv-e2) var(--apmv-e3);
	border-radius: var(--apmv-radio-boton);
	background: var(--apmv-grafito);
	color: var(--apmv-blanco);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-xs);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
}

.apmv-whatsapp:hover .apmv-whatsapp__rotulo,
.apmv-whatsapp:focus-visible .apmv-whatsapp__rotulo {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.apmv-whatsapp,
	.apmv-whatsapp__rotulo {
		transition: none;
	}

	.apmv-whatsapp:hover,
	.apmv-whatsapp:focus-visible {
		transform: none;
	}
}

/*
 * Al final de la página, la esquina del botón es el pie. Se reserva justo lo
 * que el botón ocupa —su alto más los dos márgenes— para que no se apoye sobre
 * el crédito ni sobre los enlaces legales. Y solo cuando hay botón: la clase la
 * pone el tema si Ajustes APMV tiene número.
 */
.apmv-con-whatsapp .apmv-pie__legal {
	padding-bottom: calc(var(--apmv-whatsapp-tamano) + var(--apmv-whatsapp-margen) * 2);
}

@media (max-width: 40rem) {
	:root {
		--apmv-whatsapp-tamano: 3.25rem;
		--apmv-whatsapp-margen: 1rem;
	}

	.apmv-whatsapp__icono {
		width: 1.625rem;
		height: 1.625rem;
	}

	/* En una columna estrecha el rótulo no cabe al lado: sobra el botón. */
	.apmv-whatsapp__rotulo {
		display: none;
	}
}