/*
 * Estilos de componente del tema ProAmSa.
 *
 * Todo lo que theme.json puede expresar (color, tipografía, espaciado, layout)
 * vive allí. Aquí solo va lo que theme.json no cubre.
 *
 * Se consumen SIEMPRE las variables que WordPress genera desde theme.json
 * (--wp--preset--*): así, si cambia la paleta, cambia todo el tema sin tocar
 * este archivo.
 */

/* ==========================================================================
   1. Accesibilidad base
   ========================================================================== */

/* Enlace de salto al contenido: primer elemento enfocable de la página. */
.proamsa-salto {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
}

.proamsa-salto:focus {
	left: 1rem;
	top: 1rem;
}

/*
 * Foco visible uniforme. Nunca se elimina el contorno sin sustituirlo:
 * quien navega con teclado necesita saber dónde está.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primario);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Respeta a quien ha pedido menos movimiento en su sistema operativo. */
@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;
	}
}

/* ==========================================================================
   2. Botón flotante de WhatsApp
   ========================================================================== */

/*
 * OJO CON ESTE z-index: 900. Le gana al panel del menú aunque el panel
 * declare 100000.
 *
 * El panel vive dentro de `.proamsa-cabecera`, que es `sticky` con
 * `z-index: 800` y por tanto CREA CONTEXTO DE APILAMIENTO. El 100000 del
 * panel solo compite dentro de ese contexto; hacia fuera, toda la cabecera
 * vale 800. Como este botón es hermano de la cabecera y vale 900, se pintaba
 * flotando ENCIMA del menú a pantalla completa.
 *
 * Se oculta mientras el menú está abierto (regla de abajo). No se pierde
 * acceso: el panel ya lleva su propia tarjeta «Solicitar recolección».
 */
.proamsa-wa {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 900;

	display: inline-flex;
	align-items: center;
	gap: 0.625rem;

	/* 60px de alto: supera con holgura el mínimo WCAG 2.2 (24px) y el
	   recomendado para móvil (44px). */
	min-height: 60px;
	padding: 0 1.375rem;

	background: #1FA855; /* Verde WhatsApp: color de marca ajeno, no del tema. */
	color: #FFFFFF;
	border-radius: 999px;
	box-shadow: var(--wp--preset--shadow--elevada);

	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;

	transition: transform 0.18s ease, background-color 0.18s ease;
}

.proamsa-wa:hover,
.proamsa-wa:focus-visible {
	background: #178643;
	color: #FFFFFF;
	transform: translateY(-2px);
}

.proamsa-wa:focus-visible {
	outline: 3px solid var(--wp--preset--color--contraste);
	outline-offset: 3px;
}

/*
 * Fuera mientras el menú está abierto. Ver la explicación del contexto de
 * apilamiento en el comentario de `.proamsa-wa`: subirle el z-index al panel
 * NO sirve de nada, porque el techo se lo pone la cabecera.
 */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .proamsa-wa {
	display: none;
}

.proamsa-wa__icono {
	flex: none;
}

/* En pantallas estrechas el botón se reduce a icono para no tapar contenido. */
@media (max-width: 600px) {
	.proamsa-wa {
		padding: 0;
		width: 60px;
		justify-content: center;
	}

	.proamsa-wa__texto {
		/* Oculto visualmente, pero el aria-label del enlace sigue describiéndolo. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ==========================================================================
   3. Llamada a la acción de WhatsApp en línea (shortcode)
   ========================================================================== */

/*
 * box-sizing:border-box es imprescindible aquí: cuando el botón recibe
 * width:100% dentro de un panel, con el modelo de caja por defecto el padding
 * lateral se SUMA al 100 % y el botón se desborda del contenedor.
 *
 * justify-content:center mantiene icono y texto centrados en el eje, tanto
 * si el botón se ajusta al contenido como si ocupa todo el ancho.
 */
.proamsa-wa-cta {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	max-width: 100%;
	min-height: 52px;
	padding: 0 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.proamsa-wa-cta svg {
	flex: none;
}

.proamsa-wa-cta--principal {
	background: #1FA855;
	color: #FFFFFF;
}

.proamsa-wa-cta--principal:hover,
.proamsa-wa-cta--principal:focus-visible {
	background: #178643;
	color: #FFFFFF;
}

.proamsa-wa-cta--contorno {
	background: transparent;
	color: var(--wp--preset--color--primario-fuerte);
	box-shadow: inset 0 0 0 2px currentColor;
}

.proamsa-wa-cta--contorno:hover,
.proamsa-wa-cta--contorno:focus-visible {
	background: var(--wp--preset--color--base-suave);
}

/* ==========================================================================
   3 bis. Botones de acción destacados
   ========================================================================== */

/*
 * Componente compartido: se usa en el banner, en la franja de cumplimiento y
 * en cualquier página que necesite una acción principal fuera del sistema de
 * botones de bloques de WordPress.
 */
.proamsa-btn {
	/*
	 * Igual que en .proamsa-wa-cta: sin border-box, cuando el botón recibe
	 * width:100% dentro de una columna estrecha (el banner en móvil), el
	 * relleno lateral se SUMA al 100 % y el botón se desborda por la derecha.
	 */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 58px;
	padding: 0 1.85rem;
	border-radius: 999px;
	font-size: 1.0025rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	text-align: center;
	transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.22s ease, background-color 0.22s ease;
}

.proamsa-btn svg {
	flex: none;
	transition: transform 0.22s ease;
}

/*
 * Botón principal: lima con texto marino. El texto va en marino porque sobre
 * lima da 10.7:1; en blanco daría 1.7:1 y sería ilegible.
 */
.proamsa-btn--lima {
	background: linear-gradient(135deg, #A8D24A 0%, #C6E85A 100%);
	color: #00122A;
	box-shadow:
		0 10px 24px -8px rgba(168, 210, 74, 0.62),
		0 2px 6px rgba(0, 18, 42, 0.32);
}

.proamsa-btn--lima:hover,
.proamsa-btn--lima:focus-visible {
	color: #00122A;
	transform: translateY(-3px);
	box-shadow:
		0 18px 34px -10px rgba(168, 210, 74, 0.78),
		0 3px 10px rgba(0, 18, 42, 0.36);
}

.proamsa-btn--lima:hover svg,
.proamsa-btn--lima:focus-visible svg {
	transform: translateX(3px);
}

/* Botón secundario translúcido, para fondos oscuros. */
.proamsa-btn--cristal {
	border: 1.5px solid rgba(255, 255, 255, 0.34);
	background: rgba(255, 255, 255, 0.07);
	color: #FFFFFF;
	backdrop-filter: blur(8px);
}

.proamsa-btn--cristal:hover,
.proamsa-btn--cristal:focus-visible {
	border-color: #A8D24A;
	background: rgba(168, 210, 74, 0.16);
	color: #FFFFFF;
	transform: translateY(-3px);
}

.proamsa-btn:focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.proamsa-btn,
	.proamsa-btn svg {
		transition: none;
	}

	.proamsa-btn:hover,
	.proamsa-btn:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
   4. Estilos de bloque propios
   ========================================================================== */

/* Group · Tarjeta */
.wp-block-group.is-style-tarjeta {
	position: relative;
	overflow: hidden;
	/*
	 * height:100% hace que la tarjeta llene su celda de rejilla, de modo que
	 * el borde y el fondo lleguen abajo aunque el texto sea corto.
	 *
	 * OJO: esto solo funciona dentro de una REJILLA. Si el contenedor pasa a
	 * flex, este mismo height anula el estirado de align-items y cada tarjeta
	 * vuelve a medir lo que mide su contenido. Ver .proamsa-rejilla-centrada.
	 */
	height: 100%;
	/* Relleno reducido a la mitad: antes spacing--40 (2.5rem). */
	padding: var(--wp--preset--spacing--30);
	border: 1px solid rgba(0, 18, 42, 0.09);
	border-radius: 18px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--tarjeta);
	transition: transform 0.24s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.24s ease, border-color 0.24s ease;
}

/* Filo lima superior que aparece al pasar el cursor. */
.wp-block-group.is-style-tarjeta::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--acento), var(--wp--preset--color--primario));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.32s ease;
}

.wp-block-group.is-style-tarjeta:hover {
	border-color: rgba(168, 210, 74, 0.55);
	transform: translateY(-5px);
	box-shadow: 0 18px 40px -14px rgba(0, 18, 42, 0.24);
}

.wp-block-group.is-style-tarjeta:hover::before {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-tarjeta,
	.wp-block-group.is-style-tarjeta::before {
		transition: none;
	}

	.wp-block-group.is-style-tarjeta:hover {
		transform: none;
	}
}

/*
 * Rejilla de tarjetas, todas del mismo alto.
 *
 * Es rejilla y NO flex por una razón concreta: con flex envuelto, cada línea
 * calcula su alto por separado, así que las tarjetas de la primera fila salen
 * de un alto y las de la segunda de otro. No hay forma en flex de igualar
 * entre líneas. `grid-auto-rows: 1fr` iguala TODAS las filas al alto de la
 * más alta, que es la simetría que se busca.
 *
 * El número de columnas va declarado a mano en lugar de auto-fill: con
 * auto-fill el navegador mete las que quepan y la última fila queda coja a
 * capricho del ancho de ventana.
 */
.wp-block-group.proamsa-rejilla-centrada.is-layout-grid,
.wp-block-group.proamsa-rejilla-centrada {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	/*
	 * El hueco se declara AQUÍ y no se deja en manos del blockGap.
	 *
	 * WordPress traduce blockGap a una regla `.wp-container-… { gap: … }` que
	 * genera a partir del marcado de bloques. Estas rejillas ahora imprimen su
	 * HTML desde PHP (las tarjetas salen de la base de datos), así que ese
	 * contenedor ya no se genera y las tarjetas se quedaban pegadas.
	 *
	 * Valor explícito y no var(--wp--preset--spacing--30) a propósito: ese
	 * preset NO vale lo que dice theme.json. En theme.json v3 la escala del
	 * núcleo se fusiona con la del tema y gana el núcleo en los slugs que
	 * coinciden, así que spacing--30 resuelve a 0.67rem en lugar de a 1.5rem.
	 * Mientras eso no se corrija con "defaultSpacingSizes": false, apoyarse
	 * en el preset aquí daría un hueco de 11 px.
	 */
	gap: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 1000px) {
	.wp-block-group.proamsa-rejilla-centrada.is-layout-grid,
	.wp-block-group.proamsa-rejilla-centrada {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Si en la última fila queda UNA tarjeta suelta, ocupa el ancho completo
	 * en lugar de dejar un hueco a su derecha.
	 *
	 * :last-child:nth-child(odd) es la forma de detectar «última y además
	 * primera de su fila» cuando hay dos columnas: solo se cumple si el
	 * total es impar. Depende del número de columnas, y por eso vive dentro
	 * de la consulta de medios y no fuera.
	 */
	.wp-block-group.proamsa-rejilla-centrada > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 620px) {
	.wp-block-group.proamsa-rejilla-centrada.is-layout-grid,
	.wp-block-group.proamsa-rejilla-centrada {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Group · Panel azul marino */
.wp-block-group.is-style-panel-oscuro {
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--base);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--50);
}

.wp-block-group.is-style-panel-oscuro :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

/*
 * Group · Panel verde
 *
 * Repite el degradado del bloque de cierre de la portada (.proamsa-cta) para
 * que la llamada a la acción se lea igual en toda la web. Los valores están
 * duplicados a mano porque .proamsa-cta vive en cta.css, que solo se carga en
 * la portada: importarlo aquí traería consigo halos y trazos que este panel
 * no usa.
 */
.wp-block-group.is-style-panel-verde {
	padding: var(--wp--preset--spacing--40);
	border-radius: 10px;
	background:
		radial-gradient(105% 85% at 82% 8%, #4C8A00 0%, transparent 58%),
		linear-gradient(150deg, #1F4D06 0%, #2C6A04 48%, #3F8300 100%);
	color: var(--wp--preset--color--base);
}

.wp-block-group.is-style-panel-verde :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

/*
 * Sobre el degradado verde el lima NO sirve: verde sobre verde da 2.5:1. El
 * enlace va en blanco con subrayado, para no depender solo del color (WCAG
 * 1.4.1). Mismo criterio que .has-verde-vida-gradient-background.
 */
.wp-block-group.is-style-panel-verde a:not(.wp-element-button):not(.proamsa-wa-cta) {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * El panel de cierre, a sangre completa.
 *
 * Sin radio: un borde redondeado sobre un bloque que va de lado a lado deja
 * cuatro esquinas de fondo asomando y delata que es una caja, no una
 * sección.
 */
.wp-block-group.is-style-panel-verde.alignfull {
	padding-block: clamp(2rem, 5vw, 3.5rem);
	border-radius: 0;
}

/*
 * Y que llegue de verdad a los bordes de la ventana.
 *
 * EL PROBLEMA: el panel vive dentro de post-content, que está limitado a
 * `contentSize` (760 px), y este a su vez dentro de un contenedor con el
 * relleno raíz. El mecanismo de alineación de WordPress no lo saca de ahí
 * porque --wp--style--root-padding-left llega vacío en esta instalación.
 *
 * Descontar solo el relleno raíz no basta: a 1280 px el panel se quedaba en
 * 808 (760 + 48) porque el tope de 760 seguía mandando.
 *
 * LA SOLUCIÓN: se convierte el <main> de la plantilla de página en contenedor
 * de consulta y el panel se mide contra ÉL. `100cqw` es el ancho real del
 * main, que ocupa todo el ancho útil.
 *
 * Se usa cqw y NO vw a propósito: 100vw incluye la barra de desplazamiento
 * (aquí 15 px), así que habría provocado desbordamiento horizontal.
 */
.proamsa-pagina {
	container-type: inline-size;
}

.proamsa-cierre.alignfull {
	width: 100cqw;
	max-width: none;
	margin-inline: calc(50% - 50cqw);
}

/*
 * Y pegado al pie.
 *
 * El contenedor del contenido lleva relleno inferior para separar el texto
 * del pie, pero cuando la página TERMINA en este panel ese relleno deja una
 * franja blanca entre el verde y el pie. :has() detecta ese caso concreto y
 * solo entonces lo retira, así que las páginas que no acaban en panel
 * conservan su aire.
 */

/*
 * EL AIRE SUPERIOR ERAN 88 px Y VENÍAN DE DOS SITIOS SUMADOS.
 *
 * Medido en /aliados/ antes del cambio: 64 px de `padding-top` (spacing-50)
 * MÁS 24 px de `margin-top`. Los 24 no estaban escritos en ninguna hoja del
 * tema: los inyecta WordPress como `blockGap` entre hermanos del grupo de la
 * plantilla, con un selector `:where()` de especificidad CERO. Por eso
 * bajar solo el relleno dejaba 24 px que parecían imposibles de quitar.
 *
 * Ahora: 16 px de relleno y el margen anulado. De 88 px a 16, un 82 % menos.
 * El relleno inferior no se toca: ese sí separa el texto del pie.
 */
.proamsa-contenido {
	padding-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--60);
	margin-block-start: 0;
}

.proamsa-contenido:has(> .wp-block-post-content > .proamsa-cierre:last-child) {
	padding-bottom: 0;
}

/* El verde alta visibilidad solo se usa sobre marino: sobre blanco no
   alcanza el contraste mínimo de 4.5:1 exigido para texto. */
.wp-block-group.is-style-panel-oscuro a:not(.wp-element-button) {
	color: var(--wp--preset--color--acento);
}

/*
 * Enlaces sobre fondos oscuros.
 *
 * theme.json fija el color de enlace en verde corporativo (#2E7D32), que es
 * correcto sobre blanco (5.1:1) pero se vuelve ilegible sobre el azul marino
 * o los degradados. Estos selectores cubren todos los contenedores oscuros
 * del tema para que ningún enlace quede escondido.
 *
 * Se excluyen los botones (.wp-element-button): tienen su propio par de
 * colores de fondo y texto.
 */
/* Sobre AZUL MARINO el verde lima destaca y da 7.9:1. */
:where(
	.has-contraste-background-color,
	.has-marino-profundo-gradient-background,
	.is-style-panel-oscuro
) a:not(.wp-element-button) {
	color: var(--wp--preset--color--acento);
	text-decoration-color: currentColor;
}

:where(
	.has-contraste-background-color,
	.has-marino-profundo-gradient-background,
	.is-style-panel-oscuro
) a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--base);
}

/*
 * Sobre el degradado VERDE el lima no sirve: verde sobre verde da 2.5:1.
 * Aquí el enlace va en blanco (5.1:1 en el peor punto del degradado), con
 * subrayado para que no dependa solo del color, como pide WCAG 1.4.1.
 */
.has-verde-vida-gradient-background a:not(.wp-element-button) {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Heading · Antetítulo */
.wp-block-heading.is-style-antetitulo {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primario);
	margin-bottom: var(--wp--preset--spacing--10);
}

.wp-block-group.is-style-panel-oscuro .wp-block-heading.is-style-antetitulo {
	color: var(--wp--preset--color--acento);
}

/* List · Lista con verificación */
.wp-block-list.is-style-lista-verificada {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-lista-verificada li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.75rem;
}

.wp-block-list.is-style-lista-verificada li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.125rem;
	height: 1.125rem;
	background-color: var(--wp--preset--color--primario);
	/* Marca de verificación dibujada con máscara: escala sin perder nitidez
	   y hereda el color, a diferencia de un emoji o una imagen. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%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='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-group.is-style-panel-oscuro .wp-block-list.is-style-lista-verificada li::before {
	background-color: var(--wp--preset--color--acento);
}

/* ==========================================================================
   5. Cabecera y pie
   ========================================================================== */

/*
 * Cabecera, contenido y pie pegados entre sí.
 *
 * WordPress separa los bloques raíz con
 * `.wp-site-blocks > * { margin-block-start: var(--wp--style--block-gap) }`,
 * que aquí resuelve a 0.67rem. Ese margen es transparente, así que entre el
 * último bloque de la página (verde) y el pie (marino) dejaba ver una franja
 * blanca de 11 px.
 *
 * En un sitio construido con secciones a sangre completa, los bloques raíz
 * deben tocarse: el aire lo pone el padding interno de cada sección. Se usa
 * el prefijo `body` solo para ganar en especificidad a la regla del núcleo.
 */
body .wp-site-blocks > * {
	margin-block-start: 0;
}

.proamsa-cabecera {
	position: sticky;
	top: 0;
	z-index: 800;
	border-bottom: 1px solid rgba(0, 18, 42, 0.07);
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(180%) blur(14px);
}

/*
 * EL backdrop-filter DE ARRIBA IMPEDÍA QUE EL MENÚ OCUPARA LA PANTALLA.
 *
 * Un `backdrop-filter` distinto de `none` crea BLOQUE CONTENEDOR para los
 * descendientes `position: fixed`, igual que un `transform`. El panel del
 * menú es fixed con top:0 y bottom:0, así que en vez de estirarse contra la
 * ventana se estiraba contra la cabecera: medía 375x150 —150.4 px, o sea el
 * alto exacto de la cabecera— y las tarjetas se salían por arriba con
 * coordenadas negativas.
 *
 * Engaña mucho porque el panel SÍ tenía `position:fixed`, `top:0`,
 * `bottom:0` y `z-index:100000` en los estilos calculados. Todo correcto:
 * lo que estaba mal era contra QUÉ se resolvían.
 *
 * Se apaga solo mientras el menú está abierto. No se pierde nada: el panel
 * tapa la pantalla entera, así que el esmerilado de la cabecera no se ve.
 */
.proamsa-cabecera:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
}

.proamsa-logo img,
.proamsa-logo svg {
	display: block;
	height: auto;
	max-width: 190px;
}

/*
 * El logotipo ya contiene el nombre de la empresa. Repetirlo en texto al lado
 * duplica la marca y resta jerarquía. Se oculta visualmente pero se conserva
 * en el DOM: sigue siendo el título del sitio para lectores de pantalla y
 * para el rastreador.
 */
.proamsa-cabecera .wp-block-site-title,
.proamsa-cabecera .wp-block-site-tagline {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Navegación de la cabecera. */
.proamsa-cabecera .wp-block-navigation a {
	font-weight: 600;
	text-decoration: none;
}

.proamsa-cabecera .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primario-fuerte);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* Botón de la cabecera en forma de píldora, a juego con los del banner. */
.proamsa-cabecera .wp-block-button__link {
	border-radius: 999px;
	box-shadow: 0 6px 16px -6px rgba(84, 144, 0, 0.6);
}

/*
 * La barra principal en pantallas estrechas.
 *
 * El problema que resuelve: la barra es un flex con envoltura y
 * space-between. Al estrechar, el grupo de acciones no cabía junto al logo y
 * caía al renglón siguiente; como en ese renglón era el ÚNICO elemento,
 * space-between lo alineaba al principio, o sea a la IZQUIERDA, dejando unos
 * 120 px muertos a su derecha y una cabecera de 181 px de alto.
 *
 * La solución no es reordenar sino impedir la envoltura: en una barra de
 * navegación el logo y las acciones deben compartir renglón siempre. Lo que
 * cede es el TAMAÑO del logo, que es lo único que puede encogerse sin perder
 * su función.
 */

/*
 * LA HAMBURGUESA SE ADELANTA A 1024 px.
 *
 * WordPress colapsa el menú a 600 px. Este tema lo adelanta porque el
 * contenido de la barra pide más ancho del que hay mucho antes.
 *
 * El corte estuvo en 899.98 px y se quedaba CORTO POR 3 PÍXELES. Medido a
 * 900 px de ventana: la barra ofrece 836.8 px y hacen falta 839.8
 * (logo 214 + acciones 601.8 + gap 24). Resultado: a 900 px exactos el grupo
 * de acciones caía al segundo renglón y la hamburguesa AÚN NO había
 * aparecido, dejando la cabecera en 225 px de alto con el logo arriba y el
 * menú debajo. El punto real de rotura es ~904 px.
 *
 * Ahora el corte va en 1024 px, que deja ~120 px de holgura. El margen
 * importa porque el ancho del menú depende del TEXTO de las etiquetas y de
 * si la fuente web ya cargó: un servicio con nombre largo movería otra vez
 * el punto de rotura y un corte calcado a la medición volvería a fallar.
 *
 * Si se cambia este 1024, hay que cambiarlo en los tres bloques de abajo.
 */
@media (max-width: 1023.98px) {
	.proamsa-cabecera .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: grid;
	}

	.proamsa-cabecera .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 1023.98px) {
	.proamsa-barra,
	.proamsa-barra__acciones {
		flex-wrap: nowrap;
		gap: 0.5rem;
	}

	/* El logo encoge con la ventana en vez de forzar el salto de línea. */
	.proamsa-cabecera .proamsa-logo img,
	.proamsa-cabecera .proamsa-logo svg {
		max-width: clamp(104px, 30vw, 190px);
	}

	/*
	 * EL BOTÓN SALE DE LA BARRA Y ENTRA EN EL PANEL.
	 *
	 * Medido a 400 px: el logo terminaba en x=168 y el botón empezaba en
	 * x=181.9, o sea 13.9 px de separación, y «Solicitar recolección» se
	 * comía 162 px de los 400 (el 40 % del ancho) mientras la navegación de
	 * verdad —la hamburguesa— disponía de 24. La prioridad estaba invertida.
	 *
	 * En vez de seguir comprimiendo el botón, se retira de la barra: en el
	 * panel aparece como una tarjeta más (el ítem .proamsa-nav-cta del menú).
	 * La barra queda con dos únicos elementos, logo y hamburguesa, y deja de
	 * competir por el ancho en cualquier móvil.
	 */
	.proamsa-barra__acciones .wp-block-buttons {
		display: none;
	}
}

/*
 * La hamburguesa: 48x48 de área táctil, no 24x24.
 *
 * El botón no traía ni tamaño ni relleno propios, así que heredaba el del
 * SVG: 24x24. Es justo el mínimo de la WCAG 2.2 (criterio 2.5.8) y menos de
 * la mitad de lo que recomiendan Apple y Google. Llamaba la atención porque
 * el botón de CERRAR sí tenía sus 48 px y los enlaces del panel también:
 * al de abrir se le olvidó, y es el que más se usa.
 *
 * Aquí NO se toca `display`: lo controla la consulta de medios de arriba,
 * que es la que decide en qué anchos existe la hamburguesa. Ponerlo aquí la
 * haría aparecer también en escritorio.
 */
.proamsa-cabecera .wp-block-navigation__responsive-container-open {
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 12px;
	background: rgba(11, 34, 57, 0.06);
	color: var(--wp--preset--color--contraste);
	transition: background 0.18s ease;
}

.proamsa-cabecera .wp-block-navigation__responsive-container-open:hover {
	background: rgba(11, 34, 57, 0.12);
}

.proamsa-pie .proamsa-logo img {
	max-width: 210px;
}

/*
 * El pie en anchos intermedios: dos columnas, no una.
 *
 * Por debajo de 782 px WordPress apila TODAS las columnas con
 * `flex-basis: 100% !important`. Con listas cortas como estas, eso deja
 * entre el 70 % y el 78 % de cada fila en blanco —medido a 760 px: columnas
 * de 739 px para textos de 161 a 213 px— y estira el pie a más de 800 px de
 * alto. Repartidas de dos en dos, el bloque se lee como una unidad.
 *
 * Hace falta !important para ganarle a la regla del núcleo, que también lo
 * lleva. Es la excepción, no la norma del tema.
 */
@media (min-width: 480px) and (max-width: 781px) {
	.proamsa-pie .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - (var(--wp--preset--spacing--50) / 2)) !important;
	}
}

/*
 * Por debajo de 480 px sí se apila en una sola columna: a dos, cada una
 * bajaría de 210 px y los nombres de servicio partirían en tres renglones.
 * Se centra el contenido para que el texto no quede flotando a la izquierda
 * de una franja vacía.
 */
@media (max-width: 479px) {
	.proamsa-pie .wp-block-column {
		text-align: center;
	}

	.proamsa-pie .wp-block-column .wp-block-list {
		padding-left: 0;
		list-style: none;
	}

	.proamsa-pie .proamsa-logo img {
		margin-inline: auto;
	}
}

/* Cinta superior de contacto rápido. */
.proamsa-cinta {
	background: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Se excluye el botón: tiene su propio par de colores de fondo y texto. */
.proamsa-cinta a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--acento);
	text-decoration: none;
}

.proamsa-cinta a:not(.wp-block-button__link):hover {
	text-decoration: underline;
}

/*
 * Acceso a la intranet.
 *
 * El botón NO puede quedarse con la medida de los botones de bloque que fija
 * theme.json (0.95rem × 2rem de relleno): esa medida está calibrada para
 * «Solicitar recolección», la acción principal de la cabecera, y aquí produce
 * una píldora que se come media cinta. Se compacta a la altura de la línea.
 */
.proamsa-cinta .proamsa-intranet .wp-block-button__link {
	padding: 0.3rem 0.95rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
}

/*
 * El rojo llega desde la clase de preset .has-alerta-background-color, que
 * WordPress imprime con !important. Por eso el estado activo no puede
 * cambiar background-color: no ganaría la cascada. filter lo aclara sin
 * competir por la propiedad.
 */
.proamsa-cinta .proamsa-intranet .wp-block-button__link:hover,
.proamsa-cinta .proamsa-intranet .wp-block-button__link:focus-visible {
	filter: brightness(1.15);
}

/*
 * margin-inline-start:auto empuja el botón contra el borde derecho aunque el
 * grupo flexible envuelva y el botón caiga solo en su propio renglón, que es
 * justo lo que pasa en las pantallas más estrechas.
 */
.proamsa-cinta .proamsa-intranet {
	margin-inline-start: auto;
}

/*
 * En móvil la descripción larga sobra: son tres renglones de texto que
 * empujan la cabecera hacia abajo antes de que se vea nada del sitio. Queda
 * solo la parte que sitúa a la empresa.
 */
@media (max-width: 780px) {
	.proamsa-cinta__largo {
		display: none;
	}
}

/* ==========================================================================
   5 a bis. Menú desplegable en móvil
   ========================================================================== */

/*
 * PANEL A PANTALLA COMPLETA CON REJILLA DE TARJETAS.
 *
 * El desplegable de WordPress viene pensado para menús de tres o cuatro
 * enlaces: una lista apretada, alineada a la izquierda, con el submenú
 * siempre abierto. Con las once entradas que tenía este menú —cinco de
 * primer nivel más seis servicios— resultaba una columna larga en la que
 * costaba acertar con el pulgar y había que desplazar para ver el final.
 *
 * Ahora son SEIS tarjetas en rejilla de 2 columnas x 3 filas, que es una
 * cuadrícula exacta sin huecos ni filas cojas:
 *
 *     Inicio        Servicios
 *     Normatividad  Aliados
 *     Blog          Solicitar recolección
 *
 * Los seis servicios ya NO se listan aquí (ver más abajo): «Servicios» es un
 * enlace normal a su página, que es donde está el catálogo completo. Eso es
 * lo que permite que la cuenta cuadre en 6 y que todo quepa sin desplazar.
 *
 * La sexta tarjeta es el ítem .proamsa-nav-cta del menú, que sustituye al
 * botón «Solicitar recolección» retirado de la barra.
 */
.proamsa-cabecera .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	background: linear-gradient(160deg, #00122A 0%, #041F3A 60%, #052E52 100%);
}

/*
 * Core limita el diálogo a `wide-size` (1200 px) y lo centra. Para que el
 * panel ocupe de verdad toda la pantalla del dispositivo hay que soltar ese
 * tope y estirar la altura, o el degradado se queda en una banda.
 */
.proamsa-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	display: flex;
	width: 100%;
	max-width: 100%;
	height: 100%;
}

.proamsa-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	width: 100%;
	margin: 0;
}

/*
 * La rejilla se centra en la pantalla. El relleno superior de 5rem reserva
 * la esquina del botón de cerrar, que va posicionado por encima.
 */
.proamsa-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 5rem clamp(1rem, 5vw, 2rem) clamp(1.5rem, 6vw, 3rem);
	overflow-y: auto;
}

/*
 * EL BOTÓN DE CERRAR NO SE VEÍA. Tres causas a la vez:
 *
 * 1. Estaba en la esquina exacta —x:327, y:0 en una ventana de 375—, pegado
 *    al borde superior Y al derecho, sin separación ninguna.
 * 2. Su fondo era `rgba(255,255,255,0.08)`: un 8 % de blanco sobre azul
 *    marino, prácticamente indistinguible del panel.
 * 3. A `top: 0` cae DEBAJO de la barra de estado en cualquier móvil con
 *    muesca, así que en un iPhone quedaba medio tapado por el reloj.
 *
 * Ahora es una píldora con icono y la palabra «Cerrar», separada de los
 * bordes y respetando el área segura del dispositivo. El texto va por CSS
 * (::after) porque el marcado del botón lo genera el núcleo y solo trae el
 * SVG; el nombre accesible ya lo daba `aria-label`, así que este texto es
 * refuerzo visual y no duplica el anuncio del lector de pantalla.
 */
.proamsa-cabecera .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: max(0.75rem, env(safe-area-inset-top, 0px));
	right: max(0.75rem, env(safe-area-inset-right, 0px));
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: auto;
	min-width: 48px;
	min-height: 48px;
	padding: 0 0.95rem 0 0.8rem;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.9);
	color: #FFFFFF;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.proamsa-cabecera .wp-block-navigation__responsive-container-close::after {
	content: "Cerrar";
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
}

.proamsa-cabecera .wp-block-navigation__responsive-container-close:hover,
.proamsa-cabecera .wp-block-navigation__responsive-container-close:focus-visible {
	border-color: rgba(198, 232, 90, 0.75);
	background: rgba(168, 210, 74, 0.3);
}

/* --- La rejilla --- */

/*
 * Core declara `display:flex; flex-direction:column` sobre este contenedor
 * con tres clases de especificidad y lo imprime DESPUÉS de esta hoja. El
 * selector lleva `.wp-block-navigation__responsive-container.is-menu-open`
 * completo (cuatro clases) para ganarle; con la forma corta `.is-menu-open`
 * empataba y la rejilla no llegaba a aplicarse.
 */
.proamsa-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/*
	 * align-content:center es OBLIGATORIO, no decorativo.
	 *
	 * El <ul> se estira a la altura de la pantalla y el valor inicial
	 * `align-content: normal` se comporta como `stretch`, así que las filas
	 * automáticas se repartían TODO el hueco libre: medidas 229.5 px de fila
	 * para tarjetas de 99, o sea 141 px de vacío entre filas. Con `center`
	 * las filas vuelven a medir lo que mide su contenido y el bloque entero
	 * se centra en la pantalla.
	 */
	align-content: center;
	gap: clamp(0.6rem, 2.6vw, 1rem);
	width: 100%;
	/* En tablet la rejilla dejaría tarjetas larguísimas de borde a borde. */
	max-width: 560px;
	margin: 0;
	padding: 0;
}

/* --- Las tarjetas --- */

/*
 * TARJETAS DE CRISTAL, NO RECTÁNGULOS PLANOS.
 *
 * Antes eran un `rgba(255,255,255,0.06)` liso con un borde tenue: seis
 * rectángulos idénticos sin relieve. La profundidad se construye con cuatro
 * capas, ninguna de las cuales necesita imágenes:
 *
 *   1. Degradado diagonal, más claro arriba a la izquierda: simula una luz.
 *   2. `inset 0 1px 0` blanco: el filo brillante del borde superior, que es
 *      lo que hace que la tarjeta parezca tener grosor.
 *   3. Sombra proyectada hacia abajo: la despega del fondo.
 *   4. Una barra de luz lima en el borde superior (el ::before de abajo).
 *
 * `overflow: hidden` recorta esa barra a las esquinas redondeadas.
 */
.proamsa-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	position: relative;
	display: flex;
	width: auto;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	/*
	 * !important OBLIGATORIO, y es la tercera excepción del tema (las otras
	 * son las columnas del pie y el submenú del panel).
	 *
	 * El núcleo aplica `background: transparent !important` a TODO lo que
	 * cuelga del panel abierto, con el selector
	 * `.wp-block-navigation__responsive-container.is-menu-open:where(:not(…))`.
	 * Sin `!important` aquí, las tarjetas salían transparentes por mucho que
	 * el selector fuese más específico. Engañaba que `box-shadow` sí
	 * aplicaba: el núcleo solo pisa el fondo, así que la tarjeta tenía
	 * relieve y sombra pero ningún color.
	 */
	background: linear-gradient(152deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 46%, rgba(255, 255, 255, 0.02) 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.24),
		0 12px 26px -16px rgba(0, 0, 0, 0.9);
	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

/* La barra de luz del borde superior. Decorativa: no lleva contenido. */
.proamsa-cabecera .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item::before {
	content: "";
	position: absolute;
	inset-inline: 16%;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, rgba(198, 232, 90, 0.65) 50%, transparent 100%);
	transition: opacity 0.18s ease;
	opacity: 0.75;
}

.proamsa-cabecera .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:hover,
.proamsa-cabecera .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:focus-within {
	border-color: rgba(168, 210, 74, 0.55);
	background: linear-gradient(152deg, rgba(168, 210, 74, 0.26) 0%, rgba(168, 210, 74, 0.12) 46%, rgba(168, 210, 74, 0.05) 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.32),
		0 16px 30px -14px rgba(0, 0, 0, 0.95);
	transform: translateY(-2px);
}

.proamsa-cabecera .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:hover::before,
.proamsa-cabecera .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:focus-within::before {
	opacity: 1;
}

/*
 * box-sizing obligatorio: el enlace lleva width:100% Y relleno lateral, y
 * WordPress no trae reset universal. Sin esto el relleno se suma al 100 % y
 * el texto se sale de la tarjeta. Ya mordió antes a .proamsa-btn.
 */
.proamsa-cabecera .is-menu-open .wp-block-navigation-item__content {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* Toda la tarjeta es la diana, no solo las letras. */
	min-height: clamp(96px, 15vh, 132px);
	padding: 0.9rem 0.75rem;
	color: #FFFFFF;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-wrap: balance;
}

.proamsa-cabecera .is-menu-open .wp-block-navigation-item__content:hover,
.proamsa-cabecera .is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: #FFFFFF;
}

/* --- La tarjeta de acción --- */

/*
 * Conserva el verde macizo —es la única acción del panel y tiene que
 * destacar— pero con el mismo relieve que las demás: filo brillante arriba y
 * sombra propia, en verde en vez de negra para que el color no se apague.
 */
.proamsa-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .proamsa-nav-cta {
	border-color: rgba(198, 232, 90, 0.6);
	/* !important por el mismo motivo que la tarjeta normal: ver arriba. */
	background: linear-gradient(152deg, #6BAA00 0%, #549000 55%, #45790A 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.34),
		0 14px 28px -14px rgba(84, 144, 0, 0.95);
}

/*
 * En la tarjeta verde la barra de luz lima no se distinguiría del fondo:
 * aquí se pinta en blanco, que sobre el verde sí lee como reflejo.
 */
.proamsa-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .proamsa-nav-cta::before {
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
}

.proamsa-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .proamsa-nav-cta:hover,
.proamsa-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .proamsa-nav-cta:focus-within {
	border-color: rgba(198, 232, 90, 0.9);
	background: linear-gradient(152deg, #7CB518 0%, #61A400 55%, #4F8A0B 100%) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		0 18px 32px -12px rgba(84, 144, 0, 1);
}

/*
 * En escritorio esta entrada sobra: ahí sigue existiendo el botón de verdad
 * en la barra. Sin esta regla aparece «Solicitar recolección» DOS VECES,
 * como enlace del menú y como botón.
 *
 * Hacen falta TRES clases en el selector. Con dos —`.proamsa-cabecera
 * .proamsa-nav-cta`— empataba en especificidad (0,2,0) con la regla del
 * núcleo `.wp-block-navigation .wp-block-navigation-item{display:flex}`, y
 * como la hoja de bloques de WordPress se carga DESPUÉS que tema.css, el
 * empate lo ganaba el núcleo y el enlace seguía visible.
 */
@media (min-width: 1024px) {
	.proamsa-cabecera .wp-block-navigation .proamsa-nav-cta {
		display: none;
	}
}

/* --- El submenú de servicios NO se muestra en el panel --- */

/*
 * Decisión de producto: la tarjeta «Servicios» no despliega nada, lleva a la
 * página de Servicios, que es donde está el catálogo. Listar aquí los seis
 * subservicios duplicaba ese catálogo en un sitio donde no cabe y rompía la
 * cuadrícula de seis.
 *
 * Se oculta con CSS y NO quitando el submenú del menú guardado en la base de
 * datos, porque ese mismo submenú sí se usa —y se quiere— en el desplegable
 * de escritorio.
 *
 * !important a propósito, y es la segunda excepción del tema (la otra son
 * las columnas del pie). El núcleo fija la presentación del submenú del
 * desplegable con su propio !important, así que no hay especificidad que
 * valga.
 */
.proamsa-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.proamsa-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none !important;
}

/* ==========================================================================
   5 bis. Encabezado de las páginas internas
   ========================================================================== */

/*
 * Sustituye a la franja en verde niebla que llevaban las páginas.
 *
 * La mascota se ancla al BORDE INFERIOR de la franja y esta la recorta con
 * overflow:clip, igual que hace el banner de la portada. Es lo que permite
 * usar la misma imagen de cuerpo entero (proporción 680/1182, muy vertical)
 * en una franja baja sin deformarla ni estirar la caja: se asoma en lugar de
 * caber.
 */
/*
 * El relleno superior es MENOR que el inferior a propósito: la mascota se
 * apoya en el borde de abajo, así que todo lo que sobra arriba es aire
 * muerto sobre su cabeza. Asimétrico, la franja baja de 190 a ~145 px sin
 * apretar el título.
 *
 * El relleno inferior debe seguir coincidiendo con el margen negativo de la
 * mascota (ver más abajo): si se cambia uno, hay que cambiar el otro.
 */
.proamsa-encabezado {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding-block: clamp(0.6rem, 1.5vw, 1rem) clamp(1.25rem, 3vw, 2.25rem);
	background:
		radial-gradient(120% 140% at 88% 20%, #0A3E6B 0%, transparent 60%),
		linear-gradient(155deg, #00122A 0%, #041F3A 55%, #052E52 100%);
	color: #FFFFFF;
}

.proamsa-encabezado__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/*
 * Neblina lima detrás de la mascota. Es decoración buscada: da profundidad a
 * la franja y recoge la figura.
 *
 * Lo que se veía como suciedad no era este halo sino el fondo que arrastraba
 * la propia imagen, que recortaba contra él. Corregida la imagen, la neblina
 * se queda.
 */
.proamsa-encabezado__halo {
	position: absolute;
	inset-block-start: -40%;
	inset-inline-end: 6%;
	width: min(38vw, 420px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #A8D24A;
	opacity: 0.26;
	filter: blur(80px);
}

.proamsa-encabezado__interior {
	display: flex;
	align-items: flex-end;
	gap: clamp(0.75rem, 3vw, 2rem);
	/* Suelo de altura por si el título es de una sola línea. Se mantiene bajo
	   a propósito: quien manda en el alto de la franja es la mascota ya
	   recortada, no este mínimo. */
	min-height: clamp(60px, 5vw, 76px);
}

/*
 * Se anula el margen que WordPress pone entre hermanos.
 *
 * El layout de flujo del núcleo aplica
 * `.wp-container-… > * + * { margin-block-start: var(--wp--style--block-gap) }`.
 * Aquí el contenedor es FLEX y ya separa con gap, así que ese margen solo
 * suma alto: empujaba la mascota y estiraba la franja 24 px de más.
 *
 * Dos clases para ganar a la regla del núcleo, que se imprime después. Va
 * ANTES de la regla de la mascota para no pisarle su margen negativo.
 */
.proamsa-encabezado .proamsa-encabezado__interior > * {
	margin-block: 0;
}

.proamsa-encabezado__titulo {
	flex: 1 1 auto;
	align-self: center;
	margin: 0;
	color: #FFFFFF;
	text-wrap: balance;
	/* Palabras largas («Certificaciones») junto a la mascota en móvil: que se
	   partan por sílaba con guion, no por cualquier letra. El sitio es lang="es". */
	hyphens: auto;
}

/*
 * En las ENTRADAS el título no va suelto: lleva encima la categoría y debajo
 * la fecha y el autor. Ese bloque es entonces el elemento flexible, y el
 * título deja de serlo (dentro de .__texto ya no es hijo de la rejilla, así
 * que sus propiedades flex quedan inertes por sí solas).
 */
.proamsa-encabezado__texto {
	flex: 1 1 auto;
	align-self: center;
	min-width: 0;
}

.proamsa-encabezado__categoria {
	margin: 0 0 0.5rem;
	color: #C6E85A;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.proamsa-encabezado__categoria a {
	color: inherit;
	text-decoration: none;
}

.proamsa-encabezado__categoria a:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/*
 * Fecha y autor. El gris azulado da 6.4:1 sobre el marino: se lee como
 * secundario sin bajar del mínimo de contraste.
 */
.proamsa-encabezado__meta {
	margin-top: 0.75rem;
	color: #AFC2D6;
	gap: 0.4rem 1.25rem;
}

/*
 * El margen inferior negativo iguala al padding de la franja: sin él la
 * mascota flota sobre una banda de aire y parece recortada por error en
 * lugar de apoyada en el borde.
 *
 * El selector va con el padre por delante A PROPÓSITO. WordPress imprime en
 * el <head>, DESPUÉS de esta hoja, la regla de layout del grupo
 * (`.wp-container-… > * { margin-block-end: 0 }`), que con una sola clase
 * empata en especificidad y gana por orden. Con dos clases se resuelve.
 */
.proamsa-encabezado .proamsa-encabezado__mascota {
	display: block;
	flex: none;
	/* Mínimo de 56 px y no 72: en un teléfono de 375 px esos 16 px son los que
	   faltaban para que «Certificaciones» quepa entera junto a la mascota. */
	width: clamp(56px, 12vw, 150px);
	/*
	 * SOLO SE VE LA MITAD SUPERIOR de la mascota.
	 *
	 * La imagen es de cuerpo entero (680×1182). A cuerpo completo, su altura
	 * mandaba sobre la fila y estiraba la franja hasta 287 px en escritorio.
	 * Con la caja a la mitad de la proporción original (680/591) y overflow
	 * oculto, la imagen sigue entrando a su tamaño natural pero se recorta por
	 * abajo: se ve la cabeza y el torso, y la franja baja a la mitad.
	 *
	 * El recorte lo hace la caja, no la imagen, así que la mascota no se
	 * deforma ni hay que generar un segundo archivo.
	 */
	aspect-ratio: 680 / 591;
	overflow: hidden;
	margin-block-end: calc(-1 * clamp(1.25rem, 3vw, 2.25rem));
	line-height: 0;
}

/*
 * Sombra muy contenida. La anterior (0 12px 20px al 50 %) proyectaba un
 * borrón oscuro alrededor del contorno que, sobre el marino, se confundía
 * con un fondo sucio en la propia imagen.
 */
.proamsa-encabezado__mascota img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 4px 10px rgba(0, 6, 16, 0.32));
}

/* ==========================================================================
   6. Códigos de manifiesto y certificado
   ========================================================================== */

/*
 * Preparado para el futuro plugin de certificados: los códigos de manifiesto
 * se muestran en monoespaciada para que no se confundan 0/O ni 1/l al
 * transcribirlos desde un documento en papel.
 */
.proamsa-codigo {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.05em;
	letter-spacing: 0.06em;
	background: var(--wp--preset--color--base-suave);
	border: 1px solid rgba(11, 34, 57, 0.12);
	border-radius: 4px;
	padding: 0.15em 0.5em;
	white-space: nowrap;
}

/* ==========================================================================
   7. Impresión
   ========================================================================== */

@media print {
	.proamsa-wa,
	.proamsa-cinta,
	.proamsa-salto {
		display: none !important;
	}
}

/* ==========================================================================
   Migas de pan visibles ([proamsa_migas]) y redes del pie
   ========================================================================== */

/* Título y migas van juntos en .proamsa-encabezado__titular, que ocupa en la
   fila flex del encabezado el sitio que antes ocupaba el título solo. */
.proamsa-encabezado .proamsa-encabezado__interior > .proamsa-encabezado__titular {
	flex: 1 1 auto;
	align-self: center;
	min-width: 0;
	margin-block: 0;
}

.proamsa-encabezado__titular > .proamsa-migas {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
}

.proamsa-migas ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: rgba(255, 255, 255, 0.8);
}

.proamsa-migas li + li::before {
	content: "›";
	margin-right: 0.5rem;
	color: rgba(255, 255, 255, 0.55);
}

.proamsa-migas a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.proamsa-migas [aria-current="page"] {
	color: rgba(255, 255, 255, 0.8);
}

.proamsa-redes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.proamsa-redes a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ==========================================================================
   Servicios relacionados ([proamsa_relacionados]), al pie de cada servicio
   ========================================================================== */

.proamsa-relacionados {
	max-width: var(--wp--style--global--content-size, 760px);
	margin: 0 auto;
	/* Relleno y no margen: el margen inferior se colapsaba con el del
	   contenedor y el último enlace quedaba pegado al pie. */
	padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 1.5rem);
}

.proamsa-relacionados__titulo {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
}

.proamsa-relacionados ul {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.proamsa-relacionados a {
	font-weight: 600;
	text-underline-offset: 0.15em;
}