/* ==========================================================================
   Tema Kuschel — CSS de detalle

   Los tokens (color, tipografía, espaciado) viven en theme.json.
   Aquí va solo lo que theme.json no puede expresar: estados de componente,
   foco de teclado, tablas, formularios y comportamiento responsivo.

   Fuente de verdad visual: design.md (raíz del vault).
   Este archivo resuelve la §11 «Zona no normada — Web / landing»: introduce
   ESTRUCTURA nueva (estados, breakpoints, navegación, formularios, foco)
   sin introducir ningún color ni familia tipográfica fuera de §2 y §3.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Foco de teclado — §11, requisito explícito

   Ojo: el amarillo NO puede portar el contraste del anillo de foco.
   #F6DD00 sobre hueso da 1,20:1 (§2.3: prohibido). El anillo que contrasta
   es el marino; el amarillo va por fuera, como señal de marca.
   Esto respeta la regla de §6: el amarillo nunca porta información crítica.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--marino);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--wp--preset--color--amarillo);
	border-radius: 2px;
}

/* Sobre superficie marino se invierte: el anillo que contrasta es el blanco. */
:is(.has-marino-background-color, .has-marino-profundo-background-color) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.has-marino-titular-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--blanco);
	box-shadow: 0 0 0 6px var(--wp--preset--color--amarillo);
}

.skip-link:focus {
	background: var(--wp--preset--color--marino);
	color: var(--wp--preset--color--blanco);
	font-weight: 600;
}

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

/* --------------------------------------------------------------------------
   2. Componentes de marca (§4)
   -------------------------------------------------------------------------- */

/* §4.2 · Línea de acento — filete amarillo de 6 px bajo el titular.
   Es una FORMA, no texto: mantiene el amarillo también sobre claro.

   El filete se dibuja con un degradado en vez de estrechar el elemento.
   Motivo: el layout `constrained` de WordPress centra a sus hijos con
   márgenes automáticos. Si se fuerza `margin-left: 0`, la línea se pega al
   borde del contenedor y deja de coincidir con el borde izquierdo del texto,
   que sí está centrado. Ocupando el 100 % del ancho y pintando solo los
   primeros 96 px, la línea se alinea exactamente con el párrafo y con el
   titular, sin un solo `!important`. */
hr.wp-block-separator.is-style-linea-acento:not(.is-style-wide):not(.is-style-dots) {
	border: 0;
	height: 6px;
	width: 100%;
	background-color: transparent;
	background-image: linear-gradient(
		to right,
		var(--wp--preset--color--amarillo) 0,
		var(--wp--preset--color--amarillo) 96px,
		transparent 96px
	);
	opacity: 1;
}

/* §4.1 · Píldora de etiqueta.
   Sobre claro se invierte a marino con texto hueso (§2.2: nunca amarillo
   sobre superficie clara, y la píldora amarilla necesita fondo oscuro
   alrededor para leerse como etiqueta). */
p.is-style-pildora {
	display: inline-block;
	margin: 0;
	padding: 0.45rem 0.9rem 0.4rem;
	border-radius: 4px;
	background: var(--wp--preset--color--marino);
	color: var(--wp--preset--color--hueso);
	font-size: var(--wp--preset--font-size--etiqueta);
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

/* Sobre marino, la píldora vuelve a su forma canónica: amarillo + marino. */
:is(.has-marino-background-color, .has-marino-profundo-background-color) p.is-style-pildora,
.has-marino-titular-background-color p.is-style-pildora,
.wp-block-cover p.is-style-pildora {
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--marino);
}

/* §4.5 · Pie de pieza — @senadorkuschel · Fuente: [organismo] ([fecha]).
   En este sitio es el componente central: toda cifra publicada lo lleva. */
/* 🔴 Nivel 3 de la jerarquía de §6.1.2 de design.md: procedencia.
   Antes compartía tamaño y casi peso con el cuerpo —15 px contra 15 px—, así
   que una nota de dónde salió el dato pesaba lo mismo que la definición de un
   instrumento. Medido en la auditoría del 30-jul: 1.805 elementos en el mismo
   nivel. Ahora es el texto más pequeño y de menor contraste de la página. */
p.is-style-pie-fuente {
	margin-block-start: 1.25rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(22, 32, 74, 0.18);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.5;
	opacity: 0.62;
}

:is(.has-marino-background-color, .has-marino-profundo-background-color) p.is-style-pie-fuente {
	opacity: 0.7;
}

:is(.has-marino-background-color, .has-marino-profundo-background-color) p.is-style-pie-fuente,
.has-marino-titular-background-color p.is-style-pie-fuente {
	border-top-color: var(--wp--preset--color--marino-linea);
}

/* La categoría actúa como píldora del artículo (§4.1: etiqueta corta en
   mayúsculas). Como etiqueta no lleva subrayado en reposo. */
.wp-block-post-terms a {
	text-decoration: none;
}

.wp-block-post-terms a:hover,
.wp-block-post-terms a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* §3.3 · Bajada destacada. */
p.is-style-bajada {
	font-size: var(--wp--preset--font-size--bajada);
	font-weight: 400;
	line-height: 1.3;
}

/* §4.4 · Cifra protagonista — una sola por página. */
p.is-style-cifra,
.is-style-cifra > p {
	font-size: var(--wp--preset--font-size--cifra);
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin: 0;
}

/* --------------------------------------------------------------------------
   3. Superficie marino (§2.2 — una superficie por bloque)
   -------------------------------------------------------------------------- */

:is(.has-marino-background-color, .has-marino-profundo-background-color),
.has-marino-titular-background-color {
	color: var(--wp--preset--color--blanco);
}

:is(.has-marino-background-color, .has-marino-profundo-background-color) :is(h1, h2, h3, h4, h5, h6),
.has-marino-titular-background-color :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--blanco);
}

/* §3.3 · Cuerpo al ~85% de opacidad sobre marino, para que el titular gane
   sin cambiar de color. No se aplica a titulares, pies ni enlaces. */
:is(.has-marino-background-color, .has-marino-profundo-background-color) > p:not(.is-style-pie-fuente):not(.is-style-pildora),
.has-marino-titular-background-color > p:not(.is-style-pie-fuente):not(.is-style-pildora) {
	color: rgba(255, 255, 255, 0.85);
}

:is(.has-marino-background-color, .has-marino-profundo-background-color) a:where(:not(.wp-element-button)),
.has-marino-titular-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--blanco);
	text-decoration-color: var(--wp--preset--color--amarillo);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* El botón sobre marino se invierte para conservar contraste (15,83:1). */
:is(.has-marino-background-color, .has-marino-profundo-background-color) .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.has-marino-titular-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--blanco);
	border-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--marino);
}

:is(.has-marino-background-color, .has-marino-profundo-background-color) .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.has-marino-titular-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--wp--preset--color--amarillo);
	border-color: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--marino);
}

/* --------------------------------------------------------------------------
   4. Tablas — el formato principal de un sitio-registro

   Mociones, votaciones y oficios se leen en tabla. Sin mayúsculas en el
   encabezado: §3.3 reserva las MAYÚSCULAS para la píldora.
   -------------------------------------------------------------------------- */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table :is(th, td) {
	padding: 0.8rem 1rem;
	border: 1px solid rgba(22, 32, 74, 0.18);
	vertical-align: top;
	text-align: left;
}

.wp-block-table th {
	background: var(--wp--preset--color--marino);
	color: var(--wp--preset--color--blanco);
	font-weight: 600;
	line-height: 1.3;
}

.wp-block-table tbody tr:nth-child(even) {
	background: rgba(22, 32, 74, 0.045);
}

/* Que la tabla avise de que hay más a la derecha, en móvil. */
@media (max-width: 48rem) {
	.wp-block-table table {
		min-width: 34rem;
	}
}

/* --------------------------------------------------------------------------
   5. Formularios (§11 — no existían en el sistema)
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 2px solid rgba(22, 32, 74, 0.35);
	border-radius: 2px;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--marino-titular);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--cuerpo);
	font-weight: 500;
	line-height: 1.4;
}

input:hover,
textarea:hover,
select:hover {
	border-color: var(--wp--preset--color--marino);
}

input:disabled,
textarea:disabled,
select:disabled {
	background: rgba(22, 32, 74, 0.06);
	border-color: rgba(22, 32, 74, 0.18);
	color: rgba(22, 32, 74, 0.5);
	cursor: not-allowed;
}

input::placeholder,
textarea::placeholder {
	color: rgba(22, 32, 74, 0.55);
}

label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--pie);
}

/* El buscador de WordPress usa su propia estructura. */
.wp-block-search__input {
	border: 2px solid rgba(22, 32, 74, 0.35);
	border-radius: 2px 0 0 2px;
}

.wp-block-search__button {
	border-radius: 0 2px 2px 0;
}

/* --------------------------------------------------------------------------
   6. Cabecera y navegación (§11)
   -------------------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.3rem;
	border-bottom: 3px solid transparent;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--amarillo);
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--amarillo);
}

/* --------------------------------------------------------------------------
   7. Fotografía con velo marino (§4.7)
   Velo de legibilidad, nunca decorativo sobre color plano.
   -------------------------------------------------------------------------- */

/* El velo va en la capa que WordPress ya apila DETRÁS del contenido. Intentar
   ponerlo en un ::after del propio cover lo deja por delante del texto y lo
   apaga —probado y descartado el 29-jul—. Se fuerza la opacidad porque la
   clase `has-background-dim-0` del núcleo la anula. */
.wp-block-cover.is-style-velo-marino .wp-block-cover__background {
	opacity: 1 !important;
	background-color: transparent !important;
	/* Velo más opaco por pedido de Felipe (30-jul): lo justo para que la
	   fotografía se distinga sin competir con el titular. */
	background-image: linear-gradient(
		to top,
		rgba(14, 30, 82, 0.95) 0%,
		rgba(14, 30, 82, 0.88) 45%,
		rgba(14, 30, 82, 0.8) 100%
	) !important;
}

/* La foto se aclara un punto para que el velo no la apague del todo */
.wp-block-cover.is-style-velo-marino .wp-block-cover__image-background {
	filter: saturate(0.9) contrast(1.05);
}

/* --------------------------------------------------------------------------
   8. Ritmo del contenido (§5.4 — escala relativa al margen base)
   -------------------------------------------------------------------------- */

.wp-block-post-content > * + * {
	margin-block-start: 1.5rem;
}

.wp-block-post-content > h2 {
	margin-block-start: 4rem;
}

.wp-block-post-content > h3 {
	margin-block-start: 2.5rem;
}

.wp-block-post-content > .wp-block-separator.is-style-linea-acento {
	margin-block: 3rem;
}

/* El ancho de lectura lo fija el layout `constrained` de cada plantilla
   (contentSize), no un max-width por bloque: un max-width aquí obliga al
   navegador a recentrar el párrafo y desalinea su borde izquierdo respecto
   de los títulos y las tablas. */

/* --------------------------------------------------------------------------
   9. Impresión — un sitio-registro se imprime y se cita
   -------------------------------------------------------------------------- */

@media print {
	.wp-block-template-part[class*="header"],
	.wp-block-navigation,
	.wp-block-search,
	.wp-block-post-navigation-link {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 11pt;
	}

	:is(.has-marino-background-color, .has-marino-profundo-background-color),
	.has-marino-titular-background-color {
		background: #fff !important;
		color: #000 !important;
	}

	:is(.has-marino-background-color, .has-marino-profundo-background-color) :is(h1, h2, h3, h4, h5, h6),
	.has-marino-titular-background-color :is(h1, h2, h3, h4, h5, h6) {
		color: #000 !important;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}

/* --------------------------------------------------------------------------
   10. Pestañas por legislatura (§11 — componente nuevo del soporte web)

   Sin JavaScript todos los paneles quedan visibles: el registro completo
   sigue siendo legible e indexable aunque el script no cargue.
   -------------------------------------------------------------------------- */

.kuschel-pestanas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 0;
	border-bottom: 2px solid rgba(22, 32, 74, 0.18);
}

.kuschel-pestanas__boton {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.7rem 1.1rem 0.6rem;
	border: 0;
	border-bottom: 4px solid transparent;
	margin-bottom: -2px;
	background: transparent;
	color: var(--wp--preset--color--marino-titular);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--pie);
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

.kuschel-pestanas__boton:hover {
	background: rgba(22, 32, 74, 0.05);
}

.kuschel-pestanas__boton[aria-selected="true"] {
	border-bottom-color: var(--wp--preset--color--amarillo);
	background: rgba(22, 32, 74, 0.05);
}

.kuschel-pestanas__numero {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.kuschel-pestanas__anios {
	font-weight: 600;
	opacity: 0.75;
}

.kuschel-pestanas__cuenta {
	margin-top: 0.15rem;
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.55;
}

.kuschel-pestanas__cuenta::after {
	content: " registros";
	font-weight: 600;
}

.kuschel-pestanas__panel {
	padding-top: 2rem;
}

.kuschel-pestanas__panel[hidden] {
	display: none;
}

.kuschel-pestanas__titulo {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--titulo-3);
	font-weight: 600;
}

.kuschel-pestanas__titulo span {
	display: block;
	font-size: var(--wp--preset--font-size--pie);
	font-weight: 600;
	opacity: 0.7;
}

.kuschel-vacio {
	padding: 2rem;
	background: rgba(22, 32, 74, 0.04);
	font-weight: 600;
}

/* Tabla del registro: misma gramática que la tabla del editor */
.kuschel-tabla-envoltorio {
	overflow-x: auto;
}

.kuschel-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--pie);
}

.kuschel-tabla :is(th, td) {
	padding: 0.8rem 1rem;
	border: 1px solid rgba(22, 32, 74, 0.18);
	vertical-align: top;
	text-align: left;
}

.kuschel-tabla th {
	background: var(--wp--preset--color--marino);
	color: var(--wp--preset--color--blanco);
	font-weight: 600;
	line-height: 1.3;
	position: sticky;
	top: 0;
}

.kuschel-tabla tbody tr:nth-child(even) {
	background: rgba(22, 32, 74, 0.045);
}

.kuschel-tabla td:first-child {
	white-space: nowrap;
	font-weight: 700;
}

/* En móvil la tabla se convierte en fichas apiladas: una tabla de cinco
   columnas es ilegible en 360 px, y el 24 % de la audiencia entra por
   teléfono. Cada celda muestra su rótulo desde `data-rotulo`. */
@media (max-width: 48rem) {
	.kuschel-tabla thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.kuschel-tabla,
	.kuschel-tabla tbody,
	.kuschel-tabla tr,
	.kuschel-tabla td {
		display: block;
		width: 100%;
	}

	.kuschel-tabla tr {
		margin-bottom: 1.25rem;
		border: 2px solid rgba(22, 32, 74, 0.18);
	}

	.kuschel-tabla td {
		border: 0;
		border-bottom: 1px solid rgba(22, 32, 74, 0.12);
		padding: 0.6rem 0.9rem;
	}

	.kuschel-tabla td::before {
		content: attr(data-rotulo);
		display: block;
		margin-bottom: 0.15rem;
		font-size: 0.75rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		opacity: 0.65;
	}

	.kuschel-pestanas__boton {
		flex: 1 1 auto;
	}
}

/* --------------------------------------------------------------------------
   11. Accesos con ícono («Dónde buscar») — tarjetas de altura idéntica

   `grid-auto-rows: 1fr` iguala las filas y el `<a>` en columna empuja el pie
   al fondo, así que todas las tarjetas miden lo mismo aunque su texto no.
   -------------------------------------------------------------------------- */

.kuschel-accesos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
	grid-auto-rows: 1fr;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kuschel-accesos > li {
	display: flex;
}

.kuschel-acceso {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	padding: 1.75rem 1.75rem 1.5rem;
	border: 1px solid rgba(22, 32, 74, 0.1);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.45s var(--k-ease), border-color 0.45s var(--k-ease),
		background-color 0.45s var(--k-ease), box-shadow 0.45s var(--k-ease);
}

/* El filete amarillo aparece al pasar, en vez de estar siempre encendido:
   el acento se gana con la interacción y no compite en reposo. */
.kuschel-acceso::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--wp--preset--color--amarillo);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.45s var(--k-ease);
}

.kuschel-acceso:hover,
.kuschel-acceso:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(22, 32, 74, 0.2);
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 18px 40px -22px rgba(14, 30, 82, 0.45);
}

.kuschel-acceso:hover::before,
.kuschel-acceso:focus-visible::before {
	transform: scaleY(1);
}

.kuschel-acceso__icono {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: 1px solid rgba(22, 32, 74, 0.14);
	background: rgba(14, 30, 82, 0.04);
	color: var(--wp--preset--color--marino);
	transition: transform 0.45s var(--k-ease), background-color 0.45s var(--k-ease);
}

.kuschel-acceso__icono svg {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

.kuschel-acceso:hover .kuschel-acceso__icono {
	transform: scale(1.06);
	background: rgba(246, 221, 0, 0.22);
}

.kuschel-acceso__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.kuschel-acceso__titulo {
	display: block;
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.kuschel-acceso__texto {
	display: block;
	margin: 0;
	font-size: var(--wp--preset--font-size--pie);
	font-weight: 400;
	line-height: 1.55;
	opacity: 0.78;
}

/* Remate: una flecha sola queda huérfana, así que va con su etiqueta. El
   `margin-top: auto` la ancla al pie de la tarjeta, que es lo que iguala el
   remate en las seis pese a que los textos tengan largos distintos. */
.kuschel-acceso__ir {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	align-self: flex-start;
	margin-top: auto;
	padding-top: 1.1rem;
	font-size: var(--wp--preset--font-size--pie);
	font-weight: 600;
	letter-spacing: -0.005em;
	opacity: 0.72;
	transition: opacity 0.45s var(--k-ease);
}

.kuschel-acceso__ir span {
	display: inline-block;
	transform: translateX(0);
	transition: transform 0.45s var(--k-ease);
}

.kuschel-acceso:hover .kuschel-acceso__ir,
.kuschel-acceso:focus-visible .kuschel-acceso__ir {
	opacity: 1;
}

.kuschel-acceso:hover .kuschel-acceso__ir span,
.kuschel-acceso:focus-visible .kuschel-acceso__ir span {
	transform: translateX(5px);
}

/* Sobre superficie marino, el vidrio se oscurece */
:is(.has-marino-background-color, .has-marino-profundo-background-color) .kuschel-acceso {
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--blanco);
}

:is(.has-marino-background-color, .has-marino-profundo-background-color) .kuschel-acceso:hover {
	border-color: rgba(246, 221, 0, 0.4);
	background: rgba(255, 255, 255, 0.11);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.55);
}

:is(.has-marino-background-color, .has-marino-profundo-background-color) .kuschel-acceso__icono {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.07);
	color: var(--wp--preset--color--amarillo);
}

/* --------------------------------------------------------------------------
   12. Esquema territorial por provincias

   No es cartografía: es un diagrama norte–sur. Ver el comentario del script.
   -------------------------------------------------------------------------- */

.kuschel-territorio {
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

.kuschel-territorio__columna {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.kuschel-provincia {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	width: 100%;
	padding: 1rem 1.1rem;
	border: 0;
	border-left: 6px solid rgba(22, 32, 74, 0.2);
	background: rgba(22, 32, 74, 0.04);
	color: var(--wp--preset--color--marino-titular);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--cuerpo);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.kuschel-provincia:hover,
.kuschel-provincia.is-activa {
	border-left-color: var(--wp--preset--color--amarillo);
	background: var(--wp--preset--color--marino);
	color: var(--wp--preset--color--blanco);
}

.kuschel-provincia__n {
	font-size: var(--wp--preset--font-size--pie);
	font-weight: 600;
	opacity: 0.75;
}

.kuschel-ficha[hidden] {
	display: none;
}

.kuschel-ficha {
	padding: 1.75rem;
	background: var(--wp--preset--color--marino);
	color: var(--wp--preset--color--blanco);
}

.kuschel-ficha h3 {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--titulo-3);
	font-weight: 600;
}

.kuschel-ficha__linea {
	width: 96px;
	height: 6px;
	margin: 0.75rem 0 1.25rem;
	background: var(--wp--preset--color--amarillo);
}

.kuschel-ficha p {
	color: rgba(255, 255, 255, 0.9);
}

.kuschel-ficha dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 1rem;
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--pie);
}

.kuschel-ficha dt {
	font-weight: 600;
	color: var(--wp--preset--color--amarillo);
}

.kuschel-ficha dd {
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 48rem) {
	.kuschel-territorio {
		grid-template-columns: 1fr;
	}
}

/* Texto solo para lectores de pantalla */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. Actividad legislativa reciente (portada)
   -------------------------------------------------------------------------- */

.kuschel-actividad {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1px;
	background: rgba(22, 32, 74, 0.15);
	border: 1px solid rgba(22, 32, 74, 0.15);
}

.kuschel-actividad__item {
	display: grid;
	grid-template-columns: 12rem 1fr auto;
	gap: 1.25rem;
	align-items: baseline;
	padding: 1.1rem 1.25rem;
	background: var(--wp--preset--color--hueso);
}

.kuschel-actividad__meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.kuschel-actividad__tipo {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.kuschel-actividad__fecha {
	font-size: var(--wp--preset--font-size--pie);
	font-weight: 600;
	opacity: 0.7;
}

.kuschel-actividad__texto {
	font-size: var(--wp--preset--font-size--pie);
	line-height: 1.5;
}

.kuschel-actividad__enlace {
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--pie);
	font-weight: 800;
}

@media (max-width: 48rem) {
	.kuschel-actividad__item {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.kuschel-actividad__meta {
		flex-direction: row;
		gap: 0.75rem;
	}
}

/* ==========================================================================
   14. CAPA ESTÉTICA — decisión de Felipe del 29-jul-2026

   🔴 Esta sección se aparta de design.md a propósito y con autorización:
   §6 prohíbe blur, elevación y glassmorphism, y §3.2 fija los titulares en
   peso 800–900. Aquí se usan vidrio, sombra suave y pesos 600.

   Lo que NO cambia, y sigue siendo intocable: la paleta de §2 (ni un color
   nuevo), Montserrat como única familia, el amarillo como acento escaso que
   nunca porta información crítica, y el pie con fuente y fecha.

   Criterio para no caer en la estética que §8 prohíbe: el vidrio se usa
   sobre fotografía o sobre superficie de marca, nunca como decoración; no
   hay degradados multicolor, ni glow, ni reflejos; y todo el movimiento se
   apaga con `prefers-reduced-motion`.
   ========================================================================== */

:root {
	/* Una sola curva de easing para todo el sitio: la consistencia del
	   movimiento es lo que se lee como «cuidado», más que su cantidad. */
	--k-ease: cubic-bezier(0.22, 1, 0.36, 1);
	/* Curva de salida larga (easeOutExpo). Arranca rápido y frena durante
	   mucho rato: es lo que hace que un panel grande se sienta guiado en vez
	   de disparado. Se reserva para desplazamientos de superficies enteras. */
	--k-ease-suave: cubic-bezier(0.16, 1, 0.3, 1);
	--k-vidrio-claro: rgba(255, 255, 255, 0.55);
	--k-vidrio-marino: rgba(14, 30, 82, 0.72);
}

/* --------------------------------------------------------------------------
   14.1 Cabecera de vidrio, adherida al scroll
   -------------------------------------------------------------------------- */

body {
	/* El filete amarillo del borde superior deja de ser un bloque y pasa a
	   ser una línea fija: menos ruido, misma señal de marca. */
	border-top: 4px solid var(--wp--preset--color--amarillo);
}

.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background-color 0.5s var(--k-ease), box-shadow 0.5s var(--k-ease);
}

/* 🔴 El vidrio va en un `::before`, NO en el elemento.
   `backdrop-filter` convierte a su elemento en bloque contenedor de todo
   descendiente `position: fixed`. Con el filtro puesto acá, el panel móvil
   —que es `fixed` y cubre la pantalla— quedaba atrapado dentro de la
   cabecera: 23 rem de ancho, 108 px de alto, arriba a la izquierda y con un
   solo enlace visible. Comprobado en pantalla el 30-jul-2026.
   El pseudo-elemento no tiene descendientes, así que puede llevar el filtro
   sin atrapar a nadie. */
.wp-site-blocks > header > :is(.has-marino-background-color, .has-marino-profundo-background-color) {
	position: relative;
	background-color: transparent !important;
	transition: padding 0.5s var(--k-ease);
}

/* 🔴 SÓLIDO Y EN `marino`, POR DECISIÓN DE FELIPE (31-jul-2026).
   Antes era `marino-profundo` con vidrio esmerilado. Se revirtió a las dos
   cosas: el azul original de la marca y sin transparencia al desplazarse.
   Con el fondo sólido el `backdrop-filter` sobra —no hay nada que desenfocar
   detrás—, y quitarlo elimina de paso su coste de composición en páginas
   largas como la de oficios.
   ⚠️ El pie y el panel móvil se mantienen en `marino-profundo`: el encargo
   fue solo para la cabecera. */
.wp-site-blocks > header > :is(.has-marino-background-color, .has-marino-profundo-background-color)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--wp--preset--color--marino);
	transition: box-shadow 0.45s var(--k-ease);
}

/* Al bajar, la cabecera se comprime y se opaca un poco más */
/* --------------------------------------------------------------------------
   Compresión al desplazarse: −20 % de altura, logo incluido

   Encargo de Felipe: «al desplazarse, que reduzca su altura en un 20 %
   (incluido el logo) y anima la transición».

   🔴 Una sola variable manda sobre todo lo que encoge. Si el relleno y el logo
   se redujeran por separado, cualquier ajuste futuro de uno descuadraría la
   proporción del otro y la cabecera comprimida dejaría de verse como la misma
   cabecera más pequeña.

   La altura NO se anima directamente: se animan el relleno y la altura del
   logo, que es lo que la determina. Animar `height` sobre `auto` no funciona.
   -------------------------------------------------------------------------- */

.wp-site-blocks > header > :is(.has-marino-background-color, .has-marino-profundo-background-color) {
	--k-cab-escala: 1;
	padding-top: calc(1rem * var(--k-cab-escala)) !important;
	padding-bottom: calc(1rem * var(--k-cab-escala)) !important;
	transition: padding 0.4s var(--k-ease-suave);
}

body.k-scroll .wp-site-blocks > header > :is(.has-marino-background-color, .has-marino-profundo-background-color) {
	--k-cab-escala: 0.8;
}

body.k-scroll .wp-site-blocks > header > :is(.has-marino-background-color, .has-marino-profundo-background-color)::before {
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.55);
}

/* El logo encoge con la misma escala. `width: auto` mantiene la proporción:
   se fija la altura y el ancho la sigue. */
.wp-site-blocks > header .wp-block-site-logo img {
	height: calc(4.15rem * var(--k-cab-escala, 1));
	width: auto !important;
	max-width: none;
	transition: height 0.4s var(--k-ease-suave);
}

body.k-scroll .wp-site-blocks > header .wp-block-site-logo {
	--k-cab-escala: 0.8;
}

/* La bajada se retiró de la cabecera el 31-jul-2026 (el logo ya dice quién
   es). Con ella se fueron sus reglas de ocultamiento al bajar. */

/* La franja amarilla suelta del header sobra ahora que el borde la reemplaza */
.wp-site-blocks > header .has-amarillo-background-color {
	display: none;
}

/* --------------------------------------------------------------------------
   14.1 bis · `marino-profundo`, el azul de la estructura (31-jul-2026)

   Encargo de Felipe: «define un azul más oscuro para cabecera, menú y pie…
   actualmente se ve demasiado plano».

   El diagnóstico era exacto: cabecera, pie y los bloques azules del contenido
   compartían el mismo `marino`, así que **la estructura del sitio no se
   distinguía de lo que el sitio dice**. Un pie y un titular de sección se
   leían como la misma superficie.

   `marino-profundo` `#0A1438` se eligió midiendo, no a ojo:

   · Claridad L* 7,7 frente a los 13,4 de `marino`, con **ΔE 11,4** — el umbral
     de «superficie distinta» sin salir de la familia empieza cerca de 8.
   · Conserva la proporción de canales del marino, así que sigue siendo el
     mismo azul marca y no vira a negro ni a violeta.
   · El blanco encima **mejora** de 15,83:1 a 18,0:1.

   🔴 Los `rgba(14, 30, 82, …)` que quedan en esta hoja son del CONTENIDO —velo
   del hero, sombras—, y se dejan a propósito: si la estructura y el contenido
   volvieran a compartir azul, este cambio no habría servido de nada.

   ⚠️ Las reglas de «texto sobre azul» estaban atadas a la clase
   `.has-marino-background-color`. En vez de duplicar veinticuatro selectores
   se envolvieron en `:is(…, .has-marino-profundo-background-color)`, que no
   altera la especificidad porque ambos son de una sola clase.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   14.2 Parallax de fotografía

   El fondo se desplaza más lento que el scroll. Se mueve con `transform`
   sobre una capa propia para no forzar repintados de layout.
   -------------------------------------------------------------------------- */

.wp-block-cover.k-parallax {
	overflow: hidden;
	isolation: isolate;
}

.wp-block-cover.k-parallax .wp-block-cover__image-background {
	will-change: transform;
	transform: translate3d(0, var(--k-desfase, 0), 0) scale(1.12);
	transition: none;
}

/* --------------------------------------------------------------------------
   14.3 Revelado al entrar en pantalla

   Sin JavaScript nada se oculta: la clase de partida solo se aplica si el
   script corre (`body.k-anim`), así que el contenido nunca queda invisible.
   -------------------------------------------------------------------------- */

body.k-anim [data-k-revelar] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--k-ease), transform 0.7s var(--k-ease);
	transition-delay: var(--k-retraso, 0ms);
}

body.k-anim [data-k-revelar].k-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   14.4 Micro-interacciones
   -------------------------------------------------------------------------- */

.wp-block-button__link {
	border-radius: 999px !important;
	transition: transform 0.35s var(--k-ease), background-color 0.35s var(--k-ease),
		border-color 0.35s var(--k-ease), box-shadow 0.35s var(--k-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -18px rgba(14, 30, 82, 0.7);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* Enlaces de cuerpo: el subrayado crece en vez de aparecer de golpe */
.wp-block-post-content a:where(:not(.wp-element-button)),
.kuschel-actividad__enlace {
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: text-decoration-color 0.35s var(--k-ease),
		text-decoration-thickness 0.35s var(--k-ease), opacity 0.35s var(--k-ease);
}

.wp-block-post-content a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--amarillo);
}

/* Navegación: el filete crece desde el centro */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	border-bottom: 0 !important;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--wp--preset--color--amarillo);
	transform: scaleX(0);
	transition: transform 0.4s var(--k-ease);
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Filas de actividad y de tabla: realce sobrio al pasar */
.kuschel-actividad__item,
.kuschel-tabla tbody tr {
	transition: background-color 0.3s var(--k-ease);
}

.kuschel-actividad__item:hover,
.kuschel-tabla tbody tr:hover {
	background: rgba(246, 221, 0, 0.09);
}

/* --------------------------------------------------------------------------
   14.5 Pestañas del registro: barra de vidrio adherida
   -------------------------------------------------------------------------- */

.kuschel-pestanas__lista {
	position: sticky;
	top: 5.5rem;
	z-index: 20;
	padding: 0.35rem 0.35rem 0;
	border: 1px solid rgba(22, 32, 74, 0.1);
	border-radius: 14px 14px 0 0;
	background: rgba(243, 239, 230, 0.82);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
}

.kuschel-pestanas__boton {
	border-radius: 10px 10px 0 0;
	transition: background-color 0.35s var(--k-ease), color 0.35s var(--k-ease),
		border-color 0.35s var(--k-ease);
}

/* --------------------------------------------------------------------------
   14.6 Fichas del territorio y avisos: mismo lenguaje de vidrio
   -------------------------------------------------------------------------- */

.kuschel-provincia {
	border-radius: 0 12px 12px 0;
	transition: background-color 0.4s var(--k-ease), color 0.4s var(--k-ease),
		border-color 0.4s var(--k-ease), transform 0.4s var(--k-ease);
}

.kuschel-provincia:hover {
	transform: translateX(3px);
}

.kuschel-ficha {
	border-radius: 16px;
	background: var(--k-vidrio-marino);
	-webkit-backdrop-filter: blur(16px) saturate(170%);
	backdrop-filter: blur(16px) saturate(170%);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.kuschel-vacio {
	border-radius: 12px;
}

.kuschel-tabla-envoltorio {
	border-radius: 0 0 14px 14px;
}

/* --------------------------------------------------------------------------
   14.7 Si el sistema pide menos movimiento, se apaga todo
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.k-parallax .wp-block-cover__image-background {
		transform: none !important;
	}

	body.k-anim [data-k-revelar] {
		opacity: 1 !important;
		transform: none !important;
	}

	.wp-block-button__link:hover,
	.kuschel-acceso:hover,
	.kuschel-provincia:hover {
		transform: none !important;
	}
}

/* Sin soporte de backdrop-filter, el vidrio cae a un sólido legible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.kuschel-acceso {
		background: rgba(255, 255, 255, 0.92);
	}

	.wp-site-blocks > header > :is(.has-marino-background-color, .has-marino-profundo-background-color)::before,
	.kuschel-ficha {
		background-color: var(--wp--preset--color--marino) !important;
	}

	.kuschel-pestanas__lista {
		background: var(--wp--preset--color--hueso);
	}
}

/* --------------------------------------------------------------------------
   14.8 Correcciones sobre fotografía (verificadas en pantalla el 29-jul)
   -------------------------------------------------------------------------- */

/* Dentro de una portada el fondo es marino, así que el botón sólido tiene que
   invertirse igual que sobre superficie marino: en su color de marca queda
   azul sobre azul y desaparece. */
.wp-block-cover .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--blanco);
	border-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--marino);
}

.wp-block-cover .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--wp--preset--color--amarillo);
	border-color: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--marino);
}

.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--wp--preset--color--blanco);
}

.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--amarillo);
}

/* El `blockGap` del contenedor raíz dejaba una franja hueso de 24 px entre la
   cabecera adherida y la portada. La portada abre la página: va pegada. */
.wp-site-blocks > header + .wp-block-cover,
.wp-site-blocks > header + main > .wp-block-cover:first-child,
.wp-site-blocks > main > .wp-block-cover:first-child {
	margin-block-start: 0;
}

.wp-site-blocks > main:first-of-type {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   14.9 La navegación no lleva vidrio propio
   --------------------------------------------------------------------------
   WordPress copia las clases de fondo del bloque de navegación al contenedor
   del menú móvil (`__responsive-container`). Con un selector descendiente ese
   contenedor recibía el marino translúcido de la cabecera y dibujaba un
   rectángulo visible sobre ella —verificado en pantalla el 29-jul—. El vidrio
   va una sola vez, en el grupo de la cabecera. */
.wp-site-blocks > header .wp-block-navigation__responsive-container:not(.is-menu-open) {
	background-color: transparent !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   14.10 Anclas bajo cabecera adherida
   --------------------------------------------------------------------------
   Con la cabecera fija, cualquier salto a un ancla dejaba el titular tapado.
   `scroll-margin-top` reserva su altura sin tocar el layout. */
:where(h1, h2, h3, [id]) {
	scroll-margin-top: 7.5rem;
}

/* La cabecera compone su vidrio en una capa propia. Sin esto, el blur puede
   muestrear de forma desigual el fondo y dejar un corte visible a media
   cabecera —visto en captura el 29-jul—. */
.wp-site-blocks > header > :is(.has-marino-background-color, .has-marino-profundo-background-color) {
	isolation: isolate;
}

/* ==========================================================================
   15. NAVEGACIÓN — escritorio y panel móvil (30-jul-2026)

   El menú de bloques de WordPress trae dos problemas de origen:
   el desplegable es una lista desnuda pegada al enlace, y en móvil abre un
   modal a pantalla completa sin jerarquía ni área de toque suficiente.
   Esta sección resuelve los dos. Nada aquí depende de JavaScript propio: el
   comportamiento de abrir y cerrar es el del bloque; solo cambia su forma.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15.1 Escritorio — desplegable de «Registro» como panel
   -------------------------------------------------------------------------- */

.wp-site-blocks > header .wp-block-navigation {
	--k-nav-panel: rgba(10, 20, 56, 0.96);
}

.wp-site-blocks > header .wp-block-navigation__container > .wp-block-navigation-item {
	position: relative;
}

/* El indicador de submenú es una flecha, y gira al abrirse: dice qué va a
   pasar antes de que pase. */
.wp-site-blocks > header .wp-block-navigation__submenu-icon {
	transition: transform 0.35s var(--k-ease);
}

.wp-site-blocks
	> header
	.wp-block-navigation-item:hover
	> .wp-block-navigation-item__content
	.wp-block-navigation__submenu-icon,
.wp-site-blocks
	> header
	.wp-block-navigation-item
	> .wp-block-navigation-item__content[aria-expanded="true"]
	.wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
}

@media (min-width: 782px) {
	/* 🔴 La regla del núcleo para el submenú tiene la MISMA especificidad que
	   una del tema (tres clases) y su hoja se imprime después, así que ganaba
	   en `min-width`, `border-top` y `background-color` mientras el `padding`
	   y el `border-radius` —que el núcleo no declara— sí se aplicaban. El
	   resultado era un panel de 200 px con borde gris en vez de 280 con filete
	   amarillo. Medido el 30-jul. Se sube la especificidad a cinco clases. */
	.wp-site-blocks
		> header
		.wp-block-navigation
		.has-child
		> .wp-block-navigation__submenu-container {
		/* `min-width` siguió perdiendo incluso con cinco clases: hay otra regla
		   del núcleo declarándolo más abajo. Con `!important` y explicado. */
		min-width: 17.5rem !important;
		padding: 0.5rem;
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-top: 3px solid var(--wp--preset--color--amarillo);
		border-radius: 0 0 12px 12px;
		background-color: var(--k-nav-panel) !important;
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		backdrop-filter: blur(20px) saturate(180%);
		box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.75);
		/* El panel se abre desde arriba, no aparece de golpe. */
		transform: translateY(-6px);
		opacity: 0;
		transition: opacity 0.28s var(--k-ease), transform 0.28s var(--k-ease);
	}

	.wp-site-blocks
		> header
		.wp-block-navigation-item:hover
		> .wp-block-navigation__submenu-container,
	.wp-site-blocks
		> header
		.wp-block-navigation-item:focus-within
		> .wp-block-navigation__submenu-container,
	.wp-site-blocks
		> header
		.wp-block-navigation__submenu-container:has(:focus-visible) {
		transform: translateY(0);
		opacity: 1;
	}

	.wp-site-blocks
		> header
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content {
		display: block;
		padding: 0.7rem 0.9rem;
		border-radius: 8px;
		font-size: var(--wp--preset--font-size--pie);
		line-height: 1.3;
		transition: background-color 0.25s var(--k-ease),
			padding-left 0.25s var(--k-ease);
	}

	/* Dentro del panel el subrayado que crece sobra: aquí la señal es el
	   fondo y el desplazamiento. */
	.wp-site-blocks
		> header
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content::after {
		display: none;
	}

	.wp-site-blocks
		> header
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content:hover,
	.wp-site-blocks
		> header
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content:focus-visible {
		padding-left: 1.15rem;
		background-color: rgba(255, 255, 255, 0.1);
	}

	.wp-site-blocks
		> header
		.wp-block-navigation__submenu-container
		.current-menu-item
		> .wp-block-navigation-item__content {
		background-color: rgba(246, 221, 0, 0.14);
		box-shadow: inset 3px 0 0 var(--wp--preset--color--amarillo);
	}
}

/* --------------------------------------------------------------------------
   15.2 Móvil — panel lateral en vez de modal a pantalla completa

   Decisión de Felipe (30-jul): panel deslizante desde la derecha. El modal de
   WordPress ocupa la pantalla completa y deja los enlaces flotando sin
   jerarquía; el panel conserva el contexto de la página detrás y permite
   indentar el registro bajo «Registro».

   🔴 DOS TRAMPAS DEL MARCADO DEL NÚCLEO, las dos comprobadas en pantalla:

   1. El panel es `__responsive-close`, NO `__responsive-dialog`. El núcleo
      anida contenedor > close > dialog > (botón + contenido), y le da al
      `close` un `max-width` con `margin: 0 auto`. Estilando el `dialog`, el
      `justify-content: flex-end` del contenedor no hacía nada: el panel
      quedaba centrado.
   2. La clase de alineación del bloque (`items-justified-right`, que en
      escritorio pega el menú a la derecha) sigue puesta dentro del panel y
      alineaba todos los enlaces al borde derecho. Hay que anularla.
   -------------------------------------------------------------------------- */

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	/* Área de toque de 48 px: es el mínimo de la guía de accesibilidad y el
	   botón de WordPress mide 24. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	transition: background-color 0.25s var(--k-ease);
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

.wp-block-navigation__responsive-container.is-menu-open {
	display: flex;
	/* 🔴 El núcleo lo pone en `column`, así que `justify-content: flex-end`
	   empujaba el panel hacia ABAJO y no hacia la derecha —medido el 30-jul:
	   el panel quedaba en x=0—. En un panel lateral el eje principal es
	   horizontal. */
	flex-direction: row !important;
	align-items: stretch;
	justify-content: flex-end;
	padding: 0 !important;
	background-color: rgba(6, 14, 40, 0.62) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: k-velo 0.45s var(--k-ease-suave) both;
}

@keyframes k-velo {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* El panel propiamente dicho. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close {
	display: flex;
	flex-direction: column;
	width: min(88vw, 23rem);
	max-width: none;
	margin: 0;
	/* Mismo vidrio que la cabecera comprimida, para que el panel se lea como
	   una prolongación de ella y no como una capa ajena. El desenfoque puede
	   ir acá sin riesgo: este panel no tiene descendientes `position: fixed`,
	   que es lo que obligó a mover el de la cabecera a un `::before`. */
	background-color: rgba(10, 20, 56, 0.86);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	/* Filete claro en vez del amarillo de 4 px: el acento amarillo está
	   reservado a superficies breves (design.md §2), y una barra a toda la
	   altura del panel competía con el menú en vez de enmarcarlo. */
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: -30px 0 70px -30px rgba(0, 0, 0, 0.8);
	animation: k-panel 0.52s var(--k-ease-suave) both;
}

@keyframes k-panel {
	from {
		opacity: 0;
		transform: translateX(100%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 1rem 1.5rem 2.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: transparent;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	position: static;
	align-self: flex-end;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--blanco);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	justify-content: flex-start !important;
	width: 100%;
}

/* Anula `items-justified-right` heredado del menú de escritorio. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	align-items: stretch !important;
	justify-content: flex-start !important;
	width: 100%;
	gap: 0;
}

/* `items-justified-right` deja `align-items: flex-end` en cada `li`, y eso
   pegaba cada enlace al borde derecho del panel. Gana el núcleo por
   especificidad, así que aquí hace falta `!important`. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	align-items: stretch !important;
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 48px;
	padding: 0.25rem 0;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: left;
}

/* El subrayado que crece es un gesto de puntero; en táctil no aporta. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content::after {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open
	.current-menu-item
	> .wp-block-navigation-item__content {
	color: var(--wp--preset--color--amarillo);
}

/* El submenú va siempre desplegado e indentado: en un panel no hay razón para
   esconder tres enlaces detrás de otro toque. `width: auto` y los `left/right`
   anulados evitan que se salga del panel por la izquierda. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	position: static !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 0 0.5rem !important;
	padding: 0 0 0 0.9rem !important;
	border: 0 !important;
	/* Filete claro, no amarillo: agrupa los hijos bajo su padre sin gritar.
	   Es el mismo criterio del borde del panel (31-jul-2026). */
	border-left: 2px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item {
	border-bottom: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	min-height: 44px;
	padding-left: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	opacity: 0.88;
	background-color: transparent !important;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-icon {
	display: none;
}

/* En móvil la cabecera se compacta: el título en dos líneas y la bajada más
   chica dejan sitio al botón del menú. */
@media (max-width: 781px) {
	.wp-site-blocks > header > :is(.has-marino-background-color, .has-marino-profundo-background-color) {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}

	.wp-site-blocks > header .wp-block-site-title {
		font-size: 1.25rem;
		line-height: 1.15;
	}

	.wp-site-blocks > header .wp-block-site-tagline {
		font-size: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-close {
		animation: none;
	}

	.wp-site-blocks > header .wp-block-navigation__submenu-container {
		transition: none;
	}
}

/* ==========================================================================
   16. Redes sociales en el pie (30-jul-2026)

   Sustituyen al menú del sitio repetido en el pie. Un menú duplicado no aporta
   nada —los mismos seis enlaces están arriba, adheridos— y las métricas dicen
   que la audiencia de este senador vive en Facebook.

   Solo el ícono, sin botón ni texto (decisión de Felipe). El nombre de la red
   viaja en `aria-label` y en `title`, no en el marcado visible: un ícono sin
   nombre accesible se anuncia como «enlace» y nada más.

   El área de toque sigue siendo de 44 px aunque el ícono mida 22: el ícono es
   lo que se ve, no lo que se toca.
   ========================================================================== */

.kuschel-redes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kuschel-red {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 8px;
	color: var(--wp--preset--color--blanco);
	text-decoration: none;
	background: transparent;
	opacity: 0.8;
	transition: transform 0.35s var(--k-ease), color 0.35s var(--k-ease),
		opacity 0.35s var(--k-ease);
}

.kuschel-red svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.kuschel-red:hover,
.kuschel-red:focus-visible {
	transform: translateY(-2px);
	color: var(--wp--preset--color--amarillo);
	opacity: 1;
	background: transparent;
}

/* El primero se alinea con el texto de la columna, sin el relleno del botón. */
.kuschel-redes > li:first-child .kuschel-red {
	margin-left: -11px;
}

/* --------------------------------------------------------------------------
   16.1 Copyright del pie

   Reemplaza a la nota de procedencia de los datos, que Felipe retiró del pie.
   ⚠️ La procedencia sigue declarada pieza por pieza: cada tabla del registro
   lleva su fuente y su fecha de verificación, y las páginas usan el estilo
   «Pie de fuente». Si alguna vez se quitan esas, el sitio pierde lo único que
   lo hace verificable.
   -------------------------------------------------------------------------- */

.kuschel-copyright {
	margin: 0;
	font-size: var(--wp--preset--font-size--pie);
	font-weight: 500;
	color: var(--wp--preset--color--blanco);
	opacity: 0.7;
}

/* ==========================================================================
   17. Hero: nitidez creciente hacia abajo (30-jul-2026)

   Pedido de Felipe: la portada más borrosa hacia la parte superior.

   🔴 DESCARTADO: `backdrop-filter` con `mask-image`. Chromium **no recorta el
   backdrop-filter con la máscara** —probado el 30-jul con un corte duro al
   30 %: el desenfoque salió parejo en toda la foto—. El backdrop solo lo
   recorta la caja del elemento (`overflow`, `clip-path`, `border-radius`).

   LO QUE SÍ FUNCIONA: desenfocar la fotografía entera con `filter` y montar
   encima una segunda copia nítida con `mask-image`. La máscara sí recorta el
   pintado normal de un elemento. La copia la inserta el tema en PHP
   (`kuschel_hero_copia_nitida`), no el editor: así el degradado no depende de
   que nadie olvide duplicar un bloque.

   La misma URL, así que el navegador no descarga la imagen dos veces.
   ========================================================================== */

.wp-block-cover.is-style-velo-marino .wp-block-cover__image-background {
	filter: saturate(0.9) contrast(1.05) blur(7px);
}

.kuschel-hero-nitido {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
	/* Nítida abajo, se disuelve hacia arriba en la versión desenfocada. */
	/* 20 px de desenfoque en la franja alta se veía exagerado —Felipe, 30-jul—.
	   Bajado a 7 px y la copia nítida cubre hasta el 72 % de la altura: el
	   difuminado queda como un remate en el borde superior, no como el
	   tratamiento de la fotografía. */
	-webkit-mask-image: linear-gradient(
		to top,
		#000 0%,
		#000 72%,
		rgba(0, 0, 0, 0.5) 88%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to top,
		#000 0%,
		#000 72%,
		rgba(0, 0, 0, 0.5) 88%,
		transparent 100%
	);
}

/* La copia acompaña al parallax con el mismo desfase y la misma escala: si se
   mueve una sola, el degradado se desalinea y se ve doble imagen. */
.wp-block-cover.k-parallax .kuschel-hero-nitido {
	will-change: transform;
	transform: translate3d(0, var(--k-desfase, 0), 0) scale(1.12);
}

.wp-block-cover.is-style-velo-marino .kuschel-hero-nitido {
	filter: saturate(0.9) contrast(1.05);
}

/* --------------------------------------------------------------------------
   17.1 La caja del hero: por qué hacen falta dos grupos

   En un layout `constrained` los hijos reciben `max-width` y `margin: auto`.
   Eso centra un bloque, pero la píldora es `inline-block`: sus márgenes auto
   valen 0 y se iba al borde izquierdo de la portada, a 340 px del titular
   —visto en pantalla el 29-jul—. La solución es que su bloque contenedor
   mida ya 44rem, no 100%. De ahí el grupo interior con layout `default`.
   -------------------------------------------------------------------------- */

.wp-block-cover .k-caja {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 44rem);
	margin-inline: auto;
}

/* ==========================================================================
   18. «Última actividad legislativa» como referencia (30-jul-2026)

   Felipe pidió que fuera más chica, «solo como referencia». El primer intento
   fue comprimir la lista —tipografías menores, filas sin fondo, columnas
   estrechas— y quedó montada: las etiquetas partían en varias líneas y las
   filas se pisaban entre sí. **Descartado.**

   La lista vuelve a las proporciones de §13, que funcionaban. Lo que la hace
   una referencia es otra cosa: el titular pasa a rótulo pequeño y la lista se
   limita a tres filas en el propio shortcode. Menos contenido, no contenido
   apretado. El registro completo está a un enlace.
   ========================================================================== */

/* 🔴 DESCARTADO el rótulo pequeño. Reducir el titular a una etiqueta de 12 px
   lo saca de la jerarquía de la página y lo deja sin formato de sistema
   —Felipe, 30-jul—. El H2 vuelve a §3.2. Lo que hace de esta sección una
   referencia es que la lista trae tres filas, no que su titular sea chico. */

/* Los accesos abren la página justo bajo la portada: sin titular no necesitan
   el aire de una sección con encabezado. */
.wp-block-group.alignfull > .wp-block-group:has(> .kuschel-accesos) {
	padding-top: var(--wp--preset--spacing--50);
}

/* --------------------------------------------------------------------------
   19. Cierres de rendija (30-jul)
   -------------------------------------------------------------------------- */

/* Entre la última sección marino y el pie marino aparecía una franja hueso:
   es el `blockGap` del contenedor raíz. El pie cierra la página, va pegado. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* El panel móvil es `fixed`: tiene que quedar por encima de la cabecera
   adherida, que va en z-index 100. */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 200;
}

/* ==========================================================================
   20. Comisiones (30-jul-2026)

   Cuatro tarjetas con ícono en la página índice, y una ficha por comisión.
   La que preside lleva el acento amarillo: es la única distinción jerárquica
   del bloque, y §6.1 permite el acento como recurso escaso.
   ========================================================================== */

.kuschel-comisiones {
	display: grid;
	/* Cuatro comisiones: cuatro columnas cuando hay ancho, dos en tableta y
	   una en teléfono. Con `auto-fit` quedaban tres y una huérfana. */
	grid-template-columns: 1fr;
	grid-auto-rows: 1fr;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 34rem) {
	.kuschel-comisiones {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 62rem) {
	.kuschel-comisiones {
		grid-template-columns: repeat(4, 1fr);
	}
}

.kuschel-comisiones > li {
	display: flex;
}

.kuschel-comision {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	padding: 1.75rem;
	border: 1px solid rgba(22, 32, 74, 0.1);
	border-radius: 14px;
	color: inherit;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	transition: transform 0.45s var(--k-ease), box-shadow 0.45s var(--k-ease),
		border-color 0.45s var(--k-ease);
}

.kuschel-comision:hover,
.kuschel-comision:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(22, 32, 74, 0.2);
	box-shadow: 0 18px 40px -22px rgba(14, 30, 82, 0.45);
}

/* La presidencia es el único dato que se distingue por color. */
.kuschel-comision.es-presidencia {
	border-left: 4px solid var(--wp--preset--color--amarillo);
}

.kuschel-comision__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: rgba(22, 32, 74, 0.07);
	transition: background-color 0.45s var(--k-ease);
}

.kuschel-comision__icono svg {
	width: 24px;
	height: 24px;
}

.kuschel-comision:hover .kuschel-comision__icono {
	background: var(--wp--preset--color--amarillo);
}

.kuschel-comision__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.kuschel-comision__calidad {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.6;
}

.kuschel-comision__nombre {
	display: block;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.kuschel-comision__dato {
	display: block;
	font-size: var(--wp--preset--font-size--pie);
	opacity: 0.78;
}

.kuschel-comision__ir {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	align-self: flex-start;
	margin-top: auto;
	padding-top: 1rem;
	font-size: var(--wp--preset--font-size--pie);
	font-weight: 600;
	opacity: 0.72;
	transition: opacity 0.45s var(--k-ease);
}

.kuschel-comision__ir span {
	display: inline-block;
	transition: transform 0.45s var(--k-ease);
}

.kuschel-comision:hover .kuschel-comision__ir {
	opacity: 1;
}

.kuschel-comision:hover .kuschel-comision__ir span {
	transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   20.1 Ficha de una comisión
   -------------------------------------------------------------------------- */

.kuschel-comision__cifras {
	display: grid;
	/* Son cuatro datos: 2×2 en la columna de lectura y 4×1 cuando hay ancho.
	   Con `auto-fit` salían tres y una celda gris vacía. */
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	margin: 0 0 2.5rem;
	background: rgba(22, 32, 74, 0.15);
	border: 1px solid rgba(22, 32, 74, 0.15);
}

.kuschel-comision__cifras > div {
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--hueso);
}

.kuschel-comision__cifras dt {
	margin: 0 0 0.35rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.6;
}

.kuschel-comision__cifras dd {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
}

@media (max-width: 28rem) {
	.kuschel-comision__cifras {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 62rem) {
	.kuschel-comision__cifras {
		grid-template-columns: repeat(4, 1fr);
	}
}

.kuschel-tabla-comision {
	width: 100%;
	border-collapse: collapse;
}

.kuschel-tabla-comision th,
.kuschel-tabla-comision td {
	padding: 0.85rem 1rem;
	font-size: var(--wp--preset--font-size--pie);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(22, 32, 74, 0.12);
}

.kuschel-tabla-comision thead th {
	background: rgba(22, 32, 74, 0.06);
	font-weight: 600;
	white-space: nowrap;
}

.kuschel-tabla-comision td:first-child,
.kuschel-tabla-comision td:last-child {
	white-space: nowrap;
	opacity: 0.8;
}

.kuschel-marca-fallida {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.45rem;
	border-radius: 3px;
	background: rgba(22, 32, 74, 0.1);
	font-size: 0.75rem;
	font-weight: 600;
}

/* Enlace que sale del sitio: se anuncia como tal, no se disimula. */
.kuschel-enlace-externo {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	font-weight: 600;
}

/* En teléfono desaparece «Lugar», no la última columna: el video importa más
   que la sala. Antes la regla apuntaba a `:last-child`, que dejó de ser Lugar
   al agregarse la cuarta columna. */
@media (max-width: 48rem) {
	.kuschel-tabla-comision td:nth-child(3),
	.kuschel-tabla-comision th:nth-child(3) {
		display: none;
	}

	.kuschel-tabla-comision td:nth-child(2) {
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   20.2 La ficha va ancha; su prosa, no

   La tabla de sesiones tiene materias largas —el API concatena varios
   proyectos en un mismo campo— y en la columna de 44rem la columna «Materia»
   quedaba en 150 px: un muro de texto partido palabra por palabra, visto en
   pantalla el 30-jul. La ficha completa se monta en un grupo ancho y aquí se
   devuelve a la columna de lectura todo lo que es prosa. La tabla se queda
   con los 76rem.
   -------------------------------------------------------------------------- */

.kuschel-ficha-comision > h2,
.kuschel-ficha-comision > p,
.kuschel-ficha-comision > dl {
	max-width: var(--wp--style--global--content-size, 44rem);
	margin-inline: auto;
}

.kuschel-tabla-comision td:nth-child(2) {
	min-width: 24rem;
}

/* --------------------------------------------------------------------------
   20.3 Columna «Video» (30-jul-2026)

   Un ícono de YouTube por sesión, en su color de marca solo al pasar el
   cursor: en reposo hereda el color del texto para no convertir la tabla en
   una columna de manchas rojas. La marca sigue siendo reconocible por forma.
   -------------------------------------------------------------------------- */

.kuschel-col-video {
	width: 4.5rem;
	text-align: center !important;
}

/* Con enlace: rojo de marca. Sin enlace: gris apagado. La diferencia de color
   dice si hay video antes de que nadie lea nada ni pase el cursor. */
.kuschel-video {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -0.35rem 0;
	border-radius: 8px;
	color: #ff0000;
	transition: background-color 0.3s var(--k-ease), transform 0.3s var(--k-ease);
}

.kuschel-video svg {
	width: 22px;
	height: 22px;
}

a.kuschel-video:hover,
a.kuschel-video:focus-visible {
	transform: scale(1.08);
	background-color: rgba(255, 0, 0, 0.08);
}

/* Sin video: mismo ícono, apagado y sin comportamiento de enlace. El `title`
   da el «No disponible» al pasar el cursor; el texto para lector de pantalla
   lo dice completo, con la fecha. */
.kuschel-video.es-sin-video {
	color: var(--wp--preset--color--marino-titular);
	opacity: 0.22;
	cursor: default;
}

.kuschel-video-no {
	opacity: 0.35;
}


/* --------------------------------------------------------------------------
   21. Nivel 2 de la jerarquía: texto de apoyo (30-jul-2026)

   Matices, advertencias y contexto. Ni contenido principal ni procedencia.
   Va en bloque separado del flujo para que se pueda saltar sin perder el hilo,
   pero con acento amarillo porque suele ser lo que evita una mala lectura.

   Origen: auditoría de contenido del 30-jul. En la página de oficios, la
   advertencia de que «respondido» no significa «resuelto» —esencial— se veía
   exactamente igual que la lista de destinatarios más frecuentes.
   -------------------------------------------------------------------------- */

.is-style-apoyo {
	margin-block: 1.5rem;
	padding: 0.85rem 0 0.85rem 1.15rem;
	border-left: 3px solid var(--wp--preset--color--amarillo);
	font-size: 1rem;
	line-height: 1.6;
	opacity: 0.82;
}

:is(.has-marino-background-color, .has-marino-profundo-background-color) .is-style-apoyo {
	opacity: 0.88;
}

/* ==========================================================================
   22. Fichas de aprendizaje por instrumento (30-jul-2026)

   Una por instrumento. Superficie propia para que se lean como una pausa
   didáctica y no como más párrafos del cuerpo: el lector tiene que poder
   reconocerlas de un vistazo y saber que ahí se le explica algo.

   El rótulo «Para entender esto» va antes del titular a propósito. Anuncia el
   contrato —esto es una explicación, no un argumento— antes de que empiece.

   ⚠️ La clase es `kuschel-instrumento`. `kuschel-ficha` ya existía para las
   fichas de provincia del esquema territorial (§12) y heredaba su rejilla de
   dos columnas. Comprobar colisiones de nombre antes de bautizar.
   ========================================================================== */

.kuschel-instrumento {
	margin: 2.5rem 0 3rem;
	padding: 1.75rem;
	border: 1px solid rgba(22, 32, 74, 0.12);
	border-top: 4px solid var(--wp--preset--color--amarillo);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
}

.kuschel-instrumento__rotulo {
	margin: 0 0 0.35rem !important;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.6;
}

.kuschel-instrumento__titulo {
	margin: 0 0 1.5rem !important;
	font-size: 1.5rem !important;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* Los cinco campos. En rejilla cuando hay ancho; apilados en teléfono. El
   rótulo del campo es lo que se repite entre instrumentos, así que es lo que
   tiene que ser reconocible: mayúsculas chicas, siempre igual. */
.kuschel-instrumento__campos {
	display: grid;
	gap: 1.1rem;
	margin: 0 0 1.75rem;
}

.kuschel-instrumento__campos > div {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.2rem;
}

.kuschel-instrumento__campos dt {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.55;
}

.kuschel-instrumento__campos dd {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
}

@media (min-width: 40rem) {
	.kuschel-instrumento__campos > div {
		grid-template-columns: 9rem 1fr;
		gap: 1.25rem;
		align-items: baseline;
	}

	.kuschel-instrumento__campos dt {
		text-align: right;
		padding-top: 0.2rem;
	}
}

/* --------------------------------------------------------------------------
   22.1 El recorrido

   Lista ordenada real —el lector de pantalla anuncia «3 de 5»— con forma de
   flujo puesta por CSS. El paso donde participa el senador lleva el acento.
   -------------------------------------------------------------------------- */

.kuschel-instrumento__recorrido {
	padding-top: 1.5rem;
	border-top: 1px solid rgba(22, 32, 74, 0.12);
}

.kuschel-instrumento__recorrido h3 {
	margin: 0 0 1rem !important;
	font-size: 0.6875rem !important;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.55;
}

.kuschel-instrumento__recorrido ol {
	counter-reset: paso;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kuschel-instrumento__recorrido li {
	counter-increment: paso;
	position: relative;
	padding: 0 0 1.1rem 2.5rem;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.kuschel-instrumento__recorrido li::before {
	content: counter(paso);
	position: absolute;
	left: 0;
	top: -0.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: rgba(22, 32, 74, 0.08);
	font-size: 0.75rem;
	font-weight: 600;
}

/* La línea que une los pasos. El último no la lleva. */
.kuschel-instrumento__recorrido li::after {
	content: "";
	position: absolute;
	left: 0.8rem;
	top: 1.6rem;
	bottom: 0.15rem;
	width: 1px;
	background: rgba(22, 32, 74, 0.15);
}

.kuschel-instrumento__recorrido li:last-child {
	padding-bottom: 0;
}

.kuschel-instrumento__recorrido li:last-child::after {
	display: none;
}

.kuschel-instrumento__recorrido li.es-clave {
	font-weight: 600;
}

.kuschel-instrumento__recorrido li.es-clave::before {
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--marino);
}

.kuschel-instrumento__nota {
	margin: 0.5rem 0 0 !important;
	font-size: 0.875rem;
	line-height: 1.5;
	opacity: 0.72;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.kuschel-instrumento {
		background: rgba(255, 255, 255, 0.92);
	}
}

/* ==========================================================================
   23. Apunte de lectura (30-jul-2026)

   Sustituye a las explicaciones escritas en tono de descargo. La ampolleta
   hace el trabajo de encuadre antes de que se lea una palabra: esto es un
   dato útil para interpretar, no una respuesta a una acusación.

   Deliberadamente NO usa el amarillo de marca en el filete: el amarillo ya es
   el acento del nivel «apoyo» (§21) y de la ficha de instrumento (§22). Si
   todo lo secundario fuera amarillo, el acento dejaría de señalar. Aquí el
   distintivo es el ícono.
   ========================================================================== */

.kuschel-tip {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	margin: 1.75rem 0;
	padding: 1.1rem 1.25rem;
	border: 1px solid rgba(22, 32, 74, 0.12);
	border-radius: 12px;
	background: rgba(22, 32, 74, 0.035);
}

.kuschel-tip__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	margin-top: -0.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--marino);
}

.kuschel-tip__icono svg {
	width: 18px;
	height: 18px;
}

.kuschel-tip__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.kuschel-tip__titulo {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.6;
}

.kuschel-tip__texto {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.kuschel-tip__texto p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

:is(.has-marino-background-color, .has-marino-profundo-background-color) .kuschel-tip {
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   24. Imagen destacada (30-jul-2026)

   Las piezas gráficas del sitio **no son fotografías**: son láminas de serie
   —«Nombres del Sur» sobre `amarillo-papel`, con grabado en marino (design.md
   §14)— que traen su propio titular impreso y vienen en 4:5, el recorte de
   Instagram. Eso obliga a tratarlas distinto de una foto de prensa.

   🔴 Sin acotar, WordPress las publicaba a **1156 × 1445 px**: más altas que la
   ventana, tapando el artículo entero y repitiendo en imagen el titular que ya
   está en texto justo encima. Una lámina no es un hero.

   Se resuelve con dos tratamientos distintos, no con uno:

   · En el artículo, la lámina se muestra **entera y acotada en altura**. Es una
     ilustración, y recortarla le quitaría el pie y el grabado.
   · En las tarjetas, se recorta a 3:2 **anclada arriba**, que es donde estas
     láminas llevan el nombre. Así la tarjeta se reconoce de un vistazo y la
     retícula no se desarma.

   El límite se pone en la ALTURA y no en el ancho a propósito: así una
   fotografía apaisada futura ocupa el ancho de lectura con naturalidad y una
   lámina vertical no se desborda. Una sola regla sirve para ambas.
   -------------------------------------------------------------------------- */

.wp-block-post-featured-image {
	margin-inline: auto;
	text-align: center;
}

/* 🔴 Los tres selectores son necesarios y no es redundancia. WordPress emite
   `.wp-block-post-featured-image.alignwide img { width: 100% }` —dos clases—,
   que gana por especificidad a un selector de una sola clase. Con `width` en
   100 % y el `object-fit: cover` que el núcleo también impone, la lámina se
   recortaba a una banda horizontal de su zona vacía: el marco salía en blanco.
   `contain` acá es deliberado: en el artículo la lámina se muestra íntegra. */
.wp-block-post-featured-image img,
.wp-block-post-featured-image.alignwide img,
.wp-block-post-featured-image.alignfull img {
	width: auto;
	max-width: 100%;
	max-height: 30rem;
	object-fit: contain;
	border: 1px solid rgba(22, 32, 74, 0.12);
	border-radius: 14px;
}

/* --------------------------------------------------------------------------
   24.1 En tarjeta: recorte fijo anclado arriba
   -------------------------------------------------------------------------- */

.kuschel-tarjeta-imagen {
	margin-bottom: 0;
}

.kuschel-tarjeta-imagen img,
.kuschel-tarjeta-imagen.alignwide img {
	width: 100%;
	max-width: none;
	max-height: none;
	aspect-ratio: 3 / 2;
	/* `top` y no `center`: el nombre de la lámina va arriba y es lo que
	   identifica la pieza. Centrado, el recorte se lo comía. */
	object-fit: cover;
	object-position: center top;
	background: var(--wp--preset--color--hueso);
	transition: transform 0.5s var(--k-ease);
}

.kuschel-tarjeta-imagen a {
	display: block;
	overflow: hidden;
	border-radius: 14px;
}

.kuschel-tarjeta-imagen a:hover img,
.kuschel-tarjeta-imagen a:focus-visible img {
	transform: scale(1.03);
}

/* Las entradas sin imagen no dejan hueco: WordPress omite el bloque entero y
   la tarjeta empieza por su etiqueta de categoría. Para que la retícula no
   quede colgando, las tarjetas se alinean por arriba. */
.wp-block-post-template.is-layout-grid {
	align-items: start;
}

@media (prefers-reduced-motion: reduce) {
	.kuschel-tarjeta-imagen img {
		transition: none;
	}

	.kuschel-tarjeta-imagen a:hover img {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   24.2 Serie de láminas dentro del artículo

   Las láminas de «Nombres del Sur» vienen en 4:5 y traen impresos su nombre y
   su explicación. Eso manda dos decisiones:

   · **Nunca se recortan.** El recorte les quita el pie o el grabado, que es
     justamente lo que aporta la lámina. Van enteras, en su proporción.
   · **Van en retícula de dos**, no a lo ancho. Cuatro láminas verticales en
     fila quedan minúsculas; a página completa obligan a un scroll eterno.

   El marco fino es el mismo de la destacada: define el borde de una lámina
   cuyo fondo (`amarillo-papel`, design.md §14) es casi el del sitio y si no
   se enmarca parece que flota.
   -------------------------------------------------------------------------- */

.wp-block-gallery.has-nested-images {
	--wp--style--unstable-gallery-gap: 1.25rem;
	gap: 1.25rem;
	margin-block: var(--wp--preset--spacing--50);
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-basis: calc(50% - 0.625rem) !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: auto;
	/* `contain` y no `cover`: la retícula de WordPress iguala alturas
	   recortando, y acá recortar es perder información impresa. */
	object-fit: contain;
	border: 1px solid rgba(22, 32, 74, 0.12);
	border-radius: 14px;
}

@media (max-width: 600px) {
	.wp-block-gallery.has-nested-images figure.wp-block-image {
		flex-basis: 100% !important;
	}
}

/* --------------------------------------------------------------------------
   25. Nota explicada: resumen, cifras y ejes (31-jul-2026)

   Encargo de Felipe: «me hubiese gustado una publicación más infográfica,
   algo más interactivo y fácil de procesar».

   Tenía razón y el reproche era exacto: la nota de la megarreforma se publicó
   como prosa corrida de 2.000 palabras cuando **él ya había resuelto el
   problema** en el HTML que compartió —bloques marino con etiqueta amarilla,
   retícula de dos columnas y cifras protagonistas—. Se trabajó del `.txt` y se
   ignoró el diseño que venía al lado.

   🔴 **La diferencia no es decorativa.** Un texto de ocho ejes con articulado
   citado no se lee de corrido: se escanea buscando el eje que a uno le importa.
   La prosa obliga a leerlo todo para encontrar una cosa.

   Estos componentes son del TEMA y no de una nota: cualquier explicación de un
   proyecto de ley los reutiliza.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   25.1 Resumen de entrada — «qué es / en qué está / cómo votó»
   -------------------------------------------------------------------------- */

.kuschel-resumen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.75rem 2.25rem;
	margin: var(--wp--preset--spacing--50) 0;
	padding: 2rem 2.25rem 2.25rem;
	border-radius: 16px;
	background: var(--wp--preset--color--marino);
	color: var(--wp--preset--color--blanco);
}

.kuschel-resumen__rotulo {
	margin: 0 0 0.45rem;
	color: var(--wp--preset--color--amarillo);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.kuschel-resumen__texto {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	opacity: 0.92;
}

.kuschel-resumen__texto strong {
	font-weight: 700;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   25.2 Cifras protagonistas

   🔒 Una cifra sin rótulo no es un dato, es un adorno. El rótulo es
   obligatorio en el marcado: no hay variante «solo número».
   -------------------------------------------------------------------------- */

.kuschel-cifras {
	display: grid;
	/* 🔴 Columnas explícitas y no `auto-fit`. Con `auto-fit` la retícula
	   decidía sola y salía 3+1: tres arriba y una sola colgando abajo, que se
	   lee como un error de maquetado. Dos parejas se leen como una decisión.
	   Además, a 168 px por tarjeta el rótulo de cada cifra queda en cuatro
	   líneas; a la mitad de ancho respira. */
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin: var(--wp--preset--spacing--50) 0;
	padding: 0;
	list-style: none;
}

.kuschel-cifra {
	padding: 1.25rem 1.35rem 1.4rem;
	border: 1px solid rgba(22, 32, 74, 0.12);
	border-radius: 14px;
	background: var(--wp--preset--color--hueso);
}

.kuschel-cifra__valor {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--marino-titular);
	font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.35rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	/* Una cifra partida en dos líneas deja de leerse como cifra. Antes de
	   romperla, que se encoja. */
	text-wrap: nowrap;
	overflow-wrap: normal;
}

@media (max-width: 480px) {
	.kuschel-cifras {
		grid-template-columns: 1fr;
	}

	.kuschel-cifra__valor {
		font-size: 1.7rem;
	}
}

/* En contextos anchos —una página a 76 rem— sí caben las cuatro en fila. */
@media (min-width: 68rem) {
	.alignwide .kuschel-cifras,
	.alignfull .kuschel-cifras {
		grid-template-columns: repeat(4, 1fr);
	}
}

.kuschel-cifra__nota {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.4;
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   25.3 Ejes numerados

   El número va en un disco amarillo, como la numeración de las láminas de
   serie (design.md §4). Da un ancla visual para escanear: el lector busca «el
   3» y lo encuentra sin leer los títulos.
   -------------------------------------------------------------------------- */

.kuschel-eje {
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(22, 32, 74, 0.14);
}

.kuschel-eje__titulo {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--titulo-3);
	font-weight: 600;
	line-height: 1.2;
}

.kuschel-eje__numero {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--marino-titular);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1;
}

/* «La ventaja local» es interpretación, no articulado. Se distingue del resto
   con el mismo filete amarillo del texto de apoyo (§21), para que no se lea
   como si fuera parte de lo aprobado. */
.kuschel-eje__ventaja {
	margin-top: 1.1rem;
	padding-left: 1.1rem;
	border-left: 3px solid var(--wp--preset--color--amarillo);
}

.kuschel-eje__ventaja p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
}

.kuschel-eje__ventaja > .kuschel-eje__rotulo {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.6;
}

@media (max-width: 600px) {
	.kuschel-resumen {
		padding: 1.5rem 1.35rem 1.75rem;
	}
}