/*
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.1.1
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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Fondo oscuro (por defecto): el mismo tono de la barra superior. */
.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) ---------- */

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

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

.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 ------------------------------------- */

.colada-sobre-foto .zona-superior {
	position: absolute;
	inset: 0 0 auto;
	z-index: 30;
	color: #ffffff;
}

/* 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, 8rem),
		rgba(var(--velo-rgb), 0) calc(var(--alto-superior, 8rem) + 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, 8rem),
		transparent var(--alto-superior, 8rem)
	);
}

/* 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, 8rem) + 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: lima con texto negro (contraste 15,9:1). */
.colada-sobre-foto .nav__accion.boton {
	background: var(--destacado);
	border-color: var(--destacado);
	color: #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: absolute;
	top: auto;
	inset-inline: 0;
}

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

/* 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;
	}
}

/* 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, 8rem) + 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;
	}
}

/* ==================================================================
   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%;
}