/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ==================================================================
   Mediterranea Reformes

   Tipografia. Figtree lleva el peso. Fraunces aparece solo en tres
   sitios — el nombre de la marca, la segunda linea del H1 y los
   numeros del proceso.

   Color. Los siete tokens globales de GeneratePress, para que el
   cliente pueda recolorear desde el personalizador.
   ================================================================== */

/* ==================================================================
   TIPOGRAFIAS AUTOALOJADAS

   Los cuatro ficheros viven en `fuentes/` dentro de este tema hijo,
   que es lo que recomienda la documentacion de GeneratePress en
   «Adding Local Fonts». Ya no se pide nada a fonts.googleapis.com.

   Las dos familias son VARIABLES, asi que un solo fichero por
   subconjunto cubre todos los pesos. De ahi el rango en `font-weight`.

   Los `unicode-range` son los que sirve Google para latin y latin-ext,
   copiados tal cual. Sin ellos el navegador descarga los dos ficheros
   siempre, en vez de solo el que necesita.
   ================================================================== */

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("fuentes/figtree-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: "Figtree";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("fuentes/figtree-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-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fuentes/fraunces-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: "Fraunces";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fuentes/fraunces-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-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

:root {
	--wj-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--wj-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--wj-cab: 4.25rem;
}

body {
	font-family: var(--wj-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--contrast);
	background-color: var(--base-3);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
	overflow-wrap: break-word;
	hyphens: none;
}

/* ==================================================================
   CABECERA
   Marca y descriptor forman un solo bloque con un filete de acento,
   no dos textos sueltos en extremos opuestos.
   ================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.97);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--contrast-3);
}

/**
 * La cabecera tiene que empezar EXACTAMENTE donde empieza el contenido.
 *
 * GeneratePress le pone a `.inside-header` un `max-width` de 1100 px con
 * 40 px de relleno y en `content-box`, mientras las secciones usan un
 * contenedor de 1180 px. Ademas la marca y el menu se quedaban centrados en
 * vez de pegados a los bordes.
 *
 * El `calc(1180px + 3rem)` en `border-box` deja la caja interior en 1180 px
 * exactos, y los margenes automaticos empujan marca y menu a cada extremo
 * pase lo que pase.
 */
.site-header .inside-header {
	display: flex;
	align-items: center;
	/* `flex-start` mas un margen automatico en la marca. Asi el reparto no
	   depende de que `justify-content` gane la pelea contra el tema. */
	justify-content: flex-start;
	gap: 1.5rem;
	box-sizing: border-box;
	max-width: calc(1180px + 3rem);
	padding: 0 1.5rem;
	min-height: var(--wj-cab);
}

/* GeneratePress usa pseudoelementos de limpieza de flotantes en el
   contenedor. Dentro de un flex CUENTAN COMO ITEM, y aunque no ocupan ancho
   se comen un `gap` entero — que es justo el desplazamiento que separaba la
   marca del borde del contenido. */
.site-header .inside-header::before,
.site-header .inside-header::after {
	display: none;
}

/* UN SOLO margen automatico, el de la derecha de la marca. Se come todo el
   hueco libre y empuja el menu al final. Con un `auto` a cada lado el hueco
   se reparte y el grupo queda centrado, que era el fallo. */
/* Con selector de ID porque GeneratePress le pone a `.site-branding` un
   `margin-bottom` de 20 px que ganaba a mi regla de clases. Ese margen contaba
   dentro del centrado del flex y dejaba la marca 10 px mas arriba que la
   hamburguesa. */
#masthead .site-branding {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	padding: 0;
	margin: 0 auto 0 0;
	float: none;
	text-align: left;
}

.site-header .main-navigation {
	float: none;
	margin: 0;
	width: auto;
}

.site-header .main-navigation .inside-navigation {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	margin: 0;
}

.site-title,
.main-title,
.site-title a,
.main-title a {
	font-family: var(--wj-serif);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--contrast);
	white-space: nowrap;
}

.site-description {
	position: relative;
	/* La marca va apilada — nombre arriba y descriptor debajo. Estos 3 px
	   separan las dos lineas sin tocar nada mas. */
	margin: 3px 0 0;
	padding-left: 0.85rem;
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	color: var(--contrast-2);
	width: 15.5rem;
	max-width: 15.5rem;
}

/* Por debajo de 1180 no cabe sin partirse fatal, asi que desaparece. */
@media (max-width: 1180px) {
	.site-description {
		display: none;
	}
}

.site-description::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 1.9rem;
	background: var(--accent);
}

/* Navegacion con subrayado que crece desde la izquierda. */
.main-navigation,
.main-navigation .inside-navigation {
	background-color: transparent;
}

/* Solo en escritorio. Por debajo manda GeneratePress, que oculta la lista
   hasta que se pulsa el boton. Tocar `display` aqui abria el menu siempre. */
@media (min-width: 901px) {
	.main-navigation .main-nav > ul {
		display: flex;
		align-items: center;
		gap: 0.35rem;
	}
}

.main-navigation .main-nav > ul > li > a {
	position: relative;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--contrast);
	padding: 0 0.7rem;
	line-height: var(--wj-cab);
}

.main-navigation .main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	bottom: 1.35rem;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.24s ease;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a {
	color: var(--accent);
	background-color: transparent;
}

.main-navigation .main-nav > ul > li > a:hover::after {
	transform: scaleX(1);
}

/* Cabecera en movil. */
@media (max-width: 900px) {
	:root {
		--wj-cab: 3.5rem;
	}

	.site-header .inside-header {
		flex-wrap: nowrap;
		gap: 0.75rem;
		/* Las secciones bajan a 1,25rem de margen lateral a partir de aqui,
		   asi que la cabecera hace lo mismo para seguir alineada. */
		max-width: none;
		padding: 0 1.25rem;
	}

	.site-description {
		display: none;
	}

	.main-navigation .menu-toggle {
		padding: 0;
		line-height: var(--wj-cab);
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--contrast);
	}

	/* El enlace del logo medía 24 px de alto, por debajo del objetivo táctil
	   mínimo. Crece la zona pulsable sin cambiar el tamaño del texto. */
	.site-header .main-title a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.main-navigation .main-nav > ul > li > a {
		line-height: 1.4;
		padding: 0.8rem 1.25rem;
		font-size: 0.9375rem;
	}

	.main-navigation .main-nav > ul {
		background: var(--base-3);
		border-top: 1px solid var(--contrast-3);
	}

	.main-navigation .main-nav > ul > li > a::after {
		display: none;
	}
}

/* ==================================================================
   LIENZO DE LA LANDING
   ================================================================== */

.page-template-default .site-content,
.page-template-default .content-area,
.page-template-default .entry-content {
	margin: 0;
	padding: 0;
}

/* Sin esto los bloques calculan en `content-box` y el padding lateral de cada
   seccion se SUMA al ancho, lo que sacaba 48 px de barra horizontal en toda
   la pagina. */
.entry-content .gb-element,
.entry-content .gb-element::before,
.entry-content .gb-element::after {
	box-sizing: border-box;
}

.entry-content > .gb-element {
	width: 100%;
}

.entry-content .wp-block-image {
	margin: 0;
	line-height: 0;
}

.entry-content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* OJO. Aqui habia un `.entry-content figure{margin:0}` y anulaba por
   especificidad (0,1,1) los margenes que cada bloque se pone a si mismo con
   `.gb-element-xxx` (0,1,0). Se cargaba el desfase de la galeria. Cada figura
   de GenerateBlocks ya trae su propio margen, asi que no hace falta. */
.entry-content figure:not([class*="gb-element-"]) {
	margin: 0;
}

.wp-block-video {
	margin: 0;
}

.wp-block-video video {
	display: block;
	width: 100%;
	height: auto;
	background: var(--contrast);
}

.site-footer:empty {
	display: none;
}

/* ==================================================================
   FORMULARIO
   CF7 gratuito, pero presentado a mano. Sin caja, campos rellenos,
   foco evidente y casilla dibujada.
   ================================================================== */

.wpcf7 {
	font-size: 0.9375rem;
}

.wpcf7 form > p:first-child,
.wpcf7 form > div:first-child {
	margin-top: 0;
}

.wj-form-fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

@media (max-width: 560px) {
	.wj-form-fila {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.wpcf7 .wj-campo {
	margin: 0 0 1rem;
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

/* CF7 deja un <br> suelto al final de cada linea de la plantilla. */
.wpcf7 .wj-campo br,
.wpcf7 .wj-consent br,
.wpcf7 .wj-enviar br {
	display: none;
}

.wpcf7 label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--contrast-2);
	margin-bottom: 0.45rem;
}

.wj-req {
	color: var(--accent);
}

.wj-opcional {
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--contrast-3);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	width: 100%;
	font-family: var(--wj-sans);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--contrast);
	background: var(--base-2);
	border: 1px solid var(--contrast-3);
	border-radius: 2px;
	padding: 0.72rem 0.85rem;
	box-sizing: border-box;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.wpcf7 textarea {
	resize: vertical;
	min-height: 6rem;
}

.wpcf7 input:hover,
.wpcf7 textarea:hover {
	border-color: var(--contrast-2);
}

.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* --- Casilla de consentimiento dibujada a mano --- */

.wpcf7 .wj-consent {
	margin: 0.25rem 0 1.25rem;
}

.wpcf7 .wj-consent .wpcf7-list-item {
	margin: 0;
}

/*
 * El area pulsable es la etiqueta entera, no solo la casilla. En escritorio
 * medía 20 px de alto y el minimo de WCAG 2.2 son 24. El relleno la sube a 24
 * y el margen negativo devuelve la casilla a su sitio, asi que no se mueve
 * nada de lo aprobado.
 */
.wpcf7 .wj-consent label {
	display: flex;
	align-items: flex-start;
	min-height: 1.5rem;
	padding-top: 2px;
	margin-top: -2px;
	gap: 0.65rem;
	font-size: 0.8125rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--contrast-2);
	margin: 0;
	cursor: pointer;
	line-height: 1.5;
}

.wpcf7 .wj-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.1rem 0 0;
	border: 1px solid var(--contrast-3);
	border-radius: 2px;
	background: var(--base-2);
	cursor: pointer;
	transition: background-color 0.16s ease, border-color 0.16s ease;
}

.wpcf7 .wj-consent input[type="checkbox"]:checked {
	background-color: var(--accent);
	border-color: var(--accent);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
	background-size: 76%;
	background-position: center;
	background-repeat: no-repeat;
}

.wpcf7 .wj-consent input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* --- Boton --- */

.wpcf7 .wj-enviar {
	margin: 0;
	position: relative;
}

.wpcf7 input[type="submit"] {
	font-family: var(--wj-sans);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--base-3);
	background: var(--accent);
	border: 0;
	border-radius: 2px;
	padding: 0.85rem 1.5rem;
	cursor: pointer;
	width: 100%;
	transition: transform 0.18s ease, background-color 0.18s ease;
}

.wpcf7 input[type="submit"]:hover {
	background: #9c4d2e;
	transform: translateY(-2px);
}

.wpcf7 input[type="submit"]:focus-visible {
	outline: 3px solid var(--base-3);
	outline-offset: 2px;
}

/* --- Estados --- */

.wpcf7 .wpcf7-not-valid {
	border-color: #d1584f;
	background: #fdf3f2;
}

.wpcf7-not-valid-tip {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #d1584f;
	margin-top: 0.3rem;
	letter-spacing: 0;
	text-transform: none;
}

.wpcf7 form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 0.9rem;
	font-size: 0.875rem;
	line-height: 1.5;
	border-width: 1px;
	border-radius: 2px;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--contrast);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #d1584f;
	background: rgba(209, 88, 79, 0.1);
	color: #d1584f;
}

.wpcf7-spinner {
	margin-left: 0.5rem;
}

/* --- El mismo formulario sobre el fondo oscuro de Contacto --- */

.gb-element-wjContB .wpcf7 label {
	color: rgba(255, 255, 255, 0.62);
}

.gb-element-wjContB .wpcf7 .wj-opcional {
	color: rgba(255, 255, 255, 0.4);
}

.gb-element-wjContB .wpcf7 input[type="text"],
.gb-element-wjContB .wpcf7 input[type="tel"],
.gb-element-wjContB .wpcf7 input[type="email"],
.gb-element-wjContB .wpcf7 textarea {
	color: var(--base-3);
	background: rgba(255, 255, 255, 0.055);
	border-color: rgba(255, 255, 255, 0.2);
}

.gb-element-wjContB .wpcf7 input::placeholder,
.gb-element-wjContB .wpcf7 textarea::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.gb-element-wjContB .wpcf7 input:hover,
.gb-element-wjContB .wpcf7 textarea:hover {
	border-color: rgba(255, 255, 255, 0.4);
}

.gb-element-wjContB .wpcf7 input:focus-visible,
.gb-element-wjContB .wpcf7 textarea:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
}

.gb-element-wjContB .wpcf7 .wj-consent label {
	color: rgba(255, 255, 255, 0.7);
}

/*
 * El enlace a la politica de privacidad, dentro de la casilla.
 *
 * Sin esto sale con el azul por defecto de WordPress, que sobre el fondo
 * oscuro de la seccion de contacto da 2,88:1 — por debajo del minimo. En
 * blanco da 14:1. El subrayado es lo que lo identifica como enlace, porque
 * aqui el color no puede hacer ese trabajo.
 */
.gb-element-wjContB .wpcf7 .wj-consent label a {
	color: var(--base-3);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: text-decoration-thickness 0.15s ease;
}

.gb-element-wjContB .wpcf7 .wj-consent label a:hover,
.gb-element-wjContB .wpcf7 .wj-consent label a:focus-visible {
	text-decoration-thickness: 2px;
}

.gb-element-wjContB .wpcf7 .wj-consent label a:focus-visible {
	outline: 2px solid var(--base-3);
	outline-offset: 2px;
}

.gb-element-wjContB .wpcf7 .wj-consent input[type="checkbox"] {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.28);
}

.gb-element-wjContB .wpcf7 .wj-consent input[type="checkbox"]:checked {
	background-color: var(--accent);
	border-color: var(--accent);
}

.gb-element-wjContB .wpcf7 .wpcf7-not-valid {
	background: rgba(209, 88, 79, 0.14);
	border-color: #e08c85;
}

.gb-element-wjContB .wpcf7-not-valid-tip {
	color: #f0a9a2;
}

.gb-element-wjContB .wpcf7 form.sent .wpcf7-response-output {
	color: var(--base-3);
}

/* ==================================================================
   ACCESIBILIDAD Y MOVIMIENTO
   ================================================================== */

.gb-text:focus-visible,
.entry-content a:focus-visible,
.site-header a:focus-visible,
.main-navigation a:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

.gb-element-wjObras a:focus-visible,
.gb-element-wjContacto a:focus-visible,
.gb-element-wjPie a:focus-visible,
.gb-element-wjEstiloPanel a:focus-visible {
	outline-color: var(--base-3);
}

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

html {
	scroll-behavior: smooth;
	/* La cabecera fija mide algo mas que `--wj-cab` por el contenido, asi que
	   el salto de ancla dejaba los primeros pixeles de la seccion tapados.
	   El rem extra cubre esa diferencia y deja algo de aire. */
	scroll-padding-top: calc(var(--wj-cab) + 1rem);
}

/* ==================================================================
   PIE DE TRES COLUMNAS
   Mismo esquema que swd-new — columnas de widgets arriba y barra de
   identificacion legal debajo. Aqui se pinta con CSS y no con los
   ajustes de color de GeneratePress, porque esos no aceptan las
   variables de la paleta.
   ================================================================== */

.site-footer {
	background-color: var(--contrast);
}

/* Contacto y el pie comparten fondo, asi que sin este filete se leian como
   un solo bloque. Es el mismo grosor y el mismo tono que el de la barra de
   copyright, para que las dos lineas del pie sean la misma linea.
   El relleno vertical esta en la regla `#footer-widgets` de mas abajo. */
.site-footer .footer-widgets {
	background-color: var(--contrast);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Mismo tratamiento que la cabecera. El contenedor con el ancho maximo es
   `.footer-widgets-container`, que GeneratePress declara en `content-box` con
   40 px de relleno. Las columnas ademas usan su rejilla flotante (`grid-33`)
   y el widget lleva su `inner-padding`. Sin desmontar las tres cosas el pie
   no alineaba con el contenido ni por la izquierda ni por la derecha. */
/* Con selector de ID porque las reglas de la rejilla de GeneratePress son de
   clase y ganaban por orden de carga. `#footer-widgets` trae 40 px de relleno
   propio y la fila un `margin-left` de -40 px para compensar el canalon de sus
   columnas. Las dos cosas hay que quitarlas. */
/* El relleno vertical va AQUI, no en `.site-footer .footer-widgets`. Es el
   mismo elemento, y este selector de ID se lo comia con un `padding: 0`, que
   dejaba las tres columnas pegadas a los dos filetes. Los laterales si van a
   cero porque de eso se encarga el contenedor de dentro. */
#footer-widgets {
	padding: 4.25rem 0 3.75rem;
}

#footer-widgets .footer-widgets-container {
	box-sizing: border-box;
	max-width: calc(1180px + 3rem);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Texto a la izquierda dentro de cada columna y el bloque de las tres
   centrado. Las columnas llevan anchura propia en vez de ceñirse a su texto,
   porque si no quedan apelotonadas — los tres textos son cortos y sumaban
   menos de la mitad del contenedor. */
#footer-widgets .inside-footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 220px));
	justify-content: center;
	column-gap: clamp(2.5rem, 6vw, 7rem);
	row-gap: 2rem;
	margin: 0;
	text-align: left;
}

.site-footer .inside-footer-widgets::before,
.site-footer .inside-footer-widgets::after,
.site-footer .footer-widgets-container::before,
.site-footer .footer-widgets-container::after {
	display: none;
}

.site-footer [class*="footer-widget-"] {
	width: auto;
	max-width: none;
	float: none;
	padding: 0;
	margin: 0;
}

.site-footer .widget,
.site-footer .widget.inner-padding {
	margin: 0;
	padding: 0;
	font-size: inherit;
}

.wj-pie__titulo {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.005em;
	color: var(--base-3);
	margin: 0 0 0.75rem;
}

.wj-pie__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	line-height: 1.95;
	color: var(--base);
}

.wj-pie__lista li {
	margin: 0;
}

.wj-pie__lista a {
	position: relative;
	color: var(--base);
	text-decoration: none;
}

/* Subrayado que crece al pasar por encima, igual que en la navegacion. */
.wj-pie__lista a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background-color: var(--base-3);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease;
}

.wj-pie__lista a:hover,
.wj-pie__lista a:focus-visible {
	color: var(--base-3);
}

.wj-pie__lista a:hover::after,
.wj-pie__lista a:focus-visible::after {
	transform: scaleX(1);
}

.wj-pie__lista a:focus-visible {
	outline: 2px solid var(--base-3);
	outline-offset: 3px;
}

/* --- Barra inferior --- */

.site-info {
	background-color: var(--contrast);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--contrast-3);
	font-size: 0.75rem;
	padding: 0;
}

.site-info .inside-site-info {
	box-sizing: border-box;
	max-width: calc(1180px + 3rem);
	margin: 0 auto;
	padding: 1.1rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

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

.wj-copy {
	color: var(--contrast-3);
	letter-spacing: 0.01em;
}

@media (max-width: 768px) {
	#footer-widgets {
		padding-top: 3rem;
		padding-bottom: 2.75rem;
	}

	#footer-widgets .footer-widgets-container {
		max-width: none;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	#footer-widgets .inside-footer-widgets {
		grid-template-columns: 1fr;
		justify-content: stretch;
		column-gap: 0;
		row-gap: 1.75rem;
	}

	/* En tactil el :hover se queda pegado tras tocar y dejaba una raya en el
	   ultimo enlace pulsado hasta recargar. */
	.wj-pie__lista a::after {
		display: none;
	}

	.site-info .inside-site-info {
		max-width: none;
		padding: 1rem 1.25rem;
	}
}

/* ==================================================================
   MENU MOVIL DESLIZANTE
   Es el panel lateral de GP Premium, no un guion propio. Trae el foco
   atrapado dentro, lo devuelve al boton al cerrar y gestiona el velo.
   Aqui solo va lo que el componente no cubre — la hamburguesa dibujada,
   el aire de dentro y los colores.
   ================================================================== */

@media (max-width: 900px) {
	/* Con `.menu-toggle` a secas perdia contra la regla de dos clases del
	   tema y el boton se quedaba en 22 px de ancho. */
	.site-header .main-navigation .menu-toggle {
		position: relative;
		width: 44px;
		height: 44px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		line-height: 1;
		-webkit-tap-highlight-color: transparent;
	}

	/* Los dos SVG del tema padre, fuera. Se dibujan tres barras — el propio
	   icono es la del medio y las otras dos salen de sus pseudoelementos. */
	.site-header .menu-toggle .gp-icon.icon-menu-bars svg {
		display: none;
	}

	.site-header .main-navigation .menu-toggle .gp-icon {
		position: relative;
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background-color: var(--contrast);
		transition: background-color 0.2s ease;
	}

	.site-header .main-navigation .menu-toggle .gp-icon::before,
	.site-header .main-navigation .menu-toggle .gp-icon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background-color: var(--contrast);
	}

	.site-header .main-navigation .menu-toggle .gp-icon::before {
		top: -7px;
	}

	.site-header .main-navigation .menu-toggle .gp-icon::after {
		top: 7px;
	}

	.site-header .main-navigation .menu-toggle:focus-visible {
		outline: 3px solid var(--accent);
		outline-offset: 2px;
	}

	/* El texto «Menú» ya no hace falta, la hamburguesa lo dice. */
	.menu-toggle .mobile-menu {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

.slideout-navigation.main-navigation {
	background-color: var(--contrast);
}

.slideout-navigation.main-navigation .inside-navigation {
	display: block;
	max-width: none;
	padding: 2.1875rem 1.5rem 2rem;
	margin: 0;
}

.admin-bar .slideout-navigation.main-navigation .inside-navigation {
	padding-top: calc(2.1875rem + 32px);
}

.slideout-navigation.main-navigation .main-nav {
	margin-top: 1.75rem;
	margin-bottom: 0;
	background: none;
	border: 0;
}

.slideout-navigation.main-navigation .main-nav > ul {
	display: block;
	background: none;
	border: 0;
}

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

.slideout-navigation.main-navigation .main-nav > ul > li > a::after {
	display: none;
}

.slideout-navigation.main-navigation .main-nav > ul > li > a:hover,
.slideout-navigation.main-navigation .main-nav > ul > li.current-menu-item > a {
	color: var(--base-3);
	background: none;
}

.slideout-navigation.main-navigation .main-nav ul li a:focus-visible {
	outline: 2px solid var(--base-3);
	outline-offset: 2px;
}

.slideout-navigation.main-navigation button.slideout-exit {
	color: var(--base);
	padding: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

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

.slideout-navigation.main-navigation button.slideout-exit:focus-visible {
	outline: 2px solid var(--base-3);
	outline-offset: 2px;
}

/* GeneratePress declara su velo con un solo `.slideout-overlay`, asi que con
   la misma especificidad ganaba el suyo por orden de carga. */
.slideout-overlay.slideout-overlay {
	background-color: rgba(46, 42, 38, 0.55);
}

/* ==================================================================
   MARCADOR DE DATO PENDIENTE
   Esta regla y las marcas del contenido se quitan antes de publicar.
   ================================================================== */

.wj-pendiente {
	display: inline-block;
	background: #fff3cd;
	color: #6b4e00;
	border: 1px dashed #b8860b;
	border-radius: 2px;
	padding: 0.08em 0.4em;
	margin-right: 0.3em;
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
}

/* ==========================================================================
   Paginas legales — aviso legal, privacidad y cookies
   La clase wj-legal la pone functions.php, por slug.
   ========================================================================== */

/*
 * Nada de fondo de color aqui. `#page` lleva un `max-width` de 1100 px de
 * GeneratePress y `.inside-article` va en blanco encima, asi que un fondo en
 * `.site-content` salia como una banda crema que no llegaba a los bordes. El
 * blanco es lo correcto — el color lo lleva la portada, no un texto legal.
 */
.wj-legal .entry-header,
.wj-legal .entry-content {
	/* 68ch en Figtree a 16 px son unos 600 px. Sin esto la linea medía 99
	   caracteres, que para un texto legal es ilegible. */
	max-width: 68ch;
	margin-left: auto;
	margin-right: auto;
}

.wj-legal .inside-article {
	padding-top: 3.5rem;
	padding-bottom: 4rem;
}

.wj-legal .entry-header {
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--contrast-3);
}

.wj-legal .entry-title {
	font-family: var(--wj-sans);
	font-size: clamp(1.75rem, 3.4vw, 2.35rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.028em;
	color: var(--contrast);
	margin: 0;
}

.wj-legal .entry-content h2 {
	font-family: var(--wj-sans);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--contrast);
	margin: 2.75rem 0 0.85rem;
}

.wj-legal .entry-content h2:first-child {
	margin-top: 0;
}

.wj-legal .entry-content p {
	font-size: 0.9375rem;
	line-height: 1.72;
	color: var(--contrast-2);
	margin: 0 0 1.05rem;
}

.wj-legal .entry-content a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wj-legal .entry-content a:hover {
	color: var(--contrast);
}

/* --- El bloque de datos identificativos --- */

.wj-legal .wj-legal__datos {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 1.25rem 1.4rem;
	background-color: var(--base-3);
	border-left: 2px solid var(--accent);
}

.wj-legal .wj-legal__datos li {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--contrast-2);
	margin: 0 0 0.4rem;
}

.wj-legal .wj-legal__datos li:last-child {
	margin-bottom: 0;
}

.wj-legal .wj-legal__datos strong {
	color: var(--contrast);
	font-weight: 700;
}

@media (max-width: 768px) {
	.wj-legal .inside-article {
		padding-top: 2.25rem;
		padding-bottom: 2.75rem;
	}

	.wj-legal .entry-header {
		margin-bottom: 1.75rem;
	}

	.wj-legal .entry-content h2 {
		margin-top: 2.25rem;
	}

	.wj-legal .wj-legal__datos {
		padding: 1rem 1.1rem;
	}
}