/* ==========================================================================
   Sense Sentit — estilos de maquetación
   Todo lo que theme.json no puede expresar: cabecera superpuesta, secciones
   heroicas a pantalla completa, tarjetas y correcciones responsive.
   ========================================================================== */

:root {
	/* Alto real de la cabecera, medido: 84 px a 390 px de ancho y 133 px a 1440.
	   La banda de título lo usa para dejarle sitio; si se queda corto, las migas
	   de pan aparecen por debajo de la cabecera fija. */
	--ss-header-height: clamp(84px, 65.8px + 4.67vw, 133px);
	--ss-radius: 14px;
	--ss-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	/* Ningún elemento debe poder provocar scroll horizontal en móvil:
	   ese era el fallo principal del maquetado original. */
	overflow-x: hidden;
	text-wrap: pretty;
}

img,
video,
iframe,
svg {
	max-width: 100%;
}

/* Evita que palabras largas rompan la caja en pantallas estrechas. */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
figcaption {
	overflow-wrap: break-word;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

/* --------------------------------------------------------------------------
   Accesibilidad — foco visible y enlace de salto
   -------------------------------------------------------------------------- */

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

.ss-header :where(a, button):focus-visible,
.ss-hero :where(a, button):focus-visible,
.ss-footer :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	z-index: 1000;
}

/* --------------------------------------------------------------------------
   Cabecera superpuesta sobre el contenido
   -------------------------------------------------------------------------- */

.ss-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	min-height: var(--ss-header-height);
	/* Transparente mientras se ve la parte alta del hero: los clics atraviesan
	   la franja vacía y sólo los elementos reales del menú los reciben. */
	pointer-events: none;
	transition:
		background-color 0.3s var(--ss-ease),
		box-shadow 0.3s var(--ss-ease),
		-webkit-backdrop-filter 0.3s var(--ss-ease),
		backdrop-filter 0.3s var(--ss-ease);
}

.ss-header > * {
	pointer-events: auto;
}

/* Al separarse del borde superior gana fondo difuminado. Difuminar desde el
   primer píxel ensuciaría la fotografía del hero, que es lo primero que se ve. */
.ss-header.is-stuck {
	/* Medido a lo largo del scroll: al 0,66 el peor caso caía a 4,87:1 sobre las
	   secciones claras, un 8 % por encima del mínimo. Con el fondo cambiando en cada
	   scroll ese margen es demasiado fino. */
	background-color: rgba(30, 42, 34, 0.76);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
	box-shadow:
		inset 0 -1px 0 rgba(253, 253, 246, 0.14),
		0 10px 28px rgba(12, 19, 14, 0.22);
}

/* Sin soporte de backdrop-filter el fondo translúcido dejaría el texto ilegible
   sobre según qué foto: se sustituye por un verde casi opaco. */
@supports not (
	(backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
	.ss-header.is-stuck {
		background-color: rgba(30, 42, 34, 0.96);
	}
}

/* La barra se estrecha un poco al fijarse: menos viewport ocupado en móvil. */
.ss-header.is-stuck .alignwide {
	padding-block: calc(var(--wp--preset--spacing--30) * 0.62);
	transition: padding 0.3s var(--ss-ease);
}

.ss-header.is-stuck .wp-block-site-logo img {
	width: clamp(168px, 18.5vw, 268px);
	transition: width 0.3s var(--ss-ease);
}

/* Centinela invisible que marca dónde empieza la página. */
.ss-header-sentinel {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
	visibility: hidden;
}

/* La cabecera fija no puede tapar el destino de un enlace interno ni el elemento
   que acaba de recibir el foco con el teclado (WCAG 2.4.11). */
html {
	scroll-padding-block-start: calc(var(--ss-header-height) + 0.5rem);
}

/* La hoja de core trae `.wp-block-navigation .wp-block-navigation-item__content { color: inherit }`,
   con más especificidad que un simple `.ss-header a`: hay que igualarla o los enlaces
   heredan el color oscuro del cuerpo y desaparecen sobre la imagen. */
.ss-header a,
.ss-header .wp-block-navigation .wp-block-navigation-item__content,
.ss-header .wp-block-navigation .wp-block-navigation-item__label {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* El menú desplegable sí va sobre fondo claro: recupera el color oscuro. */
.ss-header
	.ss-menu-toggle
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content,
.ss-header
	.ss-menu-toggle
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__label {
	color: var(--wp--preset--color--contrast);
}

.ss-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.ss-header .wp-block-navigation .wp-block-navigation-item__content:focus {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

/* Logo: mismas medidas que el diseño original (330 px en escritorio, 200 px en
   móvil), pero interpoladas de forma continua en vez de por saltos de breakpoint. */
.ss-header .wp-block-site-logo img {
	width: clamp(200px, 22.92vw, 330px);
	height: auto;
	display: block;
}

/* Menú inline: solo a partir de tablet grande; por debajo manda el botón. */
.ss-header .ss-nav-inline {
	display: none !important;
}

@media (min-width: 900px) {
	.ss-header .ss-nav-inline {
		display: flex !important;
	}
}

/* Botón hamburguesa — presente en todos los tamaños, como en el diseño actual.
   Va sobre la imagen del hero, así que es claro. */
.ss-menu-toggle .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--base);
}

.ss-menu-toggle .wp-block-navigation__responsive-container-open svg {
	width: clamp(26px, 3vw, 35px);
	height: clamp(26px, 3vw, 35px);
}

/* El botón de cerrar vive dentro del panel claro: en color crema sería invisible
   y dejaría el menú sin salida visible. */
.ss-menu-toggle .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
	padding: 0.75rem;
}

.ss-menu-toggle .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Panel desplegable: 348 px anclado a la izquierda en escritorio,
   pantalla completa en móvil (donde un panel estrecho no aporta nada). */
.ss-menu-toggle .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	padding: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 5vw, 2.5rem);
}

.ss-menu-toggle
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	justify-content: flex-start;
	padding-block-start: clamp(3rem, 8vw, 5rem);
}

.ss-menu-toggle .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--contrast);
	font-size: clamp(1.5rem, 5vw, 2.125rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.ss-menu-toggle .wp-block-navigation__responsive-container.is-menu-open a:hover,
.ss-menu-toggle .wp-block-navigation__responsive-container.is-menu-open a:focus {
	color: var(--wp--preset--color--olive);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ss-menu-toggle
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: clamp(0.75rem, 2vw, 1.25rem);
}

@media (min-width: 782px) {
	.ss-menu-toggle .wp-block-navigation__responsive-container.is-menu-open {
		inset-inline-end: auto;
		width: min(348px, 92vw);
		box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);
	}
}

/* --------------------------------------------------------------------------
   Secciones heroicas a pantalla completa (bloque Cover)
   -------------------------------------------------------------------------- */

.wp-block-cover.is-style-ss-hero,
.wp-block-cover.is-style-ss-hero.has-parallax {
	/* El bloque Cover escribe `min-height` como estilo en línea, así que hace falta
	   !important para imponer svh: con vh la barra de direcciones del navegador móvil
	   recorta la sección y provoca saltos al hacer scroll. */
	min-height: 100svh !important;
	align-items: flex-end;
	justify-content: flex-start;
	padding-block: 0 clamp(4rem, 14vh, 15rem);
	padding-inline: clamp(1rem, 0.4rem + 3vw, 2rem);
}

/* La primera sección deja hueco a la cabecera superpuesta. */
.ss-hero-first.wp-block-cover.is-style-ss-hero {
	padding-block-start: var(--ss-header-height);
}

/* Core fuerza `width: auto; margin: 0` en el contenedor interior cuando la posición
   de contenido es personalizada, y para ello duplica la clase en su selector:
   `.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left
   .wp-block-cover__inner-container` pesa (0,5,0).
   Sin ganarle, el contenedor se encoge al ancho del titular y queda pegado al borde del
   viewport: a 1920 px el texto del hero arrancaba 228 px a la izquierda de las secciones
   de debajo. Se repite la clase igual que hace core para llegar a (0,6,0). */
.wp-block-cover.has-custom-content-position.has-custom-content-position.is-style-ss-hero.is-style-ss-hero
	> .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	text-align: start;
}

/* El layout «ancho fijo» de core centra todo hijo más estrecho que el contenedor,
   y lo hace con `margin-left: auto !important`. El titular (18ch) y el párrafo
   (62ch) son más estrechos, así que arrancaban en 252 px y 394 px mientras los
   botones seguían en 32 px: tres márgenes izquierdos distintos en el mismo bloque.
   Igualar el !important es la única forma de anclarlos todos a la izquierda. */
.wp-block-cover.is-style-ss-hero > .wp-block-cover__inner-container > *,
.wp-block-cover.is-style-ss-banner > .wp-block-cover__inner-container > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.wp-block-cover.is-style-ss-hero :where(h1, h2, h3) {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin-block: 0;
	max-width: 18ch;
}

.wp-block-cover.is-style-ss-hero p {
	color: var(--wp--preset--color--base);
	font-size: clamp(1rem, 0.9rem + 0.45vw, 1.3125rem);
	font-weight: 500;
	line-height: 1.45;
	max-width: 62ch;
	margin-block: clamp(0.75rem, 2vw, 1.25rem) 0;
}

.wp-block-cover.is-style-ss-hero .wp-block-buttons {
	margin-block-start: clamp(1.25rem, 3vw, 2rem);
	gap: 0.75rem;
}

/* Velo en esquina, no capa uniforme.
   Medido sobre los píxeles reales bajo cada línea de texto: con una capa uniforme
   al 40 % el titular del hero bajaba a 2,2:1 y el párrafo fallaba en el 19 % de su
   área. Subir esa capa arreglaría el contraste apagando la fotografía entera.
   Los tres Cover colocan el texto abajo a la izquierda, así que la sombra se
   concentra ahí: en vertical hacia el pie y en horizontal hacia el margen
   izquierdo. La franja superior y el lado derecho —donde está el sujeto de cada
   foto— se quedan casi limpios. */
.wp-block-cover.is-style-ss-hero > .wp-block-cover__background,
.wp-block-cover.is-style-ss-banner > .wp-block-cover__background {
	/* Core fija `opacity: .4` con un selector de cuatro clases
	   (`.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-40`)
	   y el color de fondo con !important desde `.has-contrast-background-color`.
	   Sin !important el degradado se aplicaría al 40 % y el verde sólido se pintaría
	   por debajo donde el degradado es transparente. */
	opacity: 1 !important;
	background-color: transparent !important;
}

.wp-block-cover.is-style-ss-hero > .wp-block-cover__background {
	background-image:
		linear-gradient(
			to top,
			rgba(12, 19, 14, 0.66) 0%,
			rgba(12, 19, 14, 0.66) 26%,
			rgba(12, 19, 14, 0.6) 52%,
			rgba(12, 19, 14, 0.46) 72%,
			rgba(12, 19, 14, 0.2) 88%,
			rgba(12, 19, 14, 0.06) 100%
		),
		linear-gradient(
			to right,
			rgba(12, 19, 14, 0.34) 0%,
			rgba(12, 19, 14, 0.2) 50%,
			rgba(12, 19, 14, 0) 84%
		);
}

.wp-block-cover.is-style-ss-banner > .wp-block-cover__background {
	background-image:
		linear-gradient(
			to top,
			rgba(12, 19, 14, 0.7) 0%,
			rgba(12, 19, 14, 0.66) 30%,
			rgba(12, 19, 14, 0.5) 58%,
			rgba(12, 19, 14, 0.26) 80%,
			rgba(12, 19, 14, 0.1) 100%
		),
		linear-gradient(
			to right,
			rgba(12, 19, 14, 0.34) 0%,
			rgba(12, 19, 14, 0.2) 50%,
			rgba(12, 19, 14, 0) 84%
		);
}

/* El parallax (background-attachment: fixed) rinde mal y se ve mal en táctil:
   se activa solo en escritorio con puntero fino. */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
	.wp-block-cover.has-parallax,
	.wp-block-cover.is-style-ss-hero.has-parallax {
		background-attachment: scroll;
	}
}

/* Botón secundario del hero: contorno lima sobre fondo transparente. */
.wp-block-button.is-style-ss-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
	border: 2px solid var(--wp--preset--color--accent);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	font-weight: 700;
}

.wp-block-button.is-style-ss-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-ss-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------------------------------------
   Cabecera de página interior (banda verde con migas + título)
   -------------------------------------------------------------------------- */

.ss-page-header {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	/* Arriba: el alto de la cabecera fija más un respiro propio, para que las migas
	   no queden pegadas a la barra. Abajo: espacio real, no un margen residual. */
	padding-block: calc(var(--ss-header-height) + clamp(1.25rem, 2.6vw, 2.25rem))
		clamp(1.75rem, 3vw, 2.75rem);
}

.ss-page-header :where(h1, h2, .wp-block-post-title) {
	color: var(--wp--preset--color--base);
	/* 30 px en móvil y 40 px en escritorio. El tamaño «display» del hero resultaba
	   desproporcionado dentro de una banda compacta. */
	font-size: clamp(1.875rem, 1.64rem + 0.95vw, 2.75rem);
	line-height: 1.1;
	margin-block: 0;
}

.ss-breadcrumb {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--mint);
	letter-spacing: 0.01em;
	/* El grupo que las envuelve lleva blockGap 0: la separación con el título la
	   pone esta regla, no el editor. */
	margin-block: 0 clamp(0.5rem, 1.1vw, 0.85rem);
}

/* WCAG 2.5.8 pide 24x24 px de diana. Estos enlaces son navegación suelta, no
   enlaces dentro de una frase, así que no les aplica la excepción de texto en línea. */
.ss-breadcrumb a,
.ss-breadcrumb [aria-current] {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.ss-breadcrumb a {
	color: var(--wp--preset--color--mint);
	text-decoration: none;
}

.ss-breadcrumb a:hover,
.ss-breadcrumb a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.ss-breadcrumb .ss-breadcrumb__sep {
	opacity: 0.6;
	margin-inline: 0.35em;
}

/* --------------------------------------------------------------------------
   Banner de página interior (imagen ancha con titular sobrepuesto)
   -------------------------------------------------------------------------- */

.wp-block-cover.is-style-ss-banner {
	/* Acota el min-height en línea del bloque: ni se aplasta en pantallas bajas
	   ni se dispara en monitores muy altos. */
	min-height: clamp(320px, 52svh, 620px) !important;
	align-items: flex-end;
	justify-content: flex-start;
	padding-block: clamp(2.5rem, 6vw, 4rem);
	padding-inline: clamp(1rem, 0.4rem + 3vw, 2rem);
}

.wp-block-cover.has-custom-content-position.has-custom-content-position.is-style-ss-banner.is-style-ss-banner
	> .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.wp-block-cover.is-style-ss-banner :where(h1, h2, h3) {
	color: var(--wp--preset--color--base);
	/* Un escalón por debajo del hero: el banner comparte página con más contenido. */
	font-size: clamp(1.875rem, 0.9rem + 3.4vw, 3.5rem);
	line-height: 1.06;
	margin-block: 0;
	max-width: 42ch;
}

.wp-block-cover.is-style-ss-banner p {
	color: var(--wp--preset--color--base);
	max-width: 60ch;
	margin-block: 0.75rem 0;
}

/* Esquinas redondeadas del banner cuando va dentro del contenido. */
.wp-block-cover.is-style-ss-banner.is-rounded {
	border-radius: var(--ss-radius);
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */

.ss-card {
	background-color: var(--wp--preset--color--soft);
	border-radius: var(--ss-radius);
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	height: 100%;
}

.ss-card > :first-child {
	margin-block-start: 0;
}

.ss-card > :last-child {
	margin-block-end: 0;
}

.ss-card--outline {
	background-color: transparent;
	border: 1px solid rgba(44, 57, 48, 0.18);
}

.ss-card h3 {
	margin-block-end: 0.75rem;
}

/* Imágenes de tarjeta: relación fija para que las filas cuadren en escritorio
   y altura natural contenida en móvil. */
.ss-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--ss-radius);
	display: block;
}

.ss-card-image {
	border-radius: var(--ss-radius);
	overflow: hidden;
	min-height: clamp(220px, 34vw, 380px);
}

/* Pareja imagen + texto: en móvil siempre imagen arriba, texto debajo,
   sin importar el orden que tengan en escritorio. */
@media (max-width: 781px) {
	.ss-media-pair.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.ss-media-pair.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.ss-media-pair.is-reversed-on-mobile > .wp-block-column:first-child {
		order: 2;
	}

	.ss-media-pair.is-reversed-on-mobile > .wp-block-column:last-child {
		order: 1;
	}
}

/* --------------------------------------------------------------------------
   Columnas con separador vertical (bloque de tres valores)
   -------------------------------------------------------------------------- */

.ss-divided-columns.wp-block-columns > .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid rgba(44, 57, 48, 0.35);
	padding-inline-start: clamp(1.25rem, 3vw, 2.5rem);
}

@media (max-width: 781px) {
	.ss-divided-columns.wp-block-columns > .wp-block-column + .wp-block-column {
		border-inline-start: 0;
		border-block-start: 1px solid rgba(44, 57, 48, 0.25);
		padding-inline-start: 0;
		padding-block-start: clamp(1.25rem, 5vw, 2rem);
	}
}

/* --------------------------------------------------------------------------
   Lista de contacto con iconos
   -------------------------------------------------------------------------- */

.ss-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.ss-contact-list li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: var(--wp--preset--font-size--small);
}

.ss-contact-list svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.ss-contact-list a {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.ss-contact-list a:hover,
.ss-contact-list a:focus {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Mapa incrustado — responsive sin desbordar
   -------------------------------------------------------------------------- */

.ss-map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	min-height: 300px;
	border-radius: var(--ss-radius);
	overflow: hidden;
	background-color: var(--wp--preset--color--soft);
}

.ss-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 782px) {
	.ss-map {
		aspect-ratio: auto;
		height: 100%;
		min-height: 420px;
	}
}

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

.ss-footer {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding-block: clamp(3rem, 7vw, 5rem);
}

.ss-footer :where(a, p, h2, h3, li) {
	color: var(--wp--preset--color--base);
}

.ss-footer a {
	text-decoration: none;
}

.ss-footer a:hover,
.ss-footer a:focus {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* En el pie el logo va algo más pequeño que en la cabecera: 296 px y 179 px. */
.ss-footer .wp-block-site-logo img {
	width: clamp(179px, 20.55vw, 296px);
	height: auto;
	margin-inline: auto;
}

.ss-footer-nav .wp-block-navigation__container {
	justify-content: center;
	gap: clamp(0.75rem, 3vw, 1.5rem);
	row-gap: 0.5rem;
	flex-wrap: wrap;
}

.ss-footer-nav .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	position: relative;
}

.ss-footer-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

@media (min-width: 600px) {
	.ss-footer-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
		content: "";
		position: absolute;
		inset-inline-start: calc(clamp(0.75rem, 3vw, 1.5rem) / -2);
		inset-block: 0.15em;
		border-inline-start: 1px solid rgba(253, 253, 246, 0.45);
	}
}

/* Datos del titular exigidos por la LSSI: discretos pero siempre visibles. */
.ss-legal-line {
	text-align: center;
	color: var(--wp--preset--color--mint);
	margin-block: 0;
}

.ss-eu-note {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-align: center;
	max-width: 60ch;
	margin-inline: auto;
}

.ss-eu-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.25rem, 4vw, 2.5rem);
}

.ss-eu-logos img {
	height: clamp(34px, 5vw, 50px);
	width: auto;
	object-fit: contain;
	display: block;
}

/* --------------------------------------------------------------------------
   Contenido editorial (entradas, páginas legales)
   -------------------------------------------------------------------------- */

/* Ficha de datos del titular: sin viñetas, cada dato en su línea. */
.ss-datos-legales {
	list-style: none;
	padding-inline-start: 0;
	border-inline-start: 3px solid var(--wp--preset--color--mint);
	padding-inline-start: var(--wp--preset--spacing--30);
}

.ss-datos-legales li + li {
	margin-block-start: 0.35em;
}

/* Mapa web: los listados nativos de páginas y categorías, con aire. */
.ss-sitemap .wp-block-page-list,
.ss-sitemap .wp-block-categories {
	list-style: none;
	padding-inline-start: 0;
}

.ss-sitemap :where(.wp-block-page-list, .wp-block-categories) li {
	border-block-end: 1px solid rgba(44, 57, 48, 0.14);
}

.ss-sitemap :where(.wp-block-page-list, .wp-block-categories) a {
	display: block;
	padding-block: 0.6rem;
	text-decoration: none;
	font-weight: 500;
}

.ss-sitemap :where(.wp-block-page-list, .wp-block-categories) a:hover,
.ss-sitemap :where(.wp-block-page-list, .wp-block-categories) a:focus {
	text-decoration: underline;
}

.ss-sitemap .wp-block-page-list .wp-block-pages-list__item__link {
	color: var(--wp--preset--color--olive);
}

.ss-prose > * + * {
	margin-block-start: 1.1em;
}

.ss-prose :where(h2, h3, h4) {
	margin-block-start: 1.8em;
}

.ss-prose ul,
.ss-prose ol {
	padding-inline-start: 1.25em;
}

.ss-prose li + li {
	margin-block-start: 0.4em;
}

.ss-prose table {
	width: 100%;
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */

.ss-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--olive);
	margin-block-end: 0.35rem;
}

.ss-hide-mobile {
	display: none !important;
}

@media (min-width: 782px) {
	.ss-hide-mobile {
		display: revert !important;
	}
}

/* Cualquier bloque alineado a ancho completo no debe superar el viewport. */
.wp-site-blocks .alignfull {
	max-width: 100vw;
}

/* La cabecera es absoluta y su envoltorio no ocupa alto: el contenido arranca pegado arriba. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Las secciones de cada plantilla traen su propio espaciado: el blockGap entre los
   hijos directos de <main> solo abriría huecos entre bandas que deben tocarse. */
.wp-site-blocks > main > * {
	margin-block-start: 0;
}