/*
Theme Name: Magma
Theme URI: https://www.tagoror.com
Author: Tagoror Networks
Author URI: https://www.tagoror.com
Description: Theme for IT services companies and technology businesses: services with icons, the sectors you work with, figures, an about us section, contact with information cards and a front page ready for an image. Designed to pass accessibility audits: guaranteed contrast, correct heading order and a space for the Kit Digital funding logos.
Version: 0.1.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: magma
Update URI: https://licencias.tagoror.com/magma
Tags: business, blog, one-column, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, sticky-post, threaded-comments, translation-ready, block-patterns, block-styles, wide-blocks, editor-style
*/

/* ------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */

:root {
	--fondo: #f7f8f8;
	--texto: #1c2226;
	--secundario: #5f686e;
	--linea: #dde1e3;
	--borde-campo: #7b858b;
	--superficie: #eceff0;
	--error: #a4262c;
	--acento: #1f5c73; /* la paleta y el Personalizador lo sustituyen */
	--enlace: var(--acento);

	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052, "Book Antiqua", Charter, "Bitstream Charter", Georgia, serif;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", "Helvetica Neue", Arial, sans-serif;
	--fuente-titulos: var(--serif); /* según la tipografía elegida */
	--fuente-texto: var(--serif);
	--peso-titulos: 400;
	--ajuste-texto: 1; /* las fuentes sin serifa se ven más grandes: se reducen un poco */
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--ancho: 68rem;
	--lectura: 40rem;
	--margen: clamp(1.25rem, 4vw, 3rem);
	--espacio: clamp(3.5rem, 9vw, 7rem);
	--radio: 3px;
}

/*
 * Modo oscuro: el del dispositivo, salvo que el visitante elija otro con el
 * botón de la cabecera (atributo data-modo en <html>).
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-modo="claro"]) {
		--fondo: #14181b;
		--texto: #e4e8ea;
		--secundario: #9aa4aa;
		--linea: #2a3136;
		--borde-campo: #66727a;
		--superficie: #1d2327;
		--error: #f2a8a4;
		--enlace: #86b9cc;
		--enlace: color-mix(in srgb, var(--acento) 45%, #ffffff);
		color-scheme: dark;
	}
}

:root[data-modo="oscuro"] {
	--fondo: #14181b;
	--texto: #e4e8ea;
	--secundario: #9aa4aa;
	--linea: #2a3136;
	--borde-campo: #66727a;
	--superficie: #1d2327;
	--error: #f2a8a4;
	--enlace: #86b9cc;
	--enlace: color-mix(in srgb, var(--acento) 45%, #ffffff);
	color-scheme: dark;
}

:root[data-modo="claro"] {
	color-scheme: light;
}

/* Los colores de la paleta del editor siguen a la paleta elegida y al modo oscuro. */
html body {
	--wp--preset--color--fondo: var(--fondo);
	--wp--preset--color--texto: var(--texto);
	--wp--preset--color--secundario: var(--secundario);
	--wp--preset--color--linea: var(--linea);
	--wp--preset--color--acento: var(--enlace);
}

/* ------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------ */

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

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

body {
	margin: 0;
	background: var(--fondo);
	color: var(--texto);
	font-family: var(--fuente-texto);
	font-size: calc(1.0625rem * var(--ajuste-texto));
	line-height: 1.7;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 48rem) {
	body {
		font-size: calc(1.1875rem * var(--ajuste-texto));
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
	font-family: var(--fuente-titulos);
	font-weight: var(--peso-titulos);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
h5,
h6 { font-size: 1rem; }

p {
	margin: 0;
}

a {
	color: var(--enlace);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 2px;
}

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

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

img {
	height: auto;
	display: block;
}

hr {
	border: 0;
	border-top: 1px solid var(--linea);
	margin: 3rem 0;
}

::selection {
	background: var(--enlace);
	color: var(--fondo);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--texto);
	color: var(--fondo);
	clip: auto !important;
	clip-path: none;
	display: block;
	font-family: var(--sans);
	font-size: 0.9375rem;
	height: auto;
	left: 1rem;
	padding: 0.75rem 1rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

.contenedor {
	width: min(100% - (2 * var(--margen)), var(--ancho));
	margin-inline: auto;
}

/* ------------------------------------------------------------------
   3. Cabecera y navegación
   ------------------------------------------------------------------ */

.cabecera {
	padding-block: 1.75rem;
}

/* Franja con el color de acento (Personalizador > Estilo). */
.magma-franja .cabecera {
	border-top: 4px solid var(--enlace);
}

.cabecera__interior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.marca__enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--texto);
	text-decoration: none;
}

.marca__nombre {
	font-size: 1.25rem;
	letter-spacing: -0.01em;
}

.marca__enlace:hover .marca__nombre {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.marca__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, 20rem);
	max-height: var(--logo-altura, 48px);
}

@media (max-width: 44rem) {
	.marca__logo {
		max-height: min(var(--logo-altura, 48px), 44px);
		max-width: 60vw;
	}
}

@media (prefers-color-scheme: dark) {
	:root:not([data-modo="claro"]) .marca__enlace--invertir .marca__logo {
		filter: invert(1) hue-rotate(180deg);
	}
}

:root[data-modo="oscuro"] .marca__enlace--invertir .marca__logo {
	filter: invert(1) hue-rotate(180deg);
}

/* Logo con versión clara: se muestra la que corresponde a cada modo. */
.marca__logo--oscuro {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-modo="claro"]) .marca__logo--claro {
		display: none;
	}

	:root:not([data-modo="claro"]) .marca__logo--oscuro {
		display: block;
	}
}

:root[data-modo="oscuro"] .marca__logo--claro {
	display: none;
}

:root[data-modo="oscuro"] .marca__logo--oscuro {
	display: block;
}

/* Con una paleta oscura, el logo se invierte siempre. */
.magma-paleta-oscura .marca__enlace--invertir .marca__logo {
	filter: invert(1) hue-rotate(180deg);
}

/* La marca empuja el resto de la cabecera a la derecha. */
.marca {
	margin-right: auto;
}

/* Botón de modo claro/oscuro: a la derecha del menú (en móvil, junto a «Menú»). */
.modo {
	order: 3;
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--texto);
	cursor: pointer;
}

.modo[hidden] {
	display: none;
}

.modo:hover {
	background: var(--superficie);
}

.modo__sol {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-modo="claro"]) .modo__luna {
		display: none;
	}

	:root:not([data-modo="claro"]) .modo__sol {
		display: block;
	}
}

:root[data-modo="oscuro"] .modo__luna {
	display: none;
}

:root[data-modo="oscuro"] .modo__sol {
	display: block;
}

@media (max-width: 44rem) {
	.modo {
		order: 0;
		margin-top: -0.1rem;
	}
}

.nav {
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.nav__boton {
	display: none;
	font: inherit;
	color: var(--texto);
	background: transparent;
	border: 1px solid var(--borde-campo);
	border-radius: var(--radio);
	padding: 0.4rem 0.9rem;
	cursor: pointer;
}

.nav__lista,
.nav__lista .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
}

.nav__lista li {
	position: relative;
}

.nav__lista a {
	color: var(--texto);
	text-decoration: none;
	display: inline-block;
	padding-block: 0.25rem;
}

.nav__lista a:hover,
.nav__lista .current-menu-item > a,
.nav__lista .current_page_item > a,
.nav__lista .current-menu-ancestor > a,
.nav__lista a[aria-current] {
	text-decoration: underline;
	text-decoration-color: var(--enlace);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.nav__lista .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 12rem;
	padding: 0.5rem 1rem;
	background: var(--fondo);
	border: 1px solid var(--linea);
	z-index: 10;
}

.nav__lista li:hover > .sub-menu,
.nav__lista li:focus-within > .sub-menu {
	display: block;
}

/* Tercer nivel: se despliega a la derecha del segundo. */
.nav__lista .sub-menu .sub-menu {
	top: -0.5rem;
	left: 100%;
}

@media (max-width: 44rem) {
	.js .nav__boton {
		display: inline-block;
	}

	.nav {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.js .cabecera__interior {
		align-items: flex-start;
	}

	.js .nav__boton[aria-expanded="false"] + .nav__lista {
		display: none;
	}

	.nav__lista {
		flex-direction: column;
		align-items: flex-end;
		gap: 0.25rem;
		margin-top: 0.75rem;
	}

	.nav__lista .sub-menu,
	.nav__lista .sub-menu .sub-menu {
		display: block;
		position: static;
		border: 0;
		padding: 0 1rem 0 0;
		min-width: 0;
		text-align: right;
		font-size: 0.9em;
	}
}

/* Móvil con JavaScript: logo, modo y «Menú» en una sola fila; el menú se despliega
   a todo el ancho bajo la cabecera, con las opciones alineadas a la izquierda. */
@media (max-width: 44rem) {
	.js .cabecera {
		position: relative;
	}

	.js .cabecera__interior {
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.5rem;
	}

	.js .marca {
		flex: 1 1 auto;
		min-width: 0;
	}

	.js .marca__logo {
		max-width: 100%;
	}

	.js .modo {
		margin-top: 0;
	}

	.js .nav {
		flex: none;
	}

	.js .nav__lista {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 30;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 0.5rem var(--margen) 1rem;
		background: var(--fondo);
		border-bottom: 1px solid var(--linea);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	}

	.js .nav__lista a {
		display: block;
		padding-block: 0.65rem;
	}

	.js .nav__lista .sub-menu,
	.js .nav__lista .sub-menu .sub-menu {
		padding: 0 0 0 1rem;
		text-align: left;
	}
}

/* ------------------------------------------------------------------
   4. Bloques de página comunes
   ------------------------------------------------------------------ */

.cabecera-pagina {
	padding-block: var(--espacio) 2.5rem;
}

.cabecera-pagina .titulo-pagina {
	font-size: clamp(2.25rem, 5.5vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	max-width: 18ch;
}

.cabecera-pagina__intro {
	margin-top: 1.25rem;
	max-width: var(--lectura);
	color: var(--secundario);
}

.cabecera-pagina__intro p + p {
	margin-top: 1rem;
}

.seccion {
	padding-top: var(--espacio);
}

.seccion__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	border-top: 1px solid var(--linea);
	padding-top: 1rem;
	margin-bottom: 2.25rem;
}

.seccion__cabecera {
	position: relative;
}

.seccion__cabecera::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 2.5rem;
	height: 2px;
	background: var(--enlace);
}

.seccion__cabecera h2 {
	font-size: 1.5rem;
}

/* Entradas fijadas en el blog: una raya del color de acento a su lado. */
.fila.sticky {
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--enlace);
}

/* Comentarios del autor de la entrada: destacados con la misma raya. */
.bypostauthor > .comment-body {
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--enlace);
}

/* Pie de las galerías clásicas (las anteriores al editor de bloques). */
.gallery-caption {
	display: block;
	margin-top: 0.4rem;
	color: var(--secundario);
	font-family: var(--sans);
	font-size: 0.85rem;
}

.seccion__mas {
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.boton,
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
	display: inline-block;
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--fondo);
	background: var(--enlace);
	border: 1px solid var(--enlace);
	border-radius: var(--radio);
	padding: 0.85rem 1.4rem;
	text-decoration: none;
	cursor: pointer;
}

.boton:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--texto);
	border-color: var(--texto);
	color: var(--fondo);
	text-decoration: none;
}

.is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: var(--texto);
	color: var(--texto);
}

.is-style-outline > .wp-block-button__link:hover {
	background: var(--texto);
	color: var(--fondo);
}

/* ------------------------------------------------------------------
   5. Portada
   ------------------------------------------------------------------ */

.hero {
	padding-block: calc(var(--espacio) * 1.1) 0;
}

.hero__titulo {
	font-size: clamp(2.15rem, 6.5vw + 0.6rem, 5.75rem);
	line-height: 1.02;
	letter-spacing: -0.028em;
	max-width: 15ch;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.hero__texto {
	margin-top: 1.75rem;
	max-width: 34rem;
	font-size: 1.125em;
	color: var(--secundario);
}

.hero__texto p + p {
	margin-top: 1rem;
}

.hero__accion {
	margin-top: 2.25rem;
}

/* Imagen al lado del texto */
.hero--lateral {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.hero--lateral .hero__titulo {
	font-size: clamp(2.15rem, 5.2vw, 4.75rem);
	max-width: 14ch;
}

.hero__imagen {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--superficie);
}

.hero__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 48rem) {
	.hero--lateral {
		grid-template-columns: 1fr;
	}

	.hero__imagen {
		aspect-ratio: 3 / 2;
	}
}

/* Imagen de fondo a todo el ancho, con el texto en blanco sobre un degradado */
.hero--fondo {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: min(78vh, 46rem);
	padding-block: calc(var(--espacio) * 1.2) var(--espacio);
	color: #ffffff;
}

.hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #1c2226;
}

.hero__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 0, 0, 0.25) 100%);
	opacity: var(--hero-oscurecer, 0.65);
}

.hero--fondo .hero__cuerpo {
	width: min(100% - (2 * var(--margen)), var(--ancho));
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.hero--fondo .hero__titulo {
	color: #ffffff;
}

.hero--fondo .hero__texto {
	color: rgba(255, 255, 255, 0.9);
}

/* Slider: varias fotos de fondo que se funden; el texto y el botón no se mueven */
.hero__diapositiva {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.hero__diapositiva.es-activa {
	opacity: 1;
}

.hero__diapositiva img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__controles {
	position: absolute;
	right: var(--margen);
	bottom: var(--espacio);
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.hero__puntos {
	display: flex;
	gap: 0.15rem;
}

.hero__punto {
	position: relative;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

/* Punto visible pequeño, zona de clic cómoda. */
.hero__punto::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 0.55rem;
	height: 0.55rem;
	border: 1.5px solid #ffffff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.hero__punto[aria-current="true"]::before {
	background: #ffffff;
}

.hero__pausa {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	color: #ffffff;
	cursor: pointer;
}

.hero__pausa:hover,
.hero__pausa:focus-visible {
	background: rgba(0, 0, 0, 0.5);
}

.hero__punto:focus-visible,
.hero__pausa:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.hero__icono-reanudar,
.hero__pausa.es-pausado .hero__icono-pausa {
	display: none;
}

.hero__pausa.es-pausado .hero__icono-reanudar {
	display: block;
}

/* En móvil los controles van arriba a la derecha, para no tapar el botón del texto. */
@media (max-width: 47.99rem) {
	.hero__controles {
		top: var(--espacio);
		bottom: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__diapositiva {
		transition: none;
	}
}

.portada-contenido {
	padding-top: var(--espacio);
}

/* El contenido de la portada va alineado a la izquierda, como el resto. */
.portada-contenido.contenido-entrada > * {
	margin-inline: 0;
}

/* La llamada a la acción ocupa todo el ancho, como una franja. */
.portada-contenido > .magma-patron-llamada {
	max-width: 100%;
}

/* A todo el ancho, también en la portada (donde el resto va a la izquierda). */
.portada-contenido.contenido-entrada > .alignfull {
	margin-left: calc(50% - 50vw);
}

/* ------------------------------------------------------------------
   6. Listado de entradas (índice por fechas)
   ------------------------------------------------------------------ */

.filas {
	border-bottom: 1px solid var(--linea);
}

.fila {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.35rem;
	padding-block: 1.6rem;
	border-top: 1px solid var(--linea);
}

@media (min-width: 40rem) {
	.fila {
		grid-template-columns: 10rem minmax(0, 1fr);
		gap: 2rem;
	}
}

.fila__meta {
	font-family: var(--sans);
	font-size: 0.875rem;
	color: var(--secundario);
	padding-top: 0.4rem;
}

.fila__titulo {
	font-size: 1.5rem;
}

.fila__titulo a {
	color: var(--texto);
	text-decoration: none;
}

.fila__titulo a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.fila__extracto {
	margin-top: 0.4rem;
	max-width: var(--lectura);
	color: var(--secundario);
	font-size: 1rem;
}

/* ------------------------------------------------------------------
   7. Portfolio
   ------------------------------------------------------------------ */

.filtros {
	margin-bottom: 2.5rem;
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.filtros ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.filtros a {
	color: var(--secundario);
	text-decoration: none;
}

.filtros a:hover,
.filtros a[aria-current] {
	color: var(--texto);
	text-decoration: underline;
	text-decoration-color: var(--enlace);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.rejilla {
	--hueco-col: 2rem;
	--hueco-fila: 3rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: var(--hueco-fila) var(--hueco-col);
}

/* Columnas fijas (en tableta como mucho 2 y en móvil 1). */
.rejilla--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rejilla--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rejilla--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 60rem) {
	.rejilla--cols-3,
	.rejilla--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 36rem) {
	.rejilla--cols-2,
	.rejilla--cols-3,
	.rejilla--cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Separación junta, al estilo de un portfolio fotográfico. */
.rejilla--sep-junta {
	--hueco-col: 0.5rem;
	--hueco-fila: 1.75rem;
}

/* Con el título sobre la foto no hace falta hueco para el texto. */
.rejilla--texto-superpuesto {
	--hueco-fila: var(--hueco-col);
}

/* Proporciones de las fotos. */
.rejilla--prop-3-2 .tarjeta__imagen {
	aspect-ratio: 3 / 2;
}

.rejilla--prop-16-9 .tarjeta__imagen {
	aspect-ratio: 16 / 9;
}

.rejilla--prop-1-1 .tarjeta__imagen {
	aspect-ratio: 1 / 1;
}

.rejilla--prop-4-5 .tarjeta__imagen {
	aspect-ratio: 4 / 5;
}

/* Original sin recortar: mosaico en columnas, cada foto con su forma. */
.rejilla--prop-original {
	display: block;
	columns: 19rem;
	column-gap: var(--hueco-col);
}

.rejilla--prop-original.rejilla--cols-2 {
	columns: 2;
}

.rejilla--prop-original.rejilla--cols-3 {
	columns: 3;
}

.rejilla--prop-original.rejilla--cols-4 {
	columns: 4;
}

@media (max-width: 60rem) {
	.rejilla--prop-original.rejilla--cols-3,
	.rejilla--prop-original.rejilla--cols-4 {
		columns: 2;
	}
}

@media (max-width: 36rem) {
	.rejilla--prop-original.rejilla--cols-2,
	.rejilla--prop-original.rejilla--cols-3,
	.rejilla--prop-original.rejilla--cols-4 {
		columns: 1;
	}
}

.rejilla--prop-original .tarjeta {
	break-inside: avoid;
	margin-bottom: var(--hueco-fila);
}

.rejilla--prop-original .tarjeta__imagen {
	aspect-ratio: auto;
}

.rejilla--prop-original .tarjeta__imagen img {
	height: auto;
}

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

.tarjeta__imagen {
	aspect-ratio: 4 / 3;
	background: var(--superficie);
	overflow: hidden;
}

.tarjeta__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.tarjeta__enlace:hover .tarjeta__imagen img,
.tarjeta__enlace:focus-visible .tarjeta__imagen img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.tarjeta__imagen img {
		transition: none;
	}

	.tarjeta__enlace:hover .tarjeta__imagen img,
	.tarjeta__enlace:focus-visible .tarjeta__imagen img {
		transform: none;
	}
}

.tarjeta__titulo {
	font-size: 1.25rem;
	margin-top: 0.9rem;
}

.tarjeta__enlace:hover .tarjeta__titulo {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.tarjeta__tipo {
	margin-top: 0.2rem;
	font-family: var(--sans);
	font-size: 0.875rem;
	color: var(--secundario);
}

/* Título superpuesto: aparece sobre la foto al pasar el ratón o con el teclado. */
.rejilla--texto-superpuesto .tarjeta__enlace {
	position: relative;
	overflow: hidden;
}

.rejilla--texto-superpuesto .tarjeta__texto {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 3rem 1.25rem 1.1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.rejilla--texto-superpuesto .tarjeta__enlace:hover .tarjeta__texto,
.rejilla--texto-superpuesto .tarjeta__enlace:focus-visible .tarjeta__texto {
	opacity: 1;
}

.rejilla--texto-superpuesto .tarjeta__titulo {
	margin-top: 0;
	color: #ffffff;
}

.rejilla--texto-superpuesto .tarjeta__tipo {
	color: rgba(255, 255, 255, 0.86);
}

/* En pantallas táctiles no hay «pasar el ratón»: el título se ve siempre. */
@media (hover: none) {
	.rejilla--texto-superpuesto .tarjeta__texto {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rejilla--texto-superpuesto .tarjeta__texto {
		transition: none;
	}
}

.ficha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1.25rem 2rem;
	margin: 2rem 0 0;
	max-width: 52rem;
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.ficha dt {
	color: var(--secundario);
	font-size: 0.8125rem;
}

.ficha dd {
	margin: 0.15rem 0 0;
}

.entradilla {
	margin-top: 1.25rem;
	max-width: var(--lectura);
	font-size: 1.125em;
	color: var(--secundario);
}

/* ------------------------------------------------------------------
   8. Servicios
   ------------------------------------------------------------------ */

.servicios {
	border-bottom: 1px solid var(--linea);
}

.servicio {
	padding-block: 1.75rem;
	border-top: 1px solid var(--linea);
}

.servicio__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 2rem;
}

.servicio__titulo {
	font-size: 1.5rem;
}

.servicio__titulo a {
	color: var(--texto);
	text-decoration: none;
}

.servicio__titulo a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.servicio__precio {
	font-family: var(--sans);
	font-size: 0.9375rem;
	color: var(--secundario);
	white-space: nowrap;
}

.servicio__texto {
	margin-top: 0.5rem;
	max-width: var(--lectura);
	color: var(--secundario);
	font-size: 1rem;
}

.volver {
	margin-top: 3rem;
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.servicio__accion {
	margin-top: 0.75rem;
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.llamada {
	margin-top: 3rem;
	max-width: var(--lectura);
}

.llamada p + p {
	margin-top: 1.25rem;
}

/* ------------------------------------------------------------------
   8b. Testimonios (plugin Magma Core)
   ------------------------------------------------------------------ */

.testimonios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 1.5rem;
}

.testimonio {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.75rem 1.75rem 1.5rem;
	background: var(--superficie);
}

/* Comillas de apertura con el color de acento. */
.testimonio::before {
	content: "\201C";
	font-family: var(--serif);
	font-size: 3.25rem;
	line-height: 0.8;
	color: var(--enlace);
}

.testimonio .testimonio__texto {
	flex-grow: 1;
	margin: 0.5rem 0 0;
	padding: 0;
	border: 0;
	font-family: var(--fuente-titulos);
	font-size: 1.125rem;
	font-style: normal;
	line-height: 1.55;
}

.testimonio__texto p + p {
	margin-top: 0.75rem;
}

.testimonio__autor {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
	font-family: var(--sans);
}

.testimonio__foto {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.testimonio__datos {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.testimonio__nombre {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--texto);
}

a.testimonio__nombre {
	text-decoration: none;
}

a.testimonio__nombre:hover {
	text-decoration: underline;
}

.testimonio__cargo {
	font-size: 0.8125rem;
	color: var(--secundario);
}

/* ------------------------------------------------------------------
   9. Artículo y contenido del editor
   ------------------------------------------------------------------ */

.articulo__cabecera {
	padding-block: var(--espacio) 2.5rem;
}

/*
 * Entradas, páginas, proyectos y servicios: columna de lectura centrada.
 * La imagen destacada y los bloques anchos ocupan todo el contenedor.
 */
.articulo__cabecera > *,
.comentarios > *,
.pie-articulo > *,
.post-navigation,
.volver,
.articulo .llamada {
	max-width: var(--lectura);
	margin-inline: auto;
}

.articulo__titulo {
	font-size: clamp(2.25rem, 5.5vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin-top: 1.25rem;
	font-family: var(--sans);
	font-size: 0.875rem;
	color: var(--secundario);
}

.meta a {
	color: inherit;
}

.articulo__imagen {
	margin-block: 0 3rem;
}

.articulo__imagen img {
	width: 100%;
}

.contenido-entrada {
	display: flow-root;
}

.contenido-entrada > * {
	max-width: var(--lectura);
	margin-block: 0 1.4rem;
	margin-inline: auto;
}

.contenido-entrada > *:last-child {
	margin-bottom: 0;
}

.contenido-entrada > h2,
.contenido-entrada > h3,
.contenido-entrada > h4 {
	margin-top: 2.75rem;
	margin-bottom: 1rem;
}

.contenido-entrada > .alignwide {
	max-width: 100%;
}

.contenido-entrada > .alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/*
 * Grupos y columnas a todo el ancho (por ejemplo, un patrón puesto a «Ancho
 * completo»): el fondo llega a los bordes de la pantalla y el contenido
 * conserva los márgenes laterales de la página.
 */
.contenido-entrada > .alignfull.wp-block-group,
.contenido-entrada > .alignfull.wp-block-columns {
	padding-inline: var(--margen);
}

/* Con color de fondo, como una franja: aire arriba y abajo. */
.contenido-entrada > .alignfull.has-background {
	padding-block: clamp(2.5rem, 7vw, 5rem);
}

.contenido-entrada > .alignwide.wp-block-group.has-background {
	padding: clamp(1.75rem, 4vw, 3rem);
}

/* Plantilla «Ancho completo»: los bloques ocupan todo el contenedor; los textos, el ancho de lectura. */
.contenido-entrada--ancho > * {
	max-width: 100%;
}

.contenido-entrada--ancho > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote, .wp-block-quote, .wp-block-pullquote, pre, .wp-block-table) {
	max-width: var(--lectura);
}

/* Plantilla «Sin título»: el contenido empieza arriba; una portada a todo el ancho toca la cabecera. */
.articulo--sin-titulo .contenido-entrada {
	padding-top: var(--espacio);
}

.articulo--sin-titulo .contenido-entrada > .alignfull:first-child {
	margin-top: calc(-1 * var(--espacio));
}

/* Las imágenes flotantes se alinean con la columna de lectura, no con el contenedor. */
.contenido-entrada > .alignleft {
	margin-left: max(0px, calc((100% - var(--lectura)) / 2));
	max-width: calc(var(--lectura) / 2);
}

.contenido-entrada > .alignright {
	margin-right: max(0px, calc((100% - var(--lectura)) / 2));
	max-width: calc(var(--lectura) / 2);
}

/* Contacto sin datos al lado: el formulario, centrado en la columna de lectura. */
.contacto.contacto--solo {
	display: block;
	max-width: var(--lectura);
}

/* La página de contacto mantiene su maquetación en dos columnas, alineada a la izquierda. */
.articulo--contacto .articulo__cabecera > *,
.articulo--contacto .contenido-entrada > * {
	margin-inline: 0;
}

/* Los patrones de bloques respiran entre sí. */
.contenido-entrada > [class*="magma-patron-"] {
	margin-block: clamp(2.75rem, 6vw, 4.5rem);
}

.contenido-entrada > [class*="magma-patron-"]:first-child {
	margin-top: 0;
}

.contenido-entrada > [class*="magma-patron-"]:last-child {
	margin-bottom: 0;
}

.alignleft {
	float: left;
	margin: 0.4rem 1.75rem 1rem 0;
	max-width: 50%;
}

.alignright {
	float: right;
	margin: 0.4rem 0 1rem 1.75rem;
	max-width: 50%;
}

.aligncenter {
	margin-inline: auto;
}

.contenido-entrada ul,
.contenido-entrada ol {
	padding-left: 1.25em;
}

.contenido-entrada li + li {
	margin-top: 0.35em;
}

blockquote,
.wp-block-quote {
	margin-inline: 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--enlace);
	font-style: italic;
}

/* Dentro del contenido, las citas se centran en la columna de lectura como el resto. */
.contenido-entrada > blockquote,
.contenido-entrada > .wp-block-quote {
	margin-inline: auto;
}

blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--sans);
	font-size: 0.875rem;
	font-style: normal;
	color: var(--secundario);
}

.wp-block-pullquote {
	border-block: 1px solid var(--linea);
	padding-block: 2rem;
	text-align: left;
}

.wp-block-pullquote blockquote {
	border: 0;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1.35;
}

figure {
	margin-inline: 0;
}

figcaption,
.wp-caption-text,
.wp-element-caption {
	margin-top: 0.6rem;
	font-family: var(--sans);
	font-size: 0.8125rem;
	color: var(--secundario);
}

code,
kbd,
pre {
	font-family: var(--mono);
	font-size: 0.875em;
}

:not(pre) > code {
	background: var(--superficie);
	padding: 0.1em 0.35em;
	border-radius: var(--radio);
}

pre {
	background: var(--superficie);
	padding: 1.25rem;
	overflow-x: auto;
	line-height: 1.55;
	border-radius: var(--radio);
}

table {
	border-collapse: collapse;
	width: 100%;
	font-family: var(--sans);
	font-size: 0.9375rem;
}

th,
td {
	text-align: left;
	padding: 0.6rem 0.75rem 0.6rem 0;
	border-bottom: 1px solid var(--linea);
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--linea);
}

.wp-block-gallery {
	gap: 1rem;
}

.pie-articulo {
	margin-top: 3rem;
}

.etiquetas {
	font-family: var(--sans);
	font-size: 0.875rem;
	color: var(--secundario);
}

.page-links {
	margin-top: 2rem;
	font-family: var(--sans);
	font-size: 0.9375rem;
}

/* Navegación entre entradas y paginación */

.post-navigation,
.pagination,
.comments-pagination {
	margin-top: var(--espacio);
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem 2rem;
	border-top: 1px solid var(--linea);
	padding-top: 1.5rem;
}

@media (min-width: 40rem) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-next {
		grid-column: 2;
		text-align: right;
	}
}

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

.post-navigation a:hover .nav-title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.nav-subtitle {
	display: block;
	font-family: var(--sans);
	font-size: 0.8125rem;
	color: var(--secundario);
}

.nav-title {
	font-size: 1.25rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.page-numbers {
	padding: 0.35rem 0.25rem;
	color: var(--texto);
	text-decoration: none;
}

a.page-numbers:hover {
	text-decoration: underline;
}

.page-numbers.current {
	border-bottom: 2px solid var(--enlace);
}

/* ------------------------------------------------------------------
   10. Comentarios
   ------------------------------------------------------------------ */

.comentarios {
	margin-top: var(--espacio);
}

.comentarios > * {
	max-width: var(--lectura);
	margin-inline: auto;
}

.comentarios__titulo,
.comment-reply-title {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

.comment-list,
.comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .children {
	padding-left: 1.5rem;
	border-left: 1px solid var(--linea);
}

.comment-body {
	padding-block: 1.25rem;
	border-top: 1px solid var(--linea);
}

.comment-meta {
	font-family: var(--sans);
	font-size: 0.875rem;
	color: var(--secundario);
	margin-bottom: 0.75rem;
}

.comment-meta .avatar {
	float: left;
	margin-right: 0.75rem;
	border-radius: 50%;
}

.comment-author .fn {
	font-style: normal;
	color: var(--texto);
}

.comment-metadata a {
	color: inherit;
}

.comment-content p + p {
	margin-top: 1rem;
}

.reply {
	margin-top: 0.75rem;
	font-family: var(--sans);
	font-size: 0.875rem;
}

.comment-respond {
	margin-top: 3rem;
}

.comment-form > p + p {
	margin-top: 1.25rem;
}

.comment-notes,
.logged-in-as {
	font-family: var(--sans);
	font-size: 0.875rem;
	color: var(--secundario);
}

.no-comments {
	color: var(--secundario);
}

/* ------------------------------------------------------------------
   11. Formularios
   ------------------------------------------------------------------ */

label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--sans);
	font-size: 0.9375rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
textarea,
select {
	width: 100%;
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--texto);
	background: var(--fondo);
	border: 1px solid var(--borde-campo);
	border-radius: var(--radio);
	padding: 0.7rem 0.8rem;
}

textarea {
	min-height: 10rem;
	resize: vertical;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline-offset: 0;
	border-color: var(--enlace);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--enlace);
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
}

.comment-form-cookies-consent,
.campo-casilla {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.comment-form-cookies-consent label,
.campo-casilla label {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

.campo-casilla input {
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.campo + .campo {
	margin-top: 1.25rem;
}

.campo__ayuda {
	margin-top: 0.35rem;
	font-family: var(--sans);
	font-size: 0.8125rem;
	color: var(--secundario);
}

.campo__error {
	color: var(--error);
}

.campo__opcional {
	color: var(--secundario);
	font-size: 0.8125rem;
}

.campo-trampa {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formulario__enviar {
	margin-top: 1.75rem;
}

.formulario__aviso-legal {
	margin-top: 1.5rem;
	font-family: var(--sans);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--secundario);
}

.aviso {
	margin-bottom: 2rem;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--enlace);
	background: var(--superficie);
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.aviso--error {
	border-left-color: var(--error);
}

.buscador {
	display: flex;
	gap: 0.5rem;
	max-width: 30rem;
}

.buscador label {
	flex: 1;
	margin: 0;
}

/* ------------------------------------------------------------------
   12. Contacto
   ------------------------------------------------------------------ */

.contacto {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3.5rem;
	margin-top: 1rem;
}

@media (min-width: 56rem) {
	.contacto {
		grid-template-columns: minmax(0, var(--lectura)) minmax(0, 1fr);
		gap: 5rem;
	}
}

.contacto__datos dl {
	margin: 0;
	font-family: var(--sans);
	font-size: 0.9375rem;
}

.contacto__datos dt {
	color: var(--secundario);
	font-size: 0.8125rem;
}

.contacto__datos dd {
	margin: 0.15rem 0 1.25rem;
	overflow-wrap: anywhere;
}

.contacto__datos .redes {
	flex-direction: column;
	gap: 0.35rem;
}

/* ------------------------------------------------------------------
   12b. Banda de las páginas interiores y migas de pan
   ------------------------------------------------------------------ */

.banda {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.75rem, 7vw, 5rem);
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* En la banda, título y datos ocupan el ancho del contenedor. */
.banda > * {
	max-width: none;
	margin-inline: 0;
}

.banda .titulo-pagina,
.banda .articulo__titulo {
	max-width: none;
}

.banda .entradilla,
.banda .cabecera-pagina__intro {
	max-width: var(--lectura);
}

/* Fondo de color: sale del contenedor hasta los bordes de la ventana. */
.banda--color::before {
	content: "";
	position: absolute;
	inset: 0 calc(50% - 50vw);
	z-index: -1;
	background: var(--superficie);
}

.banda--simple {
	border-bottom: 1px solid var(--linea);
}

/* Imagen destacada de fondo, con el texto en blanco sobre un degradado. */
.banda--imagen {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(20rem, 46vh, 30rem);
	color: #ffffff;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.banda__fondo {
	position: absolute;
	inset: 0 calc(50% - 50vw);
	z-index: -1;
	background: #1c2226;
}

.banda__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banda__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.2) 100%);
	opacity: var(--hero-oscurecer, 0.65);
}

.banda--imagen .articulo__titulo,
.banda--imagen .titulo-pagina,
.banda--imagen a {
	color: #ffffff;
}

.banda--imagen .meta,
.banda--imagen .entradilla,
.banda--imagen .ficha dt,
.banda--imagen .migas {
	color: rgba(255, 255, 255, 0.86);
}

/* Migas de pan */
.migas {
	margin-bottom: 1.5rem;
	font-family: var(--sans);
	font-size: 0.8125rem;
	color: var(--secundario);
}

.migas ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.migas li + li::before {
	content: "/";
	margin-inline: 0.6rem;
	opacity: 0.5;
}

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

.migas a:hover {
	text-decoration: underline;
}

.migas [aria-current] {
	color: var(--texto);
}

.banda--imagen .migas [aria-current] {
	color: #ffffff;
}

/* En móvil, la página actual no se repite en las migas: su título va justo debajo. */
@media (max-width: 44rem) {
	.migas li:last-child {
		display: none;
	}
}

/* ------------------------------------------------------------------
   13. Pie
   ------------------------------------------------------------------ */

.pie {
	margin-top: var(--espacio);
	border-top: 1px solid var(--linea);
	padding-block: 2.5rem 3rem;
	font-family: var(--sans);
	font-size: 0.875rem;
	color: var(--secundario);
}

/* Pie con fondo de la paleta (Personalizador > Estilo). */
.magma-pie-color .pie {
	background: var(--superficie);
	border-top-color: transparent;
	padding-block: 3rem 3.5rem;
}

.pie__interior {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.25rem 3rem;
}

.pie a {
	color: var(--secundario);
	text-decoration: none;
}

.pie a:hover {
	color: var(--texto);
	text-decoration: underline;
}

.pie__menu,
.redes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.pie__enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 3rem;
}

/* Widgets del pie */

.pie__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 2.5rem 3rem;
	padding-bottom: 2.5rem;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--linea);
	color: var(--texto);
	overflow-wrap: break-word;
}

.widget__titulo,
.widget .wp-block-heading {
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--secundario);
	margin-bottom: 0.75rem;
}

.widget ul,
.widget ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li {
	padding-block: 0.2rem;
}

.widget li ul,
.widget li ol {
	padding-left: 1rem;
}

.pie .widget a {
	color: var(--texto);
}

.widget select {
	max-width: 100%;
}

.widget p + p {
	margin-top: 0.75rem;
}

.widget table {
	font-size: 0.8125rem;
}

.widget caption {
	text-align: left;
	margin-bottom: 0.5rem;
}

.widget .tagcloud a,
.widget .wp-block-tag-cloud a {
	display: inline-block;
	margin: 0 0.4rem 0.4rem 0;
}

.widget .buscador,
.widget .wp-block-search__inside-wrapper {
	display: flex;
	gap: 0.5rem;
}

.widget .wp-block-search__button {
	margin: 0;
}

.widget img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------
   14. Visor de imágenes
   ------------------------------------------------------------------ */

.visor-disparador {
	display: inline-block;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	vertical-align: top;
	cursor: zoom-in;
}

figure > .visor-disparador,
.articulo__imagen .visor-disparador {
	display: block;
}

.articulo__imagen .visor-disparador {
	width: 100%;
}

.visor-enlace {
	cursor: zoom-in;
}

/*
 * Galerías de WordPress: el botón debe comportarse como el enlace que
 * WordPress espera alrededor de la imagen, para que el recorte no cambie.
 */
.wp-block-gallery.has-nested-images figure.wp-block-image > .visor-disparador {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 100%;
	margin: 0;
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > .visor-disparador {
	width: 100%;
	height: 100%;
	flex: 1 0 0%;
}

html.visor-abierto {
	overflow: hidden;
}

/* El visor es siempre oscuro, para que las fotos se vean sin distracciones. */
.visor {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(12, 14, 16, 0.97);
	color: #e8eaeb;
	overflow: hidden;
}

.visor::backdrop {
	background: rgba(12, 14, 16, 0.97);
}

.visor__figura {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 3.75rem 4.75rem 1.5rem;
}

.visor__imagen {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - 8.5rem);
	max-height: calc(100dvh - 8.5rem);
	object-fit: contain;
}

.visor__pie {
	max-width: 40rem;
	margin-top: 0.85rem;
	font-family: var(--sans);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
	color: #b9c0c4;
}

.visor__texto,
.visor__exif {
	display: block;
}

.visor__texto[hidden],
.visor__exif[hidden] {
	display: none;
}

/* Datos de toma: más discretos que el pie de foto. */
.visor__exif {
	margin-top: 0.2rem;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	color: #8e979c;
}

.visor__contador {
	position: absolute;
	top: 1.1rem;
	left: 1.25rem;
	margin: 0;
	font-family: var(--sans);
	font-size: 0.8125rem;
	color: #b9c0c4;
}

.visor__boton {
	position: absolute;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #f2f4f5;
	cursor: pointer;
}

.visor__boton:hover {
	background: rgba(255, 255, 255, 0.18);
}

.visor__boton:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.visor__cerrar {
	top: 0.75rem;
	right: 0.75rem;
}

.visor__anterior,
.visor__siguiente {
	top: 50%;
	transform: translateY(-50%);
}

.visor__anterior {
	left: 0.75rem;
}

.visor__siguiente {
	right: 0.75rem;
}

.visor--una .visor__anterior,
.visor--una .visor__siguiente,
.visor--una .visor__contador {
	display: none;
}

/* En móvil, las flechas bajan para no tapar la foto. */
@media (max-width: 44rem) {
	.visor__figura {
		padding: 3.75rem 0.5rem 4.75rem;
	}

	.visor__imagen {
		max-height: calc(100vh - 10.5rem);
		max-height: calc(100dvh - 10.5rem);
	}

	.visor__anterior,
	.visor__siguiente {
		top: auto;
		bottom: 1rem;
		transform: none;
	}

	.visor__anterior {
		left: 1rem;
	}

	.visor__siguiente {
		right: 1rem;
	}
}

/* ------------------------------------------------------------------
   15. Estados vacíos y 404
   ------------------------------------------------------------------ */

.vacio {
	max-width: var(--lectura);
	color: var(--secundario);
}

.vacio > * + * {
	margin-top: 1.5rem;
}

/* ------------------------------------------------------------------
   15b. Diseño corporativo: barra superior, botón de la cabecera,
        servicios en tarjetas y pie con columnas
   ------------------------------------------------------------------ */

/*
 * «Magma»: un tono muy oscuro teñido con el acento de la paleta. Es el mismo
 * en modo claro y oscuro: enmarca la página arriba (barra) y abajo (pie).
 */
:root {
	--magma: #1a2226;
	--magma: color-mix(in srgb, var(--acento) 16%, #14191c);
	--magma-texto: #e9edef;
	--magma-secundario: #aeb8be;
	--magma-linea: rgba(255, 255, 255, 0.14);
}

/* ---------- Barra superior ---------- */

.barra {
	background: var(--magma);
	color: var(--magma-texto);
	font-family: var(--sans);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.barra__interior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.75rem;
	padding-block: 0.6rem;
}

.barra__contacto,
.barra__redes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
}

.barra__contacto li,
.barra__texto {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
}

.barra__texto {
	color: var(--magma-secundario);
}

.barra .icono {
	flex: none;
	color: var(--magma-secundario);
}

/* Las redes, a la derecha. */
.barra__redes {
	margin-left: auto;
}

.barra a {
	color: var(--magma-texto);
	text-decoration: none;
}

.barra a:hover,
.barra a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.barra a:focus-visible {
	outline: 2px solid var(--magma-texto);
	outline-offset: 2px;
}

/* En el móvil solo caben el teléfono y el correo. */
@media (max-width: 44rem) {
	.barra__texto,
	.barra__redes {
		display: none;
	}
}

/* ---------- Cabecera ---------- */

.cabecera {
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--linea);
}

@media (min-width: 44.0625rem) {
	.nav {
		display: flex;
		align-items: center;
		gap: 1rem 2rem;
	}
}

.nav__accion.boton {
	padding: 0.6rem 1.15rem;
	white-space: nowrap;
}

/* En el móvil, el botón va dentro del menú desplegable. */
@media (max-width: 44rem) {
	.js .nav__boton[aria-expanded="false"] ~ .nav__accion {
		display: none;
	}

	.nav__accion.boton {
		margin-top: 0.75rem;
	}
}

/* ---------- Titular de la portada: más contenido que el de Lienzo ---------- */

.hero__titulo,
.hero--lateral .hero__titulo {
	/* La escala la elige el comprador (Personalizar > Portada > Tamaño del titular). */
	font-size: calc(clamp(2.1rem, 4vw + 0.75rem, 4.1rem) * var(--hero-escala-titulo, 1));
	line-height: 1.08;
	letter-spacing: -0.02em;
	/* Ancho del texto: Personalizar > Portada > Ancho del texto de la cabecera. */
	max-width: var(--hero-ancho-titulo, 18ch);
}

/* Tamaño de la presentación de la cabecera (Personalizar > Portada). */
.hero__texto {
	font-size: calc(1.125em * var(--hero-escala-texto, 1));
	max-width: var(--hero-ancho-texto, calc(34rem * max(1, var(--hero-escala-texto, 1))));
}

/* ---------- Servicios en tarjetas ---------- */

.servicios--tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: 1.75rem;
	border-bottom: 0;
}

.servicio--tarjeta {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	background: var(--fondo);
	overflow: hidden;
}

.servicio__imagen {
	margin: 0;
	aspect-ratio: 4 / 3;
	background: var(--superficie);
	overflow: hidden;
}

.servicio__imagen a,
.servicio__imagen img {
	display: block;
	width: 100%;
	height: 100%;
}

.servicio__imagen img {
	object-fit: cover;
}

.servicio--tarjeta .servicio__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem 1.4rem 1.4rem;
}

.servicio--tarjeta .servicio__titulo {
	font-size: 1.25rem;
}

.servicio--tarjeta .servicio__texto {
	font-size: 0.9375rem;
}

.servicio__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-top: 0.75rem;
}

.servicio--tarjeta .servicio__pie {
	margin-top: auto;
	padding-top: 1.1rem;
}

.servicio__pie .servicio__accion {
	margin-top: 0;
}

.servicio--tarjeta .servicio__precio {
	color: var(--texto);
	font-weight: 600;
}

/* ---------- Pie con columnas ---------- */

.pie__columnas {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 2.5rem 3rem;
	padding-bottom: 2.5rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--linea);
	font-size: 0.9375rem;
}

@media (max-width: 60rem) {
	.pie__columnas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 36rem) {
	.pie__columnas {
		grid-template-columns: minmax(0, 1fr);
	}
}

.pie__nombre {
	font-family: var(--fuente-titulos);
	font-weight: var(--peso-titulos);
	font-size: 1.25rem;
	line-height: 1.3;
}

.pie .pie__nombre a {
	color: var(--texto);
}

.pie__logo {
	display: block;
	width: auto;
	max-width: min(100%, 14rem);
	height: auto;
	max-height: 3rem;
}

/* Logo de un solo color sin versión para fondos oscuros: se invierte. */
.pie__logo--invertir {
	filter: invert(1) hue-rotate(180deg);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-modo="claro"]) .pie__logo--invertir-modo {
		filter: invert(1) hue-rotate(180deg);
	}
}

:root[data-modo="oscuro"] .pie__logo--invertir-modo {
	filter: invert(1) hue-rotate(180deg);
}

/* Con las dos versiones, el pie muestra la de cada modo (como la cabecera). */
.pie__logo.marca__logo--oscuro {
	display: none;
}

.pie__descripcion {
	margin-top: 0.6rem;
	max-width: 22rem;
}

.pie__titulo {
	font-family: var(--sans);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--texto);
	margin-bottom: 0.9rem;
}

.pie__lista,
.pie__contacto {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.pie__contacto li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	overflow-wrap: anywhere;
}

.pie__contacto .icono {
	flex: none;
	margin-top: 0.2rem;
}

/* Fondo oscuro (por defecto): el mismo tono de la barra superior. */
.magma-pie-oscuro .pie {
	background: var(--magma);
	color: var(--magma-secundario);
	border-top: 0;
	padding-block: 3.5rem 2.75rem;
}

.magma-pie-oscuro .pie a,
.magma-pie-oscuro .pie .pie__nombre a,
.magma-pie-oscuro .pie .widget a {
	color: var(--magma-texto);
}

.magma-pie-oscuro .pie a:hover {
	color: var(--magma-texto);
	text-decoration: underline;
}

.magma-pie-oscuro .pie a:focus-visible {
	outline: 2px solid var(--magma-texto);
	outline-offset: 2px;
}

.magma-pie-oscuro .pie__titulo,
.magma-pie-oscuro .pie__widgets,
.magma-pie-oscuro .widget__titulo,
.magma-pie-oscuro .widget .wp-block-heading {
	color: var(--magma-texto);
}

.magma-pie-oscuro .pie__columnas,
.magma-pie-oscuro .pie__widgets {
	border-bottom-color: var(--magma-linea);
}

/* ---------- Noticias en tarjetas (Personalizar > Portada > Diseño de las noticias) ---------- */

.entradas-tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: 1.75rem;
}

.entrada-tarjeta {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	background: var(--fondo);
	overflow: hidden;
}

.entrada-tarjeta__imagen {
	margin: 0;
	aspect-ratio: 4 / 3;
	background: var(--superficie);
	overflow: hidden;
}

.entrada-tarjeta__imagen a,
.entrada-tarjeta__imagen img {
	display: block;
	width: 100%;
	height: 100%;
}

.entrada-tarjeta__imagen img {
	object-fit: cover;
}

/* Entrada sin imagen destacada: un tono suave del acento. */
.entrada-tarjeta__imagen--vacia {
	background: var(--superficie);
	background: color-mix(in srgb, var(--enlace) 12%, var(--superficie));
}

.entrada-tarjeta__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem 1.4rem 1.4rem;
}

.entrada-tarjeta__meta {
	margin: 0;
	font-family: var(--sans);
	font-size: 0.8125rem;
	color: var(--secundario);
}

.entrada-tarjeta__destacada {
	margin-left: 0.5rem;
	font-weight: 600;
	color: var(--texto);
}

.entrada-tarjeta__titulo {
	margin-top: 0.5rem;
	font-size: 1.25rem;
	line-height: 1.3;
}

.entrada-tarjeta__titulo a {
	color: var(--texto);
	text-decoration: none;
}

.entrada-tarjeta__titulo a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.entrada-tarjeta__extracto {
	margin-top: 0.6rem;
	font-size: 0.9375rem;
	color: var(--secundario);
}

/* Paginación del blog: separada de las tarjetas. */
.entradas-tarjetas + .pagination,
.entradas-tarjetas + .navigation {
	margin-top: 2.5rem;
}

/* ---------- Aviso temporal (Personalizar > Aviso temporal) ---------- */

.aviso-temporal {
	background: var(--enlace);
	color: var(--fondo);
	font-family: var(--sans);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.45;
}

.aviso-temporal__interior {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 1rem;
	margin: 0 auto;
	padding-block: 0.6rem;
	text-align: center;
}

.aviso-temporal a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.aviso-temporal a:hover {
	text-decoration-thickness: 2px;
}

.aviso-temporal a:focus-visible {
	outline: 2px solid var(--fondo);
	outline-offset: 2px;
}

/* ---------- Cabecera fija al bajar (Personalizar > Cabecera y barra superior) ---------- */

.magma-cabecera-fija .cabecera {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 40;
	background: var(--fondo);
	transition: padding 0.2s ease, box-shadow 0.2s ease;
}

/* En el móvil la barra de administración no se queda fija: la cabecera, arriba del todo. */
@media (max-width: 600px) {
	.magma-cabecera-fija .cabecera {
		top: 0;
	}
}

.magma-cabecera-fija .cabecera.es-compacta {
	padding-block: 0.6rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.magma-cabecera-fija .cabecera .marca__logo {
	transition: max-height 0.2s ease;
}

.magma-cabecera-fija .cabecera.es-compacta .marca__logo {
	max-height: min(var(--logo-altura, 48px), 36px);
}

/* Los enlaces a una parte de la página no quedan tapados por la cabecera. */
html:has(.magma-cabecera-fija) {
	scroll-padding-top: 6rem;
}

/* Menú del móvil abierto: si es largo, se desplaza dentro de la pantalla. */
@media (max-width: 44rem) {
	.magma-cabecera-fija.js .nav__lista,
	.js .magma-cabecera-fija .nav__lista {
		max-height: calc(100vh - 6rem);
		overflow-y: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.magma-cabecera-fija .cabecera,
	.magma-cabecera-fija .cabecera .marca__logo {
		transition: none;
	}
}

/* ---------- Cómo llegar ---------- */

.como-llegar {
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Botón flotante de WhatsApp o llamada ---------- */

.flotante {
	position: fixed;
	bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	right: 1.25rem;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 3.25rem;
	padding: 0 1.25rem 0 1rem;
	border-radius: 999px;
	background: var(--enlace);
	color: var(--fondo);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.flotante--izquierda {
	right: auto;
	left: 1.25rem;
}

.flotante--icono {
	justify-content: center;
	width: 3.25rem;
	padding: 0;
}

.flotante:hover {
	background: var(--texto);
	color: var(--fondo);
	text-decoration: none;
}

.flotante:focus-visible {
	outline: 3px solid var(--texto);
	outline-offset: 3px;
}

.flotante__icono {
	flex: none;
}

@media (min-width: 48rem) {
	.flotante--solo-movil {
		display: none;
	}
}

@media print {
	.barra,
	.nav__accion,
	.flotante {
		display: none;
	}
}

/* ------------------------------------------------------------------
   16. Impresión
   ------------------------------------------------------------------ */

@media print {
	.cabecera .nav,
	.pie,
	.comentarios,
	.post-navigation,
	.formulario,
	.visor {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* ==================================================================
   Magma: cabecera de la portada con la foto bajo el menú
   ================================================================== */

/* Foto a todo el ancho con el titular debajo (la foto
   manda arriba y el texto se lee sobre el fondo de la página). */
.hero--foto {
	padding: 0;
}

.hero__foto {
	position: relative;
	height: clamp(20rem, 62vh, 40rem);
	background: #1c2226;
	overflow: hidden;
}

.hero__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero--foto .hero__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
	text-align: center;
}

.hero--foto .hero__titulo,
.hero--foto .hero__texto {
	margin-inline: auto;
}

.hero--foto .hero__texto {
	font-weight: 600;
	color: var(--texto);
}

/* Zona superior sobre la foto ------------------------------------- */

/* La zona superior se queda en su sitio (así no tapa lo que haya antes, como
   la barra de un plugin en wp_body_open o la de administración) y es la foto
   la que sube por debajo de ella: --alto-superior es su altura real, medida
   con JavaScript. Sin JavaScript se sube de más (la foto se recorta arriba,
   pero el menú nunca queda sobre el fondo blanco de la página). */
.magma-sobre-foto .zona-superior {
	position: relative;
	z-index: 30;
	color: #ffffff;
}

.magma-sobre-foto .hero--foto,
.magma-sobre-foto .hero--fondo {
	margin-top: calc(-1 * var(--alto-superior, 12rem));
}

/* El velo: color y opacidad calculados para que el blanco llegue al contraste
   AA aunque la foto sea blanca (--velo-alfa nunca baja de ese mínimo). */
.magma-sobre-foto .hero__foto::before,
.magma-sobre-foto .hero__fondo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(var(--velo-rgb), var(--velo-alfa)) 0,
		rgba(var(--velo-rgb), var(--velo-alfa)) var(--alto-superior, 12rem),
		rgba(var(--velo-rgb), 0) calc(var(--alto-superior, 12rem) + 30%)
	);
}

/* Banda: solo detrás del menú, con un borde limpio. */
.magma-velo-banda .hero__foto::before,
.magma-velo-banda .hero__fondo::before {
	background: linear-gradient(
		180deg,
		rgba(var(--velo-rgb), var(--velo-alfa)) 0,
		rgba(var(--velo-rgb), var(--velo-alfa)) var(--alto-superior, 12rem),
		transparent var(--alto-superior, 12rem)
	);
}

/* La foto con el texto encima (imagen de fondo, slider) se oscurece entera con
   al menos el mismo mínimo: el titular también va en blanco sobre ella. */
.hero__fondo::after {
	background: rgba(0, 0, 0, var(--hero-oscurecer, 0.6));
	opacity: 1;
}

.magma-sobre-foto .hero--fondo {
	padding-top: calc(var(--alto-superior, 12rem) + var(--espacio));
	min-height: max(min(86vh, 52rem), 30rem);
}

/* Barra superior y cabecera, transparentes y en blanco. */
.magma-sobre-foto .barra {
	background: transparent;
	color: #ffffff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.magma-sobre-foto .barra a,
.magma-sobre-foto .barra .icono,
.magma-sobre-foto .barra__texto {
	color: #ffffff;
}

.magma-sobre-foto .cabecera {
	background: transparent;
	border-bottom: 0;
}

.magma-sobre-foto .marca__enlace,
.magma-sobre-foto .marca__nombre,
.magma-sobre-foto .modo,
.magma-sobre-foto .nav__boton {
	color: #ffffff;
}

.magma-sobre-foto .nav__boton {
	border-color: #ffffff;
}

.magma-sobre-foto .marca__logo--invertido {
	filter: brightness(0) invert(1);
}

/* Enlaces del menú (primer nivel). Los submenús conservan su fondo y sus colores. */
.magma-sobre-foto .nav__lista > li > a {
	color: #ffffff;
}

.magma-sobre-foto .nav__lista > li > a:hover,
.magma-sobre-foto .nav__lista > .current-menu-item > a,
.magma-sobre-foto .nav__lista > li > a[aria-current] {
	text-decoration-color: var(--destacado);
}

/* Botón de la cabecera: lima con texto negro (contraste 15,9:1). */
.magma-sobre-foto .nav__accion.boton {
	background: var(--destacado);
	border-color: var(--destacado);
	color: #111111;
}

.magma-sobre-foto .nav__accion.boton:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #111111;
}

/* Foco visible sobre cualquier foto: anillo blanco con borde oscuro. */
.magma-sobre-foto .zona-superior a:focus-visible,
.magma-sobre-foto .zona-superior button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #111111;
}

/* Fondo sólido: con el menú del móvil abierto y al bajar con la cabecera fija. */
.magma-sobre-foto .zona-superior.es-solida,
.magma-sobre-foto.magma-cabecera-fija .cabecera.es-compacta {
	background: var(--magma, #111111);
}

.magma-sobre-foto.magma-cabecera-fija .cabecera {
	position: relative;
	top: auto;
}

.magma-sobre-foto.magma-cabecera-fija .cabecera.es-compacta {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	inset-inline: 0;
}

/* El menú del móvil se despliega sobre el mismo fondo sólido que la cabecera
   abierta, con todos sus enlaces en blanco (también los de segundo nivel). */
@media (max-width: 44rem) {
	.js .magma-sobre-foto .nav__lista {
		background: var(--magma, #111111);
		border-bottom-color: rgba(255, 255, 255, 0.14);
	}

	.js .magma-sobre-foto .nav__lista a {
		color: #ffffff;
	}
}

/* Slider con la cabecera encima: en el móvil los controles bajan bajo el menú
   (arriba quedarían encima del botón «Menú»). */
@media (max-width: 47.99rem) {
	.magma-sobre-foto .hero__controles {
		top: calc(var(--alto-superior, 12rem) + 0.75rem);
	}
}

/* Alto contraste del sistema (Windows): sin velos ni colores forzados. */
@media (forced-colors: active) {
	.magma-sobre-foto .zona-superior {
		position: static;
		background: Canvas;
		color: CanvasText;
	}

	.magma-sobre-foto .hero__foto::before,
	.magma-sobre-foto .hero__fondo::before {
		display: none;
	}
}

/* ==================================================================
   Magma: logos de financiación (Kit Digital, UE…) y botón secundario
   ================================================================== */

.financiacion {
	padding-block: 1.5rem;
}

.financiacion--blanco {
	background: #ffffff;
	color: #222222;
}

.financiacion__interior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 2rem;
}

.financiacion__texto {
	margin: 0;
	font-family: var(--sans);
	font-size: 0.875rem;
}

.financiacion__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem 2.5rem;
}

.financiacion__logo {
	display: block;
	width: auto;
	max-width: min(100%, 16rem);
	height: auto;
	max-height: 3.5rem;
}

.financiacion--blanco a:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 3px;
}

.boton--secundario {
	background: transparent;
	color: var(--enlace);
	border-color: var(--enlace);
}

.boton--secundario:hover {
	background: var(--enlace);
	border-color: var(--enlace);
	color: var(--fondo);
}

/* Servicios en tarjetas: hasta cuatro por fila. */
.servicios--tarjetas {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* Cabecera «foto»: titular y presentación centrados; su ancho máximo se elige
   en Personalizar > Portada > Ancho del texto (por defecto, todo el contenedor). */
.hero--foto .hero__cuerpo > * {
	width: 100%;
}

/* ==================================================================
   Magma: diseño de empresa tecnológica
   Titulares gruesos, antetítulos con raya de acento, tarjetas con
   icono y bandas de color. Todo sale de la paleta (variables).
   ================================================================== */

:root {
	--radio: 6px;
	--radio-tarjeta: 10px;
	--sobre-acento: #ffffff;
	/* Fondo suave del acento: círculos de iconos y recuadros. */
	--acento-suave: #fbeaea;
	--acento-suave: color-mix(in srgb, var(--acento) 9%, var(--fondo));
	--acento-borde: #f4caca;
	--acento-borde: color-mix(in srgb, var(--acento) 28%, var(--fondo));
	/* Tonos de las tarjetas de sector sin imagen. */
	--tono-azul: #eaf0fd;
	--tono-rosa: #fbebeb;
	--tono-lila: #f3ecfd;
	--tono-verde: #e7f5f1;
	--tono-ambar: #fdf3e3;
	--tono-gris: #f0f0f0;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-modo="claro"]) {
		--tono-azul: #1b2233;
		--tono-rosa: #2d1c1c;
		--tono-lila: #251d33;
		--tono-verde: #182a24;
		--tono-ambar: #2d2416;
		--tono-gris: #222222;
	}
}

:root[data-modo="oscuro"] {
	--tono-azul: #1b2233;
	--tono-rosa: #2d1c1c;
	--tono-lila: #251d33;
	--tono-verde: #182a24;
	--tono-ambar: #2d2416;
	--tono-gris: #222222;
}

body {
	font-size: calc(1rem * var(--ajuste-texto) / 0.94);
	line-height: 1.65;
}

@media (min-width: 48rem) {
	body {
		font-size: calc(1.0625rem * var(--ajuste-texto) / 0.94);
	}
}

h1,
h2,
h3 {
	letter-spacing: -0.02em;
}

.resaltado {
	color: var(--enlace);
}

/* ---------- Antetítulo: pequeño, en mayúsculas y con una raya de acento ---------- */
.antetitulo,
p.is-style-magma-etiqueta {
	display: inline-block;
	margin: 0 0 1rem;
	padding-left: 0.6rem;
	border-left: 3px solid var(--enlace);
	color: var(--enlace);
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---------- Botones ---------- */
.boton,
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-weight: 700;
	border-radius: var(--radio);
	padding: 0.8rem 1.35rem;
}

.boton:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: #a82020;
	background: color-mix(in srgb, var(--enlace) 80%, #000000);
	border-color: #a82020;
	border-color: color-mix(in srgb, var(--enlace) 80%, #000000);
	color: var(--fondo);
}

.boton .icono,
button[type="submit"] .icono {
	flex: none;
}

.boton--contorno,
.is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: var(--enlace);
	color: var(--enlace);
}

.boton--contorno:hover,
.is-style-outline > .wp-block-button__link:hover {
	background: var(--enlace);
	border-color: var(--enlace);
	color: var(--fondo);
}

/* Sobre una banda de color de acento. */
.boton--claro {
	background: var(--sobre-acento);
	border-color: var(--sobre-acento);
	color: var(--acento);
}

.boton--claro:hover {
	background: transparent;
	border-color: var(--sobre-acento);
	color: var(--sobre-acento);
}

/* ---------- Cabecera ---------- */
.cabecera {
	padding-block: 0.85rem;
	background: var(--fondo);
}

.nav__lista a {
	font-weight: 500;
}

.nav__accion.boton {
	padding: 0.65rem 1.2rem;
}

/* ---------- Cabecera de la portada ---------- */
.hero--texto,
.hero--lateral {
	padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 5vw, 3.5rem);
}

.hero__antetitulo {
	margin-bottom: 1.25rem;
}

.hero__titulo,
.hero--lateral .hero__titulo {
	font-size: calc(clamp(2.1rem, 3.2vw + 1rem, 3.5rem) * var(--hero-escala-titulo, 1));
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.025em;
	-webkit-hyphens: manual;
	hyphens: manual;
}

.hero--texto .hero__cuerpo {
	max-width: 40rem;
}

.hero__texto {
	margin-top: 1.5rem;
	font-size: calc(1em * var(--hero-escala-texto, 1));
}

.hero__accion {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.hero--lateral .hero__imagen {
	aspect-ratio: 4 / 3;
	border-radius: 12px;
}

/* ---------- Franja de sectores bajo la cabecera ---------- */
.franja-sectores {
	border-block: 1px solid var(--linea);
}

.franja-sectores__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-block: 0;
	padding: 0;
	list-style: none;
}

.franja-sectores__item + .franja-sectores__item {
	border-left: 1px solid var(--linea);
}

.franja-sectores__enlace {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	height: 100%;
	padding: 1.35rem 1.25rem;
	color: var(--texto);
	text-decoration: none;
}

.franja-sectores__enlace:hover .franja-sectores__nombre {
	text-decoration: underline;
	text-decoration-color: var(--enlace);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.franja-sectores__icono {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--acento-suave);
	color: var(--enlace);
}

.franja-sectores__texto {
	display: grid;
	gap: 0.2rem;
	font-family: var(--sans);
}

.franja-sectores__nombre {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.franja-sectores__frase {
	color: var(--secundario);
	font-size: 0.8125rem;
	line-height: 1.45;
}

@media (max-width: 60rem) {
	.franja-sectores__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.franja-sectores__item:nth-child(odd) {
		border-left: 0;
	}

	.franja-sectores__item:nth-child(n + 3) {
		border-top: 1px solid var(--linea);
	}
}

@media (max-width: 30rem) {
	.franja-sectores__lista {
		grid-template-columns: minmax(0, 1fr);
	}

	.franja-sectores__item + .franja-sectores__item {
		border-left: 0;
		border-top: 1px solid var(--linea);
	}

	.franja-sectores__enlace {
		padding-inline: 0;
	}
}

/* ---------- Cabeceras de sección ---------- */
.cabecera-seccion {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.cabecera-seccion__titulo {
	font-size: clamp(1.75rem, 2.6vw + 0.8rem, 2.6rem);
	font-weight: 800;
	line-height: 1.15;
}

.cabecera-seccion__intro {
	margin-top: 1rem;
	max-width: 40rem;
	color: var(--secundario);
}

.cabecera-seccion__intro p + p {
	margin-top: 0.75rem;
}

.cabecera-seccion--centrada {
	text-align: center;
}

.cabecera-seccion--centrada .cabecera-seccion__titulo,
.cabecera-seccion--centrada .cabecera-seccion__intro {
	margin-inline: auto;
	max-width: 46rem;
}

.seccion__accion {
	margin-top: clamp(2rem, 4vw, 2.75rem);
	text-align: center;
}

/* ---------- Secciones libres de la portada: el aire según lo que llevan ---------- */
/* Las cifras van pegadas a lo anterior (la franja de sectores, una sección). */
.portada-libre:has(> .magma-patron-cifras:first-child) {
	padding-top: clamp(1rem, 3vw, 2rem);
}

/* La franja final de llamada (con su fondo gris) no necesita tanto hueco encima. */
.portada-libre:has(> .magma-patron-llamada-franja:first-child) {
	padding-top: clamp(2.5rem, 6vw, 4rem);
}

/* ---------- Servicios: tarjetas con icono ---------- */
.seccion--servicios {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding-block: var(--espacio);
	background: var(--superficie);
}

.seccion--servicios + .seccion,
.seccion--servicios + .portada-libre {
	margin-top: 0;
}

.servicios--tarjetas {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 1.25rem;
}

.servicio--tarjeta {
	border-radius: var(--radio-tarjeta);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.servicio--con-icono {
	padding: 1.6rem 1.5rem 1.5rem;
}

.servicio--con-icono .servicio__cuerpo,
.servicio--tarjeta.servicio--con-icono .servicio__cuerpo {
	padding: 0;
}

.servicio__icono {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	background: var(--acento-suave);
	color: var(--enlace);
}

.servicio--tarjeta .servicio__titulo {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
}

.servicio--tarjeta .servicio__titulo a {
	color: var(--texto);
	text-decoration: none;
}

.servicio--tarjeta .servicio__texto {
	margin-top: 0.6rem;
	color: var(--secundario);
	font-family: var(--sans);
	font-size: 0.875rem;
	line-height: 1.6;
}

.servicio__mas {
	margin-top: auto;
	padding-top: 1.1rem;
	color: var(--enlace);
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 700;
}

/* Toda la tarjeta es un enlace: el del título se estira sobre ella. */
.servicio--enlazada {
	position: relative;
}

.servicio--enlazada .servicio__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.servicio--enlazada:hover {
	border-color: var(--enlace);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

/* Con el teclado, además del contorno del título, se marca la tarjeta. */
.servicio--enlazada:has(.servicio__titulo a:focus-visible) {
	border-color: var(--enlace);
}

/* Tarjetas compactas: el resto de servicios, en una fila con el icono al lado. */
.servicios--compactas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	margin-top: 1.25rem;
	border: 1px solid var(--linea);
	border-radius: var(--radio-tarjeta);
	background: var(--fondo);
	overflow: hidden;
}

.servicio--compacta {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1.2rem 1.4rem;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.servicio--compacta + .servicio--compacta {
	border-left: 1px solid var(--linea);
}

.servicio--compacta .servicio__icono {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	flex: none;
}

.servicio--compacta .servicio__icono .icono {
	width: 20px;
	height: 20px;
}

.servicio--compacta .servicio__titulo {
	font-size: 0.9375rem;
}

.servicio--compacta .servicio__texto {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
}

.servicio--compacta.servicio--enlazada:hover {
	box-shadow: none;
	background: var(--superficie);
}

@media (max-width: 48rem) {
	.servicio--compacta + .servicio--compacta {
		border-left: 0;
		border-top: 1px solid var(--linea);
	}
}

/* ---------- Sectores ---------- */
.seccion-sectores {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.seccion-sectores__intro {
	position: relative;
	padding-bottom: 7rem;
}

/* Mancha decorativa bajo la introducción. */
.seccion-sectores__intro::after {
	content: "";
	position: absolute;
	left: 0.25rem;
	bottom: 0;
	width: 11rem;
	height: 6rem;
	border-radius: 58% 42% 46% 54% / 60% 55% 45% 40%;
	background: var(--acento-suave);
	transform: rotate(-8deg);
}

.seccion-sectores__intro .cabecera-seccion__titulo {
	font-size: clamp(1.9rem, 2.8vw + 0.8rem, 2.75rem);
}

@media (max-width: 56rem) {
	.seccion-sectores {
		grid-template-columns: minmax(0, 1fr);
	}

	.seccion-sectores__intro {
		padding-bottom: 0;
	}

	.seccion-sectores__intro::after {
		display: none;
	}
}

.sectores {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 1.25rem;
}

.seccion-sectores .sectores {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.sector {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--linea);
	border-radius: var(--radio-tarjeta);
	background: var(--fondo);
	overflow: hidden;
	scroll-margin-top: 6rem;
}

.sector__cabecera {
	display: grid;
	place-items: center;
	aspect-ratio: 2.9 / 1;
	background: var(--tono-gris);
	color: #555555;
}

.sector__cabecera img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sector--azul .sector__cabecera { background: var(--tono-azul); color: #3355aa; }
.sector--rosa .sector__cabecera { background: var(--tono-rosa); color: #b02a2a; }
.sector--lila .sector__cabecera { background: var(--tono-lila); color: #6b46b0; }
.sector--verde .sector__cabecera { background: var(--tono-verde); color: #2f7a5f; }
.sector--ambar .sector__cabecera { background: var(--tono-ambar); color: #96610b; }

.sector__cabecera .icono {
	opacity: 0.85;
}

.sector__cuerpo {
	padding: 1.3rem 1.4rem 1.5rem;
}

.sector__titulo {
	color: var(--enlace);
	font-size: 1.125rem;
	font-weight: 700;
}

.sector__titulo::after {
	content: "";
	display: block;
	width: 2rem;
	height: 2px;
	margin-top: 0.7rem;
	background: var(--enlace);
}

.sector__titulo a {
	color: inherit;
}

.sector__lista {
	display: grid;
	gap: 0.55rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--sans);
	font-size: 0.875rem;
	line-height: 1.45;
}

.sector__lista li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.sector__lista .icono {
	flex: none;
	margin-top: 0.1rem;
	color: var(--enlace);
	stroke-width: 2.4;
}

.sector__lista--ficha {
	margin-bottom: 2rem;
	font-size: 1rem;
}

.sector__texto {
	margin-top: 0.9rem;
	color: var(--secundario);
	font-size: 0.875rem;
}

/* ---------- Recuadro de llamada a la acción (suave) ---------- */
.recuadro-llamada {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: clamp(2rem, 4vw, 2.5rem);
	padding: 1.4rem 1.75rem;
	border: 1px solid var(--acento-borde);
	border-radius: var(--radio-tarjeta);
	background: var(--acento-suave);
}

.recuadro-llamada__icono {
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--fondo);
	color: var(--enlace);
}

.recuadro-llamada__texto {
	flex: 1 1 18rem;
}

.recuadro-llamada__titulo {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
}

.recuadro-llamada__texto p {
	margin-top: 0.3rem;
	color: var(--secundario);
	font-family: var(--sans);
	font-size: 0.875rem;
}

.contenedor > .recuadro-llamada:last-child {
	margin-bottom: var(--espacio);
}

/* ---------- Franja de llamada a la acción (caja de color de acento) ---------- */
.franja-llamada {
	margin-top: var(--espacio);
	padding-block: var(--espacio);
	background: var(--superficie);
}

.franja-llamada__caja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	padding: clamp(2rem, 5vw, 3rem);
	border-radius: 12px;
	background: var(--acento);
	color: var(--sobre-acento);
}

.franja-llamada__texto {
	flex: 1 1 24rem;
}

.franja-llamada__titulo {
	color: var(--sobre-acento);
	font-size: clamp(1.5rem, 2vw + 0.75rem, 2.1rem);
	font-weight: 800;
}

.franja-llamada__texto p {
	margin-top: 0.75rem;
}

.franja-llamada a:focus-visible {
	outline-color: var(--sobre-acento);
}

/* ---------- Cabecera de las páginas: centrada, con una línea debajo ---------- */
.banda--centrada {
	padding-block: clamp(3rem, 7vw, 4.5rem) clamp(2.25rem, 5vw, 3rem);
	text-align: center;
}

.banda--centrada::after {
	content: "";
	position: absolute;
	inset: auto calc(50% - 50vw) 0;
	border-bottom: 1px solid var(--linea);
}

.banda--centrada .articulo__titulo,
.banda--centrada .cabecera-seccion__titulo {
	font-size: clamp(2rem, 3.2vw + 0.8rem, 3rem);
	font-weight: 800;
	line-height: 1.12;
	max-width: 28ch;
	margin-inline: auto;
}

.banda--centrada .entradilla,
.banda--centrada .cabecera-seccion__intro {
	max-width: 38rem;
	margin-inline: auto;
	color: var(--secundario);
}

.banda--centrada .migas ol {
	justify-content: center;
}

.cabecera-pagina .cabecera-seccion {
	margin-bottom: 0;
}

.cabecera-pagina.banda--centrada {
	margin-bottom: 0;
}

/* ---------- Contacto: formulario en una tarjeta y datos en tarjetas ---------- */
@media (min-width: 56rem) {
	.contacto {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3rem;
	}
}

.articulo--contacto .contacto,
.articulo--contacto-solo .contacto {
	margin-bottom: var(--espacio);
}

.contacto__formulario .formulario {
	padding: clamp(1.5rem, 4vw, 2rem);
	border: 1px solid var(--linea);
	border-radius: 12px;
	background: var(--fondo);
}

.formulario label {
	font-size: 0.875rem;
	font-weight: 700;
}

.formulario .campo__opcional {
	font-weight: 400;
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario textarea,
.formulario select {
	background: var(--superficie);
	border-radius: var(--radio);
}

.campos-pareja {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

.campos-pareja .campo + .campo,
.campos-pareja + .campo {
	margin-top: 0;
}

.campos-pareja + .campo {
	margin-top: 1.25rem;
}

@media (min-width: 36rem) {
	.campos-pareja {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.campos-pareja--uno {
		grid-template-columns: minmax(0, 1fr);
	}
}

.formulario__enviar button[type="submit"] {
	width: 100%;
	padding-block: 0.95rem;
}

.tarjetas-contacto {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tarjeta-contacto {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	border: 1px solid var(--linea);
	border-radius: var(--radio-tarjeta);
	font-family: var(--sans);
	overflow-wrap: anywhere;
}

.tarjeta-contacto__icono {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--acento-suave);
	color: var(--enlace);
}

.tarjeta-contacto__titulo {
	font-size: 0.875rem;
	font-weight: 700;
}

.tarjeta-contacto p + p {
	margin-top: 0.15rem;
	color: var(--secundario);
	font-size: 0.9375rem;
}

.tarjeta-contacto a {
	color: var(--enlace);
}

.contacto__datos .redes {
	margin-top: 1rem;
}

/* ---------- Pie ---------- */
@media (min-width: 60.0625rem) {
	.pie__columnas {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
	}
}

.pie__nombre {
	font-family: var(--sans);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.pie .pie__nombre a {
	text-decoration: none;
}

.pie__nombre .resaltado {
	color: var(--enlace);
}

.magma-pie-oscuro .pie__nombre .resaltado {
	color: var(--magma-acento, #f87171);
}

.pie__titulo {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.magma-pie-oscuro .pie__titulo {
	color: var(--magma-secundario);
}

.pie__lista a,
.pie__contacto a {
	text-decoration: none;
}

.pie__lista a:hover,
.pie__contacto a:hover {
	text-decoration: underline;
}

.pie__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.pie__accion {
	margin-top: 1.1rem;
}

.pie__accion .boton {
	width: 100%;
	justify-content: flex-start;
	padding: 0.55rem 0.9rem;
	font-size: 0.875rem;
}

.magma-pie-oscuro .pie .boton--contorno {
	border-color: var(--magma-acento, #f87171);
	color: var(--magma-acento, #f87171);
	text-decoration: none;
}

.magma-pie-oscuro .pie .boton--contorno:hover {
	background: var(--magma-acento, #f87171);
	color: var(--magma, #1a1a1a);
	text-decoration: none;
}

/* Fila final: el texto del pie a la izquierda y los logos de financiación a la derecha. */
.pie__interior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.pie__texto {
	font-size: 0.8125rem;
}

.financiacion--en-linea {
	margin-left: auto;
	padding: 0.75rem 1.25rem;
	border-radius: 4px;
}

.financiacion--en-linea .financiacion__interior {
	justify-content: flex-end;
	gap: 0.5rem 1.5rem;
}

.financiacion--en-linea .financiacion__logos {
	justify-content: flex-end;
	gap: 0.75rem 1.5rem;
}

.financiacion--en-linea .financiacion__logo {
	max-height: 3rem;
	max-width: min(100%, 13rem);
}

@media (max-width: 40rem) {
	.financiacion--en-linea {
		width: 100%;
		margin-left: 0;
	}

	.financiacion--en-linea .financiacion__interior,
	.financiacion--en-linea .financiacion__logos {
		justify-content: center;
	}
}

/* Sin hueco blanco entre una franja final (de llamada) y el pie. */
.principal:has(> .franja-llamada:last-child) + .pie,
.principal:has(> .portada-libre:last-child > .magma-patron-llamada-franja:last-child) + .pie,
.principal:has(> .articulo:last-child > .contenido-entrada > .magma-patron-llamada-franja:last-child) + .pie {
	margin-top: 0;
}

.contenido-entrada > .magma-patron-llamada-franja:last-child,
.portada-libre > .magma-patron-llamada-franja:last-child {
	margin-bottom: 0;
}

/* En la banda, el contenedor sigue centrado. */
.banda > .contenedor {
	margin-inline: auto;
}

/* Tras la cabecera de una página de archivo, menos aire. */
.cabecera-pagina + .seccion {
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* La casilla de privacidad no va en negrita como las etiquetas de los campos. */
.formulario .campo-casilla label {
	font-weight: 400;
}

/* Cabeceras de las secciones de listas (testimonios, noticias, galerías): como las demás. */
.seccion__cabecera {
	border-top: 0;
	padding-top: 0;
}

.seccion__cabecera::before {
	display: none;
}

.seccion__cabecera h2,
.seccion__titulo {
	font-size: clamp(1.6rem, 2vw + 0.9rem, 2.2rem);
	font-weight: 800;
}

.seccion__titulo {
	margin-bottom: 2rem;
}

/* Con la imagen al lado, el titular ocupa su columna con un tamaño algo menor. */
.hero--lateral .hero__titulo {
	font-size: calc(clamp(2rem, 1.9vw + 1.1rem, 2.9rem) * var(--hero-escala-titulo, 1));
	max-width: none;
}