/*
Theme Name: Colada
Theme URI: https://www.tagoror.com
Author: Tagoror Networks
Author URI: https://www.tagoror.com
Description: Theme for laundromat chains and local businesses with several locations: each laundromat with its address, phone, opening hours and “how to get here”, services with prices and a front page with the photo under the menu. Designed to pass accessibility audits: guaranteed contrast over the photo, correct heading order and a space for the Kit Digital funding logos.
Version: 0.2.5
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: colada
Update URI: https://licencias.tagoror.com/colada
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). */
.colada-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. */
.colada-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 > .colada-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 Colada 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*="colada-patron-"] {
	margin-block: clamp(2.75rem, 6vw, 4.5rem);
}

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

.contenido-entrada > [class*="colada-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). */
.colada-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
   ------------------------------------------------------------------ */

/*
 * «Colada»: 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 {
	--colada: #1a2226;
	--colada: color-mix(in srgb, var(--acento) 16%, #14191c);
	--colada-texto: #e9edef;
	--colada-secundario: #aeb8be;
	--colada-linea: rgba(255, 255, 255, 0.14);
}

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

.barra {
	background: var(--colada);
	color: var(--colada-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(--colada-secundario);
}

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

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

.barra a {
	color: var(--colada-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(--colada-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;
}

/* La columna de contacto lleva el correo y el horario: es la que más texto
   tiene, así que se le da más ancho. Sin columnas vacías al final cuando
   faltan el menú o las redes. */
.pie__columnas--4 {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
}

.pie__columnas--3 {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr);
}

.pie__columnas--2 {
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

@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);
	}
}

/* Solo la marca: una columna a cualquier ancho (después de las de arriba). */
.pie__columnas--1 {
	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);
}

/* Alto contraste de Windows: el fondo del pie pasa al del sistema (blanco o
   negro) y un logo claro pensado para el pie oscuro dejaría de verse; lleva
   su propio fondo oscuro, como en la cabecera. El invertido se pinta en
   claro porque el filtro también invierte el fondo. */
@media (forced-colors: active) {
	.pie__logo--claro,
	.pie__logo--invertir {
		forced-color-adjust: none;
		box-sizing: content-box;
		padding: 0.35rem 0.6rem;
		border-radius: var(--radio, 4px);
		background: #111111;
	}

	.pie__logo--invertir {
		background: #eeeeee;
	}
}

/* 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. */
.colada-pie-oscuro .pie {
	background: var(--colada);
	color: var(--colada-secundario);
	border-top: 0;
	padding-block: 3.5rem 2.75rem;
}

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

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

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

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

.colada-pie-oscuro .pie__columnas,
.colada-pie-oscuro .pie__widgets {
	border-bottom-color: var(--colada-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) ---------- */

/* La cabecera va dentro de .zona-superior (con el aviso y la barra), y un
   elemento «sticky» no sale de su contenedor: lo que se queda fijo es la zona
   entera, subida lo que miden el aviso y la barra (--fija-desplazamiento,
   medido con JavaScript). Así ellos se van al bajar y la cabecera se queda.
   Sin JavaScript se queda fija la zona completa. */
.colada-cabecera-fija .cabecera {
	z-index: 40;
	background: var(--fondo);
	transition: padding 0.2s ease, box-shadow 0.2s ease;
}

.colada-cabecera-fija:not(.colada-sobre-foto) .zona-superior {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--fija-desplazamiento, 0px));
	z-index: 40;
}

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

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

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

.colada-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(.colada-cabecera-fija) {
	scroll-padding-top: 6rem;
}

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

@media (prefers-reduced-motion: reduce) {
	.colada-cabecera-fija .cabecera,
	.colada-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;
	}
}

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

/* Foto a todo el ancho con el titular debajo (como en una lavandería: 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). */
.colada-sobre-foto .zona-superior {
	position: relative;
	z-index: 30;
	color: #ffffff;
}

.colada-sobre-foto .hero--foto,
.colada-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). */
.colada-sobre-foto .hero__foto::before,
.colada-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. */
.colada-velo-banda .hero__foto::before,
.colada-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;
}

.colada-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. */
.colada-sobre-foto .barra {
	background: transparent;
	color: #ffffff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

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

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

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

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

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

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

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

/* Botón de la cabecera: el color destacado (lima por defecto), con el texto en
   blanco o casi negro según cuál se lea sobre él (--sobre-destacado). */
.colada-sobre-foto .nav__accion.boton {
	background: var(--destacado);
	border-color: var(--destacado);
	color: var(--sobre-destacado, #111111);
}

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

/* Foco visible sobre cualquier foto: anillo blanco con borde oscuro. */
.colada-sobre-foto .zona-superior a:focus-visible,
.colada-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. */
.colada-sobre-foto .zona-superior.es-solida,
.colada-sobre-foto.colada-cabecera-fija .cabecera.es-compacta {
	background: var(--colada, #111111);
}

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

.colada-sobre-foto.colada-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 .colada-sobre-foto .nav__lista {
		background: var(--colada, #111111);
		border-bottom-color: rgba(255, 255, 255, 0.14);
	}

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

	/* Los submenús, sin su fondo de escritorio: el texto blanco va sobre el color. */
	.js .colada-sobre-foto .nav__lista .sub-menu {
		background: transparent;
	}
}

/* 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) {
	.colada-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) {
	.colada-sobre-foto .zona-superior {
		position: static;
		background: Canvas;
		color: CanvasText;
	}

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

	/* Sin la capa de encima, la foto no sube bajo la cabecera: va debajo de
	   ella (si no, la taparía entera). */
	.colada-sobre-foto .hero--foto,
	.colada-sobre-foto .hero--fondo {
		margin-top: 0;
	}

	.colada-sobre-foto .hero--fondo {
		padding-top: var(--espacio);
	}

	.colada-sobre-foto .hero__controles {
		top: 0.75rem;
	}
}

/* Cabecera de color ----------------------------------------------- */

/* Personalizar > Cabecera y barra superior > Fondo de la cabecera: «De color».
   Para logos blancos: la zona superior (aviso, barra y cabecera) va sobre una
   franja de color, con todo en blanco, como sobre la foto de la portada.
   --cabecera-color se oscurece en PHP lo necesario para que el blanco tenga al
   menos 4,6:1; sin color propio, el tono oscuro del tema (--colada). */
.colada-cabecera-color .zona-superior {
	background: var(--cabecera-color, var(--colada, #111111));
	color: #ffffff;
}

.colada-cabecera-color .barra {
	background: transparent;
	color: #ffffff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.colada-cabecera-color .barra a,
.colada-cabecera-color .barra .icono,
.colada-cabecera-color .barra__texto {
	color: #ffffff;
}

.colada-cabecera-color .barra a:focus-visible {
	outline-color: #ffffff;
}

.colada-cabecera-color .cabecera {
	background: transparent;
	/* Una línea fina: separa la franja de una página oscura (modo oscuro). */
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Botón de modo claro/oscuro: al pasar el ratón, un fondo translúcido que
   deja ver el icono blanco (el de la paleta es claro). */
.colada-cabecera-color .modo:hover,
.colada-sobre-foto .modo:hover {
	background: rgba(255, 255, 255, 0.16);
}

.colada-cabecera-color .marca__enlace,
.colada-cabecera-color .marca__nombre,
.colada-cabecera-color .modo,
.colada-cabecera-color .nav__boton {
	color: #ffffff;
}

.colada-cabecera-color .nav__boton {
	border-color: #ffffff;
}

.colada-cabecera-color .marca__logo--invertido {
	filter: brightness(0) invert(1);
}

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

.colada-cabecera-color .nav__lista > li > a:hover,
.colada-cabecera-color .nav__lista > .current-menu-item > a,
.colada-cabecera-color .nav__lista > .current_page_item > a,
.colada-cabecera-color .nav__lista > .current-menu-ancestor > a,
.colada-cabecera-color .nav__lista > li > a[aria-current] {
	text-decoration-color: currentColor;
}

/* Botón de la cabecera: como sobre la foto, el color destacado con el texto
   que se lea sobre él (--sobre-destacado). */
.colada-cabecera-color .nav__accion.boton {
	background: var(--destacado);
	border-color: var(--destacado);
	color: var(--sobre-destacado, #111111);
}

.colada-cabecera-color .nav__accion.boton:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #111111;
}

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

/* Con la cabecera fija, la parte que se queda arriba lleva el mismo color. */
.colada-cabecera-color.colada-cabecera-fija .cabecera {
	background: var(--cabecera-color, var(--colada, #111111));
}

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

	.js .colada-cabecera-color .nav__lista a {
		color: #ffffff;
	}

	/* Los submenús, sin su fondo de escritorio: el texto blanco va sobre el color. */
	.js .colada-cabecera-color .nav__lista .sub-menu {
		background: transparent;
	}
}

/* Alto contraste del sistema (Windows): la cabecera toma los colores del
   sistema, pero el logo claro necesita su fondo oscuro para verse (sobre la
   foto de la portada pasa lo mismo). */
@media (forced-colors: active) {
	.colada-cabecera-color .zona-superior {
		background: Canvas;
		color: CanvasText;
	}

	.colada-cabecera-color .marca__enlace,
	.colada-sobre-foto .marca__enlace {
		forced-color-adjust: none;
		background: #111111;
		color: #ffffff;
		padding: 0.35rem 0.6rem;
		border-radius: var(--radio, 4px);
	}

	.colada-cabecera-color .zona-superior a.marca__enlace:focus-visible,
	.colada-sobre-foto .zona-superior a.marca__enlace:focus-visible {
		outline: 2px solid Highlight;
		box-shadow: none;
	}
}

/* ==================================================================
   Colada: lavanderías
   ================================================================== */

.seccion__intro {
	max-width: 44rem;
	margin-top: -0.75rem;
	margin-bottom: 2rem;
	color: var(--secundario);
}

.lavanderias {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
	margin-top: 1.5rem;
}

.lavanderia {
	display: flex;
	flex-direction: column;
	background: var(--fondo);
	border: 1px solid var(--linea);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 12px 28px -18px rgba(17, 17, 17, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lavanderia:hover,
.lavanderia:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 18px 36px -18px rgba(17, 17, 17, 0.35);
}

/* Foto con la zona encima, en una etiqueta oscura con el punto lima. */
.lavanderia__imagen {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--superficie);
}

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

.lavanderia__imagen img {
	object-fit: cover;
}

.lavanderia__zona {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0.35rem 0.8rem 0.35rem 0.6rem;
	border-radius: 999px;
	background: #111111;
	color: #ffffff;
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}

.lavanderia__zona .icono {
	color: var(--destacado);
}

/* Sin foto, la zona va en el cuerpo de la ficha. */
.lavanderia__imagen:not(:has(img)) {
	aspect-ratio: auto;
	padding: 1rem 1rem 0;
	background: none;
}

.lavanderia__imagen:not(:has(img)) .lavanderia__zona {
	position: static;
}

.lavanderia__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 1rem;
	padding: 1.35rem 1.5rem 1.5rem;
}

.lavanderia__nombre {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.25;
}

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

.lavanderia__nombre a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.lavanderia__datos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	font-size: 0.9375rem;
	color: var(--secundario);
}

.lavanderia__datos li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.lavanderia__datos .icono {
	flex: none;
	margin-top: 0.15rem;
	color: var(--enlace);
}

.lavanderia__datos a {
	color: var(--texto);
	font-weight: 600;
}

.lavanderia__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: auto 0 0;
	padding-top: 0.5rem;
}

.lavanderia__acciones .boton,
.local__acciones .boton {
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
}

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

	.lavanderia:hover,
	.lavanderia:focus-within {
		transform: none;
	}
}

/* Página de una lavandería */
.local__zona {
	margin: 0 0 0.5rem;
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--secundario);
}

.local__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
	margin-top: var(--espacio);
}

.local__imagen {
	margin: 0 0 2rem;
	border-radius: 14px;
	overflow: hidden;
}

.local__cuerpo .contenido-entrada > * {
	max-width: none;
}

.local__datos {
	position: sticky;
	top: 1.5rem;
	padding: 1.5rem;
	border: 1px solid var(--linea);
	border-radius: 14px;
	background: var(--superficie);
}

.local__datos-titulo {
	margin: 0 0 1rem;
	font-size: 1.125rem;
}

.local__datos dl {
	margin: 0;
}

.local__datos dt {
	margin-top: 0.85rem;
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--secundario);
}

.local__datos dt:first-child {
	margin-top: 0;
}

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

.local__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.5rem 0 0;
}

@media (max-width: 52rem) {
	.local__cuerpo {
		grid-template-columns: 1fr;
	}

	.local__datos {
		position: static;
	}
}

/* ==================================================================
   Colada: 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 (lavado, secado, edredones…). */
.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%;
}