/*
Theme Name:   Proyecto David · GP
Theme URI:    https://santswebdesign.com
Description:  Tema hijo de GeneratePress para la web de David Garcia-Carazo, cruise director.
              Registro visual tomado de swd-new (santswebdesign.com) con la paleta de David.
              Reescrito el 12/09/2026. Los valores estan medidos sobre swd-new, no inventados.
Author:       Sants Web Design
Author URI:   https://santswebdesign.com
Template:     generatepress
Version:      2.0.0
Text Domain:  proyecto-david-gp
*/

/* ==========================================================================
   1 · FUENTES · Montserrat, las mismas tres de swd-new
   33 KB entre las tres, ya subconjuntadas.
   ========================================================================== */

@font-face {
	font-family: "Montserrat";
	src: url("assets/fonts/montserrat-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("assets/fonts/montserrat-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("assets/fonts/montserrat-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2 · TOKENS
   Los COLORES los emite GeneratePress desde los colores globales que define
   functions.php, como --contrast, --base-2, --accent. Aqui no se repiten.
   ========================================================================== */

:root {
	--pd-fuente: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--pd-medio: 600;
	--pd-fuerte: 700;

	/* --- medidas tomadas de swd-new --- */
	--pd-ancho: 1140px;
	--pd-texto: 68ch;
	--pd-radio: 12px;
	--pd-radio-boton: 6px;
	--pd-sombra: 0 2px 8px rgba(18, 41, 61, 0.08);
	--pd-sombra-alta: 0 6px 18px rgba(18, 41, 61, 0.12);

	/* --- espacio --- */
	--e-3xs: 4px;
	--e-2xs: 8px;
	--e-xs: 12px;
	--e-s: 16px;
	--e-m: 24px;
	--e-l: 40px;
	--e-xl: 64px;
	--e-seccion: 48px;   /* movil. Sube a 64 en pantalla ancha, como swd-new */
	--margen-lateral: 20px;

	--transicion: 180ms ease-out;
}

@media (min-width: 768px) {
	:root {
		--margen-lateral: 32px;
		--e-seccion: 64px;
	}
}

/* ==========================================================================
   3 · BASE
   ========================================================================== */

body,
button,
input,
select,
textarea {
	font-family: var(--pd-fuente);
	font-size: 17px;
	line-height: 1.5;
}

body {
	color: var(--contrast-2);
	background-color: var(--base-3);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
	font-family: var(--pd-fuente);
	font-weight: var(--pd-fuerte);
	color: var(--contrast);
	text-wrap: balance;
	letter-spacing: 0;
}

h1 {
	font-size: clamp(30px, 4.4vw, 46px);
	line-height: 1.2;
}

/* El titular de seccion va CENTRADO y con aire debajo, que es la marca de
   swd-new. 31 px medidos, 64 de separacion. */
h2 {
	font-size: clamp(25px, 3vw, 31px);
	line-height: 1.3;
	text-align: center;
	margin-bottom: var(--e-xl);
}

h3 {
	font-size: 18px;
	line-height: 1.35;
	margin-bottom: var(--e-xs);
}

h4 {
	font-size: 17px;
	line-height: 1.4;
	margin-bottom: var(--e-2xs);
}

h5, .pd-etiqueta {
	font-size: 13px;
	font-weight: var(--pd-medio);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--e-2xs);
}

p { margin-bottom: var(--e-s); }
p:last-child { margin-bottom: 0; }

/* Ningun parrafo pasa de 72 caracteres, ni dentro de una tarjeta ancha.
   Sin esto la trayectoria llegaba a 82 y el "para quien" a 101. */
.pd-seccion p:not(.pd-intro):not(.pd-etiqueta):not(.pd-cifra) {
	max-width: 72ch;
}

.pd-entradilla {
	font-size: 19px;
	line-height: 1.6;
	color: var(--contrast-2);
}

.pd-secundario,
figcaption {
	font-size: 15px;
	line-height: 1.5;
	color: var(--contrast-3);
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: color var(--transicion);
}

a:hover { color: var(--contrast); text-decoration: underline; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* Texto corrido centrado bajo un titular de seccion, como en swd-new */
.pd-intro {
	max-width: 62ch;
	margin-inline: auto;
	text-align: center;
	margin-top: calc(var(--e-xl) * -1 + var(--e-m));
	margin-bottom: var(--e-xl);
	color: var(--contrast-2);
}

/* ==========================================================================
   4 · SECCIONES · blanco y hueso alternando, como swd-new alterna
   blanco y su azul palido
   ========================================================================== */

/* GeneratePress mete 40 px arriba y abajo en CADA .wp-block-group__inner-container,
   ENCIMA del relleno que pone el sistema. O sea que un "64/64" eran 104/104 de
   verdad.

   VA SIN `>` A PROPOSITO. Con el selector de hijo directo solo se arreglaba la
   seccion, y cada grupo ANIDADO —una tarjeta, un modulo del temario, la lista
   de clases— seguia metiendo sus 40+40. En el temario eran 80 px muertos
   debajo del video, que es lo que se veia como "demasiado aire".

   El relleno vertical lo ponen las clases del sistema, nunca el envoltorio. */
.pd-seccion .wp-block-group__inner-container,
.pd-franja .wp-block-group__inner-container,
.pd-hero .wp-block-group__inner-container {
	/* padding, no padding-block. El envoltorio tambien mete 40 px A LOS LADOS,
	   y con dos grupos anidados son 160 px que a 390 de ancho dejaban la
	   tarjeta del temario en 230 y el video en 60. El margen lateral lo pone
	   .alignfull, aqui no hace falta ninguno. */
	padding: 0;
}

.pd-seccion { padding-block: var(--e-seccion); }

/* En este registro la cabecera de seccion va centrada — la etiqueta, el
   titular y el parrafo de entrada. Las tarjetas y las listas de debajo van
   alineadas a la izquierda, que es como lo hace swd-new. */
.pd-seccion > .wp-block-group__inner-container > .pd-etiqueta,
.pd-seccion > .pd-etiqueta {
	text-align: center;
}

/* --- el video de la home ---
   A 1140 px de ancho era un bloque enorme sin contexto y se comia la seccion.
   En dos columnas mide la mitad, el titular va a su lado y deja de ser un
   trozo de YouTube pegado en medio de la pagina. */
.pd-video__fila { gap: var(--e-xl); align-items: center; }

.pd-video__fila .pd-video__titulo {
	text-align: left;
	margin-bottom: var(--e-s);
}

.pd-video__fila .pd-etiqueta { text-align: left; }
.pd-video__fila p + p { margin-top: var(--e-s); }

@media (min-width: 900px) {
	.pd-video__fila { grid-template-columns: 0.85fr 1.15fr; }
}

.pd-cierre p,
.pd-escalas > .wp-block-group__inner-container > p:not(.pd-globo__pie),
.pd-trayectoria > .wp-block-group__inner-container > p {
	text-align: center;
	max-width: 62ch;
	margin-inline: auto;
}

.pd-cierre .wp-block-buttons,
.pd-escalas .wp-block-buttons {
	justify-content: center;
}

.pd-navieras__titulo { margin-top: var(--e-l); }

/* El inner-container de un grupo lleva is-layout-constrained y recorta a sus
   hijos al ancho de contenido, dejando las tarjetas 80px mas estrechas que la
   seccion. Aqui se quita, que las tarjetas ocupan la caja entera. */
.pd-hitos > .wp-block-group__inner-container > *,
.pd-temario__lista > .wp-block-group__inner-container > * {
	max-width: none;
}

/* Una lista de ventajas a 1140px de ancho no se lee. Dos columnas y centrada. */
.pd-incluye .pd-lista {
	max-width: 800px;
	margin-inline: auto;
}

@media (min-width: 700px) {
	.pd-incluye .pd-lista {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--e-l);
	}
}
.pd-fondo-hueso { background-color: var(--base-2); }
.pd-fondo-blanco { background-color: var(--base-3); }

.pd-fondo-tinta {
	background-color: var(--contrast);
	color: var(--base-2);
}

.pd-fondo-tinta h1,
.pd-fondo-tinta h2,
.pd-fondo-tinta h3,
.pd-fondo-tinta h4 { color: #FFFFFF; }

.pd-fondo-tinta .pd-etiqueta { color: var(--accent-claro); }
.pd-fondo-tinta a { color: var(--accent-claro); }

/* El parrafo de entrada centrado hereda el gris de cuerpo, que sobre tinta
   es ilegible. Sobre oscuro va en hueso claro. */
.pd-fondo-tinta .pd-intro,
.pd-fondo-tinta p { color: #E7E2DA; }

/* ==========================================================================
   5 · TARJETAS · la pieza central del registro de swd-new
   Fondo blanco, filete de 3 px del acento arriba, borde fino alrededor,
   radio de 12 y una sombra suave y unica.
   ========================================================================== */

.pd-tarjeta {
	background-color: var(--base-3);
	border: 1px solid var(--base);
	border-top: 3px solid var(--accent);
	border-radius: var(--pd-radio);
	box-shadow: var(--pd-sombra);
	padding: 26px;
	height: 100%;
	transition: box-shadow var(--transicion), transform var(--transicion);
}

.pd-tarjeta:hover {
	box-shadow: var(--pd-sombra-alta);
}

/* Variante sin filete de acento, para cuando hay muchas juntas y el rojo
   —aqui el laton— cansaria. */
.pd-tarjeta--lisa {
	border-top: 1px solid var(--base);
}

/* La destacada de un grupo de tres, como el pack del medio en swd-new */
.pd-tarjeta--destacada {
	border: 1px solid var(--accent);
	border-top: 3px solid var(--accent);
	box-shadow: var(--pd-sombra-alta);
}

.pd-tarjeta h3 { color: var(--contrast); }
.pd-tarjeta p { color: var(--contrast-2); }

/* Rejilla de tarjetas */
.pd-rejilla {
	display: grid;
	gap: var(--e-m);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) { .pd-rejilla--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .pd-rejilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pd-rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .pd-rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pd-rejilla--4 { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   6 · BOTONES
   ========================================================================== */

.wp-block-button__link,
.pd-boton,
.gb-button {
	display: inline-block;
	font-family: var(--pd-fuente);
	font-size: 17px;
	font-weight: var(--pd-fuerte);
	line-height: 1.4;
	padding: 14px 28px;
	border-radius: var(--pd-radio-boton);
	border: 2px solid transparent;
	text-decoration: none;
	transition: background-color var(--transicion), color var(--transicion),
		border-color var(--transicion);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.pd-boton--1 {
	background-color: var(--accent);
	color: #FFFFFF;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.pd-boton--1:hover {
	background-color: var(--contrast);
	color: #FFFFFF;
	text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.pd-boton--2 {
	background-color: transparent;
	color: var(--contrast);
	border-color: var(--contrast);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.pd-boton--2:hover {
	background-color: var(--contrast);
	color: #FFFFFF;
	text-decoration: none;
}

/* Sobre cualquier fondo oscuro el boton fantasma va en blanco.
   La portada tambien es fondo oscuro aunque no lleve la clase pd-fondo-tinta,
   y sin incluirla aqui salia tinta sobre tinta, o sea invisible. */
.pd-fondo-tinta .wp-block-button.is-style-outline .wp-block-button__link,
.pd-hero .wp-block-button.is-style-outline .wp-block-button__link {
	color: #FFFFFF;
	border-color: #FFFFFF;
}

.pd-fondo-tinta .wp-block-button.is-style-outline .wp-block-button__link:hover,
.pd-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #FFFFFF;
	color: var(--contrast);
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-s);
}

@media (max-width: 700px) {
	.wp-block-buttons .wp-block-button,
	.wp-block-button__link { width: 100%; text-align: center; }
}

/* ==========================================================================
   7 · PORTADA · fotografia con velo oscuro y texto encima, como swd-new
   ========================================================================== */

.pd-hero {
	position: relative;
	background-color: var(--contrast);
	background-size: cover;
	background-position: center;
	color: var(--base-2);
	overflow: hidden;
}

.pd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(10, 28, 43, 0.94) 0%,
		rgba(18, 41, 61, 0.86) 46%,
		rgba(18, 41, 61, 0.62) 100%
	);
}

.pd-hero > * { position: relative; }

.pd-hero h1 { color: #FFFFFF; margin-bottom: var(--e-m); }
.pd-hero .pd-etiqueta { color: var(--accent-claro); }

.pd-hero .pd-entradilla {
	color: #E7E2DA;
	max-width: 56ch;
	margin-bottom: var(--e-l);
}

.pd-hero--home { padding-block: clamp(72px, 12vh, 128px); }
.pd-hero--interior { padding-block: clamp(56px, 9vh, 88px); }

/* La franja de credibilidad justo debajo de la portada. En swd-new lleva las
   resenas; aqui lleva las tres cifras, que es lo que David tiene. */
/* Franja de credibilidad. Es una tira, no una seccion — tiene que leerse de
   un vistazo al pasar, no invitar a pararse. 20 arriba y abajo. */
.pd-franja {
	background-color: var(--base-2);
	border-bottom: 1px solid var(--base);
	padding-block: 20px;
}

.pd-franja__fila {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--e-s);
	text-align: center;
}

.pd-franja .pd-cifra {
	font-size: clamp(26px, 3.4vw, 34px);
	font-weight: var(--pd-fuerte);
	line-height: 1.1;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	margin-bottom: 2px;
}

.pd-franja .pd-secundario { font-size: 14px; }

/* ==========================================================================
   8 · LISTAS DE VENTAJAS · vinetas con marca del acento
   ========================================================================== */

.pd-lista {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--e-xs);
}

.pd-lista li {
	position: relative;
	padding-left: 30px;
	line-height: 1.5;
}

/*
 * Check en vez de circulo.
 * Va como MASCARA y no como background-image con el color dentro del SVG,
 * porque un data URI no puede leer var(--accent). Con mask el color sigue
 * saliendo del token y la paleta no se duplica.
 */
.pd-lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 20px;
	height: 20px;
	background-color: var(--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Sobre fondo oscuro el check va en el laton claro, que es el que contrasta */
.pd-fondo-tinta .pd-lista li::before,
.pd-hero .pd-lista li::before { background-color: var(--accent-claro); }

/* ==========================================================================
   9 · TABLA COMPARATIVA Y TEMARIO
   ========================================================================== */

.pd-tabla-wrap { overflow-x: auto; }

.pd-tabla {
	width: 100%;
	min-width: 620px;
	border-collapse: separate;
	border-spacing: 0;
	background-color: var(--base-3);
	border: 1px solid var(--base);
	border-radius: var(--pd-radio);
	overflow: hidden;
	box-shadow: var(--pd-sombra);
	font-variant-numeric: tabular-nums;
}

.pd-tabla th,
.pd-tabla td {
	padding: var(--e-s) var(--e-m);
	text-align: left;
	border-bottom: 1px solid var(--base);
	vertical-align: top;
}

.pd-tabla thead th {
	background-color: var(--contrast);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: var(--pd-medio);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 0;
}

.pd-tabla tbody tr:last-child td { border-bottom: 0; }

/* El temario, un modulo por tarjeta */
.pd-modulo {
	background-color: var(--base-3);
	border: 1px solid var(--base);
	border-radius: var(--pd-radio);
	box-shadow: var(--pd-sombra);
	padding: var(--e-m);
	margin-bottom: var(--e-s);
}

.pd-modulo__num {
	font-size: 13px;
	font-weight: var(--pd-medio);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--e-3xs);
}

.pd-modulo__titulo { font-size: 18px; margin-bottom: var(--e-2xs); }

/* --- las clases, cada una un desplegable con su video --- */
.pd-clases {
	margin-top: var(--e-s);
	border-top: 1px solid var(--base);
}

.pd-clase { border-bottom: 1px solid var(--base); }

.pd-clase > summary {
	display: flex;
	align-items: center;
	gap: var(--e-s);
	padding-block: var(--e-xs);
	padding-inline-end: var(--e-s);
	cursor: pointer;
	list-style: none;
	color: var(--contrast-2);
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	transition: color var(--transicion);
}

.pd-clase > summary::-webkit-details-marker { display: none; }

/* La flecha, dibujada. Gira al abrir. */
.pd-clase > summary::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(-45deg);
	transition: transform var(--transicion);
}

.pd-clase[open] > summary::before { transform: rotate(45deg); }
.pd-clase > summary:hover { color: var(--contrast); }

.pd-clase > summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* El aire dentro de la clase abierta.
   Estaba al reves — el video PEGADO al sumario a 0 px y 130 px muertos
   debajo, porque el grupo de bloques anade su propio hueco entre hijos y el
   details trae margen propio. Se anulan los dos y se pone el aire a mano. */
.pd-clases > *,
.pd-clase { margin-block: 0; }

/* El video se ALINEA CON EL TITULO DE SU CLASE, no con el borde de la tarjeta.
   Sangrado de 26 px, que es lo que ocupan la flecha y su hueco. Asi se lee
   como contenido que cuelga de esa clase, que es lo que es.
   Antes arrancaba a la izquierda del propio titulo y no cuadraba con nada. */
.pd-clase .wp-block-embed {
	margin-block: var(--e-s) var(--e-m);
	margin-inline-start: 26px;
	max-width: 880px;
}

/* En movil no hay sitio para sangrar. Ocupa todo el ancho de la tarjeta. */
@media (max-width: 700px) {
	.pd-clase .wp-block-embed {
		margin-inline-start: 0;
		max-width: none;
	}
}

/* Un poco menos de relleno en el modulo. Con el desplegable cerrado la
   tarjeta respiraba de sobra. */
.pd-modulo { padding: var(--e-m) var(--e-m) var(--e-s); }

/* ==========================================================================
   10 · TRAYECTORIA · tarjetas con la fecha en el acento
   ========================================================================== */

.pd-hito {
	background-color: var(--base-3);
	border: 1px solid var(--base);
	border-left: 3px solid var(--accent);
	border-radius: var(--pd-radio);
	box-shadow: var(--pd-sombra);
	padding: var(--e-m);
	margin-bottom: var(--e-s);
}

.pd-hito__fecha {
	font-size: 14px;
	font-weight: var(--pd-fuerte);
	letter-spacing: 0.04em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--e-3xs);
}

.pd-hito__puesto { font-size: 18px; margin-bottom: var(--e-2xs); }
.pd-hito p { color: var(--contrast-2); }

.pd-navieras {
	text-align: center;
	max-width: 60ch;
	margin-inline: auto;
	color: var(--contrast-2);
}

/* ==========================================================================
   11 · IMAGENES
   ========================================================================== */

.entry-content img,
.wp-block-image img {
	border-radius: var(--pd-radio);
	display: block;
}

.pd-r-retrato img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.pd-r-escena img  { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.pd-r-video       { aspect-ratio: 16 / 9; }

.wp-block-embed iframe {
	border-radius: var(--pd-radio);
	display: block;
	width: 100%;
}

/* ==========================================================================
   12 · CABECERA Y NAVEGACION
   ========================================================================== */

.site-header {
	background-color: var(--contrast);
	border-bottom: 0;
}

.main-navigation { background-color: transparent; }

.site-branding .main-title {
	font-size: 19px;
	font-weight: var(--pd-fuerte);
	letter-spacing: 0;
}

.site-branding .main-title a { color: #FFFFFF; }
.site-description { color: var(--apoyo-oscuro); font-size: 13px; }

.main-navigation a {
	font-size: 15px;
	font-weight: var(--pd-medio);
	color: #FFFFFF;
}

.main-navigation .main-nav ul li:not(.pd-cta) > a:hover,
.main-navigation .main-nav ul li.current-menu-item:not(.pd-cta) > a {
	color: var(--accent-claro);
}

/* La cabecera alinea por el centro. GeneratePress la deja en display:block
   con floats, y asi la marca (42 px) y el menu (80 px) no compartian eje —
   el logotipo quedaba pegado arriba y el menu colgando. */
/* El contenido de la cabecera cae en el MISMO eje que el de las secciones.
   Va con `body .site-header` porque GeneratePress fija el ancho con
   `body .grid-container { max-width: 1140px }`, que tiene mas especificidad
   que un `.inside-header` a secas y me lo estaba ganando. */
body .site-header .inside-header {
	display: flex;
	align-items: center;
	gap: var(--e-m);
	box-sizing: border-box;
	max-width: calc(var(--pd-ancho) + var(--margen-lateral) * 2);
	padding-inline: var(--margen-lateral);
}

/* GeneratePress lleva un clearfix con ::before y ::after en .inside-header.
   Al pasar el contenedor a flex esos DOS PSEUDOELEMENTOS SE CONVIERTEN EN
   ITEMS DEL FLEX, y con el gap de 24 px empujaban el contenido 24 por cada
   lado. Ese era el desfase que quedaba contra el resto de la pagina. */
body .site-header .inside-header::before,
body .site-header .inside-header::after {
	display: none;
}

body .site-header .site-branding { padding: 0; }

.inside-header .site-branding { float: none; }

/* margin-left auto en vez de justify-content. Es lo unico que no depende de
   que gane mi regla contra la de GeneratePress — con space-between los dos
   bloques me salian centrados, repartidos a tercios. */
.inside-header .main-navigation {
	float: none;
	margin-inline-start: auto;
}

.main-navigation .main-nav ul li.pd-cta > a {
	background-color: var(--accent);
	color: #FFFFFF;
	border-radius: var(--pd-radio-boton);
	margin-inline-start: var(--e-s);
	/* Sin padding vertical propio. La altura la da menu_item_height, 44 px,
	   igual que el resto de enlaces. Con 10 px arriba y abajo el boton se iba
	   a 80 y era el elemento mas alto de la cabecera. */
	padding-block: 0;
	line-height: 44px;
}

.main-navigation .main-nav ul li.pd-cta > a:hover {
	background-color: #FFFFFF;
	color: var(--contrast);
}

/* --- selector de idioma, dentro del menu --- */
.main-navigation .main-nav ul li.pd-idioma > a {
	font-size: 13px;
	font-weight: var(--pd-fuerte);
	letter-spacing: 0.06em;
	color: var(--apoyo-oscuro);
	padding-inline: 8px;
}

/* El respiro entre el boton y el primer idioma.
   ANTES ERA `li.pd-idioma:first-of-type` y NO PINTABA NADA. `:first-of-type`
   no mira la clase, mira el tipo — pedia un <li> que fuera a la vez el primero
   de sus hermanos y de idioma, y el primero siempre es «Inicio». El selector
   bueno es el hermano adyacente del boton, que es donde el filtro de
   functions.php engancha los idiomas.

   Y va con `:not(.slideout-navigation)` porque el panel movil lleva la misma
   clase `main-navigation` que la cabecera. Sin eso, ese margen de 16 px se
   colaba dentro del panel y descolocaba el primer idioma. */
.main-navigation:not(.slideout-navigation) .main-nav ul li.pd-cta + li.pd-idioma > a {
	margin-inline-start: var(--e-s);
}

.main-navigation .main-nav ul li.pd-idioma > a:hover { color: #FFFFFF; }

.main-navigation .main-nav ul li.pd-idioma--activo > a {
	color: var(--accent-claro);
}

/* ==========================================================================
   13 · PIE
   ========================================================================== */

/* Distribucion tomada de swd-new — tres columnas iguales, 52 arriba y 36
   abajo, y debajo una fila centrada de redes con el copyright.

   EL PIE LO PINTA EL TEMA, NO WIDGETS. Un widget de bloque no se traduce con
   Polylang Free, asi que con widgets habria hecho falta duplicar las tres
   columnas por idioma y mantenerlas a mano. */
/* EL PIE ES UN SOLO BLOQUE. El fondo va en .site-footer y todo lo de dentro
   se apoya en el, como en swd-new. Antes solo lo tenia la barra de abajo y el
   bloque de columnas quedaba flotando sobre el fondo de la pagina. */
.site-footer {
	background-color: var(--noche);
	color: var(--apoyo-oscuro);
}

/* Posicion tomada de web-jordi, medida el 18/09/2026.
   Las tres columnas NO se estiran de borde a borde — son estrechas y van
   CENTRADAS como un bloque, con mucho aire a los lados. Es lo que hace que el
   pie se lea como un cierre y no como otra seccion de la pagina. */
.pd-pie {
	padding-block: 68px 60px;
	padding-inline: var(--margen-lateral);
}

/* CUATRO COLUMNAS DESDE EL 18/09/2026, no tres. Las redes dejaron de estar
   sueltas en la barra de abajo y subieron aqui como una seccion mas.

   Y ESO OBLIGO A RECALCULAR, no solo a añadir un div. Con las medidas de
   web-jordi —columna de 220, hueco de 86— cuatro columnas suman 1138 px, que
   es practicamente el ancho entero del contenedor. Medido, se desbordaba de
   1180 px de ventana para abajo y sacaba barra horizontal desde 1100.

   Lo que se toca es la columna, no el hueco. El hueco es el ritmo que se tomo
   de web-jordi y se queda; la columna baja de 220 a 200, que es el numero
   medido: la mas ancha pide 191 px por el correo de David, asi que con 200 las
   cuatro salen iguales y ninguna parte una palabra.

   Cuentas: 4 x 200 + 3 x 72 = 1016 px de bloque, con 62 px de aire a cada lado
   dentro de los 1140 del contenedor. */
.pd-pie__fila {
	display: flex;

	/* El seguro. Sin esto, por debajo del ancho donde caben las cuatro, la fila
	   no envuelve — se sale. Con envoltura pasa a dos y dos, que es lo que
	   tiene que hacer. */
	flex-wrap: wrap;

	justify-content: center;
	gap: 40px 72px;
	max-width: var(--pd-ancho);
	margin-inline: auto;
}

/* Con `flex: 0 1 auto` la columna crece si una etiqueta larga lo pide, en vez
   de partir la palabra. El min-width es el suelo, no la medida fija. */
.pd-pie__col {
	flex: 0 1 auto;
	min-width: 200px;
}

.pd-pie__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--e-2xs);
}

.pd-pie__col p { margin-bottom: var(--e-2xs); }
.pd-pie__col,
.pd-pie__col a { font-size: 16px; }

@media (max-width: 767px) {
	.pd-pie__fila { flex-direction: column; gap: var(--e-m); }
}

/* EL AREA PULSABLE DEL PIE, en todo lo que se toca con el dedo.
   -------------------------------------------------------------------------
   Medido el 18/09/2026 a 320, 360, 390 y 430 px: los diez enlaces de las
   columnas median 19 px de alto. El aire entre ellos eran 8 px de hueco del
   contenedor, o sea MARGEN MUERTO — se tocaba justo entre dos enlaces y no
   pasaba nada.

   No es un incumplimiento de WCAG 2.5.8, que con 19 px de alto y 27 px de eje
   a eje pasa por la excepcion de separacion. Es incomodo, que es distinto.

   El hueco se convierte en relleno del propio enlace, asi que la fila entera
   pasa a ser el objetivo. 19 + 24 = 43 px, y el ritmo visual apenas se mueve
   porque el aire que se quita por fuera se pone por dentro.

   Hasta 1024 y no hasta 767, que es donde esta el corte del menu movil. Una
   tableta en vertical tambien se toca con el dedo. */
@media (max-width: 1024px) {
	.pd-pie__col ul { gap: 0; }

	.pd-pie__col ul a {
		display: block;
		padding-block: 12px;
	}

	/* El correo va dentro de un <p>, no de una lista. inline-block para que el
	   relleno cuente sin ocupar toda la linea. */
	.pd-pie__col p a {
		display: inline-block;
		padding-block: 12px;
	}

	/* El parrafo del nombre ya no necesita su margen: el relleno del enlace de
	   debajo da la separacion. */
	.pd-pie__col p { margin-bottom: 0; }
}

.site-footer .footer-widgets { padding-block: 52px 36px; }

/* Las columnas tienen que caer en el mismo eje que el contenido de la pagina.
   GeneratePress monta el pie con su rejilla vieja — floats y un
   `margin-left: -40px` en el contenedor — asi que las columnas empezaban en
   103 y el resto de la web en 143, y ademas se tocaban sin separacion.
   Se cambia por flex, que resuelve las dos cosas de una vez. */
/* El selector copia el de GeneratePress a proposito.
   El suyo es `.site-footer .footer-widgets-container .inside-footer-widgets`,
   tres clases, y le ganaba a un `body .site-footer .inside-footer-widgets`.
   Mismo selector y mas abajo en la cascada, sin necesidad de !important. */
.site-footer .footer-widgets-container .inside-footer-widgets {
	display: flex;
	gap: var(--e-l);
	max-width: var(--pd-ancho);
	margin: 0 auto;
	width: 100%;
}

/* El clearfix de GeneratePress otra vez. Sus ::before y ::after se convierten
   en items del flex y se comian un hueco de 40 px, dejando las columnas en
   340 en vez de 353 y el borde derecho a 1243 en lugar de 1283. */
.site-footer .footer-widgets-container .inside-footer-widgets::before,
.site-footer .footer-widgets-container .inside-footer-widgets::after {
	display: none;
}

.site-footer .footer-widgets-container .inside-footer-widgets > * {
	float: none;
	flex: 1 1 0;
	width: auto;
	padding: 0;
}

/* GeneratePress le mete 40 px de relleno al .widget de dentro con la clase
   inner-padding, y los titulos entraban 40 px respecto al borde de columna. */
.site-footer .footer-widgets-container .widget { padding: 0; }

@media (max-width: 767px) {
	.site-footer .footer-widgets-container .inside-footer-widgets {
		flex-direction: column;
		gap: var(--e-m);
	}
}

.site-footer .widget,
.site-footer .widget p,
.site-footer .widget li,
.site-footer .widget a { font-size: 16px; }

/* Los titulos de columna van a la izquierda. La regla global de h2 los centra
   porque en el cuerpo de la web los titulares de seccion SI van centrados, y
   aqui son encabezados de lista. */
.site-footer .pd-pie__titulo {
	color: #FFFFFF;
	font-size: 17px;
	font-weight: var(--pd-fuerte);
	text-align: left;
	margin-bottom: var(--e-s);
}

.site-footer .wp-block-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--e-2xs);
}

/* La barra de abajo. En swd-new las redes van CENTRADAS y el copyright
   CENTRADO debajo, apilados. GeneratePress la monta como dos bloques a los
   lados, asi que se pasa a columna. */
/* La barra no lleva fondo propio. Lo hereda del pie, que es lo que hace que
   se lea como una pieza y no como dos bloques pegados.
   El filete de separacion si, como en web-jordi. */
.site-info {
	background-color: transparent;
	font-size: 14px;
	text-align: center;
	padding-block: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* column, no column-reverse. En el DOM el widget de redes va primero, asi que
   con reverse el copyright me subia arriba. */
.site-info .inside-site-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-s);
}

.site-info .inside-site-info::before,
.site-info .inside-site-info::after { display: none; }

.site-info .copyright-bar,
.site-info .footer-bar { float: none; width: auto; }
.site-info .widget { margin-bottom: 0; }

/* La fila de redes de la barra de abajo se retiro el 18/09/2026. YouTube y
   Facebook subieron a su propia columna del pie, con su titulo, como el resto.
   Aqui abajo solo queda el copyright. */

/* ==========================================================================
   14 · ESTRUCTURA · lo que hay que domar de GeneratePress
   ========================================================================== */

/* Con one-container el fondo blanco lo pone .site.grid-container, no
   .site-content. El ancho lo controla la rejilla de .entry-content y el
   fondo lo pone cada seccion. */
.page .site.grid-container,
.page .site-content,
.page .inside-article {
	max-width: 100%;
	background-color: transparent;
	padding: 0;
}

.page .site-content .content-area,
.page .entry-content { padding-inline: 0; }

/* Rejilla de tres columnas para el sangrado completo. NO con margin-inline
   y 100vw, que cuenta la barra de scroll y provoca scroll lateral. */
.page .entry-content {
	display: grid;
	grid-template-columns:
		1fr
		min(var(--pd-ancho), calc(100% - var(--margen-lateral) * 2))
		1fr;
}

.page .entry-content > * { grid-column: 2; }

.page .entry-content > .alignfull {
	grid-column: 1 / -1;
	padding-inline: var(--margen-lateral);
	width: auto;
	max-width: none;
	margin-inline: 0;
}

.page .entry-content > .alignfull > * {
	max-width: var(--pd-ancho);
	margin-inline: auto;
}

/* Las tarjetas se montan con el bloque de columnas nativo, asi que la columna
   ES la tarjeta. Nada de display:contents, que saca el elemento del arbol de
   accesibilidad. */
.pd-cols-tarjetas { gap: var(--e-m); align-items: stretch; }

/* Sin filete dorado arriba. La tarjeta se sostiene con el borde fino, el
   radio y la sombra. El acento se queda para los checks y el boton, que es
   donde tiene una funcion. */
.pd-cols-tarjetas > .wp-block-column {
	display: flex;
	flex-direction: column;
	background-color: var(--base-3);
	border: 1px solid var(--base);
	border-radius: var(--pd-radio);
	box-shadow: var(--pd-sombra);
	padding: 26px;
	transition: box-shadow var(--transicion);
}

.pd-cols-tarjetas > .wp-block-column:hover { box-shadow: var(--pd-sombra-alta); }
.pd-cols-tarjetas h3 { color: var(--contrast); }

/* Ritmo interior de la tarjeta.
   Los margenes van con !important y sobre TODOS los hijos porque WordPress
   emite `.wp-block-buttons { margin-bottom: 0 }` y reglas de bloque con mas
   peso, y con margenes normales el boton se subia encima de la ultima linea
   de la lista. Se vio en la captura de Marc a 1540 px. */
.pd-cols-tarjetas > .wp-block-column > * { margin-block: 0; }
.pd-cols-tarjetas > .wp-block-column > * + * { margin-top: var(--e-s) !important; }
.pd-cols-tarjetas > .wp-block-column > .pd-etiqueta + h3 { margin-top: var(--e-2xs) !important; }
.pd-cols-tarjetas > .wp-block-column > .pd-lista { margin-top: var(--e-m) !important; }

/* El boton se pega abajo del todo, asi que dos tarjetas de distinto largo
   tienen la llamada a la accion a la misma altura. */
.pd-cols-tarjetas > .wp-block-column > .wp-block-buttons {
	margin-top: auto !important;
	padding-top: var(--e-m);
}

/* La portada en dos columnas, texto y globo */
.pd-hero__fila {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e-l);
	align-items: center;
}

@media (min-width: 900px) {
	.pd-hero__fila { grid-template-columns: 1.05fr 1fr; gap: var(--e-xl); }
}

/* En la portada el globo NO es una tarjeta. Flota sobre el fondo.
   El lienzo de globe.gl ya es transparente, asi que la caja que se veia eran
   estas tres cosas mias — fondo, radio y sombra. Y overflow visible, o el
   halo de atmosfera se corta en el borde y delata el rectangulo. */
.pd-hero .pd-globo {
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

/* ==========================================================================
   15 · LA BOLA DEL MUNDO
   Portada del tema anterior. Aqui SI lleva radio y sombra, porque en este
   registro las tarjetas los llevan y el globo es una tarjeta mas.
   ========================================================================== */

.pd-globo {
	position: relative;
	overflow: hidden;
	background-color: var(--contrast);
	border-radius: var(--pd-radio);
	box-shadow: var(--pd-sombra-alta);
}

.pd-globo__lienzo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	cursor: grab;
}

.pd-globo__lienzo:active { cursor: grabbing; }
.pd-globo__lienzo.esta-sobre-punto,
.pd-globo__lienzo.esta-sobre-punto:active { cursor: pointer; }
.pd-globo__lienzo canvas { display: block; outline: none; }

.pd-globo__cargando,
.pd-globo noscript p {
	color: var(--apoyo-oscuro);
	font-size: 15px;
	margin: 0;
	padding: var(--e-l);
	text-align: center;
}

.pd-globo__etiqueta {
	background-color: #FFFFFF;
	border-radius: var(--pd-radio-boton);
	color: var(--contrast);
	font-family: var(--pd-fuente);
	font-size: 13px;
	font-weight: var(--pd-medio);
	padding: 6px 12px;
	white-space: nowrap;
}

.pd-globo__ficha {
	position: absolute;
	inset-block-end: var(--e-m);
	inset-inline-start: var(--e-m);
	/* MIN-WIDTH, no solo max. Con un destino de nombre corto —Roatan, Bali—
	   la ficha se encogia a 139 px y el boton de cerrar, que ocupa su esquina,
	   se comia el nombre del pais. */
	min-width: 220px;
	max-width: min(340px, calc(100% - var(--e-l)));
	/* border-box, o el relleno que reserva sitio para el aspa se suma al
	   max-width y la ficha se pasa de largo con un destino de nombre largo. */
	box-sizing: border-box;
	background-color: #FFFFFF;
	border-radius: var(--pd-radio);
	padding: var(--e-m);
	/* Sitio reservado para el aspa. Asi el texto nunca pasa por debajo. */
	padding-inline-end: calc(var(--e-m) + 28px);
	box-shadow: var(--pd-sombra-alta);
	transition: opacity var(--transicion);
}

.pd-globo__ficha[hidden] { display: none; }

.pd-globo__pais {
	color: var(--accent);
	font-size: 13px;
	font-weight: var(--pd-medio);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: var(--e-3xs);
}

.pd-globo__destino {
	color: var(--contrast);
	font-size: 20px;
	font-weight: var(--pd-fuerte);
	line-height: 1.2;
	margin: 0;
}

.pd-globo__foto img {
	aspect-ratio: 3 / 2;
	border-radius: var(--pd-radio-boton);
	margin-top: var(--e-s);
	object-fit: cover;
	width: 100%;
}

/*
 * El aspa.
 *
 * Se resetea ENTERO porque GeneratePress estiliza el elemento `button` con su
 * propio relleno de 10px 20px y su fondo. Con eso el aspa media 53x44 y tapaba
 * el nombre del pais.
 *
 * Mide 28x28 a la vista y el objetivo tactil de 44 se consigue con ::after,
 * que es la tecnica estandar — area de pulsacion grande sin caja grande.
 */
.pd-globo__cerrar {
	position: absolute;
	inset-block-start: var(--e-2xs);
	inset-inline-end: var(--e-2xs);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--contrast-3);
	cursor: pointer;
	font-family: var(--pd-fuente);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	text-shadow: none;
	box-shadow: none;
	transition: background-color var(--transicion), color var(--transicion);
}

/* El area de pulsacion, invisible, centrada y de 44x44. */
.pd-globo__cerrar::after {
	content: "";
	position: absolute;
	inset: -8px;
}

.pd-globo__cerrar:hover,
.pd-globo__cerrar:focus-visible {
	background-color: var(--base);
	color: var(--contrast);
}

/* GeneratePress pinta fondo propio en :hover y :active del boton. */
.pd-globo__cerrar:active { background-color: var(--base); color: var(--contrast); }
.pd-globo__pie { text-align: center; margin-top: var(--e-s); }

/* ==========================================================================
   16 · MOVIMIENTO
   ========================================================================== */

.pd-aparece {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.pd-aparece.pd-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.pd-aparece { opacity: 1; transform: none; }
}

/* ==========================================================================
   17 · EL MENU MOVIL DESLIZANTE
   --------------------------------------------------------------------------
   El panel NO esta hecho a mano. Es el panel lateral de GP Premium, el mismo
   componente y los mismos ajustes que swd-new — `slideout_menu: mobile`,
   estilo `slide`, por la derecha y con el aspa dentro.

   LO QUE EL COMPONENTE TRAE, COMPROBADO CONTRA SU CODIGO Y MIDIENDOLO.
   Mueve el foco al primer enlace al abrir (offside.js:529), cierra con Escape
   y al cerrar con Escape devuelve el foco a la hamburguesa (offside.js:607),
   cierra al tocar el velo, al tocar el aspa y al tocar un enlace.

   LO QUE NO TRAE, Y ANTES AQUI PONIA QUE SI. El foco NO se queda atrapado
   dentro del panel: al llegar al ultimo enlace, el tabulador se escapa a la
   pagina de detras, que sigue estando ahi. Le pasa igual a swd-new — es del
   componente, no de esta web. Medido el 18/09/2026 con eventos de teclado de
   verdad. Queda anotado para que Marc decida si se arregla, porque arreglarlo
   aqui seria separarse de swd-new.

   Abajo va solo lo que el componente no cubre.

   Dos cosas cambian respecto a swd-new, y las dos a proposito.

   El punto de corte se queda en 768 y no en 1024. En swd-new son 1024 porque
   su menu es mas ancho; mover el de David cambiaria CUANDO aparece la
   hamburguesa, y lo que pidio Marc es como se ve, no cuando sale.

   Y la etiqueta «Menu» del boton se vacia a mano en los ajustes. swd-new la
   tiene vacia sola porque va en flexbox y el tema padre se la quita en
   `generate_set_menu_plus_compat_defaults()`; David va en floats, ahi esa
   condicion no se cumple y la palabra salia al lado del icono.

   Medidas tomadas de swd-new el 18/09/2026 — panel de 265 px, relleno
   35/20/32, enlaces de 51 px y velo al 60 %.
   ========================================================================== */

/* --- La hamburguesa ------------------------------------------------------- */

/* GeneratePress trae el icono en SVG. Se esconde y se dibujan tres barras — la
   del medio es el propio span y las otras dos salen de sus pseudoelementos.
   Asi no hay que tocar el marcado del tema padre.

   ANTES ERA LA PALABRA «Menu» dentro de un boton de 110x120. El boton era el
   elemento mas alto de la cabecera y se la llevaba a 156 px de alto.

   EL LIMITE ES 1024, NO 768, y tiene que coincidir con
   `mobile_menu_breakpoint` de los ajustes. Con 768 aqui y 1024 alli, entre
   esos dos anchos salia la hamburguesa del tema padre con su SVG a la vista y
   sin las barras dibujadas — dos iconos distintos segun el ancho. */
@media (max-width: 1024px) {

	.main-navigation .menu-toggle {
		position: relative;
		width: 44px;
		height: 44px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		-webkit-tap-highlight-color: transparent;
	}

	/* El SVG del tema padre, fuera. Con menos peso que esto ganaba su regla de
	   cerrar, que enseña el aspa cuando el menu esta abierto, y se veia cruzada
	   con las barras. */
	.site-header .main-navigation .menu-toggle .gp-icon svg {
		display: none;
	}

	.main-navigation .menu-toggle .gp-icon {
		position: relative;
		display: block;
		width: 24px;
		height: 2px;
		border-radius: 2px;
		background-color: #FFFFFF;
		transition: background-color var(--transicion);
	}

	.main-navigation .menu-toggle .gp-icon::before,
	.main-navigation .menu-toggle .gp-icon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 24px;
		height: 2px;
		border-radius: 2px;
		background-color: #FFFFFF;
	}

	.main-navigation .menu-toggle .gp-icon::before { top: -8px; }
	.main-navigation .menu-toggle .gp-icon::after  { top: 8px; }

	/* Sin animacion de barras a aspa. Con el panel abierto la cabecera queda
	   debajo del velo y esa transicion no se llega a ver nunca. El aspa que si
	   se ve es la del panel. */

	.main-navigation .menu-toggle:focus-visible {
		outline: 2px solid #FFFFFF;
		outline-offset: 2px;
	}
}

/* --- El aire de dentro del panel ------------------------------------------- */

/* GP pinta el fondo, los colores y el ancho. Lo que no da es el respiro: sin
   esto los enlaces salen pegados al canto izquierdo.

   El relleno de arriba esta calculado, no elegido. Deja el centro del aspa a
   la misma altura a la que estaba el centro de la hamburguesa que se acaba de
   pulsar, asi que el aspa aparece donde ya esta el dedo. */
.slideout-navigation.main-navigation .inside-navigation {
	display: block;
	padding: 35px var(--margen-lateral) 32px;
	max-width: none;
}

/* La barra de administracion de WordPress mide 46 px en movil y el panel va
   fijo al viewport, asi que sin esto el aspa se le mete debajo. */
.admin-bar .slideout-navigation.main-navigation .inside-navigation {
	padding-top: calc(35px + 46px);
}

/* El aire entre el aspa y el primer enlace. Va en el bloque del menu y no como
   margen del boton, para que el boton siga siendo un objetivo de 22 px y no una
   franja pulsable que llegue hasta el primer enlace. */
.slideout-navigation.main-navigation .main-nav {
	margin-top: 28px;
	margin-bottom: 0;
}

/* --- Los enlaces ----------------------------------------------------------- */

/* La lista pasa a flex para que los dos enlaces de idioma queden en fila al
   final. Todo lo demas ocupa la linea entera. */
.slideout-navigation.main-navigation .main-nav > ul {
	display: flex;
	flex-wrap: wrap;
}

.slideout-navigation.main-navigation .main-nav > ul > li {
	flex: 0 0 100%;
}

.slideout-navigation.main-navigation .main-nav > ul > li > a {
	display: block;
	padding: 0.85rem 0;
	line-height: 1.4;
	font-size: 17px;
	font-weight: var(--pd-medio);
	text-align: left;
}

/* Sin filetes entre enlaces. Con cuatro, las lineas hacian mas ruido que
   trabajo — el hueco ya separa de sobra. */

.slideout-navigation.main-navigation .main-nav ul li a:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
	border-radius: 3px;
}

/* --- El boton de accion ----------------------------------------------------- */

/* Deja de ser un enlace mas y baja al final como boton a todo el ancho. Es la
   unica accion del panel, asi que tiene que verse como tal.

   Va con !important a regañadientes: GP escribe los colores del panel como CSS
   en linea en el <head>, y eso se pone por delante de la hoja del tema hijo con
   la misma especificidad. */
.slideout-navigation.main-navigation .main-nav > ul > li.pd-cta {
	margin-top: 28px;
}

.slideout-navigation.main-navigation .main-nav > ul > li.pd-cta > a,
.slideout-navigation.main-navigation .main-nav > ul > li.pd-cta:hover > a,
.slideout-navigation.main-navigation .main-nav > ul > li.pd-cta.current-menu-item > a {
	padding: 0.9rem 1.2rem;

	/* En la cabecera el boton va separado del ultimo enlace por la izquierda.
	   Aqui es un bloque a todo el ancho y ese margen lo descentraba. */
	margin-inline-start: 0;

	background-color: var(--accent) !important;
	border-radius: var(--pd-radio-boton);
	color: #FFFFFF !important;
	font-weight: var(--pd-fuerte);
	line-height: 1.4;
	text-align: center;
}

.slideout-navigation.main-navigation .main-nav > ul > li.pd-cta:hover > a {
	background-color: #FFFFFF !important;
	color: var(--contrast) !important;
}

/* --- El cambio de idioma ---------------------------------------------------- */

/* En fila y al final, debajo del boton. Son dos enlaces de dos letras; en
   vertical y a todo el ancho parecian dos secciones mas del menu. */
/* Va con el ID a proposito. offside.css trae
   `#generate-slideout-menu .slideout-menu li { width: 100% }`, y con un ID
   dentro gana a cualquier selector de clases por muchas que le ponga — los dos
   idiomas salian uno debajo de otro y el segundo se salia del panel 16 px por
   la derecha. Con el mismo ID delante empatan en ID y decide la clase de mas. */
#generate-slideout-menu .main-nav > ul > li.pd-idioma {
	flex: 0 0 auto;
	width: auto;
}

.slideout-navigation.main-navigation .main-nav > ul > li.pd-cta + li.pd-idioma {
	margin-top: var(--e-m);
}

.slideout-navigation.main-navigation .main-nav > ul > li.pd-idioma + li.pd-idioma {
	margin-top: var(--e-m);
	margin-inline-start: var(--e-s);
}

/* 44x44 de area de pulsacion. Son dos letras, asi que sin el min-width se
   quedaban en 37 y 35 px de ancho — legibles, pero por debajo del objetivo que
   lleva el resto de la web. */
.slideout-navigation.main-navigation .main-nav > ul > li.pd-idioma > a {
	font-size: 13px;
	font-weight: var(--pd-fuerte);
	letter-spacing: 0.06em;
	padding: 0.85rem 8px;
	min-width: 44px;
	text-align: center;
	color: var(--apoyo-oscuro) !important;
}

.slideout-navigation.main-navigation .main-nav > ul > li.pd-idioma--activo > a {
	color: var(--accent-claro) !important;
}

/* --- El velo ----------------------------------------------------------------- */

/* Translucido, para que la web se siga viendo detras — se ve donde estabas.
   GP lo trae en negro al 80 %. Aqui va el azul noche de la casa al 60 %, que es
   el mismo criterio que swd-new con su azul.

   Va con el selector repetido a proposito. offside.css se encola despues de la
   hoja del tema hijo, asi que con un solo .slideout-overlay ganaba el suyo por
   orden de carga. Repetir la clase sube la especificidad sin !important. */
.slideout-overlay.slideout-overlay {
	background-color: rgba(10, 28, 43, 0.6);
}

/* --- El aspa ------------------------------------------------------------------ */

/* Dentro del panel y arriba a la derecha, que es justo donde estaba la
   hamburguesa que acabas de pulsar. Se cambia en Personalizar -> Menus, ajuste
   «Close Button» a «Inside». */
.slideout-navigation.main-navigation button.slideout-exit {
	width: 100%;
	padding: 0;
	text-align: right;
	line-height: 1;
	color: #FFFFFF;
	cursor: pointer;
}

.slideout-navigation.main-navigation button.slideout-exit svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.slideout-navigation.main-navigation button.slideout-exit:hover {
	color: var(--accent-claro);
}

.slideout-navigation.main-navigation button.slideout-exit:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 4px;
	border-radius: 3px;
}

/* Con el panel abierto el fondo no se mueve. Si no, se desplaza la pagina de
   detras y al cerrar apareces en otro sitio.

   SOLO EN EL CUERPO, NUNCA EN EL HTML. offside.js pone la clase en los dos.
   Con la barra de administracion, WordPress le mete al html un margin-top de
   46 px, y al pasar el html a overflow: hidden la pagina entera baja otros 46
   al abrir el menu — la cabecera da un tiron cada vez. Y es redundante: cuando
   el cuerpo declara overflow y la raiz no, el valor se propaga a la ventana. */
body.slide-opened {
	overflow: hidden;
}

/* Quien pide menos movimiento no lo tiene. El panel aparece y desaparece. */
@media (prefers-reduced-motion: reduce) {
	.offside-js--interact .offside,
	.offside-js--interact .offside-sliding-element,
	.slideout-overlay {
		transition: none;
	}
}