/*
Theme Name: Marina LP
Theme URI: https://marina.palmasport.es
Author: Inventia
Author URI: https://inventiaplus.com
Description: Tema de bloques accesible (WCAG 2.2 AA) de Marina Las Palmas. Sustituye a X y Cornerstone (ADR-0001). Basado en el tema fplp de la Fundación Puertos de Las Palmas.
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.3
Version: 1.17.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mlp
*/

/*
 * Solo lo que theme.json no puede expresar. Ningún valor visual literal: todo sale de los tokens
 * (docs/diseno/, M-004) vía --wp--preset--* y --wp--custom--*. Móvil primero.
 */

/* El foco no queda bajo la cabecera fija (2.4.11). */
html {
	scroll-padding-top: var(--wp--custom--foco--margen-scroll);
}

/* Foco visible en todo lo interactivo, no solo en enlaces y botones (2.4.7, D-6). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--foco--grosor) solid var(--wp--custom--foco--color);
	outline-offset: var(--wp--custom--foco--separacion);
}

/* Texto solo para lectores de pantalla (el core no lo define en los temas de bloques). */
.screen-reader-text:not(:focus) {
	block-size: var(--wp--custom--borde--fino);
	border: 0;
	clip-path: inset(50%);
	inline-size: var(--wp--custom--borde--fino);
	margin: calc(-1 * var(--wp--custom--borde--fino));
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	word-wrap: normal;
}

/* «Saltar al contenido» del core (primer elemento enfocable), con los colores del tema. */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--primario);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--peso--fuerte);
	inset-block-start: var(--wp--preset--spacing--40);
	inset-inline-start: var(--wp--preset--spacing--40);
	outline: var(--wp--custom--foco--grosor) solid var(--wp--custom--foco--color);
	outline-offset: var(--wp--custom--foco--separacion);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	text-decoration: underline;
	z-index: 100;
}

/* Objetivos de puntero mínimos en botones (2.5.8). */
.wp-element-button,
.wp-block-button__link {
	min-block-size: var(--wp--custom--control--alto);
	min-inline-size: var(--wp--custom--control--objetivo-min);
}

/* Sin animaciones para quien lo pide (2.3.3). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── Estructura: las partes y el contenido van pegados (cada banda lleva su propio relleno) ── */

.wp-site-blocks > * {
	margin-block: 0;
}

/* La caja de la web actual: 1100 px de contenido más el margen lateral a cada lado. */
.mlp-envoltorio {
	box-sizing: border-box;
	margin-inline: auto;
	max-inline-size: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--custom--margen-lateral));
	padding-inline: var(--wp--custom--margen-lateral);
}

/* ── Banda de título de página (96 px, líneas finas; guía de estilo) ── */

.mlp-banda-titulo {
	align-items: center;
	background-color: var(--wp--preset--color--superficie);
	border-block: var(--wp--custom--borde--fino) solid var(--wp--preset--color--linea);
	display: flex;
	min-block-size: var(--wp--custom--alto--banda-titulo);
}

.mlp-banda-titulo > * {
	inline-size: 100%;
}

.mlp-banda-titulo .wp-block-post-title {
	margin: 0;
}

/* En móvil, el título de la banda va centrado, como hoy (v1.13.6). */
.mlp-banda-titulo :is(h1, .mlp-banda-titulo__texto) {
	text-align: center;
}

@media (min-width: 600px) /* --bp-tableta */ {
	.mlp-banda-titulo :is(h1, .mlp-banda-titulo__texto) {
		text-align: start;
	}
}

/* Tras la banda del título, el contenido empieza a 32 px, como hoy (v1.13.6). */
.mlp-banda-titulo + .mlp-contenido.mlp-contenido {
	margin-block-start: 0;
	padding-block-start: var(--wp--preset--spacing--60);
}

/* Contenido de la página: su propio relleno y, a 320 px, nada desborda (1.4.10). */
.mlp-contenido {
	overflow-wrap: break-word;
	padding-block: var(--wp--preset--spacing--seccion);
}

.mlp-contenido img {
	block-size: auto;
	max-inline-size: 100%;
}

/* Tras la foto de cabecera, o arriba del todo en una página sin banda, el contenido empieza cerca, como hoy (unos
   40 px en la web actual; v1.13.3). */
.mlp-cabecera-foto + .mlp-contenido,
main > .screen-reader-text + .mlp-contenido {
	padding-block-start: var(--wp--preset--spacing--60);
}

/* El contenido de las páginas, al 88 % del contenedor y centrado, como las secciones de Cornerstone en la web actual
   (968 px de 1100; v1.13.1). La cabecera, la banda, los archivos, el directorio y el pie siguen a todo el contenedor,
   como allí. */
.page .mlp-contenido > .mlp-envoltorio > .wp-block-post-content:not(:has(> .wp-block-mlp-directorio)) {
	margin-inline: auto;
	max-inline-size: var(--wp--custom--proporcion-contenido);
}

/* ── Páginas con menú lateral (C03; prototipo «dos-col con-lateral»): el menú a la izquierda desde --bp-escritorio ── */

.mlp-con-lateral {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.mlp-con-lateral.mlp-con-lateral > * {
	margin-block: 0;
}

@media (min-width: 980px) /* --bp-escritorio */ {
	.mlp-con-lateral {
		align-items: start;
		grid-template-columns: 1fr 3fr;
	}
}

/* Lema de sección («MARINA LAS PALMAS, LA RESPUESTA…»): aspecto de título de sección, pero no es un encabezado
   (no titula lo que sigue; guía de estilo: el nivel lo da la estructura, el aspecto lo da la clase). En la portada
   (C06) sí titula la presentación que sigue y es un h2; el h1 de la portada lleva el mismo aspecto, a la izquierda. */
.mlp-lema,
.mlp-titulo-seccion {
	color: var(--wp--preset--color--titulo-seccion);
	font-size: var(--wp--preset--font-size--seccion);
	letter-spacing: var(--wp--custom--espaciado--seccion);
	line-height: var(--wp--custom--interlineado--titulo);
	text-transform: uppercase;
}

.mlp-lema strong,
.mlp-titulo-seccion strong {
	font-weight: var(--wp--custom--peso--fuerte);
}

/* A la derecha, como en la web actual (en móvil también, v1.13.3); en escritorio, en dos líneas (v1.3.1). */
.mlp-lema {
	text-align: end;
}

@media (min-width: 980px) /* --bp-escritorio */ {
	.mlp-lema {
		margin-inline-start: auto;
		max-inline-size: 20em;
	}
}

/* ── Documentos: tipo y tamaño detrás del nombre (guía de estilo: «Nombre (PDF, 350 KB)»; los pone el tema, C04) ── */

.mlp-documento {
	font-weight: var(--wp--custom--peso--texto);
	white-space: nowrap;
}

/* Lista de documentos (C04): el nombre es el enlace; separación entre elementos, que pueden ocupar varias líneas. */
.mlp-lista-documentos > li + li {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ── Texto largo (páginas legales, C04): el ancho de lectura de los tokens (50rem) ── */

.mlp-lectura {
	max-inline-size: var(--wp--style--global--content-size);
}

.mlp-lectura h2 {
	margin-block-start: var(--wp--preset--spacing--70);
}

.mlp-lectura h3 {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Páginas legales y declaración (v1.13.3): el texto a todo el ancho del contenido y los títulos con el aspecto de hoy,
   negrita al tamaño del texto y en «titulo» (siguen siendo encabezados, 1.3.1). */
.page .wp-block-post-content > .mlp-lectura {
	max-inline-size: none;
}

.page .mlp-lectura :is(h2, h3),
.mlp-titulo-texto.mlp-titulo-texto {
	color: var(--wp--preset--color--titulo);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--peso--fuerte);
	letter-spacing: normal;
	line-height: var(--wp--custom--interlineado--texto);
}

.page .mlp-lectura :is(h2, h3) {
	margin-block-start: var(--wp--preset--spacing--50);
	text-transform: none;
}

/* Tablas de cookies: encabezados de columna a la izquierda, filas con línea fina; a 320 px, sin desbordar. */
.mlp-lectura .wp-block-table table {
	border-collapse: collapse;
	inline-size: 100%;
}

.mlp-lectura .wp-block-table :is(th, td) {
	border: 0;
	border-block-end: var(--wp--custom--borde--fino) solid var(--wp--preset--color--borde-suave);
	overflow-wrap: anywhere;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	text-align: start;
	vertical-align: top;
}

.mlp-lectura .wp-block-table th {
	color: var(--wp--preset--color--titulo);
	font-weight: var(--wp--custom--peso--fuerte);
}

/* ── Botones destacados (Guía de usuario): rejilla de 1, 2 o 4, en mayúsculas y negrita como en la web actual ── */

.wp-block-buttons.mlp-botones-destacados {
	align-items: stretch;
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 600px) /* --bp-tableta */ {
	.wp-block-buttons.mlp-botones-destacados {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 980px) /* --bp-escritorio */ {
	.wp-block-buttons.mlp-botones-destacados {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Todos del mismo alto en cada fila, con el texto centrado, lleven o no el tamaño del documento. */
.mlp-botones-destacados .wp-block-button {
	display: flex;
}

.mlp-botones-destacados .wp-block-button__link {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	text-transform: uppercase;
}

/* ── Lista con iconos (Guía de usuario; prototipo «lista-iconos»): círculo primario de 60 px con icono ── */

.mlp-lista-iconos.mlp-lista-iconos {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin-block-start: var(--wp--preset--spacing--70);
	padding: 0;
}

/* Si es lo primero del contenido (Lista de espera, C04), sin el margen que la separa de los botones de la Guía. */
.mlp-lista-iconos.mlp-lista-iconos:first-child {
	margin-block-start: 0;
}

/* El texto va en línea (nombre y tamaño del documento siguen juntos al partirse) junto al círculo, centrado con él. */
.mlp-lista-iconos a {
	box-sizing: border-box;
	color: var(--wp--preset--color--titulo);
	display: inline-block;
	font-size: var(--wp--preset--font-size--ficha);
	min-block-size: var(--wp--custom--icono-circulo);
	padding-block: calc((var(--wp--custom--icono-circulo) - 1lh) / 2);
	padding-inline-start: calc(var(--wp--custom--icono-circulo) + var(--wp--preset--spacing--40));
	position: relative;
	text-decoration: none;
}

.mlp-lista-iconos a:hover {
	text-decoration: underline;
}

.mlp-lista-iconos .mlp-documento {
	font-size: var(--wp--preset--font-size--pequeno);
}

/* El icono (decorativo) se recorta del círculo y se ve en el color del fondo. Sin clase de icono, círculo liso. */
.mlp-lista-iconos a::before {
	background-color: var(--wp--preset--color--primario);
	block-size: var(--wp--custom--icono-circulo);
	border-radius: 50%;
	content: "";
	inline-size: var(--wp--custom--icono-circulo);
	inset-block-start: 50%;
	inset-inline-start: 0;
	position: absolute;
	translate: 0 -50%;
	-webkit-mask: var(--mlp-icono, linear-gradient(transparent 0 0)) center / 50% no-repeat, linear-gradient(black 0 0);
	-webkit-mask-composite: xor;
	mask: var(--mlp-icono, linear-gradient(transparent 0 0)) center / 50% no-repeat exclude, linear-gradient(black 0 0);
}

.mlp-icono-nube {
	--mlp-icono: url(assets/iconos/nube.svg);
}

.mlp-icono-balanza {
	--mlp-icono: url(assets/iconos/balanza.svg);
}

.mlp-icono-mapa {
	--mlp-icono: url(assets/iconos/mapa.svg);
}

.mlp-icono-fuego {
	--mlp-icono: url(assets/iconos/fuego.svg);
}

.mlp-icono-documento {
	--mlp-icono: url(assets/iconos/documento.svg);
}

/* v1.13.3: los iconos que usa hoy la web en Lista de espera y en la Guía (dibujos propios, del mismo estilo). */
.mlp-icono-check {
	--mlp-icono: url(assets/iconos/check.svg);
}

.mlp-icono-barco {
	--mlp-icono: url(assets/iconos/barco.svg);
}

.mlp-icono-mapa-marcas {
	--mlp-icono: url(assets/iconos/mapa-marcas.svg);
}

.mlp-icono-lista {
	--mlp-icono: url(assets/iconos/lista.svg);
}

/* Títulos dentro del texto de una entrada (v1.13.6): con el aspecto de hoy, negrita al tamaño del texto y en el color
   del texto (siguen siendo encabezados, 1.3.1). */
.single .mlp-lectura .wp-block-post-content :is(h2, h3, h4) {
	color: var(--wp--preset--color--texto);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--peso--fuerte);
	letter-spacing: normal;
	line-height: var(--wp--custom--interlineado--texto);
	text-transform: none;
}

/* Ficha del directorio (v1.13.3, como hoy): sin banda; el nombre, el h1, al principio del contenido, en
   «titulo-seccion» y a 20 px. */
.mlp-lectura .mlp-ficha__titulo {
	color: var(--wp--preset--color--titulo-seccion);
	font-size: var(--wp--preset--font-size--seccion);
	letter-spacing: var(--wp--custom--espaciado--seccion);
	margin-block: 0 var(--wp--preset--spacing--50);
}

/* ── Avisos y eventos (C05, RF-09): entrada, tarjetas de noticia, paginación y buscador ── */

/* Fecha de la tarjeta: secundaria y al suelo de 12 px. */
.mlp-tarjeta__fecha {
	color: var(--wp--preset--color--texto-secundario);
	font-size: var(--wp--preset--font-size--minimo);
}

/* Entrada (v1.13.3, como hoy): «Noticias» en la banda, con el aspecto del título de página pero sin ser un
   encabezado; el título de la entrada, el h1, encima de la foto, y la foto enmarcada. */
.mlp-banda-titulo .mlp-banda-titulo__texto {
	color: var(--wp--preset--color--titulo);
	font-size: var(--wp--preset--font-size--pagina);
	letter-spacing: var(--wp--custom--espaciado--titulo);
	line-height: var(--wp--custom--interlineado--titulo);
	margin: 0;
}

.mlp-lectura .mlp-entrada__titulo {
	font-size: var(--wp--preset--font-size--bloque);
	letter-spacing: var(--wp--custom--espaciado--seccion);
	margin-block-end: 0;
}

.mlp-lectura .mlp-entrada__fecha {
	color: var(--wp--preset--color--texto-secundario);
	font-size: var(--wp--preset--font-size--minimo);
	margin-block-start: var(--wp--preset--spacing--10);
}

.mlp-entrada__foto {
	background-color: var(--wp--preset--color--superficie);
	border: var(--wp--custom--borde--tarjeta) solid var(--wp--preset--color--borde-suave);
	margin-block-end: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--20);
}

/* Rejilla de tarjetas: 1, 2 o 3 columnas (prototipo «rejilla--3»), todas del mismo alto por fila. */
.mlp-rejilla-tarjetas.mlp-rejilla-tarjetas {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mlp-rejilla-tarjetas > li {
	display: flex;
	margin: 0;
}

@media (min-width: 600px) /* --bp-tableta */ {
	.mlp-rejilla-tarjetas.mlp-rejilla-tarjetas {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 980px) /* --bp-escritorio */ {
	.mlp-rejilla-tarjetas.mlp-rejilla-tarjetas {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Tarjeta de noticia (guía de estilo): blanca, borde de 2 px, un único enlace (el título) que se extiende a toda la
   tarjeta; el foco se dibuja alrededor de la tarjeta, en la parte del enlace que la cubre. */
.mlp-tarjeta.mlp-tarjeta {
	background-color: var(--wp--preset--color--superficie);
	border: var(--wp--custom--borde--tarjeta) solid var(--wp--preset--color--borde-suave);
	box-sizing: border-box;
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
	position: relative;
}

.mlp-tarjeta > * {
	margin-block: 0;
}

.mlp-tarjeta .mlp-tarjeta__foto {
	background-color: var(--wp--preset--color--superficie);
	block-size: calc(var(--wp--custom--alto--foto-cabecera) * 0.5);
	border-block-end: var(--wp--custom--borde--fino) solid var(--wp--preset--color--borde-suave);
}

/* Logos y carteles: enteros, sin recortar (el bloque lleva «scale: contain»). */
.mlp-tarjeta .mlp-tarjeta__foto img {
	block-size: 100%;
	inline-size: 100%;
}

/* Título de tarjeta: 17 px en «titulo», sin el aspecto de título de sección de los h2 (prototipo «tarjeta h3»). */
.mlp-tarjeta .mlp-tarjeta__titulo {
	font-size: var(--wp--preset--font-size--tarjeta);
	font-weight: var(--wp--custom--peso--titulo);
	letter-spacing: normal;
	line-height: var(--wp--custom--interlineado--compacto);
	text-transform: none;
	margin: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--10);
}

.mlp-tarjeta__titulo a {
	color: var(--wp--preset--color--titulo);
	text-decoration: none;
}

.mlp-tarjeta__titulo a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.mlp-tarjeta__titulo a:hover {
	text-decoration: underline;
}

.mlp-tarjeta__titulo a:focus-visible {
	outline: none;
}

.mlp-tarjeta__titulo a:focus-visible::after {
	outline: var(--wp--custom--foco--grosor) solid var(--wp--custom--foco--color);
	outline-offset: var(--wp--custom--foco--separacion);
}

.mlp-tarjeta .mlp-tarjeta__fecha {
	margin: auto var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--10);
}

/* Recuadro de reserva de la tarjeta sin imagen destacada (v1.13.1), como en la web actual: «primario» con el icono de
   documento en blanco. Decorativo (aria-hidden). */
.mlp-tarjeta .mlp-tarjeta__foto--reserva {
	background-color: var(--wp--preset--color--primario);
	position: relative;
}

.mlp-tarjeta__foto--reserva::before {
	background-color: var(--wp--preset--color--sobre-primario);
	content: "";
	inset: 0;
	position: absolute;
	-webkit-mask: url(assets/iconos/documento.svg) center / calc(var(--wp--custom--icono-circulo) / 2) no-repeat;
	mask: url(assets/iconos/documento.svg) center / calc(var(--wp--custom--icono-circulo) / 2) no-repeat;
}

/* Archivos y búsqueda (v1.13.1): el título con el aspecto de título de sección y el extracto debajo, como en la web
   actual. En la portada la tarjeta sigue sin extracto y con el título tal cual, como allí. */
.mlp-tarjeta--archivo .mlp-tarjeta__titulo {
	color: var(--wp--preset--color--titulo-seccion);
	font-size: var(--wp--preset--font-size--seccion);
	letter-spacing: var(--wp--custom--espaciado--seccion);
	line-height: var(--wp--custom--interlineado--titulo);
	text-transform: uppercase;
}

.mlp-tarjeta--archivo .mlp-tarjeta__titulo a {
	color: inherit;
}

.mlp-tarjeta .mlp-tarjeta__extracto {
	font-size: var(--wp--preset--font-size--pequeno);
	margin: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) 0;
}

.mlp-tarjeta__extracto p {
	margin: 0;
}

/* Paginación: objetivos de 24 × 24 px como mínimo (2.5.8); la página actual, en «titulo» y subrayada. */
.mlp-paginacion.mlp-paginacion {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--60);
}

.mlp-paginacion :is(a, .page-numbers) {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	min-block-size: var(--wp--custom--control--alto);
	min-inline-size: var(--wp--custom--control--alto);
	padding-inline: var(--wp--preset--spacing--20);
}

.mlp-paginacion .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.mlp-paginacion .page-numbers.current {
	color: var(--wp--preset--color--titulo);
	font-weight: var(--wp--custom--peso--fuerte);
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--borde--indicador);
}

/* Resultados de búsqueda (v1.13.3, como hoy): una lista con el título, con aspecto de título de sección, y el extracto. */
.mlp-resultados.mlp-resultados {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mlp-resultados > li + li {
	margin-block-start: var(--wp--preset--spacing--70);
}

.mlp-resultados .mlp-resultado__titulo {
	margin-block: 0;
}

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

.mlp-resultado__titulo a:hover {
	text-decoration: underline;
}

.mlp-resultados .mlp-resultado__extracto {
	font-size: var(--wp--preset--font-size--pequeno);
	margin-block-start: var(--wp--preset--spacing--30);
}

.mlp-resultado__extracto p {
	margin: 0;
}

/* Buscador (búsqueda y 404): etiqueta visible encima, campo de 44 px con borde de 1 px y botón sólido. */
.mlp-buscador {
	margin-block-end: var(--wp--preset--spacing--60);
	max-inline-size: var(--wp--style--global--content-size);
}

.mlp-buscador .wp-block-search__label {
	display: block;
	font-weight: var(--wp--custom--peso--fuerte);
	margin-block-end: var(--wp--preset--spacing--20);
}

.mlp-buscador .wp-block-search__inside-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.mlp-buscador .wp-block-search__input {
	background-color: var(--wp--preset--color--superficie);
	border: var(--wp--custom--borde--fino) solid var(--wp--preset--color--borde-campo);
	border-radius: 0;
	box-sizing: border-box;
	color: var(--wp--preset--color--texto);
	flex: 1 1 12rem;
	font: inherit;
	min-block-size: var(--wp--custom--control--alto);
	padding-inline: var(--wp--preset--spacing--30);
}

/* Botón sólido («Buscar», guía de estilo): relleno primario; hover en «titulo-bloque»; sin sombra. */
.mlp-buscador .wp-block-search__button {
	background-color: var(--wp--preset--color--primario);
	border-color: var(--wp--preset--color--primario);
	box-shadow: none;
	color: var(--wp--preset--color--sobre-primario);
	margin: 0;
}

.mlp-buscador .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--titulo-bloque);
	border-color: var(--wp--preset--color--titulo-bloque);
}

/* ── Portada (C06; prototipo «portada»): titular con el logo, teselas, presentación y noticias ── */

/* Como en la web actual (v1.13.2), en las páginas que empiezan por la foto de cabecera (portada, Recomendaciones,
   Contacto, Calculadora…): arriba del todo, la foto empieza detrás de la cabecera, que es un degradado blanco sobre
   ella. El blanco es opaco hasta donde llega el texto del menú (1.4.3); el logo puede ir sobre el degradado. Al bajar
   (es-fija), la cabecera vuelve a ser blanca. En móvil la foto no se ve (v1.13.6: hoy queda tapada por la cabecera),
   así que la cabecera sigue blanca y el contenido empieza debajo. */
.mlp-cabecera-foto.mlp-cabecera-foto {
	display: none;
}

@media (min-width: 600px) /* --bp-tableta */ {
	.mlp-cabecera-foto.mlp-cabecera-foto {
		display: block;
	}

	.mlp-cabecera-sitio:not(.es-fija):has(+ main > .mlp-cabecera-foto) {
		background-color: transparent;
		background-image: linear-gradient(var(--wp--preset--color--superficie) 75%, transparent);
	}

	.mlp-cabecera-sitio + main:has(> .mlp-cabecera-foto) {
		margin-block-start: calc(-1 * var(--wp--custom--alto--cabecera));
	}
}

/* El contenido empieza más cerca de la foto, como hoy (39 px en la web actual). */
.mlp-portada > .mlp-contenido {
	padding-block-start: var(--wp--preset--spacing--60);
}

/* Dos columnas iguales desde --bp-escritorio (titular y logo, presentación, foto y texto); una en móvil. */
.mlp-dos-columnas.mlp-dos-columnas {
	align-items: start;
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.mlp-dos-columnas.mlp-dos-columnas > *,
.mlp-columna > :first-child {
	margin-block: 0;
}

@media (min-width: 980px) /* --bp-escritorio */ {
	.mlp-dos-columnas.mlp-dos-columnas {
		grid-template-columns: repeat(2, 1fr);
	}
}

.mlp-portada__titular.mlp-portada__titular {
	align-items: center;
}

.mlp-portada .mlp-titulo-seccion {
	margin: 0;
}

/* El titular de la portada, sin negrita en «Marina Las Palmas», como hoy (v1.13.2; el lema sí la lleva). */
.mlp-portada__titular .mlp-titulo-seccion strong {
	font-weight: var(--wp--custom--peso--texto);
}

/* El logo grande junto al titular, como en la web actual (deriva de layout del C06: el prototipo no lo lleva), de
   293 px como allí (v1.13.2). */
.mlp-portada__logo {
	justify-self: end;
}

.mlp-portada__logo img {
	display: block;
	inline-size: var(--wp--custom--ancho-logo-portada);
}

/* El lema de la presentación, alineado a la izquierda y, en escritorio, al principio de la columna derecha, como hoy
   (v1.13.2). */
.mlp-portada .mlp-portada__seccion > .mlp-lema {
	text-align: start;
}

@media (min-width: 980px) /* --bp-escritorio */ {
	.mlp-portada .mlp-portada__seccion > .mlp-lema {
		inline-size: calc((100% - var(--wp--preset--spacing--60)) / 2);
		max-inline-size: none;
	}
}

/* «Nuestras instalaciones de reparación»: sigue siendo un h3, con el aspecto de hoy (negrita, color del texto de
   título y tamaño del texto; v1.13.2). */
.mlp-portada .mlp-columna h3 {
	color: var(--wp--preset--color--titulo);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--peso--fuerte);
	letter-spacing: normal;
}

/* Tarjetas de noticias de la portada: la foto (o el recuadro de reserva) en 16:9 y con un margen blanco, como hoy. */
.mlp-portada__noticias .mlp-tarjeta .mlp-tarjeta__foto {
	aspect-ratio: var(--wp--custom--proporcion-foto-tarjeta);
	block-size: auto;
	border-block-end: 0;
	margin: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0;
}

.mlp-portada__seccion.mlp-portada__seccion {
	margin-block-start: var(--wp--preset--spacing--seccion);
}

.mlp-portada__noticias .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Teselas (guía de estilo, D-4): 1, 2 o 4 columnas; foto decorativa y el texto en HTML sobre primario. */
.mlp-teselas.mlp-teselas {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--60);
}

@media (min-width: 600px) /* --bp-tableta */ {
	.mlp-teselas.mlp-teselas {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 980px) /* --bp-escritorio */ {
	.mlp-teselas.mlp-teselas {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Dos teselas (C07, Directorio Marina): 1 columna en móvil y 2 desde --bp-tableta; nunca 4 con huecos. */
@media (min-width: 980px) /* --bp-escritorio */ {
	.mlp-teselas--dos.mlp-teselas--dos {
		grid-template-columns: repeat(2, 1fr);
	}
}

.mlp-tesela.mlp-tesela {
	background-color: var(--wp--preset--color--primario);
	display: grid;
	margin: 0;
	position: relative;
}

/* Foto y rótulo en la misma celda (v1.13.2): el rótulo, al pie y encima de la foto, sin posicionarlo, para que el
   ::after de su enlace siga cubriendo toda la tesela. */
.mlp-tesela > * {
	grid-area: 1 / 1;
	margin-block: 0;
}

/* La foto trae la ola de la marca dibujada al pie: entera, a todo el ancho de la tesela (deriva de layout del C06).
   El rótulo va encima, al pie, sobre una franja «primario» que tapa la ola (v1.13.2): la tesela mide lo que la foto,
   como hoy, y el texto blanco cumple el contraste (6,41:1; sobre la ola clara de hoy era 2,8:1). */
.mlp-tesela .mlp-tesela__foto img {
	block-size: auto;
	display: block;
	inline-size: 100%;
}

.mlp-tesela__texto {
	align-self: end;
	background-color: var(--wp--preset--color--primario);
	color: var(--wp--preset--color--sobre-primario);
	font-size: var(--wp--custom--texto--tesela);
	font-weight: var(--wp--custom--peso--fuerte);
	line-height: var(--wp--custom--interlineado--compacto);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	text-transform: uppercase;
}

/* Un único enlace, el texto, que se extiende a toda la tesela; el foco, alrededor de la tesela (en su ::after). */
.mlp-tesela__texto a {
	color: inherit;
	text-decoration: none;
}

.mlp-tesela__texto a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.mlp-tesela__texto a:hover {
	text-decoration: underline;
}

.mlp-tesela__texto a:focus-visible {
	outline: none;
}

.mlp-tesela__texto a:focus-visible::after {
	outline: var(--wp--custom--foco--grosor) solid var(--wp--custom--foco--color);
	outline-offset: var(--wp--custom--foco--separacion);
}