/*
Theme Name: Perimetral 2026
Theme URI: https://perimetral.press
Description: Tema de Perimetral Press. Hijo de Twenty Twenty-Five, construido con bloques nativos de WordPress. Reemplaza al tema Megaphone.
Author: WebCreation GDL
Template: twentytwentyfive
Version: 1.1.0
License: GNU General Public License v2 or later
Text Domain: perimetral
*/

/* =========================================================================
   Lo estructural (colores, escalas, tipografía, espaciados) vive en
   theme.json. Aquí va solo lo que theme.json no sabe expresar: maqueta de
   dos columnas, capitular, pseudo-elementos y accesibilidad.
   ========================================================================= */


/* -------------------------------------------------------------------------
   0 · Interruptor de redondeo
   -------------------------------------------------------------------------
   Un solo valor gobierna botones, imágenes de tarjeta, cajas y controles.
   Ponlo en 0 para volver al diseño cuadrado; no hay que tocar nada más.

   Las bandas a sangre completa (membrete negro, banda de relacionados, pie)
   y la foto de apertura NO se redondean a propósito: tocan el borde de la
   pantalla y un radio ahí se ve como un error de maquetación.
   ---------------------------------------------------------------------- */

:root {
	--perimetral-radio: 8px;
}

/* Imágenes de tarjeta y módulos. */
.perimetral-relacionados .wp-block-post-featured-image img,
.perimetral-lateral-medios figure img,
.perimetral-lateral-medios iframe {
	border-radius: var(--perimetral-radio, 0);
	overflow: hidden;
}

/* Marcador para entradas sin imagen destacada. Se comporta igual que una foto
   real: llena su caja y respeta la proporción que pida cada plantilla. */
.perimetral-portada-generica img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Controles y etiquetas. */
.perimetral-compartir__enlace {
	border-radius: var(--perimetral-radio, 0);
}


/* -------------------------------------------------------------------------
   0b · Red de seguridad contra desbordes
   -------------------------------------------------------------------------
   Ningún enlace puede medir más que su contenedor. Con 2,545 notas de doce
   años hay nombres de etiqueta larguísimos, URLs pegadas como texto y títulos
   sin espacios; cualquiera de ellos basta para empujar la página entera y
   provocar scroll lateral en móvil.

   "anywhere" y no "break-word": los dos parten la palabra, pero solo
   "anywhere" reduce el ancho mínimo intrínseco. Con "break-word" el padre
   sigue midiendo con la palabra completa y el desborde persiste.

   El min-width:0 en las columnas es la otra mitad: por defecto un elemento
   flex o de rejilla no se encoge por debajo de su contenido mínimo.
   ---------------------------------------------------------------------- */

.perimetral-nota a,
.perimetral-pie a {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.perimetral-maqueta__cuerpo,
.perimetral-maqueta__lateral,
.perimetral-modulo,
.perimetral-lateral__fijo {
	min-width: 0;
}


/* -------------------------------------------------------------------------
   1 · Cabecera del sitio
   ---------------------------------------------------------------------- */

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

/* El lema es una firma, no un titular: va en blanco y chico.

   El !important es necesario, no un atajo: WordPress genera las clases de
   tamaño de fuente (.has-x-small-font-size) CON !important, así que sin él
   gana el preset del bloque y el tamaño de aquí se ignora. */
.perimetral-cabecera__servicio .perimetral-lema {
	color: var(--wp--preset--color--fondo);
	font-size: 0.75rem !important;
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* --- Logotipo ---

   Se usan PNG con transparencia generados a partir del JPG original, en dos
   tintas: rojo para la cabecera y #FAFAF8 para el pie negro. Viven en el tema
   (assets/img/) y se insertan con los patrones perimetral/logo y
   perimetral/logo-blanco, que resuelven la ruta con PHP.

   Ya no hace falta el mix-blend-mode que compensaba el fondo blanco del JPG:
   el archivo tiene transparencia real, así que funciona sobre cualquier fondo
   sin trucos de mezcla. */
.perimetral-logo {
	margin-block: 0;
}

/* El <a> que envuelve la imagen es inline por defecto. Un elemento inline
   reserva espacio de line-height heredado alrededor de su contenido —el
   clásico "espacio fantasma" bajo una imagen dentro de un enlace—, y eso
   dejaba el <figure> unos 10px más alto que la <img> real, con todo ese
   sobrante debajo. Resultado medido: la imagen quedaba centrada dentro de
   su propio contenedor, pero el contenedor no estaba centrado respecto al
   botón y al buscador de al lado. display:block quita ese espacio de raíz.

   El bloque nativo del logotipo del sitio (site-logo) trae este mismo reset
   de fábrica en su propio <a>; este es un wp:image normal y no lo trae. */
.perimetral-logo a {
	display: block;
	line-height: 0;
}

.perimetral-logo img {
	display: block;
	width: 300px;
	max-width: 72vw;
	height: auto;
}

.perimetral-logo--pie img {
	width: 240px;
	max-width: 100%;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* --- Fila del logo ---
   Tres tramos: 1fr · auto · 1fr. El logo va en el tramo central y el buscador
   en el derecho, así el logo queda centrado respecto a la página y no
   respecto al espacio que le deja el buscador. El tramo izquierdo se queda
   vacío a propósito: es el contrapeso. */
/* Las cuatro piezas de la cabecera en una sola rejilla. Los tramos laterales
   miden lo mismo (1fr), así el logo del tramo central queda centrado respecto
   a la página y no respecto a lo que ocupen el botón o el buscador. */
.perimetral-cabecera__rejilla {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas:
		"cta logo buscador"
		"nav nav  nav";
	align-items: center;
	gap: 1.25rem 1rem;
}

/* El grupo va en layout de flujo, y WordPress le pone margen superior a los
   hijos. En rejilla ese margen desalinea todo respecto del logo. */
.perimetral-cabecera__rejilla > * {
	margin-block: 0;
}

.perimetral-cabecera__rejilla > .perimetral-cta-cabecera {
	grid-area: cta;
	justify-self: start;
}

.perimetral-cabecera__rejilla > .perimetral-logo {
	grid-area: logo;
}

.perimetral-cabecera__rejilla > .wp-block-search {
	grid-area: buscador;
	justify-self: end;
}

.perimetral-cabecera__rejilla > .wp-block-navigation {
	grid-area: nav;
	justify-self: center;
}

/* Botón ancho: es la acción que sostiene al medio y compite con un logotipo
   de 300px al lado. Con el min-width no encoge aunque el texto sea corto. */
.perimetral-cta-cabecera .wp-block-button__link {
	min-width: 11.5rem;
	text-align: center;
}

/* Angosto: hamburguesa y gratificar comparten renglón, debajo del logo.

   El botón no cabe junto al logo y el buscador a estos anchos —el logotipo se
   quedaría en unos 180px, ilegible—, así que baja. Y baja al mismo renglón
   que la hamburguesa, no a uno propio, para no sumar una tercera altura a la
   cabecera. */
@media (max-width: 760px) {
	.perimetral-cabecera__rejilla {
		grid-template-areas:
			".   logo buscador"
			"nav cta  cta";
		row-gap: 1rem;
	}

	.perimetral-cabecera__rejilla > .wp-block-navigation {
		justify-self: start;
	}

	.perimetral-cabecera__rejilla > .perimetral-cta-cabecera,
	.perimetral-cta-cabecera .wp-block-button,
	.perimetral-cta-cabecera .wp-block-button__link {
		justify-self: stretch;
		width: 100%;
	}
}

@media (max-width: 600px) {
	.perimetral-cabecera__rejilla {
		column-gap: 0.5rem;
	}

	.perimetral-logo img {
		max-width: 62vw;
	}
}

/* --- Enlace de inicio como icono ---
   El texto "Inicio" sigue en el markup y solo se oculta visualmente con
   font-size: 0, así los lectores de pantalla lo siguen anunciando en vez de
   encontrarse un enlace sin nombre. El icono se dibuja con una máscara para
   que herede currentColor y cambie a rojo en hover como el resto del menú.

   Solo de 600px para arriba: dentro del panel móvil se muestra la palabra,
   que en una lista vertical de texto se lee mejor que un icono suelto. */
@media (min-width: 600px) {
	.perimetral-nav .perimetral-inicio > a {
		display: flex;
		align-items: center;
		font-size: 0;
		line-height: 0;
	}

	.perimetral-nav .perimetral-inicio > a::before {
		content: "";
		display: block;
		width: 1.15rem;
		height: 1.15rem;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v9h6v-6h2v6h6v-9h3Z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v9h6v-6h2v6h6v-9h3Z'/%3E%3C/svg%3E") center / contain no-repeat;
	}
}

/* Navegación principal. */
.perimetral-nav a {
	color: var(--wp--preset--color--negro);
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
}

.perimetral-nav a:hover,
.perimetral-nav a:focus-visible,
.perimetral-nav .current-menu-item a {
	color: var(--wp--preset--color--rojo);
	border-bottom-color: var(--wp--preset--color--rojo);
}

/* --- Submenús de escritorio ---
   WordPress los deja en blanco con borde gris. Aquí van en negro, del ancho
   del nombre más largo, y SIN versalitas: los hijos son nombres propios de
   secciones y de medios aliados ("Raíchali", "Contorno / Reportajes"), y en
   mayúsculas forzadas se leen mal y pierden los acentos su forma. */
.perimetral-nav .wp-block-navigation__submenu-container {
	min-width: 15rem;
	padding-block: 0.5rem;
	background: var(--wp--preset--color--negro);
	border: none;
	border-radius: var(--perimetral-radio, 0);
}

.perimetral-nav .wp-block-navigation__submenu-container a {
	padding: 0.55rem 1.1rem;
	color: var(--wp--preset--color--fondo);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	border-bottom: none;
	white-space: nowrap;
}

.perimetral-nav .wp-block-navigation__submenu-container a:hover,
.perimetral-nav .wp-block-navigation__submenu-container a:focus-visible {
	color: var(--wp--preset--color--rojo);
	background: rgba(250, 250, 248, 0.07);
	border-bottom: none;
}

/* La flechita del desplegable hereda el color del enlace padre. */
.perimetral-nav .wp-block-navigation__submenu-icon {
	color: currentColor;
}

/* Con siete elementos de primer nivel el renglón se aprieta: menos separación
   entre ellos antes de que el menú se apile en 1200px. */
@media (min-width: 1201px) {
	.perimetral-nav {
		column-gap: 1.15rem;
	}
}


/* --- Menú desplegable en móvil ---
   En escritorio la navegación va justificada a la derecha. Al abrir el panel,
   WordPress la vuelve columna pero conserva esa alineación a través de la
   variable --navigation-layout-justification-setting, y los enlaces se pegan
   al borde derecho hasta cortarse. Reescribir la variable es lo único que
   funciona: poner align-items a mano no gana porque WordPress lo declara
   justamente a partir de esa variable. */
/* La variable se reescribe en el contenedor Y en todos sus descendientes:
   WordPress la declara en el nodo raíz .wp-block-navigation, y basta con que
   un elemento intermedio la vuelva a declarar para que la herencia se pierda. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open * {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-align: flex-start;
	--navigation-layout-justify: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
}

/* Candado de ancho del panel.

   El overlay y sus contenedores llevan width:100%, así que heredan el ancho
   del DOCUMENTO, no el de la pantalla. Si cualquier cosa desborda la página
   (una etiqueta larguísima, una URL pegada como texto), el panel se estira
   con ella y el botón de cerrar —que se posiciona contra el borde derecho del
   panel— queda fuera de la pantalla.

   Con esto el panel nunca pasa del ancho del viewport, sin importar lo que
   pase en el resto de la página. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	max-width: 100vw;
	box-sizing: border-box;
}

/* Selectores de cuatro clases para empatarle a WordPress, más !important
   porque su regla se resuelve por variable y cualquier empate lo gana ella. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left !important;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding: 6rem 1.5rem 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 1.35rem;
}

/* Botón de cerrar: separado de la esquina y con caja propia, igual que la
   hamburguesa que lo abrió. Va con selectores largos y las propiedades de
   visibilidad declaradas a mano porque el panel lo dibuja el runtime de la
   Interactivity API y conviene no dejarle nada al azar. */
/* Va "fixed" y no "absolute" a propósito.

   WordPress lo posiciona en absoluto dentro de .responsive-dialog, un
   contenedor que arma el runtime de la Interactivity API y cuya caja depende
   del contenido del panel. Si ese diálogo queda desplazado o sin altura, el
   botón aterriza fuera de la pantalla: el HTML lo tiene, el CSS lo estiliza,
   y aun así no se ve.

   Anclado al viewport deja de depender de sus ancestros. Los !important son
   para ganarle a las reglas del bloque, que también declaran position, top y
   right sobre este mismo elemento. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	position: fixed !important;
	top: 1.25rem !important;
	right: 1.25rem !important;
	bottom: auto !important;
	left: auto !important;
	z-index: 99 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 2px solid var(--wp--preset--color--fondo);
	border-radius: var(--perimetral-radio, 0);
	color: var(--wp--preset--color--fondo);
	opacity: 1 !important;
	visibility: visible !important;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close:focus-visible {
	background: var(--wp--preset--color--rojo);
	border-color: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--fondo);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: currentColor;
	stroke: currentColor;
}

.wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--fondo);
	font-size: 1.3rem;
	border-bottom-color: transparent;
}

.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open a:focus-visible {
	color: var(--wp--preset--color--rojo);
	border-bottom-color: var(--wp--preset--color--rojo);
}

/* Submenús dentro del panel: se muestran abiertos, indentados y en tamaño
   menor, sin la caja negra que llevan en escritorio (el panel ya es negro). */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	min-width: 0;
	padding: 0.35rem 0 0 1.1rem;
	background: transparent;
	border-inline-start: 2px solid var(--wp--preset--color--gris-oscuro);
	border-radius: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container a {
	padding: 0.35rem 0;
	font-size: 1rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
}

/* --- Submenús plegables dentro del panel ---

   WordPress oculta el botón de despliegue en el panel móvil y fuerza todos
   los submenús abiertos. Con 18 enlaces hijos entre las tres secciones, eso
   convierte el menú en una lista interminable.

   Aquí se devuelve el botón y los submenús arrancan plegados. El plegado se
   hace con display:none porque las reglas de WordPress fuerzan height y
   visibility con mucha especificidad, y display les gana sin pelear. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center !important;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	grid-column: 1;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	grid-column: 2;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 1px solid var(--wp--preset--color--gris-oscuro);
	border-radius: var(--perimetral-radio, 0);
	color: inherit;
	cursor: pointer;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	transition: transform 0.2s ease;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
}

/* Plegado por defecto. El botón cambia aria-expanded y con eso se despliega. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
	display: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-icon:hover,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-icon:focus-visible {
	border-color: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--rojo);
}

/* Buscador reducido a su icono: caja negra, lupa blanca. El bloque de
   búsqueda trae su propio estilo de botón, por eso hace falta ganarle en
   especificidad. */
.wp-block-search.perimetral-buscador .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	min-height: 0;
	background: var(--wp--preset--color--negro);
	border: 2px solid var(--wp--preset--color--negro);
	border-radius: var(--perimetral-radio, 0);
	color: var(--wp--preset--color--fondo);
}

.wp-block-search.perimetral-buscador .wp-block-search__button:hover,
.wp-block-search.perimetral-buscador .wp-block-search__button:focus-visible {
	background: var(--wp--preset--color--rojo);
	border-color: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--fondo);
}

.perimetral-buscador .wp-block-search__button svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: currentColor;
}

/* Hamburguesa: tres trazos gruesos dentro de una caja del mismo tamaño que
   el buscador. El SVG de dos líneas que trae WordPress se oculta y los
   trazos se dibujan con un solo pseudo-elemento y dos sombras. */
.wp-block-navigation__responsive-container-open {
	position: relative;
	width: 46px;
	height: 46px;
	padding: 0;
	background: var(--wp--preset--color--negro);
	border: 2px solid var(--wp--preset--color--negro);
	border-radius: var(--perimetral-radio, 0);
	/* Caja negra con trazos blancos, igual que el buscador: las dos cajas
	   flanquean el botón rojo y se leen como un solo sistema. */
	color: var(--wp--preset--color--fondo);
	box-shadow: none;
}

.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	top: 13px;
	height: 3px;
	background: currentColor;
	box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus-visible {
	background: var(--wp--preset--color--rojo);
	border-color: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--fondo);
}

/* --- Cabecera apilada ---
   Arranca en 1200px y no en 900. Entre esos dos anchos el membrete, cinco
   enlaces, el botón y el buscador ya no caben en un renglón: la fila se parte
   sola y queda pegada a la izquierda, que es como se veía rota en la portada.
   Apilando desde 1200px el corte es intencional y queda centrado. */
@media (max-width: 1200px) {

	/* Barra de servicio: lema y redes centrados, uno sobre otro. */
	.perimetral-cabecera__servicio > .wp-block-group {
		justify-content: center;
		row-gap: 0.5rem;
	}

	.perimetral-cabecera__servicio .perimetral-lema {
		width: 100%;
		text-align: center;
	}

	.perimetral-cabecera__servicio .wp-block-social-links {
		width: 100%;
		justify-content: center;
	}

	/* La navegación se aprieta un poco mientras el menú completo siga visible
	   (la hamburguesa de WordPress no aparece hasta 600px). */
	.perimetral-nav {
		column-gap: 0.9rem;
	}
}

@media (max-width: 900px) {

	/* El botón llena su tramo completo. */
	.perimetral-cta-cabecera,
	.perimetral-cta-cabecera .wp-block-button,
	.perimetral-cta-cabecera .wp-block-button__link {
		width: 100%;
	}

	.perimetral-cta-cabecera .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 46px;
	}
}

/* En pantallas muy angostas el botón se aprieta antes que desaparecer:
   gratificar es la acción que sostiene al medio, no conviene esconderla. */
@media (max-width: 400px) {
	.perimetral-cta-cabecera .wp-block-button__link {
		padding-inline: 0.5rem;
		font-size: 0.6875rem;
	}
}


/* -------------------------------------------------------------------------
   2 · Membrete de la nota (banda negra)
   ---------------------------------------------------------------------- */

.perimetral-antetitulo a {
	color: var(--wp--preset--color--rojo);
	text-decoration: none;
}

.perimetral-antetitulo a:hover,
.perimetral-antetitulo a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Titular. text-wrap:balance evita la "viuda" de una palabra suelta en la
   última línea, que en Archivo Black a 3.5rem se ve pésimo. El tope en em
   mantiene la medida legible sin importar el tamaño fluido.

   margin-inline: 0 es necesario, no cosmético. El padre tiene layout
   "constrained", y WordPress le pone margin-inline:auto a sus hijos para
   poder centrarlos. Con max-width el titular queda más angosto que su
   contenedor, y sin este reset ese margin:auto lo empuja hacia el centro:
   se corre a la derecha respecto a la categoría y los créditos de abajo, que
   sí ocupan el ancho completo y no tienen ese problema. */
.perimetral-titular {
	text-wrap: balance;
	max-width: 16em;
	margin-block: 0;
	margin-inline: 0;
}

/* Créditos: autor · fecha · tiempo de lectura.
   Los puntos medios se dibujan con CSS, no son caracteres del contenido, así
   el lector de pantalla no los lee como texto suelto. */
.perimetral-creditos {
	align-items: baseline;
	row-gap: 0.35rem;
}

.perimetral-creditos > * {
	margin: 0;
}

.perimetral-creditos > * + *::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--wp--preset--color--gris-medio);
	vertical-align: middle;
	margin-inline-end: 0.75rem;
	transform: translateY(-0.15em);
}

.perimetral-creditos .wp-block-post-author-name a {
	color: var(--wp--preset--color--fondo);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--rojo);
	padding-bottom: 1px;
}

.perimetral-creditos .wp-block-post-author-name a:hover,
.perimetral-creditos .wp-block-post-author-name a:focus-visible {
	color: var(--wp--preset--color--rojo);
}

/* Foto de apertura a sangre completa. Usada en la plantilla de página
   (Esto somos, Transparencia…), NO en la nota — la nota va partida en dos
   mitades, ver "Hero de la nota" más abajo. */
.perimetral-foto-apertura img {
	width: 100%;
	object-fit: cover;
}

/* --- Hero de la nota: negro + título a la izquierda, foto a la derecha ---

   CSS Grid y no wp:columns, mismo motivo que en el resto del sitio: el
   bloque Columnas es flex y su gap se suma a los flex-basis, así que un
   50%+50%+gap se pasa del 100% y aparece scroll lateral. Con grid el gap ya
   viene descontado de las dos fracciones.

   align-items:stretch (el valor por defecto de grid) es lo que iguala la
   altura de los dos lados: la fila mide lo que mida el más alto de los dos,
   y el otro se estira a esa misma altura. Ninguno de los dos lleva una
   altura fija — así un titular de una línea y uno de tres siguen dando una
   fila proporcional, y no una foto recortada de más o una banda con aire de
   sobra. */
.perimetral-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
}

.perimetral-hero__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(22rem, 40vw, 32rem);
}

/* margin-block-start:0 es el arreglo real, no cosmético.

   .perimetral-hero (el padre) tiene layout "default", que WordPress marca
   como is-layout-flow. Ese layout aplica automáticamente
   ":root :where(.is-layout-flow) > * { margin-block: 1.5rem 0 }" para
   simular el espaciado normal entre bloques apilados — sin saber que este
   contenedor específico se convirtió en rejilla por CSS. El primer hijo
   (perimetral-hero__texto) ya queda a salvo por una regla propia de
   WordPress para :first-child; el segundo (esta foto) nunca tuvo ese
   contrapeso. Medido con el navegador: esos 1.5rem (24px) eran exactamente
   el desfase entre el bloque negro y la foto. */
.perimetral-hero__foto {
	margin-block-start: 0;
	min-height: clamp(22rem, 40vw, 32rem);
	overflow: hidden;
}

/* WordPress resetea el margen izquierdo/derecho de la figura del bloque
   (.wp-block-post-featured-image{margin-left:0;margin-right:0}) pero deja
   intacto el margen superior que el navegador le pone por defecto a
   cualquier <figure> (~1em). El bloque negro de al lado es un <div> sin ese
   margen, así que arranca pegado arriba y la foto quedaba corrida hacia
   abajo. height:100% es la otra mitad: sin ella la figura mide lo que mide
   su contenido (auto) y no llena la celda de la rejilla aunque el margen ya
   esté en cero. */
.perimetral-hero__foto > * {
	margin: 0;
	height: 100%;
}

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

/* Debajo de 900px se apila: texto arriba, foto abajo. Un titular largo a la
   mitad del ancho de un teléfono sería casi ilegible; a lo ancho completo
   respira. El min-height baja para no dejar una banda desproporcionada en
   pantallas angostas. */
@media (max-width: 900px) {
	.perimetral-hero {
		grid-template-columns: 1fr;
	}

	.perimetral-hero__texto,
	.perimetral-hero__foto {
		min-height: clamp(16rem, 60vw, 22rem);
	}
}


/* -------------------------------------------------------------------------
   3 · Maqueta de dos columnas
   ---------------------------------------------------------------------- */

/* El bloque Columnas apila hasta 781px. Para esta maqueta es tarde: con la
   barra lateral al 30% el texto queda estrangulado desde mucho antes. */
@media (max-width: 1000px) {
	.perimetral-maqueta {
		flex-wrap: wrap !important;
	}

	.perimetral-maqueta > .wp-block-column {
		flex-basis: 100% !important;
	}

	.perimetral-maqueta__lateral {
		margin-top: var(--wp--preset--spacing--50);
	}
}

/* El bloque Columnas es flex y el gap SE SUMA a los flex-basis: 64% + 30% son
   94%, más 4.5rem de gap, dan más del 100% del contenedor y aparece scroll
   lateral. Con rejilla el gap ya viene descontado de las fracciones.
   El minmax(0,...) es igual de importante: sin él, una imagen o una tabla
   ancha del contenido viejo de Megaphone revienta la columna hacia afuera.
   No se pone align-items: la columna debe estirarse a lo alto para que el
   sticky de la barra lateral tenga recorrido. */
@media (min-width: 1001px) {
	.perimetral-maqueta.wp-block-columns {
		display: grid;
		grid-template-columns: minmax(0, 64fr) minmax(0, 30fr);
		gap: var(--wp--preset--spacing--60);
	}

	.perimetral-maqueta.wp-block-columns > .wp-block-column {
		flex-basis: auto;
		min-width: 0;
	}

	.perimetral-maqueta__lateral {
		border-inline-start: 1px solid var(--wp--preset--color--gris-claro);
		padding-inline-start: var(--wp--preset--spacing--40);
	}

	/* Barra lateral fija: acompaña al lector durante el scroll.

	   SIN overflow ni max-height. En CSS, cuando un eje de overflow deja de
	   ser "visible", el otro pasa automáticamente a "auto": pedir scroll
	   vertical traía el horizontal de regalo, y la barra terminaba con sus
	   dos barras de desplazamiento.

	   Se ancla por abajo (bottom) en lugar de por arriba. Así, cuando los
	   módulos suman más alto que la pantalla, la barra acompaña el scroll
	   hasta mostrar su último módulo y ahí se detiene. Anclada arriba se
	   quedaría fija desde el principio y su parte inferior sería
	   inalcanzable. */
	.perimetral-lateral__fijo {
		position: sticky;
		top: auto;
		bottom: 1.5rem;
	}
}


/* -------------------------------------------------------------------------
   4 · Cuerpo del artículo
   ---------------------------------------------------------------------- */

/* Capitular. Solo en la primera línea del artículo, en rojo y Archivo Black. */
.perimetral-maqueta__cuerpo .wp-block-post-content > p:first-of-type::first-letter {
	float: left;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 4.2em;
	line-height: 0.82;
	margin-block: 0.06em 0;
	margin-inline: 0 0.1em;
	color: var(--wp--preset--color--rojo);
}

/* Ritmo vertical de la lectura larga. */
.wp-block-post-content p {
	margin-block: 0 1.35em;
}

/* Los subtítulos necesitan más aire arriba que abajo, para leerse como
   quiebre de sección y no como parte del párrafo anterior. */
.wp-block-post-content :is(h2, h3, h4) {
	margin-block: 2.25em 0.65em;
}

.wp-block-post-content a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* Citas destacadas: barra roja lateral, sin comillas decorativas. */
.wp-block-post-content blockquote {
	margin-block: 2em;
	padding-inline-start: 1.5rem;
	border-inline-start: 3px solid var(--wp--preset--color--rojo);
	font-style: normal;
}

.wp-block-post-content blockquote p:last-child {
	margin-bottom: 0;
}

.wp-block-post-content figure figcaption {
	margin-top: 0.6rem;
	padding-inline-start: 0.75rem;
	border-inline-start: 2px solid var(--wp--preset--color--gris-claro);
}

/* Contenido heredado de Megaphone: muchas imágenes traen width/height inline
   que revienta el ancho en móvil. */
.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

/* El tope tiene que ir también en la FIGURA, no solo en la imagen.

   WordPress le pone display:table a .wp-block-image.aligncenter para poder
   centrarla y colgarle el pie como table-caption. Un elemento tabla se ajusta
   al ancho intrínseco de su contenido —aquí 1024px— y el max-width:100% del
   <img> se resuelve contra esa misma tabla de 1024px, así que no limita nada:
   la imagen se ve bien, pero su contenedor mide 1024px y empuja la página.

   Esta es la causa medida del scroll lateral en móvil. */
.wp-block-post-content :is(figure, .wp-block-image, .wp-block-gallery, .wp-block-embed) {
	max-width: 100%;
}

/* Y que la figura no pueda quedarse en su ancho intrínseco aunque sea tabla. */
.wp-block-post-content .wp-block-image.aligncenter,
.wp-block-post-content .wp-block-image .aligncenter {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

/* Resto del contenido viejo que puede desbordar: incrustados de YouTube,
   Twitter y Zeno.fm con ancho fijo, tablas anchas y bloques de código.
   Cada uno hace su propio scroll horizontal en lugar de empujar la página.

   Importante: el overflow va SOLO en estos elementos, nunca en un contenedor
   padre. Un overflow en cualquier ancestro anularía el position:sticky de la
   barra lateral. */
.wp-block-post-content :is(iframe, video, embed, object) {
	max-width: 100%;
}

.wp-block-post-content :is(pre, table) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Enlaces con la URL completa como texto visible. Es lo más común en el
   contenido viejo de Megaphone y es la causa medida del scroll lateral: tres
   enlaces de hasta 466px en una pantalla de 375px.

   Va "anywhere" y no "break-word" a propósito. Los dos parten la palabra,
   pero solo "anywhere" reduce el ancho mínimo intrínseco del elemento; con
   "break-word" el padre sigue calculando su tamaño con la palabra completa y
   la columna se desborda igual. */
.wp-block-post-content :is(p, li, h1, h2, h3, h4, a, td, th, dd, dt) {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.wp-block-post-content a {
	max-width: 100%;
}

/* Contenedor de incrustados con proporción, para que no salten al cargar. */
.wp-block-post-content .wp-block-embed__wrapper iframe {
	width: 100%;
}


/* -------------------------------------------------------------------------
   5 · Módulos de la barra lateral
   ---------------------------------------------------------------------- */

.perimetral-modulo__titulo {
	color: var(--wp--preset--color--negro);
}

/* El primer módulo de la lateral no lleva margen superior extra. */
.perimetral-maqueta__lateral .perimetral-modulo:first-child {
	margin-top: 0;
}

/* --- Formulario de gratificación (Paymattic) ---
   El formulario trae su propio CSS; aquí solo se le pone medida y se
   neutraliza el ancho fijo que asume, porque la lateral es angosta. */
.perimetral-pago {
	font-size: var(--wp--preset--font-size--small);
}

.perimetral-pago .wpf_form_wrapper,
.perimetral-pago form {
	max-width: 100%;
}

.perimetral-pago input,
.perimetral-pago select,
.perimetral-pago button {
	max-width: 100%;
	box-sizing: border-box;
}

/* Enlace a la gratificación recurrente: mismo peso que un botón del sitio. */
.perimetral-boton-recurrente {
	display: block;
	padding: 0.8rem 1.1rem;
	background: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--fondo);
	border-radius: var(--perimetral-radio, 0);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	cursor: pointer;
}

.perimetral-boton-recurrente:hover,
.perimetral-boton-recurrente:focus-visible {
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--fondo);
}

/* Lista de "Lo más reciente": separadores finos entre notas. */
.perimetral-reciente .wp-block-post-template > li + li {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--gris-claro);
}

.perimetral-reciente .wp-block-post-title a {
	text-decoration: none;
}

.perimetral-reciente .wp-block-post-title a:hover,
.perimetral-reciente .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}


/* -------------------------------------------------------------------------
   5b · Radio, alianza y WhatsApp
   -------------------------------------------------------------------------
   Los marcadores de posición se ven claramente como pendientes a propósito:
   así nadie los confunde con diseño terminado. Se borran en cuanto lleguen
   el embed de Zeno.fm y las imágenes reales.
   ---------------------------------------------------------------------- */

/* El sello de Territorial: la imagen es un banner de 2.7:1, demasiado ancho
   para la barra lateral, así que se recorta con object-fit dejando el
   logotipo centrado, que es donde está en el archivo. */
.perimetral-sello {
	margin: 0;
	overflow: hidden;
	border-radius: var(--perimetral-radio, 0);
}

.perimetral-sello a {
	display: block;
	width: 100%;
	text-decoration: none;
}

.perimetral-sello img {
	display: block;
	width: 100%;
	height: 110px;
	object-fit: cover;
	object-position: center;
}

.perimetral-whatsapp {
	border-radius: var(--perimetral-radio, 0);
}

.perimetral-acento {
	color: var(--wp--preset--color--rojo);
}

.perimetral-whatsapp .wp-block-button__link:hover,
.perimetral-whatsapp .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--negro);
}


/* -------------------------------------------------------------------------
   6 · Compartir
   ---------------------------------------------------------------------- */

.perimetral-compartir {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	padding-block: 1.25rem;
	border-block: 1px solid var(--wp--preset--color--gris-claro);
}

.perimetral-compartir__etiqueta {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-medio);
}

.perimetral-compartir__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.perimetral-compartir__enlace {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--negro);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--negro);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.perimetral-compartir__enlace:hover,
.perimetral-compartir__enlace:focus-visible {
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--fondo);
}


/* -------------------------------------------------------------------------
   8 · Banda de relacionados
   ---------------------------------------------------------------------- */

.perimetral-relacionados .wp-block-post-title a {
	text-decoration: none;
}

.perimetral-relacionados .wp-block-post-title a:hover,
.perimetral-relacionados .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.perimetral-relacionados .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
}

.perimetral-relacionados .wp-block-post-terms a {
	text-decoration: none;
	color: var(--wp--preset--color--rojo);
}

/* minmax(0, 1fr) y no 1fr: "1fr" equivale a minmax(auto, 1fr), y ese mínimo
   "auto" impide que la columna se encoja por debajo del contenido, así que un
   titular largo o una imagen ancha la desbordan. */
@media (max-width: 900px) {
	.perimetral-relacionados .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	.perimetral-relacionados .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* -------------------------------------------------------------------------
   8b · Portada
   ---------------------------------------------------------------------- */

/* Cabeza de sección: título a la izquierda, "Ver todas" a la derecha,
   y una regla negra gruesa que las une. */
.perimetral-seccion__cabeza {
	align-items: baseline;
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 2px solid var(--wp--preset--color--negro);
}

.perimetral-seccion__mas a {
	color: var(--wp--preset--color--rojo);
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--x-small);
	white-space: nowrap;
}

.perimetral-seccion__mas a:hover,
.perimetral-seccion__mas a:focus-visible {
	color: var(--wp--preset--color--negro);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* --- MOSAICO DE APERTURA ---

   Cinco notas: la primera ocupa 2×2 y las otras cuatro se acomodan a su
   derecha en dos filas. Cuadra exacto y no deja huecos.

	 fila 1:  [ 1 1 ] [ 2 ] [ 3 ]
	 fila 2:  [ 1 1 ] [ 4 ] [ 5 ]

   Va con colocación explícita en rejilla y no con "grid-template-rows:
   masonry", que todavía no tiene soporte parejo entre navegadores, ni con
   columnas CSS, que ordenan de arriba abajo por columna y en una portada de
   noticias el orden de lectura importa. */

/* Separación apretada a propósito: 1.25rem entre filas y columnas.

   Antes eran 3rem y 2rem, y con el mosaico flotando sobre el mismo fondo que
   el resto de la portada esos huecos se leían como vacío, no como
   separación — las cinco notas no se percibían como un bloque. Con el marco
   de fondo detrás, la separación puede ser mínima: es el fondo el que agrupa,
   no el espacio. */
.perimetral-mosaico .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	/* Solo dos filas. Con filas explícitas ninguna nota puede caer a una
	   tercera hilera por debajo del mosaico. */
	grid-template-rows: auto auto;
	align-items: start;
}

.perimetral-mosaico .wp-block-post-template > li {
	min-width: 0;
	display: flex;
	flex-direction: column;
	/* Sin márgenes heredados de la lista: eran los que bajaban la columna
	   derecha respecto de la nota grande. */
	margin: 0;
	padding: 0;
}

.perimetral-mosaico .wp-block-post-template > li > *:first-child {
	margin-top: 0;
}

/* La imagen manda la proporción; el object-fit evita deformaciones con el
   material de archivo, que viene en tamaños muy dispares. */
.perimetral-mosaico .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--perimetral-radio, 0);
}

.perimetral-mosaico .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.perimetral-mosaico__titular {
	font-size: 1.0625rem;
}

.perimetral-mosaico__titular a {
	text-decoration: none;
}

.perimetral-mosaico__titular a:hover,
.perimetral-mosaico__titular a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.perimetral-mosaico .wp-block-post-terms a {
	text-decoration: none;
	color: var(--wp--preset--color--rojo);
}

@media (min-width: 901px) {
	/* Colocación explícita, celda por celda. Dejarlo al acomodo automático
	   permitía que una nota se saliera del bloque de 2 filas. */
	.perimetral-mosaico .wp-block-post-template > li:nth-child(1) {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

	.perimetral-mosaico .wp-block-post-template > li:nth-child(2) {
		grid-column: 3;
		grid-row: 1;
	}

	.perimetral-mosaico .wp-block-post-template > li:nth-child(3) {
		grid-column: 4;
		grid-row: 1;
	}

	.perimetral-mosaico .wp-block-post-template > li:nth-child(4) {
		grid-column: 3;
		grid-row: 2;
	}

	.perimetral-mosaico .wp-block-post-template > li:nth-child(5) {
		grid-column: 4;
		grid-row: 2;
	}

	.perimetral-mosaico .wp-block-post-template > li:first-child .wp-block-post-featured-image {
		aspect-ratio: 3 / 2;
	}

	.perimetral-mosaico .wp-block-post-template > li:first-child .perimetral-mosaico__titular {
		font-size: clamp(1.5rem, 2.1vw, 2rem);
	}
}

/* Tableta: dos columnas, la principal cruza el ancho completo. */
@media (max-width: 900px) {
	.perimetral-mosaico .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.perimetral-mosaico .wp-block-post-template > li:first-child {
		grid-column: 1 / -1;
	}

	.perimetral-mosaico .wp-block-post-template > li:first-child .perimetral-mosaico__titular {
		font-size: clamp(1.5rem, 4vw, 2rem);
	}
}

@media (max-width: 540px) {
	.perimetral-mosaico .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Tarjetas. El minmax(0,1fr) evita que un titular largo o una imagen ancha
   estire su columna y desborde la página. */
.perimetral-tarjetas .wp-block-post-title a {
	text-decoration: none;
}

.perimetral-tarjetas .wp-block-post-title a:hover,
.perimetral-tarjetas .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.perimetral-tarjetas .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
	border-radius: var(--perimetral-radio, 0);
}

.perimetral-tarjetas .wp-block-post-terms a {
	text-decoration: none;
	color: var(--wp--preset--color--rojo);
}

@media (max-width: 900px) {
	.perimetral-tarjetas .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	.perimetral-tarjetas .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Franja de gratificaciones. */
.perimetral-franja__texto {
	max-width: 42rem;
}

.perimetral-franja .wp-block-button__link:hover,
.perimetral-franja .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--negro);
}

/* Ningún enlace de la portada puede medir más que su caja. */
.perimetral-portada a {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}


/* -------------------------------------------------------------------------
   8c · Páginas
   ---------------------------------------------------------------------- */

/* Sin margin-inline ni !important: el título ya no es hijo directo del
   membrete "constrained", sino de .perimetral-pagina__cabeza, que va en
   layout de flujo y no reparte márgenes automáticos. La caja de 1180px la
   pone el grupo de arriba; aquí solo se limita la medida de lectura. */
.perimetral-pagina__titulo {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1.02;
	text-wrap: balance;
	max-width: 14em;
}

/* --- Maqueta: índice a la izquierda, contenido a la derecha ---
   Misma corrección que en la nota y la portada: el bloque Columnas es flex y
   su gap se suma a los flex-basis, así que 26% + 68% + 4.5rem se pasa del
   100% y aparece scroll lateral. Con rejilla el gap ya viene descontado. */
@media (min-width: 1001px) {
	.perimetral-pagina__maqueta.wp-block-columns {
		display: grid;
		grid-template-columns: minmax(0, 26fr) minmax(0, 68fr);
		gap: var(--wp--preset--spacing--60);
	}

	.perimetral-pagina__maqueta.wp-block-columns > .wp-block-column {
		flex-basis: auto;
		min-width: 0;
	}

	/* El índice es corto, así que aquí sí conviene anclarlo arriba: cabe
	   entero en pantalla y acompaña toda la lectura. */
	.perimetral-pagina__indice .perimetral-indice {
		position: sticky;
		top: 1.5rem;
	}

	.perimetral-pagina__indice {
		border-inline-end: 1px solid var(--wp--preset--color--gris-claro);
		padding-inline-end: var(--wp--preset--spacing--40);
	}
}

/* En móvil el índice es secundario: va después del texto, no antes. */
@media (max-width: 1000px) {
	.perimetral-pagina__maqueta {
		flex-wrap: wrap !important;
	}

	.perimetral-pagina__maqueta > .wp-block-column {
		flex-basis: 100% !important;
	}

	.perimetral-pagina__indice {
		order: 2;
		margin-top: var(--wp--preset--spacing--60);
		padding-top: var(--wp--preset--spacing--40);
		border-top: 2px solid var(--wp--preset--color--negro);
	}

	.perimetral-pagina__cuerpo {
		order: 1;
	}
}

/* --- Índice --- */
.perimetral-indice__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.perimetral-indice__lista li {
	margin-bottom: 0.85rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--wp--preset--color--gris-claro);
}

.perimetral-indice__lista li:last-child {
	border-bottom: none;
}

.perimetral-indice__lista a {
	color: var(--wp--preset--color--negro);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.perimetral-indice__lista a:hover,
.perimetral-indice__lista a:focus-visible {
	color: var(--wp--preset--color--rojo);
}

/* La página en la que estás no se enlaza a sí misma como las demás. */
.perimetral-indice__lista .current-page a,
.perimetral-indice__lista a[aria-current="page"] {
	color: var(--wp--preset--color--rojo);
	border-inline-start: 3px solid var(--wp--preset--color--rojo);
	padding-inline-start: 0.6rem;
	margin-inline-start: -0.9rem;
}

.perimetral-indice__cta .wp-block-button__link:hover,
.perimetral-indice__cta .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--negro);
}

/* Entradilla: el primer párrafo entra más grande, para que el texto no
   arranque plano después de un titular de 4.5rem. */
.perimetral-pagina__cuerpo .wp-block-post-content > p:first-of-type {
	font-size: clamp(1.1875rem, 2vw, 1.4375rem);
	line-height: 1.5;
	color: var(--wp--preset--color--negro);
}

/* Mismo ritmo de lectura que el cuerpo de una nota. */
.perimetral-pagina .wp-block-post-content p {
	margin-block: 0 1.35em;
}

.perimetral-pagina .wp-block-post-content :is(h2, h3, h4) {
	margin-block: 2.25em 0.65em;
}

.perimetral-pagina .wp-block-post-content a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* Contenido heredado: mismos candados que en las notas para que una imagen
   ancha o una URL pegada como texto no desborden la página. */
.perimetral-pagina .wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

.perimetral-pagina .wp-block-post-content :is(figure, .wp-block-image, .wp-block-embed) {
	max-width: 100%;
}

.perimetral-pagina .wp-block-post-content .wp-block-image.aligncenter {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.perimetral-pagina a {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Los textos viejos vienen justificados; en columna angosta el justificado
   abre ríos de espacio entre palabras y estorba la lectura. */
.perimetral-pagina .wp-block-post-content .has-text-align-justify {
	text-align: left;
}


/* -------------------------------------------------------------------------
   8d · Archivo, categoría y autor
   ---------------------------------------------------------------------- */

/* Igual que .perimetral-pagina__titulo: la caja de 1180px la pone
   .perimetral-archivo__cabeza; aquí solo se limita la medida de lectura. */
.perimetral-archivo__titulo {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1.02;
	text-wrap: balance;
	max-width: 14em;
}

.perimetral-archivo__descripcion {
	max-width: 46em;
}

.perimetral-archivo__descripcion p {
	margin: 0;
}

/* --- Fila de la lista ---
   Foto a la izquierda, texto a la derecha. En un archivo el lector busca una
   nota concreta: una fila con titular grande se escanea mejor que una rejilla
   de tarjetas pequeñas. */
.perimetral-fila {
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--gris-claro);
}

.perimetral-lista .wp-block-post-template > li:first-child .perimetral-fila {
	padding-top: 0;
}

.perimetral-lista .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.perimetral-lista .wp-block-post-template > li {
	min-width: 0;
}

@media (min-width: 782px) {
	.perimetral-fila {
		display: grid;
		grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
		gap: var(--wp--preset--spacing--50);
		align-items: start;
	}
}

.perimetral-fila__foto {
	margin: 0;
	overflow: hidden;
	border-radius: var(--perimetral-radio, 0);
}

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

@media (max-width: 781px) {
	.perimetral-fila__foto {
		margin-bottom: var(--wp--preset--spacing--30);
	}
}

.perimetral-fila__titular {
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	margin-top: 0;
}

.perimetral-fila__titular a {
	text-decoration: none;
}

.perimetral-fila__titular a:hover,
.perimetral-fila__titular a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

.perimetral-fila__sumario {
	max-width: 62ch;
}

.perimetral-fila .wp-block-post-terms a {
	color: var(--wp--preset--color--rojo);
	text-decoration: none;
}

/* Los créditos de la fila van sobre fondo claro: el nombre en negro, no en
   el blanco que usa la banda del artículo. */
.perimetral-fila .wp-block-post-author-name a {
	color: var(--wp--preset--color--negro);
	border-bottom-color: var(--wp--preset--color--rojo);
}

.perimetral-archivo a {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* --- Buscador dentro del membrete negro (búsqueda y 404) ---
   No es el iconito de la cabecera: aquí el campo va abierto, porque quien
   llega a estas dos pantallas viene a buscar. */

.perimetral-buscador-bloque {
	max-width: 30rem;
	margin: 0;
}

.perimetral-buscador-bloque .wp-block-search__inside-wrapper {
	border: 2px solid var(--wp--preset--color--fondo);
	border-radius: var(--perimetral-radio, 0);
	background: transparent;
	padding: 0;
}

.perimetral-buscador-bloque .wp-block-search__input {
	padding: 0.75rem 0.9rem;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--fondo);
	font-size: var(--wp--preset--font-size--small);
}

/* El texto de sugerencia hereda el color del campo, que aquí es blanco, y
   quedaría casi ilegible sobre negro: se atenúa a propósito. */
.perimetral-buscador-bloque .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--gris-medio);
	opacity: 1;
}

.perimetral-buscador-bloque .wp-block-search__button {
	margin: 0;
	padding: 0.75rem 1.2rem;
	background: var(--wp--preset--color--rojo);
	border: none;
	color: var(--wp--preset--color--fondo);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.perimetral-buscador-bloque .wp-block-search__button:hover,
.perimetral-buscador-bloque .wp-block-search__button:focus-visible {
	background: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--negro);
}

/* --- Atajos a secciones (sin resultados y 404) --- */

.perimetral-atajos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.perimetral-atajos a {
	padding: 0.5rem 0.85rem;
	background: var(--wp--preset--color--gris-claro);
	border-radius: var(--perimetral-radio, 0);
	color: var(--wp--preset--color--negro);
	font-weight: 600;
	text-decoration: none;
}

.perimetral-atajos a:hover,
.perimetral-atajos a:focus-visible {
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--fondo);
}

/* --- Cambio de vista: lista / parrilla --- */

.perimetral-vista {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--gris-claro);
}

/* [hidden] necesita ayuda: display:flex le gana al display:none del atributo,
   así que hay que reponerlo explícitamente o los botones se verían aunque el
   JavaScript no haya corrido. */
.perimetral-vista[hidden] {
	display: none;
}

.perimetral-vista__etiqueta {
	margin-right: auto;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--gris-medio);
}

.perimetral-vista__boton {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.8rem;
	background: transparent;
	border: 1px solid var(--wp--preset--color--gris-claro);
	border-radius: var(--perimetral-radio, 0);
	color: var(--wp--preset--color--gris-oscuro);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.perimetral-vista__boton:hover {
	border-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--negro);
}

/* El estado activo se pinta desde aria-pressed, no desde una clase aparte:
   así el estilo y lo que anuncia el lector de pantalla no pueden quedar
   desincronizados, porque salen del mismo atributo. */
.perimetral-vista__boton[aria-pressed="true"] {
	background: var(--wp--preset--color--negro);
	border-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--fondo);
}

/* Iconos dibujados con sombras de caja: sin SVG, sin peticiones, y heredan
   el color del botón en cada estado.

   OJO con el espaciado: box-shadow NO ocupa espacio en la maqueta. La caja
   real del icono es solo el cuadro de origen, pero el dibujo se extiende
   más allá con las sombras. El "gap" del botón se mide contra la caja real,
   así que el icono parecía pegado a la palabra. Se compensa con un margen
   del tamaño exacto que sobresale cada dibujo. */
.perimetral-vista__icono {
	display: block;
	width: 12px;
	height: 2px;
	background: currentColor;
}

/* Tres barras: la caja mide 12px de ancho y el dibujo también, así que no
   sobresale de lado. Hacia abajo llega a 12px, de ahí el margen inferior
   que lo recentra respecto al texto. */
.perimetral-vista__icono--lista {
	box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
	margin-bottom: 10px;
}

/* Cuatro cuadros: la caja mide 5px pero el dibujo llega a 12px en ambos
   ejes (5 + 7 de desplazamiento). Sobresalen 7px a la derecha y 7 abajo. */
.perimetral-vista__icono--parrilla {
	width: 5px;
	height: 5px;
	box-shadow:
		7px 0 0 currentColor,
		0 7px 0 currentColor,
		7px 7px 0 currentColor;
	margin-right: 7px;
	margin-bottom: 7px;
}

/* --- Vista de parrilla --- */

@media (min-width: 601px) {
	.perimetral-lista--parrilla .wp-block-post-template {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

@media (min-width: 601px) and (max-width: 900px) {
	.perimetral-lista--parrilla .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* La fila deja de ser foto-izquierda/texto-derecha y pasa a tarjeta
   apilada. Se anula la rejilla de dos tramos y el filete separador, que en
   parrilla dibujaría líneas sueltas entre columnas. */
.perimetral-lista--parrilla .perimetral-fila {
	display: block;
	padding-block: 0;
	border-bottom: none;
}

.perimetral-lista--parrilla .perimetral-fila__foto {
	margin-bottom: var(--wp--preset--spacing--30);
}

.perimetral-lista--parrilla .perimetral-fila__titular {
	font-size: 1.1875rem;
}

/* En tarjeta chica el sumario satura y descuadra alturas; el titular basta. */
.perimetral-lista--parrilla .perimetral-fila__sumario {
	display: none;
}

/* --- Paginación --- */
.perimetral-paginacion {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 2px solid var(--wp--preset--color--negro);
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
}

.perimetral-paginacion a,
.perimetral-paginacion .current {
	padding: 0.5rem 0.85rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--perimetral-radio, 0);
}

.perimetral-paginacion a {
	color: var(--wp--preset--color--negro);
	border: 1px solid var(--wp--preset--color--gris-claro);
}

.perimetral-paginacion a:hover,
.perimetral-paginacion a:focus-visible {
	background: var(--wp--preset--color--negro);
	border-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--fondo);
}

.perimetral-paginacion .current {
	background: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--fondo);
}

.perimetral-paginacion .wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
}

/* --- Ficha de autor --- */
.perimetral-autor {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
}

.perimetral-autor__foto {
	flex: 0 0 auto;
}

.perimetral-autor__retrato {
	display: block;
	width: 112px;
	height: 112px;
	object-fit: cover;
	border-radius: var(--perimetral-radio, 0);
	border: 3px solid var(--wp--preset--color--rojo);
}

.perimetral-autor__datos {
	flex: 1 1 24rem;
	min-width: 0;
}

.perimetral-autor__nombre {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.05;
	color: var(--wp--preset--color--fondo);
	margin: 0.5rem 0 0;
}

.perimetral-autor__bio {
	max-width: 58ch;
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--gris-medio);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.perimetral-autor__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gris-medio);
}

.perimetral-autor__sitio {
	color: var(--wp--preset--color--fondo);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--rojo);
}

.perimetral-autor__sitio:hover,
.perimetral-autor__sitio:focus-visible {
	color: var(--wp--preset--color--rojo);
}

/* Punto separador dibujado, no escrito: el lector de pantalla no lo lee. */
.perimetral-autor__sep {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--wp--preset--color--gris-medio);
}


/* -------------------------------------------------------------------------
   8e · Vías de contacto
   ---------------------------------------------------------------------- */

.perimetral-contacto__vias {
	gap: var(--wp--preset--spacing--50);
}

.perimetral-contacto__via {
	min-width: 14rem;
}

.perimetral-contacto__correo a {
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--wp--preset--color--negro);
	text-decoration-color: var(--wp--preset--color--rojo);
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

.perimetral-contacto__correo a:hover,
.perimetral-contacto__correo a:focus-visible {
	color: var(--wp--preset--color--rojo);
}


/* -------------------------------------------------------------------------
   8f · Fecha sobre la foto (solo mosaico de portada)
   ---------------------------------------------------------------------- */

.perimetral-mosaico__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--perimetral-radio, 0);
}

.perimetral-mosaico__media .wp-block-post-featured-image {
	margin: 0;
}

/* Esquina inferior izquierda: es la zona menos cargada de una foto de prensa
   —el sujeto suele ir al centro o al tercio superior— y coincide con el punto
   donde el ojo baja hacia el titular. */
.perimetral-mosaico__fecha {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 0.45rem 0.8rem;
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--fondo);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1;
	/* Sin redondeo aunque el resto lo tenga: la etiqueta nace de la esquina
	   de la foto y redondearla la despegaría del borde. */
	border-radius: 0;
}

/* La nota grande carga más peso, así que su etiqueta también. */
@media (min-width: 901px) {
	.perimetral-mosaico .wp-block-post-template > li:first-child .perimetral-mosaico__fecha {
		padding: 0.6rem 1.1rem;
		font-size: 0.8125rem;
	}
}


/* -------------------------------------------------------------------------
   8g · Territorial · alianza de medios
   ---------------------------------------------------------------------- */

/* Sin tope de medida: el cliente lo quiere a todo lo ancho de la caja. El
   52ch que tenía antes lo dejaba en 604px de 1180, o sea la mitad. */
.perimetral-territorial__texto {
	color: var(--wp--preset--color--gris-oscuro);
}

/* Solo se anula el margen HORIZONTAL que el navegador le da por defecto a
   cualquier <figure> (1em 40px). El vertical se deja libre a propósito: es
   por donde WordPress aplica el blockGap del grupo, y ponerlo en 0 —como
   estaba— dejaba la imagen pegada al texto y al botón. */
.perimetral-territorial__sello {
	margin-inline: 0;
	overflow: hidden;
	border-radius: var(--perimetral-radio, 0);
}

/* El <a> que WordPress mete entre la figura y la imagen es inline-block, así
   que encoge a su contenido; y como la imagen pide width:100%, ese 100% se
   resolvía contra la caja ya encogida. Resultado medido: 1082px en vez de
   1180. Con display:block el enlace ocupa la figura completa y la imagen
   hereda el ancho real. */
.perimetral-territorial__sello a {
	display: block;
	width: 100%;
}

/* El original es 1800×670 (2.7:1) y a 1180px de ancho mediría 440px de alto,
   demasiado para una banda. object-fit recorta arriba y abajo dejando el
   logotipo centrado, que es donde está en el archivo. */
.perimetral-territorial__sello img {
	display: block;
	width: 100%;
	height: clamp(140px, 18vw, 220px);
	object-fit: cover;
	object-position: center;
}

/* Ya no es texto con flecha, es botón: hereda el rojo de marca de theme.json
   y solo se le añade la flecha y el contraste en hover. */
.perimetral-territorial__enlace .wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
}

.perimetral-territorial__enlace .wp-block-button__link::after {
	content: " →";
}

.perimetral-territorial__enlace .wp-block-button__link:hover,
.perimetral-territorial__enlace .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--fondo);
}

/* -------------------------------------------------------------------------
   8h · Barra de radio
   ---------------------------------------------------------------------- */

/* Barra fija al pie que despliega el reproductor de Zeno hacia ARRIBA.

   El plegado es <details>/<summary> nativo: sin JavaScript, con teclado y
   anuncio de estado gratis. El panel se posiciona en absoluto con
   bottom:100% porque la barra vive pegada al fondo — si se abriera hacia
   abajo, como hace <details> por defecto, quedaría fuera de la pantalla. */

.perimetral-radio {
	position: fixed;
	z-index: 90;
	left: 1rem;
	bottom: 1rem;
	max-width: calc(100vw - 2rem);
}

/* --- La barra --- */

.perimetral-radio__barra {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1rem;
	background: var(--wp--preset--color--negro);
	border: 2px solid var(--wp--preset--color--rojo);
	border-radius: var(--perimetral-radio, 0);
	box-shadow: 0 6px 24px rgba(10, 10, 10, 0.28);
	cursor: pointer;
	/* Quita el triangulito por defecto del navegador; el nuestro es la flecha. */
	list-style: none;
}

.perimetral-radio__barra::-webkit-details-marker {
	display: none;
}

.perimetral-radio__barra:hover {
	background: #1a1a1a;
}

/* Punto rojo latiendo: el código universal de "esto está al aire". */
.perimetral-radio__senal {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--rojo);
	animation: perimetral-latido 2s ease-in-out infinite;
}

@keyframes perimetral-latido {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.82); }
}

.perimetral-radio__etiqueta {
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--rojo);
	white-space: nowrap;
}

.perimetral-radio__nombre {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--fondo);
	white-space: nowrap;
}

/* Crédito del patrocinio. Va como texto, no como enlace: un enlace dentro
   del <summary> competiría con el clic que abre y cierra el panel. */
.perimetral-radio__patrocinio {
	padding-left: 0.6rem;
	border-left: 1px solid var(--wp--preset--color--gris-oscuro);
	font-size: 0.6875rem;
	color: var(--wp--preset--color--gris-medio);
	white-space: nowrap;
}

.perimetral-radio__flecha {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	margin-left: 0.2rem;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 6px solid var(--wp--preset--color--fondo);
	transition: transform 0.2s ease;
}

.perimetral-radio[open] .perimetral-radio__flecha {
	transform: rotate(180deg);
}

/* --- El panel que se despliega --- */

.perimetral-radio__panel {
	position: absolute;
	bottom: calc(100% + 0.5rem);
	left: 0;
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--wp--preset--color--negro);
	border: 2px solid var(--wp--preset--color--rojo);
	border-radius: var(--perimetral-radio, 0);
	box-shadow: 0 6px 28px rgba(10, 10, 10, 0.35);
}

.perimetral-radio__player {
	display: block;
	width: 300px;
	height: 350px;
	border: 0;
}

.perimetral-radio__apps {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.4rem;
	width: 160px;
}

.perimetral-radio__creditos {
	margin: 0 0 auto;
	font-size: 0.6875rem;
	line-height: 1.4;
	color: var(--wp--preset--color--gris-medio);
}

.perimetral-radio__creditos a {
	color: var(--wp--preset--color--fondo);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--rojo);
}

.perimetral-radio__creditos a:hover,
.perimetral-radio__creditos a:focus-visible {
	color: var(--wp--preset--color--rojo);
}

.perimetral-radio__app {
	display: flex;
	flex-direction: column;
	padding: 0.45rem 0.6rem;
	background: rgba(250, 250, 248, 0.08);
	border: 1px solid var(--wp--preset--color--gris-oscuro);
	border-radius: var(--perimetral-radio, 0);
	text-decoration: none;
	line-height: 1.15;
}

.perimetral-radio__app:hover,
.perimetral-radio__app:focus-visible {
	background: var(--wp--preset--color--rojo);
	border-color: var(--wp--preset--color--rojo);
}

.perimetral-radio__app-linea {
	font-size: 0.5625rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--gris-medio);
}

.perimetral-radio__app-tienda {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--fondo);
}

.perimetral-radio__app:hover .perimetral-radio__app-linea,
.perimetral-radio__app:hover .perimetral-radio__app-tienda,
.perimetral-radio__app:focus-visible .perimetral-radio__app-linea,
.perimetral-radio__app:focus-visible .perimetral-radio__app-tienda {
	color: var(--wp--preset--color--fondo);
}

/* En pantallas angostas la barra se reduce a lo esencial y el panel apila
   reproductor y tiendas, en vez de ponerlos lado a lado. */
@media (max-width: 720px) {
	.perimetral-radio__patrocinio,
	.perimetral-radio__nombre {
		display: none;
	}

	.perimetral-radio__panel {
		flex-direction: column;
		align-items: stretch;
	}

	.perimetral-radio__player {
		width: min(300px, calc(100vw - 4rem));
	}

	.perimetral-radio__apps {
		width: auto;
	}
}

/* Respeta a quien pidió menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
	.perimetral-radio__senal {
		animation: none;
	}

	.perimetral-radio__flecha {
		transition: none;
	}
}


/* -------------------------------------------------------------------------
   9 · Pie de página
   ---------------------------------------------------------------------- */

.perimetral-pie__lista {
	list-style: none;
	padding-left: 0;
}

.perimetral-pie__lista li {
	margin-bottom: 0.6rem;
}

.perimetral-pie__lista a,
.perimetral-pie__legal a {
	text-decoration: none;
}

.perimetral-pie__lista a:hover,
.perimetral-pie__lista a:focus-visible,
.perimetral-pie__legal a:hover,
.perimetral-pie__legal a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.perimetral-pie__legal {
	gap: 1rem 2rem;
	align-items: baseline;
}

/* El texto de licencia usa el ancho completo del pie para resolverse en el
   menor número de renglones posible. */
.perimetral-pie__licencia {
	flex: 1 1 100%;
	max-width: none;
	line-height: 1.55;
}


/* -------------------------------------------------------------------------
   10 · Accesibilidad
   ---------------------------------------------------------------------- */

/* Foco visible y consistente. Sobre la banda negra el contorno negro se
   perdería, así que ahí se invierte a rojo. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--negro);
	outline-offset: 2px;
}

.perimetral-hero__texto :focus-visible,
.perimetral-pie :focus-visible,
.perimetral-cabecera__servicio :focus-visible {
	outline-color: var(--wp--preset--color--rojo);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}