/*
Theme Name: Láser Clean
Theme URI: https://lasercleanmadrid.com
Author: Letnova
Description: Tema de bloques a medida para Láser Clean Madrid. Toda la identidad visual vive en theme.json. La paleta se deriva del azul turquesa de su Instagram (#42a2ae), muestreado de sus propias publicaciones.
Version: 0.2.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: laserclean
Tags: block-patterns, full-site-editing, custom-colors, translation-ready
*/

/*
 * Lo que theme.json todavía no sabe expresar.
 * Mantener esto corto: si una regla se puede declarar como token, va en theme.json.
 */

/* Tarjetas de tratamiento: el enlace se ancla abajo para que todas cierren
   a la misma altura aunque el texto de cada una tenga distinto largo. */
.laserclean-card {
	display: flex;
	flex-direction: column;
}

.laserclean-card > :last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

/* Foco visible en todo lo navegable con teclado. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-strong);
	outline-offset: 3px;
}

/* Hueco reservado para una imagen de caso todavía no publicada.
   Mantiene la proporción para que el maquetado no salte cuando entren
   las fotos reales. */
.laserclean-hueco {
	aspect-ratio: 4 / 3;
}

/* Tarjetas de reseña: la firma queda anclada abajo para que las tres cierren
   a la misma altura aunque las citas tengan distinto largo. */
.laserclean-resena {
	display: flex;
	flex-direction: column;
}

.laserclean-resena > :last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

.laserclean-resena__estrellas {
	letter-spacing: 0.15em;
	margin-bottom: var(--wp--preset--spacing--10);
}

/* El pie cierra pegado a la última sección: sin franja de fondo entre medias. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* --- Cabecera fija (inc/navegacion.php) ---
   Siempre visible, en escritorio y en móvil: las páginas son largas y el menú
   y el botón de reservar tienen que estar a mano sin subir. Al bajar se
   compacta y gana sombra.

   Fondo blanco SÓLIDO, sin backdrop-filter ni transform, y no es capricho:
   cualquiera de los dos convierte la cabecera en el bloque contenedor de sus
   hijos fijos, y el menú desplegable del móvil —que es position: fixed a
   pantalla completa— quedaría encerrado en la altura de la cabecera.

   top usa la altura de la barra de administración, para que no se esconda
   debajo de ella con la sesión iniciada. */
.wp-site-blocks > header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 40;
	background: var(--wp--preset--color--base);
	transition: box-shadow 0.25s ease;
}

.wp-site-blocks > header > header {
	transition: padding 0.25s ease;
}

.wp-site-blocks > header.is-compacta {
	box-shadow: 0 6px 20px rgba(13, 42, 44, 0.08);
}

.wp-site-blocks > header.is-compacta > header {
	padding-top: var(--wp--preset--spacing--20) !important;
	padding-bottom: var(--wp--preset--spacing--20) !important;
}

.wp-site-blocks > header .wp-block-site-logo img {
	transition: width 0.25s ease;
}

@media (min-width: 782px) {
	.wp-site-blocks > header.is-compacta .wp-block-site-logo img {
		width: 150px !important;
	}
}

/* Los saltos a un ancla no dejan el título debajo de la cabecera. La altura
   la mide inc/navegacion.php; el valor de reserva es el de escritorio. */
html {
	scroll-padding-top: calc(var(--laserclean-cabecera-alto, 90px) + var(--wp-admin--admin-bar--height, 0px) + 16px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header,
	.wp-site-blocks > header > header,
	.wp-site-blocks > header .wp-block-site-logo img {
		transition: none;
	}
}

/* --- Volver arriba (inc/navegacion.php) ---
   Aparece pasada pantalla y media. En móvil se apoya encima de la barra de
   contacto, y se esconde mientras el aviso de cookies está abierto para no
   pisarlo. */
.laserclean-arriba {
	position: fixed;
	z-index: 45;
	right: 20px;
	bottom: 24px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-strong);
	color: var(--wp--preset--color--base);
	box-shadow: 0 8px 22px rgba(13, 42, 44, 0.22);
	text-decoration: none;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.laserclean-arriba[hidden],
.laserclean-cookies:not([hidden]) ~ .laserclean-arriba,
.has-modal-open .laserclean-arriba {
	display: none;
}

.laserclean-arriba:hover {
	background: var(--wp--preset--color--deep);
	transform: translateY(-2px);
}

.laserclean-arriba:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

@media (max-width: 781px) {
	.laserclean-arriba {
		right: 14px;
		bottom: calc(76px + env(safe-area-inset-bottom));
		width: 44px;
		height: 44px;
	}
}

/* --- Cabecera en móvil ---
   El título del sitio y el botón de reservar viven FUERA del menú colapsable:
   están en una fila flex declarada `nowrap` que nunca rompe. A 390 px los tres
   juntos piden unos 450 px, y el desbordamiento no se queda en la cabecera:
   empuja el ancho del documento entero y corta el texto por la derecha en
   todas las secciones de todas las páginas.

   No se toca el `nowrap` a propósito. Romper la fila mandaría el botón a una
   segunda línea, y ese botón es el único contacto presente en todo momento.
   Lo que se encoge es lo que va dentro.

   Los `!important` no son pereza: WordPress genera las clases de tamaño
   preajustado (`has-large-font-size`) ya con `!important`, así que sin esto
   la regla no gana por mucha especificidad que se le ponga. */
@media (max-width: 660px) {
	.wp-site-blocks > header .wp-block-site-title {
		font-size: var(--wp--preset--font-size--medium) !important;
	}

	.wp-site-blocks > header .wp-block-button__link {
		padding: 0.5rem 0.7rem;
		font-size: 0.8125rem !important;
	}

	/* El hueco entre el menú y el botón, más corto. */
	.wp-site-blocks > header .wp-block-group {
		gap: var(--wp--preset--spacing--20);
	}

	/* Y la etiqueta del botón se queda en "Reservar". Se recorta el texto de
	   verdad, no se oculta visualmente: así un lector de pantalla lee lo
	   mismo que se ve y no hay dos versiones distintas del mismo botón. */
	.laserclean-si-cabe {
		display: none;
	}
}

/* ==========================================================================
   Rediseño de portada · propuesta de DIETER
   El turquesa de marca entra en cuatro sitios y en ninguno más: el icono de
   las tarjetas, su filete superior, las cifras del "cómo funciona" y el borde
   de la tarjeta de confianza. Todos son objetos gráficos o texto grande, así
   que les aplica el umbral de 3:1 de WCAG 1.4.11 y no el 4,5:1 del texto.
   Para texto pequeño sigue usándose el profundo.
   ========================================================================== */

.laserclean-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* --- Hero: la foto fundida en blanco ---
   El efecto de su web vieja: foto a sangre por la derecha que se deshace en
   blanco hacia el texto, y el borde de abajo cortado en diagonal. La foto va
   por detrás de las columnas; el fundido es una máscara, así que el texto
   siempre cae sobre blanco de verdad y el contraste no depende de la imagen. */
/* El hero arranca pegado a la cabecera: el hueco de blockGap entre cabecera y
   main dejaba una franja blanca encima de la foto. */
main:has(> .laserclean-hero:first-child) {
	margin-block-start: 0;
}

/* La altura del corte se declara en main y no en el hero: la usa también la
   sección siguiente, y una variable solo se hereda hacia dentro. */
main:has(> .laserclean-hero) {
	--laserclean-corte: 5vw;
}

.laserclean-hero {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--base);
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--laserclean-corte)), 0 100%);
}

/* La sección de después se mete por debajo del corte, para que lo que asome
   en la esquina sea su fondo y no una franja del blanco de main. */
main > .laserclean-hero + * {
	margin-block-start: calc(-1 * var(--laserclean-corte));
}

.laserclean-hero > .laserclean-hero-foto {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 60%;
	max-width: none;
	margin: 0 !important;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%);
	mask-image: linear-gradient(to right, transparent 0, #000 38%);
}

.laserclean-hero-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% 50%;
}

.laserclean-hero > .wp-block-columns {
	position: relative;
	min-height: min(620px, 72vh);
}

/* La tarjeta se sube a la esquina de arriba, encima del gorro, que es lo único
   de la foto que no cuenta nada: abajo tapaba el tatuaje. */
.laserclean-tarjeta-confianza {
	max-width: 300px;
	margin: 0 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(22, 30, 34, 0.08);
}

.laserclean-tarjeta-confianza__nota,
.laserclean-tarjeta-confianza__pie {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
}

.laserclean-tarjeta-confianza__estrellas {
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.12em;
	line-height: 1.2;
}

.laserclean-tarjeta-confianza__cifra {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	line-height: 1.1;
	font-weight: 600;
}

/* --- Tarjetas de tratamiento --- */
.laserclean-card {
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 0 8px 8px;
}

.laserclean-card__icono {
	color: var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* --- Pasos del "cómo funciona" --- */
.laserclean-paso__n {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.75rem;
	line-height: 1;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* --- Reseñas: comilla de marca de agua --- */
.laserclean-resena {
	position: relative;
	overflow: hidden;
}

/* La comilla se ancla por abajo, no por arriba: con `top` negativo el
   `overflow:hidden` de la tarjeta se comía todo menos las dos puntas. */
.laserclean-resena::before {
	content: "\201C";
	position: absolute;
	top: 0.05em;
	right: 0.12em;
	font-family: var(--wp--preset--font-family--display);
	font-size: 5rem;
	line-height: 1;
	color: var(--wp--preset--color--border);
	pointer-events: none;
}

.laserclean-resena > * {
	position: relative;
}

/* En móvil la foto sube arriba, a lo ancho, y se funde hacia abajo en el
   texto; la tarjeta de confianza baja debajo de los botones. */
@media (max-width: 781px) {
	main:has(> .laserclean-hero) {
		--laserclean-corte: 8vw;
	}

	.laserclean-hero {
		padding-top: 0 !important;
	}

	.laserclean-hero > .laserclean-hero-foto {
		position: static;
		width: auto;
		aspect-ratio: 3 / 2;
		margin: 0 calc(-1 * var(--wp--style--root--padding-right)) var(--wp--preset--spacing--20) calc(-1 * var(--wp--style--root--padding-left)) !important;
		-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
		mask-image: linear-gradient(to bottom, #000 55%, transparent);
	}

	.laserclean-hero-foto img {
		object-position: 25% 60%;
	}

	.laserclean-hero > .wp-block-columns {
		min-height: 0;
	}

	.laserclean-tarjeta-confianza {
		max-width: none;
		margin: 0;
	}
}

/* ---------------------------------------------------------------------------
   Blog
   ---------------------------------------------------------------------------
   Nada de aquí dentro puede ocultar contenido. En el tema de Letnova, un
   reveal con IntersectionObserver dejó 70 de sus 74 artículos con el cuerpo en
   opacity:0 durante dos meses y medio, y nadie lo vio porque en escritorio
   funcionaba. La regla que sale de ahí: el cuerpo del artículo se ve sin JS,
   siempre. Por eso este bloque no tiene ni una animación de entrada.
   --------------------------------------------------------------------------- */

/* La entradilla: el párrafo que responde en las dos primeras frases. Es también
   el selector del speakable del schema, así que la clase tiene que existir de
   verdad y no puede renombrarse sin tocar inc/schema.php. */
.laserclean-entradilla {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	max-width: 46em;
}

/* El H2 del artículo necesita aire por arriba; sin él, el texto se lee como un
   muro. Va en CSS y no en theme.json porque spacing.margin dentro de
   styles.blocks.*.elements.* todavía no genera CSS de forma fiable. */
.wp-block-post-content > h2 {
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-post-content > h3 {
	margin-top: var(--wp--preset--spacing--40);
}

/* Enlaces del cuerpo: subrayados de verdad. En un artículo que enlaza a la
   guía y a sus hermanos, distinguir el enlace solo por color falla para quien
   no distingue ese color. */
.wp-block-post-content a:not(.wp-element-button) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.wp-block-post-content ul,
.wp-block-post-content ol {
	padding-left: 1.25em;
}

.wp-block-post-content li + li {
	margin-top: 0.4em;
}

/* Migas. El separador lo pinta el bloque con una variable CSS propia. */
.wp-block-breadcrumbs ol {
	flex-wrap: wrap;
}

/* Tarjetas del feed: el título no se despega de su imagen al crecer la rejilla. */
.wp-block-post-template.is-layout-grid > li {
	display: flex;
	flex-direction: column;
}

.wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
}

/* --- Comparador antes/después del método ---
   El cambio es CSS: --pos es una propiedad registrada, así que se puede
   animar, y la línea barre sola mientras nadie la toca. Al arrastrar, el
   script pone la clase is-tocado y --pos pasa a mandarlo el control. */
@property --pos {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 50%;
}

@keyframes laserclean-barrido {
	0%, 100% { --pos: 72%; }
	50% { --pos: 28%; }
}

.laserclean-comparador {
	--pos: 50%;
	margin: 0;
}

.laserclean-comparador__marco {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1400 / 939;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(22, 30, 34, 0.1);
	animation: laserclean-barrido 7s ease-in-out infinite;
}

.laserclean-comparador.is-tocado .laserclean-comparador__marco {
	animation: none;
}

.laserclean-comparador__marco img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.laserclean-comparador__antes {
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.laserclean-comparador__linea {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 2px;
	margin-left: -1px;
	background: var(--wp--preset--color--base);
	pointer-events: none;
}

/* El tirador: un círculo blanco con las dos flechas, como el de su web vieja. */
.laserclean-comparador__linea::after {
	content: "‹ ›";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-strong);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	box-shadow: 0 4px 14px rgba(22, 30, 34, 0.18);
}

.laserclean-comparador__etiqueta {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.88);
	color: var(--wp--preset--color--primary-strong);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	pointer-events: none;
}

.laserclean-comparador__etiqueta--antes {
	left: var(--wp--preset--spacing--20);
}

.laserclean-comparador__etiqueta--despues {
	right: var(--wp--preset--spacing--20);
}

/* El control ocupa todo el marco y es invisible: se arrastra la imagen
   entera, y con teclado responde a las flechas como cualquier deslizador. */
.laserclean-comparador__control {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}

.laserclean-comparador__marco:has(.laserclean-comparador__control:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary-strong);
	outline-offset: 3px;
}

.laserclean-comparador__pie {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

@media (prefers-reduced-motion: reduce) {
	.laserclean-comparador__marco {
		animation: none;
	}
}

/* --- Índice de la pilar ---
   Lo copia de Pedro Jaén: con diez secciones, un índice al principio deja
   saltar a lo que se viene a buscar y le da a Google los sitelinks hechos. */
.laserclean-indice {
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 8px 8px 0;
	background: var(--wp--preset--color--surface);
}

.laserclean-indice__titulo {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.laserclean-indice ol {
	margin: 0;
	padding-left: 1.4em;
	columns: 2 16rem;
	column-gap: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}

.laserclean-indice li {
	break-inside: avoid;
	margin-bottom: 4px;
}

/* Al saltar desde el índice, que el título no quede debajo del borde. La
   altura de la cabecera fija ya la descuenta scroll-padding-top en html. */
.entry-content h2[id],
.wp-block-post-content h2[id] {
	scroll-margin-top: var(--wp--preset--spacing--20);
}

.laserclean-fuentes {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   Sistema visual · 26-09-2026
   Lo que pidió Alejandro al pasar un pin y removery.com: títulos con más
   carácter, formas más blandas y respuesta al pasar el ratón. Todo lo que se
   mueve se para con prefers-reduced-motion, y nada de aquí oculta contenido:
   si un efecto no se aplica, la página se ve igual que antes.
   ========================================================================== */

/* --- Títulos ---
   Una palabra de cada titular va en cursiva y en turquesa (<em> en el
   patrón). Es la cursiva de verdad de Anybody, no una inclinada a la
   fuerza: el archivo está declarado en theme.json. */
:is(h1, h2) {
	text-wrap: balance;
}

:is(h1, h2, h3) em {
	font-style: italic;
	font-weight: inherit;
	color: var(--wp--preset--color--primary);
}

:is(.has-deep-background-color, .has-primary-strong-background-color) :is(h1, h2, h3) em {
	color: var(--wp--preset--color--accent);
}

/* La etiqueta de encima del título: versalitas espaciadas con una raya
   delante, la de removery y la de casi cualquier web editorial. */
.laserclean-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75em;
	letter-spacing: 0.16em;
	font-size: 0.8125rem;
}

.laserclean-eyebrow::before {
	content: "";
	flex: 0 0 1.75rem;
	height: 1px;
	background: currentColor;
}

.laserclean-eyebrow.has-text-align-center {
	justify-content: center;
}

.laserclean-eyebrow.has-text-align-center::after {
	content: "";
	flex: 0 0 1.75rem;
	height: 1px;
	background: currentColor;
}

/* Números de caja alta: con la serif anterior un «01» se leía «OI», y así se
   queda aunque se cambie de letra. */
:is(h1, h2, h3, .laserclean-paso__n, .laserclean-sesiones__n, .laserclean-tarjeta-confianza__cifra) {
	font-variant-numeric: lining-nums;
}

/* Los títulos de las tarjetas, a 17 px en una serif fina, se quedaban sin
   presencia al lado del texto. */
:is(.laserclean-card, .laserclean-paso) h3 {
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 650;
	line-height: 1.2 !important;
}

/* --- Botones ---
   Píldora (el radio está en theme.json). Al pasar por encima suben un poco y
   ganan sombra; los rellenos llevan una flecha que avanza. La cabecera no
   lleva flecha: a 360 px no cabe. */
.wp-element-button {
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(13, 42, 44, 0.18);
}

main .wp-block-button:not(.is-style-outline) > .wp-element-button::after {
	content: "→";
	display: inline-block;
	margin-left: 0.55em;
	transition: transform 0.25s ease;
}

main .wp-block-button:not(.is-style-outline) > .wp-element-button:hover::after {
	transform: translateX(4px);
}

/* El de contorno se rellena. Los !important son por las clases de color de
   WordPress, que ya vienen con !important. */
.wp-block-button.is-style-outline > .wp-element-button:hover {
	background-color: var(--wp--preset--color--primary-strong) !important;
	border-color: var(--wp--preset--color--primary-strong) !important;
	color: var(--wp--preset--color--base) !important;
}

:is(.has-deep-background-color, .has-primary-strong-background-color) .wp-block-button.is-style-outline > .wp-element-button:hover {
	background-color: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--primary-strong) !important;
}

:is(.has-deep-background-color, .has-primary-strong-background-color) :focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

/* --- Tarjetas: casos, pasos y reseñas --- */
.laserclean-card,
.laserclean-paso,
.laserclean-resena {
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 1px 2px rgba(13, 42, 44, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.laserclean-card {
	border-top: 3px solid var(--wp--preset--color--accent);
}

.laserclean-card:hover,
.laserclean-paso:hover,
.laserclean-resena:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 16px 36px rgba(13, 42, 44, 0.1);
}

.laserclean-card__icono,
.laserclean-paso__n {
	transition: transform 0.3s ease;
	transform-origin: left center;
}

.laserclean-card:hover .laserclean-card__icono {
	transform: scale(1.15) rotate(-6deg);
}

.laserclean-paso:hover .laserclean-paso__n {
	transform: translateX(4px);
}

/* --- Enlaces de texto ---
   El subrayado fino se queda siempre (que un enlace no se distinga solo por
   el color); al pasar por encima crece debajo una línea de acento de
   izquierda a derecha. */
main :is(p, li) > a:not(.wp-element-button),
.wp-block-post-content :is(p, li) > a:not(.wp-element-button) {
	text-decoration: none;
	background-image:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)),
		linear-gradient(currentColor, currentColor);
	background-size: 0% 2px, 100% 1px;
	background-position: 0 100%, 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 1px;
	transition: background-size 0.35s ease;
}

main :is(p, li) > a:not(.wp-element-button):hover,
.wp-block-post-content :is(p, li) > a:not(.wp-element-button):hover {
	background-size: 100% 2px, 100% 1px;
}

/* --- Aparición al hacer scroll, solo en la portada ---
   Como el fundido de su web vieja, pero sin JS: lo lleva la línea de tiempo
   de la vista. Un navegador que no la entiende no aplica nada y lo enseña
   todo quieto. Tampoco parte de opacidad 0: lo peor que puede pasar es que
   algo se vea algo apagado, nunca que no se vea. */
@keyframes laserclean-entra {
	from {
		opacity: 0.2;
		transform: translateY(32px);
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body.home main > .wp-block-group:not(.laserclean-hero) > * {
			animation: laserclean-entra linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
}

/* El botón de la cabecera no se parte nunca: a 360 px salía «Reserva / r». */
.wp-site-blocks > header .wp-element-button {
	white-space: nowrap;
}

@media (max-width: 400px) {
	.laserclean-eyebrow {
		letter-spacing: 0.1em;
	}
}

/* --- Sesión a sesión: la infografía del pin --- */
.laserclean-sesiones__desliza {
	display: none !important;
	margin: var(--wp--preset--spacing--10) 0 0 !important;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
}

/* El fondo lleva la misma luz de estudio que la foto: más clara en el centro.
   Con un color plano se veía el rectángulo de la imagen. */
.laserclean-sesiones {
	background: radial-gradient(ellipse 70% 60% at 50% 62%, #173a3b, var(--wp--preset--color--deep) 75%) !important;
}

.laserclean-sesiones .laserclean-eyebrow {
	color: var(--wp--preset--color--accent);
}

.laserclean-sesiones__entradilla {
	max-width: 38rem;
	margin-inline: auto !important;
	opacity: 0.8;
}

.laserclean-sesiones__figura {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: 0;
}

/* La imagen se funde por los cuatro bordes en el fondo de la sección, que
   tiene el mismo verde que el estudio de la foto: no se ve dónde acaba. */
.laserclean-sesiones__pista {
	position: relative;
}

.laserclean-sesiones__lienzo img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 70%, transparent 96%), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, #000 18%, #000 70%, transparent 96%), linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
	mask-composite: intersect;
}

.laserclean-sesiones__fases {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Cada rótulo cuelga de una línea vertical fina que baja hasta su tatuaje. */
.laserclean-sesiones__fases li {
	position: absolute;
	top: 21%;
	left: var(--x);
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 0.5em;
	white-space: nowrap;
	padding: 4px 12px 4px 4px;
	border-radius: 999px;
	background: rgba(13, 42, 44, 0.78);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.laserclean-sesiones__fases li::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 1px;
	height: 4vw;
	max-height: 56px;
	min-height: 28px;
	background: linear-gradient(rgba(255, 255, 255, 0.6), transparent);
}

.laserclean-sesiones__n {
	display: grid;
	place-items: center;
	width: 1.9em;
	height: 1.9em;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1em;
}

.laserclean-sesiones__pie {
	margin-top: var(--wp--preset--spacing--10);
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.65;
}

/* Las cuatro claves, con filetes verticales entre columnas como en el pin. */
.laserclean-sesiones__claves {
	list-style: none;
	margin-top: var(--wp--preset--spacing--50) !important;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	text-align: center;
}

.laserclean-sesiones__claves li {
	padding: 0 var(--wp--preset--spacing--30);
}

.laserclean-sesiones__claves li + li {
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.laserclean-sesiones__icono {
	display: inline-grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	color: var(--wp--preset--color--accent);
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.laserclean-sesiones__claves li:hover .laserclean-sesiones__icono {
	transform: scale(1.08);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--deep);
}

.laserclean-sesiones__claves h3 {
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--large);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--base);
}

.laserclean-sesiones__claves p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	opacity: 0.75;
}

/* En móvil la imagen se sale por los lados y se desliza con el dedo: a 360 px
   entera, las tres ramas medirían un centímetro. */
@media (max-width: 781px) {
	/* Los !important ganan al margin:auto que el diseño restringido pone con
	   !important a todo lo que lleva alignwide. */
	.laserclean-sesiones__figura {
		margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important;
		margin-right: calc(-1 * var(--wp--style--root--padding-right)) !important;
		max-width: none !important;
	}

	.laserclean-sesiones__desliza {
		display: block !important;
	}

	.laserclean-sesiones__lienzo {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.laserclean-sesiones__pista {
		width: 860px;
	}

	.laserclean-sesiones__fases li {
		font-size: 0.75rem;
	}

	.laserclean-sesiones__pie {
		padding-inline: var(--wp--style--root--padding-left);
	}

	.laserclean-sesiones__claves {
		grid-template-columns: repeat(2, 1fr);
		row-gap: var(--wp--preset--spacing--40);
	}

	.laserclean-sesiones__claves li {
		padding: 0 var(--wp--preset--spacing--20);
	}

	.laserclean-sesiones__claves li:nth-child(odd) {
		border-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-element-button::after,
	.laserclean-card,
	.laserclean-paso,
	.laserclean-resena,
	.laserclean-card__icono,
	.laserclean-paso__n,
	.laserclean-sesiones__icono {
		transition: none;
	}

	.wp-element-button:hover,
	.laserclean-card:hover,
	.laserclean-paso:hover,
	.laserclean-resena:hover {
		transform: none;
	}
}

/* En las tarjetas solo se ancla abajo el enlace. Si lo último es el texto, va
   pegado al título: anclado abajo dejaba un hueco en la tarjeta más baja. */
.laserclean-card > p:last-child:not(:has(a)) {
	margin-top: var(--wp--preset--spacing--20);
	padding-top: 0;
}

/* --- Galería de casos reales (/antes-y-despues/) ---
   Cada caso se recorre con sus pestañas y los filtros esconden tarjetas; las
   dos cosas son radios y :has(), sin JS. Sin :has() se ve la primera foto de
   cada caso y todos los casos, que sigue siendo una página correcta. */
.laserclean-galeria {
	margin-block: var(--wp--preset--spacing--40);
}

.laserclean-galeria__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	gap: var(--wp--preset--spacing--30);
}

.laserclean-resultado {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.laserclean-resultado:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 16px 36px rgba(13, 42, 44, 0.1);
}

/* Las fotos, apiladas; se ve la de la pestaña marcada. */
.laserclean-resultado__fotos {
	display: grid;
	aspect-ratio: 4 / 3;
	min-height: 0;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.laserclean-resultado__fotos img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.laserclean-resultado__fotos img:first-child {
	opacity: 1;
}

.laserclean-resultado:has(.laserclean-resultado__pasos input:checked) .laserclean-resultado__fotos img {
	opacity: 0;
}

.laserclean-resultado:has(.laserclean-resultado__pasos label:nth-child(1) input:checked) .laserclean-resultado__fotos img:nth-child(1),
.laserclean-resultado:has(.laserclean-resultado__pasos label:nth-child(2) input:checked) .laserclean-resultado__fotos img:nth-child(2),
.laserclean-resultado:has(.laserclean-resultado__pasos label:nth-child(3) input:checked) .laserclean-resultado__fotos img:nth-child(3),
.laserclean-resultado:has(.laserclean-resultado__pasos label:nth-child(4) input:checked) .laserclean-resultado__fotos img:nth-child(4),
.laserclean-resultado:has(.laserclean-resultado__pasos label:nth-child(5) input:checked) .laserclean-resultado__fotos img:nth-child(5),
.laserclean-resultado:has(.laserclean-resultado__pasos label:nth-child(6) input:checked) .laserclean-resultado__fotos img:nth-child(6) {
	opacity: 1;
}

/* Pestañas y filtros comparten forma: píldoras con el radio escondido pero
   vivo, así que se manejan con el teclado como cualquier grupo de radios. */
.laserclean-resultado__pasos,
.laserclean-galeria__filtros fieldset {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.laserclean-resultado__pasos {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) 0;
}

.laserclean-resultado__pasos label,
.laserclean-galeria__filtros label {
	position: relative;
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--primary-strong);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.laserclean-resultado__pasos label:hover,
.laserclean-galeria__filtros label:hover {
	border-color: var(--wp--preset--color--accent);
}

.laserclean-resultado__pasos input,
.laserclean-galeria__filtros input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.laserclean-resultado__pasos label:has(input:checked),
.laserclean-galeria__filtros label:has(input:checked) {
	background: var(--wp--preset--color--primary-strong);
	border-color: var(--wp--preset--color--primary-strong);
	color: var(--wp--preset--color--base);
}

.laserclean-resultado__pasos label:has(input:focus-visible),
.laserclean-galeria__filtros label:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary-strong);
	outline-offset: 2px;
}

.laserclean-resultado__texto {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
}

.laserclean-resultado__texto h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.laserclean-resultado__datos {
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.laserclean-resultado__estado,
.laserclean-galeria__aviso {
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.laserclean-galeria__aviso {
	margin-top: var(--wp--preset--spacing--20);
}

.laserclean-galeria__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}

.laserclean-galeria__filtros fieldset {
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
}

.laserclean-galeria__filtros legend {
	float: left;
	margin-right: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.laserclean-galeria:has(input[name="laserclean-f-tinta"][value="negra"]:checked) .laserclean-resultado:not([data-tinta="negra"]),
.laserclean-galeria:has(input[name="laserclean-f-tinta"][value="color"]:checked) .laserclean-resultado:not([data-tinta="color"]),
.laserclean-galeria:has(input[name="laserclean-f-tamano"][value="pequeno"]:checked) .laserclean-resultado:not([data-tamano="pequeno"]),
.laserclean-galeria:has(input[name="laserclean-f-tamano"][value="mediano"]:checked) .laserclean-resultado:not([data-tamano="mediano"]),
.laserclean-galeria:has(input[name="laserclean-f-tamano"][value="grande"]:checked) .laserclean-resultado:not([data-tamano="grande"]) {
	display: none;
}

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

/* --- Teléfono en la cabecera, solo en pantallas anchas --- */
.laserclean-telefono {
	display: none;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--primary-strong);
}

.laserclean-telefono:hover {
	color: var(--wp--preset--color--primary);
}

@media (min-width: 1180px) {
	.laserclean-telefono {
		display: inline-flex;
	}
}

/* --- Barra de contacto fija en móvil --- */
.laserclean-barra {
	display: none;
}

@media (max-width: 781px) {
	.laserclean-barra {
		position: fixed;
		z-index: 50;
		left: 0;
		right: 0;
		bottom: 0;
		display: grid;
		grid-template-columns: 1fr 1fr 1.3fr;
		gap: 8px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.96);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border-top: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 -6px 18px rgba(13, 42, 44, 0.08);
	}

	.laserclean-barra a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-height: 44px;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 999px;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		text-decoration: none;
		color: var(--wp--preset--color--primary-strong);
	}

	.laserclean-barra .laserclean-barra__principal {
		border-color: var(--wp--preset--color--primary-strong);
		background: var(--wp--preset--color--primary-strong);
		color: var(--wp--preset--color--base);
	}

	/* Que la barra no tape el final del pie. */
	.wp-site-blocks {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}
}

/* --- Aviso de cookies (inc/medicion.php) ---
   Abajo, sin tapar la página ni bloquear el scroll. En móvil se apoya encima
   de la barra de contacto, que sigue a mano. Los dos botones pesan lo mismo:
   rechazar tiene que ser igual de fácil que aceptar. */
.laserclean-cookies {
	position: fixed;
	z-index: 60;
	left: 16px;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	max-width: 760px;
	margin-inline: auto;
	padding: 16px 20px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(13, 42, 44, 0.16);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.laserclean-cookies[hidden] {
	display: none;
}

.laserclean-cookies__texto {
	flex: 1 1 320px;
	margin: 0;
}

.laserclean-cookies__texto a {
	color: var(--wp--preset--color--primary-strong);
}

.laserclean-cookies__botones {
	display: flex;
	flex: 1 1 auto;
	gap: 8px;
	justify-content: flex-end;
}

.laserclean-cookies button {
	flex: 1 1 0;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--primary-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-strong);
	font: inherit;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.laserclean-cookies button:hover,
.laserclean-cookies button:focus-visible {
	background: var(--wp--preset--color--surface);
}

@media (max-width: 781px) {
	.laserclean-cookies {
		left: 12px;
		right: 12px;
		bottom: calc(72px + env(safe-area-inset-bottom));
		padding: 14px 16px;
	}
}

/* Las páginas de servicio abren con una franja de color: igual que el hero,
   va pegada a la cabecera, sin la raya blanca del blockGap. */
main:has(> .has-background:first-child) {
	margin-block-start: 0;
}

/* --- Página de ubicación: la ficha con dirección y horario --- */
.laserclean-direccion {
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 16px 16px 0;
	background: var(--wp--preset--color--surface);
}

.laserclean-direccion > p:first-child {
	margin-top: 0;
}

.laserclean-distancias td:first-child {
	font-weight: 600;
}

.laserclean-distancias table {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.laserclean-distancias :is(th, td) {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
}

.laserclean-distancias thead th {
	border-bottom: 2px solid var(--wp--preset--color--accent);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.laserclean-distancias tbody tr:hover {
	background: var(--wp--preset--color--surface);
}

/* ==========================================================================
   Páginas interiores · 26-09-2026
   Lo que tiene la portada, en el resto: cabecera con etiqueta y corte en
   diagonal, H1 con su palabra en cursiva (inc/titulos.php) y H2 numerados
   como los «Step #1 –» de removery. El texto se queda en 760 px, alineado a
   la izquierda; títulos, galería e índice llegan al ancho grande.
   ========================================================================== */

/* --- Cabecera --- */
.laserclean-cabecera {
	--laserclean-corte: 3.5vw;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: calc(var(--wp--preset--spacing--50) + var(--laserclean-corte));
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 45% 70% at 92% 10%, rgba(66, 162, 174, 0.16), transparent 70%),
		var(--wp--preset--color--surface) !important;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--laserclean-corte)), 0 100%);
}

/* El isotipo de la marca en línea fina, grande y muy suave, a la derecha:
   llena el hueco que deja un título corto sin meter una foto por meter. */
.laserclean-cabecera::after {
	content: "";
	position: absolute;
	top: 50%;
	right: max(16px, calc((100vw - var(--wp--style--global--content-size)) / 2 - 340px));
	height: min(80%, 300px);
	aspect-ratio: 1;
	transform: translateY(-58%) rotate(-8deg);
	background: url("assets/img/isotipo-linea.svg") center / contain no-repeat;
	opacity: 0.35;
	pointer-events: none;
}

.laserclean-cabecera > * {
	position: relative;
	z-index: 1;
}

.laserclean-cabecera__migas a {
	background: none !important;
}

/* Las migas hacen de etiqueta: versalitas espaciadas con la raya delante. */
.laserclean-cabecera__migas {
	display: flex;
	align-items: center;
	gap: 0.75em;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.laserclean-cabecera__migas::before {
	content: "";
	flex: 0 0 1.75rem;
	height: 1px;
	background: currentColor;
}

.laserclean-cabecera__migas ol {
	margin: 0;
	padding: 0;
}

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

.laserclean-cabecera__migas a:hover {
	color: var(--wp--preset--color--primary-strong);
}

.laserclean-cabecera .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--30);
	max-width: 18ch;
	font-size: var(--wp--preset--font-size--xxx-large);
}

/* Un título con «:» es más largo: se le deja más línea. */
.laserclean-cabecera .wp-block-post-title:has(em:only-child) {
	max-width: 24ch;
}

.laserclean-cabecera__entradilla {
	max-width: 46rem !important;
	margin-top: var(--wp--preset--spacing--30);
}

/* --- El contenido: texto a 760 a la izquierda, lo visual al ancho grande --- */
.laserclean-interior {
	counter-reset: laserclean-h2;
}

/* El texto (párrafos, listas, H2, H3) se queda en la columna centrada de
   760; lo que acompaña se abre al ancho grande, centrado. */
.laserclean-interior > :is(.laserclean-galeria, .laserclean-indice, .laserclean-ancho, .wp-block-columns) {
	max-width: var(--wp--style--global--wide-size) !important;
}

/* Cada H2 abre un bloque: filete arriba y su número en turquesa delante. El
   número va en ::before, así que ni Google ni un lector de pantalla lo leen
   como parte del título. */
.laserclean-interior > h2 {
	counter-increment: laserclean-h2;
	margin-top: var(--wp--preset--spacing--60) !important;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--xx-large);
	text-wrap: balance;
}

.laserclean-interior > h2::before {
	content: counter(laserclean-h2, decimal-leading-zero);
	margin-right: 0.4em;
	font-style: italic;
	font-variant-numeric: lining-nums;
	color: var(--wp--preset--color--accent);
}

/* El H3, con un punto turquesa: subtítulo que no compite con el H2. */
.laserclean-interior > h3 {
	margin-top: var(--wp--preset--spacing--40) !important;
	font-weight: 600;
}

.laserclean-interior > h3::before {
	content: "";
	display: inline-block;
	width: 0.32em;
	height: 0.32em;
	margin: 0 0.45em 0.12em 0;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	vertical-align: middle;
}

/* El índice llega al ancho grande y sus dos columnas se reparten todo. */
.laserclean-interior > .laserclean-indice > * {
	max-width: none !important;
	margin-left: 0 !important;
}

.laserclean-interior .wp-block-image img {
	border-radius: 16px !important;
}

.laserclean-interior > .wp-block-quote {
	padding-left: var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--accent);
}

@media (max-width: 781px) {
	.laserclean-cabecera {
		--laserclean-corte: 7vw;
		padding-top: var(--wp--preset--spacing--50);
	}

	.laserclean-cabecera__migas {
		letter-spacing: 0.1em;
	}

	.laserclean-cabecera::after {
		display: none;
	}
}

/* Con un solo caso, la tarjeta se tumba y ocupa el ancho: foto grande a la
   izquierda y pestañas y datos a la derecha. Con dos o más vuelve la rejilla. */
@media (min-width: 782px) {
	.laserclean-galeria__rejilla:has(> .laserclean-resultado:only-child) {
		display: block;
	}

	.laserclean-resultado:only-child {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		grid-template-rows: auto 1fr;
		align-items: start;
	}

	.laserclean-resultado:only-child .laserclean-resultado__fotos {
		grid-row: 1 / span 2;
		aspect-ratio: 4 / 3;
	}

	.laserclean-resultado:only-child .laserclean-resultado__pasos {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
	}

	.laserclean-resultado:only-child .laserclean-resultado__texto {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.laserclean-resultado:only-child h3 {
		font-size: var(--wp--preset--font-size--xx-large);
	}
}

/* ==========================================================================
   Pulido · 26-09-2026 (2)
   ========================================================================== */

/* --- Rejillas de la portada, sin huecos ---
   Con minimumColumnWidth, WordPress genera auto-fill: al pasar el ancho a
   1320 cabía una columna más y quedaban huecos (4+2 en los pasos, una
   columna vacía en los casos y en las reseñas). Se fija el número de columnas
   de cada una. Los !important ganan a la regla que genera WordPress para
   cada contenedor. */
.laserclean-rejilla-pasos.is-layout-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.laserclean-rejilla-casos.is-layout-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Las reseñas se reparten el ancho sean las que sean: auto-fit cierra las
   pistas vacías. */
.laserclean-rejilla-resenas.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)) !important;
}

@media (max-width: 1000px) {
	.laserclean-rejilla-pasos.is-layout-grid,
	.laserclean-rejilla-casos.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.laserclean-rejilla-pasos.is-layout-grid,
	.laserclean-rejilla-casos.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Las entradillas de sección van al ancho grande, pero el texto no pasa de
   44rem: a 1320 px una línea se hacía eterna. */
main > .wp-block-group > p.alignwide.has-large-font-size {
	box-sizing: border-box;
	padding-inline-end: max(0px, calc(100% - 44rem));
}

/* --- Reseñas: firma con inicial y procedencia --- */
.laserclean-resena__estrellas {
	color: var(--wp--preset--color--accent) !important;
	font-size: 1rem !important;
}

.laserclean-resena__autor {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30) !important;
	border-top: 1px solid var(--wp--preset--color--border);
}

.laserclean-resena__autor > span:last-child {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.laserclean-resena__inicial {
	display: grid;
	place-items: center;
	flex: 0 0 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-strong);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 600;
	transition: background-color 0.3s ease;
}

.laserclean-resena:hover .laserclean-resena__inicial {
	background: var(--wp--preset--color--accent);
}

.laserclean-resena__fuente {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

/* --- Franja de confianza bajo el hero ---
   Va justo debajo del corte en diagonal, así que se mete por debajo de él
   (la regla main > .laserclean-hero + *) y compensa con padding. */
.laserclean-confianza {
	padding-top: calc(var(--laserclean-corte, 0px) + var(--wp--preset--spacing--30));
	padding-bottom: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
}

.laserclean-confianza__lista {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.laserclean-confianza__lista li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 14px;
	transition: background-color 0.25s ease;
}

.laserclean-confianza__lista li:hover {
	background: var(--wp--preset--color--surface);
}

.laserclean-confianza__lista li > span:last-child {
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.35;
}

.laserclean-confianza__lista strong {
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
}

.laserclean-confianza__icono {
	display: grid;
	place-items: center;
	flex: 0 0 48px;
	height: 48px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	color: var(--wp--preset--color--primary);
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.laserclean-confianza__lista li:hover .laserclean-confianza__icono {
	transform: scale(1.06);
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

@media (max-width: 1000px) {
	.laserclean-confianza__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.laserclean-confianza__lista li {
		padding: 10px 6px;
		gap: 10px;
	}

	.laserclean-confianza__icono {
		flex-basis: 40px;
		height: 40px;
	}
}

/* --- Llamada final a lo ancho, con el isotipo de adorno --- */
.laserclean-cta {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 50% 80% at 100% 0%, rgba(66, 162, 174, 0.35), transparent 70%),
		var(--wp--preset--color--primary-strong) !important;
}

.laserclean-cta::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -120px;
	width: 420px;
	aspect-ratio: 1;
	transform: translateY(-50%) rotate(-8deg);
	background: url("assets/img/isotipo-linea.svg") center / contain no-repeat;
	opacity: 0.18;
	pointer-events: none;
}

.laserclean-cta > * {
	position: relative;
	z-index: 1;
}

.laserclean-cta .laserclean-eyebrow {
	color: var(--wp--preset--color--accent);
}

.laserclean-cta__botones {
	gap: 12px !important;
	align-items: stretch !important;
	max-width: 24rem;
	margin-left: auto;
}

.laserclean-cta__botones .wp-block-button {
	width: 100%;
}

.laserclean-cta__botones .wp-element-button {
	width: 100%;
	text-align: center;
}

.laserclean-cta__botones .is-style-outline .wp-element-button {
	border-color: rgba(255, 255, 255, 0.55);
}

/* --- Pie --- */
.laserclean-pie__rejilla {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
}

.laserclean-pie h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.laserclean-pie ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}

.laserclean-pie li + li {
	margin-top: 10px;
}

.laserclean-pie p {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	max-width: 22rem;
}

.laserclean-pie__logo img {
	display: block;
	width: 170px;
	height: auto;
	margin-bottom: var(--wp--preset--spacing--20);
}

.laserclean-pie__nota {
	color: var(--wp--preset--color--muted);
}

.laserclean-pie__direccion {
	color: var(--wp--preset--color--muted);
}

.laserclean-pie a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.3s ease, color 0.2s ease;
}

.laserclean-pie a:hover {
	color: var(--wp--preset--color--primary-strong);
	background-size: 100% 2px;
}

.laserclean-pie__logo {
	background: none !important;
}

.laserclean-pie__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--50) !important;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

.laserclean-pie__base p {
	margin: 0;
	max-width: none;
}

.laserclean-pie__base ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.laserclean-pie__base li + li {
	margin-top: 0;
}

.laserclean-pie__base a {
	color: var(--wp--preset--color--muted);
}

.laserclean-pie__redes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--20) !important;
}

.laserclean-pie__redes li + li {
	margin-top: 0;
}

.laserclean-pie__redes a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

.laserclean-pie__redes svg {
	flex: none;
	color: var(--wp--preset--color--primary);
}

@media (max-width: 900px) {
	.laserclean-pie__rejilla {
		grid-template-columns: 1fr 1fr;
	}

	.laserclean-pie__marca {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.laserclean-pie__rejilla {
		grid-template-columns: 1fr;
	}
}

/* --- Tarjetas de contacto (reservar, antes y después) --- */
.laserclean-contacto {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--40);
}

.laserclean-contacto__tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	text-decoration: none !important;
	background-image: none !important;
	font-size: var(--wp--preset--font-size--small);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.laserclean-contacto__tarjeta strong {
	font-size: 1.0625rem;
}

.laserclean-contacto__tarjeta > span:not(.laserclean-contacto__icono):not(.laserclean-contacto__accion) {
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
}

a.laserclean-contacto__tarjeta:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 16px 36px rgba(13, 42, 44, 0.1);
}

.laserclean-contacto__icono {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	transition: background-color 0.3s ease, color 0.3s ease;
}

a.laserclean-contacto__tarjeta:hover .laserclean-contacto__icono {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.laserclean-contacto__accion {
	position: absolute;
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
	font-size: 1.25rem;
	color: var(--wp--preset--color--primary);
	transition: transform 0.3s ease;
}

a.laserclean-contacto__tarjeta:hover .laserclean-contacto__accion {
	transform: translateX(4px);
}

.laserclean-contacto__tarjeta--principal {
	border-color: var(--wp--preset--color--primary-strong);
	background: var(--wp--preset--color--primary-strong);
	color: var(--wp--preset--color--base);
}

.laserclean-contacto__tarjeta--principal > span:not(.laserclean-contacto__icono):not(.laserclean-contacto__accion) {
	color: rgba(255, 255, 255, 0.8);
}

.laserclean-contacto__tarjeta--principal .laserclean-contacto__icono {
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--base);
}

.laserclean-contacto__tarjeta--principal .laserclean-contacto__accion {
	color: var(--wp--preset--color--base);
}

.laserclean-contacto__tarjeta--info {
	background: var(--wp--preset--color--surface);
}

@media (max-width: 1000px) {
	.laserclean-contacto {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.laserclean-contacto {
		grid-template-columns: 1fr;
	}
}

/* --- Índice de la pilar, en tarjetas numeradas ---
   Los números son los mismos que llevan los H2 (01…12). */
.laserclean-interior > .laserclean-indice {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.laserclean-indice__titulo {
	margin-bottom: var(--wp--preset--spacing--20);
}

.laserclean-interior > .laserclean-indice ol {
	counter-reset: laserclean-i;
	list-style: none;
	padding: 0;
	columns: auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.laserclean-interior > .laserclean-indice li {
	counter-increment: laserclean-i;
	margin: 0;
}

.laserclean-interior > .laserclean-indice li a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	height: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	line-height: 1.35;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.laserclean-interior > .laserclean-indice li a::before {
	content: counter(laserclean-i, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-style: italic;
	font-variant-numeric: lining-nums;
	color: var(--wp--preset--color--accent);
}

.laserclean-interior > .laserclean-indice li a:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 10px 24px rgba(13, 42, 44, 0.08);
}

@media (max-width: 1000px) {
	.laserclean-interior > .laserclean-indice ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.laserclean-interior > .laserclean-indice ol {
		grid-template-columns: 1fr;
	}
}

/* --- Tarjetas genéricas del contenido (datos clave, cómo llegar…) --- */
.laserclean-tarjetas {
	list-style: none;
	margin-block: var(--wp--preset--spacing--40) !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.laserclean-tarjetas > li {
	margin: 0 !important;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.laserclean-tarjetas > li:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 16px 36px rgba(13, 42, 44, 0.1);
}

.laserclean-tarjetas__cifra {
	display: block;
	margin-bottom: 6px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.1;
	font-variant-numeric: lining-nums;
	color: var(--wp--preset--color--primary);
}

.laserclean-tarjetas__titulo {
	display: block;
	margin-bottom: 6px;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.laserclean-tarjetas .laserclean-contacto__icono {
	transition: background-color 0.3s ease, color 0.3s ease;
}

.laserclean-tarjetas > li:hover .laserclean-contacto__icono {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.laserclean-tarjetas .wp-element-button,
.laserclean-tarjetas a.wp-element-button {
	display: inline-block;
	margin-top: 12px;
	padding: 0.6rem 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	background-image: none;
}

@media (max-width: 1000px) {
	.laserclean-tarjetas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.laserclean-tarjetas {
		grid-template-columns: 1fr;
	}
}

/* --- Aviso destacado dentro del contenido --- */
.laserclean-aviso {
	padding: var(--wp--preset--spacing--30) !important;
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 16px 16px 0;
	background: var(--wp--preset--color--surface);
}

.laserclean-aviso > :first-child {
	margin-top: 0;
}

/* --- Barra de progreso de lectura en las interiores ---
   Solo CSS, con la línea de tiempo del scroll. Sin soporte no sale nada. */
@keyframes laserclean-progreso {
	to {
		transform: scaleX(1);
	}
}

@supports (animation-timeline: scroll()) {
	body.page:not(.home)::after {
		content: "";
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: var(--wp--preset--color--accent);
		transform: scaleX(0);
		transform-origin: 0 50%;
		animation: laserclean-progreso linear both;
		animation-timeline: scroll(root);
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.laserclean-contacto__tarjeta,
	.laserclean-tarjetas > li,
	.laserclean-interior > .laserclean-indice li a {
		transition: none;
	}

	a.laserclean-contacto__tarjeta:hover,
	.laserclean-tarjetas > li:hover,
	.laserclean-interior > .laserclean-indice li a:hover {
		transform: none;
	}
}

/* Botón secundario claro dentro de una tarjeta. */
.laserclean-tarjetas .laserclean-boton-claro {
	border: 1px solid var(--wp--preset--color--primary-strong);
	background: transparent;
	color: var(--wp--preset--color--primary-strong);
}

.laserclean-tarjetas .laserclean-boton-claro:hover {
	background: var(--wp--preset--color--primary-strong);
	color: var(--wp--preset--color--base);
}

/* El isotipo de la cabecera solo cabe a la derecha de la columna de texto
   en pantallas anchas; por debajo, fuera. */
@media (max-width: 1180px) {
	.laserclean-cabecera::after {
		display: none;
	}
}

.laserclean-distancias figcaption {
	margin-top: 10px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   Tipografía · 28-09-2026
   Anybody para títulos y cifras, Hanken Grotesk para el texto. Sustituyen a
   Cormorant Garamond + Source Sans 3, que Alejandro descartó por ser la pareja
   que sale en casi cualquier web hecha con IA. Anybody es variable también en
   anchura: los titulares van expandidos (125 %), los títulos pequeños un poco
   menos, para que no se coman la tarjeta.
   ========================================================================== */
:where(h1, h2, .wp-block-post-title) {
	font-stretch: 125%;
}

:where(h3, h4, h5, h6) {
	font-stretch: 112%;
}

:is(.laserclean-paso__n, .laserclean-tarjetas__cifra, .laserclean-tarjeta-confianza__cifra, .laserclean-sesiones__n, .laserclean-resena__inicial) {
	font-stretch: 125%;
	font-weight: 700;
}

.laserclean-interior > h2::before,
.laserclean-interior > .laserclean-indice li a::before {
	font-stretch: 110%;
	font-weight: 700;
}

/* Las tarjetas estrechas: el título se queda en anchura normal. */
:is(.laserclean-card, .laserclean-paso, .laserclean-resultado__texto, .laserclean-contacto__tarjeta) :is(h3, strong) {
	font-stretch: 100%;
}

/* En móvil la letra se estrecha: expandida al 125 %, «Fuenlabrada» no cabía
   en una línea a 360 px y se partía por la mitad. */
@media (max-width: 600px) {
	:where(h1, h2, .wp-block-post-title) {
		font-stretch: 105%;
	}

	:where(h3, h4, h5, h6) {
		font-stretch: 100%;
	}

	.laserclean-cabecera .wp-block-post-title {
		font-size: clamp(1.9rem, 8.4vw, 2.3rem);
	}

	/* Las migas se quedan en «Inicio»: el título ya dice dónde estás. */
	.laserclean-cabecera__migas li:not(:first-child) {
		display: none;
	}
}

:where(h1, h2, h3, .wp-block-post-title) {
	overflow-wrap: normal;
	hyphens: manual;
}

/* Blog: la entrada más reciente va a lo ancho, con la foto a la izquierda.
   Con diez entradas en tres columnas la décima se quedaba sola en su fila;
   así salen 1 + 3 + 3 + 3 y no queda hueco. Solo en la primera página. */
@media (min-width: 960px) {
	body.blog:not(.paged) .wp-block-post-template.is-layout-grid > li:first-child {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		grid-template-rows: 1fr auto auto auto auto 1fr;
		column-gap: var(--wp--preset--spacing--50);
	}

	body.blog:not(.paged) .wp-block-post-template.is-layout-grid > li:first-child > * {
		grid-column: 2;
	}

	body.blog:not(.paged) .wp-block-post-template.is-layout-grid > li:first-child > .wp-block-post-terms { grid-row: 2; }
	body.blog:not(.paged) .wp-block-post-template.is-layout-grid > li:first-child > .wp-block-post-title { grid-row: 3; }
	body.blog:not(.paged) .wp-block-post-template.is-layout-grid > li:first-child > .wp-block-post-excerpt { grid-row: 4; }
	body.blog:not(.paged) .wp-block-post-template.is-layout-grid > li:first-child > .wp-block-group { grid-row: 5; }

	body.blog:not(.paged) .wp-block-post-template.is-layout-grid > li:first-child > .wp-block-post-featured-image {
		grid-column: 1;
		grid-row: 1 / -1;
		margin-bottom: 0 !important;
	}

	body.blog:not(.paged) .wp-block-post-template.is-layout-grid > li:first-child .wp-block-post-title {
		font-size: var(--wp--preset--font-size--xx-large, 2.4rem);
	}
}