/*
 * Tema SERV: hoja de estilos común a toda la web.
 *
 * Orden: 1. base · 2. piezas reutilizables · 3. cabecera · 4. pie.
 * Lo que es propio de una sola página va en assets/paginas/ y solo se carga en ella.
 * Las medidas reproducen las de las páginas originales hechas con Elementor.
 * Saltos de tamaño: escritorio > 1024 px, tableta 768-1024 px, móvil < 768 px.
 * El menú se pliega por debajo de 1200 px.
 */

/* ======================================================================
   1. BASE: variables, tipografía y elementos
   ====================================================================== */

/* Roboto servida desde la propia web (fuente variable, de 300 a 700): sin pedirla a Google */

@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("fuentes/roboto-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("fuentes/roboto-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: Roboto;
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("fuentes/roboto-cursiva-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Roboto;
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("fuentes/roboto-cursiva-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Colores */
	--noche: #252b42;
	--azul: #13aff9;
	--azul-hondo: #0b8fd0;
	--rojo-fundacion: #e31e19;
	--acento: var(--azul);
	--fondo: #f9f9f9;
	--fondo-claro: #fafafa;
	--texto: #343434;
	--texto-suave: #5b6172;
	--borde: #e6e8ee;
	--blanco: #fff;

	/* Formas: radios, sombras y movimiento, iguales en toda la web */
	--radio-s: 8px;
	--radio: 12px;
	--radio-l: 20px;
	--radio-boton: 999px;
	--sombra-s: 0 1px 2px rgba(15, 20, 40, 0.06), 0 1px 3px rgba(15, 20, 40, 0.08);
	--sombra: 0 10px 30px -12px rgba(15, 20, 40, 0.25);
	--transicion: 0.2s ease;

	/* Espacios */
	--esp-1: 8px;
	--esp-2: 16px;
	--esp-3: 24px;
	--esp-4: 40px;
	--esp-5: 64px;
}

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

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

body {
	overflow-x: clip;
	margin: 0;
	background: var(--noche);
	color: #918f8f;
	font: 400 18px/28px Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3,
p,
ul {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

.icono {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

/* Quien navega con teclado siempre ve dónde está */
:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 3px;
}

::selection {
	background: rgba(19, 175, 249, 0.25);
}

.contenedor {
	max-width: 1140px;
	margin: 0 auto;
}

/* ======================================================================
   2. PIEZAS REUTILIZABLES: botones, títulos, tarjetas, listas
   ====================================================================== */

/* Botones */

.boton,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--esp-1);
	min-height: 48px;
	border: 2px solid var(--acento);
	border-radius: var(--radio-boton);
	padding: 10px 28px;
	color: var(--acento);
	font: 500 16px/1.2 Roboto, sans-serif;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion), transform var(--transicion);
}

.boton:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

.boton--borde:hover,
.is-style-outline > .wp-block-button__link:hover {
	background: var(--acento);
	color: var(--blanco);
}

.boton--relleno,
.is-style-fill > .wp-block-button__link {
	border-color: var(--acento);
	background: var(--acento);
	color: var(--blanco);
}

.boton--relleno:hover,
.is-style-fill > .wp-block-button__link:hover {
	border-color: var(--azul-hondo);
	background: var(--azul-hondo);
	color: var(--blanco);
}

.boton--noche > .wp-block-button__link:hover {
	border-color: var(--acento);
	background: var(--acento);
}

.boton--noche > .wp-block-button__link {
	border-color: var(--noche);
	background: var(--noche);
}

.boton--inactivo > .wp-block-button__link,
.boton--inactivo > .wp-block-button__link:hover {
	border-color: #858a8c;
	background: #858a8c;
	color: var(--blanco);
}

.boton--grande {
	border: 0;
	padding: 18px 36px;
}

.boton--ancho {
	padding: 14px 58px;
}

.boton--pequeno {
	padding: 20px 40px;
	font-size: 15px;
	line-height: 15px;
}

/* Título de sección con la primera palabra resaltada */

.titulo-seccion {
	color: var(--acento);
	font: 700 30px/35px Roboto, sans-serif;
}

.titulo-seccion span,
.resaltado {
	padding: 2px 6px;
	background: var(--acento);
	color: var(--blanco);
}

.colaboradores {
	display: flex;
	align-items: center;
	height: 119px;
}

.colaboradores li {
	flex: 1;
	text-align: center;
}

/* Tarjetas de evento (portada, «Cursos & Eventos»): la imagen entera (16:9); debajo, la fecha completa y la hora, el título, un resumen y «Más información». Toda la tarjeta es el enlace (el del título
   se estira sobre ella). */
.tarjetas-evento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.tarjeta-evento {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	background: var(--blanco);
	box-shadow: 0 1px 2px rgba(15, 20, 40, 0.04);
	transition: transform var(--transicion), box-shadow var(--transicion);
}

.tarjeta-evento:hover {
	box-shadow: 0 18px 40px -18px rgba(37, 43, 66, 0.3);
	transform: translateY(-4px);
}

.tarjeta-evento__imagen {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--noche);
}

.tarjeta-evento__imagen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.tarjeta-evento:hover .tarjeta-evento__imagen img {
	transform: scale(1.04);
}

.tarjeta-evento__texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 28px 28px 30px;
}

.tarjeta-evento__cuando {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	color: var(--azul-hondo);
	font: 500 13px/1.4 Roboto, sans-serif;
}

.tarjeta-evento__cuando .icono {
	flex: none;
	width: 16px;
	height: 16px;
}

.tarjeta-evento__titulo {
	margin: 0 0 10px;
	color: var(--noche);
	font: 600 19px/1.3 Roboto, sans-serif;
}

.tarjeta-evento__titulo a {
	color: inherit;
}

/* El enlace del título cubre toda la tarjeta */
.tarjeta-evento__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.tarjeta-evento__resumen {
	margin: 0 0 22px;
	color: var(--texto-suave);
	font: 400 15px/1.5 Roboto, sans-serif;
}

.tarjeta-evento__mas {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	color: var(--azul-hondo);
	font: 600 14px/1 Roboto, sans-serif;
}

.tarjeta-evento__mas .icono {
	width: 16px;
	height: 16px;
	transition: transform var(--transicion);
}

.tarjeta-evento:hover .tarjeta-evento__mas .icono {
	transform: translateX(3px);
}

.tarjeta-evento:focus-within {
	outline: 2px solid var(--azul);
	outline-offset: 2px;
}

.tarjeta-articulo__titulo a:hover {
	color: var(--acento);
}

.tarjetas-articulo {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--esp-3);
	margin-bottom: var(--esp-3);
}

.tarjeta-articulo {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--blanco);
	box-shadow: var(--sombra-s);
	transition: box-shadow var(--transicion), transform var(--transicion);
}

.tarjeta-articulo:hover {
	box-shadow: var(--sombra);
	transform: translateY(-2px);
}

.tarjeta-articulo__imagen {
	display: block;
	overflow: hidden;
}

.tarjeta-articulo__imagen img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	height: auto;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.tarjeta-articulo:hover .tarjeta-articulo__imagen img {
	transform: scale(1.04);
}

.tarjeta-articulo__autor {
	margin: 18px 0 14px;
	font: 400 14px/17px Roboto, sans-serif;
}

.tarjeta-articulo__autor a {
	padding: 0 4px;
	background: rgba(19, 175, 249, 0.2);
	color: #17aff9;
}

.tarjeta-articulo__titulo {
	margin: 0;
	padding: var(--esp-2) 20px var(--esp-1);
	color: var(--noche);
	font: 600 18px/1.4 Roboto, sans-serif;
}

.tarjeta-articulo__resumen {
	margin: 0;
	padding: 0 20px 20px;
	color: var(--texto-suave);
	font: 400 15px/1.5 Roboto, sans-serif;
}

.tarjeta-articulo__titulo:last-child {
	padding-bottom: 20px;
}

.lista-flechas li {
	padding-bottom: 12px;
}

.lista-flechas li + li {
	margin-top: 12px;
}

.lista-flechas a {
	display: flex;
	align-items: center;
	font: 400 18px/28px Roboto, sans-serif;
	transition: color 0.3s;
}

.lista-flechas a:hover {
	color: var(--acento);
}

.lista-flechas .icono {
	flex: 0 0 auto;
	width: 17.5px;
	height: 14px;
	margin-right: 16.5px;
	color: var(--acento);
}

@media (max-width: 1024px) {
	.tarjetas-evento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tarjetas-articulo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.tarjetas-articulo {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.colaboradores {
		flex-wrap: wrap;
		height: auto;
	}

	.colaboradores li {
		flex: 0 0 50%;
		padding: 20px 10px;
	}

	.tarjetas-evento {
		grid-template-columns: minmax(0, 1fr);
	}

	.tarjeta-articulo {
		flex-basis: 100%;
		max-width: 100%;
		padding-right: 0;
		padding-left: 0;
	}

	.colaboradores li {
		padding: 10px;
	}

	/* Al 80 %, todos a la vez: guardan entre ellos el mismo tamaño visible (partes/colaboradores.php) */
	.colaboradores img {
		width: calc(var(--ancho, 100px) * 0.8);
		max-width: 88%;
		height: auto;
	}

	.tarjetas-articulo {
		margin-right: 0;
		margin-left: 0;
	}
}

/* ======================================================================
   3. CABECERA Y MENÚ
   ====================================================================== */

/* Cabecera */

.saltar-al-contenido {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100;
	border-radius: 0 0 8px 8px;
	padding: 12px 20px;
	background: var(--acento);
	color: var(--blanco);
	font: 500 16px/1 Roboto, sans-serif;
}

.saltar-al-contenido:focus {
	top: 0;
}

/*
 * La cabecera reserva su hueco en la página y dentro lleva la barra, que es la que se queda
 * fija al bajar. Arriba del todo es oscura y alta; al bajar se vuelve blanca y compacta.
 */

.cabecera {
	--cabecera-alto: 115px;
	--cabecera-fondo: var(--noche);
	--cabecera-texto: var(--fondo);
	--cabecera-realce: rgba(255, 255, 255, 0.08);
	--cabecera-gris: rgba(255, 255, 255, 0.08);
	--cabecera-panel: #2c3350;
	--cabecera-borde: rgba(255, 255, 255, 0.1);
	--menu-hueco: clamp(4px, calc(2.6vw - 24px), 14px);

	height: var(--cabecera-alto);
	background: var(--noche);
}

.cabecera--clara,
.cabecera.es-compacta {
	--cabecera-fondo: var(--blanco);
	--cabecera-texto: var(--noche);
	--cabecera-realce: rgba(19, 175, 249, 0.1);
	--cabecera-gris: #f1f2f4;
	--cabecera-panel: var(--blanco);
	--cabecera-borde: #e6e8ee;
}

.cabecera__barra {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--cabecera-alto);
	padding: 0 clamp(20px, 2.8vw, 40px) 0 clamp(24px, calc(16vw - 146px), 84px);
	background: var(--cabecera-fondo);
	color: var(--cabecera-texto);
	transition: height 0.25s, background-color 0.25s, box-shadow 0.25s;
}

/* «Modo dev» en el menú de la cuenta (inc/modo-dev.php): separado del resto y con un interruptor a la derecha */
li.modo-dev-opcion {
	margin-top: 4px;
	border-top: 1px solid var(--cabecera-borde, #e6e8ee);
	padding-top: 4px;
}

.ap-barra__mas li.modo-dev-opcion {
	border-top-color: #e6e8ee;
}

a.modo-dev-interruptor.modo-dev-interruptor {
	display: flex;
	align-items: center;
	gap: 8px;
}

.modo-dev-interruptor__pista {
	position: relative;
	flex: none;
	width: 30px;
	height: 18px;
	margin-left: auto;
	border-radius: 9px;
	background: rgba(127, 135, 150, 0.45);
	transition: background-color var(--transicion, 0.2s);
}

.modo-dev-interruptor__pista::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--blanco);
	box-shadow: 0 1px 2px rgba(15, 20, 40, 0.3);
	transition: transform var(--transicion, 0.2s);
}

.modo-dev-interruptor[aria-checked="true"] .modo-dev-interruptor__pista {
	background: var(--azul);
}

.modo-dev-interruptor[aria-checked="true"] .modo-dev-interruptor__pista::after {
	transform: translateX(12px);
}

/* Con la barra de WordPress a la vista (modo dev, inc/modo-dev.php), la cabecera fija va debajo de ella */
.admin-bar .cabecera__barra {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* El hueco que reserva la cabecera (la barra va fija encima) solo se ve si la página se desplaza más allá del borde
   (el rebote del trackpad o del móvil arriba del todo): entonces salía como una franja blanca bajo la barra. Del
   color con el que empieza el contenido, se funde con él. */
.cabecera--clara {
	background: var(--fondo);
}

body:has(.pagina > :is(.banda--blanca, .webinars-cabecera, .pub-cabecera, .evento-cabecera):first-child) .cabecera--clara {
	background: var(--blanco);
}

body:not(.pagina-equipo):has(.pagina:not(.ap-contenido) > :is(.banda--noche, .curso-portada, .beca-portada, .uti-cabecera):first-child) .cabecera--clara {
	background: var(--noche);
}

.cabecera--clara .cabecera__barra {
	box-shadow: 0 3px 16px 0 rgba(45, 47, 48, 0.04);
}

.cabecera.es-compacta .cabecera__barra {
	height: 76px;
	box-shadow: 0 3px 16px 0 rgba(45, 47, 48, 0.08);
}

.cabecera__logo {
	flex: 0 0 auto;
	border-radius: 6px;
}

.cabecera__logo img {
	display: block;
	width: auto;
	height: 90px;
	transition: height 0.25s;
}

.cabecera.es-compacta .cabecera__logo img {
	height: 58px;
}

.cabecera__logo .cabecera__logo-oscuro,
.cabecera--clara .cabecera__logo .cabecera__logo-claro,
.cabecera.es-compacta .cabecera__logo .cabecera__logo-claro {
	display: none;
}

.cabecera--clara .cabecera__logo .cabecera__logo-oscuro,
.cabecera.es-compacta .cabecera__logo .cabecera__logo-oscuro {
	display: block;
}

.cabecera__boton-menu {
	display: none;
}

.navegacion {
	flex: 1;
	min-width: 0;
}

.menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font: 400 clamp(14px, calc(0.42vw + 8.95px), 15px)/1 Roboto, sans-serif;
}

.menu li {
	position: relative;
}

.menu > li {
	display: flex;
	align-items: center;
}

.menu a {
	display: block;
	border-radius: 8px;
	padding: 14px var(--menu-hueco);
	color: inherit;
	white-space: nowrap;
	transition: color 0.2s, background-color 0.2s;
}

.menu a:hover,
.menu .current-menu-item > a,
.menu .current-menu-ancestor > a {
	color: var(--acento);
}

.menu__alternar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 44px;
	margin-left: calc(var(--menu-hueco) * -1 + 2px);
	border: 0;
	padding: 0;
	background: none;
	color: inherit;
	font-size: 14px;
	cursor: pointer;
}

.menu__alternar .icono {
	transition: transform 0.2s;
}

.menu__alternar[aria-expanded="true"] .icono {
	transform: rotate(180deg);
}

.menu li:hover > a,
.menu li:hover > .menu__alternar,
.menu__alternar[aria-expanded="true"] {
	color: var(--acento);
}

/* Submenús: un panel bajo el apartado. El segundo nivel se muestra dentro, sangrado. */

.menu > li > .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	display: none;
	min-width: 260px;
	border: 1px solid var(--cabecera-borde);
	border-radius: 12px;
	padding: 8px;
	background: var(--cabecera-panel);
	box-shadow: 0 16px 40px -12px rgba(15, 20, 40, 0.35);
}

.menu > li.abierto > .sub-menu {
	display: block;
}

.menu .sub-menu li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.menu .sub-menu a {
	flex: 1;
	padding: 11px 14px;
	font-size: 15px;
	line-height: 20px;
	white-space: normal;
}

/* Un poco de aire entre elementos: dos con fondo (la página en la que se está y la que tiene el ratón encima) no se
   tocan */
.menu .sub-menu > li:not(:last-child) {
	margin-bottom: 4px;
}

/* En los desplegables, al pasar el ratón (y la página en la que se está): solo un fondo gris detrás; el texto no
   cambia de color, ni en la cabecera clara ni en la oscura (Jandro, 16-10-2026) */
.menu .sub-menu a:hover,
.menu .sub-menu .current-menu-item > a {
	background: var(--cabecera-gris);
}

.menu .sub-menu li:hover > a,
.menu .sub-menu .current-menu-item > a,
.menu .sub-menu .current-menu-ancestor > a {
	color: inherit;
}

/* Segundo nivel: un grupo con su título, siempre a la vista. No hay que abrirlo. */

.menu .sub-menu .sub-menu {
	flex: 0 0 100%;
	margin: 0 0 6px 14px;
	border-left: 1px solid var(--cabecera-borde);
	padding-left: 6px;
}

.menu .sub-menu .menu-item-has-children > a[href="#"] {
	padding-bottom: 6px;
	color: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
	cursor: default;
}

.menu .sub-menu .menu-item-has-children > a[href="#"]:hover {
	background: none;
}

.menu > li > .sub-menu {
	max-height: calc(100vh - var(--cabecera-alto) - 16px);
	overflow-y: auto;
}

/* Los dos últimos elementos del menú son los botones «Área privada» y «Hacerse socio». Con la sesión
   iniciada «Área privada» lleva desplegable: entonces no hay botones, todo son elementos normales del menú.
   Se mira si alguno de los dos últimos tiene desplegable (no solo el último): a quien tiene además «Gestión UTI»,
   que va detrás, «Área privada» le salía como botón. */

.menu--con-botones:not(:has(> li.menu-item-has-children:nth-last-child(-n + 2))) > li:nth-last-child(2) {
	margin-left: var(--menu-hueco);
}

.menu--con-botones:not(:has(> li.menu-item-has-children:nth-last-child(-n + 2))) > li:nth-last-child(-n + 2) > a {
	margin-left: 8px;
	border: 2px solid var(--acento);
	border-radius: 34px;
	padding: 13px clamp(14px, calc(3.3vw - 25.5px), 22px);
	font-weight: 500;
}

.menu--con-botones:not(:has(> li.menu-item-has-children:nth-last-child(-n + 2))) > li:nth-last-child(2) > a {
	color: var(--acento);
}

.menu--con-botones:not(:has(> li.menu-item-has-children:nth-last-child(-n + 2))) > li:nth-last-child(2) > a:hover {
	background: rgba(19, 175, 249, 0.125);
}

.menu--con-botones:not(:has(> li.menu-item-has-children:nth-last-child(-n + 2))) > li:last-child > a {
	background: var(--acento);
	color: var(--blanco);
}

.menu--con-botones:not(:has(> li.menu-item-has-children:nth-last-child(-n + 2))) > li:last-child > a:hover {
	border-color: #0e9fe4;
	background: #0e9fe4;
	color: var(--blanco);
}

/* Con la sesión de socio iniciada (inc/menu-socios.php): «Mi área de socio», botón con borde, y la cuenta (foto y
   nombre) con su desplegable, como en la barra del área privada */
.menu--con-botones > li.menu-socio {
	margin-left: var(--menu-hueco);
}

.menu--con-botones > li.menu-socio > a {
	border: 2px solid var(--acento);
	border-radius: 34px;
	padding: 13px clamp(14px, calc(3.3vw - 25.5px), 22px);
	color: var(--acento);
	font-weight: 500;
}

.menu--con-botones > li.menu-socio > a:hover {
	background: rgba(19, 175, 249, 0.125);
}

.menu--con-botones > li.menu-cuenta > a {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
}

.menu-cuenta > a img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--blanco), 0 0 0 3px #e3e6eb;
}

/* El nombre, solo para lectores de pantalla (en el móvil, a la vista: allí sobra sitio) */
.menu-cuenta__nombre {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* El desplegable de la cuenta se abre hacia la izquierda, alineado con la foto (pegado al borde de la pantalla, el
   general «left: 0» lo sacaba por la derecha) */
.menu > li.menu-cuenta > .sub-menu {
	right: 0;
	left: auto;
	/* A la medida de sus dos opciones (los demás desplegables tienen un ancho fijo para textos largos) */
	width: max-content;
	min-width: 170px;
}

.menu-cuenta .sub-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
}

.menu-cuenta .sub-menu .icono {
	width: 16px;
	height: 16px;
}

/* En el menú del móvil (hasta 1199px): la cuenta con su nombre a la vista y sus opciones desplegadas debajo */
@media (max-width: 1199px) {
	.menu-cuenta__nombre {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}

	.menu--con-botones > li.menu-socio {
		margin-left: 0;
	}

	/* Mi perfil y Cerrar sesión, siempre a la vista bajo la cuenta (sin desplegar) */
	.menu > li.menu-cuenta > .sub-menu {
		position: static;
		display: block;
		visibility: visible;
		opacity: 1;
		max-height: none;
		margin: 0;
		border: 0;
		padding: 0 0 8px 44px;
		background: none;
		box-shadow: none;
		transform: none;
	}
}

/* «Gestión UTI» (solo para quien gestiona las solicitudes UTI, junto a «Área privada»): botón relleno, como
   «Hacerse socio» (Jandro, 16-10-2026). Se reconoce por su dirección, la misma en staging y en producción. */
.menu--con-botones > li > a[href*="/area-privada-serv/listado-uti/"] {
	margin-left: 8px;
	border: 2px solid var(--acento);
	border-radius: 34px;
	padding: 13px clamp(14px, calc(3.3vw - 25.5px), 22px);
	background: var(--acento);
	color: var(--blanco);
	font-weight: 500;
}

.menu--con-botones > li > a[href*="/area-privada-serv/listado-uti/"]:hover {
	border-color: #0e9fe4;
	background: #0e9fe4;
	color: var(--blanco);
}

.cabecera a:focus-visible,
.cabecera button:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 2px;
}

/* Variante de la Fundación Retina Plus+: dos logotipos, su propio menú y el rojo como realce */

.zona-fundacion {
	--acento: var(--rojo-fundacion);
}

.cabecera--fundacion .cabecera__barra {
	padding-left: clamp(20px, 2.9vw, 42px);
}

.cabecera__logos {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: clamp(16px, 2.8vw, 40px);
}

.cabecera__logos img {
	display: block;
	width: auto;
	transition: height 0.25s;
}

.cabecera__logo-fundacion {
	height: 34px;
}

.cabecera__logo-serv {
	height: 60px;
}

.cabecera.es-compacta .cabecera__logo-fundacion {
	height: 28px;
}

.cabecera.es-compacta .cabecera__logo-serv {
	height: 46px;
}

/* Menú de la Fundación como era antes: barra más alta, texto casi negro de 14 px,
   más aire entre apartados y la flecha fina pegada al texto */

@media (min-width: 1200px) {
	.cabecera--fundacion {
		--cabecera-alto: 130px;
	}

	.cabecera--fundacion .cabecera__barra {
		padding-right: 10px;
	}

	.cabecera--fundacion .cabecera__logo-serv {
		width: 60px;
		height: 90px;
		object-fit: contain;
	}

	.cabecera--fundacion .menu > li > .sub-menu {
		border: 1px solid #ececec;
		border-radius: 18px;
		padding: 10px 0;
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
	}

	.cabecera--fundacion .sub-menu a {
		border-bottom: 1px solid #f2f2f2;
		border-radius: 0;
		padding: 16px 24px;
		color: #343434;
		font-size: 13px;
		line-height: 40px;
		white-space: normal;
	}

	.cabecera--fundacion .sub-menu li:last-child > a {
		border-bottom: 0;
	}

	.cabecera--fundacion .sub-menu a {
		transition: color 0.2s, padding-left 0.2s, box-shadow 0.2s, background-color 0.2s;
	}

	/* Al pasar: barra roja a la izquierda y el texto entra un poco; la página actual, sobre gris */
	.cabecera--fundacion .sub-menu a:hover,
	.cabecera--fundacion .sub-menu .current-menu-item > a {
		padding-left: 32px;
		color: var(--rojo-fundacion);
	}

	.cabecera--fundacion .sub-menu a:hover {
		background: none;
		box-shadow: inset 4px 0 0 var(--rojo-fundacion);
	}

	.cabecera--fundacion .sub-menu .current-menu-item > a {
		background: #f7f7f7;
	}

	.cabecera--fundacion .menu {
		color: #111010;
		font-size: 14px;
	}

	.cabecera--fundacion .menu > li > a {
		padding: 18px 20px;
	}

	.cabecera--fundacion .menu > .menu-item-has-children > a {
		padding-right: 8px;
	}

	.cabecera--fundacion .menu__alternar {
		width: 10px;
		margin: 0 20px 0 0;
		font-size: 15px;
	}
}

/* Por debajo de 1200 px el menú no cabe en una línea: se pliega tras un botón */

@media (max-width: 1199px) {
	.cabecera {
		--cabecera-alto: 76px;
	}

	.cabecera__barra {
		padding: 0 12px 0 20px;
	}

	.cabecera__logo img,
	.cabecera.es-compacta .cabecera__logo img {
		height: 58px;
	}

	.cabecera__logo-fundacion,
	.cabecera.es-compacta .cabecera__logo-fundacion {
		height: 26px;
	}

	.cabecera__logo-serv,
	.cabecera.es-compacta .cabecera__logo-serv {
		height: 44px;
	}

	.cabecera__boton-menu {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		margin-left: auto;
		border: 0;
		border-radius: 8px;
		padding: 0 10px;
		background: none;
		color: inherit;
		font: 500 15px/1 Roboto, sans-serif;
		cursor: pointer;
	}

	.cabecera__boton-menu .icono {
		font-size: 24px;
	}

	.cabecera__icono-cerrar,
	.cabecera.menu-abierto .cabecera__icono-abrir {
		display: none;
	}

	.cabecera.menu-abierto .cabecera__icono-cerrar {
		display: inline-block;
	}

	/* Fundación en móvil, como era antes: logotipos grandes y solo el icono, en rojo */
	.cabecera--fundacion {
		--cabecera-alto: 108px;
	}

	.cabecera--fundacion .cabecera__barra,
	.cabecera--fundacion.es-compacta .cabecera__barra {
		height: var(--cabecera-alto);
	}

	.cabecera--fundacion .cabecera__logos {
		gap: 28px;
	}

	.cabecera--fundacion .cabecera__logo-fundacion,
	.cabecera--fundacion.es-compacta .cabecera__logo-fundacion {
		height: 34px;
	}

	.cabecera--fundacion .cabecera__logo-serv,
	.cabecera--fundacion.es-compacta .cabecera__logo-serv {
		width: 51px;
		height: 90px;
		object-fit: contain;
	}

	.cabecera--fundacion .cabecera__boton-texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.cabecera--fundacion .cabecera__boton-menu {
		color: var(--rojo-fundacion);
	}

	.cabecera--fundacion .cabecera__boton-menu .icono {
		font-size: 32px;
	}

	.cabecera--fundacion .navegacion {
		top: var(--cabecera-alto);
	}

	.navegacion {
		position: fixed;
		top: 76px;
		right: 0;
		bottom: 0;
		left: 0;
		display: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px 16px 32px;
		background: var(--cabecera-fondo);
	}

	.admin-bar .navegacion {
		top: calc(76px + var(--wp-admin--admin-bar--height, 46px));
	}

	.cabecera.menu-abierto .navegacion {
		display: block;
	}

	.menu {
		display: block;
		font-size: 17px;
	}

	.menu a {
		font-size: inherit;
	}

	.menu > li {
		flex-wrap: wrap;
		border-bottom: 1px solid var(--cabecera-borde);
	}

	.menu a {
		flex: 1;
		padding: 18px 8px;
		white-space: normal;
	}

	.menu__alternar {
		width: 52px;
		height: 52px;
		margin-left: 0;
		font-size: 18px;
	}

	.menu > li > .sub-menu {
		position: static;
		flex: 0 0 100%;
		min-width: 0;
		max-height: none;
		margin-bottom: 10px;
		border: 0;
		border-radius: 10px;
		padding: 6px;
		background: var(--cabecera-realce);
		box-shadow: none;
	}

	.menu .sub-menu a {
		padding: 13px 12px;
		font-size: 16px;
	}

	.menu .sub-menu .menu-item-has-children > a[href="#"] {
		font-size: 12px;
	}

	.menu--con-botones:not(:has(> li.menu-item-has-children:nth-last-child(-n + 2))) > li:nth-last-child(-n + 2) {
		margin: 16px 0 0;
		border-bottom: 0;
	}

	.menu--con-botones:not(:has(> li.menu-item-has-children:nth-last-child(-n + 2))) > li:nth-last-child(-n + 2) > a {
		margin: 0;
		padding: 16px 22px;
		font-size: 16px;
		text-align: center;
	}

	.menu--con-botones > li:has(> a[href*="/area-privada-serv/listado-uti/"]) {
		margin: 16px 0 0;
		border-bottom: 0;
	}

	.menu--con-botones > li > a[href*="/area-privada-serv/listado-uti/"] {
		margin: 0;
		padding: 16px 22px;
		font-size: 16px;
		text-align: center;
	}

	body.menu-abierto {
		overflow: hidden;
	}

	/* Menú del móvil, más limpio (Jandro, 17-10-2026: «queda un poco caótico y mal maquetado»): filas iguales, un
	   solo apartado abierto (serv.js), submenús sin caja con una guía a la izquierda, grupos con un título pequeño
	   sin más sangría, la página actual en azul y los botones del final en una fila */
	.navegacion {
		padding: 4px 20px calc(32px + env(safe-area-inset-bottom));
	}

	.menu {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 12px;
	}

	.menu > li {
		grid-column: 1 / -1;
		align-items: center;
	}

	.menu > li > a {
		padding: 16px 4px;
		font-weight: 500;
	}

	.menu__alternar {
		width: 44px;
		height: 44px;
		margin-right: -10px;
		border-radius: 50%;
	}

	.menu > li.abierto > a {
		color: var(--acento);
	}

	.menu > li > .sub-menu {
		margin: 0 0 14px 4px;
		border-left: 2px solid var(--cabecera-borde);
		border-radius: 0;
		padding: 0 0 0 8px;
		background: none;
	}

	.menu .sub-menu a {
		border-radius: 8px;
		padding: 10px 12px;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.35;
		opacity: 0.8;
	}

	.menu .sub-menu a:hover,
	.menu .sub-menu .current-menu-item > a {
		opacity: 1;
	}

	.menu .sub-menu .current-menu-item > a {
		color: var(--acento);
	}

	/* Grupos dentro de un submenú (Memorias de actividades…): título pequeño, mismos márgenes que el resto */
	.menu .sub-menu .sub-menu {
		margin: 0;
		border-left: 0;
		padding-left: 0;
	}

	.menu .sub-menu .menu-item-has-children > a[href="#"] {
		padding: 16px 12px 4px;
		font-size: 11px;
		opacity: 0.55;
	}

	/* Visitantes: «Área privada» y «Hacerse socio», uno al lado del otro */
	.menu--con-botones:not(:has(> li.menu-item-has-children:nth-last-child(-n + 2))) > li:nth-last-child(-n + 2) {
		grid-column: auto;
		margin: 24px 0 0;
	}

	.menu--con-botones:not(:has(> li.menu-item-has-children:nth-last-child(-n + 2))) > li:nth-last-child(-n + 2) > a {
		padding: 14px 8px;
		font-size: 14px;
		letter-spacing: 0.02em;
	}

	/* Socios: «Mi área de socio» centrado y la cuenta en una tarjeta */
	.menu--con-botones > li.menu-socio {
		margin: 24px 0 0;
		border-bottom: 0;
	}

	.menu--con-botones > li.menu-socio > a {
		padding: 14px 8px;
		text-align: center;
	}

	.menu--con-botones > li.menu-cuenta {
		margin: 12px 0 0;
		border: 0;
		border-radius: 14px;
		padding: 6px 14px 10px;
		background: var(--cabecera-realce);
	}

	.menu--con-botones > li.menu-cuenta > a {
		gap: 12px;
		margin: 0;
		padding: 10px 0;
	}

	.menu-cuenta > a img {
		width: 40px;
		height: 40px;
	}

	.menu > li.menu-cuenta > .sub-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		border-left: 0;
		padding: 2px 0 0;
	}

	.menu > li.menu-cuenta > .sub-menu > li {
		flex: 1 1 0;
		margin: 0;
	}

	.menu > li.menu-cuenta > .sub-menu > li.modo-dev-opcion {
		flex-basis: 100%;
		margin: 0;
		border: 0;
		padding: 0;
	}

	.menu > li.menu-cuenta > .sub-menu a {
		justify-content: center;
		border: 1px solid var(--cabecera-borde);
		border-radius: 10px;
		padding: 10px 12px;
		font-size: 14px;
		opacity: 1;
	}
}

/* ======================================================================
   4. PIE Y FORMULARIO DE CONTACTO
   ====================================================================== */

/* Pie */

.pie {
	background: var(--noche);
	color: var(--fondo);
}

.pie a {
	transition: color 0.2s;
}

.pie a:hover {
	color: var(--acento);
}

.pie__colaboradores {
	padding: 5% 0 calc(120px + 3%);
	background: var(--blanco);
}

.pie__contacto {
	padding: 5%;
	background: var(--noche) url("../../../descargasWP/Footer-back-.svg") bottom center no-repeat;
}

.pie__contacto .contenedor {
	display: flex;
}

.pie__contacto-texto {
	flex: 0 0 50%;
	padding: 10px;
}

.pie__contacto-texto h2 {
	margin-bottom: 90px;
	color: var(--fondo-claro);
	font: 600 60px/66px Roboto, sans-serif;
}

.pie__contacto-texto p {
	font: 400 15px/24px Roboto, sans-serif;
}

.pie__formulario {
	position: relative;
	z-index: 2;
	flex: 0 0 50%;
	margin-top: -120px;
	border: 1px solid #e2e4e6;
	border-radius: 8px;
	padding: 36px;
	background: var(--fondo-claro);
	box-shadow: 0 0 28px -8px rgba(59, 66, 88, 0.06);
}

/* El cuarto de círculo azul de la esquina: en CSS, nítido en cualquier pantalla (antes una imagen PNG de 73px, que en
   pantallas retina se veía pixelada) */
.pie__formulario-adorno {
	position: absolute;
	top: -39px;
	right: -37px;
	width: 73px;
	height: 73px;
	border-top-right-radius: 100%;
	background: var(--azul);
}

/* Formulario de contacto (Contact Form 7) */

.pie__formulario .wpcf7 {
	margin-top: 20px;
}

.pie__formulario form p {
	margin-bottom: 15px;
	color: #918f8f;
}

/* Los saltos de línea del formulario (antes del texto legal y entre las dos casillas) sobran: el espacio lo dan los
   márgenes */
.pie__formulario form p > br {
	display: none;
}

/* Texto legal: 11px con un interlineado acorde (heredaba 28px) */
.pie__formulario form p > span[style] {
	display: block;
	margin: 4px 0 6px;
	line-height: 1.6 !important;
}

/* Aviso de campo obligatorio (en rojo, pegado a su campo; el campo no cambia de color) */
.pie__formulario .wpcf7-not-valid-tip {
	margin: -12px 0 14px;
	color: #b42318;
	font: 400 13px/1.4 Roboto, sans-serif;
}

/* Campos como los del resto de formularios de la web (acceso de socios, área privada): borde fino, esquinas de 8px,
   halo azul claro al escribir; casillas propias y botón azul (Jandro, 16-10-2026) */
.pie__formulario form label {
	display: block;
	margin-bottom: 6px;
	color: var(--noche);
	font: 500 14px/1.4 Roboto, sans-serif;
	letter-spacing: 0;
}

.pie__formulario form label br {
	display: none;
}

.pie__formulario .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.pie__formulario input[type="text"],
.pie__formulario input[type="email"],
.pie__formulario textarea {
	width: 100%;
	min-height: 48px;
	height: auto;
	margin-bottom: 18px;
	border: 1px solid #d6dae3;
	border-radius: var(--radio-s);
	padding: 12px 14px;
	background: var(--blanco);
	color: var(--noche);
	font: 400 15px/22px Roboto, sans-serif;
	letter-spacing: normal;
	box-shadow: 0 1px 2px rgba(37, 43, 66, 0.04);
	transition: border-color var(--transicion), box-shadow var(--transicion);
}

.pie__formulario :is(input, textarea)::placeholder {
	color: #9aa1ad;
}

.pie__formulario :is(input[type="text"], input[type="email"], textarea):hover {
	border-color: #b9c0cd;
}

.pie__formulario :is(input[type="text"], input[type="email"], textarea):focus {
	border-color: var(--azul);
	outline: none;
	box-shadow: 0 0 0 3px rgba(19, 175, 249, 0.18);
}

.pie__formulario textarea {
	height: 128px;
	resize: vertical;
}

.pie__formulario form span[style] a {
	color: var(--azul-hondo);
}

.pie__formulario .wpcf7-list-item {
	display: block;
	margin: 0 0 12px;
}

.pie__formulario .wpcf7-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	cursor: pointer;
}

/* Casilla propia, como «Mantener la sesión iniciada»: cuadrado de esquinas suaves y, marcada, azul con el tick blanco */
.pie__formulario .wpcf7-checkbox input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1.5px solid #b9c0cd;
	border-radius: 6px;
	background: var(--blanco) center / 13px no-repeat;
	appearance: none;
	cursor: pointer;
	transition: background-color var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}

.pie__formulario .wpcf7-checkbox input:hover {
	border-color: var(--azul);
}

.pie__formulario .wpcf7-checkbox input:checked {
	border-color: var(--azul);
	background-color: var(--azul);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23fff'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
}

.pie__formulario .wpcf7-checkbox input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(19, 175, 249, 0.18);
}

.pie__formulario .wpcf7-list-item-label {
	margin: 0;
	color: var(--texto-suave);
	font: 400 13px/1.45 Roboto, sans-serif;
}

.pie__formulario .wpcf7-spinner {
	position: absolute;
}

/* Alta y renovación, último paso: la tarjeta del pago con Redsys (serv.js). La lista de campos del plugin no se ve. */
.boton-pago-redsys .p-concepto-redsys,
.boton-pago-redsys > form > br {
	display: none;
}

.pago-cuota {
	max-width: 620px;
	margin: 8px 0 40px;
	border: 1px solid var(--borde, #e3e6ec);
	border-radius: 16px;
	padding: 32px;
	background: var(--blanco, #fff);
	box-shadow: 0 10px 30px -18px rgba(15, 20, 40, 0.35);
}

.pago-cuota__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: rgba(19, 175, 249, 0.12);
	color: #0b7fb8;
}

.pago-cuota .pago-cuota__titulo {
	margin: 0 0 10px;
	color: var(--noche, #252b42);
	font: 600 24px/1.25 Roboto, sans-serif;
}

.pago-cuota__texto {
	margin: 0 0 20px;
	color: var(--texto-suave, #5b6275);
	font: 400 16px/1.55 Roboto, sans-serif;
}

.pago-cuota__resumen {
	display: grid;
	gap: 0;
	margin: 0 0 24px;
	border-radius: 12px;
	background: #f4f6f9;
}

.pago-cuota__resumen > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
}

.pago-cuota__resumen > div + div {
	border-top: 1px solid #e3e6ec;
}

.pago-cuota__resumen dt {
	flex: none;
	white-space: nowrap;
	color: var(--texto-suave, #5b6275);
	font: 500 14px/1.4 Roboto, sans-serif;
}

.pago-cuota__resumen dd {
	margin: 0;
	color: var(--noche, #252b42);
	font: 500 15px/1.4 Roboto, sans-serif;
	text-align: right;
	overflow-wrap: anywhere;
}

.pago-cuota__resumen .pago-cuota__importe {
	font-size: 20px;
	font-weight: 700;
}

.pago-cuota .boton-pago-redsys,
.pago-cuota .boton-pago-redsys form,
.pago-cuota input.boton-redsys.boton-redsys {
	width: 100% !important;
	max-width: none !important;
	margin: 0;
}

.pago-cuota input.boton-redsys {
	width: 100%;
	min-height: 52px;
	border: 0;
	border-radius: var(--radio-boton, 999px);
	padding: 14px 24px;
	background: var(--azul, #13aff9);
	color: #fff;
	font: 600 17px/1.2 Roboto, sans-serif;
	cursor: pointer;
	transition: background-color var(--transicion, 0.2s);
}

.pago-cuota input.boton-redsys:hover,
.pago-cuota input.boton-redsys:focus-visible {
	background: var(--azul-hondo, #0b7fb8);
}

.pago-cuota__nota {
	margin: 14px 0 0;
	color: var(--texto-suave, #5b6275);
	font: 400 13px/1.45 Roboto, sans-serif;
	text-align: center;
}

@media (max-width: 560px) {
	.pago-cuota {
		padding: 22px 18px;
	}
	.pago-cuota__resumen > div {
		flex-direction: column;
		gap: 2px;
	}
	.pago-cuota__resumen dd {
		text-align: left;
	}
}

/*
 * Formularios de Contact Form 7 (el del pie y los demás): mientras se envía, el botón dice «Enviando…» con una rueda
 * (serv.js) y no se puede volver a pulsar; la respuesta, como aviso legible: verde si se ha enviado, rojo si falta
 * algo o ha fallado (Jandro, 19-10-2026: «debería salir el spinner de enviando… y el mensaje de éxito no se ve»).
 * La rueda propia de Contact Form 7 se esconde.
 */
.wpcf7 .wpcf7-spinner {
	display: none !important;
}

.wpcf7-form.submitting input[type="submit"],
.wpcf7-form.submitting button[type="submit"] {
	padding-left: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
	background-position: calc(50% - 52px) center;
	background-repeat: no-repeat;
	background-size: 18px;
	cursor: progress;
	pointer-events: none;
	opacity: 0.85;
}

.wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 12px 16px;
	font: 400 15px/1.45 Roboto, sans-serif;
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output:empty {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #b7e4c7;
	background: #e8f7ee;
	color: #116b3a;
}

.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .spam, .aborted) .wpcf7-response-output {
	border-color: #f5c2c0;
	background: #fdecea;
	color: #9b1c1c;
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 4px;
	color: #b42318;
	font: 400 13px/1.35 Roboto, sans-serif;
}

.pie__formulario input[type="submit"] {
	width: 100%;
	margin-top: 8px;
	border: 0;
	border-radius: var(--radio-boton);
	padding: 14px;
	background: var(--azul);
	color: var(--blanco);
	font: 500 16px/1.2 Roboto, sans-serif;
	cursor: pointer;
	transition: background-color var(--transicion);
}

.pie__formulario input[type="submit"]:hover {
	background: var(--azul-hondo);
}


/* Menús del pie: con los márgenes de la portada (1280px como mucho) y cinco columnas iguales; dos en el móvil */
.pie__enlaces {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr)); /* las columnas del menú principal (serv_pie_enlaces) */
	gap: 32px;
	max-width: calc(1280px + 2 * (8.47vw + 10px));
	margin-inline: auto;
	padding: 56px calc(8.47% + 10px) 0;
}

.pie__enlaces h2 {
	margin-bottom: 16px;
	font: 500 18px/21px Roboto, sans-serif;
}

.pie__enlaces ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pie__enlaces li {
	line-height: 20px;
}

/* Algunos títulos del menú son largos («Decálogo Ético de la SERV para el uso de la IA»): en dos líneas, juntas */
.pie__enlaces a {
	display: block;
	padding: 5px 0;
	color: rgba(255, 255, 255, 0.78);
	font: 400 14px/20px Roboto, sans-serif;
}

/* Subgrupos del menú («Memorias de actividades», «SERV en directo»), con su rótulo, como en el desplegable */
.pie__grupo {
	margin-top: 10px;
}

.pie__rotulo {
	display: block;
	padding: 5px 0 2px;
	color: rgba(255, 255, 255, 0.5);
	font: 500 11px/16px Roboto, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pie__grupo ul {
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	padding-left: 12px;
}

/* Entre el móvil y una pantalla ancha, seis columnas quedan estrechas: tres */
@media (min-width: 1025px) and (max-width: 1240px) {
	.pie__enlaces {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pie__enlaces a:hover {
	color: var(--azul);
}

.pie__cierre {
	padding: 50px 10px 25px;
	text-align: center;
}

.pie__cierre img {
	width: 96px;
	height: 92px;
	margin-bottom: 20px;
}

.pie__cierre p {
	margin-bottom: 20px;
	font: 400 16px/26px Roboto, sans-serif;
}

.pie__redes {
	display: flex;
	justify-content: center;
	gap: 5px;
	margin-bottom: 20px;
}

.pie__redes a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 20px;
}

.pie__redes .icono {
	width: 19px;
	height: 19px;
}

.pie__cierre .pie__legal {
	font-size: 14px;
	line-height: 30px;
}

@media (max-width: 1024px) {
	.pie__contacto-texto h2 {
		font-size: 44px;
		line-height: 50px;
	}
}

@media (max-width: 767px) {
	.pie__contacto .contenedor {
		flex-direction: column;
	}

	.pie__contacto-texto h2 {
		margin-bottom: 40px;
		font-size: 36px;
		line-height: 42px;
	}

	.pie__formulario {
		margin-top: 40px;
		padding: 24px;
	}

	.pie__formulario-adorno {
		right: -10px;
	}




	.pie__colaboradores {
		padding-bottom: 37px;
	}

	.pie__enlaces {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
		padding: 40px 22px 0;
	}

	.pie__contacto-texto h2 {
		font-size: 40px;
		line-height: 44px;
	}

	.pie__formulario {
		margin-top: 42px;
		padding: 36px;
	}

	.pie__formulario-adorno {
		right: -6px;
	}



}

/* Pie de la Fundación Retina Plus+ */

.pie-fundacion__banda {
	padding: 72px 20px 84px;
	background: var(--rojo-fundacion);
	color: var(--blanco);
	font: 400 18px/28px Roboto, sans-serif;
	text-align: center;
}

.pie-fundacion__banda img {
	width: auto;
	height: 41px;
	margin-bottom: 28px;
}

.pie-fundacion__banda p + p {
	margin-top: 14px;
}

.pie-fundacion__legal {
	padding: 10px 20px;
	background: var(--blanco);
	color: #333;
	font: 400 18px/28px Roboto, sans-serif;
	text-align: center;
}

.pie-fundacion a:hover {
	text-decoration: underline;
}

/* ======================================================================
   5. CONTENIDO DE LAS PÁGINAS (lo que se escribe en el editor de WordPress)
   ====================================================================== */

.pagina {
	--pagina-margen: 13%;

	/* Arriba, el mismo aire en todas las páginas: 56px en el ordenador, 32px en el móvil (antes 4% + 60px: unos 118px,
	   demasiado bajo la barra; Jandro, 17-10-2026) */
	padding: clamp(32px, 2.5vw + 20px, 56px) 0 5%;
	background: var(--fondo);
	color: var(--texto);
	font: 400 18px/28px Roboto, sans-serif;
	/* Direcciones web y palabras muy largas se parten antes que ensanchar la página en el móvil */
	overflow-wrap: anywhere;
}

/* Todo va en una columna centrada; las bandas de color ocupan el ancho entero. */

.pagina > * {
	margin: 0 var(--pagina-margen) 20px;
}

.pagina > .banda {
	margin: 0;
	padding: 5% var(--pagina-margen);
}

/* Separación entre el texto y una banda; dos bandas seguidas se tocan. */

.pagina > :not(.banda, .portadilla):has(+ .banda) {
	margin-bottom: 5%;
}

.pagina > :is(.banda, .portadilla) + :not(.banda) {
	margin-top: 5%;
}

.pagina > .banda--noche + .banda--noche,
.pagina > .banda--blanca + .banda--blanca,
.pagina > .banda--celeste + .banda--celeste,
.pagina > .banda--acento + .banda--acento {
	padding-top: 0;
}

.pagina > .banda:last-child {
	margin-bottom: -5%;
}

.banda > .wp-block-group__inner-container > * + * {
	margin-top: 20px;
}

.banda--noche {
	background: var(--noche);
	color: var(--fondo);
}

.banda--blanca {
	background: var(--blanco);
}

.banda--celeste {
	background: #d0effe;
}

.banda--acento {
	background: var(--acento);
	color: var(--blanco);
}

.pagina :is(.banda--acento, .portadilla) :is(h1, h2, h3) {
	color: inherit;
}

/* Pictogramas (iconos sueltos subidos como imagen). En las bandas de color se pintan en blanco. */

.pagina :is(.banda--noche, .banda--acento) .pictograma img {
	filter: brightness(0) invert(1);
}

/* Portadilla: foto de fondo oscurecida con el título encima (bloque «Fondo» del editor) */

.pagina > .portadilla {
	position: relative;
	display: flex;
	overflow: hidden;
	align-items: flex-end;
	min-height: 400px;
	margin: 0;
	padding: 40px var(--pagina-margen);
	color: var(--blanco);
}

.portadilla .wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portadilla .wp-block-cover__background {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #000;
	opacity: 0.5;
}

.portadilla .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.pagina:has(> :is(.portadilla, .banda):first-child) {
	padding-top: 0;
}

/* Carrusel (Slider Revolution) al principio de la página: pegado a la cabecera y a todo el ancho.
   El carrusel quita su párrafo «rs-p-wp-fix» al cargar, por eso se miran los dos. */
.pagina:has(> :is(.rs-p-wp-fix, sr7-module):first-child) {
	padding-top: 0;
}

.pagina > .rs-p-wp-fix {
	margin: 0;
}

.pagina > sr7-module {
	margin-right: 0;
	margin-left: 0;
}

/* En la Fundación el contenido empezaba más cerca de la cabecera */
.zona-fundacion .pagina:not(:has(> :is(.portadilla, .banda, .rs-p-wp-fix, sr7-module):first-child)) {
	padding-top: 72px;
}

@media (max-width: 767px) {
	.zona-fundacion .pagina:not(:has(> :is(.portadilla, .banda, .rs-p-wp-fix, sr7-module):first-child)) {
		padding-top: 40px;
	}
}

.pagina > .portadilla + .banda {
	padding-top: 5%;
}

.pagina h1,
.pagina h2,
.pagina h3 {
	color: var(--noche);
	font-weight: 700;
}

.pagina .banda--noche :is(h1, h2, h3) {
	color: inherit;
}

.pagina h1.titulo-seccion {
	margin-bottom: 4%;
}

.pagina :is(h1, h2).titulo-seccion {
	color: var(--acento);
}

.pagina h1 {
	font-size: clamp(28px, 2.2vw + 18px, 38px);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.pagina h2 {
	margin-top: clamp(32px, 4vw, 56px);
	margin-bottom: var(--esp-2);
	font-size: clamp(23px, 1.2vw + 17px, 30px);
	line-height: 1.25;
	letter-spacing: -0.005em;
}

.pagina h2.titulo-seccion {
	font-size: clamp(28px, 2.2vw + 18px, 38px);
	line-height: 1.2;
}

.pagina h3 {
	margin-bottom: var(--esp-1);
	font-size: clamp(19px, 0.5vw + 16px, 22px);
	line-height: 1.3;
}

.pagina .banda h2,
.pagina h1 + h2 {
	margin-top: 0;
}

.pagina p,
.pagina ul,
.pagina ol {
	margin-bottom: 16px;
}

.pagina ul,
.pagina ol {
	padding-left: 40px;
	list-style: revert;
}

.pagina li {
	margin-bottom: 10px;
}

.pagina a:not(.wp-block-button__link) {
	color: var(--acento);
	transition: color var(--transicion);
}

.pagina a:not(.wp-block-button__link):hover {
	color: var(--azul-hondo);
}

/* En los párrafos y listas, los enlaces se distinguen también sin color */
.pagina :is(p, li):not(.tarjeta-articulo__titulo, nav li, .accesos > li, .accesos-socio > li, .ultimas-entradas > li, .publicaciones-atajos > li, .videos-congreso > li, .evento-datos > li, .acceso-socios__volver, .pubmed-resultado, .pubmed-articulo__texto > p, .vademecum-lista > li, .vademecum-nota > p, .vademecum-nota__mas > p, .gestion-mensaje__acciones) > a:not(.wp-block-button__link, .boton, .acceso) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Imágenes del contenido con las esquinas de la web. Los logotipos en SVG (PubSERV, patrocinadores...)
   no: en una imagen baja el redondeo se come los bordes y la deja ovalada. */
.pagina :is(.wp-block-image, .entrada-imagen) img:not([src*=".svg"]) {
	border-radius: var(--radio);
}

.pagina .texto-grande {
	font-size: 21px;
	line-height: 30px;
}

.pagina .texto-pequeno {
	font-size: 16px;
	line-height: 24px;
}

.pagina .has-text-align-center {
	text-align: center;
}

.pagina .has-text-align-right {
	text-align: right;
}

.pagina figure {
	margin-block: 0 20px;
}

.pagina .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	align-items: center;
}

/* Filas de tarjetas (imagen arriba): todas empiezan a la misma altura aunque el nombre ocupe dos líneas */
.pagina .wp-block-columns:has(> .wp-block-column > :is(.wp-block-image, .ficha):first-child) {
	align-items: flex-start;
}

.pagina :is(.banda--noche, .banda--acento) .wp-block-columns {
	align-items: flex-start;
}

.pagina .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

/*
 * Columnas con ancho elegido en el editor (20 %, 25 %...). El editor escribe ese ancho en línea y,
 * sin más, una fila con menos columnas las estira: las tarjetas de una misma rejilla salían de
 * tamaños distintos. Aquí cada columna mide exactamente su porcentaje menos su parte del hueco,
 * tenga la fila las columnas que tenga. Anular un estilo en línea exige !important: es la excepción
 * admitida en las normas del tema.
 */
.pagina .wp-block-columns {
	--hueco-columnas: 32px;
}

.pagina .wp-block-column[style*="flex-basis:10%"] {
	flex: 0 0 calc(10% - var(--hueco-columnas) * 0.9) !important;
}

.pagina .wp-block-column[style*="flex-basis:11%"] {
	flex: 0 0 calc(11% - var(--hueco-columnas) * 0.89) !important;
}

.pagina .wp-block-column[style*="flex-basis:13%"] {
	flex: 0 0 calc(13% - var(--hueco-columnas) * 0.87) !important;
}

.pagina .wp-block-column[style*="flex-basis:14%"] {
	flex: 0 0 calc(14% - var(--hueco-columnas) * 0.86) !important;
}

.pagina .wp-block-column[style*="flex-basis:16%"] {
	flex: 0 0 calc(16% - var(--hueco-columnas) * 0.84) !important;
}

.pagina .wp-block-column[style*="flex-basis:20%"] {
	flex: 0 0 calc(20% - var(--hueco-columnas) * 0.8) !important;
}

.pagina .wp-block-column[style*="flex-basis:24.04%"] {
	flex: 0 0 calc(24.04% - var(--hueco-columnas) * 0.7596) !important;
}

.pagina .wp-block-column[style*="flex-basis:25%"] {
	flex: 0 0 calc(25% - var(--hueco-columnas) * 0.75) !important;
}

.pagina .wp-block-column[style*="flex-basis:30%"] {
	flex: 0 0 calc(30% - var(--hueco-columnas) * 0.7) !important;
}

.pagina .wp-block-column[style*="flex-basis:30.33%"] {
	flex: 0 0 calc(30.33% - var(--hueco-columnas) * 0.6967) !important;
}

.pagina .wp-block-column[style*="flex-basis:33%"] {
	flex: 0 0 calc(33% - var(--hueco-columnas) * 0.67) !important;
}

.pagina .wp-block-column[style*="flex-basis:33.31%"] {
	flex: 0 0 calc(33.31% - var(--hueco-columnas) * 0.6669) !important;
}

.pagina .wp-block-column[style*="flex-basis:33.33%"] {
	flex: 0 0 calc(33.33% - var(--hueco-columnas) * 0.6667) !important;
}

.pagina .wp-block-column[style*="flex-basis:35.02%"] {
	flex: 0 0 calc(35.02% - var(--hueco-columnas) * 0.6498) !important;
}

.pagina .wp-block-column[style*="flex-basis:36.05%"] {
	flex: 0 0 calc(36.05% - var(--hueco-columnas) * 0.6395) !important;
}

.pagina .wp-block-column[style*="flex-basis:37.02%"] {
	flex: 0 0 calc(37.02% - var(--hueco-columnas) * 0.6298) !important;
}

.pagina .wp-block-column[style*="flex-basis:38%"] {
	flex: 0 0 calc(38% - var(--hueco-columnas) * 0.62) !important;
}

.pagina .wp-block-column[style*="flex-basis:38.03%"] {
	flex: 0 0 calc(38.03% - var(--hueco-columnas) * 0.6197) !important;
}

.pagina .wp-block-column[style*="flex-basis:40%"] {
	flex: 0 0 calc(40% - var(--hueco-columnas) * 0.6) !important;
}

.pagina .wp-block-column[style*="flex-basis:41.2%"] {
	flex: 0 0 calc(41.2% - var(--hueco-columnas) * 0.588) !important;
}

.pagina .wp-block-column[style*="flex-basis:43.95%"] {
	flex: 0 0 calc(43.95% - var(--hueco-columnas) * 0.5605) !important;
}

.pagina .wp-block-column[style*="flex-basis:44.46%"] {
	flex: 0 0 calc(44.46% - var(--hueco-columnas) * 0.5554) !important;
}

.pagina .wp-block-column[style*="flex-basis:50%"] {
	flex: 0 0 calc(50% - var(--hueco-columnas) * 0.5) !important;
}

.pagina .wp-block-column[style*="flex-basis:55.54%"] {
	flex: 0 0 calc(55.54% - var(--hueco-columnas) * 0.4446) !important;
}

.pagina .wp-block-column[style*="flex-basis:56.06%"] {
	flex: 0 0 calc(56.06% - var(--hueco-columnas) * 0.4394) !important;
}

.pagina .wp-block-column[style*="flex-basis:58.8%"] {
	flex: 0 0 calc(58.8% - var(--hueco-columnas) * 0.412) !important;
}

.pagina .wp-block-column[style*="flex-basis:60%"] {
	flex: 0 0 calc(60% - var(--hueco-columnas) * 0.4) !important;
}

.pagina .wp-block-column[style*="flex-basis:62.32%"] {
	flex: 0 0 calc(62.32% - var(--hueco-columnas) * 0.3768) !important;
}

.pagina .wp-block-column[style*="flex-basis:64.1%"] {
	flex: 0 0 calc(64.1% - var(--hueco-columnas) * 0.359) !important;
}

.pagina .wp-block-column[style*="flex-basis:66.67%"] {
	flex: 0 0 calc(66.67% - var(--hueco-columnas) * 0.3333) !important;
}

.pagina .wp-block-column[style*="flex-basis:75%"] {
	flex: 0 0 calc(75% - var(--hueco-columnas) * 0.25) !important;
}

.pagina .wp-block-column[style*="flex-basis:75.97%"] {
	flex: 0 0 calc(75.97% - var(--hueco-columnas) * 0.2403) !important;
}

.pagina .wp-block-column[style*="flex-basis:84%"] {
	flex: 0 0 calc(84% - var(--hueco-columnas) * 0.16) !important;
}

.pagina .wp-block-column[style*="flex-basis:87%"] {
	flex: 0 0 calc(87% - var(--hueco-columnas) * 0.13) !important;
}

.pagina .wp-block-column[style*="flex-basis:100%"] {
	flex: 0 0 calc(100% - var(--hueco-columnas) * 0.0) !important;
}

/* En tableta, las columnas estrechas (rejillas de personas, logotipos...) van de tres en tres */
@media (min-width: 768px) and (max-width: 1024px) {
	.pagina .wp-block-column[style*="flex-basis:10%"] {
		flex: 0 0 calc(33.333% - var(--hueco-columnas) * 0.6667) !important;
	}

	.pagina .wp-block-column[style*="flex-basis:11%"] {
		flex: 0 0 calc(33.333% - var(--hueco-columnas) * 0.6667) !important;
	}

	.pagina .wp-block-column[style*="flex-basis:13%"] {
		flex: 0 0 calc(33.333% - var(--hueco-columnas) * 0.6667) !important;
	}

	.pagina .wp-block-column[style*="flex-basis:14%"] {
		flex: 0 0 calc(33.333% - var(--hueco-columnas) * 0.6667) !important;
	}

	.pagina .wp-block-column[style*="flex-basis:16%"] {
		flex: 0 0 calc(33.333% - var(--hueco-columnas) * 0.6667) !important;
	}

	.pagina .wp-block-column[style*="flex-basis:20%"] {
		flex: 0 0 calc(33.333% - var(--hueco-columnas) * 0.6667) !important;
	}

	.pagina .wp-block-column[style*="flex-basis:24.04%"] {
		flex: 0 0 calc(33.333% - var(--hueco-columnas) * 0.6667) !important;
	}

	.pagina .wp-block-column[style*="flex-basis:25%"] {
		flex: 0 0 calc(33.333% - var(--hueco-columnas) * 0.6667) !important;
	}
}

/* En móvil, una columna por fila */
@media (max-width: 767px) {
	.pagina .wp-block-column[style*="flex-basis"] {
		flex: 1 1 100% !important;
	}
}

.pagina .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.pagina .wp-block-separator {
	height: 1px;
	border: 0;
	background: var(--noche);
}

/* Columna de lectura más estrecha que la página, a un lado o centrada */

/* Nunca más ancha que la página menos sus márgenes: centrada en un móvil, seguiría dejando aire a los lados */
.columna--estrecha {
	max-width: min(450px, 100% - 2 * var(--pagina-margen));
}

.columna--media {
	max-width: min(720px, 100% - 2 * var(--pagina-margen));
}

.columna--centro {
	margin-inline: auto;
}

.columna--derecha {
	margin-left: auto;
}

.columna > .wp-block-group__inner-container > * + * {
	margin-top: 16px;
}

.pagina .pictograma {
	margin-bottom: 12px;
	text-align: center;
}

.pagina .pictograma img {
	width: auto;
	height: 40px;
}

/* Alineación de imágenes elegida en el editor */

.pagina .aligncenter {
	text-align: center;
}

.pagina .alignright {
	text-align: right;
}

/* Caja con icono: un punto azul a la izquierda, título y texto */

.caja-icono {
	position: relative;
	padding-left: 44px;
}

.caja-icono::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 24px;
	height: 24px;
	border: 6px solid #d0effe;
	border-radius: 50%;
	background: var(--acento);
}

.pagina .caja-icono h3 {
	margin-bottom: 2px;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
}

.pagina .caja-icono h3 a {
	color: inherit;
}

.pagina .caja-icono h3 a:hover {
	color: var(--acento);
}

.pagina .caja-icono p {
	margin-bottom: 0;
	font-size: 14px;
	line-height: 22px;
}

/* Entrada del blog */

.entrada-cabecera h1 {
	margin-bottom: 12px;
	font-size: 34px;
	line-height: 42px;
}

.entrada-datos {
	color: #54595f;
	font-size: 15px;
}

.entrada-imagen img {
	width: 100%;
}

.entrada-resumen {
	font-size: 19px;
	line-height: 30px;
}

.entrada-compartir {
	display: flex;
	align-items: center;
	gap: 10px;
}

.entrada-compartir p {
	margin: 0 auto 0 0;
	font-weight: 500;
}

.entrada-compartir a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--noche);
	color: var(--blanco);
	transition: background-color 0.2s;
}

.entrada-compartir a:hover {
	background: var(--acento);
}

.entrada-compartir .icono {
	width: 16px;
	height: 16px;
}

/* En blanco (el color general de los enlaces las dejaba azul sobre azul noche) */
.pagina .entrada-compartir a,
.pagina .entrada-compartir a:hover {
	color: var(--blanco);
}

.pagina--entrada {
	--pagina-margen: max(20px, calc((100% - 900px) / 2));
}

/* Tarjetas dentro del contenido, galerías, tablas y menús incrustados */

.pagina .tarjeta-articulo__titulo a,
.pagina .tarjeta-articulo__imagen {
	color: inherit;
}

.galeria .wp-block-group__inner-container,
.pagina > .galeria {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: center;
}

.galeria figure {
	flex: 0 1 180px;
	margin: 0;
}

.pagina .wp-block-table {
	overflow-x: auto;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: var(--blanco);
}

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

.pagina .wp-block-table :is(th, td) {
	border-bottom: 1px solid var(--borde);
	padding: 12px 16px;
	text-align: left;
}

.pagina .wp-block-table th,
.pagina .wp-block-table thead td {
	background: var(--fondo);
	color: var(--noche);
	font-weight: 600;
}

.pagina .wp-block-table tr:last-child > * {
	border-bottom: 0;
}

.menu-en-pagina ul {
	padding: 0;
	list-style: none;
}

.menu-en-pagina a {
	display: block;
	padding: 8px 0;
}

.menu-en-pagina__titulo {
	margin-bottom: 8px;
	color: var(--noche);
	font-weight: 600;
}

.menu-en-pagina .current-menu-item > a {
	color: var(--acento);
	font-weight: 500;
}

.menu-en-pagina .sub-menu {
	padding-left: 16px;
}

.pagina .mapa {
	display: block;
	width: 100%;
	height: 300px;
	border: 0;
	border-radius: var(--radio);
}

.galeria figure a {
	display: block;
}

.galeria figure img {
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: var(--radio-s);
	object-fit: cover;
	transition: opacity var(--transicion);
}

.galeria figure a:hover img {
	opacity: 0.85;
}

/* Galerías de los congresos (las páginas con un grupo «galeria»; no la de la Fundación, que lleva logotipos):
   cabecera clara (la palabra «Galería» como etiqueta y el congreso como título), las fotos en una rejilla que llena la
   columna, el menú de galerías como panel lateral y, al pulsar una foto, el visor (serv.js) en vez de abrir el archivo. */
body:not(.zona-fundacion) .pagina :is(.heredado-contenido_seccion, .wp-block-column):has(> .galeria) > h1 {
	margin: 0 0 6px;
	color: var(--azul-hondo);
	font: 600 13px/1.3 Roboto, sans-serif !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

body:not(.zona-fundacion) .pagina :is(.heredado-contenido_seccion, .wp-block-column):has(> .galeria) > hr {
	display: none;
}

body:not(.zona-fundacion) .pagina :is(.heredado-contenido_seccion, .wp-block-column):has(> .galeria) > h2 {
	margin: 0 0 28px;
	color: var(--noche);
	font: 700 clamp(24px, 2.4vw, 34px) / 1.2 Roboto, sans-serif;
	letter-spacing: -0.01em;
}

body:not(.zona-fundacion) .galeria .wp-block-group__inner-container,
body:not(.zona-fundacion) .pagina > .galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 12px;
}

body:not(.zona-fundacion) .galeria figure {
	overflow: hidden;
	margin: 0;
	border-radius: 12px;
	background: #e9ecf1;
}

body:not(.zona-fundacion) .galeria figure a {
	display: block;
	cursor: zoom-in;
}

body:not(.zona-fundacion) .galeria figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: 0;
	object-fit: cover;
	transition: transform 0.4s ease, opacity var(--transicion);
}

body:not(.zona-fundacion) .galeria figure a:hover img {
	opacity: 1;
	transform: scale(1.05);
}

/* Páginas de un documento escaneado ([photo-book-gallery], inc/libro-fotos.php): rejilla propia (va dentro de una
   columna, no suelta en la página) y cada página en vertical, entera, sobre blanco */
/* La columna que la lleva puede estrecharse (si no, la rejilla la ensancha y echa la columna lateral fuera) */
body:not(.zona-fundacion) .galeria.galeria--paginas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
	gap: 14px;
	margin: 8px 0 0;
}

body:not(.zona-fundacion) .galeria--paginas figure {
	border: 1px solid var(--borde);
	border-radius: var(--radio-s);
	background: var(--blanco);
}

body:not(.zona-fundacion) .galeria--paginas figure img {
	aspect-ratio: 210 / 297;
	object-fit: contain;
}

body:not(.zona-fundacion) .galeria--paginas figure a:hover img {
	transform: scale(1.03);
}

/* Partes de una galería (serv.js): un selector de segmentos (fondo gris, la parte elegida en blanco), con el número
   de fotos de cada una; en el móvil, en una fila que se desliza */
.galeria-segmentos {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: 100%;
	margin: 0 0 20px;
	border-radius: 14px;
	padding: 4px;
	background: #e9ecf1;
}

.galeria-segmentos button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	border-radius: 10px;
	padding: 8px 14px;
	background: transparent;
	color: var(--texto-suave);
	font: 500 14px/1.2 Roboto, sans-serif;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--transicion), color var(--transicion), box-shadow var(--transicion);
}

.galeria-segmentos button:hover {
	color: var(--noche);
}

.galeria-segmentos button[aria-selected="true"] {
	background: var(--blanco);
	color: var(--noche);
	box-shadow: 0 1px 3px rgba(15, 20, 40, 0.12);
}

.galeria-segmentos button span {
	border-radius: var(--radio-boton);
	padding: 1px 7px;
	background: rgba(37, 43, 66, 0.08);
	color: var(--texto-suave);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.galeria-segmentos button:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 1px;
}

@media (max-width: 767px) {
	.galeria-segmentos {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
}

/* Sin JavaScript, el título de cada parte encima de su grupo */
body:not(.zona-fundacion) .pagina p.galeria-segmento {
	margin: 24px 0 12px;
	color: var(--noche);
	font-weight: 600;
}

/* Apartados de la galería (congresos con varias: Programa, Becas y premios…; herramientas/convertir/
   galerias-apartados.php): pestañas encima de las fotos, la actual en azul; en el móvil, en una fila que se desliza */
.pagina .galeria-apartados {
	margin: -8px 0 24px;
}

.galeria-apartados .menu-en-pagina {
	border: 0 !important;
	padding: 0 !important;
	background: none !important;
}

body:not(.zona-fundacion) .wp-block-columns:has(.galeria) .galeria-apartados .menu-en-pagina__titulo {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

body:not(.zona-fundacion) .wp-block-columns:has(.galeria) .galeria-apartados .menu-en-pagina__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.galeria-apartados .menu-en-pagina li {
	margin: 0;
}

body:not(.zona-fundacion) .wp-block-columns:has(.galeria) .galeria-apartados .menu-en-pagina a {
	display: block;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-boton);
	padding: 8px 14px;
	background: var(--blanco);
	color: var(--noche);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--transicion), color var(--transicion), background-color var(--transicion);
}

body:not(.zona-fundacion) .wp-block-columns:has(.galeria) .galeria-apartados .menu-en-pagina a:hover {
	border-color: var(--azul);
	color: var(--azul-hondo);
}

body:not(.zona-fundacion) .wp-block-columns:has(.galeria) .galeria-apartados .menu-en-pagina .current-menu-item > a,
body:not(.zona-fundacion) .wp-block-columns:has(.galeria) .galeria-apartados .menu-en-pagina .current-menu-item > a:hover {
	border-color: var(--azul);
	background: var(--azul);
	color: var(--blanco);
	font-weight: 500;
}

@media (max-width: 767px) {
	body:not(.zona-fundacion) .wp-block-columns:has(.galeria) .galeria-apartados .menu-en-pagina__lista {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(var(--pagina-margen, 24px) * -1);
		padding: 2px var(--pagina-margen, 24px) 6px;
		scrollbar-width: none;
	}
}

/* El menú de galerías, como panel blanco que acompaña al bajar */
body:not(.zona-fundacion) .pagina .wp-block-column:has(> .menu-en-pagina) {
	align-self: flex-start;
	position: sticky;
	top: 100px;
}

body:not(.zona-fundacion) .wp-block-column:has(> .galeria) ~ .wp-block-column > .menu-en-pagina,
body:not(.zona-fundacion) .wp-block-columns:has(.galeria) .menu-en-pagina {
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 20px;
	background: var(--blanco);
}

body:not(.zona-fundacion) .wp-block-columns:has(.galeria) .menu-en-pagina__titulo {
	margin: 0 0 8px;
	padding: 0 10px;
	color: var(--texto-suave);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body:not(.zona-fundacion) .wp-block-columns:has(.galeria) .menu-en-pagina ul {
	margin: 0;
}

body:not(.zona-fundacion) .wp-block-columns:has(.galeria) .menu-en-pagina a {
	border-radius: 8px;
	padding: 8px 10px;
	color: var(--noche);
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
	transition: background-color var(--transicion);
}

body:not(.zona-fundacion) .wp-block-columns:has(.galeria) .menu-en-pagina a:hover {
	background: #f1f2f4;
	color: var(--noche);
}

body:not(.zona-fundacion) .wp-block-columns:has(.galeria) .menu-en-pagina :is(.current-menu-item, .current-menu-ancestor) > a {
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
	font-weight: 600;
}

/* Visor de fotos (serv.js): la foto grande sobre fondo oscuro, con anterior, siguiente, cerrar y «3 / 134» */
.visor {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	border: 0;
	padding: 0;
	background: rgba(12, 15, 26, 0.96);
	color: var(--blanco);
}

.visor::backdrop {
	background: rgba(12, 15, 26, 0.6);
}

.visor[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
}

.visor__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	font: 500 14px/1 Roboto, sans-serif;
	font-variant-numeric: tabular-nums;
}

.visor__escena {
	display: grid;
	place-items: center;
	min-height: 0;
	padding: 0 72px 32px;
}

.visor__foto {
	max-width: 100%;
	max-height: 100%;
	border-radius: 8px;
	object-fit: contain;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.visor__boton {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	padding: 0;
	background: rgba(255, 255, 255, 0.12);
	color: var(--blanco);
	cursor: pointer;
	transition: background-color var(--transicion);
}

.visor__boton:hover,
.visor__boton:focus-visible {
	outline: none;
	background: rgba(255, 255, 255, 0.24);
}

.visor__boton .icono {
	width: 22px;
	height: 22px;
}

.visor__boton--anterior,
.visor__boton--siguiente {
	position: fixed;
	top: 50%;
	translate: 0 -50%;
}

.visor__boton--anterior {
	left: 16px;
}

.visor__boton--siguiente {
	right: 16px;
}

@media (max-width: 767px) {
	.visor__escena {
		padding: 0 8px 80px;
	}

	.visor__boton--anterior,
	.visor__boton--siguiente {
		top: auto;
		bottom: 20px;
		translate: none;
	}

	.visor__boton--anterior {
		left: calc(50% - 56px);
	}

	.visor__boton--siguiente {
		right: calc(50% - 56px);
	}

	body:not(.zona-fundacion) .galeria .wp-block-group__inner-container,
	body:not(.zona-fundacion) .pagina > .galeria {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	body:not(.zona-fundacion) .pagina .wp-block-column:has(> .menu-en-pagina) {
		position: static;
	}
}

/* Contenido que solo se muestra en algunos tamaños de pantalla */

@media (min-width: 1025px) {
	.oculto-escritorio {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.oculto-tableta {
		display: none;
	}
}

@media (max-width: 767px) {
	.oculto-movil {
		display: none;
	}
}

/* Desplegables (bloque «Detalles») */

.pagina .wp-block-details {
	margin-bottom: var(--esp-1);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: 0;
	background: var(--blanco);
	transition: box-shadow var(--transicion);
}

.pagina .wp-block-details[open] {
	box-shadow: var(--sombra-s);
}

.pagina .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-radius: var(--radio);
	padding: 16px 20px;
	color: var(--noche);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.pagina .wp-block-details summary:hover {
	color: var(--acento);
}

.pagina .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.pagina .wp-block-details summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--acento);
	border-bottom: 2px solid var(--acento);
	transform: rotate(45deg);
	transition: transform 0.2s;
}

.pagina .wp-block-details[open] summary::after {
	transform: rotate(-135deg);
}

.pagina .wp-block-details > :not(summary) {
	margin: 0 20px 16px;
}

/* Vídeo */

.video {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--radio-l);
	background: #000;
}

.video iframe,
.video mux-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* El reproductor de Mux en la página (vídeos de socios, serv.js): con el azul de la web, como el del iframe */
.video mux-player {
	--media-accent-color: #13aff9;
	display: block;
}

/* Portada del vídeo con su botón de reproducir: al pulsarla se carga el reproductor (serv.js) */
.video__portada {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	background: #000;
	cursor: pointer;
}

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

.video__portada::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: rgba(37, 43, 66, 0.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23fff'%3E%3Cpath d='M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z'/%3E%3C/svg%3E") 56% center / 28px no-repeat;
	transform: translate(-50%, -50%);
	transition: background-color var(--transicion), transform var(--transicion);
}

.video__portada:hover::after,
.video__portada:focus-visible::after {
	background-color: var(--azul);
	transform: translate(-50%, -50%) scale(1.06);
}

/* Vídeo de socios para quien no ha iniciado sesión */
.video--socios {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
	color: var(--blanco);
}

.video--socios a {
	color: var(--azul);
}

/* Página «Ver vídeo» de los contenidos externos ([serv_ver_video]) */
.ver-video {
	max-width: 960px;
}

.ver-video__atras {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	color: var(--texto-suave);
	font-weight: 500;
	text-decoration: none;
}

.ver-video__atras:hover {
	color: var(--azul);
}

.ver-video__atras .icono {
	width: 20px;
	height: 20px;
}

.ver-video__titulo {
	margin-bottom: 16px;
}

.ver-video__categorias {
	margin: 16px 0 0;
	color: var(--texto-suave);
}

.ver-video__sesion {
	margin-top: 40px;
}

.ver-video__charlas {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--borde);
	border-radius: var(--radio-s);
}

.ver-video__charlas li {
	padding: 12px 16px;
	border-top: 1px solid var(--borde);
}

.ver-video__charlas li:first-child {
	border-top: 0;
}

.ver-video__charlas a {
	display: block;
	color: var(--texto);
	text-decoration: none;
}

.ver-video__charlas a:hover {
	color: var(--azul);
}

.ver-video__charlas .es-actual {
	background: var(--fondo);
	font-weight: 600;
}

.ver-video__minuto {
	display: inline-block;
	min-width: 4.5em;
	color: var(--texto-suave);
	font-variant-numeric: tabular-nums;
}

/* Ficha: imagen, nombre y texto */

.ficha {
	text-align: center;
}

.ficha img {
	border-radius: var(--radio);
}

.pagina .ficha h3 {
	margin: 16px 0 4px;
	color: var(--acento);
	font-size: 16px;
	line-height: 24px;
}

.pagina .banda--noche .ficha h3 {
	color: inherit;
}

@media (max-width: 767px) {
	.pagina {
		--pagina-margen: 24px;

		padding: 64px 0 48px;
	}

	.pagina h1.titulo-seccion {
		margin-bottom: 28px;
	}

	.pagina h2 {
		margin-top: 40px;
	}

	.pagina > .banda {
		padding-block: 40px;
	}

	.pagina > :not(.banda, .portadilla):has(+ .banda) {
		margin-bottom: 40px;
	}

	.pagina > .banda + :not(.banda) {
		margin-top: 40px;
	}

	.pagina > .banda:last-child {
		margin-bottom: -48px;
	}

	.pagina ul,
	.pagina ol {
		padding-left: 24px;
	}

	.ficha {
		margin-bottom: 28px;
	}

	.pagina .wp-block-column {
		flex-basis: 100%;
	}
}

/* Cómo hacerse socio (herramientas/convertir/hacerse-socio.php): cabecera con dos botones, ventajas en un panel,
   cuotas en filas (condiciones a la izquierda, cuota a la derecha) y el formulario de alta (código de Oscar) en una
   tarjeta, con los campos de la web y cada bloque como un paso numerado. Todo en una columna de 1040px. */
.pagina:has(.socio-cabecera) {
	--pagina-margen: max(24px, calc((100% - 1040px) / 2));
}

.pagina .socio-entrada {
	max-width: 46em;
	margin-bottom: 28px;
	color: var(--texto-suave);
	font-size: 19px;
	line-height: 1.6;
}

/* Botones de la cabecera: «Solicitar el alta» relleno y «Ver cuotas» con borde */
.pagina .socio-cabecera .wp-block-buttons {
	gap: 12px;
}

.pagina .socio-cabecera .wp-block-button__link {
	border: 1.5px solid var(--azul);
	border-radius: var(--radio-boton);
	padding: 14px 26px;
	background: var(--azul);
	color: var(--blanco);
	font: 600 16px/1 Roboto, sans-serif;
	text-transform: none;
}

.pagina .socio-cabecera .wp-block-button__link:hover {
	border-color: var(--azul-hondo);
	background: var(--azul-hondo);
	color: var(--blanco);
}

.pagina .socio-cabecera .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--azul-hondo);
}

.pagina .socio-cabecera .is-style-outline .wp-block-button__link:hover {
	background: rgba(19, 175, 249, 0.08);
	color: var(--azul-hondo);
}

.pagina .socio-seccion {
	margin-top: 72px;
	margin-bottom: 20px;
	color: var(--noche);
	font: 700 clamp(24px, 2.2vw, 30px) / 1.2 Roboto, sans-serif;
	letter-spacing: -0.01em;
	text-transform: none;
}

/* Ventajas: un panel blanco, tres columnas con un tick */
.pagina .socio-ventajas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 28px;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 32px;
	background: var(--blanco);
	list-style: none;
}

.pagina .socio-ventajas li {
	position: relative;
	margin: 0;
	padding-left: 32px;
	color: var(--texto);
	font-size: 15px;
	line-height: 1.5;
}

.pagina .socio-ventajas li::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 0;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: rgba(19, 175, 249, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%230b8fd0'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Cuotas: una fila por tipo de socio */
.socio-cuotas-seccion,
.socio-alta {
	scroll-margin-top: 100px;
}

.socio-cuotas > .wp-block-group__inner-container {
	display: grid;
	gap: 12px;
}

.socio-cuota > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "tipo precio" "notas precio";
	column-gap: 32px;
	align-items: start;
}

.socio-cuota {
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 22px 28px;
	background: var(--blanco);
}

.pagina .socio-cuota__tipo {
	grid-area: tipo;
	margin: 0 0 4px;
	color: var(--noche);
	font: 600 18px/1.35 Roboto, sans-serif;
	text-transform: none;
}

.pagina .socio-cuota__precio {
	grid-area: precio;
	grid-row: 1 / span 9;
	align-self: center;
	margin: 0;
	color: var(--azul-hondo);
	font: 700 32px/1 Roboto, sans-serif;
	letter-spacing: -0.02em;
	text-align: right;
	white-space: nowrap;
}

.pagina .socio-cuota__precio span {
	display: block;
	margin-top: 4px;
	color: var(--texto-suave);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
}

.pagina .socio-cuota__nota {
	grid-column: 1;
	margin: 4px 0 0;
	color: var(--texto-suave);
	font-size: 14px;
	line-height: 1.55;
}

/* Solicitud de alta: el formulario en una tarjeta. Sus dos párrafos de presentación, en pequeño. */
.pagina .socio-alta p:not(.socio-alta__ayuda, #formreg p) {
	color: var(--texto-suave);
	font-size: 14px;
	line-height: 1.5;
}

.pagina .socio-alta__ayuda {
	color: var(--texto-suave);
	font-size: 16px;
}

.pagina .socio-alta__ayuda a {
	color: var(--azul-hondo);
	font-weight: 500;
}

/* El shortcode mete el formulario en una fila de Bootstrap (márgenes de -12px): aquí, al ancho de la columna */
.pagina .row:has(> :is(#formreg, #formren)) {
	margin-inline: 0;
}

.pagina :is(#formreg, #formren) {
	margin: 8px 0 0;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 36px 40px 40px;
	background: var(--blanco);
	box-shadow: 0 1px 2px rgba(15, 20, 40, 0.04);
	counter-reset: paso;
	font-size: 15px;
	line-height: 1.5;
}

.pagina :is(#formreg, #formren) > p {
	margin: 0 0 8px;
	color: var(--texto-suave);
	font-size: 14px;
}

/* Cada bloque del formulario, un paso numerado, separado del anterior por una línea */
.pagina :is(#formreg, #formren) h3.elementor-heading-title {
	display: flex;
	flex: 0 0 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	max-width: 100%;
	margin: 32px 0 18px;
	border-top: 1px solid #eef0f3;
	padding: 28px calc(var(--bs-gutter-x, 24px) * 0.5) 0;
	color: var(--noche);
	font: 600 14px/1.3 Roboto, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	counter-increment: paso;
}

.pagina :is(#formreg, #formren) h3.elementor-heading-title::before {
	content: counter(paso);
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--azul);
	color: var(--blanco);
	font-size: 14px;
	font-weight: 700;
}

.pagina :is(#formreg, #formren) h3.elementor-heading-title span {
	flex-basis: 100%;
	color: var(--texto-suave);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.pagina :is(#formreg, #formren) .col-md-12 > h3.elementor-heading-title {
	padding-left: 0;
}

.pagina :is(#formreg, #formren) .perfillabel,
.pagina :is(#formreg, #formren) label {
	margin: 0 0 6px;
	color: var(--noche);
	font: 500 14px/1.4 Roboto, sans-serif;
	letter-spacing: 0;
}

.pagina :is(#formreg, #formren) :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="file"]), select) {
	width: 100%;
	height: 46px;
	margin-bottom: 18px;
	border: 1px solid #d6dae3;
	border-radius: var(--radio-s);
	padding: 0 12px;
	background-color: var(--blanco);
	color: var(--noche);
	font: 400 15px/1.4 Roboto, sans-serif;
	box-shadow: 0 1px 2px rgba(37, 43, 66, 0.04);
}

.pagina :is(#formreg, #formren) :is(input, select):hover {
	border-color: #b9c0cd;
}

.pagina :is(#formreg, #formren) :is(input, select):focus {
	border-color: var(--azul);
	outline: none;
	box-shadow: 0 0 0 3px rgba(19, 175, 249, 0.18);
}

.pagina :is(#formreg, #formren) .tooltipserv {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
	border-radius: var(--radio-s);
	padding: 12px 14px;
	background: rgba(19, 175, 249, 0.08);
	color: var(--noche);
	font-size: 14px;
}

.pagina :is(#formreg, #formren) .tooltipserv p {
	margin: 0;
}

.pagina :is(#formreg, #formren) a {
	color: var(--azul-hondo);
	font-size: 14px;
}

/* «Modalidad» va fuera de las filas de Bootstrap: con el mismo margen que el resto de campos */
.pagina :is(#formreg, #formren) > .col-md-12 {
	padding-inline: calc(var(--bs-gutter-x, 24px) * 0.5);
}

/* Filas dentro de filas (correo y teléfono del centro, datos bancarios): sin la sangría de 12px que traían, al mismo
   borde que el resto de campos */
.pagina :is(#formreg, #formren) .row .row {
	margin-inline: calc(var(--bs-gutter-x, 24px) * -0.5);
}

/* «Si no encuentra su centro…», pegado a su desplegable */
.pagina :is(#formreg, #formren) select[name="idcentro"] {
	margin-bottom: 6px;
}

.pagina :is(#formreg, #formren) div:has(> a[onclick]):not(:has(input, select)) {
	margin-bottom: 16px;
	text-align: right;
}

/* El tratamiento (Dr., Dra.…) junto al nombre: su columna, a la medida del desplegable */
.pagina :is(#formreg, #formren) .row:has(> * > select[name="tratamiento"]) {
	flex-wrap: nowrap;
	--bs-gutter-x: 8px;
}

.pagina :is(#formreg, #formren) .col-md-2:has(> select[name="tratamiento"]) {
	flex: 0 0 84px;
	width: 84px;
}

.pagina :is(#formreg, #formren) .col-md-10:has(> input[name="nombre"]) {
	flex: 1 1 auto;
	width: auto;
}

.pagina :is(#formreg, #formren) select[name="tratamiento"] {
	padding: 0 28px 0 10px;
	background-position: right 9px center;
}

/* Opciones de privacidad: casillas como las del resto de la web (cuadrado de esquinas suaves; marcada, azul con el
   tick blanco) en vez de los interruptores de Bootstrap */
.pagina :is(#formreg, #formren) .form-switch {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 14px;
	padding-left: 0;
}

.pagina :is(#formreg, #formren) .form-switch .form-check-input {
	flex: none;
	float: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	border: 1.5px solid #b9c0cd;
	border-radius: 6px;
	background: var(--blanco) center / 13px no-repeat;
	appearance: none;
	cursor: pointer;
	transition: background-color var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}

.pagina :is(#formreg, #formren) .form-switch .form-check-input:hover {
	border-color: var(--azul);
}

.pagina :is(#formreg, #formren) .form-switch .form-check-input:checked {
	border-color: var(--azul);
	background-color: var(--azul);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23fff'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
}

.pagina :is(#formreg, #formren) .form-switch .form-check-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(19, 175, 249, 0.18);
}

.pagina :is(#formreg, #formren) .form-check-label {
	color: var(--texto);
	font-weight: 400;
}

.pagina :is(#formreg, #formren) input[type="submit"] {
	width: 100%;
	margin-top: 16px;
	border-radius: var(--radio-boton);
	padding: 16px;
	background: var(--azul);
	font: 600 16px/1 Roboto, sans-serif;
	text-transform: none;
}

.pagina :is(#formreg, #formren) input[type="submit"]:hover {
	background: var(--azul-hondo);
}

/* Renovación (tras las cuotas): el aviso de Oscar («ATENCIÓN», con estilos en línea: borde negro, rojo, 16pt
   centrado) como un aviso suave de la web, y «pinche aquí para continuar» como botón. El formulario que abre (#formren)
   lleva el mismo aspecto que el de alta (reglas de arriba). */
.pagina #anuncioren {
	margin: 8px 0 0;
	border: 1px solid rgba(19, 175, 249, 0.3) !important;
	border-radius: var(--radio-l) !important;
	padding: 24px 28px !important;
	background: rgba(19, 175, 249, 0.07) !important;
	color: var(--noche);
	font-size: 16px !important;
	line-height: 1.6;
	text-align: left !important;
}

.pagina #anuncioren > span:first-child {
	font-size: 13px !important;
	letter-spacing: 0.08em;
}

.pagina #anuncioren > span:first-child b {
	color: var(--azul-hondo) !important;
}

.pagina #anuncioren u[onclick] {
	display: inline-flex;
	margin-top: 8px;
	border-radius: var(--radio-boton);
	padding: 12px 22px;
	background: var(--azul);
	color: var(--blanco);
	font-size: 15px;
	text-decoration: none;
	transition: background-color var(--transicion);
}

.pagina #anuncioren u[onclick]:hover {
	background: var(--azul-hondo);
}

/* Dentro del desplegable: con el margen del desplegable (la fila de Bootstrap lo quitaba) y el formulario sin la
   tarjeta propia (ya va dentro de una) */
.pagina .wp-block-details > .row:has(> :is(#formreg, #formren)) {
	margin: 0 20px 20px;
}

.pagina .wp-block-details #formren {
	margin-top: 8px;
	border: 0;
	padding: 0;
	box-shadow: none;
}

/* Renovación, justo debajo del formulario de alta (para los socios, tras las cuotas) */
.pagina :is(.socio-alta, .socio-cuotas-seccion) + .wp-block-details {
	margin-top: 16px;
}

/* Fines de la SERV: cuatro tarjetas con icono */
.pagina .socio-fines__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.socio-fines__lista li {
	margin: 0;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 24px;
	background: var(--blanco);
}

.socio-fines__lista .icono {
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 12px;
	padding: 10px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
}

.pagina .socio-fines__lista p {
	margin: 0;
	color: var(--texto);
	font-size: 15px;
	line-height: 1.55;
}

@media (max-width: 1024px) {
	.pagina .socio-fines__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.pagina .socio-fines__lista {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	/* En el móvil, el icono junto al texto: tarjetas más bajas */
	.socio-fines__lista li {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		padding: 16px 18px;
	}

	.socio-fines__lista .icono {
		flex: none;
		width: 38px;
		height: 38px;
		margin: 0;
		padding: 8px;
	}
}



@media (max-width: 1024px) {
	.pagina .socio-ventajas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.pagina .socio-entrada {
		font-size: 17px;
	}

	.pagina .socio-seccion {
		margin-top: 52px;
	}

	.pagina .socio-ventajas {
		grid-template-columns: minmax(0, 1fr);
		padding: 22px;
	}

	.socio-cuota {
		padding: 18px 20px;
	}

	.socio-cuota > .wp-block-group__inner-container {
		grid-template-areas: "tipo" "precio" "notas";
		grid-template-columns: minmax(0, 1fr);
	}

	.pagina .socio-cuota__precio {
		grid-row: auto;
		margin: 6px 0 4px;
		font-size: 26px;
		text-align: left;
	}

	.pagina .socio-cuota__precio span {
		display: inline;
	}

	.pagina :is(#formreg, #formren) {
		padding: 22px 18px 26px;
	}
}

/* Congresos anteriores, pública (herramientas/convertir/congresos-publica.php): las tarjetas de la del área privada,
   tantas por fila como quepan (cartel arriba; «Vídeos» en azul a todo el ancho y «Programa» debajo). Sin sesión,
   «Vídeos» lleva un candado y abre la ventana para entrar (inc/acceso.php, serv.js). */
.pagina:has(> .congresos-publica) {
	--pagina-margen: max(24px, calc((100% - 1240px) / 2));
}

/* El título, cerca de la frase (el margen general del título de página es del 4 % del ancho: 58px a 1440) */
.pagina h1.titulo-seccion:has(+ .congresos-publica__entrada) {
	margin-bottom: 16px;
}

.pagina .congresos-publica__entrada {
	max-width: 48em;
	margin-bottom: 56px;
	color: var(--texto-suave);
	font-size: 17px;
	line-height: 1.6;
}

.pagina .congresos-publica__entrada a {
	color: var(--azul-hondo);
	font-weight: 500;
}

.congresos-publica > .wp-block-group__inner-container,
.congresos-publica:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 24px;
	align-items: stretch;
}

.congreso-tarjeta {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	background: var(--blanco);
	box-shadow: 0 1px 2px rgba(15, 20, 40, 0.04);
	transition: box-shadow var(--transicion), transform var(--transicion);
}

.congreso-tarjeta:hover {
	box-shadow: 0 16px 34px -18px rgba(37, 43, 66, 0.3);
	transform: translateY(-3px);
}

.congreso-tarjeta > .wp-block-group__inner-container {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.pagina .congreso-tarjeta figure {
	margin: 0;
}

.congreso-tarjeta img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.pagina .congreso-tarjeta .botones-congreso {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: auto 0 0;
	padding: 14px;
}

.congreso-tarjeta .botones-congreso .wp-block-button {
	flex: 1 1 auto;
	margin: 0;
}

.congreso-tarjeta .botones-congreso .boton-videos {
	flex-basis: 100%;
}

.pagina .congreso-tarjeta .botones-congreso .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 36px;
	border: 1px solid var(--borde);
	border-radius: var(--radio-boton);
	padding: 6px 12px;
	background: var(--blanco);
	color: var(--noche);
	font: 500 14px/1.2 Roboto, sans-serif;
	text-transform: none;
	white-space: nowrap;
}

.pagina .congreso-tarjeta .botones-congreso .wp-block-button__link:hover {
	border-color: var(--azul);
	color: var(--azul-hondo);
}

.pagina .congreso-tarjeta .botones-congreso .boton-videos .wp-block-button__link {
	border-color: var(--azul);
	background: var(--azul);
	color: var(--blanco);
}

.pagina .congreso-tarjeta .botones-congreso .boton-videos .wp-block-button__link:hover {
	border-color: var(--azul-hondo);
	background: var(--azul-hondo);
	color: var(--blanco);
}

/* Sin sesión: un candado tras «Vídeos» */
body:not(.logged-in) .congreso-tarjeta .boton-socios .wp-block-button__link::after {
	content: "";
	width: 13px;
	height: 13px;
	background: currentColor;
	opacity: 0.85;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ventana para entrar (Congresos anteriores, sin sesión): la tarjeta de acceso, centrada sobre la página */
.acceso-ventana {
	width: min(440px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	border: 0;
	border-radius: var(--radio-l);
	padding: 32px;
	background: var(--blanco);
	box-shadow: 0 30px 70px -20px rgba(15, 20, 40, 0.45);
	color: var(--texto);
}

.acceso-ventana::backdrop {
	background: rgba(37, 43, 66, 0.55);
	backdrop-filter: blur(3px);
}

.acceso-ventana__cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #f1f2f4;
	color: var(--noche);
	cursor: pointer;
}

.acceso-ventana__cerrar .icono {
	width: 18px;
	height: 18px;
}

.acceso-ventana__cabecera {
	margin-bottom: 20px;
	text-align: center;
}

.acceso-ventana__cabecera::before {
	content: "";
	display: block;
	width: 52px;
	height: 52px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: rgba(19, 175, 249, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2313aff9'%3E%3Cpath d='M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Z'/%3E%3C/svg%3E") center / 24px no-repeat;
}

.acceso-ventana__cabecera p {
	margin: 0;
	color: var(--texto-suave);
	font-size: 15px;
	line-height: 1.5;
}

.acceso-ventana__cabecera .acceso-ventana__titulo {
	margin-bottom: 6px;
	color: var(--noche);
	font-size: 22px;
	font-weight: 600;
}

/* El título «Iniciar sesión» del formulario sobra: lo dice la cabecera */
.acceso-ventana #wpmem_login legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.acceso-ventana #wpmem_login {
	width: 100%;
	margin: 0;
}

.acceso-ventana #wpmem_login fieldset {
	margin: 0;
	border: 0;
	padding: 0;
}

.acceso-ventana .acceso-socios #wpmem_login .link-text {
	text-align: center;
}

/* Estatutos (herramientas/convertir/estatutos-titulos.php): cada título con su número como etiqueta pequeña en azul y
   el nombre grande, separado del anterior por una línea; los capítulos, un nivel por debajo; en cada artículo, su
   número como etiqueta de ancho fijo (los nombres quedan alineados) y el nombre en minúsculas normales. */
.pagina .estatutos-titulo {
	margin-top: 64px;
	margin-bottom: 20px;
	border-top: 1px solid #e3e6eb;
	padding-top: 40px;
	color: var(--noche);
	font: 700 clamp(22px, 2vw, 28px) / 1.25 Roboto, sans-serif;
	letter-spacing: -0.01em;
	text-transform: none;
}

.pagina .titulo-seccion + .estatutos-titulo {
	margin-top: 32px;
	border-top: 0;
	padding-top: 0;
}

.estatutos-titulo__numero,
.estatutos-capitulo__numero {
	display: block;
	margin-bottom: 6px;
	font: 600 13px/1.2 Roboto, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.estatutos-titulo__numero {
	color: var(--azul-hondo);
}

.pagina .estatutos-capitulo {
	margin-top: 40px;
	margin-bottom: 14px;
	color: var(--noche);
	font: 600 20px/1.3 Roboto, sans-serif;
	text-transform: none;
}

.estatutos-capitulo__numero {
	margin-bottom: 4px;
	color: var(--texto-suave);
	font-size: 12px;
}

.pagina .wp-block-details summary:has(.estatutos-articulo) {
	justify-content: flex-start;
	gap: 14px;
	font-weight: 500;
}

.pagina .wp-block-details summary:has(.estatutos-articulo)::after {
	margin-left: auto;
}

.estatutos-articulo {
	flex: none;
	min-width: 92px;
	border-radius: 6px;
	padding: 4px 8px;
	background: rgba(19, 175, 249, 0.1);
	color: var(--azul-hondo);
	font: 600 12.5px/1.3 Roboto, sans-serif;
	text-align: center;
}

@media (max-width: 520px) {
	.pagina .estatutos-titulo {
		margin-top: 48px;
		padding-top: 32px;
	}

	.estatutos-articulo {
		min-width: 0;
	}
}

/* Página de curso (Curso de Cirugía Escleral: herramientas/convertir/curso-escleral-v2.php): portada en banda azul
   noche, ventajas en tarjetas, temario por módulos con ponente y duración a la vista, y profesores compactos. */
.pagina:has(> .curso-portada) {
	--curso-ancho: max(24px, calc((100% - 1160px) / 2));

	padding-top: 0;
}

.pagina > .curso-portada {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
	margin: 0 0 56px;
	padding: clamp(48px, 6vw, 88px) var(--curso-ancho);
	background: var(--noche);
	color: var(--blanco);
}

.curso-portada__etiqueta {
	display: inline-block;
	margin: 0 0 16px;
	border-radius: var(--radio-boton);
	padding: 6px 12px;
	background: rgba(19, 175, 249, 0.16);
	color: #7fd3ff;
	font: 600 13px/1.2 Roboto, sans-serif;
	letter-spacing: 0.04em;
}

.pagina .curso-portada h1 {
	text-wrap: balance;
	margin: 0 0 16px;
	color: var(--blanco);
	font: 700 clamp(30px, 3.4vw, 46px) / 1.12 Roboto, sans-serif;
	letter-spacing: -0.015em;
}

.pagina .curso-portada__intro {
	max-width: 36em;
	margin: 0 0 24px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 17px;
	line-height: 1.6;
}

.pagina .curso-portada__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.curso-portada__datos li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--blanco);
	font-size: 15px;
	font-weight: 500;
}

.curso-portada__datos .icono {
	width: 20px;
	height: 20px;
	color: var(--azul);
}

.pagina .curso-portada__estado {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--radio-boton);
	padding: 12px 20px;
	color: var(--blanco);
	font-size: 15px;
	font-weight: 500;
}

.curso-portada__estado .icono {
	width: 18px;
	height: 18px;
	color: #ffc65c;
}

.curso-portada__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: var(--radio-l);
	object-fit: cover;
}

/* Ventajas */
.pagina > .curso-ventajas,
.pagina > .curso-temario,
.pagina > .curso-profes {
	margin-inline: var(--curso-ancho);
}

.pagina .curso-ventajas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 72px;
	padding: 0;
	list-style: none;
}

.curso-ventajas li {
	margin: 0;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 24px;
	background: var(--blanco);
}

.curso-ventajas .icono {
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 12px;
	padding: 10px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
}

.pagina .curso-ventajas h3 {
	margin: 0 0 6px;
	color: var(--noche);
	font: 600 18px/1.3 Roboto, sans-serif;
	text-transform: none;
}

.pagina .curso-ventajas p {
	margin: 0;
	color: var(--texto-suave);
	font-size: 15px;
	line-height: 1.55;
}

/* Temario y profesores: títulos de sección */
.pagina :is(.curso-temario, .curso-profes) > h2 {
	margin: 0 0 20px;
	color: var(--noche);
	font: 700 clamp(24px, 2.4vw, 32px) / 1.2 Roboto, sans-serif;
	text-transform: none;
}

.pagina .curso-temario {
	margin-bottom: 72px;
}

.pagina .curso-temario__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagina .curso-temario__parte {
	margin: 24px 0 10px;
	color: var(--azul-hondo);
	font: 600 13px/1.3 Roboto, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pagina .curso-temario__parte:first-child {
	margin-top: 0;
}

.curso-modulo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 18px;
	margin: 0 0 10px;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 20px 24px;
	background: var(--blanco);
}

.curso-modulo__numero {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--azul);
	color: var(--blanco);
	font: 700 15px/1 Roboto, sans-serif;
}

.pagina .curso-modulo h3 {
	margin: 6px 0 4px;
	color: var(--noche);
	font: 600 17px/1.35 Roboto, sans-serif;
	text-transform: none;
}

.pagina .curso-modulo p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.pagina .curso-modulo__ponente {
	color: var(--azul-hondo);
	font-weight: 500;
}

.pagina .curso-modulo__descripcion {
	margin-top: 6px !important;
	color: var(--texto-suave);
}

.curso-modulo em,
.curso-modulo__lecciones em {
	border-radius: var(--radio-boton);
	padding: 4px 10px;
	background: #f1f2f4;
	color: var(--texto-suave);
	font: 500 13px/1.2 Roboto, sans-serif;
	font-style: normal;
	white-space: nowrap;
}

/* Título del módulo y su duración en la misma línea */
.curso-modulo__cabeza {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.curso-modulo__duracion {
	flex: none;
	margin-top: 6px;
}

.pagina .curso-modulo__lecciones {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.curso-modulo__lecciones li {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	border-top: 1px solid #eef0f3;
	padding: 12px 0;
}

.pagina .curso-modulo__lecciones p {
	color: var(--texto);
	font-size: 15px;
}

.curso-modulo__lecciones span {
	color: var(--azul-hondo);
	font-size: 14px;
	font-weight: 500;
}

/* Profesores */
.pagina .curso-profes {
	margin-bottom: 24px;
}

.pagina .curso-profes__rotulo {
	margin: 24px 0 12px;
	color: var(--azul-hondo);
	font: 600 13px/1.3 Roboto, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.curso-profe {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 18px;
	background: var(--blanco);
}

/* La foto entera, sin recortar (Jandro: sin máscara), en su proporción; la del director, más grande */
.curso-profe__foto {
	flex: none;
	width: 96px;
}

.curso-profe__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	background: #eef1f5;
}

.pagina .curso-profe h3 {
	margin: 2px 0 6px;
	color: var(--noche);
	font: 600 16px/1.3 Roboto, sans-serif;
	letter-spacing: 0;
	text-transform: none;
}

.pagina .curso-profe p {
	margin: 0;
	color: var(--texto-suave);
	font-size: 14px;
	line-height: 1.5;
}

.curso-profe--director {
	align-items: center;
	gap: 24px;
	padding: 24px;
}

.curso-profe--director .curso-profe__foto {
	width: 150px;
}

.pagina .curso-profe--director h3 {
	font-size: 20px;
}

.curso-profes__rejilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (max-width: 900px) {
	.pagina > .curso-portada {
		grid-template-columns: minmax(0, 1fr);
	}

	.curso-portada__foto {
		order: -1;
	}

	.pagina .curso-ventajas,
	.curso-profes__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 520px) {
	.curso-modulo {
		gap: 14px;
		padding: 16px;
	}

	.curso-modulo__cabeza {
		flex-direction: column;
		gap: 6px;
	}

	.curso-modulo__duracion {
		margin: 0 0 4px;
	}

	.curso-modulo__lecciones li {
		flex-direction: column;
		gap: 6px;
	}

	.curso-profe--director {
		flex-direction: column;
		align-items: flex-start;
	}

	.curso-profe__foto {
		width: 80px;
	}

	.curso-profe--director .curso-profe__foto {
		width: 130px;
	}
}

/* Páginas de beca (herramientas/convertir/becas.php): portada en banda azul noche (como la página de curso) y cuerpo
   en dos columnas, con un resumen al lado que acompaña al bajar. */
.pagina:has(> .beca-portada) {
	--beca-ancho: max(24px, calc((100% - 1160px) / 2));

	padding-top: 0;
}

.pagina > .beca-portada {
	margin: 0 0 56px;
	padding: clamp(48px, 6vw, 80px) var(--beca-ancho);
	background: var(--noche);
	color: var(--blanco);
}

.beca-portada__etiqueta {
	display: inline-block;
	margin: 0 0 16px;
	border-radius: var(--radio-boton);
	padding: 6px 12px;
	background: rgba(19, 175, 249, 0.16);
	color: #7fd3ff;
	font: 600 13px/1.2 Roboto, sans-serif;
	letter-spacing: 0.04em;
}

.pagina .beca-portada h1 {
	/* Títulos largos, en líneas parecidas (sin una palabra o un año colgando) y no más anchos que la frase */
	max-width: 22ch;
	text-wrap: balance;
	margin: 0 0 14px;
	color: var(--blanco);
	font: 700 clamp(32px, 3.6vw, 48px) / 1.1 Roboto, sans-serif;
	letter-spacing: -0.015em;
}

.pagina .beca-portada__frase {
	max-width: 38em;
	margin: 0 0 28px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 17px;
	line-height: 1.6;
}

.pagina a.beca-boton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: var(--radio-boton);
	padding: 14px 24px;
	background: var(--azul);
	color: var(--blanco);
	font: 600 16px/1 Roboto, sans-serif;
	text-decoration: none;
	transition: background-color var(--transicion);
}

.pagina a.beca-boton:hover {
	background: var(--azul-hondo);
	color: var(--blanco);
}

.beca-boton .icono {
	width: 18px;
	height: 18px;
}

.pagina > .beca-cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	align-items: start;
	gap: 40px;
	margin-inline: var(--beca-ancho);
	margin-bottom: 24px;
}

.pagina .beca-principal section + section {
	margin-top: 48px;
}

.pagina .beca-principal h2 {
	margin: 0 0 16px;
	color: var(--noche);
	font: 700 clamp(22px, 2vw, 28px) / 1.2 Roboto, sans-serif;
	text-transform: none;
}

.pagina .beca-principal p {
	margin: 0 0 14px;
	color: var(--texto);
	font-size: 16px;
	line-height: 1.6;
}

.pagina .beca-principal a {
	color: var(--azul-hondo);
}

/* Listas numeradas: cada punto en su fila, con su número en un círculo */
.pagina .beca-lista {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	counter-reset: beca;
}

.pagina .beca-lista li {
	position: relative;
	margin: 0;
	border-bottom: 1px solid #e9ecf1;
	padding: 14px 0 14px 44px;
	color: var(--texto);
	font-size: 16px;
	line-height: 1.6;
	counter-increment: beca;
}

.pagina .beca-lista li:first-child {
	border-top: 1px solid #e9ecf1;
}

.beca-lista li::before {
	content: counter(beca);
	position: absolute;
	top: 14px;
	left: 0;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
	font: 700 13px/1 Roboto, sans-serif;
}

.beca-lista strong {
	color: var(--noche);
}

.pagina .beca-nota {
	color: var(--texto-suave);
	font-size: 14px;
}

.pagina .beca-plazo {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-radius: var(--radio-s);
	padding: 14px 16px;
	background: rgba(19, 175, 249, 0.08);
}

.beca-plazo .icono {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var(--azul-hondo);
}

.pagina .beca-datos p {
	color: var(--texto-suave);
	font-size: 14px;
	line-height: 1.55;
}

.pagina .beca-datos h2 {
	font-size: 18px;
}

/* Resumen al lado */
.beca-resumen {
	position: sticky;
	top: 100px;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 24px;
	background: var(--blanco);
	box-shadow: 0 1px 2px rgba(15, 20, 40, 0.04);
}

.pagina .beca-resumen__titulo {
	margin: 0 0 12px;
	color: var(--texto-suave);
	font: 600 12px/1.2 Roboto, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.beca-resumen dl {
	margin: 0 0 18px;
}

.beca-resumen dl > div {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	column-gap: 12px;
	border-bottom: 1px solid #eef0f3;
	padding: 12px 0;
}

.beca-resumen .icono {
	grid-row: span 2;
	width: 22px;
	height: 22px;
	color: var(--azul-hondo);
}

.beca-resumen dt {
	color: var(--texto-suave);
	font-size: 13px;
}

.beca-resumen dd {
	margin: 2px 0 0;
	color: var(--noche);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.pagina .beca-resumen__asunto {
	margin: 0 0 16px;
	color: var(--texto-suave);
	font-size: 13px;
	line-height: 1.5;
}

.beca-resumen__asunto strong {
	color: var(--noche);
	font-size: 14px;
}

.beca-resumen .beca-boton {
	justify-content: center;
	width: 100%;
}

/* Logotipos en el resumen: la Fundación arriba; «Beca financiada por» y la SERV, al pie */
.beca-resumen__fundacion {
	display: block;
	width: 100%;
	max-width: 170px;
	height: auto;
	margin: 4px 0 24px;
}

.pagina .beca-resumen__financia {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 20px -24px -24px;
	border-top: 1px solid #eef0f3;
	border-radius: 0 0 var(--radio-l) var(--radio-l);
	padding: 14px 24px;
	background: #fafbfc;
}

.beca-resumen__financia span {
	color: var(--texto-suave);
	font: 600 11px/1.3 Roboto, sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.beca-resumen__financia img {
	width: auto;
	height: 44px;
}

@media (max-width: 900px) {
	.pagina > .beca-cuerpo {
		grid-template-columns: minmax(0, 1fr);
	}

	/* El resumen, antes que el texto en el móvil */
	.beca-resumen {
		position: static;
		order: -1;
	}
}

/* PFER (herramientas/convertir/pfer.php): usa los estilos de las becas y añade listas con viñeta, documentos en PDF,
   las dos fases de selección y tres logotipos al pie del resumen */
.pagina .pfer-puntos {
	margin: 10px 0 14px;
	padding: 0;
	list-style: none;
}

.pagina .pfer-puntos li {
	position: relative;
	margin: 0 0 6px;
	border: 0;
	padding: 0 0 0 20px;
	color: var(--texto);
	font-size: 16px;
	line-height: 1.55;
}

.pfer-puntos li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--azul);
}

.pagina .beca-lista .pfer-puntos li {
	counter-increment: none;
}

.pagina .beca-lista .pfer-puntos li::before {
	content: "";
	top: 0.62em;
	left: 4px;
	width: 6px;
	height: 6px;
	background: var(--azul);
}

.pfer-documentos {
	display: grid;
	gap: 10px;
}

.pagina a.pfer-documento {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 14px 18px;
	background: var(--blanco);
	color: var(--noche);
	text-decoration: none;
	transition: border-color var(--transicion), box-shadow var(--transicion);
}

.pagina a.pfer-documento:hover {
	border-color: var(--azul);
	box-shadow: 0 8px 20px -14px rgba(37, 43, 66, 0.35);
	color: var(--noche);
}

.pfer-documento > .icono:first-child {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	padding: 9px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
}

.pfer-documento span {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.pfer-documento strong {
	font-size: 16px;
	font-weight: 600;
}

.pfer-documento small {
	color: var(--texto-suave);
	font-size: 13px;
}

.pfer-documento > .icono:last-child {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--azul-hondo);
}

.pfer-fases {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 6px 0 18px;
}

.pfer-fases article {
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 22px;
	background: var(--blanco);
}

.pfer-fases__numero {
	display: inline-block;
	margin-bottom: 10px;
	border-radius: var(--radio-boton);
	padding: 4px 10px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
	font: 600 12px/1.2 Roboto, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pagina .pfer-fases h3 {
	margin: 0 0 10px;
	color: var(--noche);
	font: 600 18px/1.3 Roboto, sans-serif;
	text-transform: none;
}

.pagina .pfer-fases p,
.pagina .pfer-fases .pfer-puntos li {
	font-size: 15px;
}

/* Tres logotipos al pie del resumen: el título encima y los logos en fila */
.pagina .pfer-financia {
	flex-direction: column;
	gap: 12px;
}

.pfer-financia > div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	width: 100%;
}

.pfer-financia img {
	width: auto;
	max-width: 76px;
	height: 40px;
	object-fit: contain;
	/* El PNG de Alcon trae fondo blanco: sobre el gris del pie, que no se note */
	mix-blend-mode: multiply;
}

@media (max-width: 767px) {
	.pfer-fases {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Premios Théa (herramientas/convertir/premios-thea.php): los tres premios en tarjetas (oro, plata y bronce, como el
   podio que había) y el baremo en una tabla */
.pagina .thea-premios {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.thea-premios li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	border-radius: var(--radio-l);
	padding: 20px 22px;
	color: var(--noche);
}

.thea-premios span {
	font: 600 14px/1.2 Roboto, sans-serif;
	opacity: 0.8;
}

.thea-premios strong {
	font: 700 clamp(26px, 2.6vw, 34px) / 1 Roboto, sans-serif;
	letter-spacing: -0.02em;
}

.thea-premios--oro {
	background: linear-gradient(135deg, #fbe7a7, #ecc456);
}

.thea-premios--plata {
	background: linear-gradient(135deg, #eef1f4, #c4ccd4);
}

.thea-premios--bronce {
	background: linear-gradient(135deg, #f6d8c0, #d9a17a);
}

.pagina .thea-baremo {
	width: 100%;
	margin: 0 0 14px;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--blanco);
	font-size: 15px;
	line-height: 1.55;
}

.thea-baremo :is(th, td) {
	border: 0;
	border-bottom: 1px solid #eef0f3;
	padding: 14px 18px;
	text-align: left;
	vertical-align: top;
}

.thea-baremo thead th {
	background: var(--noche);
	color: var(--blanco);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.thea-baremo :is(td, th):last-child {
	width: 150px;
	font-weight: 600;
	white-space: nowrap;
}

.thea-baremo tbody td:last-child {
	color: var(--azul-hondo);
}

.thea-baremo strong {
	color: var(--noche);
}

.thea-baremo ul {
	margin: 8px 0 0;
	padding-left: 18px;
	color: var(--texto-suave);
	font-size: 14px;
}

.thea-baremo ul li {
	margin: 2px 0;
}

.thea-baremo__corto {
	display: none;
}

@media (max-width: 600px) {
	.thea-baremo__corto {
		display: inline;
	}
}

.thea-baremo tfoot :is(th, td) {
	border-bottom: 0;
	background: #f1f2f4;
	color: var(--noche);
	font-weight: 700;
}

@media (max-width: 600px) {
	.pagina .thea-premios {
		grid-template-columns: minmax(0, 1fr);
	}

	.thea-premios li {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		padding: 16px 18px;
	}

	.thea-baremo :is(th, td) {
		padding: 12px;
	}

	/* La columna de puntos, estrecha: «Puntuación» (sin «máxima») y «4 puntos» en dos líneas si hace falta */
	/* La columna de puntos, estrecha: «Puntos» y el número */
	.thea-baremo :is(td, th):last-child {
		width: 64px;
		padding-left: 4px;
		text-align: center;
	}

	.thea-baremo__largo {
		display: none;
	}
}

/* ----------------------------------------------------------------------
   Certificación UTI (herramientas/convertir/certificacion-uti.php), pública y del área privada: solo diseño; los
   formularios de Oscar ([muestraformsolicitud], [muestrachecklist]) van en sus pasos como estaban
   ---------------------------------------------------------------------- */

/* En la pública, la misma columna de 1100px centrada */
.pagina:not(.ap-contenido):has(> .uti-cabecera) {
	--pagina-margen: max(24px, calc((100% - 1100px) / 2));
}

:is(.ap-contenido, .pagina) :is(.uti-cabecera, .uti-proceso, .uti-pasos) {
	max-width: 1100px;
}

.uti-cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(24px, 3vw, 56px);
	margin-bottom: 32px;
}

/* La foto, a la derecha */
.uti-cabecera__foto {
	order: 2;
	width: 100%;
	height: 100%;
	min-height: 280px;
	max-height: 380px;
	border-radius: var(--radio-l);
	object-fit: cover;
	/* La imagen trae un marco blanco con esquinas: se recorta */
	clip-path: inset(3% round 18px);
}

/* En la pública, sin tarjeta: banda azul noche a todo el ancho, como becas, PFER y premios */
.pagina:not(.ap-contenido):has(> .uti-cabecera) {
	padding-top: 0;
}

.pagina:not(.ap-contenido) > .uti-cabecera {
	max-width: none;
	margin: 0 0 40px;
	padding: clamp(40px, 5vw, 72px) var(--pagina-margen);
	background: var(--noche);
	color: var(--blanco);
}

.pagina:not(.ap-contenido) .uti-cabecera h1 {
	color: var(--blanco);
}

.pagina:not(.ap-contenido) .uti-cabecera p {
	color: rgba(255, 255, 255, 0.78);
}

.pagina:not(.ap-contenido) .uti-cabecera .uti-nota {
	color: rgba(255, 255, 255, 0.55);
}

.pagina:not(.ap-contenido) .uti-cabecera .uti-etiqueta {
	background: rgba(19, 175, 249, 0.16);
	color: #7fd3ff;
}

:is(.ap-contenido, .pagina) .uti-etiqueta {
	display: inline-block;
	margin: 0 0 12px;
	border-radius: var(--radio-boton);
	padding: 5px 12px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
	font: 600 12px/1.2 Roboto, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

:is(.ap-contenido, .pagina) .uti-cabecera h1 {
	margin: 0 0 14px;
	color: var(--noche);
	font: 700 clamp(24px, 2.2vw, 32px) / 1.2 Roboto, sans-serif;
	text-wrap: balance;
}

:is(.ap-contenido, .pagina) .uti-cabecera p {
	margin: 0 0 10px;
	color: var(--texto);
	font-size: 15px;
	line-height: 1.6;
}

:is(.ap-contenido, .pagina) .uti-cabecera .uti-nota {
	color: var(--texto-suave);
	font-size: 13px;
}

:is(.ap-contenido, .pagina) a.uti-boton.uti-boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	border-radius: var(--radio-boton);
	padding: 12px 22px;
	background: var(--azul);
	color: var(--blanco);
	font: 600 15px/1 Roboto, sans-serif;
	text-decoration: none;
}

:is(.ap-contenido, .pagina) a.uti-boton.uti-boton:hover {
	background: var(--azul-hondo);
}

.uti-formulario__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

:is(.ap-contenido, .pagina) a.uti-boton.uti-boton--borde {
	border: 1.5px solid var(--azul);
	background: transparent;
	color: var(--azul-hondo);
}

:is(.ap-contenido, .pagina) a.uti-boton.uti-boton--borde:hover {
	background: rgba(19, 175, 249, 0.08);
	color: var(--azul-hondo);
}

.uti-boton .icono {
	width: 16px;
	height: 16px;
}

/* El proceso, en una tarjeta azul noche con tres datos clave */
.uti-proceso {
	margin-bottom: 48px;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: clamp(24px, 3vw, 40px);
	background: var(--blanco);
}

:is(.ap-contenido, .pagina) .uti-proceso h2 {
	margin: 0 0 14px;
	color: var(--noche);
	font: 700 clamp(19px, 1.6vw, 22px) / 1.3 Roboto, sans-serif;
	text-transform: none;
}

:is(.ap-contenido, .pagina) .uti-proceso p {
	margin: 0;
	color: var(--texto);
	font-size: 15px;
	line-height: 1.6;
}

:is(.ap-contenido, .pagina) .uti-proceso strong {
	color: var(--noche);
}

:is(.ap-contenido, .pagina) .uti-proceso p.uti-proceso__dato {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 24px 0 0;
	border-radius: 12px;
	padding: 16px 18px;
	background: rgba(19, 175, 249, 0.08);
}

.uti-proceso__dato .icono {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--azul);
}

:is(.ap-contenido, .pagina) .uti-proceso__datos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.uti-proceso__datos li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	border: 1px solid #e9ecf1;
	border-radius: 12px;
	padding: 16px 18px;
}

.uti-proceso__datos strong {
	color: var(--azul-hondo) !important;
	font: 700 20px/1.2 Roboto, sans-serif;
}

.uti-proceso__datos span {
	color: var(--texto-suave);
	font-size: 13px;
}

/* Los pasos: línea de tiempo numerada */
.uti-pasos {
	scroll-margin-top: 100px;
}

:is(.ap-contenido, .pagina) .uti-pasos h2 {
	margin: 0 0 20px;
	color: var(--noche);
	font: 700 clamp(22px, 2vw, 28px) / 1.2 Roboto, sans-serif;
	text-transform: none;
}

:is(.ap-contenido, .pagina) .uti-paso {
	position: relative;
	margin: 0 0 14px;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 22px 26px 18px 76px;
	background: var(--blanco);
}

/* La línea que une los números */
.uti-paso:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 58px;
	bottom: -15px;
	left: 37px;
	width: 2px;
	background: rgba(19, 175, 249, 0.25);
}

.uti-paso__numero {
	position: absolute;
	top: 20px;
	left: 22px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--azul);
	color: var(--blanco);
	font: 700 15px/1 Roboto, sans-serif;
}

:is(.ap-contenido, .pagina) .uti-paso h3 {
	margin: 4px 0 12px;
	color: var(--noche);
	font: 600 18px/1.3 Roboto, sans-serif;
	text-transform: none;
}

:is(.ap-contenido, .pagina) .uti-paso p {
	margin: 0 0 12px;
	color: var(--texto);
	font-size: 15px;
	line-height: 1.6;
}

:is(.ap-contenido, .pagina) .uti-paso a:not(.uti-descarga, .uti-boton, .elementor-button) {
	color: var(--azul-hondo);
	font-weight: 500;
}

:is(.ap-contenido, .pagina) .uti-paso__plazo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--radio-boton);
	padding: 6px 12px;
	background: #f1f2f4;
	color: var(--noche);
	font-size: 14px;
	font-weight: 500;
}

.uti-paso__plazo .icono {
	width: 16px;
	height: 16px;
	color: var(--azul-hondo);
}

:is(.ap-contenido, .pagina) .uti-lista {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.uti-lista li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 30px;
	color: var(--texto);
	font-size: 15px;
	line-height: 1.55;
}

/* Tick azul, como las ventajas de hacerse socio */
.uti-lista li::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(19, 175, 249, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%230b8fd0'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / 11px no-repeat;
}

:is(.ap-contenido, .pagina) .uti-niveles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.uti-niveles li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	border-radius: 12px;
	padding: 14px;
	background: #f6f7f9;
	color: var(--noche);
	font-size: 15px;
	font-weight: 600;
}

.uti-niveles span {
	color: var(--azul-hondo);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* El formulario de solicitud (Forminator) y el texto que lo acompaña, en una caja suave */
:is(.ap-contenido, .pagina) .uti-formulario {
	margin: 4px 0 16px;
	border-radius: 12px;
	padding: 16px 18px;
	background: rgba(19, 175, 249, 0.07);
	color: var(--texto);
	font-size: 15px;
	line-height: 1.6;
}

:is(.ap-contenido, .pagina) .uti-formulario p:last-child {
	margin-bottom: 0;
}

.uti-formulario:not(:has(*)) {
	display: none;
}

/* Acciones del paso 2: el checklist (si está aprobado) y la descarga del PDF */
:is(.ap-contenido, .pagina) .uti-acciones > .wp-block-group__inner-container,
:is(.ap-contenido, .pagina) .uti-acciones:not(:has(> .wp-block-group__inner-container)) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

:is(.ap-contenido, .pagina) a.uti-descarga {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #d6dae3;
	border-radius: var(--radio-boton);
	padding: 10px 18px;
	background: var(--blanco);
	color: var(--noche);
	font: 500 14px/1 Roboto, sans-serif;
	text-decoration: none;
}

:is(.ap-contenido, .pagina) a.uti-descarga:hover {
	border-color: var(--azul);
	color: var(--azul-hondo);
}

.uti-descarga .icono {
	width: 16px;
	height: 16px;
	color: var(--azul-hondo);
}

/* El botón «Acceder al checklist» que pinta el shortcode (con clases de Elementor), como botón azul de la web */
.uti-acciones .elementor-button {
	display: inline-flex;
	border-radius: var(--radio-boton);
	padding: 11px 20px;
	background: var(--azul);
	color: var(--blanco) !important;
	font: 600 14px/1 Roboto, sans-serif;
	text-transform: none;
}

@media (max-width: 860px) {
	.uti-cabecera {
		grid-template-columns: minmax(0, 1fr);
	}

	.uti-cabecera__foto {
		order: 0;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 600px) {
	:is(.ap-contenido, .pagina) .uti-proceso__datos,
	:is(.ap-contenido, .pagina) .uti-niveles {
		grid-template-columns: minmax(0, 1fr);
	}

	:is(.ap-contenido, .pagina) .uti-paso {
		padding: 64px 18px 14px;
	}

	.uti-paso__numero {
		left: 18px;
	}

	.uti-paso:not(:last-child)::before {
		display: none;
	}
}

/* Webinars SERV en Directo (herramientas/convertir/webinars.php): cabecera blanca con el logotipo y, por año, una
   rejilla de tarjetas iguales (vídeo, título y highlights en PDF) */
.pagina:has(> .webinars-cabecera) {
	--pagina-margen: max(24px, calc((100% - 1160px) / 2));

	padding-top: 0;
}

.pagina > .webinars-cabecera {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
	margin: 0 0 56px;
	border-bottom: 1px solid #eceef2;
	/* Arriba, poco aire: la banda es blanca como la barra y el relleno se leía como un hueco */
	padding: clamp(12px, 1.4vw, 20px) var(--pagina-margen) clamp(32px, 3.6vw, 48px);
	background: var(--blanco);
}

.webinars-cabecera__logo {
	width: clamp(120px, 14vw, 180px);
	height: auto;
}

.pagina .webinars-cabecera__etiqueta {
	display: inline-block;
	margin: 0 0 12px;
	border-radius: var(--radio-boton);
	padding: 5px 12px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
	font: 600 12px/1.2 Roboto, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pagina .webinars-cabecera h1 {
	margin: 0 0 10px;
	color: var(--noche);
	font: 700 clamp(30px, 3.2vw, 44px) / 1.1 Roboto, sans-serif;
	letter-spacing: -0.015em;
}

.pagina .webinars-cabecera__frase {
	margin: 0 0 16px;
	color: var(--texto-suave);
	font-size: 17px;
	line-height: 1.55;
}

.pagina .webinars-cabecera__datos {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--noche);
	font-size: 15px;
	font-weight: 500;
}

.webinars-cabecera__datos .icono {
	width: 20px;
	height: 20px;
	color: var(--azul);
}

.pagina .webinars-ano {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-top: 0;
	margin-bottom: 18px;
	border-top: 1px solid #e3e6eb;
	padding-top: 32px;
	color: var(--noche);
	font: 700 clamp(24px, 2.2vw, 30px) / 1.2 Roboto, sans-serif;
}

.pagina > .webinars-cabecera + .webinars-ano {
	border-top: 0;
	padding-top: 0;
}

.webinars-ano span {
	color: var(--texto-suave);
	font-size: 15px;
	font-weight: 500;
}

.pagina > .webinars-rejilla {
	margin-bottom: 48px;
}

.webinars-rejilla > .wp-block-group__inner-container,
.webinars-rejilla:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 20px;
}

.webinar {
	overflow: hidden;
	margin: 0;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	background: var(--blanco);
}

.webinar > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.pagina .webinar .video {
	margin: 0;
	border-radius: 0;
}

.webinar__texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px 18px;
}

.pagina .webinar h3 {
	margin: 0;
	color: var(--noche);
	font: 600 16px/1.4 Roboto, sans-serif;
	text-transform: none;
}

.pagina a.webinar__pdf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	border: 1px solid #d6dae3;
	border-radius: var(--radio-boton);
	padding: 8px 14px;
	color: var(--noche);
	font: 500 14px/1 Roboto, sans-serif;
	text-decoration: none;
}

.pagina a.webinar__pdf:hover {
	border-color: var(--azul);
	color: var(--azul-hondo);
}

.webinar__pdf .icono {
	width: 16px;
	height: 16px;
	color: var(--azul-hondo);
}

@media (max-width: 600px) {
	.pagina > .webinars-cabecera {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	.webinars-cabecera__logo {
		width: 110px;
	}
}

/* SERV en Directo (herramientas/convertir/serv-en-directo.php): la cabecera de Webinars y, debajo, qué es y el acceso
   rápido (formulario de acceso a quien no ha entrado; «Ver los webinars» a los socios) */
.pagina:has(> .directo-cuerpo) {
	--pagina-margen: max(24px, calc((100% - 1160px) / 2));

	padding-top: 0;
}

.directo-cuerpo > .wp-block-group__inner-container,
.directo-cuerpo:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	align-items: start;
	gap: clamp(28px, 4vw, 64px);
}

.pagina .directo-info h2 {
	margin: 0 0 14px;
	color: var(--noche);
	font: 700 clamp(22px, 2vw, 28px) / 1.2 Roboto, sans-serif;
}

.pagina .directo-info p {
	margin: 0 0 14px;
	color: var(--texto);
	font-size: 16px;
	line-height: 1.65;
}

.pagina .directo-info__datos {
	display: grid;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.directo-info__datos li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	border: 1px solid #e3e6eb;
	border-radius: 14px;
	padding: 14px 16px;
	background: var(--blanco);
	color: var(--texto);
	font-size: 15px;
}

.directo-info__datos .icono {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	padding: 9px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
}

.directo-info__datos strong {
	color: var(--noche);
}

/* La tarjeta de acceso (los campos, casilla y botón, los de la página de acceso: .acceso-socios #wpmem_login) */
.directo-acceso {
	position: sticky;
	top: 100px;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 28px;
	background: var(--blanco);
	box-shadow: 0 18px 40px -24px rgba(37, 43, 66, 0.3);
}

.pagina .directo-acceso__titulo {
	margin: 0 0 6px;
	color: var(--noche);
	font: 700 22px/1.25 Roboto, sans-serif;
}

.pagina .directo-acceso__texto {
	margin: 0 0 18px;
	color: var(--texto-suave);
	font-size: 15px;
	line-height: 1.5;
}

/* El título «Iniciar sesión» del formulario sobra: lo dice la tarjeta */
.pagina .directo-acceso #wpmem_login legend {
	position: absolute;
	width: 1px !important;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pagina .directo-acceso #wpmem_login {
	max-width: none;
	margin: 0;
}

.directo-acceso--socio > .icono {
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: 14px;
	border-radius: 14px;
	padding: 11px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
}

.pagina a.directo-acceso__boton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: var(--radio-boton);
	padding: 15px 22px;
	background: var(--azul);
	color: var(--blanco);
	font: 600 16px/1 Roboto, sans-serif;
	text-decoration: none;
}

.pagina a.directo-acceso__boton:hover {
	background: var(--azul-hondo);
	color: var(--blanco);
}

.directo-acceso__boton .icono {
	width: 18px;
	height: 18px;
}

@media (max-width: 860px) {
	.directo-cuerpo > .wp-block-group__inner-container,
	.directo-cuerpo:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En el móvil, el acceso primero */
	.directo-cuerpo :is(.solo-visitantes, .solo-socios) {
		order: -1;
	}

	.directo-acceso {
		position: static;
		padding: 22px;
	}
}

/* Páginas de Publicaciones (herramientas/convertir/publicaciones-paginas.php): cabecera común, documentos en tarjetas,
   vista para quien no ha entrado (qué hay, con candado, y el acceso) y, en Guías, texto y acceso a la WebApp */
.pagina:has(> .pub-cabecera) {
	--pagina-margen: max(24px, calc((100% - 1100px) / 2));

	padding-top: 0;
}

.pagina > .pub-cabecera {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
	margin: 0 0 48px;
	border-bottom: 1px solid #eceef2;
	padding: clamp(16px, 2vw, 28px) var(--pagina-margen) clamp(32px, 3.6vw, 48px);
	background: var(--blanco);
}

.pub-cabecera__icono {
	display: grid;
	place-items: center;
	width: clamp(64px, 7vw, 88px);
	height: clamp(64px, 7vw, 88px);
	border-radius: 22px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
}

.pub-cabecera__icono .icono {
	width: 46%;
	height: 46%;
}

.pub-cabecera__imagen {
	width: clamp(80px, 9vw, 120px);
	height: auto;
}

.pub-cabecera--trends .pub-cabecera__imagen {
	width: clamp(120px, 14vw, 180px);
}

.pagina .pub-cabecera__etiqueta {
	display: inline-block;
	margin: 0 0 12px;
	border-radius: var(--radio-boton);
	padding: 5px 12px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
	font: 600 12px/1.2 Roboto, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pagina .pub-cabecera h1 {
	margin: 0 0 10px;
	color: var(--noche);
	font: 700 clamp(28px, 3vw, 42px) / 1.12 Roboto, sans-serif;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.pagina .pub-cabecera__frase {
	max-width: 44em;
	margin: 0;
	color: var(--texto-suave);
	font-size: 17px;
	line-height: 1.55;
}

.pagina .pub-cabecera__logos {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 18px 0 0;
}

.pub-cabecera__logos img {
	width: auto;
	height: 34px;
}

.pagina .pub-intro {
	margin: 0 0 18px;
	color: var(--texto-suave);
	font-size: 16px;
}

.pagina .pub-seccion {
	margin-top: 0;
	margin-bottom: 18px;
	color: var(--noche);
	font: 700 clamp(22px, 2vw, 28px) / 1.2 Roboto, sans-serif;
}

/* Documentos */
.pub-docs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
	gap: 12px;
	margin-bottom: 40px;
}

.pagina :is(a.pub-doc, .pub-doc) {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	border: 1px solid #e3e6eb;
	border-radius: 16px;
	padding: 14px 16px;
	background: var(--blanco);
	color: var(--noche);
	text-decoration: none;
	transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}

.pagina a.pub-doc:hover {
	border-color: var(--azul);
	box-shadow: 0 10px 24px -16px rgba(37, 43, 66, 0.4);
	color: var(--noche);
	transform: translateY(-1px);
}

.pub-doc__icono,
.pub-doc__numero {
	display: grid;
	flex: none;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
	font: 700 15px/1 Roboto, sans-serif;
	font-variant-numeric: tabular-nums;
}

.pub-doc__icono .icono {
	width: 22px;
	height: 22px;
}

.pub-doc__texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pub-doc__texto strong {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
}

.pub-doc__texto small {
	color: var(--texto-suave);
	font-size: 13px;
}

.pub-doc > .icono:last-child {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--azul-hondo);
}

/* Bloqueada (quien no ha entrado): sin enlace, más apagada y con candado */
.pub-doc--bloqueada {
	background: #fafbfc !important;
}

.pub-doc--bloqueada .pub-doc__texto strong {
	color: var(--texto-suave);
}

.pub-doc--bloqueada > .icono:last-child {
	visibility: hidden;
}

.pub-doc--bloqueada::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	margin-left: -34px;
	background: #9aa1ad;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Quien no ha entrado: qué hay y, al lado, el acceso */
.pub-bloqueo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	align-items: start;
	gap: 32px;
	margin-bottom: 40px;
}

.pub-bloqueo .pub-docs {
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: 0;
}

.pagina .pub-acceso #wpmem_login legend {
	position: absolute;
	width: 1px !important;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pagina .pub-acceso #wpmem_login {
	max-width: none;
	margin: 0;
}

/* Consentimientos: buscador y grupos */
.pub-buscador {
	margin-bottom: 28px;
}

.pub-buscador .publicaciones-filtro input {
	width: 100%;
	min-height: 50px;
	border: 1px solid #d6dae3;
	border-radius: var(--radio-boton);
	padding: 12px 20px 12px 46px;
	background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%235b6172'%3E%3Cpath d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E") 18px center / 18px no-repeat;
	color: var(--noche);
	font: 400 16px/1.4 Roboto, sans-serif;
}

.pub-buscador .publicaciones-filtro input:focus {
	border-color: var(--azul);
	outline: none;
	box-shadow: 0 0 0 3px rgba(19, 175, 249, 0.18);
}

.pagina .pub-buscador__vacio {
	margin: 16px 0 0;
	color: var(--texto-suave);
}

.pagina .pub-grupo h2 {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 14px;
	color: var(--noche);
	font: 700 20px/1.3 Roboto, sans-serif;
}

.pub-grupo h2 span {
	border-radius: var(--radio-boton);
	padding: 2px 9px;
	background: #eceef2;
	color: var(--texto-suave);
	font-size: 13px;
	font-weight: 600;
}

.pub-grupo .pub-docs {
	margin-bottom: 32px;
}

/* Guías: texto y acceso a la WebApp */
.pub-dos > .wp-block-group__inner-container,
.pub-dos:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	align-items: start;
	gap: clamp(28px, 4vw, 56px);
	margin-bottom: 40px;
}

.pagina .pub-texto h2 {
	margin: 0 0 14px;
	color: var(--noche);
	font: 700 clamp(22px, 2vw, 28px) / 1.2 Roboto, sans-serif;
}

.pagina .pub-texto p {
	margin: 0 0 14px;
	color: var(--texto);
	font-size: 16px;
	line-height: 1.7;
}

.pub-acceso__icono {
	display: block;
	width: 96px;
	height: auto;
	margin-bottom: 14px;
}

.pub-acceso--webapp .directo-acceso__boton {
	margin-bottom: 4px;
}

.pub-acceso--webapp .pfer-financia {
	margin: 22px -28px -28px;
	padding: 14px 28px 16px;
}

.pub-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	width: 100%;
}

.pub-logos img {
	width: auto;
	max-width: 76px;
	height: 26px;
	object-fit: contain;
}

/* Trends: patrocinadores */
.pagina .pub-patrocinio {
	margin-top: 24px;
	margin-bottom: 8px;
}

.pub-patrocinio img {
	width: min(100%, 560px);
	height: auto;
	border-radius: 16px;
}

@media (max-width: 860px) {
	.pub-bloqueo,
	.pub-dos > .wp-block-group__inner-container,
	.pub-dos:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: minmax(0, 1fr);
	}

	/* El acceso, antes que el resto */
	.pub-bloqueo > .pub-acceso,
	.pub-dos :is(.solo-socios, .solo-visitantes) {
		order: -1;
	}
}

@media (max-width: 600px) {
	.pagina > .pub-cabecera {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}
}

/* Área de pacientes (herramientas/convertir/pacientes.php). Enfermedades más frecuentes: índice de tarjetas y, por
   enfermedad, el vídeo junto a sus preguntas en desplegables. Formación del paciente: tarjetas de Webinars con ponente */
.pagina > .pac-indice {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 20px;
	margin-top: 0;
	margin-bottom: 72px;
}

.pagina a.pac-tarjeta {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	background: var(--blanco);
	color: var(--noche);
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.pagina a.pac-tarjeta:hover {
	border-color: rgba(19, 175, 249, 0.5);
	box-shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
	transform: translateY(-2px);
}

.pac-tarjeta img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.pac-tarjeta__texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
}

.pac-tarjeta__quien {
	color: var(--azul-hondo);
	font: 500 13px/1.3 Roboto, sans-serif;
}

.pac-tarjeta__titulo {
	font: 600 18px/1.3 Roboto, sans-serif;
	text-wrap: pretty;
}

.pac-tarjeta__resumen {
	color: var(--texto-suave);
	font-size: 15px;
	line-height: 1.5;
}

.pac-tarjeta__ver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
	color: var(--azul-hondo);
	font: 600 13px/1.2 Roboto, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pac-tarjeta__ver .icono {
	width: 15px;
	height: 15px;
	transition: transform 0.2s;
}

.pac-tarjeta:hover .pac-tarjeta__ver .icono {
	transform: translateX(3px);
}

.pagina > .pac-articulo {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(24px, 4vw, 56px);
	margin-top: 0;
	margin-bottom: 0;
	border-top: 1px solid #eceef2;
	padding: 56px 0;
	scroll-margin-top: 100px;
}

.pac-articulo__video {
	position: sticky;
	top: 108px;
}

.pagina .pac-articulo__video .video {
	margin: 0;
}

.pagina .pac-articulo__quien {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: var(--azul-hondo);
	font: 500 14px/1.3 Roboto, sans-serif;
}

.pac-articulo__quien .icono {
	width: 20px;
	height: 20px;
}

.pagina .pac-articulo h2 {
	margin: 0 0 20px;
	color: var(--noche);
	font: 700 clamp(24px, 2.4vw, 30px) / 1.2 Roboto, sans-serif;
	letter-spacing: -0.01em;
	text-transform: none;
	text-wrap: balance;
}

.pac-pregunta {
	border-bottom: 1px solid #eceef2;
}

.pac-pregunta:first-of-type {
	border-top: 1px solid #eceef2;
}

.pac-pregunta summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 14px;
	padding: 16px 0;
	color: var(--noche);
	font: 500 16px/1.45 Roboto, sans-serif;
	list-style: none;
	cursor: pointer;
}

.pac-pregunta summary::-webkit-details-marker {
	display: none;
}

.pac-pregunta summary:hover {
	color: var(--azul-hondo);
}

.pac-pregunta__n {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
	font: 600 13px/1 Roboto, sans-serif;
}

.pac-pregunta summary .icono {
	width: 18px;
	height: 18px;
	margin-top: 4px;
	color: var(--texto-suave);
	transition: transform 0.2s;
}

.pac-pregunta[open] summary .icono {
	transform: rotate(180deg);
}

.pac-pregunta__respuesta {
	padding: 0 32px 18px 40px;
}

.pagina .pac-pregunta__respuesta p {
	margin: 0 0 12px;
	color: var(--texto-suave);
	font-size: 16px;
	line-height: 1.65;
	text-align: left;
}

.pagina .pac-pregunta__respuesta p:last-child {
	margin-bottom: 0;
}

.pagina a.pac-articulo__volver {
	display: inline-block;
	margin-top: 20px;
	color: var(--texto-suave);
	font: 500 14px/1.2 Roboto, sans-serif;
	text-decoration: none;
}

.pagina a.pac-articulo__volver::before {
	content: "↑ ";
}

.pagina a.pac-articulo__volver:hover {
	color: var(--azul-hondo);
}

.pagina .webinar__ponente {
	margin: 0;
	color: var(--azul-hondo);
	font: 500 13px/1.3 Roboto, sans-serif;
}

@media (max-width: 900px) {
	.pagina > .pac-articulo {
		grid-template-columns: minmax(0, 1fr);
		padding: 40px 0;
	}

	.pac-articulo__video {
		position: static;
	}

	.pac-pregunta__respuesta {
		padding-right: 0;
	}
}

@media (max-width: 600px) {
	.pagina > .pac-indice {
		gap: 10px;
		margin-bottom: 48px;
	}

	.pagina a.pac-tarjeta {
		flex-direction: row;
		align-items: center;
	}

	.pac-tarjeta img {
		flex: 0 0 104px;
		width: 104px;
		height: 100%;
		min-height: 84px;
		aspect-ratio: auto;
	}

	.pac-tarjeta__texto {
		gap: 4px;
		padding: 12px 14px;
	}

	.pac-tarjeta__titulo {
		font-size: 16px;
	}

	.pac-tarjeta__resumen,
	.pac-tarjeta__ver {
		display: none;
	}
}

/* Agenda de eventos ([serv_agenda], inc/listado.php; herramientas/convertir/agenda-eventos.php): cabecera de
   Publicaciones, próximos y anteriores con las tarjetas de la portada, y un aviso si no hay próximos */
.pagina:has(> .agenda) {
	--pagina-margen: max(24px, calc((100% - 1100px) / 2));
}

.pagina > .agenda {
	margin-top: 0;
	margin-bottom: 72px;
}

.agenda-apartado + .agenda-apartado,
.agenda-vacia + .agenda-apartado {
	margin-top: 56px;
}

.pagina .agenda-apartado__titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	color: var(--noche);
	font: 700 clamp(22px, 2.2vw, 26px) / 1.2 Roboto, sans-serif;
	text-transform: none;
}

.pagina h1.agenda-apartado__titulo {
	font-size: clamp(28px, 3vw, 36px);
	letter-spacing: -0.015em;
}

.agenda-apartado__titulo span {
	border-radius: var(--radio-boton);
	padding: 4px 10px;
	background: #eceef2;
	color: var(--texto-suave);
	font: 600 13px/1 Roboto, sans-serif;
}

.pagina .tarjeta-evento__etiquetas,
.tarjeta-evento__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
}

.tarjeta-evento__estado,
.tarjeta-evento__tipo {
	border-radius: var(--radio-boton);
	padding: 4px 9px;
	background: #eceef2;
	color: var(--texto-suave);
	font: 600 11px/1 Roboto, sans-serif;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.tarjeta-evento__tipo {
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
}

.pagina .tarjeta-evento__titulo a {
	color: inherit;
	text-decoration: none;
}

.tarjeta-evento--pasado .tarjeta-evento__cuando {
	color: var(--texto-suave);
}

.agenda-vacia {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 24px 28px;
	background: var(--blanco);
}

.agenda-vacia > .icono {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	padding: 13px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
}

.pagina .agenda-vacia p {
	margin: 0;
	color: var(--texto-suave);
	font-size: 15px;
	line-height: 1.5;
}

.pagina .agenda-vacia .agenda-vacia__titulo {
	margin-bottom: 4px;
	color: var(--noche);
	font: 600 18px/1.3 Roboto, sans-serif;
}

.pagina a.agenda-vacia__boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #d6dae3;
	border-radius: var(--radio-boton);
	padding: 11px 18px;
	color: var(--noche);
	font: 500 14px/1 Roboto, sans-serif;
	text-decoration: none;
	white-space: nowrap;
}

.pagina a.agenda-vacia__boton:hover {
	border-color: var(--azul);
	color: var(--azul-hondo);
}

.agenda-vacia__boton .icono {
	width: 16px;
	height: 16px;
}

@media (max-width: 700px) {
	.agenda-vacia {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		gap: 14px;
		padding: 22px;
	}
}

/* Página de un evento (single-event.php): cabecera blanca con los datos, las acciones y el cartel entero; «Sobre el
   evento» y «Más eventos» con las tarjetas de la agenda */
.pagina--evento {
	--pagina-margen: max(24px, calc((100% - 1200px) / 2));

	padding-top: 0;
}

.pagina > .evento-cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
	margin: 0 0 56px;
	border-bottom: 1px solid #eceef2;
	padding: clamp(24px, 3vw, 40px) var(--pagina-margen) clamp(40px, 4vw, 56px);
	background: var(--blanco);
}

.pagina a.evento-volver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 20px;
	color: var(--texto-suave);
	font: 500 14px/1.2 Roboto, sans-serif;
	text-decoration: none;
}

.pagina a.evento-volver:hover {
	color: var(--azul-hondo);
}

.evento-volver .icono {
	width: 16px;
	height: 16px;
}

.pagina .evento-estado {
	width: fit-content;
	margin: 0 0 14px;
	border-radius: var(--radio-boton);
	padding: 5px 12px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
	font: 600 12px/1.2 Roboto, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.evento-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

.pagina .evento-etiquetas .evento-estado {
	margin: 0;
}

.pagina .evento-estado--online {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(46, 182, 125, 0.14);
	color: #1d7a52;
}

.evento-estado--online .icono {
	width: 14px;
	height: 14px;
}

.pagina .evento-estado--pasado {
	background: #eceef2;
	color: var(--texto-suave);
}

.pagina .evento-cabecera h1 {
	margin: 0 0 22px;
	color: var(--noche);
	font: 700 clamp(28px, 3.2vw, 44px) / 1.12 Roboto, sans-serif;
	letter-spacing: -0.015em;
	text-transform: none;
	text-wrap: balance;
}

.pagina .evento-datos {
	display: grid;
	gap: 10px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.pagina .evento-datos li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--noche);
	font: 400 17px/1.4 Roboto, sans-serif;
}

/* El lugar, enlazado a Google Maps, sin subrayar (Jandro): solo cambia de color al pasar por encima */
.pagina .evento-datos a {
	color: inherit;
	text-decoration: none;
}

.pagina .evento-datos a:hover {
	color: var(--azul-hondo);
}

.evento-datos .icono {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--azul-hondo);
}

.evento-acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
}

.pagina a.evento-boton,
.evento-boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--azul);
	border-radius: var(--radio-boton);
	padding: 13px 22px;
	background: var(--azul);
	color: var(--blanco);
	font: 600 15px/1 Roboto, sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}

/* (doble clase: «.pagina a:not(…):hover» pondría el texto en azul sobre el azul) */
.pagina a.evento-boton.evento-boton:hover {
	border-color: var(--azul-hondo);
	background: var(--azul-hondo);
	color: var(--blanco);
}

.pagina a.evento-boton--borde,
.evento-boton--borde {
	border-color: #d6dae3;
	background: var(--blanco);
	color: var(--noche);
	font-weight: 500;
}

.pagina a.evento-boton--borde.evento-boton--borde:hover,
.evento-boton--borde:hover {
	border-color: var(--azul);
	background: var(--blanco);
	color: var(--azul-hondo);
}

.evento-boton .icono {
	width: 18px;
	height: 18px;
}

.evento-boton span {
	border-radius: 4px;
	padding: 3px 5px;
	background: #eceef2;
	color: var(--texto-suave);
	font: 600 10px/1 Roboto, sans-serif;
}

.evento-calendario {
	position: relative;
}

.evento-calendario summary {
	list-style: none;
}

.evento-calendario summary::-webkit-details-marker {
	display: none;
}

.evento-calendario[open] summary .icono:last-child {
	transform: rotate(180deg);
}

.evento-calendario__menu {
	position: absolute;
	z-index: 5;
	top: calc(100% + 6px);
	left: 0;
	display: grid;
	min-width: 100%;
	border: 1px solid #e3e6eb;
	border-radius: 12px;
	padding: 6px;
	background: var(--blanco);
	box-shadow: 0 16px 36px -12px rgba(37, 43, 66, 0.25);
}

.pagina .evento-calendario__menu a {
	border-radius: 8px;
	padding: 10px 12px;
	color: var(--noche);
	font: 500 14px/1.2 Roboto, sans-serif;
	text-decoration: none;
	white-space: nowrap;
}

.pagina .evento-calendario__menu a:hover {
	background: #f1f2f4;
}

.evento-cabecera__cartel {
	overflow: hidden;
	margin: 0;
	border: 1px solid #eceef2;
	border-radius: var(--radio-l);
	box-shadow: 0 24px 48px -28px rgba(37, 43, 66, 0.35);
}

.evento-cabecera__cartel img {
	display: block;
	width: 100%;
	height: auto;
}

.pagina > .evento-sobre {
	max-width: 760px;
	margin-top: 0;
	margin-bottom: 56px;
}

.pagina .evento-sobre h2,
.pagina .evento-mas h2 {
	margin: 0 0 16px;
	color: var(--noche);
	font: 700 clamp(22px, 2.2vw, 26px) / 1.2 Roboto, sans-serif;
	text-transform: none;
}

.pagina .evento-sobre p {
	margin: 0 0 14px;
	color: var(--texto-suave);
	font-size: 17px;
	line-height: 1.65;
}

.pagina > .evento-mas {
	margin-top: 0;
	margin-bottom: 80px;
	border-top: 1px solid #eceef2;
	padding-top: 48px;
}

.evento-mas__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.pagina .evento-mas__cabecera h2 {
	margin: 0;
}

.pagina .evento-mas__cabecera a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--azul-hondo);
	font: 600 14px/1 Roboto, sans-serif;
	text-decoration: none;
}

.evento-mas__cabecera .icono {
	width: 16px;
	height: 16px;
}

@media (max-width: 900px) {
	.pagina > .evento-cabecera {
		grid-template-columns: minmax(0, 1fr);
	}

	.evento-cabecera__cartel {
		order: -1;
	}
}

@media (max-width: 600px) {
	.evento-acciones > * {
		flex: 1 1 100%;
	}

	.pagina a.evento-boton,
	.evento-boton {
		justify-content: center;
		width: 100%;
	}
}

/* Blog ([serv_blog], inc/listado.php; herramientas/convertir/blog.php): «Blog» y el buscador en una fila, los temas
   como píldoras con su número, el resultado de la búsqueda y las tarjetas con tema y fecha */
.pagina:has(> .blog) {
	--pagina-margen: max(24px, calc((100% - 1100px) / 2));
}

.pagina > .blog {
	margin-top: 0;
	margin-bottom: 72px;
}

.pagina .blog-titulo {
	margin: 0 0 20px;
	color: var(--noche);
	font: 700 clamp(28px, 3vw, 36px) / 1.15 Roboto, sans-serif;
	letter-spacing: -0.015em;
	text-transform: none;
}

/* El buscador, una barra a todo el ancho */
.blog-barra {
	display: flex;
	align-items: stretch;
	margin-bottom: 16px;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	background: var(--blanco);
	box-shadow: 0 1px 2px rgba(15, 20, 40, 0.04);
	transition: border-color var(--transicion), box-shadow var(--transicion);
}

.blog-barra:focus-within {
	border-color: var(--azul);
	box-shadow: 0 0 0 3px rgba(19, 175, 249, 0.15);
}

.blog-barra__buscar {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 0;
	padding: 6px 6px 6px 48px;
}

.blog-barra__buscar > .icono {
	position: absolute;
	left: 18px;
	width: 20px;
	height: 20px;
	color: var(--texto-suave);
}

.pagina .blog-barra input[type="search"] {
	flex: 1;
	min-width: 0;
	margin: 0;
	border: 0;
	padding: 10px 4px;
	background: transparent;
	box-shadow: none;
	color: var(--noche);
	font: 400 16px/1.3 Roboto, sans-serif;
	outline: none;
}

.pagina .blog-barra__buscar button {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 12px;
	padding: 0;
	background: #f1f2f4;
	color: var(--noche);
	cursor: pointer;
	transition: background var(--transicion), color var(--transicion);
}

.pagina .blog-barra__buscar button:hover,
.blog-barra__buscar:focus-within button {
	background: var(--azul);
	color: var(--blanco);
}

.blog-barra__buscar button .icono {
	width: 18px;
	height: 18px;
}

.blog-temas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}

.pagina .blog-temas a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-boton);
	padding: 9px 14px;
	background: var(--blanco);
	color: var(--noche);
	font: 500 14px/1 Roboto, sans-serif;
	text-decoration: none;
	transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}

.pagina .blog-temas a:hover {
	border-color: var(--azul);
	color: var(--noche);
}

.pagina .blog-temas a[aria-current="page"] {
	border-color: var(--noche);
	background: var(--noche);
	color: var(--blanco);
}

.blog-temas a span {
	color: var(--texto-suave);
	font-size: 12px;
}

.blog-temas a[aria-current="page"] span {
	color: rgba(255, 255, 255, 0.7);
}

/* Encima de las tarjetas: cuántos hay (y la búsqueda) a la izquierda, «Ordenar» a la derecha */
.blog-resumen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: -8px 0 20px;
}

.pagina .blog-resultado {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0;
	color: var(--texto-suave);
	font-size: 15px;
}

.blog-orden {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--texto-suave);
	font: 400 14px/1 Roboto, sans-serif;
}

.pagina .blog-orden select {
	width: auto;
	margin: 0;
	border: 0;
	border-radius: 8px;
	padding: 8px 28px 8px 8px;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23252b42'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat right 8px center / 13px;
	box-shadow: none;
	color: var(--noche);
	font: 500 14px/1 Roboto, sans-serif;
	cursor: pointer;
	appearance: none;
}

.pagina .blog-orden select:hover,
.pagina .blog-orden select:focus-visible {
	background-color: #eceef2;
	outline: none;
}

.pagina .blog-resultado a {
	color: var(--azul-hondo);
	font-weight: 500;
}

.tarjeta-articulo__datos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	padding: 20px 20px 0;
	color: var(--texto-suave);
	font: 400 13px/1.2 Roboto, sans-serif;
}

.tarjeta-articulo__tema {
	border-radius: var(--radio-boton);
	padding: 4px 9px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
	font: 600 11px/1 Roboto, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tarjeta-articulo__datos + .tarjeta-articulo__titulo {
	padding-top: 10px;
}

.blog-vacio {
	border: 1px dashed #d6dae3;
	border-radius: var(--radio-l);
	padding: 48px 24px;
	text-align: center;
}

.pagina .blog-vacio p {
	margin: 0 0 6px;
	color: var(--texto-suave);
}

.pagina .blog-vacio .blog-vacio__titulo {
	color: var(--noche);
	font: 600 18px/1.3 Roboto, sans-serif;
}

.pagina .blog-vacio a {
	display: inline-block;
	margin-top: 12px;
	color: var(--azul-hondo);
	font-weight: 500;
}

@media (max-width: 600px) {
	/* Las píldoras, en una fila que se desliza (no ocupan media pantalla) */
	.blog-temas {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-right: calc(-1 * var(--pagina-margen));
		padding-right: var(--pagina-margen);
		scrollbar-width: none;
	}

	.blog-temas a {
		flex: none;
	}
}

/* Artículo del blog (partes/entrada-blog.php, inc/blog.php; la barra de progreso y el índice activo, en serv.js).
   Pensado para leer: fondo blanco, columna de texto de unos 70 caracteres, letra de 18-19px con interlineado amplio
   y jerarquía clara; compartir e índice a los lados en pantallas anchas. */
.pagina--post {
	--pagina-margen: max(20px, calc((100% - 1200px) / 2));
	--post-texto: 690px;

	background: var(--blanco);
}

body:has(.pagina--post) .cabecera--clara {
	background: var(--blanco);
}

.post-progreso {
	position: fixed;
	z-index: 1001;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	margin: 0 !important;
	pointer-events: none;
}

.post-progreso span {
	display: block;
	height: 100%;
	background: var(--azul);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* Cabecera */
.pagina > .post-cabecera {
	max-width: 780px;
	margin: 0 auto 36px;
	padding: 0 20px;
	box-sizing: content-box;
}

.pagina .post-migas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
	color: #b0b5c0;
	font: 500 14px/1.2 Roboto, sans-serif;
}

.pagina .post-migas a {
	color: var(--azul-hondo);
	text-decoration: none;
}

.pagina .post-migas a:hover {
	text-decoration: underline;
}

.pagina .post-cabecera h1 {
	margin: 0 0 28px;
	color: var(--noche);
	font: 700 clamp(30px, 3.6vw, 46px) / 1.14 Roboto, sans-serif;
	letter-spacing: -0.02em;
	text-transform: none;
	text-wrap: balance;
}

/* Autor a la izquierda y, en la misma fila, fecha y lectura a la derecha, con aire y una raya entre los dos bloques
   (Jandro: «todo en la misma línea, solo un poco más de espacio»). En el móvil, la fecha debajo. */
.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 0;
	border-top: 1px solid #eceef2;
	padding-top: 20px;
}

.post-autor {
	display: flex;
	flex: 1 1 300px;
	align-items: center;
	gap: 14px;
	padding-right: 28px;
}

.post-autor + .post-meta__datos {
	border-left: 1px solid #e3e6eb;
	padding: 4px 0 4px 28px;
}

.post-meta__datos > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.post-meta__datos .icono {
	width: 16px;
	height: 16px;
	color: #9aa1b0;
}

.post-autor__inicial {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(19, 175, 249, 0.14);
	color: var(--azul-hondo);
	font: 700 15px/1 Roboto, sans-serif;
	letter-spacing: 0.02em;
}

.pagina .post-autor__foto {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--blanco), 0 0 0 3px #e3e6eb;
}

.post-autor__nombre {
	display: block;
	color: var(--noche);
	font: 600 15px/1.3 Roboto, sans-serif;
}

.post-autor__cargo {
	display: -webkit-box;
	overflow: hidden;
	color: var(--texto-suave);
	font: 400 13px/1.4 Roboto, sans-serif;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.post-meta__datos {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	color: var(--texto-suave);
	font: 400 14px/1.3 Roboto, sans-serif;
}

/* Imagen destacada, más ancha que el texto */
.pagina > .post-imagen {
	max-width: 1040px;
	margin: 0 auto 48px;
	padding: 0 20px;
	box-sizing: content-box;
}

.pagina .post-imagen img {
	display: block;
	width: 100%;
	max-height: 600px;
	border-radius: 20px;
	object-fit: cover;
}

/* Cuerpo: compartir | texto | índice */
.pagina > .post-cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--post-texto)) minmax(0, 1fr);
	gap: 0 48px;
	margin-top: 0;
	margin-bottom: 0;
}

.post-lateral--compartir {
	justify-self: end;
}

.post-lateral--indice {
	justify-self: start;
	width: 100%;
	max-width: 250px;
}

.post-lateral > * {
	position: sticky;
	top: 140px;
}

.post-compartir {
	display: flex;
	gap: 8px;
}

.post-compartir--vertical {
	flex-direction: column;
}

.pagina .post-compartir :is(a, button) {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	padding: 0;
	background: #f1f3f6;
	color: #4a5163;
	cursor: pointer;
	transition: color var(--transicion), background var(--transicion);
}

.pagina .post-compartir :is(a, button):hover,
.pagina .post-compartir :is(a, button):focus-visible {
	background: var(--noche);
	color: var(--blanco);
}

/* Las marcas, todas a la misma altura óptica; correo y enlace, de trazo, algo mayores */
.post-compartir .icono {
	width: 16px;
	height: 16px;
}

.post-compartir :is(a[href^="mailto"], button) .icono {
	width: 18px;
	height: 18px;
}

/* El aviso «Enlace copiado», fuera del flujo: vacío ocupaba una fila de la rejilla del botón y subía el icono */
.post-copiar__hecho {
	position: absolute;
}

.post-copiar__hecho:not(:empty) {
	left: calc(100% + 8px);
	top: 50%;
	border-radius: 6px;
	padding: 5px 8px;
	background: var(--noche);
	color: var(--blanco);
	font: 500 12px/1 Roboto, sans-serif;
	white-space: nowrap;
	transform: translateY(-50%);
}

.post-indice__titulo {
	margin: 0 0 12px !important;
	color: var(--texto-suave);
	font: 600 12px/1.2 Roboto, sans-serif !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pagina .post-indice__lista {
	margin: 0;
	border-left: 1px solid #e3e6eb;
	padding: 0;
	list-style: none;
}

.pagina .post-indice__lista li {
	margin: 0;
}

.pagina .post-indice__lista a {
	display: block;
	margin-left: -1px;
	border-left: 2px solid transparent;
	padding: 7px 0 7px 14px;
	color: var(--texto-suave);
	font: 400 14px/1.4 Roboto, sans-serif;
	text-decoration: none;
	transition: color var(--transicion), border-color var(--transicion);
}

.pagina .post-indice__lista a:hover {
	color: var(--noche);
}

.pagina .post-indice__lista a[aria-current="true"] {
	border-left-color: var(--azul);
	color: var(--noche);
	font-weight: 500;
}

/* Índice plegado (pantallas sin los laterales) */
.post-indice-plegado {
	display: none;
	margin: 0 0 32px;
	border: 1px solid #e3e6eb;
	border-radius: 14px;
	background: #fafbfc;
}

.post-indice-plegado summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	color: var(--noche);
	font: 600 15px/1.2 Roboto, sans-serif;
	list-style: none;
	cursor: pointer;
}

.post-indice-plegado summary::-webkit-details-marker {
	display: none;
}

.post-indice-plegado summary span {
	color: var(--texto-suave);
	font-weight: 400;
}

.post-indice-plegado summary .icono {
	width: 18px;
	height: 18px;
}

.post-indice-plegado summary .icono:last-child {
	margin-left: auto;
	transition: transform var(--transicion);
}

.post-indice-plegado[open] summary .icono:last-child {
	transform: rotate(180deg);
}

.post-indice-plegado .post-indice__lista {
	margin: 0 16px 14px;
}

/* El texto */
.post-texto {
	min-width: 0;
	color: #2c3243;
	font: 400 18px/1.75 Roboto, sans-serif;
	overflow-wrap: break-word;
}

.pagina .post-texto > :first-child {
	margin-top: 0;
}

.pagina .post-texto p {
	margin: 0 0 1.3em;
	font: inherit;
}

.pagina .post-texto :is(p, li) span[style] {
	font-weight: inherit !important;
}

.pagina .post-texto h2 {
	margin: 2.1em 0 0.7em;
	color: var(--noche);
	font: 700 clamp(23px, 2.2vw, 27px) / 1.3 Roboto, sans-serif;
	letter-spacing: -0.01em;
	text-transform: none;
	scroll-margin-top: 130px;
}

.pagina .post-texto h3 {
	margin: 1.8em 0 0.5em;
	color: var(--noche);
	font: 600 clamp(19px, 1.7vw, 21px) / 1.35 Roboto, sans-serif;
	text-transform: none;
}

.pagina .post-texto h4 {
	margin: 1.6em 0 0.4em;
	color: var(--noche);
	font: 600 18px/1.4 Roboto, sans-serif;
	text-transform: none;
}

.pagina .post-texto :is(h2, h3, h4) :is(b, strong) {
	font-weight: inherit;
}

.pagina .post-texto :is(strong, b) {
	color: var(--noche);
	font-weight: 600;
}

.pagina .post-texto :is(ul, ol) {
	margin: 0 0 1.4em;
	padding-left: 1.4em;
}

.pagina .post-texto li {
	margin: 0 0 0.5em;
	padding-left: 0.25em;
	font: inherit;
}

.pagina .post-texto li::marker {
	color: var(--azul);
}

.pagina .post-texto ol > li::marker {
	font-weight: 600;
}

.pagina .post-texto li > p {
	margin: 0;
}

.pagina .post-texto a:not(.wp-block-button__link) {
	color: var(--azul-hondo);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pagina .post-texto blockquote {
	margin: 2em 0;
	border-left: 3px solid var(--azul);
	padding: 0.2em 0 0.2em 1.3em;
	color: var(--noche);
	font-size: 1.12em;
	line-height: 1.6;
}

.pagina .post-texto hr {
	height: 1px;
	margin: 2.6em 0;
	border: 0;
	background: #e3e6eb;
}

.pagina .post-texto img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.pagina .post-texto :is(figure, .wp-caption) {
	max-width: 100%;
	margin: 2em 0;
}

.pagina .post-texto figcaption,
.pagina .post-texto .wp-caption-text {
	margin-top: 10px;
	color: var(--texto-suave);
	font-size: 14px;
	line-height: 1.5;
}

.pagina .post-texto table {
	display: block;
	overflow-x: auto;
	margin: 2em 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.pagina .post-texto :is(th, td) {
	border: 1px solid #e3e6eb;
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}

.pagina .post-texto th {
	background: #f4f6f9;
	color: var(--noche);
}

.pagina .post-texto iframe:not(.post-podcast iframe) {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
	border-radius: 14px;
}

.pagina .post-texto iframe[src*="vimeo"],
.pagina .post-texto iframe[src*="youtube"] {
	height: auto;
	aspect-ratio: 16 / 9;
}

/* El podcast: «Escucha este artículo» */
.pagina .post-texto .post-podcast {
	margin: 0 0 2.2em;
	border-radius: 18px;
	padding: 14px 14px 10px;
	background: #f1f5f9;
}

.post-podcast figcaption {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px 4px !important;
	color: var(--noche) !important;
	font: 600 13px/1.2 Roboto, sans-serif !important;
}

.post-podcast figcaption .icono {
	width: 18px;
	height: 18px;
	color: #1db954;
}

.post-podcast iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 12px;
}

/* Pie: tema y compartir */
.pagina > .post-pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: var(--post-texto);
	margin: 24px auto 0;
	border-top: 1px solid #eceef2;
	padding: 24px 20px 0;
	box-sizing: content-box;
}

.pagina a.post-pie__tema {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--radio-boton);
	padding: 10px 16px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
	font: 600 14px/1 Roboto, sans-serif;
	text-decoration: none;
}

.pagina a.post-pie__tema:hover {
	background: rgba(19, 175, 249, 0.2);
}

.post-pie__tema .icono {
	width: 16px;
	height: 16px;
}

.post-pie__compartir {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--texto-suave);
	font: 500 14px/1 Roboto, sans-serif;
}

/* Seguir leyendo: banda gris a todo el ancho */
.pagina > .post-relacionados {
	margin: 72px 0 calc(-5% - 1px);
	padding: 56px max(20px, calc((100% - 1100px) / 2)) 72px;
	background: var(--fondo);
}

.post-relacionados__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.pagina .post-relacionados h2 {
	margin: 0;
	color: var(--noche);
	font: 700 clamp(22px, 2.2vw, 26px) / 1.2 Roboto, sans-serif;
	text-transform: none;
}

.pagina .post-relacionados__cabecera a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--azul-hondo);
	font: 600 14px/1 Roboto, sans-serif;
	text-decoration: none;
}

.post-relacionados__cabecera .icono {
	width: 16px;
	height: 16px;
}

/* Sin laterales: el índice, plegado arriba del texto; compartir, al final */
@media (max-width: 1180px) {
	.pagina > .post-cuerpo {
		grid-template-columns: minmax(0, var(--post-texto));
		justify-content: center;
	}

	.post-lateral {
		display: none;
	}

	.post-indice-plegado {
		display: block;
	}
}

@media (min-width: 1024px) {
	.post-texto {
		font-size: 19px;
	}
}

@media (max-width: 600px) {
	.pagina .post-cabecera h1 {
		margin-bottom: 22px;
	}

	.post-meta {
		gap: 20px;
	}

	.post-autor {
		padding-right: 0;
	}

	.post-autor + .post-meta__datos {
		border-left: 0;
		padding-left: 0;
	}

	.pagina > .post-imagen {
		margin-bottom: 32px;
	}

	.pagina .post-imagen img {
		border-radius: 14px;
	}

	.post-texto {
		font-size: 17px;
		line-height: 1.7;
	}

	.pagina > .post-relacionados {
		margin-top: 56px;
		padding-top: 40px;
	}
}

/* Tarjeta de descarga de un documento (Estatutos; herramientas/convertir/estatutos-descarga.php): icono, título y
   tipo y tamaño del archivo, y el botón azul a la derecha. En el móvil, el botón debajo, a todo el ancho. */
.pagina > .descarga {
	margin-top: 48px;
}

.descarga {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-l);
	padding: 24px 28px;
	background: var(--blanco);
	box-shadow: 0 1px 2px rgba(15, 20, 40, 0.04);
}

.descarga__icono {
	display: grid;
	flex: none;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(19, 175, 249, 0.12);
	color: var(--azul-hondo);
}

.descarga__icono .icono {
	width: 28px;
	height: 28px;
}

.descarga__texto {
	flex: 1 1 220px;
}

.pagina .descarga__texto p {
	margin: 0;
}

.pagina .descarga__titulo {
	color: var(--noche);
	font: 600 19px/1.3 Roboto, sans-serif;
}

.pagina .descarga__detalle {
	margin-top: 2px;
	color: var(--texto-suave);
	font: 400 14px/1.4 Roboto, sans-serif;
}

.pagina a.descarga__boton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: var(--radio-boton);
	padding: 14px 24px;
	background: var(--azul);
	color: var(--blanco);
	font: 600 15px/1 Roboto, sans-serif;
	text-decoration: none;
	transition: background-color var(--transicion);
}

.pagina a.descarga__boton:hover {
	background: var(--azul-hondo);
	color: var(--blanco);
}

.descarga__boton .icono {
	width: 18px;
	height: 18px;
}

@media (max-width: 520px) {
	.descarga {
		padding: 20px;
	}

	/* El icono junto al título; el botón debajo */
	.descarga__icono {
		width: 48px;
		height: 48px;
	}

	.descarga__texto {
		flex: 1 1 0;
		min-width: 0;
	}

	.pagina a.descarga__boton {
		justify-content: center;
		width: 100%;
	}
}

/* Páginas de equipo (Junta Directiva y Grupo de trabajo; la clase la pone functions.php). Mismo aspecto en las dos
   (Jandro, 16-10-2026): todas las secciones sobre el mismo fondo claro, sin bandas oscuras, con la misma separación;
   cada persona en la misma tarjeta (foto cuadrada, nombre y cargo) y del mismo ancho en todas las secciones. */

/* Todo en una columna de 1060px (cinco tarjetas), centrada; las bandas, con los mismos márgenes */
.pagina-equipo .pagina,
.pagina-equipo .pagina:has(> :is(.portadilla, .banda):first-child) {
	--pagina-margen: max(24px, calc((100% - 1060px) / 2));

	padding-top: clamp(32px, 2.5vw + 20px, 56px);
}

.pagina-equipo .pagina > .banda {
	padding: 0 var(--pagina-margen);
	background: none;
	color: inherit;
}

.pagina-equipo .pagina > .banda + .banda {
	margin-top: 20px;
}

.pagina-equipo .pagina > :is(.banda, .portadilla) + :not(.banda),
.pagina-equipo .pagina > :not(.banda, .portadilla):has(+ .banda) {
	margin-block: 0;
}

.pagina-equipo .pagina > .banda:last-child {
	margin-bottom: 0;
}

.pagina-equipo .pagina :is(h1, h2).titulo-seccion,
.pagina-equipo .pagina > :is(.banda, .portadilla) + :is(h1, h2).titulo-seccion {
	margin-top: 72px;
	margin-bottom: 28px;
	color: var(--acento);
}

.pagina-equipo .pagina > :first-child :is(h1, h2).titulo-seccion,
.pagina-equipo .pagina > :is(h1, h2).titulo-seccion:first-child {
	margin-top: 0;
}

.pagina-equipo .pagina .wp-block-columns:has(> .wp-block-column img) {
	/* WordPress pone las columnas en una sola línea en pantallas anchas (con !important): con seis personas en una
	   fila, la última se salía */
	flex-wrap: wrap !important;
	justify-content: flex-start;
	gap: 20px;
	margin-top: 0;
	margin-bottom: 0;
}

.pagina-equipo .pagina > .wp-block-columns + .wp-block-columns {
	margin-top: 20px;
}

.pagina-equipo .pagina .wp-block-columns > .wp-block-column:has(img) {
	flex: 0 0 196px !important;
	max-width: 196px;
	margin: 0;
	border: 1px solid #e6e9ef;
	border-radius: var(--radio-l);
	padding: 12px 12px 18px;
	background: var(--blanco);
	box-shadow: 0 1px 2px rgba(15, 20, 40, 0.04);
	text-align: center;
	transition: box-shadow var(--transicion), transform var(--transicion);
}

.pagina-equipo .pagina .wp-block-column:has(img):hover {
	box-shadow: 0 14px 30px -16px rgba(37, 43, 66, 0.3);
	transform: translateY(-3px);
}

.pagina-equipo .wp-block-column:has(img) :is(.ficha, figure) {
	margin: 0;
}

.pagina-equipo .wp-block-column:has(img) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 12px;
	object-fit: cover;
}

.pagina-equipo .pagina .wp-block-column:has(img) h3 {
	margin: 14px 0 4px;
	color: var(--noche);
	font: 600 15px/1.35 Roboto, sans-serif;
	letter-spacing: 0;
	text-transform: none;
}

.pagina-equipo .pagina .wp-block-column:has(img) p {
	margin: 0;
	color: var(--texto-suave);
	font: 400 13px/1.45 Roboto, sans-serif;
}

/* Junta: en las cuatro de arriba el cargo va encima, pequeño y en azul, y el nombre debajo, como texto principal;
   en los expresidentes (solo nombre), el nombre como texto principal */
.pagina-equipo .pagina .wp-block-column:has(img) .ficha h3 {
	color: var(--azul-hondo);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pagina-equipo .pagina :is(.ficha, .wp-block-column:has(img):not(:has(h3))) p {
	margin-top: 4px;
	color: var(--noche);
	font: 600 15px/1.35 Roboto, sans-serif;
}

.pagina-equipo .pagina .wp-block-column:has(img):not(:has(h3)) p {
	margin-top: 14px;
}

@media (max-width: 767px) {
	.pagina-equipo .pagina .wp-block-columns:has(> .wp-block-column img) {
		gap: 12px;
	}

	.pagina-equipo .pagina .wp-block-columns > .wp-block-column:has(img) {
		flex-basis: calc(50% - 6px) !important;
		max-width: calc(50% - 6px);
	}

	.pagina-equipo .pagina .banda + .banda {
		margin-top: 12px;
	}

	.pagina-equipo .pagina :is(h1, h2).titulo-seccion,
	.pagina-equipo .pagina > :is(.banda, .portadilla) + :is(h1, h2).titulo-seccion {
		margin-top: 48px;
		margin-bottom: 20px;
	}

	.pagina-equipo .ficha {
		margin-bottom: 0;
	}
}

/* ======================================================================
   6. ÁREA PRIVADA DE SOCIOS: barra superior, menú lateral y contenido
   ====================================================================== */

.zona-privada {
	background: var(--fondo);
}

.ap-barra {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 96px;
	border-bottom: 1px solid #e6e8ee;
	padding: 12px clamp(16px, 2.5vw, 36px);
	background: var(--blanco);
	color: var(--noche);
	font: 400 15px/22px Roboto, sans-serif;
}

.ap-barra__logo img {
	display: block;
	width: auto;
	height: 70px;
}

.ap-barra__enlaces {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-left: auto;
}

.ap-barra__enlaces a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ap-barra a:hover {
	color: var(--azul-hondo);
}

.ap-barra__mas {
	position: relative;
}

.ap-barra__mas summary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	list-style: none;
	cursor: pointer;
}

.ap-barra__mas summary::-webkit-details-marker {
	display: none;
}

.ap-barra__mas ul {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 30;
	min-width: 200px;
	border-radius: 12px;
	padding: 8px;
	background: var(--blanco);
	box-shadow: 0 16px 40px -12px rgba(15, 20, 40, 0.35);
	color: var(--noche);
}

.ap-barra__mas li a {
	border-radius: 8px;
	padding: 10px 14px;
}

.ap-cuerpo {
	display: flex;
	min-height: calc(100vh - 96px);
}

.ap-lateral {
	flex: 0 0 220px;
	border-right: 1px solid #e6e8ee;
	padding: 20px 14px;
	background: var(--blanco);
	color: var(--noche);
	font: 400 15px/22px Roboto, sans-serif;
}

.ap-lateral .icono {
	flex: 0 0 auto;
	font-size: 19px;
}

.ap-barra .icono {
	font-size: 18px;
}

/* El contenido del menú lateral se queda a la vista al bajar por la página */
.ap-lateral__fijo {
	position: sticky;
	top: 20px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

.ap-lateral li a {
	display: flex;
	align-items: center;
	gap: 12px;
	border-radius: 8px;
	padding: 11px 12px;
	transition: background-color 0.2s, color 0.2s;
}

.ap-lateral li + li {
	margin-top: 6px;
}

/* Al pasar por encima, gris muy clarito (el azul queda solo para la sección activa) */
.ap-lateral li a:not([aria-current]):hover {
	background: #f3f4f7;
	color: var(--noche);
}

/* Sección activa: fondo azul muy claro, texto en un azul casi igual al de la marca (un punto más intenso,
   contraste 3,0 frente a 2,2) e icono relleno con el azul de la marca */
.ap-lateral li a[aria-current="page"] {
	background: #f0f9ff;
	color: #0b9ae0;
	font-weight: 500;
}

.ap-lateral a[aria-current="page"] .ap-lateral__icono-activo {
	color: var(--azul);
}

.ap-lateral__icono-activo,
.ap-lateral a[aria-current="page"] .ap-lateral__icono {
	display: none;
}

.ap-lateral a[aria-current="page"] .ap-lateral__icono-activo {
	display: inline-block;
}

.ap-contenido {
	--pagina-margen: clamp(16px, 2.5vw, 36px);

	flex: 1;
	min-width: 0;
	padding-top: 32px;
}

.ap-barra-inferior {
	display: none;
}

@media (max-width: 1024px) {
	.ap-lateral {
		display: none;
	}

	.ap-barra {
		min-height: 72px;
	}

	.ap-barra__logo img {
		height: 52px;
	}

	.ap-barra__enlaces {
		gap: 14px;
		font-size: 13px;
	}

	/* Barra de accesos fija abajo, como una app (Jandro, 17-10-2026: «ya no se comporta como una app con el menú
	   fijo abajo»): con Elementor iba fija; al pasar al tema se quedó al final de la página */
	.ap-barra-inferior {
		display: block;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 50;
		border-top: 1px solid #e6e8ee;
		padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 -6px 20px -12px rgba(15, 20, 40, 0.25);
		backdrop-filter: saturate(1.4) blur(10px);
	}

	.ap-barra-inferior {
		display: flex;
		justify-content: space-around;
	}

	.ap-barra-inferior a {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		max-width: 140px;
		border-radius: 12px;
		padding: 6px 4px;
		color: var(--texto-suave);
		font: 500 12px/1.2 Roboto, sans-serif;
		text-decoration: none;
	}

	.ap-barra-inferior a .icono {
		width: 24px;
		height: 24px;
	}

	.ap-barra-inferior a[aria-current="page"] {
		color: var(--azul);
	}

	/* Que la barra no tape el final de la página */
	body.zona-privada {
		padding-bottom: calc(72px + env(safe-area-inset-bottom));
	}

	/* El sello de reCAPTCHA, por encima de la barra (si no, tapa «Perfil») */
	body.zona-privada .grecaptcha-badge {
		bottom: calc(86px + env(safe-area-inset-bottom)) !important;
	}
}

/* Paginación de los listados (blog, [serv_listado]): «Anterior» y «Siguiente» como botones con flecha a los
   lados y los números en el centro; la página actual, rellena */
.paginacion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 48px;
}

.pagina .paginacion .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 0 8px;
	color: var(--noche);
	font: 500 15px/1 Roboto, sans-serif;
	text-decoration: none;
	transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}

.pagina .paginacion a.page-numbers:hover {
	border-color: #d6dae3;
	background: var(--blanco);
	color: var(--noche);
}

.pagina .paginacion .page-numbers.current {
	background: var(--noche);
	color: var(--blanco);
}

.pagina .paginacion .page-numbers.dots {
	min-width: 24px;
	color: var(--texto-suave);
}

.pagina .paginacion :is(.prev, .next) {
	display: inline-flex;
	gap: 8px;
	border-color: #e3e6eb;
	padding: 0 16px;
	background: var(--blanco);
}

.pagina .paginacion .prev {
	margin-right: auto;
}

.pagina .paginacion .next {
	margin-left: auto;
}

.paginacion :is(.prev, .next) .icono {
	width: 16px;
	height: 16px;
}

.pagina .paginacion a:is(.prev, .next):hover {
	border-color: var(--azul);
	color: var(--azul-hondo);
}

/* En el móvil, más pequeña y las flechas sin texto: cabe en una línea */
@media (max-width: 600px) {
	.paginacion {
		flex-wrap: nowrap;
		gap: 2px;
	}

	.pagina .paginacion .page-numbers {
		min-width: 34px;
		height: 38px;
		padding: 0 4px;
		font-size: 14px;
	}

	.pagina .paginacion .page-numbers.dots {
		min-width: 16px;
	}

	.pagina .paginacion :is(.prev, .next) {
		padding: 0;
		min-width: 38px;
	}

	.paginacion :is(.prev, .next) span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.pagina .paginacion .prev,
	.pagina .paginacion .next {
		margin: 0;
	}
}

/* Pantallas del panel de WordPress mostradas en la web (plugin «Display admin page on frontend»):
   su marco pide el 100 % de ancho y, con el margen de la página, se salía por la derecha */
.pagina .vgca-iframe-wrapper {
	width: auto;
	min-width: 0;
}

/* Formularios del alta y la renovación de socios (código del área privada con rejilla de Bootstrap):
   sus filas llevan margen negativo a los lados y, sin un contenedor que lo compense, se salían.
   La fila exterior respeta los márgenes de la página; las de dentro, ninguno. */
.pagina > .row {
	margin-right: var(--pagina-margen);
	margin-left: var(--pagina-margen);
}

.pagina .row .row {
	margin-right: 0;
	margin-left: 0;
}

.pagina select {
	max-width: 100%;
}

/* ----------------------------------------------------------------------
   Formularios de socios en las páginas: alta y renovación (.formregistro), acceso (#wpmem_login,
   #wpmem_reg) y formularios con id «formserv». Mismo aspecto que tenían con el tema anterior,
   cuyo «CSS adicional» los definía; aquí, una sola vez y sin !important.
   ---------------------------------------------------------------------- */

:is(.formregistro, #formserv, #wpmem_login, #wpmem_reg) label {
	color: var(--noche);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.14em;
}

:is(.formregistro, #formserv, #wpmem_login, #wpmem_reg) :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="file"]), select, textarea) {
	width: 95%;
	max-width: 100%;
	height: 48px;
	margin-bottom: 1.5em;
	border: 1.5px solid #cfd4d8;
	border-radius: 6px;
	padding: 0 14px;
	background: #fafafa;
	color: var(--noche);
	font: 400 15px/1.4 Roboto, sans-serif;
	transition: border-color 0.2s, box-shadow 0.2s;
}

/* Desplegables: sin la flecha del navegador; una flecha propia (caret-down de Phosphor) con aire a la derecha */
:is(.formregistro, #formserv, #wpmem_login, #wpmem_reg) select,
.pagina :is(#formreg, #formren) select {
	padding-right: 36px;
	background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%235b6172'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") right 12px center / 14px no-repeat;
	appearance: none;
	cursor: pointer;
}

:is(.formregistro, #formserv, #wpmem_login, #wpmem_reg) textarea {
	height: 100px;
	padding: 12px 14px;
}

:is(.formregistro, #formserv, #wpmem_login, #wpmem_reg) :is(input, select, textarea):hover {
	border-color: #a5aaae;
}

:is(.formregistro, #formserv, #wpmem_login, #wpmem_reg) :is(input, select, textarea):focus {
	border-color: var(--azul);
	outline: none;
	box-shadow: 0 0 0 1px var(--azul), 0 0 10px 1px rgba(23, 175, 249, 0.1);
}

:is(.formregistro, #formserv, #wpmem_login, #wpmem_reg) input[type="file"] {
	margin: 0.5em 0 0;
	border: 0;
	background: none;
}

:is(.formregistro, #formserv, #wpmem_login, #wpmem_reg) input[type="submit"] {
	width: 100%;
	border: 0;
	border-radius: 30px;
	padding: 16px;
	background: #22273e;
	color: var(--blanco);
	font: 500 15px/1 Roboto, sans-serif;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s;
}

:is(.formregistro, #formserv, #wpmem_login, #wpmem_reg) input[type="submit"]:hover {
	background: var(--acento);
}

/* Sobre una banda oscura (página de acceso de socios), los textos del formulario en claro */
.banda--noche :is(#wpmem_login, #wpmem_reg) :is(legend, label, .link-text, a) {
	color: var(--blanco);
}

#wpmem_login .link-text {
	padding: 4px 0;
	font-size: 12px;
	text-align: center;
}

#wpmem_login .link-text a {
	text-decoration: underline;
}

/* Acceso dentro de una página de socios (el aviso de contenido restringido y el formulario, inc/acceso.php):
   una tarjeta blanca, como el resto de la web. La página de acceso (formulario sobre banda oscura) no cambia. */
#wpmem_restricted_msg,
#wpmem_restricted_msg + #wpmem_login {
	border: 1px solid var(--borde);
	background: var(--blanco);
}

/* Las dos partes, una sola tarjeta: sin el hueco entre bloques de la página ni el 75 % de ancho que pone la hoja
   de WP-Members («.pagina >» para pasar por encima de las reglas generales de la página y del área privada) */
.pagina > #wpmem_restricted_msg,
.pagina > #wpmem_restricted_msg + #wpmem_login {
	width: auto;
	max-width: 460px;
	margin-inline: auto;
}

.pagina > #wpmem_restricted_msg {
	margin-bottom: 0;
}

/* Arriba de la página, el mismo aire que las demás (sin sumar sus 24px) */
.pagina > #wpmem_restricted_msg:first-child {
	margin-top: 0;
}

.pagina > #wpmem_restricted_msg + #wpmem_login {
	margin-top: 0;
}

#wpmem_restricted_msg {
	margin-top: 24px;
	border-bottom: 0;
	border-radius: var(--radio-l) var(--radio-l) 0 0;
	padding: 32px 32px 4px;
	text-align: center;
}

#wpmem_restricted_msg::before {
	content: "";
	display: block;
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: rgba(19, 175, 249, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2313aff9'%3E%3Cpath d='M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Z'/%3E%3C/svg%3E") center / 24px no-repeat;
}

#wpmem_restricted_msg p {
	margin: 0 0 6px;
	color: var(--texto-suave);
	font-size: 15px;
	line-height: 1.5;
}

#wpmem_restricted_msg .acceso__titulo {
	color: var(--noche);
	font-size: 22px;
	font-weight: 600;
}

#wpmem_restricted_msg + #wpmem_login {
	margin-bottom: 40px;
	border-top: 0;
	border-radius: 0 0 var(--radio-l) var(--radio-l);
	padding: 20px 32px 28px;
	box-shadow: var(--sombra-s);
}

:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) fieldset {
	margin: 0;
	border: 0;
	padding: 0;
}

/* El título «Iniciar sesión» sobra: lo dice el aviso de arriba */
#wpmem_restricted_msg + #wpmem_login legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	letter-spacing: 0;
}

/* Campos como los del resto de formularios del área privada (area-privada.css): borde fino, esquinas de la web
   y un halo azul claro al escribir; aquí también en las páginas públicas, para que sea el mismo en toda la web */
:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) input:is([type="text"], [type="password"]) {
	width: 100%;
	min-height: 48px;
	height: auto;
	margin-bottom: 18px;
	border: 1px solid #d6dae3;
	border-radius: var(--radio-s);
	padding: 12px 14px;
	background: var(--blanco);
	color: var(--noche);
	font: 400 15px/22px Roboto, sans-serif;
	box-shadow: 0 1px 2px rgba(37, 43, 66, 0.04);
	transition: border-color var(--transicion), box-shadow var(--transicion);
}

/* La contraseña, más cerca de la casilla que viene debajo */
:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) #pwd {
	margin-bottom: 4px;
}

:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) input:is([type="text"], [type="password"]):hover {
	border-color: #b9c0cd;
}

:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) input:is([type="text"], [type="password"]):focus {
	border-color: var(--azul);
	outline: none;
	box-shadow: 0 0 0 3px rgba(19, 175, 249, 0.18);
}

/* «Mantener la sesión iniciada» a la izquierda y «Entrar» debajo, a todo el ancho */
/* (el código mete espacios duros entre la casilla, su texto y el botón: con font-size 0 no ocupan) */
:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) .button_div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 0;
}

:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) .button_div label {
	display: inline;
	margin: 0 0 0 10px;
	color: var(--texto-suave);
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

/* Casilla propia: cuadrado de esquinas suaves y, marcada, azul con el tick blanco (check-bold de Phosphor) */
:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) #rememberme {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1.5px solid #b9c0cd;
	border-radius: 6px;
	background: var(--blanco) center / 13px no-repeat;
	appearance: none;
	cursor: pointer;
	transition: background-color var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}

:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) #rememberme:hover {
	border-color: var(--azul);
}

:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) #rememberme:checked {
	border-color: var(--azul);
	background-color: var(--azul);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23fff'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
}

:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) #rememberme:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(19, 175, 249, 0.18);
}

:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) input[type="submit"] {
	flex-basis: 100%;
	margin-top: 22px;
	border-radius: var(--radio-boton);
	padding: 14px;
	background: var(--azul);
	font-size: 16px;
	text-transform: none;
}

:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) input[type="submit"]:hover {
	background: var(--azul-hondo);
}

:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) .link-text {
	padding: 10px 0 0;
	color: var(--texto-suave);
	font-size: 14px;
}

/* Centrados en la tarjeta de las páginas de socios (su título también lo está); en la página de acceso, a la izquierda */
#wpmem_restricted_msg + #wpmem_login .link-text {
	text-align: center;
}

:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) .link-text + .link-text {
	padding-top: 4px;
}

:is(#wpmem_restricted_msg + #wpmem_login, .acceso-socios #wpmem_login) .link-text a {
	color: var(--azul-hondo);
	font-weight: 500;
	text-decoration: none;
}

/* Página de acceso de socios (/acceso-asociados/, herramientas/convertir/acceso-socios.php): una tarjeta partida,
   a la izquierda un panel en degradado azul con lo que hay en el área de socios y a la derecha el formulario,
   con los mismos campos que la tarjeta de acceso de las páginas de socios. En el móvil, uno encima del otro.
   (Los grupos llevan dentro el «inner-container» de WordPress: la rejilla va en él.) */
/* Menos aire con la barra de arriba y con los logos de abajo que en las demás páginas: 80px en escritorio y, en
   proporción al ancho, hasta 32px en el móvil (unos 60px en una tableta de 1024px) */
.pagina:has(> .acceso-socios) {
	padding-block: clamp(32px, 6vw, 80px);
}

.pagina > .acceso-socios {
	max-width: 1240px;
	margin: 0 auto;
	border: 1px solid var(--borde);
	border-radius: 32px;
	padding: 10px;
	background: var(--blanco);
	box-shadow: 0 24px 60px -24px rgba(37, 43, 66, 0.22);
}

.acceso-socios > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 10px;
}

.acceso-socios__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 48px;
	min-height: 680px;
	overflow: hidden;
	border-radius: 24px;
	padding: 52px;
	/* Azules saturados, un brillo cian fuerte abajo y apenas neblina blanca (la que apagaba el color) */
	background:
		radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.22), transparent 38%),
		radial-gradient(circle at 68% 74%, #5ee3ff, transparent 46%),
		radial-gradient(circle at 100% 100%, #1a3fd1, transparent 52%),
		radial-gradient(circle at 0% 0%, #0a4fe0, transparent 50%),
		linear-gradient(155deg, #0d6cf2 0%, #0e94f7 42%, var(--azul) 70%, #2a86ef 100%);
	color: var(--blanco);
	isolation: isolate;
}

.acceso-socios__logo {
	width: 56px;
	height: auto;
	filter: brightness(0) invert(1);
}

.acceso-socios__mensaje {
	margin-top: auto;
}

.acceso-socios__etiqueta {
	display: inline-block;
	margin: 0 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radio-boton);
	padding: 5px 12px;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(8px);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}

.pagina .acceso-socios__titulo {
	margin: 0 0 12px;
	color: var(--blanco);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* La mano saluda al cargar la página (en el acceso y en el «Hola» del inicio del área privada) */
.acceso-socios__saludo,
.saludo-mano {
	display: inline-block;
	font-size: 0.75em;
	vertical-align: 0.06em;
	transform-origin: 70% 80%;
	animation: acceso-saluda 1.6s ease-in-out 0.6s;
}

@keyframes acceso-saluda {
	0%, 60%, 100% {
		transform: rotate(0);
	}

	10%, 30% {
		transform: rotate(16deg);
	}

	20%, 40% {
		transform: rotate(-8deg);
	}

	50% {
		transform: rotate(10deg);
	}
}

.acceso-socios__entradilla {
	max-width: 30em;
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 17px;
	line-height: 1.5;
}

.pagina .acceso-socios__tarjetas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.acceso-socios__tarjetas li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	min-height: 150px;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 18px;
	padding: 18px;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(10px);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	overflow-wrap: normal;
	word-break: normal;
	/* Entran de abajo una tras otra y, después, la tarjeta en blanco va pasando de una a otra (cada 3 s) */
	animation: acceso-entra 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, acceso-activa 9s ease-in-out 0.9s infinite;
	transition: transform 0.3s, box-shadow 0.3s;
}

.acceso-socios__tarjetas li:nth-child(2) {
	animation-delay: 0.12s, -5.1s;
}

.acceso-socios__tarjetas li:nth-child(3) {
	animation-delay: 0.24s, -2.1s;
}

.acceso-socios__tarjetas li:hover {
	box-shadow: 0 14px 30px -12px rgba(10, 30, 80, 0.45);
	transform: translateY(-4px);
}

.acceso-socios__tarjetas .icono {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	padding: 7px;
	background: rgba(255, 255, 255, 0.2);
	color: var(--blanco);
	animation: acceso-activa-icono 9s ease-in-out 0.9s infinite;
}

.acceso-socios__tarjetas li:nth-child(2) .icono {
	animation-delay: -5.1s;
}

.acceso-socios__tarjetas li:nth-child(3) .icono {
	animation-delay: -2.1s;
}

@keyframes acceso-entra {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
}

@keyframes acceso-activa {
	0%, 28%, 100% {
		border-color: var(--blanco);
		background-color: var(--blanco);
		color: var(--noche);
	}

	36%, 92% {
		border-color: rgba(255, 255, 255, 0.24);
		background-color: rgba(255, 255, 255, 0.14);
		color: var(--blanco);
	}
}

/* Al activarse su tarjeta, el icono late: crece un poco y suelta un aro azul que se desvanece */
@keyframes acceso-activa-icono {
	0% {
		background-color: var(--azul);
		box-shadow: 0 0 0 0 rgba(19, 175, 249, 0.55);
		transform: scale(1);
	}

	5% {
		transform: scale(1.18);
	}

	12% {
		transform: scale(1);
	}

	16% {
		box-shadow: 0 0 0 14px rgba(19, 175, 249, 0);
	}

	28%, 100% {
		background-color: var(--azul);
	}

	36%, 92% {
		background-color: rgba(255, 255, 255, 0.2);
	}
}

/* Sin movimiento si así lo pide el sistema: la primera, en blanco y quieta */
@media (prefers-reduced-motion: reduce) {
	.acceso-socios__tarjetas li,
	.acceso-socios__tarjetas .icono,
	.acceso-socios__saludo,
	.saludo-mano {
		animation: none;
	}

	.acceso-socios__tarjetas li:first-child {
		border-color: var(--blanco);
		background-color: var(--blanco);
		color: var(--noche);
	}

	.acceso-socios__tarjetas li:first-child .icono {
		background-color: var(--azul);
	}
}

/* El formulario, centrado en su mitad; el título «Iniciar sesión» de WP-Members, alineado a la izquierda con los campos */
.acceso-socios__formulario {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 56px clamp(24px, 5vw, 80px);
}

.acceso-socios__formulario p:not(:has(*)) {
	display: none;
}

.acceso-socios__formulario p:has(> #wpmem_login) {
	margin: 0;
}

.acceso-socios #wpmem_login {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.acceso-socios #wpmem_login fieldset {
	margin: 0;
	border: 0;
	padding: 0;
}

.acceso-socios #wpmem_login legend {
	width: 100%;
	margin-bottom: 28px;
	padding: 0;
	color: var(--noche);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-align: left;
	text-transform: none;
}

/* Recuperar la contraseña (/contrasena/): «Volver a iniciar sesión» debajo, con flecha, y los avisos de WP-Members
   (enlace enviado, contraseña guardada, errores) en una caja suave encima del formulario, al ancho de los campos */
.acceso-socios__formulario :is(.acceso-socios__volver, .wpmem_msg) {
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
}

.pagina .acceso-socios__volver {
	margin-top: 24px;
	margin-bottom: 0;
	border-top: 1px solid var(--borde);
	padding-top: 20px;
	font-size: 14px;
}

.acceso-socios__volver a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--noche);
	font-weight: 500;
	text-decoration: none;
}

.acceso-socios__volver a::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z'/%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 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--transicion);
}

.acceso-socios__volver a:hover {
	color: var(--azul-hondo);
}

.acceso-socios__volver a:hover::before {
	transform: translateX(-3px);
}

.acceso-socios__formulario .wpmem_msg {
	margin-bottom: 24px;
	border: 1px solid rgba(19, 175, 249, 0.3);
	border-radius: var(--radio-s);
	padding: 14px 16px;
	background: rgba(19, 175, 249, 0.08);
	color: var(--noche);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

.acceso-socios__formulario .wpmem_msg a {
	color: var(--azul-hondo);
	font-weight: 500;
}

/* Sin la casilla «Mantener la sesión iniciada» (recuperar contraseña o usuario, contraseña nueva), el botón va más
   cerca del último campo: fuera los márgenes de debajo del campo (el suyo y el de su envoltorio de WP-Members) y
   un solo hueco de 20px antes del botón */
.acceso-socios #wpmem_login fieldset:not(:has(#rememberme)) :is(.div_text, .div_password):not(:has(~ :is(.div_text, .div_password))),
.acceso-socios #wpmem_login fieldset:not(:has(#rememberme)) :is(.div_text, .div_password):not(:has(~ :is(.div_text, .div_password))) input {
	margin-bottom: 0;
}

.acceso-socios #wpmem_login .button_div:not(:has(#rememberme)) {
	padding: 0;
}

.acceso-socios #wpmem_login .button_div:not(:has(#rememberme)) input[type="submit"] {
	margin-top: 20px;
}

/* Errores (contraseña o usuario que no existe, contraseñas que no coinciden, enlace caducado, acceso fallido): el
   aviso en rojo con su icono; los campos no cambian (la clase la pone inc/acceso.php) */
.acceso-socios__formulario .wpmem_msg--error {
	position: relative;
	padding-left: 46px;
	border-color: #fecdca;
	background: #fef3f2;
	color: #b42318;
}

.acceso-socios__formulario .wpmem_msg--error::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 16px;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%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 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.acceso-socios__formulario .wpmem_msg--error a {
	color: #b42318;
	text-decoration: underline;
}

/* Los enlaces de debajo, también a la izquierda, como el título y los campos */
.acceso-socios #wpmem_login .link-text {
	text-align: left;
}

@media (max-width: 860px) {
	.pagina > .acceso-socios {
		margin-inline: 16px;
		border-radius: 24px;
	}

	.acceso-socios > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
	}

	.acceso-socios__panel {
		gap: 28px;
		min-height: 0;
		border-radius: 18px;
		padding: 28px 24px;
	}

	/* En el móvil, sin las tres tarjetas: el panel queda en logo, etiqueta, título y frase */
	.pagina .acceso-socios__tarjetas {
		display: none;
	}

	.acceso-socios__formulario {
		padding: 28px 16px 24px;
	}

	.acceso-socios #wpmem_login legend {
		margin-bottom: 20px;
		font-size: 24px;
	}
}

@media (max-width: 520px) {
	.pagina .acceso-socios__tarjetas {
		gap: 8px;
	}

	.acceso-socios__tarjetas li {
		gap: 16px;
		min-height: 0;
		padding: 12px 9px;
		font-size: 12px;
		hyphens: auto;
	}

	.acceso-socios__panel {
		padding-inline: 18px;
	}
}

/* Datos autocompletados por el navegador: Chrome y Safari pintan el campo de azul claro (con una regla suya que no se
   puede pisar) y Firefox lo tiñe con un filtro. Se retrasa ese cambio de color para siempre y se quita el filtro: el
   campo se queda como si se hubiera escrito a mano (Jandro, 16-10-2026). Para todos los campos de la web; se
   conservan las transiciones del borde y del halo de los formularios. */
:is(input, textarea, select):is(:-webkit-autofill, :autofill),
:is(input, textarea, select):is(:-webkit-autofill, :autofill):is(:hover, :focus) {
	filter: none;
	transition: border-color var(--transicion), box-shadow var(--transicion), background-color 600000s 0s, color 600000s 0s !important;
}

/* El código del área privada carga Bootstrap desde internet en algunas páginas; su «reboot» subraya
   todos los enlaces. En la cabecera y el pie no debe notarse. */
:is(.cabecera, .pie, .pie-fundacion) a {
	text-decoration: none;
}

/* Vídeos y otros marcos pegados en el texto con un ancho fijo (640 px, 1140 px...): nunca más anchos
   que la página; los de YouTube y Vimeo, además, conservan su proporción */
.pagina iframe {
	max-width: 100%;
}

.pagina iframe:is([src*="youtube"], [src*="vimeo"]) {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Avisos emergentes ocultos de LearnDash y menú «Añadir al calendario» de Events Manager:
   se colocan fuera de la pantalla mientras no se usan y ensanchaban la página en el móvil */
.pagina :is(.learndash-wrapper, .em) {
	overflow-x: clip;
}

/* ----------------------------------------------------------------------
   Barra superior del área privada: «Área de socios» junto al logo, enlace a la web pública
   y menú de la cuenta (foto o inicial, nombre, Mi perfil y Cerrar sesión)
   ---------------------------------------------------------------------- */

.ap-barra__zona {
	border-radius: var(--radio-boton);
	padding: 4px 12px;
	background: rgba(19, 175, 249, 0.12);
	color: #0b7fb8;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ap-barra__web .ap-barra__fuera {
	font-size: 14px;
	opacity: 0.6;
}

.ap-barra__cuenta summary {
	gap: 10px;
	width: auto;
	height: 48px;
	border: 1px solid #e6e8ee;
	border-radius: var(--radio-boton);
	padding: 0 12px 0 6px;
	transition: background-color var(--transicion);
}

.ap-barra__cuenta summary:hover,
.ap-barra__cuenta[open] summary {
	background: #f3f4f7;
}

.ap-barra__cuenta summary img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top;
	background: #eceff4;
}

.ap-barra__cuenta summary .icono {
	font-size: 14px;
	opacity: 0.8;
}

.ap-barra__mas li a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ap-barra__mas li a:hover {
	background: #f3f4f7;
	color: var(--noche);
}

/* Contacto de secretaría, al pie del menú lateral */
.ap-lateral__contacto {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 24px 12px 8px;
	border-top: 1px solid #e6e8ee;
	padding-top: 16px;
	font-size: 13px;
}

.ap-lateral__contacto p {
	margin: 0 0 2px;
	color: var(--texto-suave);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ap-lateral__contacto a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--noche);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ap-lateral__contacto a:hover {
	color: var(--azul-hondo);
}

.ap-lateral__contacto .icono {
	flex: 0 0 auto;
	color: var(--texto-suave);
	font-size: 16px;
}

@media (max-width: 1024px) {
	.ap-barra__nombre {
		display: none;
	}
}

@media (max-width: 600px) {
	.ap-barra {
		gap: 12px;
	}

	.ap-barra__zona {
		padding: 3px 8px;
		font-size: 11px;
	}

	.ap-barra__web span,
	.ap-barra__web .ap-barra__fuera {
		display: none;
	}
}

/* Con la sesión iniciada, en la web pública: botón flotante para volver al área de socios */
.volver-area {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: var(--radio-boton);
	padding: 8px 18px 8px 8px;
	background: var(--noche);
	color: var(--blanco);
	font: 500 15px/1.2 Roboto, sans-serif;
	text-decoration: none;
	box-shadow: 0 12px 32px -8px rgba(15, 20, 40, 0.45);
	transition: background-color var(--transicion), transform var(--transicion);
}

.volver-area:hover {
	background: #343b58;
	color: var(--blanco);
	transform: translateY(-2px);
}

.volver-area img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top;
	background: #eceff4;
}

.volver-area small {
	display: block;
	color: rgba(255, 255, 255, 0.65);
	font-size: 12px;
	font-weight: 400;
}

@media (max-width: 600px) {
	.volver-area {
		right: 12px;
		bottom: 12px;
		font-size: 14px;
	}

	.volver-area small {
		display: none;
	}
}

/* Icono de «Web de la SERV» y borde del menú de la cuenta, sobre la barra blanca */
.ap-barra__web .icono {
	color: var(--texto-suave);
}

.ap-barra__mas ul {
	border: 1px solid #e6e8ee;
}

/* Galerías de congresos: la lista de congresos, arriba del todo y en una fila que se desliza (Jandro, 17-10-2026: «los
   congresos como un menú deslizable horizontalmente arriba del todo»). Antes, panel a la derecha en el escritorio y,
   en el móvil, al final de la página, después de todas las fotos. El congreso actual, relleno en azul noche (lo
   marca serv.js por el título de la galería); los apartados del congreso siguen debajo del título, en azul. */
body:not(.zona-fundacion) .pagina .wp-block-columns:has(> .wp-block-column > .galeria, > .wp-block-column .galeria):has(> .wp-block-column > .menu-en-pagina) {
	flex-direction: column;
	gap: 0;
}

body:not(.zona-fundacion) .pagina .wp-block-columns:has(.galeria) > .wp-block-column {
	flex-basis: auto !important;
	width: 100%;
}

/* …salvo las páginas de un documento escaneado ([photo-book-gallery]): sus columnas de siempre, texto y menú lateral */
body:not(.zona-fundacion) .pagina .wp-block-columns:has(.galeria--paginas) > .wp-block-column {
	flex: 1 1 0 !important;
	width: auto;
	min-width: 0;
}

body:not(.zona-fundacion) .pagina .wp-block-columns:has(.galeria--paginas) > .wp-block-column:not(:has(.galeria--paginas)) {
	flex: 0 0 calc(25% - 24px) !important;
}

body:not(.zona-fundacion) .pagina .wp-block-columns:has(.galeria) > .wp-block-column:has(> .menu-en-pagina) {
	position: static;
	order: -1;
	margin: 0 0 28px;
}

body:not(.zona-fundacion) .pagina .wp-block-columns:has(.galeria) > .wp-block-column > .menu-en-pagina {
	border: 0;
	padding: 0;
	background: none;
}

body:not(.zona-fundacion) .pagina .wp-block-columns:has(.galeria) > .wp-block-column > .menu-en-pagina .menu-en-pagina__titulo {
	margin: 0 0 10px;
	padding: 0;
	font-size: 11px;
}

body:not(.zona-fundacion) .pagina .wp-block-columns:has(.galeria) > .wp-block-column > .menu-en-pagina ul {
	display: flex;
	gap: 8px;
	margin: 0 calc(var(--pagina-margen, 24px) * -1);
	overflow-x: auto;
	padding: 2px var(--pagina-margen, 24px) 8px;
	list-style: none;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--pagina-margen, 24px);
	scrollbar-width: none;
	/* Se difumina en los bordes: se nota que hay más a los lados */
	mask-image: linear-gradient(90deg, transparent, #000 var(--pagina-margen, 24px), #000 calc(100% - var(--pagina-margen, 24px)), transparent);
}

body:not(.zona-fundacion) .pagina .wp-block-columns:has(.galeria) > .wp-block-column > .menu-en-pagina ul::-webkit-scrollbar {
	display: none;
}

body:not(.zona-fundacion) .pagina .wp-block-columns:has(.galeria) > .wp-block-column > .menu-en-pagina li {
	flex: none;
	margin: 0;
	scroll-snap-align: start;
}

body:not(.zona-fundacion) .pagina .wp-block-columns:has(.galeria) > .wp-block-column > .menu-en-pagina a {
	display: block;
	border: 1px solid #e3e6eb;
	border-radius: var(--radio-boton);
	padding: 10px 16px;
	background: var(--blanco);
	color: var(--noche);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

body:not(.zona-fundacion) .pagina .wp-block-columns:has(.galeria) > .wp-block-column > .menu-en-pagina a:hover {
	border-color: var(--noche);
	background: var(--blanco);
}

body:not(.zona-fundacion) .pagina .wp-block-columns:has(.galeria) > .wp-block-column > .menu-en-pagina :is(.current-menu-item, .current-menu-ancestor) > a {
	background: var(--blanco);
	color: var(--noche);
	font-weight: 500;
}

body:not(.zona-fundacion) .pagina .wp-block-columns:has(.galeria) > .wp-block-column > .menu-en-pagina li.es-congreso-actual > a {
	border-color: var(--noche);
	background: var(--noche);
	color: var(--blanco);
}

/* Botones de los congresos de la página pública, del mismo tamaño que en el área privada: 48px de alto en el móvil;
   en el escritorio, como estaban (Jandro, 18-10-2026) */
@media (max-width: 767px) {
	.pagina .congreso-tarjeta .botones-congreso {
		gap: 8px;
	}

	.pagina .congreso-tarjeta .botones-congreso .wp-block-button__link {
		gap: 8px;
		min-height: 48px;
		padding: 10px 14px;
		font-size: 15px;
	}

	.pagina .congreso-tarjeta .botones-congreso .boton-icono .wp-block-button__link::before {
		width: 18px;
		height: 18px;
	}
}

/* Charlas de una sesión (página de un vídeo): cada fila con su número en un círculo, el minuto en pequeño y el título
   debajo; la que se está viendo, resaltada. Antes, en el área privada, los números de la lista sobresalían y los
   títulos salían subrayados en azul (Jandro, 17-10-2026). */
.pagina ol.ver-video__charlas {
	margin: 0;
	border: 1px solid #e6e8ee;
	border-radius: 16px;
	padding: 0;
	background: var(--blanco);
	list-style: none;
	counter-reset: charla;
	overflow: hidden;
}

.pagina ol.ver-video__charlas > li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	border-top: 1px solid #eef0f3;
	padding: 14px 16px;
	counter-increment: charla;
}

.pagina ol.ver-video__charlas > li:first-child {
	border-top: 0;
}

.pagina ol.ver-video__charlas > li::before {
	content: counter(charla);
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #eef1f5;
	color: var(--texto-suave);
	font: 600 13px/1 Roboto, sans-serif;
	font-variant-numeric: tabular-nums;
}

.pagina ol.ver-video__charlas > li > a[href] {
	flex: 1;
	min-width: 0;
	color: var(--noche);
	text-decoration: none;
}

.pagina ol.ver-video__charlas > li > a[href]:hover .ver-video__nombre {
	color: var(--azul-hondo);
}

.pagina .ver-video__charla {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pagina .ver-video__charla .ver-video__minuto {
	min-width: 0;
	color: var(--texto-suave);
	font-size: 13px;
	font-weight: 500;
}

.pagina .ver-video__nombre {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	transition: color var(--transicion);
}

.pagina ol.ver-video__charlas > li.es-actual {
	background: rgba(19, 175, 249, 0.08);
	font-weight: 400;
}

.pagina ol.ver-video__charlas > li.es-actual::before {
	background: var(--azul);
	color: var(--blanco);
}

.pagina ol.ver-video__charlas > li.es-actual .ver-video__minuto {
	color: var(--azul-hondo);
}

.pagina ol.ver-video__charlas > li.es-actual .ver-video__nombre {
	font-weight: 600;
}

/* Acceso de socios: sin el logotipo de la SERV dentro de la tarjeta (ya está en la barra de arriba) y más compacta,
   para que en un portátil se vea entera sin desplazar la página (Jandro, 17-10-2026) */
.acceso-socios__logo {
	display: none;
}

.acceso-socios__panel {
	gap: 56px;
	min-height: 0;
	padding: 72px 56px;
}

.acceso-socios__mensaje {
	margin-top: 0;
}

/* Aire entre la barra de arriba y la tarjeta, y entre la tarjeta y los logotipos de abajo */
.pagina:has(> .acceso-socios) {
	padding-block: clamp(32px, 5vw, 72px) clamp(40px, 6vw, 96px);
}

/* Pantallas bajas (portátiles de 768 o 800px de alto): menos margen arriba y abajo */
@media (min-width: 900px) and (max-height: 900px) {
	.pagina:has(> .acceso-socios) {
		padding-block: 48px 64px;
	}

	.acceso-socios__panel {
		gap: 48px;
		padding: 60px 52px;
	}
}

/* Área privada: la barra de arriba se esconde al bajar y vuelve en cuanto se sube (Jandro, 17-10-2026). Antes se
   iba con la página y no volvía. serv.js pone «es-escondida» según el sentido del desplazamiento. */
.ap-barra {
	position: sticky;
	top: 0;
	z-index: 45;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ap-barra.es-escondida {
	transform: translateY(-100%);
}

.ap-barra.es-flotando:not(.es-escondida) {
	box-shadow: 0 8px 24px -16px rgba(15, 20, 40, 0.35);
}

.admin-bar .ap-barra {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* El menú lateral, fijo, queda por debajo de la barra cuando está a la vista */
.zona-privada:has(.ap-barra:not(.es-escondida)) .ap-lateral__fijo {
	top: 116px;
	transition: top 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ap-barra {
		transition: none;
	}
}

/* Al pasar de largo arriba o abajo (el «rebote» del navegador) asomaba el azul noche del fondo de la página. Ahora
   arriba se ve el color de la barra y abajo el del final del pie (Jandro, 18-10-2026): el fondo del documento es el del
   pie, y una capa fija en la mitad de arriba de la ventana, por debajo de todo, pone el de la barra. */
html {
	--rebote-arriba: var(--blanco);
	--rebote-abajo: var(--noche);
	background-color: var(--rebote-abajo);
}

html:has(.cabecera:not(.cabecera--clara, .cabecera--fundacion)) {
	--rebote-arriba: var(--noche);
}

html:has(.zona-fundacion) {
	--rebote-abajo: #b8140f;
}

html:has(.zona-privada) {
	--rebote-abajo: #f9f9f9;
}

body::before {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
	height: 50vh;
	background: var(--rebote-arriba);
	pointer-events: none;
}

/* Barra de arriba más baja (Jandro: «demasiado alta»): 92px en el escritorio (antes 115) y la de la Fundación 100px
   (antes 130); los logotipos, en proporción */
@media (min-width: 1200px) {
	.cabecera {
		--cabecera-alto: 92px;
	}

	.cabecera__logo img {
		height: 70px;
	}

	.cabecera.es-compacta .cabecera__logo img {
		height: 56px;
	}

	.cabecera--fundacion {
		--cabecera-alto: 100px;
	}

	.cabecera--fundacion .cabecera__logo-serv {
		height: 70px;
	}

	.cabecera--fundacion .cabecera__logo-fundacion {
		height: 30px;
	}
}

/* Web pública: la barra de arriba se esconde al bajar y vuelve al subir, como la del área privada (Jandro,
   18-10-2026). serv.js pone «es-escondida»; sube algo más que su alto por si va bajo la barra de WordPress. */
.cabecera__barra {
	transition: height 0.25s, background-color 0.25s, box-shadow 0.25s, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Al esconderse, más despacio y suave (Jandro, 18-10-2026: «más smooth»); al volver, algo más rápida */
.cabecera.es-escondida .cabecera__barra {
	box-shadow: none;
	transform: translateY(calc(-100% - 48px));
	transition: height 0.25s, background-color 0.25s, box-shadow 0.4s, transform 0.6s cubic-bezier(0.45, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.cabecera__barra {
		transition: none;
	}
}

/* Los laterales que se quedan fijos al bajar (índices, resúmenes, vídeo del artículo) suben cuando la barra se
   esconde, para no dejar su hueco vacío arriba */
body:not(.zona-fundacion) .pagina .wp-block-column:has(> .menu-en-pagina),
.beca-resumen,
.directo-acceso,
.pac-articulo__video,
.post-lateral > * {
	transition: top 0.25s ease;
}

body:has(.cabecera.es-escondida):not(.zona-fundacion) .pagina .wp-block-column:has(> .menu-en-pagina),
body:has(.cabecera.es-escondida) .beca-resumen,
body:has(.cabecera.es-escondida) .directo-acceso,
body:has(.cabecera.es-escondida) .pac-articulo__video,
body:has(.cabecera.es-escondida) .post-lateral > * {
	top: 24px;
}

/* ----------------------------------------------------------------------
   Certificación UTI, lo que ve el socio (inc/uti.php): tarjeta «Tu certificación» con los tres pasos, etiquetas de
   estado, barra de progreso, botones, y el formulario de alta (Forminator) con el estilo de los formularios de la web
   (Jandro, 18-10-2026). Está también en la página pública; el checklist, el panel y la ficha, en area-privada.css.
   ---------------------------------------------------------------------- */
:is(.ap-contenido, .pagina) .uti-formulario:has(.uti-estado-socio, .uti-alta) {
	padding: 0;
	background: none;
}

.uti-estado-socio {
	border: 1px solid var(--borde);
	border-radius: var(--radio-l);
	padding: 24px 26px;
	background: var(--blanco);
	box-shadow: var(--sombra-s);
}

.pagina .uti-estado-socio__antetitulo {
	margin: 0 0 14px;
	color: var(--texto-suave);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.uti-pasitos {
	display: flex;
	gap: 8px;
	margin: 0 0 20px !important;
	padding: 0 !important;
	list-style: none !important;
	counter-reset: none;
}

.pagina .uti-pasitos__paso {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 8px;
	margin: 0;
	border-top: 3px solid #e3e6eb;
	padding-top: 10px;
	color: var(--texto-suave);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
}

.uti-pasitos__marca {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #eef0f3;
	color: var(--texto-suave);
	font-size: 12px;
	font-weight: 700;
}

.uti-pasitos__marca .icono {
	width: 14px;
	height: 14px;
}

.pagina .uti-pasitos__paso--hecho {
	border-top-color: #1f8a5b;
	color: var(--noche);
}

.uti-pasitos__paso--hecho .uti-pasitos__marca {
	background: #1f8a5b;
	color: var(--blanco);
}

.pagina .uti-pasitos__paso--actual {
	border-top-color: var(--azul);
	color: var(--noche);
	font-weight: 600;
}

.uti-pasitos__paso--actual .uti-pasitos__marca {
	background: var(--azul);
	color: var(--blanco);
}

.pagina .uti-pasitos__paso--rechazado {
	border-top-color: #b42318;
}

.uti-pasitos__paso--rechazado .uti-pasitos__marca {
	background: #fdecea;
	color: #b42318;
}

.pagina .uti-estado-socio__titulo {
	margin: 0 0 6px;
	color: var(--noche);
	font: 600 19px/1.35 Roboto, sans-serif;
}

.pagina .uti-estado-socio__texto {
	margin: 0 0 16px;
	color: var(--texto);
	font-size: 15px;
	line-height: 1.55;
}

.pagina .uti-estado-socio__progreso {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	color: var(--texto-suave);
	font-size: 14px;
}

.uti-estado-socio--aceptada {
	border-color: #bfe3cf;
	background: linear-gradient(0deg, var(--blanco), #f4fbf7);
}

/* Barra de progreso */
.uti-barra {
	display: inline-block;
	flex: 1;
	min-width: 80px;
	max-width: 260px;
	height: 8px;
	overflow: hidden;
	border-radius: 99px;
	background: #e9edf2;
	vertical-align: middle;
}

.uti-barra > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--azul);
	transition: width 0.3s ease;
}

/* Etiquetas de estado */
.uti-estado {
	display: inline-block;
	border-radius: var(--radio-boton);
	padding: 3px 10px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.uti-estado--gris { background: #eef0f3; color: #4a5163; }
.uti-estado--amarillo { background: #fff4cc; color: #7a5a00; }
.uti-estado--azul { background: #e2f3fe; color: #075f8c; }
.uti-estado--verde { background: #e3f5ec; color: #1f6b46; }
.uti-estado--rojo { background: #fdecea; color: #b42318; }

/* Botones del proceso */
:is(.uti-estado-socio, .uti-panel, .uti-ficha, .uti-checklist) .uti-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	box-sizing: border-box;
	border: 2px solid var(--azul);
	border-radius: var(--radio-boton);
	padding: 8px 22px;
	background: var(--blanco);
	color: var(--azul-hondo);
	font: 500 15px/1.2 Roboto, sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

:is(.uti-estado-socio, .uti-panel, .uti-ficha, .uti-checklist) .uti-boton .icono {
	width: 18px;
	height: 18px;
}

:is(.uti-estado-socio, .uti-panel, .uti-ficha, .uti-checklist) .uti-boton--principal {
	background: var(--azul);
	color: var(--blanco);
}

:is(.uti-estado-socio, .uti-panel, .uti-ficha, .uti-checklist) .uti-boton--principal:hover {
	border-color: var(--azul-hondo);
	background: var(--azul-hondo);
	color: var(--blanco);
}

:is(.uti-estado-socio, .uti-panel, .uti-ficha, .uti-checklist) .uti-boton--borde {
	border-color: #d6dae3;
	color: var(--noche);
}

:is(.uti-estado-socio, .uti-panel, .uti-ficha, .uti-checklist) .uti-boton--borde:hover {
	border-color: var(--noche);
}

/* Formulario de alta (Forminator, [muestraformsolicitud]): como los formularios de la web */
.uti-alta {
	border: 1px solid var(--borde);
	border-radius: var(--radio-l);
	padding: 22px 24px 8px;
	background: var(--blanco);
	color: var(--texto);
	font-size: 15px;
	box-shadow: var(--sombra-s);
}

.uti-alta .forminator-ui.forminator-custom-form {
	margin: 14px 0 0 !important;
}

.uti-alta .forminator-ui .forminator-row {
	margin-bottom: 16px !important;
}

.uti-alta .forminator-ui .forminator-label {
	margin: 0 0 6px !important;
	color: var(--noche) !important;
	font: 500 14px/1.4 Roboto, sans-serif !important;
}

.uti-alta .forminator-ui .forminator-input {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 48px !important;
	border: 1px solid #d6dae3 !important;
	border-radius: var(--radio-s) !important;
	padding: 0 14px !important;
	background: var(--blanco) !important;
	color: var(--noche) !important;
	font: 400 15px/1.4 Roboto, sans-serif !important;
	box-shadow: 0 1px 2px rgba(37, 43, 66, 0.04) !important;
}

.uti-alta .forminator-ui .forminator-input:hover {
	border-color: #b9c0cd !important;
}

.uti-alta .forminator-ui .forminator-input:focus {
	border-color: var(--azul) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(19, 175, 249, 0.18) !important;
}

.uti-alta .forminator-ui .forminator-description {
	margin-top: 6px !important;
	color: var(--texto-suave) !important;
	font-size: 13px !important;
}

.uti-alta .forminator-ui .forminator-required {
	color: #b42318 !important;
}

.uti-alta .forminator-ui .forminator-button-submit {
	min-height: 48px !important;
	border: 0 !important;
	border-radius: var(--radio-boton) !important;
	padding: 0 28px !important;
	background: var(--azul) !important;
	color: var(--blanco) !important;
	font: 500 15px/1 Roboto, sans-serif !important;
	box-shadow: none !important;
	cursor: pointer;
}

.uti-alta .forminator-ui .forminator-button-submit:hover {
	background: var(--azul-hondo) !important;
}

.uti-alta .forminator-ui .forminator-response-message {
	border-radius: var(--radio) !important;
	font-size: 15px !important;
}

@media (max-width: 600px) {
	.uti-estado-socio {
		padding: 20px 18px;
	}

	.uti-pasitos {
		flex-direction: column;
		gap: 6px;
	}

	.pagina .uti-pasitos__paso {
		border-top: 0;
		border-left: 3px solid #e3e6eb;
		padding: 2px 0 2px 10px;
	}

	.pagina .uti-pasitos__paso--hecho { border-left-color: #1f8a5b; }
	.pagina .uti-pasitos__paso--actual { border-left-color: var(--azul); }
	.pagina .uti-pasitos__paso--rechazado { border-left-color: #b42318; }

	:is(.uti-estado-socio, .uti-checklist) .uti-boton {
		width: 100%;
	}
}

/* El botón de Forminator trae radio y tamaño con más peso: el de la web */
.uti-alta .forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit {
	min-height: 48px !important;
	border-radius: var(--radio-boton) !important;
	padding: 0 28px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
}

/* Avisos en el menú del área privada: bolita roja con el número de cosas pendientes (Gestión UTI: solicitudes por
   revisar; Jandro, 18-10-2026) */
.ap-lateral__aviso {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	margin-left: auto;
	border-radius: 99px;
	padding: 0 6px;
	background: #e5372a;
	color: #fff;
	font: 700 11.5px/1 Roboto, sans-serif;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px #fff;
}

.espacio__icono {
	position: relative;
}

.espacio__icono .ap-lateral__aviso {
	position: absolute;
	top: -6px;
	right: -8px;
	margin: 0;
}

/* El formulario de alta trae su hoja propia (style-20354.css) con !important y más peso: el botón de la web, con un
   selector un poco más fuerte que el suyo (Jandro, 18-10-2026: «mismo estilo de botones que en otros forms SERV») */
.uti-alta .forminator-ui.forminator-custom-form.forminator-design--default .forminator-button.forminator-button-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	height: auto !important;
	margin: 4px 0 0 !important;
	border: 2px solid var(--azul) !important;
	border-radius: var(--radio-boton) !important;
	padding: 10px 28px !important;
	background: var(--azul) !important;
	color: var(--blanco) !important;
	font: 500 16px/1.2 Roboto, sans-serif !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	transition: background-color var(--transicion), border-color var(--transicion) !important;
}

.uti-alta .forminator-ui.forminator-custom-form.forminator-design--default .forminator-button.forminator-button-submit:hover,
.uti-alta .forminator-ui.forminator-custom-form.forminator-design--default .forminator-button.forminator-button-submit:focus {
	border-color: var(--azul-hondo) !important;
	background: var(--azul-hondo) !important;
	color: var(--blanco) !important;
}

/* Pasos de la certificación UTI (Jandro, 18-10-2026):
   - la línea que une los números, por detrás de las tarjetas: solo se ve entre una y otra;
   - con la sesión iniciada, el paso en el que está el socio abierto y marcado («Estás aquí»), y los demás plegados:
     se abren pulsando su título (serv.js). */
.uti-pasos {
	position: relative;
	isolation: isolate;
}

.uti-paso:not(:last-child)::before {
	z-index: -1;
	top: 36px;
	bottom: -50px;
	background: rgba(19, 175, 249, 0.35);
}

.uti-paso__titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	border: 0;
	padding: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.uti-paso__titulo h3 {
	flex: 1;
}

.uti-paso__flecha {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--texto-suave);
	transition: transform var(--transicion);
}

.uti-paso--abierto .uti-paso__flecha {
	transform: rotate(180deg);
}

.uti-paso--plegado .uti-paso__cuerpo {
	display: none;
}

:is(.ap-contenido, .pagina) .uti-paso--plegado {
	padding-bottom: 14px;
}

:is(.ap-contenido, .pagina) .uti-paso--plegado h3 {
	margin-bottom: 4px;
	color: var(--texto-suave);
}

.uti-paso--plegado .uti-paso__numero {
	background: #e3e6eb;
	color: var(--texto-suave);
}

.uti-paso--hecho .uti-paso__numero {
	background: #1f8a5b;
	color: var(--blanco);
}

.uti-paso--actual {
	border-color: var(--azul) !important;
	box-shadow: 0 0 0 3px rgba(19, 175, 249, 0.12);
}

.uti-paso__aqui {
	flex: none;
	border-radius: var(--radio-boton);
	padding: 3px 10px;
	background: #e2f3fe;
	color: #075f8c;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.uti-estado-socio--arriba {
	margin: 0 0 18px;
}

/* Etiqueta «Certificación SERV» de la cabecera de la certificación UTI: más fina, con un sello delante y el azul de
   la web (en el área le ganaba el estilo de los párrafos: gris, grande y muy espaciada; Jandro, 18-10-2026) */
:is(.ap-contenido, .pagina) p.uti-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 14px;
	border: 1px solid rgba(19, 175, 249, 0.28);
	border-radius: var(--radio-boton);
	padding: 5px 12px 5px 9px;
	background: rgba(19, 175, 249, 0.08);
	color: var(--azul-hondo);
	font: 600 12.5px/1.2 Roboto, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

:is(.ap-contenido, .pagina) p.uti-etiqueta::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82ZM173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34Z'/%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 256 256'%3E%3Cpath d='M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82ZM173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* En la pública, sobre la cabecera oscura, en azul claro */
.pagina:not(.ap-contenido) .uti-cabecera p.uti-etiqueta {
	border-color: rgba(127, 211, 255, 0.35);
	background: rgba(19, 175, 249, 0.16);
	color: #9fdcfb;
}

/* Alta de la certificación UTI enviada (serv.js): confirmación con el siguiente paso */
.uti-alta--hecha {
	border-color: #bfe3cf;
	padding: 22px 24px;
	background: linear-gradient(0deg, var(--blanco), #f4fbf7);
}

.uti-alta__exito {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.uti-alta__check {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #1f8a5b;
	color: var(--blanco);
	animation: uti-alta-check 0.4s ease both;
}

.uti-alta__check svg {
	width: 24px;
	height: 24px;
}

@keyframes uti-alta-check {
	from { transform: scale(0.6); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.pagina .uti-alta__exito p {
	margin: 0 0 14px;
	color: var(--texto);
	font-size: 15px;
	line-height: 1.55;
}

.pagina .uti-alta__exito p.uti-alta__titulo {
	margin: 8px 0 4px;
	color: var(--noche);
	font: 600 19px/1.3 Roboto, sans-serif;
}

.uti-alta__exito .uti-boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	border: 2px solid var(--azul);
	border-radius: var(--radio-boton);
	padding: 8px 22px;
	background: var(--azul);
	color: var(--blanco) !important;
	font: 500 15px/1.2 Roboto, sans-serif;
	text-decoration: none !important;
}

.uti-alta__exito .uti-boton:hover {
	border-color: var(--azul-hondo);
	background: var(--azul-hondo);
}

.uti-alta__exito .uti-boton .icono {
	width: 18px;
	height: 18px;
}

@media (prefers-reduced-motion: reduce) {
	.uti-alta__check {
		animation: none;
	}
}

@media (max-width: 600px) {
	.uti-alta__exito {
		flex-direction: column;
		gap: 10px;
	}
}

/* Entre la tarjeta «Tu certificación» y los pasos (que son información del proceso), una línea divisora */
:is(.ap-contenido, .pagina) hr.uti-separador {
	height: 0;
	margin: 32px 0 28px;
	border: 0;
	border-top: 1px solid #dfe3ea;
	background: none;
}

.uti-estado-socio--arriba {
	margin-bottom: 0;
}

/* Recién dada de alta: aviso verde dentro de la tarjeta «Tu certificación» */
.pagina .uti-estado-socio__recien {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	border-radius: var(--radio);
	padding: 10px 14px;
	background: #e3f5ec;
	color: #1f6b46;
	font-size: 15px;
	font-weight: 600;
}

.uti-estado-socio__recien .icono {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	padding: 4px;
	background: #1f8a5b;
	color: var(--blanco);
}

.uti-estado-socio--recien {
	border-color: #bfe3cf;
}

/* Avisos y confirmaciones con el diseño de la web, en vez de los del navegador (assets/avisos.js), en toda la web */
.serv-confirmar {
	width: min(440px, calc(100% - 32px));
	border: 0;
	border-radius: var(--radio-l);
	padding: 28px;
	background: var(--blanco);
	box-shadow: 0 30px 70px -20px rgba(15, 20, 40, 0.45);
	color: var(--texto);
}
.serv-confirmar[open] {
	animation: serv-confirmar-entra 0.18s ease-out;
}
@keyframes serv-confirmar-entra {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
}
.serv-confirmar::backdrop {
	background: rgba(37, 43, 66, 0.55);
	backdrop-filter: blur(3px);
}
.serv-confirmar__titulo {
	margin: 0 0 8px;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--noche);
}
.serv-confirmar__texto {
	margin: 0;
	line-height: 1.55;
	color: var(--texto-suave);
}
.serv-confirmar__botones {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 24px;
}
.serv-confirmar .serv-confirmar__botones button {
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--radio-boton);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transicion), border-color var(--transicion);
}
.serv-confirmar .serv-confirmar__no {
	border-color: var(--borde) !important;
	background: var(--blanco);
	color: var(--noche);
}
.serv-confirmar .serv-confirmar__no:hover {
	border-color: var(--noche) !important;
}
.serv-confirmar .serv-confirmar__si {
	background: var(--noche);
	color: var(--blanco);
}
.serv-confirmar .serv-confirmar__si:hover {
	background: var(--azul-hondo);
}
.serv-confirmar.serv-confirmar--peligro .serv-confirmar__si {
	background: #c62828;
}
.serv-confirmar.serv-confirmar--peligro .serv-confirmar__si:hover {
	background: #a31f1f;
}
@media (max-width: 480px) {
	.serv-confirmar__botones {
		flex-direction: column-reverse;
	}
}
.serv-confirmar__icono {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0 0 14px;
	border-radius: 50%;
	background: #eef7fe;
	color: var(--azul-hondo);
}
.serv-confirmar__icono svg {
	width: 26px;
	height: 26px;
}
.serv-confirmar--ok .serv-confirmar__icono {
	background: #e3f5ec;
	color: #1f6b46;
}
.serv-confirmar--error .serv-confirmar__icono {
	background: #fdf0ef;
	color: #b42318;
}
/* Solo el aviso, sin título: el texto, en el color del texto */
.serv-confirmar__icono ~ .serv-confirmar__texto {
	color: var(--texto);
	font-size: 16px;
	white-space: pre-line;
}

/* Rueda en el botón que está enviando o cargando */
.serv-cargando {
	cursor: progress !important;
	pointer-events: none;
}
input.serv-cargando {
	opacity: 0.65;
}
.serv-rueda {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -0.15em;
	animation: serv-rueda-gira 0.7s linear infinite;
}
@keyframes serv-rueda-gira {
	to {
		transform: rotate(360deg);
	}
}

/* Página del curso (/curso-cirugia-escleral/): «Acceder al curso» al curso online, en lugar de «Curso en mantenimiento»
   (herramientas/convertir/cursos-enlaces.php) */
.pagina .curso-portada__acceso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0;
}
.pagina .curso-portada__acceso a.curso-portada__boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	border-radius: var(--radio-boton);
	padding: 0 26px;
	background: var(--azul);
	color: var(--blanco);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background var(--transicion);
}
.pagina .curso-portada__acceso a.curso-portada__boton:hover {
	background: var(--azul-hondo);
}
.curso-portada__boton .icono {
	width: 18px;
	height: 18px;
}
.curso-portada__acceso span {
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
}

/* ---------- Buscador (get_search_form, functions.php) ---------- */
.buscador {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 560px;
	border: 1px solid var(--borde);
	border-radius: var(--radio-boton);
	padding: 6px 6px 6px 48px;
	background: var(--blanco);
	box-shadow: var(--sombra-s);
	transition: border-color var(--transicion), box-shadow var(--transicion);
}

.buscador:focus-within {
	border-color: var(--azul);
	box-shadow: 0 0 0 4px rgba(19, 175, 249, 0.15);
}

.buscador .buscador__lupa {
	position: absolute;
	left: 18px;
	width: 20px;
	height: 20px;
	color: var(--texto-suave);
}

.buscador__campo {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 10px 0;
	background: none;
	color: var(--noche);
	font: 400 16px/1.3 Roboto, sans-serif;
	outline: none;
	-webkit-appearance: none;
}

.buscador__campo::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.buscador__boton {
	flex: none;
	border: 0;
	border-radius: var(--radio-boton);
	padding: 12px 22px;
	background: var(--azul);
	color: var(--blanco);
	font: 500 15px/1 Roboto, sans-serif;
	cursor: pointer;
	transition: background-color var(--transicion);
}

.buscador__boton:hover {
	background: var(--azul-hondo);
}

/* ---------- Página no encontrada (404.php) ---------- */
/* La página ocupa todo el ancho, con el gris de las demás (con un ancho máximo, en pantallas muy anchas se veía el azul
   noche del fondo a los lados; Jandro, 19-10-2026); el contenido, centrado */
.no-encontrada {
	padding: 56px 20px 80px;
}

.no-encontrada > * {
	max-width: 1040px;
	margin-inline: auto;
}

.no-encontrada__cabecera {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.no-encontrada__numero {
	display: flex;
	align-items: center;
	gap: 0.06em;
	margin: 0 0 8px;
	color: var(--noche);
	font: 700 clamp(104px, 20vw, 188px)/1 Roboto, sans-serif;
	letter-spacing: -0.04em;
}

.no-encontrada__ojo {
	width: 1.06em;
	height: auto;
	margin-inline: 0.02em;
	overflow: visible;
}

.no-encontrada__blanco {
	fill: var(--blanco);
}

.no-encontrada__contorno {
	fill: none;
	stroke: var(--noche);
	stroke-width: 9;
	stroke-linejoin: round;
}

.no-encontrada__arco {
	fill: none;
	stroke: var(--azul);
	stroke-width: 2.8;
	stroke-linecap: round;
	opacity: 0.85;
}

.no-encontrada__iris {
	transition: transform 0.25s ease-out;
}

.no-encontrada__parpado {
	transform-origin: 100px 75px;
	animation: no-encontrada-parpadeo 6s infinite;
}

@keyframes no-encontrada-parpadeo {
	0%, 92%, 100% { transform: scaleY(1); }
	95% { transform: scaleY(0.08); }
}

@media (prefers-reduced-motion: reduce) {
	.no-encontrada__parpado { animation: none; }
	.no-encontrada__iris { transition: none; }
}

.no-encontrada__etiqueta {
	margin: 0 0 12px;
	border-radius: var(--radio-boton);
	padding: 6px 14px;
	background: #e3f4fd;
	color: var(--azul-hondo);
	font: 600 13px/1 Roboto, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pagina.no-encontrada h1 {
	margin: 0 0 14px;
	color: var(--noche);
	font: 700 clamp(30px, 4vw, 44px)/1.15 Roboto, sans-serif;
}

.no-encontrada__texto {
	max-width: 620px;
	margin: 0 0 28px;
	color: var(--texto-suave);
	font-size: 18px;
	line-height: 1.6;
}

.no-encontrada .buscador {
	width: 100%;
}

.no-encontrada__accesos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 56px;
}

.no-encontrada__acceso {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid var(--borde);
	border-radius: var(--radio-l);
	padding: 18px 18px 18px 16px;
	background: var(--blanco);
	color: var(--noche);
	text-decoration: none;
	transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}

.no-encontrada__acceso:hover {
	border-color: #bfe3f9;
	box-shadow: var(--sombra);
	transform: translateY(-2px);
}

.no-encontrada__icono {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #e8f6fe;
	color: var(--azul-hondo);
}

.no-encontrada__icono .icono {
	width: 22px;
	height: 22px;
}

.no-encontrada__acceso-texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.no-encontrada__acceso-texto strong {
	font: 600 16px/1.3 Roboto, sans-serif;
}

.no-encontrada__acceso-texto span {
	color: var(--texto-suave);
	font-size: 14px;
	line-height: 1.4;
}

.no-encontrada .no-encontrada__flecha {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--azul);
	transition: transform var(--transicion);
}

.no-encontrada__acceso:hover .no-encontrada__flecha {
	transform: translateX(3px);
}

.no-encontrada__portada {
	margin: 40px auto 0;
	text-align: center;
}

/* Los enlaces de .pagina van en azul: aquí, el texto del botón en blanco y las tarjetas en azul noche */
.pagina .no-encontrada__portada .boton--relleno,
.pagina .no-encontrada__portada .boton--relleno:hover {
	color: var(--blanco);
	text-decoration: none;
}

.pagina a.no-encontrada__acceso {
	color: var(--noche);
	text-decoration: none;
}

@media (max-width: 900px) {
	.no-encontrada__accesos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.no-encontrada {
		padding: 32px 16px 56px;
	}

	.no-encontrada__accesos {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 40px;
	}

	.buscador {
		padding-left: 42px;
	}

	.buscador .buscador__lupa {
		left: 15px;
	}

	.buscador__boton {
		padding-inline: 16px;
	}
}

/* ---------- Aviso de galletas (GDPR Cookie Consent) ---------- */
/* Rediseño con el aire de la web (Jandro, 19-10-2026): en el ordenador, una tarjeta blanca abajo a la izquierda; en el
   móvil, una hoja abajo. El plugin le pone colores y medidas en línea desde su JavaScript: de ahí los !important. Se
   ve desde el principio si aún no se ha aceptado (html.serv-aviso-galletas, inc/rendimiento.php), sin esperar a su
   JavaScript ni a sus hojas de estilo, que van al final de la página. El texto legal es el del plugin. */
#cookie-law-info-bar {
	position: fixed !important;
	top: auto !important;
	right: auto !important;
	bottom: 24px !important;
	left: 24px !important;
	z-index: 9999 !important;
	box-sizing: border-box;
	width: min(460px, calc(100vw - 48px)) !important;
	max-height: calc(100vh - 48px);
	overflow-y: auto !important;
	border: 1px solid var(--borde) !important;
	border-radius: var(--radio-l) !important;
	padding: 22px 24px 20px !important;
	background: var(--blanco) !important;
	box-shadow: 0 24px 60px -24px rgba(15, 20, 40, 0.4) !important;
	color: var(--texto-suave) !important;
	font: 400 14px/1.6 Roboto, sans-serif !important;
	text-align: left !important;
}

/* Solo cuando ha llegado entero (su último botón): en páginas largas el HTML llega a trozos y la barra se pintaba a
   medias y luego crecía (un salto de 0,18). Sin :has, la muestra el plugin al arrancar, como antes. */
html.serv-aviso-galletas #cookie-law-info-bar:has(.cli_settings_button) {
	display: block;
}

#cookie-law-info-bar::before {
	content: "Cookies en serv.es";
	display: block;
	margin-bottom: 8px;
	color: var(--noche);
	font: 700 17px/1.3 Roboto, sans-serif;
}

#cookie-law-info-bar > span {
	display: block;
}

/* «MÁS INFORMACIÓN»: un enlace normal dentro del texto */
#cookie-law-info-bar .cli-plugin-main-link {
	display: inline !important;
	color: var(--azul-hondo) !important;
	font-weight: 500;
	text-decoration: underline !important;
	text-transform: lowercase;
}

/* Botones como los de la web, con el texto en minúsculas («Aceptar y seguir»: los textos vienen en mayúsculas) */
#cookie-law-info-bar .cli-plugin-button,
#cookie-law-info-bar .cli_settings_button {
	display: inline-block !important;
	box-sizing: border-box;
	min-height: 0;
	margin: 16px 8px 0 0 !important;
	border: 1px solid transparent !important;
	border-radius: var(--radio-boton) !important;
	padding: 0 18px !important;
	font: 600 14px/40px Roboto, sans-serif !important;
	letter-spacing: 0 !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: lowercase !important;
	cursor: pointer;
	transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

#cookie-law-info-bar .cli-plugin-button::first-letter,
#cookie-law-info-bar .cli_settings_button::first-letter,
#cookie-law-info-bar .cli-plugin-main-link::first-letter {
	text-transform: uppercase;
}

#cookie-law-info-bar .wt-cli-accept-btn {
	border-color: var(--azul) !important;
	background: var(--azul) !important;
	color: var(--blanco) !important;
}

#cookie-law-info-bar .wt-cli-accept-btn:hover {
	border-color: var(--azul-hondo) !important;
	background: var(--azul-hondo) !important;
}

#cookie-law-info-bar .wt-cli-reject-btn {
	border-color: #d6dae3 !important;
	background: var(--blanco) !important;
	color: var(--noche) !important;
}

#cookie-law-info-bar .wt-cli-reject-btn:hover {
	border-color: var(--noche) !important;
}

#cookie-law-info-bar .cli_settings_button {
	padding: 0 6px !important;
	background: none !important;
	color: var(--texto-suave) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

#cookie-law-info-bar .cli_settings_button:hover {
	color: var(--noche) !important;
}

#cookie-law-info-bar :focus-visible {
	outline: 3px solid rgba(19, 175, 249, 0.45) !important;
	outline-offset: 2px;
}

/* La pestaña «Política de cookies», para volver a abrir el aviso tras elegir */
#cookie-law-info-again {
	right: 16px !important;
	bottom: 16px !important;
	left: auto !important;
	border: 1px solid var(--borde) !important;
	border-radius: var(--radio-boton) !important;
	padding: 8px 14px !important;
	background: var(--blanco) !important;
	box-shadow: var(--sombra-s) !important;
	color: var(--noche) !important;
	font: 500 12px/1 Roboto, sans-serif !important;
	letter-spacing: 0.04em;
}

/* La ventana «Opciones»: oculta hasta que se abre (sus estilos llegan al final de la página) y con el aire de la web */
.cli-modal:not(.cli-show) {
	display: none;
}

.cli-modal .cli-modal-content {
	border: 0 !important;
	border-radius: var(--radio-l) !important;
	box-shadow: 0 30px 80px -30px rgba(15, 20, 40, 0.5) !important;
	font-family: Roboto, sans-serif !important;
}

.cli-modal .cli-modal-body {
	padding: 28px 28px 8px !important;
	color: var(--texto-suave);
	font-size: 14px;
	line-height: 1.6;
}

.cli-modal .cli-privacy-overview h4 {
	margin: 0 0 10px !important;
	color: var(--noche) !important;
	font: 700 20px/1.3 Roboto, sans-serif !important;
}

.cli-modal .cli-tab-section {
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	overflow: hidden;
}

.cli-modal .cli-tab-header {
	border-radius: 0 !important;
	background: #f6f7fa !important;
	color: var(--noche) !important;
	font-weight: 600 !important;
}

.cli-modal .cli-necessary-caption {
	color: #1f8a5b !important;
	font-weight: 600;
}

.cli-modal .cli-switch input:checked + .cli-slider {
	background-color: var(--azul) !important;
}

.cli-modal .cli-modal-footer {
	padding: 16px 28px 24px !important;
}

.cli-modal .wt-cli-privacy-accept-btn {
	display: inline-block !important;
	border-radius: var(--radio-boton) !important;
	padding: 0 22px !important;
	background: var(--azul) !important;
	color: var(--blanco) !important;
	font: 600 14px/44px Roboto, sans-serif !important;
	letter-spacing: 0 !important;
	text-transform: lowercase !important;
}

.cli-modal .wt-cli-privacy-accept-btn::first-letter {
	text-transform: uppercase;
}

.cli-modal .wt-cli-privacy-accept-btn:hover {
	background: var(--azul-hondo) !important;
}

.cli-modal .cli-modal-close {
	top: 14px !important;
	right: 14px !important;
	border-radius: 50%;
}

/* En el móvil: una hoja abajo, de lado a lado, con los botones grandes */
@media (max-width: 767px) {
	#cookie-law-info-bar {
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: auto !important;
		max-height: 70vh;
		border-width: 1px 0 0 !important;
		border-radius: var(--radio-l) var(--radio-l) 0 0 !important;
		padding: 18px 16px calc(14px + env(safe-area-inset-bottom)) !important;
		font-size: 13px !important;
		line-height: 1.5 !important;
	}

	#cookie-law-info-bar::before {
		font-size: 16px;
	}

	#cookie-law-info-bar .cli-plugin-button,
	#cookie-law-info-bar .cli_settings_button {
		margin: 12px 0 0 !important;
		font-size: 14px !important;
		line-height: 44px !important;
	}

	#cookie-law-info-bar .wt-cli-accept-btn {
		width: 100%;
	}

	/* Rechazar y Opciones, uno al lado del otro (entre los dos hay un espacio del texto: de ahí el margen) */
	#cookie-law-info-bar .wt-cli-reject-btn,
	#cookie-law-info-bar .cli_settings_button {
		width: calc(50% - 6px);
		margin-top: 8px !important;
		vertical-align: top;
	}

	#cookie-law-info-bar .wt-cli-reject-btn {
		margin-right: 4px !important;
	}

	#cookie-law-info-bar .cli_settings_button {
		border-color: #d6dae3 !important;
		background: var(--blanco) !important;
		color: var(--noche) !important;
		text-decoration: none !important;
	}
}