/**
 * Ficha de producto de línea — hijos de los CPT `cubrimiento` y `cerramiento`.
 *
 * Paleta de marca (CLAUDE.md): negro #000 · tinta #1A1A1A · texto #5A5A5A
 * detalle #B3B3B3 · acento rojo Parasoles #BC090E.
 *
 * El eje vertical es `wgl-container` (`max-width: 1170px + 30px` CON 30px de padding), la
 * misma clase que usan el header, el footer y las landings de línea. Un contenedor propio de
 * 1170px dejaría el contenido 15px desalineado (trampa 16).
 *
 * El rojo aparece SOLO como filete: separadores de miga, subrayado de los antetítulos y el
 * borde superior del panel técnico. Es lo mismo que ya hace la ficha de proyecto — la marca es
 * monocroma y el color lo aportan las fotos.
 *
 * ── RITMO DE BANDAS ─────────────────────────────────────────────────────────────
 *
 * Los fondos alternan por POSICIÓN, no por lo que la sección significa, y esto hay que releerlo
 * cada vez que se reordenen las secciones (`parasoles_linea_render()`), porque los grises del
 * proyecto están tan cerca entre sí que dos bandas contiguas del mismo tono se leen como una sola
 * sección altísima. Orden vigente desde el 2026-08-14:
 *
 *   01 Hero              foto a sangre
 *   02 Contenido         #ffffff
 *   03 Versiones         #ededed   (--claro)
 *   04 Configurador 3D   #ffffff   ← era #f4f4f4; con Versiones antes y Ficha técnica después,
 *                                    los tres grises seguidos (#ededed · #f4f4f4 · #ededed) eran
 *                                    indistinguibles. El marco del visor conserva su #f4f4f4, así
 *                                    que ahora el visor se lee como panel dentro de banda blanca.
 *   05 Ficha técnica     #ededed
 *   06 Formulario        #000000
 *   07 Proyectos         #ededed   ← era #ffffff; venía justo detrás de Anclaje, también blanco. Se
 *                                    cambió esta y no Anclaje porque el tile de cada esquema es
 *                                    #f4f4f4 y sobre #ededed desaparecería.
 *   08 Anclaje           #ffffff
 *   09 De qué está hecha #000000   (--oscuro)
 *   10 Qué lleva dentro  #ededed   (--claro)
 *   05b Preguntas        #ffffff   ← letra y no número: se intercaló el 2026-08-20 entre el 05 y
 *                                    el 06, y numerarla habría corrido los seis rótulos
 *                                    siguientes (ver `parasoles_linea_cajas()`). Ese mismo día,
 *                                    más tarde, se movió AQUÍ —detrás de todo el contenido y
 *                                    delante de la salida— y el rótulo se quedó igual por lo
 *                                    mismo: el panel de edición lo cita.
 *   -- Sigue explorando  #ededed   ← sin número: no tiene campos, como el 06 (ver el comentario
 *                                    de `parasoles_linea_relacionados()`). Era #ffffff cuando
 *                                    detrás llevaba el 10; con las preguntas delante, en blanco
 *                                    se leerían como una sola banda. En #ededed además sus
 *                                    tarjetas pueden ser blancas, como las descargas del 05.
 *                                    Sigue cortando el par de bandas negras 06→11 de las tres
 *                                    fichas vacías.
 *   11 Cierre            #000000
 *
 * Y como cualquier sección puede no pintarse (todas son condicionales menos el formulario), la
 * alternancia real depende de qué metas tenga la ficha: de ahí las reglas de bandas adyacentes
 * del final de este archivo —una para las oscuras y otra para las claras—, que no se pueden
 * sustituir por elegir bien los fondos. Al añadir o mover una sección hay que revisar las dos.
 */

/*
 * En `:root` y no en `.pt-lp`: son los tokens de marca de CLAUDE.md (Principal/Secundario/
 * Texto/Detalle/Acento), no algo propio de la ficha. Vivían solo bajo `.pt-lp` hasta que
 * `[tipo-cotizar]` reutilizó `.pt-lp-cotiza` en una página de TIPO —maquetada en Elementor, sin
 * ese `<article class="pt-lp">` envolvente— y su fondo negro se quedó transparente por `var()`
 * sin resolver: sin ancestro `.pt-lp`, la variable no existe y la propiedad cae a su valor
 * inicial en vez de al negro declarado.
 */
:root {
	--pt-negro: #000000;
	--pt-tinta: #1a1a1a;
	--pt-texto: #5a5a5a;
	--pt-linea: #b3b3b3;
	--pt-borde-panel: #7d7d7d;
	--pt-rojo: #bc090e;
	--pt-gris: #f4f4f4;
	--pt-gris-medio: #ededed;
}

/*
 * `#main { padding: 40px 0 }` es una regla global del theme con shorthand (trampa 19). Aquí
 * abre una franja blanca de 40px encima del hero, que tiene que quedar a ras porque el header
 * es transparente. Se anula solo arriba; el padding inferior es el aire antes del footer.
 *
 * 1 id + 1 clase + 1 tipo gana a `#main` sin necesidad de `!important`.
 */
body.pt-single-linea #main {
	padding-top: 0;
}

/* ══ 01 · HERO ═══════════════════════════════════════════════════════════════ */

.pt-lp-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/*
	 * El alto NO es decoración: con `align-items: flex-end` el bloque de texto se pega abajo,
	 * así que cuanto más alto es el hero, más abajo cae el H1 y más velo tiene encima. Medido:
	 * con 780px el contenido desbordaba y el H1 arrancaba en y=238 de 755 —el 31 % desde
	 * arriba, donde el degradado inferior aún está casi transparente— y daba 3,08:1. Subiendo
	 * el techo a 880 el mismo H1 baja al ~37 % desde abajo, ya dentro de la zona protegida.
	 */
	min-height: clamp(560px, 84vh, 880px);
	overflow: hidden;
	background-color: var(--pt-tinta);
}

.pt-lp-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Dos velos con trabajos distintos, igual que en la ficha de proyecto (trampa 17):
 *
 *  · el de ARRIBA es para el HEADER, que es transparente y cuyo logo y menú son blancos. Sin
 *    él desaparecen sobre las zonas claras de la foto. No es decoración.
 *  · el de abajo da contraste al H1, a la entradilla y a los botones.
 */
.pt-lp-hero__velo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.74) 0%,
			rgba(0, 0, 0, 0.56) 45%,
			rgba(0, 0, 0, 0.16) 82%,
			rgba(0, 0, 0, 0) 100%
		)
		no-repeat top / 100% 220px,
		/*
		 * 2ª iteración (decisión de José, 2026-08-06): «el hero está demasiado oscuro, dale más
		 * protagonismo a la foto». El velo anterior llegaba a 0,86 al 24 % de altura y apagaba
		 * la imagen entera.
		 *
		 * Aclararlo sin perder AA se consiguió por dos vías que NO son bajar la opacidad a
		 * ciegas: (a) el titular y la entradilla se redujeron de tamaño, así que el bloque de
		 * texto ocupa menos altura y necesita menos superficie protegida; (b) el degradado se
		 * concentra abajo —donde está el texto— y se apaga antes, así que los dos tercios
		 * superiores de la foto quedan casi limpios. El resultado se remidió, no se supuso.
		 */
		linear-gradient(
			to top,
			rgba(0, 0, 0, 0.88) 0%,
			rgba(0, 0, 0, 0.74) 26%,
			rgba(0, 0, 0, 0.42) 48%,
			rgba(0, 0, 0, 0.12) 72%,
			rgba(0, 0, 0, 0) 100%
		);
}

/* El padding superior reserva el alto del header: transparente, no ocupa espacio propio. */
.pt-lp-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: 190px clamp(48px, 7vh, 84px);
}

.pt-lp-hero__kicker {
	display: block;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--pt-rojo);
	color: #ffffff;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	/* El filete rojo mide lo que el texto, no toda la columna: es un subrayado, no una regla. */
	width: fit-content;
}

/*
 * Titular y entradilla CONTENIDOS a propósito (2ª iteración, decisión de José): el hero es la
 * foto, no el texto. El H1 bajó de un techo de 4,4rem a 2,6rem y la entradilla de 1,16 a
 * 1,02rem, y las dos columnas se estrecharon —22ch y 46ch— para que el bloque no cruce la
 * imagen de lado a lado. Menos superficie de texto es además menos velo necesario: es lo que
 * permitió aclarar el degradado sin caer por debajo de AA.
 */
.pt-lp-hero__titulo {
	max-width: 22ch;
	margin: 0;
	color: #ffffff;
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-transform: none;
}

/* Escala de prosa canónica del child theme — ver el bloque de `producto.css` (`.pt-prosa p`)
 * para los tres roles y el porqué de cada valor. Los intros sobre banda/foto oscura van a 1rem:
 * el contraste ya lo pone el fondo, no hacen falta los 17-18 px que tenían antes. */
.pt-lp-hero__lead {
	max-width: 46ch;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(0.94rem, 1vw, 1rem);
	font-weight: 300;
	line-height: 1.7;
}

.pt-lp-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 38px;
}

/* ══ Botones ═════════════════════════════════════════════════════════════════ */

.pt-lp-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	padding: 17px 32px;
	border: 1px solid transparent;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Sobre foto o fondo oscuro: blanco, y el hover invierte a negro (CLAUDE.md § Marca). */
.pt-lp-boton--claro {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var(--pt-tinta);
}

.pt-lp-boton--claro:hover,
.pt-lp-boton--claro:focus-visible {
	background-color: var(--pt-negro);
	border-color: #ffffff;
	color: #ffffff;
}

.pt-lp-boton--linea,
.pt-lp-boton--fantasma {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: #ffffff;
}

.pt-lp-boton--linea:hover,
.pt-lp-boton--linea:focus-visible,
.pt-lp-boton--fantasma:hover,
.pt-lp-boton--fantasma:focus-visible {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var(--pt-tinta);
}

/*
 * El icono de WhatsApp hereda el color del botón con `currentColor`, así que la inversión del
 * hover se lo lleva por delante sin una sola regla de color propia. `flex: 0 0 auto` para que
 * no se encoja cuando el botón va a ancho completo en móvil.
 */
.pt-lp-icono {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
}

/* Sólido sobre fondo claro: negro, hover a tinta. */
.pt-lp-boton--solido {
	background-color: var(--pt-negro);
	border-color: var(--pt-negro);
	color: #ffffff;
}

.pt-lp-boton--solido:hover,
.pt-lp-boton--solido:focus-visible {
	background-color: var(--pt-tinta);
	border-color: var(--pt-tinta);
	color: #ffffff;
}

/* ══ Encabezado de sección, compartido ═══════════════════════════════════════ */

.pt-lp-encabezado {
	margin-bottom: clamp(38px, 5vw, 64px);
}

.pt-lp-kicker {
	display: block;
	margin-bottom: 16px;
	color: var(--pt-texto);
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.pt-lp-titulo {
	max-width: 20ch;
	margin: 0;
	color: var(--pt-tinta);
	font-size: clamp(1.85rem, 3.5vw, 2.9rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-transform: none;
}

.pt-lp-entradilla {
	max-width: 62ch;
	margin: 20px 0 0;
	color: var(--pt-texto);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
}

/* ══ Prosa ═══════════════════════════════════════════════════════════════════ */

.pt-lp-prosa p {
	margin: 0 0 1.35em;
	color: var(--pt-texto);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
}

.pt-lp-prosa p:last-child {
	margin-bottom: 0;
}

/* La entradilla del relato entra más grande y en tinta, como en la ficha de proyecto. */
.pt-lp-relato__texto .pt-lp-prosa > p:first-child {
	color: var(--pt-tinta);
	font-size: 1.08rem;
	font-weight: 300;
	line-height: 1.6;
}

.pt-lp-prosa strong {
	color: var(--pt-tinta);
	font-weight: 600;
}

/* ══ 02 · CONTENIDO (relato) ═════════════════════════════════════════════════ */

.pt-lp-relato {
	padding-block: clamp(64px, 9vw, 120px);
	background-color: #ffffff;
}

/*
 * Grid asimétrico 5/7: el texto en la columna estrecha y la foto en la ancha. Es el reparto
 * del referente, y funciona porque el relato son tres párrafos cortos —en una columna ancha
 * la línea se pasa de los 75 caracteres cómodos de lectura.
 */
.pt-lp-relato__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(36px, 5vw, 80px);
	align-items: center;
}

/* Sin foto de ambiente: una sola columna con el ancho de lectura acotado, en vez del texto
   comprimido al 42 % y medio bloque en blanco. Lo pone `parasoles_linea_relato()`. */
.pt-lp-relato__grid--solo {
	grid-template-columns: minmax(0, 72ch);
	justify-content: center;
}

.pt-lp-relato__titulo {
	margin: 0 0 28px;
	color: var(--pt-tinta);
	font-size: clamp(1.85rem, 3.4vw, 2.8rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-transform: none;
}

.pt-lp-relato__titulo::after {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	margin-top: 26px;
	background-color: var(--pt-rojo);
}

.pt-lp-relato__figura {
	margin: 0;
	/* La proporción la fija el contenedor y la foto la rellena: así el bloque no salta de alto
	   según qué archivo se cargue, y no hace falta recortar cada original al mismo ratio. */
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--pt-gris);
}

.pt-lp-relato__figura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ══ 03 VERSIONES / 09 DE QUÉ ESTÁ HECHA / 10 QUÉ LLEVA DENTRO ═══════════════ */

.pt-lp-fichas {
	padding-block: clamp(64px, 9vw, 120px);
}

.pt-lp-fichas--claro {
	background-color: var(--pt-gris-medio);
}

.pt-lp-fichas--oscuro {
	background-color: var(--pt-negro);
}

.pt-lp-fichas--oscuro .pt-lp-titulo {
	color: #ffffff;
}

/*
 * rgba(255,255,255,0.72) sobre negro da 12,1:1 — muy por encima de AA. Se usa este valor y no
 * blanco puro para que el antetítulo no compita con el H2, que es lo que debe leerse primero.
 */
.pt-lp-fichas--oscuro .pt-lp-kicker {
	color: rgba(255, 255, 255, 0.72);
}

/*
 * FLEX Y NO GRID, por la misma razón que el bloque 03+04 de la portada: cuando el número de
 * fichas no es múltiplo del de columnas, la última fila deja huérfanas. En un grid de columnas
 * fijas se quedan pegadas a la izquierda con el hueco al lado y se lee como un error; con
 * `flex-wrap` + `justify-content: center` se centran solas.
 *
 * El gap va FIJO en 30px y no en `clamp()` porque el ancho de cada tarjeta se calcula con
 * `calc()` y hay que descontar la fracción exacta del hueco (trampa 27): a 3 columnas
 * `calc(33.333% - 20px)` cuadra, y a 2 es `- 15px` y no `- 10px`, o la suma pasa del 100 % y
 * la fila se parte en una tarjeta por línea.
 */
.pt-lp-rejilla {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

.pt-lp-rejilla > .pt-lp-ficha {
	flex: 0 1 calc(33.333% - 20px);
}

.pt-lp-rejilla--1 > .pt-lp-ficha {
	flex-basis: min(100%, 720px);
}

.pt-lp-rejilla--2 > .pt-lp-ficha {
	flex-basis: calc(50% - 15px);
}

.pt-lp-ficha {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
}

.pt-lp-fichas--oscuro .pt-lp-ficha {
	background-color: #111111;
}

.pt-lp-ficha__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--pt-gris);
}

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

.pt-lp-ficha:hover .pt-lp-ficha__media img {
	transform: scale(1.04);
}

.pt-lp-ficha__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp(26px, 2.4vw, 36px);
}

.pt-lp-ficha__titulo {
	margin: 0 0 10px;
	color: var(--pt-tinta);
	font-size: clamp(1.25rem, 1.9vw, 1.55rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: none;
}

.pt-lp-ficha__titulo a {
	color: inherit;
	text-decoration: none;
}

.pt-lp-ficha__titulo a:hover {
	color: var(--pt-rojo);
}

.pt-lp-fichas--oscuro .pt-lp-ficha__titulo {
	color: #ffffff;
}

/*
 * El subtítulo es la línea que resume la diferencia del modelo. Va en tinta y no en gris: es
 * lo primero que se lee después del nombre, y con el `#5A5A5A` de párrafo pesaba menos que el
 * cuerpo de texto que tiene debajo.
 */
.pt-lp-ficha__subtitulo {
	margin: 0 0 16px;
	color: var(--pt-tinta);
	font-size: 0.94rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.pt-lp-fichas--oscuro .pt-lp-ficha__subtitulo {
	color: rgba(255, 255, 255, 0.88);
}

.pt-lp-ficha__texto {
	margin: 0 0 22px;
	color: var(--pt-texto);
	font-size: 0.98rem;
	line-height: 1.72;
}

.pt-lp-fichas--oscuro .pt-lp-ficha__texto {
	/* 0.66 sobre #111 da 8,4:1. El #5A5A5A de marca sobre negro se quedaría en 3,1:1. */
	color: rgba(255, 255, 255, 0.66);
}

/* Chips de datos: los tres o cuatro números que definen la pieza, sin párrafo alrededor. */
.pt-lp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.pt-lp-chips li {
	padding: 7px 13px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	color: var(--pt-tinta);
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pt-lp-fichas--oscuro .pt-lp-chips li {
	border-color: rgba(255, 255, 255, 0.26);
	color: rgba(255, 255, 255, 0.9);
}

/* ══ 06 · FORMULARIO DE COTIZACIÓN ═══════════════════════════════════════════
 *
 * Panel negro a dos columnas debajo de las versiones: texto + WhatsApp a la izquierda, formulario
 * CF7 a la derecha. Calcado del cierre de la ficha de mobiliario (`.pt-cta` en `producto.css`) para
 * que los dos catálogos se comporten igual — incluido el formulario EN MODO OSCURO, sin tarjeta
 * blanca propia, para que se integre en el panel en vez de leerse como un bloque pegado encima.
 *
 * La columna del texto es fija y la del formulario elástica, al revés de lo que pide el instinto:
 * el formulario tiene 8 campos y dos filas de dos columnas, así que es lo que necesita el ancho;
 * el texto son tres líneas y un botón.
 */

.pt-lp-cotiza {
	padding-block: clamp(52px, 6.5vw, 88px);
	background-color: var(--pt-negro);
}

.pt-lp-cotiza__inner {
	display: grid;
	grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
	/* `center` y no `start`, igual que el `.pt-cta` de mobiliario: el formulario mide más del
	   doble que el bloque de texto, así que alinearlos arriba deja un hueco enorme bajo el botón
	   de WhatsApp. Centrado, ese hueco se reparte en dos y deja de leerse como un olvido. */
	align-items: center;
	gap: clamp(34px, 4.5vw, 64px);
}

.pt-lp-cotiza__texto .pt-lp-kicker {
	/* 0,72 sobre negro da 12,1:1: por encima de AA sin competir con el H2, mismo valor y misma
	   razón que en la banda oscura de Materiales. */
	color: rgba(255, 255, 255, 0.72);
}

.pt-lp-cotiza h2 {
	margin: 0 0 16px;
	color: #ffffff;
	font-size: clamp(1.45rem, 2.6vw, 2rem);
	line-height: 1.18;
	letter-spacing: -0.01em;
	text-transform: none;
}

.pt-lp-cotiza p {
	margin: 0 0 26px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
}

/* ── El formulario, en modo oscuro ──────────────────────────────────────────── */

.pt-lp-cotiza__form {
	text-align: left;
}

.pt-lp-cotiza__form .pt-form__fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.pt-lp-cotiza__form label {
	display: block;
	margin-bottom: 14px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}

.pt-lp-cotiza__form input[type="text"],
.pt-lp-cotiza__form input[type="email"],
.pt-lp-cotiza__form input[type="tel"],
.pt-lp-cotiza__form select,
.pt-lp-cotiza__form textarea {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 12px 14px;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.pt-lp-cotiza__form input::placeholder,
.pt-lp-cotiza__form textarea::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

/* El desplegable abierto lo pinta el sistema operativo sobre fondo claro, así que sus opciones
   necesitan color de tinta explícito o se quedan en blanco sobre blanco. */
.pt-lp-cotiza__form select option {
	color: var(--pt-tinta);
}

.pt-lp-cotiza__form input:focus-visible,
.pt-lp-cotiza__form select:focus-visible,
.pt-lp-cotiza__form textarea:focus-visible {
	outline: none;
	border-color: #ffffff;
	background-color: rgba(255, 255, 255, 0.1);
}

.pt-lp-cotiza__form textarea {
	resize: vertical;
	min-height: 90px;
}

.pt-lp-cotiza__form .pt-form__privacidad {
	margin-bottom: 16px;
}

.pt-lp-cotiza__form .pt-form__privacidad label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	color: #ffffff;
}

/*
 * TRAMPA 62. El texto de la casilla NO vive en el `<label>`, sino en un `<span>` hermano del
 * checkbox, y el theme (`mink/css/main.css`) le fija `color: var(--mink-content-color)` con el
 * selector `input[type="checkbox"] + span` — una regla que apunta al span DIRECTAMENTE, así que el
 * blanco del `<label>` de arriba nunca llega a heredarse: un color explícito en el propio elemento
 * gana siempre a la herencia, sin importar la especificidad del ancestro. Hay que igualar el span.
 */
.pt-lp-cotiza__form .pt-form__privacidad .wpcf7-list-item-label {
	color: #ffffff;
}

/*
 * TRAMPA 63. El checkbox ya lo dibuja a mano el theme (`wgl-style-input`, la clase que WordPress
 * pone en el `<body>` según el ajuste global de estilo de campos) con borde y relleno en
 * `!important`, así que poner aquí `border` o `background-color` no hace nada gane o no en
 * especificidad. Pero esa regla no lee colores fijos: lee DOS variables CSS que en esta página
 * resuelven al color del header (`24,24,24`, casi negro) e invisible sobre el panel. La salida no
 * es pelear el `!important` sino redefinir las dos variables — eso solo necesita ganar la cascada
 * normal de la variable, donde sí manda la especificidad.
 */
.pt-lp-cotiza__form .pt-form__privacidad input[type="checkbox"] {
	--mink-header-rgb: 255, 255, 255;
	--mink-header-font-color: #ffffff;
}

.pt-lp-cotiza__form .wpcf7-submit {
	width: 100%;
	padding: 16px 24px;
	background-color: #ffffff;
	border: 1px solid #ffffff;
	color: var(--pt-tinta);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.pt-lp-cotiza__form .wpcf7-submit:hover,
.pt-lp-cotiza__form .wpcf7-submit:focus-visible {
	background-color: var(--pt-rojo);
	border-color: var(--pt-rojo);
	color: #ffffff;
}

.pt-lp-cotiza__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #ff6b6b;
	font-size: 11px;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}

.pt-lp-cotiza__form .wpcf7-response-output {
	margin-top: 16px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
}

.pt-lp-cotiza__form .cf-turnstile {
	margin-bottom: 16px;
}

/*
 * DOS BANDAS NEGRAS SEGUIDAS, y no es un caso raro: la plantilla tiene **tres** secciones de fondo
 * oscuro —el formulario (06), «De qué está hecha» (09) y el cierre (11)— y todas las que van entre
 * ellas son condicionales, así que la adyacencia depende de qué metas tenga la ficha y no del orden
 * del código. Pasa hoy en los dos extremos del catálogo: en las 22 fichas vacías el formulario cae
 * directo sobre el cierre, y en una ficha con materiales pero sin tecnología, Materiales cae sobre
 * el cierre. Sin esto se leen como un solo bloque negro altísimo.
 *
 * Se recorta el aire donde se tocan y queda un filete tenue que marca el límite. **No** se separan
 * con una franja clara a propósito: eso inventaría una sección que no existe.
 *
 * Están los tres pares posibles según el orden vigente (formulario → materiales, formulario →
 * cierre, materiales → cierre). Si se reordenan las secciones oscuras, revisar esta lista.
 */
.pt-lp-cotiza + .pt-lp-fichas--oscuro,
.pt-lp-cotiza + .pt-lp-cta,
.pt-lp-fichas--oscuro + .pt-lp-cta {
	padding-top: clamp(38px, 4.5vw, 60px);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/*
 * Y EL MISMO PROBLEMA CON LAS BANDAS CLARAS, por la misma causa y con la misma solución.
 *
 * Hasta el 2026-08-14 no se había dado porque ninguna ficha llegaba a la combinación que lo
 * provoca. Lo destaparon PergoLam (2724) y PergoDom (2726) el mismo día, y por el mismo motivo:
 * son las dos primeras fichas con `modelos` Y `specs` pero SIN modelo 3D. El visor es blanco
 * justamente para separarlas (ver el comentario de `.pt-lp-visor`), así que al no pintarse,
 * Versiones y Ficha técnica quedan pegadas —las dos en #ededed— y se leen como una sola sección
 * de dos pantallas. Es la trampa 74 otra vez, pero provocada por una meta que FALTA, no por un
 * reorden: la adyacencia depende de qué metas tenga cada ficha.
 *
 * Los grises del proyecto se diferencian en 7 de 255, así que a ojo en una captura larga esto no
 * se ve. Se detecta comparando `backgroundColor` de las secciones EN ORDEN DE DOCUMENTO dentro de
 * un `<iframe>`. ⚠️ Y al medirlo, mirar también `borderTopWidth`: comprobar solo el color de
 * fondo da un falso positivo, porque el remedio de abajo NO cambia el fondo — deja los dos tonos
 * iguales a propósito y separa con filete.
 *
 * Los tres pares posibles con el orden vigente, contando con que 06 siempre se pinta y por tanto
 * corta cualquier adyacencia que lo cruce:
 *   03 Versiones  → 05 Ficha técnica    (ficha sin 3D)                  ← PergoLam y PergoDom
 *   02 Relato     → 04 Configurador 3D  (ficha con 3D y sin versiones)  ← Romano, caso latente
 *   07 Proyectos  → 10 Qué lleva dentro (sin anclaje ni materiales)
 * El resto de contactos claros son #ededed contra #ffffff, que sí se distinguen.
 *
 * El filete va en negro al 10 %: sobre #ededed se ve lo justo para marcar el corte, y sobre
 * blanco (el par 02→04) tampoco chirría. NO se mete una franja de otro tono en medio, que
 * inventaría una sección inexistente.
 *
 * Y tampoco vale la salida obvia de pasar Ficha técnica a blanco cuando le falta el 3D delante:
 * sus tarjetas de descarga (`.pt-lp-doc a`) son #ffffff y desaparecerían contra el fondo. Es el
 * mismo motivo por el que Anclaje se quedó en blanco en el reorden del 2026-08-14 y se movió
 * Proyectos en su lugar — el fondo de una banda no se elige solo mirando a sus vecinas.
 */
.pt-lp-fichas--claro + .pt-lp-tecnica,
.pt-lp-galeria + .pt-lp-fichas--claro,
.pt-lp-relato + .pt-lp-visor,
.pt-lp-instalacion + .pt-lp-faq,
.pt-lp-libre + .pt-lp-faq,
.pt-lp-galeria + .pt-lp-relacionados,
.pt-lp-fichas--claro + .pt-lp-relacionados {
	padding-top: clamp(38px, 4.5vw, 60px);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/*
 * Los cuatro últimos son LATENTES, y la lista se rehízo entera con el reorden del 2026-08-20:
 * al mover las preguntas al final, sus vecinas posibles ya no son las mismas. El filtro es que
 * el FORMULARIO se pinta siempre —es la única sección no condicional—, así que nada de lo que
 * hay antes de él puede tocar ni a las preguntas ni a la salida: los pares `relato + faq`,
 * `visor + faq`, `relato + relacionados` y `visor + relacionados` que había aquí son ahora
 * IMPOSIBLES, no latentes, y se quitaron.
 *
 * Lo que queda:
 *
 *  · `instalacion + faq` y `libre + faq` — blanco contra blanco. Basta una ficha con anclaje y
 *    sin materiales ni tecnología, o con prosa libre en el `post_content`, que hoy no usa
 *    ninguna.
 *  · `galeria + relacionados` y `fichas--claro + relacionados` — #ededed contra #ededed, y el
 *    segundo es el que hay que vigilar: cualquier ficha con tecnología y SIN preguntas cae ahí.
 *    Hoy no existe —las 26 tienen entre 4 y 9 preguntas, medido— pero una ficha nueva empieza
 *    sin ellas, así que es el par más probable de los cuatro.
 *
 * Es exactamente cómo apareció el par 03→05 el 2026-08-14, que tampoco existía hasta que
 * PergoLam y PergoDom lo estrenaron el mismo día.
 */

/* ══ 04 · VISOR 3D ═══════════════════════════════════════════════════════════ */

/* Blanco, no `--pt-gris`: va entre Versiones y Ficha técnica, las dos en #ededed (ver el ritmo de
   bandas en la cabecera del archivo). El marco de abajo mantiene su gris, así que el visor sigue
   teniendo su propio panel. */
.pt-lp-visor {
	padding-block: clamp(64px, 9vw, 120px) 0;
	background-color: #ffffff;
}

.pt-lp-visor__marco {
	position: relative;
	margin-top: clamp(30px, 4vw, 52px);
	background-color: var(--pt-gris);
}

/*
 * El custom element `<threed-live-viewer>` es inline por defecto y sin display propio no
 * respeta el `height` que le pasa el shortcode: el bloque salía con 0 px de alto.
 */
.pt-lp-visor__marco threed-live-viewer {
	display: block;
	width: 100%;
}

/*
 * ── Capa de activación ───────────────────────────────────────────────────────
 *
 * Mientras está, el visor no recibe rueda ni arrastre y la página se desplaza con normalidad;
 * el primer clic la retira. Es la respuesta al problema real de un visor 3D a todo el ancho:
 * el usuario que baja por la ficha entra en él y, en vez de seguir bajando, gira el modelo.
 *
 * Casi invisible: fondo transparente y solo la pista de texto, para no tapar la pieza. El
 * `backdrop-filter` de la pista le da legibilidad sobre cualquier modelo sin poner un panel.
 */
.pt-lp-visor__capa {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 26px;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.pt-lp-visor__marco.is-activo .pt-lp-visor__capa {
	display: none;
}

.pt-lp-visor__pista {
	padding: 11px 22px;
	background-color: rgba(0, 0, 0, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #ffffff;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background-color 0.25s ease;
}

.pt-lp-visor__capa:hover .pt-lp-visor__pista,
.pt-lp-visor__capa:focus-visible .pt-lp-visor__pista {
	background-color: var(--pt-negro);
}

/* El foco se marca en la pista, no en la capa: un contorno a pantalla completa no orienta. */
.pt-lp-visor__capa:focus {
	outline: none;
}

.pt-lp-visor__capa:focus-visible .pt-lp-visor__pista {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* ══ 08 · ANCLAJE (tipos de instalación) ═════════════════════════════════════ */

/* Se queda BLANCA aunque desde el reorden le preceda «Proyectos entregados», que también lo era:
   el par se rompió cambiando la otra, no esta. La razón es que el tile de cada esquema es
   `--pt-gris` (#f4f4f4), así que sobre una banda #ededed el recuadro del diagrama desaparecería —
   y esos tiles son lo que da forma cuadrada a dibujos que no llenan su caja. */
.pt-lp-instalacion {
	padding-block: clamp(64px, 9vw, 120px);
	background-color: #ffffff;
}

.pt-lp-instalacion__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
	gap: clamp(26px, 3vw, 42px);
}

/*
 * Trampa 54 otra vez, ahora en la sección 08. `auto-fit` reparte 5 columnas en el contenedor de
 * 1170px, así que hasta cinco diagramas caben en una fila y no hay huérfanas — por eso no se
 * había visto: las 23 fichas anteriores tienen 5 modos de anclaje o menos. FlexiGlass es la
 * primera con SEIS (los seis trazados) y la sexta caía sola en una segunda fila, pegada a la
 * izquierda, que es exactamente lo que se lee como un error de maquetación.
 *
 * Se fija en 3 columnas SOLO a partir del sexto hijo: así 6 salen en 3+3 y ninguna de las fichas
 * ya publicadas cambia una sola línea de su maqueta.
 */
.pt-lp-instalacion__grid:has(> :nth-child(6)) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * El activo es un DIAGRAMA cuadrado sobre fondo blanco, no una fotografía: `contain` y no
 * `cover`, porque recortarlo se comería parte del esquema, que es justo lo que hay que ver.
 * El fondo gris le da un marco que un PNG sobre blanco no tendría.
 */
.pt-lp-modo__media {
	aspect-ratio: 1 / 1;
	margin-bottom: 20px;
	padding: 14px;
	background-color: var(--pt-gris);
}

.pt-lp-modo__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pt-lp-modo__titulo {
	margin: 0 0 10px;
	color: var(--pt-tinta);
	font-size: 1.06rem;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: none;
}

.pt-lp-modo__texto {
	margin: 0;
	color: var(--pt-texto);
	font-size: 0.94rem;
	line-height: 1.7;
}

/* ══ 05 · FICHA TÉCNICA Y DESCARGAS ══════════════════════════════════════════ */

.pt-lp-tecnica {
	padding-block: clamp(64px, 9vw, 120px);
	background-color: var(--pt-gris-medio);
}

.pt-lp-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 30px 44px;
	margin: 0;
}

.pt-lp-specs__fila {
	padding-top: 18px;
	border-top: 1px solid rgba(0, 0, 0, 0.16);
}

.pt-lp-specs__fila dt {
	margin: 0 0 9px;
	color: var(--pt-texto);
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pt-lp-specs__fila dd {
	margin: 0;
	color: var(--pt-tinta);
	font-size: 1.1rem;
	line-height: 1.45;
}

.pt-lp-docs {
	margin-top: clamp(44px, 5vw, 70px);
	padding-top: clamp(34px, 4vw, 48px);
	border-top: 3px solid var(--pt-borde-panel);
}

.pt-lp-docs__titulo {
	margin: 0 0 26px;
	color: var(--pt-tinta);
	font-size: 1.02rem;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pt-lp-docs__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-lp-doc a {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 20px 22px;
	background-color: #ffffff;
	color: var(--pt-tinta);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.pt-lp-doc a:hover,
.pt-lp-doc a:focus-visible {
	background-color: var(--pt-negro);
	color: #ffffff;
}

.pt-lp-doc__tipo {
	flex: 0 0 auto;
	padding: 5px 9px;
	background-color: var(--pt-tinta);
	color: #ffffff;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pt-lp-doc a:hover .pt-lp-doc__tipo {
	background-color: var(--pt-rojo);
}

.pt-lp-doc__nombre {
	font-size: 0.96rem;
	line-height: 1.4;
}

/* ── Plegado en móvil · `<details>` de la ficha técnica y de la documentación ──
 *
 * Por qué se pliega y por qué el HTML llega ABIERTO: en la cabecera de
 * `parasoles_linea_specs()`. Aquí solo el reparto: en escritorio el `<summary>` tiene que
 * pintarse exactamente como el `<div>` que sustituye —de ahí `display: block`, que además le
 * quita el triángulo nativo por dejar de ser `list-item`— y el chevrón, el cursor de mano y el
 * foco visible viven en el media query de 782px, porque fuera de él el control no existe.
 */
.pt-lp-plegable__summary {
	position: relative;
	display: block;
	list-style: none;
}

/* Safari pinta su triángulo con este pseudo-elemento, donde `list-style` no llega (misma
   pareja de reglas que `.pt-lp-faq__summary`). */
.pt-lp-plegable__summary::-webkit-details-marker {
	display: none;
}

/* El `<h3>` de la documentación conserva su margen dentro del `<summary>`; lo que sobra es el
   del `<summary>` en sí, que no tiene ninguno. */
.pt-lp-docs__summary {
	margin: 0;
}

/* ══ 05b · PREGUNTAS FRECUENTES ══════════════════════════════════════════════ */

/*
 * Blanca, entre Tecnología (#ededed) y «Sigue explorando» (#ededed) desde el reorden del
 * 2026-08-20 — el ritmo de bandas de la cabecera. Las dos vecinas quedan contrastadas y de paso
 * la banda blanca corta el bloque gris del final.
 */
.pt-lp-faq {
	padding-block: clamp(64px, 9vw, 120px);
	background-color: #ffffff;
}

/*
 * Ancho de LECTURA, no de contenedor. Las respuestas son prosa y a los 1170px del
 * `wgl-container` una línea pasa de 140 caracteres; el resto de prosa de la ficha ya está acotada
 * (`.pt-lp-entradilla` a 62ch, el relato por su rejilla). 70ch deja la pregunta y su respuesta en
 * el mismo bloque óptico, alineadas a la izquierda como el resto de la página.
 *
 * El tope va en la COLUMNA y no en la lista: con una sola columna hace de acotador de lectura, y
 * con dos lo hace ya la propia rejilla (ver abajo).
 */
.pt-lp-faq__columna {
	max-width: 70ch;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/*
 * DOS COLUMNAS. A 1170px de contenedor menos el hueco quedan ~557px por columna, que vuelve a
 * ser ~70ch: el mismo ancho de lectura de una sola columna, con la banda entera aprovechada y la
 * mitad de alto. `minmax(0, 1fr)` y no `1fr` porque una respuesta con una palabra larga —una URL
 * o «impermeabilización»— tiene un mínimo de contenido que ensancharía su pista y descuadraría
 * las dos.
 *
 * `align-items: start` es la regla que hace que abrir una respuesta no descoloque a la vecina:
 * sin ella las dos columnas se estirarían al alto de la más alta. El reparto de preguntas entre
 * columnas se hace en PHP, no con `columns: 2` — el porqué está en `parasoles_linea_faq()`.
 *
 * `max-width: none` explícito: 70ch en la tipografía del sitio son ~616px y la pista mide ~557,
 * así que hoy el tope no recorta nada, pero dejarlo activo haría que una pista más ancha —un
 * contenedor mayor, otra tipografía— dejara las dos columnas sin llenar su hueco y con el aire
 * en medio, que es el defecto que esta regla viene a arreglar.
 */
.pt-lp-faq__lista--dos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 3.4vw, 56px);
	align-items: start;
}

.pt-lp-faq__lista--dos .pt-lp-faq__columna {
	max-width: none;
}

.pt-lp-faq__item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/*
 * `list-style: none` MÁS el pseudo-elemento de WebKit: el triángulo por defecto de `<summary>` se
 * quita con `list-style` en los navegadores al día, pero Safari sigue pintándolo con
 * `::-webkit-details-marker` y ahí `list-style` no llega. Sin las dos reglas queda el triángulo
 * nativo a la izquierda y el chevrón propio a la derecha.
 */
.pt-lp-faq__summary {
	position: relative;
	padding: 22px 44px 22px 0;
	cursor: pointer;
	list-style: none;
}

.pt-lp-faq__summary::-webkit-details-marker {
	display: none;
}

/* El foco por teclado tiene que verse: el `summary` ES el control que abre la respuesta. */
.pt-lp-faq__summary:focus-visible {
	outline: 2px solid var(--pt-rojo);
	outline-offset: 3px;
}

.pt-lp-faq__pregunta {
	margin: 0;
	color: var(--pt-tinta);
	font-size: 1.08rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
}

/*
 * El chevrón, dos bordes de una caja vacía girados 45°. Se dibuja sobre el `summary` con
 * `::after` y no como un elemento aparte porque dentro del `summary` va un `<h3>`, y su modelo de
 * contenido admite el encabezado SOLO: un `<span>` hermano invalidaría el marcado.
 */
.pt-lp-faq__summary::after {
	position: absolute;
	top: 50%;
	right: 8px;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--pt-tinta);
	border-bottom: 1.5px solid var(--pt-tinta);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
	content: "";
}

.pt-lp-faq__item[open] .pt-lp-faq__summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.pt-lp-faq__respuesta {
	padding: 0 44px 26px 0;
}

/*
 * En dos columnas el hueco de la rejilla ya separa una columna de la otra, así que los 44px
 * reservados a la derecha del texto se quedan en 30 — lo justo para no pasar por debajo del
 * chevrón, que está a 8px del borde con 9px de lado.
 */
.pt-lp-faq__lista--dos .pt-lp-faq__summary,
.pt-lp-faq__lista--dos .pt-lp-faq__respuesta {
	padding-right: 30px;
}

.pt-lp-faq__respuesta p:last-child {
	margin-bottom: 0;
}

/* Quien haya pedido menos animación no ve girar el chevrón; el estado sigue siendo evidente. */
@media (prefers-reduced-motion: reduce) {
	.pt-lp-faq__summary::after,
	.pt-lp-plegable__summary::after {
		transition: none;
	}
}

/* ══ 07 · FOTOS DE PROYECTOS ENTREGADOS ══════════════════════════════════════ */

/* #ededed y no blanco: desde el reorden le sigue Anclaje, que tiene que quedarse en blanco por sus
   tiles de diagrama (ver ahí). Las fotos llenan su caja con `object-fit: cover`, así que no les
   afecta el fondo — es la banda del par que se podía cambiar sin coste. */
.pt-lp-galeria {
	padding-block: clamp(64px, 9vw, 120px);
	background-color: var(--pt-gris-medio);
}

.pt-lp-galeria__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}

.pt-lp-galeria__item {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--pt-gris);
}

.pt-lp-galeria__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.pt-lp-galeria__item:hover img {
	transform: scale(1.03);
}

/* ══ SIGUE EXPLORANDO ════════════════════════════════════════════════════════ */

/*
 * Enlaces laterales (las fichas hermanas) y ascendentes (la landing de la familia) más las obras
 * donde está instalado el modelo. Ver `parasoles_linea_relacionados()` para el porqué de la
 * sección, del tono de la banda y de por qué pasó a tener foto el 2026-08-20.
 *
 * CÓMO SE DIFERENCIA DE VERSIONES (03), que pinta la misma clase de relación con tarjetas de
 * foto. Es una decisión de peso visual, no de estilo: esto es el índice de salida de la ficha y
 * tiene que leerse como un pie, no como otra sección de contenido. De ahí que la tarjeta sea la
 * MITAD de ancha (~273px contra ~550), que no lleve subtítulo ni texto ni chips, que los títulos
 * de grupo vayan con el cuerpo de un antetítulo y que el `padding-block` de la banda sea el corto
 * (48-80px contra 64-120px). La foto está para reconocer un modelo de un vistazo; todo lo demás
 * se queda arriba.
 */
.pt-lp-relacionados {
	padding-block: clamp(48px, 6vw, 80px);
	background-color: var(--pt-gris-medio);
}

/*
 * Los dos grupos APILADOS, uno debajo del otro, y no en dos columnas como hasta el 2026-08-20.
 * En columnas cada grupo se quedaba con la mitad del ancho, y con tarjetas de foto eso significa
 * dos columnas de tarjetas por grupo: las 7 hermanas de PergoTek darían 4 filas de un pie de
 * página. Apilados, cada grupo dispone del ancho entero y las 7 caben en dos filas de 4.
 *
 * Y desaparece de paso el motivo por el que había `auto-fit`: el grupo de proyectos falta en 20
 * de las 26 fichas, así que en columnas el de modelos se quedaba a media anchura con las
 * pastillas rompiendo en tres filas. Apilado, que falte un grupo no descoloca al otro.
 */
.pt-lp-rel__inner {
	display: grid;
	gap: clamp(34px, 4vw, 52px);
}

/*
 * La cabecera del grupo: el rótulo a la izquierda, el enlace a la landing de la familia a la
 * derecha, y un filete debajo que ancla la rejilla de tarjetas. `align-items: baseline` alinea
 * las dos tipografías por su línea de base y no por su caja, que es lo que hace que un rótulo en
 * mayúsculas de 11px y un enlace de 0,9rem se lean como una sola línea.
 */
.pt-lp-rel__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: clamp(18px, 2vw, 26px);
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/*
 * Los títulos van con el tamaño del ANTETÍTULO (`.pt-lp-kicker`, 11px) y no con el de un
 * `.pt-lp-titulo` de sección, aunque sean `<h2>`. La jerarquía semántica es la correcta —un H2
 * después de los H2 de las secciones de contenido— pero la jerarquía VISUAL no debe serlo: dos
 * titulares de 2,9rem justo encima del cierre negro le robarían el foco al CTA, que es la
 * conversión de la página. El tamaño de un encabezado es una decisión de diseño; el nivel de la
 * etiqueta, de estructura. Aquí no coinciden a propósito.
 */
.pt-lp-rel__titulo {
	margin: 0;
	color: var(--pt-texto);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/*
 * El enlace ascendente. Subrayado propio con `border-bottom` y no `text-decoration`, para poder
 * separarlo del texto con `padding-bottom` y teñirlo aparte en el hover. La flecha va en
 * `::after` con un espacio duro delante: en `content` un espacio normal se conserva, pero así no
 * hay forma de que la flecha caiga sola en la línea siguiente.
 */
.pt-lp-rel__todo {
	padding-bottom: 2px;
	border-bottom: 1px solid var(--pt-linea);
	color: var(--pt-tinta);
	font-size: 0.9rem;
	font-weight: 300;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.pt-lp-rel__todo::after {
	content: "\00a0→";
}

.pt-lp-rel__todo:hover,
.pt-lp-rel__todo:focus-visible {
	border-color: var(--pt-rojo);
	color: var(--pt-rojo);
}

/*
 * `minmax(240px, 1fr)` da 4 columnas de ~273px a 1170, que es el reparto que buscábamos: 7
 * hermanas caen 4+3 y no 5+2 —que es lo que sale con 210px— ni 3+3+1, que dejaría una tarjeta
 * huérfana (trampa 54 y 96, el mismo problema que la rejilla de diagramas del anclaje).
 *
 * `auto-fill` y no `auto-fit`: con `auto-fit` las pistas vacías se colapsan y las 2 tarjetas del
 * grupo de proyectos se estirarían a media banda cada una, o sea al doble del tamaño de las
 * tarjetas de modelos que tienen justo encima. Con `auto-fill` las 4 pistas se mantienen y las 2
 * obras se leen como parte de la misma rejilla.
 */
.pt-lp-rel__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: clamp(20px, 2.2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-lp-rel__lista li {
	margin: 0;
}

/*
 * EXACTAMENTE 5 tarjetas: 3 columnas, para que la última fila no se quede con una sola. Es la
 * trampa 54 —y la 96— aplicada a esta rejilla: con 4 columnas, 5 quedan 4+1 y la huérfana de la
 * segunda fila deja tres huecos a su derecha.
 *
 * Y solo 5, no 5 y 6. Se contaron las cinco familias: Tensoestructuras es la única con 5
 * hermanas y además ninguna de sus 6 fichas tiene proyectos (`menciona` no tiene ningún slug de
 * membrana), así que ahí la rejilla de 3 columnas está sola en la banda. Pérgolas y Toldos tienen
 * 6, y sus fichas SÍ tienen obras: pasarlas a 3 columnas —el reparto 3+3, que llena mejor— dejaría
 * las tarjetas de modelo a ~373px justo encima de las de proyecto a ~273px, dos tamaños de tarjeta
 * en la misma banda. 4+2 con todas iguales se lee mejor que 3+3 con dos escalas.
 */
.pt-lp-rel__lista:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pt-lp-rel__tarjeta {
	display: block;
	color: var(--pt-tinta);
	text-decoration: none;
}

.pt-lp-rel__tarjeta:focus-visible {
	outline: 2px solid var(--pt-rojo);
	outline-offset: 4px;
}

/*
 * 3:2 como la galería de proyectos (07) y no 4:3 como los bloques de material: las fotos que
 * alimentan esto son heros y fotos de obra, que son horizontales, y la proporción de la galería
 * es la que ya está probada contra ellas.
 *
 * Fondo blanco y no gris: sobre la banda #ededed el hueco de la foto se lee como un panel, así
 * que una tarjeta a la que le falte la imagen —hoy ninguna, ver la cascada de
 * `parasoles_linea_imagen_de()`— sigue teniendo su caja y su nombre alineado con los vecinos, en
 * vez de flotar arriba y parecer un error de maquetación.
 */
.pt-lp-rel__foto {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background-color: #ffffff;
}

.pt-lp-rel__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.pt-lp-rel__tarjeta:hover .pt-lp-rel__foto img,
.pt-lp-rel__tarjeta:focus-visible .pt-lp-rel__foto img {
	transform: scale(1.04);
}

.pt-lp-rel__nombre {
	display: block;
	margin-top: 12px;
	font-size: 0.98rem;
	font-weight: 400;
	line-height: 1.35;
	transition: color 0.2s ease;
}

.pt-lp-rel__tarjeta:hover .pt-lp-rel__nombre,
.pt-lp-rel__tarjeta:focus-visible .pt-lp-rel__nombre {
	color: var(--pt-rojo);
}

/* Ciudad y año de una obra. Solo lo llevan las tarjetas de proyecto: un modelo no tiene sitio ni
   fecha, y rellenar el hueco con cualquier otro dato solo por simetría sería ruido. */
.pt-lp-rel__meta {
	display: block;
	margin-top: 3px;
	color: var(--pt-texto);
	font-size: 0.84rem;
	font-weight: 300;
	line-height: 1.3;
}

/* Quien haya pedido menos animación no ve el zoom de la foto ni el tinte del nombre al vuelo. */
@media (prefers-reduced-motion: reduce) {
	.pt-lp-rel__foto img,
	.pt-lp-rel__nombre {
		transition: none;
	}

	.pt-lp-rel__tarjeta:hover .pt-lp-rel__foto img,
	.pt-lp-rel__tarjeta:focus-visible .pt-lp-rel__foto img {
		transform: none;
	}
}

/* ══ 11 · CIERRE ═════════════════════════════════════════════════════════════ */

.pt-lp-cta {
	padding-block: clamp(58px, 7vw, 96px);
	background-color: var(--pt-negro);
}

.pt-lp-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 38px;
}

.pt-lp-cta__texto {
	flex: 1 1 440px;
}

.pt-lp-cta h2 {
	margin: 0 0 14px;
	color: #ffffff;
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	line-height: 1.18;
	letter-spacing: -0.01em;
	text-transform: none;
}

.pt-lp-cta p {
	max-width: 60ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
}

.pt-lp-cta__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ══ Prosa libre (opcional, `post_content`) ══════════════════════════════════ */

.pt-lp-libre {
	padding-block: clamp(56px, 7vw, 96px);
	background-color: #ffffff;
}

.pt-lp-libre .pt-lp-prosa {
	max-width: 780px;
}

/* ══ Responsive ══════════════════════════════════════════════════════════════ */

/*
 * Los cortes son 1024 / 900 / 782 / 560 y no solo los extremos: con `calc()` y rejillas de
 * columnas fijas, el ancho que falla suele estar en medio (trampa 27 — a 900px la rejilla de
 * familias se partía en una sola tarjeta por fila y a 1440 y 390 se veía perfecta).
 */

@media (max-width: 1024px) {
	.pt-lp-relato__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* La foto primero: en una sola columna, abrir con el texto deja el bloque sin ancla visual. */
	.pt-lp-relato__figura {
		order: -1;
	}

	.pt-lp-rejilla > .pt-lp-ficha {
		flex-basis: calc(50% - 15px);
	}

	/*
	 * El CTA se apila antes que el resto (1024 y no 782) porque su columna derecha lleva un
	 * formulario con dos filas de dos campos: por debajo de ~1024 esas parejas bajan de 200 px por
	 * campo y las etiquetas en mayúsculas («CORREO ELECTRÓNICO», «TIPO DE ESPACIO») empiezan a
	 * partirse en tres líneas. Apilar es preferible a estrechar.
	 */
	.pt-lp-cotiza__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.pt-lp-cotiza p {
		max-width: 60ch;
	}
}

@media (max-width: 900px) {
	.pt-lp-hero__titulo {
		max-width: none;
	}

	.pt-lp-titulo {
		max-width: none;
	}

	/*
	 * Las preguntas vuelven a una columna. El corte es 900 y no 782 porque el reparto se decide
	 * por el ancho de la COLUMNA, no del móvil: a 900px de ventana el contenedor mide ~870 y cada
	 * columna se queda en ~407px, o sea ~51 caracteres por línea. Por debajo de ~55 la prosa
	 * empieza a partir demasiadas veces las respuestas, que llevan cifras y unidades («6 m de
	 * ancho», «30 %») que no deben quedar a caballo entre dos líneas.
	 */
	.pt-lp-faq__lista--dos {
		grid-template-columns: minmax(0, 1fr);
	}

	.pt-lp-faq__lista--dos .pt-lp-faq__columna {
		max-width: 70ch;
	}

	/*
	 * Apiladas, la segunda columna pierde su filete superior: el borde inferior de la última
	 * pregunta de la primera ya hace de corte y los dos juntos darían una línea doble.
	 */
	.pt-lp-faq__lista--dos .pt-lp-faq__columna + .pt-lp-faq__columna {
		border-top: 0;
	}

	.pt-lp-faq__lista--dos .pt-lp-faq__summary,
	.pt-lp-faq__lista--dos .pt-lp-faq__respuesta {
		padding-right: 44px;
	}
}

@media (max-width: 782px) {
	/*
	 * En móvil el hero es corto y el bloque de texto ocupa casi todo su alto, así que el
	 * antetítulo queda al ~66 % desde abajo — donde el degradado, ya aclarado, apenas llega:
	 * medido, 3,50:1. Se corrige por las dos vías que funcionaron en escritorio (trampa 56):
	 * más alto, que empuja el contenido hacia la zona protegida, y un degradado propio algo
	 * más denso en su tramo medio. Más alto es además MÁS foto visible, que es justo lo que
	 * se pedía.
	 */
	.pt-lp-hero {
		min-height: clamp(500px, 76vh, 660px);
	}

	.pt-lp-hero__velo {
		background:
			linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0.74) 0%,
				rgba(0, 0, 0, 0.5) 45%,
				rgba(0, 0, 0, 0.14) 82%,
				rgba(0, 0, 0, 0) 100%
			)
			no-repeat top / 100% 180px,
			linear-gradient(
				to top,
				rgba(0, 0, 0, 0.9) 0%,
				rgba(0, 0, 0, 0.8) 28%,
				rgba(0, 0, 0, 0.62) 52%,
				rgba(0, 0, 0, 0.36) 74%,
				rgba(0, 0, 0, 0.1) 100%
			);
	}

	.pt-lp-hero__inner {
		padding-block: 130px 40px;
	}

	.pt-lp-hero__acciones {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.pt-lp-rejilla > .pt-lp-ficha {
		flex-basis: 100%;
	}

	.pt-lp-specs {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	/*
	 * A una columna la tabla se alarga sin freno —12 características son 12 filas— así que a
	 * partir de aquí el encabezado de la sección se convierte en el control que la abre. El
	 * chevrón es el mismo de la FAQ: dos bordes de una caja vacía girados 45°.
	 */
	.pt-lp-plegable__summary {
		padding-right: 44px;
		cursor: pointer;
	}

	.pt-lp-plegable__summary::after {
		position: absolute;
		top: 50%;
		right: 6px;
		width: 9px;
		height: 9px;
		border-right: 1.5px solid var(--pt-tinta);
		border-bottom: 1.5px solid var(--pt-tinta);
		transform: translateY(-70%) rotate(45deg);
		transition: transform 0.2s ease;
		content: "";
	}

	.pt-lp-plegable[open] > .pt-lp-plegable__summary::after {
		transform: translateY(-30%) rotate(-135deg);
	}

	/* El `summary` ES el control: su foco por teclado tiene que verse. */
	.pt-lp-plegable__summary:focus-visible {
		outline: 2px solid var(--pt-rojo);
		outline-offset: 3px;
	}

	/*
	 * Cerrado, los márgenes inferiores del encabezado (hasta 64px) y del `<h3>` de la
	 * documentación (26px) quedarían separando el rótulo de NADA: dos huecos muertos seguidos
	 * dentro de una banda que ya trae su propio padding.
	 */
	.pt-lp-plegable:not([open]) > .pt-lp-plegable__summary {
		margin-bottom: 0;
	}

	.pt-lp-plegable:not([open]) > .pt-lp-plegable__summary .pt-lp-docs__titulo {
		margin-bottom: 0;
	}

	.pt-lp-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.pt-lp-cta__acciones {
		width: 100%;
		flex-direction: column;
	}

	/* El WhatsApp del CTA a ancho completo, como el resto de botones en móvil. */
	.pt-lp-cotiza__texto .pt-lp-boton {
		width: 100%;
	}
}

@media (max-width: 560px) {
	/*
	 * Las dos filas de dos campos se parten. A 390 px cada campo se queda en ~165 px y el
	 * `placeholder` («+57 300 000 0000», «6 m de ancho × 4 m de proyección») se corta a la mitad,
	 * que es justo lo que enseña al usuario qué escribir.
	 */
	.pt-lp-cotiza__form .pt-form__fila {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/*
	 * Dos columnas de diagramas a 390px dejan cada esquema en ~150px y el dibujo deja de
	 * leerse. `auto-fit` con `minmax(196px, …)` ya cae a 1 columna por debajo de ~420px de
	 * contenido; esto lo fuerza también en el tramo intermedio.
	 */
	.pt-lp-instalacion__grid,
	.pt-lp-instalacion__grid:has(> :nth-child(6)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}

	.pt-lp-galeria__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Las tarjetas de la salida se quedan en DOS por fila, no en una. `minmax(240px, 1fr)` ya
	 * cae a una sola columna por debajo de ~510px de contenido, y una columna de 7 tarjetas con
	 * foto convierte el pie de la ficha en una segunda galería de pantalla y media. A 390px cada
	 * tarjeta mide ~157px: la foto sigue reconociéndose —es para eso— y el nombre cabe en dos
	 * líneas.
	 */
	.pt-lp-rel__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.pt-lp-rel__nombre {
		font-size: 0.92rem;
	}
}