/*
Theme Name: Cicatrices en nombre de la fe
Author: Andrés Patiño
Author URI: https://github.com/andresfpatino
Description: Theme de bloques para la promoción del libro «Cicatrices en nombre de la fe».
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.4.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cicatricesennombredelafe
Tags: blog, one-column, block-patterns, full-site-editing
*/

/* El estilo vive en theme.json. Aquí solo lo que theme.json no puede expresar. */

:where(:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Los enlaces del menú son anclas a secciones de la misma página: el salto
   instantáneo deja sin saber si se ha cambiado de página o de sección. El
   bloque de arriba ya lo anula cuando el sistema pide menos movimiento, que es
   obligatorio: para quien tiene vértigo o mareo cinético, un desplazamiento
   largo y automático es justo el gesto que lo provoca.

   El scroll-margin es el otro lado del mismo arreglo: la cabecera en la
   portada se queda fija al bajar, así que sin margen el título de la sección
   aterrizaría justo debajo de ella. */
html {
	scroll-behavior: smooth;
}

/* El desfase por la cabecera fija no se pone aquí: ya existe más abajo, como
   scroll-padding-top del html. Poner además un scroll-margin en cada ancla
   sumaría los dos y el título aterrizaría muy por debajo de la cabecera. */

/* Rotor de testimonios.
   La pista es un contenedor con scroll-snap y la barra oculta: sin JavaScript
   sigue siendo desplazable con teclado y gesto táctil, y todos los testimonios
   quedan en el árbol de accesibilidad. Las flechas, los puntos y el avance
   automático los crea assets/js/rotor.js, porque sin script no harían nada. */

/* Selector con dos clases a propósito: WordPress declara
   .is-layout-flex { align-items: center } con la misma especificidad que
   .cicatrices-rotor, así que ganar por orden de documento dependería del orden
   de encolado y las alturas se romperían en silencio si cambiara. */
.wp-block-group.cicatrices-rotor {
	align-items: stretch;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.cicatrices-rotor::-webkit-scrollbar {
	display: none;
}

.cicatrices-rotor > * {
	flex: 0 0 31%;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.cicatrices-rotor > * {
		flex-basis: 47%;
	}
}

@media (max-width: 640px) {
	.cicatrices-rotor > * {
		flex-basis: 100%;
	}
}

/* Todas las tarjetas a la misma altura, con la autoría pegada abajo para que
   las firmas queden alineadas aunque los testimonios midan distinto. */
.cicatrices-rotor > .cicatrices-testimonio {
	height: 100%;
}

.cicatrices-rotor > .cicatrices-testimonio .cicatrices-testimonio__autoria {
	margin-top: auto;
}

.cicatrices-rotor__controles {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	justify-content: center;
	margin-top: var(--wp--preset--spacing--30);
}

.cicatrices-rotor__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 2px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
	cursor: pointer;
}

.cicatrices-rotor__boton:hover,
.cicatrices-rotor__boton:focus-visible {
	background: var(--wp--preset--color--accent-soft);
}

.cicatrices-rotor__puntos {
	display: flex;
	gap: 0.5rem;
}

.cicatrices-rotor__punto {
	width: 0.6rem;
	height: 0.6rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.cicatrices-rotor__punto[aria-current="true"] {
	background: var(--wp--preset--color--accent);
}

/* Fachada de vídeo.
   Nada de iframes hasta que alguien pulse: la caja es la miniatura del vídeo
   con un botón encima, y assets/js/video.js abre el iframe contra
   youtube-nocookie.com en una ventana modal al hacer clic. Sin JavaScript
   queda el enlace del noscript.

   El degradado del fondo no es decoración de relleno: es lo que se ve cuando
   la miniatura no carga -un identificador que todavía no existe devuelve 404-,
   y por eso está en la paleta y no en gris. */

.cicatrices-video {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 2px;
	background-color: var(--wp--preset--color--contrast);
	background-image: linear-gradient(145deg, #3c2b21 0%, #241a14 52%, #4d3729 100%);
}

.cicatrices-video__miniatura {
	position: absolute;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	inset: 0;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cicatrices-video:hover .cicatrices-video__miniatura {
	transform: scale(1.045);
}

/* Velo sobre la miniatura: el círculo crema del botón tiene que leerse encima
   de cualquier fotograma, y las miniaturas de YouTube son impredecibles. */
.cicatrices-video::after {
	position: absolute;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(36, 26, 20, 0.2) 0%,
		rgba(36, 26, 20, 0.34) 55%,
		rgba(36, 26, 20, 0.55) 100%
	);
	content: "";
	inset: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.cicatrices-video:hover::after {
	opacity: 0.75;
}

/* Sin miniatura el velo estorba: debajo solo hay el degradado de la paleta. */
.cicatrices-video--sin-miniatura::after {
	display: none;
}

/* Y en su lugar entra la ramita, para que la caja vacía parezca compuesta. */
.cicatrices-video--sin-miniatura::before {
	position: absolute;
	z-index: 0;
	width: 60%;
	max-width: 12rem;
	aspect-ratio: 3 / 2;
	background: url( assets/images/rama-ornamento.webp ) center / contain no-repeat;
	content: "";
	inset: auto -1rem -1rem auto;
	mix-blend-mode: screen;
	opacity: 0.14;
	pointer-events: none;
}

.cicatrices-video__play {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1;
	cursor: pointer;
}

.cicatrices-video__play:hover,
.cicatrices-video__play:focus-visible {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}

.cicatrices-video__enlace {
	padding: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--sm);
}

/* Rejilla de entrevistas: una destacada a la izquierda y dos apiladas a la
   derecha, con la misma altura total.

   Tres cajas 16:9 no pueden cuadrar por aritmética: dos apiladas miden más que
   una sola, y el hueco entre ellas lo descuadra todavía más. Así que la
   destacada ocupa las dos filas de la rejilla y deja de ser 16:9: su altura
   queda definida por las dos de la derecha más el hueco, sin números mágicos y
   sin depender del tamaño del hueco. */

.cicatrices-videos {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--wp--preset--spacing--30);
}

/* El layout de flujo de WordPress añade márgenes verticales a los hijos, que
   sumarían al hueco de la rejilla. Usa :where(), sin especificidad, así que
   esto lo anula sin pelear. */
.cicatrices-videos > * {
	min-width: 0;
	margin: 0;
}

.cicatrices-videos > *:first-child {
	grid-row: span 2;
}

.cicatrices-videos > *:first-child .cicatrices-video,
.cicatrices-videos > *:first-child.cicatrices-video {
	aspect-ratio: auto;
	height: 100%;
}

@media (max-width: 782px) {
	.cicatrices-videos {
		grid-template-columns: 1fr;
	}

	.cicatrices-videos > *:first-child {
		grid-row: auto;
	}

	.cicatrices-videos > *:first-child .cicatrices-video,
	.cicatrices-videos > *:first-child.cicatrices-video {
		aspect-ratio: 16 / 9;
		height: auto;
	}
}


/* ==========================================================================
   Sistema de la maqueta

   La página es una sucesión de bandas. Cada banda es una rejilla de dos o
   tres celdas, y cada celda es o un panel con contenido o una fotografía.
   El hueco de 6px entre celdas deja ver el crema del fondo: es la línea fina
   que separa los bloques en el diseño.

   Solo el hero y el pie sangran a ancho completo -van con `align: full`-, y
   sangra su fondo: su contenido va en el mismo contenedor que el resto. Las
   bandas son grupos sin alineación, así que el layout `constrained` de
   WordPress ya las limita a `contentSize` y las centra; el CSS de aquí solo
   las convierte en rejilla.

   Estas variables son de CSS y no de theme.json a propósito: son medidas de
   maquetación, no decisiones que el cliente deba poder tocar desde el editor.
   ========================================================================== */

:root {
	--cicatrices-gutter: clamp(1.25rem, 4vw, 3rem);
	--cicatrices-pad-panel: clamp(1.75rem, 3.2vw, 3.25rem);
	--cicatrices-hueco: 6px;

	/* Texto de párrafo, más suave que los títulos. Fuera de la paleta para no
	   darle al cliente un séptimo color que elegir por error. 8.77:1 sobre el
	   crema. */
	--cicatrices-texto: #4b382c;
}

/* ---------- contenedor y bandas ---------- */

.cicatrices-contenedor {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--cicatrices-gutter);
}

.cicatrices-banda {
	display: grid;
	gap: var(--cicatrices-hueco);
	background: var(--wp--preset--color--base);
}

.cicatrices-banda > * {
	min-width: 0;
	margin: 0;
}

.cicatrices-banda + .cicatrices-banda {
	margin-top: var(--cicatrices-hueco);
}

/* ---------- paneles ---------- */

.cicatrices-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: var(--cicatrices-pad-panel);
	background: var(--wp--preset--color--base);
}

.cicatrices-panel > * {
	margin-block: 0;
}

.cicatrices-panel > * + * {
	margin-top: 1.1rem;
}

/* El número y su rótulo son dos párrafos y no uno con <span>: RichText
   descartaría la clase del span la primera vez que se editara el texto. */
.cicatrices-panel .cicatrices-numero + .cicatrices-rotulo {
	margin-top: 0;
}

.cicatrices-panel h2 {
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 400;
	line-height: 1.25;
}

.cicatrices-panel p {
	color: var(--cicatrices-texto);
	line-height: 1.7;
}

/* La medida de lectura, con una salida.

   Es para el texto corrido. El rótulo y el número son párrafos también
   -tienen que serlo: RichText descartaría la clase de un <span> la primera vez
   que alguien editara el texto- y con 34ch se partían en dos líneas: a
   0.75rem son unos 187px, y «¿QUÉ ENCONTRARÁS EN EL LIBRO?» en mayúsculas con
   0.2em de letra espaciada pide bastante más.

   La medida se lee de una variable en vez de fijarse aquí, y eso es lo que
   permite que cualquier contexto la cambie sin pelear por especificidad. Ese
   fue el problema de los dos intentos anteriores: una regla aparte que
   devolviera `max-width: none` tenía una clase contra la clase y el elemento
   de esta, perdía, y nada avisaba. Una declaración de variable en el propio
   elemento gana siempre sobre la heredada, sea cual sea su especificidad, así
   que basta con declararla donde la medida no aplica. */
.cicatrices-panel p {
	max-width: var(--cicatrices-medida, 34ch);
}

.cicatrices-numero,
.cicatrices-rotulo {
	--cicatrices-medida: none;
}

.cicatrices-panel--surface {
	background: var(--wp--preset--color--surface);
}

.cicatrices-panel--tierra {
	background: var(--wp--preset--color--earth);
	color: var(--wp--preset--color--base);
}

.cicatrices-panel--tierra p {
	color: var(--wp--preset--color--base);
}

/* Panel con fotografía de fondo.

   El velo no baja de .86 en la columna donde vive el texto. Medido: con un
   velo de .60, el crema sobre el peor píxel de la fotografía da 3.5:1 y no
   pasa AA; a .86 da 8.79:1. Solo se aclara en el tramo derecho, que no lleva
   texto. */
.cicatrices-panel--foto {
	position: relative;
	overflow: hidden;
	min-height: clamp(17rem, 24vw, 21rem);
	color: var(--wp--preset--color--base);
}

.cicatrices-panel--foto::before {
	position: absolute;
	background-position: bottom;
	background-size: cover;
	background-repeat: no-repeat;
	content: "";
	inset: -12% 0;
	transform: translate3d(0, var(--cicatrices-paralaje, 0), 0);
}

.cicatrices-panel--foto::after {
	position: absolute;
	background: linear-gradient(
		95deg,
		rgba(36, 26, 20, 0.92) 0%,
		rgba(36, 26, 20, 0.86) 58%,
		rgba(36, 26, 20, 0.48) 100%
	);
	content: "";
	inset: 0;
}

.cicatrices-panel--foto > * {
	position: relative;
	z-index: 2;
}

.cicatrices-panel--foto p {
	color: var(--wp--preset--color--base);
}

/* Celda que es solo fotografía. El color de reserva evita que un archivo que
   falte se vea como un hueco roto: hoy falta el retrato de Lina. */
.cicatrices-foto {
	min-height: clamp(16rem, 22vw, 26rem);
	background-color: var(--wp--preset--color--earth);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.cicatrices-foto,
.cicatrices-foto figure {
	margin: 0;
	overflow: hidden;
}

.cicatrices-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- rótulos y citas ---------- */

.cicatrices-numero {
	color: var(--wp--preset--color--earth);
	font-size: 0.8125rem;
	letter-spacing: 0.22em;
}

.cicatrices-rotulo {
	color: var(--wp--preset--color--earth);
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Sobre oscuro la terracota no llega a 4.5:1 contra el velo: pasa a arena. */
.cicatrices-oscuro .cicatrices-numero,
.cicatrices-oscuro .cicatrices-rotulo {
	color: var(--wp--preset--color--accent-soft);
}

.cicatrices-cita {
	font-size: var(--wp--preset--font-size--lg);
	font-style: italic;
	line-height: 1.6;
}

.cicatrices-firma {
	color: var(--wp--preset--color--earth);
	font-size: var(--wp--preset--font-size--sm);
	font-style: normal;
	letter-spacing: 0.08em;
}

.cicatrices-oscuro .cicatrices-firma {
	color: var(--wp--preset--color--accent-soft);
}

/* ---------- botones ---------- */

/* Sobre oscuro el relleno no puede desaparecer al pasar el ratón: el hover de
   theme.json lo dejaría transparente y el botón se perdería en el fondo. */
.cicatrices-oscuro .wp-element-button:hover,
.cicatrices-oscuro .wp-element-button:focus {
	border-color: var(--wp--preset--color--accent-soft);
	background-color: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}

/* El botón de contorno, sobre oscuro, se dibuja en crema. */
.cicatrices-oscuro .is-style-outline > .wp-element-button {
	border-color: var(--wp--preset--color--base);
	background-color: transparent;
	color: var(--wp--preset--color--base);
}

.cicatrices-oscuro .is-style-outline > .wp-element-button:hover,
.cicatrices-oscuro .is-style-outline > .wp-element-button:focus {
	border-color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ---------- adornos de rama ----------
   El adorno es la fotografía de la rama sobre fondo blanco que trae la
   maqueta. `multiply` hace que el blanco desaparezca sobre el crema y solo
   queden las hojas, sin necesidad de recortar el fondo. Va en ::before y
   ::after de la propia banda para no añadir marcado vacío que el editor
   tendría que arrastrar. */

.cicatrices-b-libro,
.cicatrices-b-cierre {
	position: relative;
	overflow: hidden;
}

.cicatrices-b-libro::before,
.cicatrices-b-libro::after,
.cicatrices-b-cierre::after {
	position: absolute;
	z-index: 3;
	width: clamp(8rem, 14vw, 13rem);
	aspect-ratio: 3 / 2;
	background: url( assets/images/rama-ornamento.webp ) center / contain no-repeat;
	content: "";
	mix-blend-mode: multiply;
	opacity: 0.5;
	pointer-events: none;
}

/* Esta ramita está en la esquina de la celda que lleva el texto, así que se
   mete casi toda fuera del lienzo: la banda recorta con overflow, y lo que
   queda dentro es una floritura del tamaño justo para no llegar al «01».

   No se puede resolver poniéndola por debajo del texto: el panel tiene fondo
   crema opaco, así que una capa por detrás no se vería. De ahí el multiply por
   encima, y de ahí que la única salida sea quitarla de en medio. */
.cicatrices-b-libro::before {
	top: -3rem;
	left: -2.75rem;
	width: clamp(5.5rem, 8vw, 8rem);
	opacity: 0.42;
	transform: scaleY(-1);
}

.cicatrices-b-libro::after {
	right: -1.5rem;
	bottom: 0;
	transform: scaleX(-1);
}

/* Misma historia que la de la banda 01: esta ramita cae sobre la esquina del
   panel 09, que empieza con su rótulo y su titular. Se mete casi toda fuera
   del lienzo para que no llegue al texto. */
.cicatrices-b-cierre::after {
	top: -2.5rem;
	right: -2.75rem;
	width: clamp(5.5rem, 8vw, 8.5rem);
	opacity: 0.42;
	transform: scale(-1, -1);
}

/* ---------- 01 · el libro ---------- */

.cicatrices-b-libro {
	grid-template-columns: 1.05fr 1fr 0.95fr;
}

/* La celda central: la cubierta apoyada sobre la tela con la rama de olivo.

   En el mockup ahí hay una fotografía del libro impreso sobre tela. La tela y
   la rama son reales; el libro no existe como fotografía, así que es la
   cubierta plana puesta encima. Todo el trabajo de este bloque es que ese
   montaje no se lea como un recorte pegado, y son tres cosas concretas:

   1. El giro es de grado y medio, no de tres. Cuanto más gira un rectángulo
      plano, más se nota que no tiene grosor.
   2. La sombra es de contacto: una corta y oscura pegada al canto, y otra
      ancha y suave por debajo. Una única sombra grande y difusa es lo que hace
      que un objeto parezca flotar en vez de apoyarse.
   3. La viñeta apaga los brillos de la tela alrededor de la cubierta. La
      fotografía tiene un foco muy claro arriba a la derecha, y contra él la
      cubierta -que es oscura- se veía recortada con tijera. */
.cicatrices-libro-tela {
	position: relative;
	display: grid;
	padding: clamp(1.5rem, 3vw, 3rem);
	background-image: url( assets/images/tela-rama.webp );
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	place-items: center;
}

.cicatrices-libro-tela::after {
	position: absolute;
	background: radial-gradient(
		58% 52% at 50% 54%,
		rgba(36, 26, 20, 0.34) 0%,
		rgba(36, 26, 20, 0.14) 56%,
		rgba(36, 26, 20, 0) 84%
	);
	content: "";
	inset: 0;
	pointer-events: none;
}

.cicatrices-libro-tela figure {
	display: none;
}

.cicatrices-libro-tela img {
	width: min(78%, 18rem);
	height: auto;
	box-shadow:
		0 0.3rem 0.6rem rgba(36, 26, 20, 0.34),
		0 1.4rem 2.6rem rgba(36, 26, 20, 0.24);
	transform: rotate(-1.5deg);
}

/* ---------- 02 · sobre Lina ---------- */

/* El retrato ocupa un tercio y el texto los otros dos: con las dos columnas
   casi iguales, el panel marrón se hacía alto por su propio contenido y el
   retrato se quedaba nadando dentro de una caja gris mucho más grande que él.
   Ahora la celda del retrato es estrecha y alta -la proporción de un retrato- y
   la fotografía la llena de borde a borde, como todas las demás fotografías de
   la página. */
.cicatrices-b-lina {
	grid-template-columns: 0.82fr 1.62fr;
}

.cicatrices-lina {
	display: grid;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.6rem);
	grid-template-columns: 1.25fr 0.95fr;
	width: 100%;
}

/* Los hijos son celdas de rejilla: el margen entre hijos del panel les
   añadiría un desplazamiento que la rejilla ya resuelve. */
.cicatrices-lina > * + * {
	margin-top: 0;
}

.cicatrices-lina > * {
	min-width: 0;
	margin: 0;
}

.cicatrices-lina > * > * {
	margin-block: 0;
}

.cicatrices-lina > * > * + * {
	margin-top: 1.1rem;
}

.cicatrices-lina .cicatrices-numero + .cicatrices-rotulo {
	margin-top: 0;
}

.cicatrices-lina h2 {
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 400;
	line-height: 1.25;
}

.cicatrices-datos {
	display: flex;
	flex-direction: column;
	gap: 1.9rem;
	padding-left: clamp(1.75rem, 2.4vw, 2.75rem);
	border-left: 1px solid rgba(236, 228, 217, 0.25);
}

/* El icono y su línea de texto se alinean por la caja, no a ojo: la celda del
   icono mide lo mismo que la altura de la primera línea (1rem de cuerpo por
   1.6 de interlínea), y el icono se centra dentro de ella. Antes el icono
   llevaba un margen superior de 0.2rem calculado a ojo, y con cuatro iconos de
   alturas visuales distintas -el marco es cuadrado, la persona es alta y
   estrecha- cada fila arrancaba a una altura un poco distinta. */
.cicatrices-dato {
	display: grid;
	align-items: start;
	gap: 1.15rem;
	grid-template-columns: 2rem 1fr;
}

.cicatrices-dato > * {
	margin: 0;
}

/* La figura mide exactamente el alto de la primera línea del texto (1rem de
   cuerpo por 1.6 de interlínea) y el icono se centra dentro. Así las cuatro
   filas comparten eje con su primera línea, sin depender de cuánto ocupe el
   dibujo dentro de su lienzo: los cuatro iconos son de 24x24, pero la tinta de
   cada uno llena una parte distinta -el marco llega a los bordes, el libro se
   queda en 16 de 24- y con un margen fijo cada fila arrancaba a una altura
   ligeramente distinta. */
.cicatrices-dato figure {
	display: grid;
	height: 1.8rem;
	place-items: center;
}

.cicatrices-dato img {
	width: 2rem;
	height: 2rem;
	object-fit: contain;
}

.cicatrices-dato p {
	max-width: none;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
}

/* ---------- 03 · tres caminos ---------- */

.cicatrices-b-caminos {
	grid-template-columns: 1.62fr 1fr;
}

.cicatrices-caminos {
	display: grid;
	gap: clamp(1.5rem, 2.6vw, 2.2rem);
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
}

.cicatrices-caminos > * {
	margin: 0;
}

.cicatrices-caminos figure {
	margin: 0 0 1rem;
}

.cicatrices-caminos img {
	width: 2rem;
	height: auto;
}

.cicatrices-caminos h3 {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--earth);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.cicatrices-caminos p {
	max-width: none;
	margin: 0;
	color: var(--cicatrices-texto);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.65;
}

/* La cita vive a la derecha de la fotografía, así que el velo se oscurece
   hacia ese lado y no al contrario. */
.cicatrices-b-caminos__cita {
	align-items: flex-end;
}

.cicatrices-b-caminos__cita::before {
	background-image: url( assets/images/hojas.webp );
}

.cicatrices-b-caminos__cita::after {
	background: linear-gradient(90deg, rgb(54 38 29) 0%, rgba(36, 26, 20, 0.45) 65%);
}

.cicatrices-b-caminos__cita .cicatrices-cita {
	max-width: 24rem;
}

/* ---------- 04 / 05 ---------- */

.cicatrices-b-doble {
	grid-template-columns: 1fr 1fr;
}

.cicatrices-panel--paisaje::before { background-image: url( assets/images/paisaje-atardecer.webp ); }
.cicatrices-panel--ramas::before   { background-image: url( assets/images/ramas.webp ); }

/* ---------- 06 · opiniones · 07 · entrevistas ---------- */

.cicatrices-b-plena {
	grid-template-columns: 1fr;
}

/* En una banda a ancho completo la entradilla no compite con nada a los lados,
   así que 34ch la parten sin motivo. Se le da el largo de línea que sí es
   legible -hasta unos 80 caracteres- y se deja que parta sola en pantallas
   estrechas, donde partir es lo correcto. */
.cicatrices-b-plena > .cicatrices-panel > p {
	max-width: var(--cicatrices-medida, 80ch);
}

.cicatrices-panel .cicatrices-rotor,
.cicatrices-panel .cicatrices-videos {
	width: 100%;
	margin-top: 1.6rem;
}

.cicatrices-rotor > .cicatrices-testimonio {
	padding: clamp(1.5rem, 2.4vw, 2rem);
	background: var(--wp--preset--color--base);
}

.cicatrices-testimonio__texto {
	color: var(--cicatrices-texto);
	font-style: italic;
}

/* ---------- 08 / 09 ---------- */

.cicatrices-b-cierre {
	grid-template-columns: 1fr 0.78fr 1fr;
}

/* La celda del medio no lleva una fotografía sino un recorte: el olivo sobre
   fondo transparente, que es lo que el cliente quería ahí. Eso cambia todas
   las reglas respecto a las demás celdas de imagen de la página.

   `contain` y no `cover`: un recorte tiene el motivo dentro de un lienzo, y
   `cover` recortaría el lienzo -no el motivo- hasta que el canto recto del
   archivo cruzara la celda. Es el mismo error que estropeó el intento de
   paralaje por capas del hero.

   Fondo transparente y no el marrón de reserva: un color de fondo detrás de un
   recorte se ve como el marco rectangular que el recorte existe para no tener.
   El halo de arena por debajo es lo único que hay, y está para que el árbol se
   apoye en algo en vez de flotar.

   Anclado abajo y con la celda más alta que ancha: el árbol crece desde el
   borde inferior de la banda, que es lo que le da el aire vertical.

   Ojo con el archivo: el PNG que subió el cliente a la biblioteca
   -Arbol-de-Olivo.png- no es transparente. Trae el tablero de ajedrez pintado
   en los píxeles (`sips -g hasAlpha` dice `no`), así que en la web se veían los
   cuadros grises. assets/images/olivo-recorte.webp es ese mismo árbol con el
   tablero convertido en canal alfa de verdad; el guion está en
   mocup-html/recortar-tablero.py. */
.cicatrices-b-cierre .cicatrices-foto {
	display: grid;
	min-height: clamp(19rem, 30vw, 30rem);
	padding: clamp(0.75rem, 1.8vw, 1.75rem);
	background-color: transparent;
	background-image: radial-gradient(
		74% 58% at 50% 82%,
		rgba(201, 184, 164, 0.5) 0%,
		rgba(201, 184, 164, 0.16) 52%,
		rgba(236, 228, 217, 0) 76%
	);
	place-items: end center;
}

.cicatrices-b-cierre .cicatrices-foto figure {
	height: 100%;
	min-height: 0;
}

.cicatrices-b-cierre .cicatrices-foto img {
	/* El acercamiento del 18 % de las demás fotografías aquí no vale: con
	   `contain` lo único que haría es sacar las ramas fuera de la celda, y
	   `overflow: hidden` las cortaría. */
	--cicatrices-acercar: 1;

	object-fit: contain;
	object-position: center bottom;
	filter: saturate(0.94);
}

/* ---------- compra ---------- */

.cicatrices-b-comprar .cicatrices-panel {
	align-items: center;
	text-align: center;
}

.cicatrices-b-comprar .cicatrices-panel p {
	max-width: var(--cicatrices-medida, 44ch);
}

.cicatrices-b-comprar .wp-block-buttons {
	justify-content: center;
}

/* ==========================================================================
   Cabecera, hero y pie
   ========================================================================== */

.cicatrices-cabecera .cicatrices-contenedor {
	padding-block: 1.9rem;
}

.cicatrices-cabecera {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* En la portada la cabecera va encima de la fotografía del hero. Solo en la
   portada: en las páginas interiores una cabecera absoluta se comería el
   principio del contenido. */
.home .cicatrices-cabecera {
	position: absolute;
	z-index: 50;
	background: transparent;
	inset-inline: 0;
	top: 0;
}

.cicatrices-cabecera a,
.cicatrices-pie a {
	color: inherit;
	text-decoration: none;
}

.cicatrices-cabecera .wp-block-navigation a:hover,
.cicatrices-pie .wp-block-navigation a:hover {
	text-decoration: underline;
}

.cicatrices-cabecera .wp-block-navigation {
	font-size: var(--wp--preset--font-size--base);
}

.cicatrices-marca > p {
	margin: 0;
}

.cicatrices-marca__nombre {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	letter-spacing: 0.17em;
	line-height: 1.15;
	text-transform: uppercase;
}

.cicatrices-marca__linea {
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
	opacity: 0.85;
}

/* ---------- hero ---------- */

.cicatrices-hero {
	position: relative;
	display: flex;
	overflow: hidden;
	align-items: center;
	min-height: min(88vh, 46rem);
	color: var(--wp--preset--color--base);
}

.cicatrices-hero::before {
	position: absolute;
	background-image: url( assets/images/hero-bg.webp );
	background-position: center 60%;
	background-size: cover;
	background-repeat: no-repeat;
	content: "";
	inset: -12% 0;
	transform: translate3d(0, var(--cicatrices-paralaje, 0), 0);
	will-change: transform;
}

.cicatrices-hero::after {
	position: absolute;
	background: linear-gradient(
		100deg,
		rgba(36, 26, 20, 0.90) 0%,
		rgba(36, 26, 20, 0.86) 48%,
		rgba(36, 26, 20, 0.34) 100%
	);
	content: "";
	inset: 0;
}

.cicatrices-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	align-items: center;
	gap: 2rem;
	grid-template-columns: 1fr 1fr;
	padding-block: clamp(7rem, 10vw, 9.5rem) clamp(3.5rem, 6vw, 5rem);
}

.cicatrices-hero__inner > * {
	min-width: 0;
	margin: 0;
}

.cicatrices-hero__inner > * > * {
	margin-block: 0;
}

.cicatrices-hero__inner > * > * + * {
	margin-top: 1.3rem;
}

.cicatrices-hero .cicatrices-rotulo {
	color: var(--wp--preset--color--accent-soft);
	letter-spacing: 0.24em;
}

.cicatrices-hero h1 {
	letter-spacing: 0.03em;
	line-height: 1;
	text-transform: uppercase;
}

/* El segundo verso, como en el mockup: versales, más pequeño y sin cursiva.
   Va en <em> y no en un <span> con clase porque RichText solo conserva las
   etiquetas en línea que reconoce como formatos. */
.cicatrices-hero h1 em {
	display: block;
	margin-top: 0.1em;
	font-size: 0.52em;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.04em;
}

.cicatrices-hero__sub {
	max-width: 26rem;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.55;
}

/* El libro del hero.

   El mockup trae un render 3D. No existe ese archivo, así que es la cubierta
   plana con perspectiva, sombra y un degradado en el canto que insinúa el
   lomo. No se monta una cara lateral en 3D -sería más fiel- porque no puedo
   previsualizar el resultado y una cara desalineada se ve rota. */
.cicatrices-libro {
	display: flex;
	justify-content: center;
	perspective: 1600px;
}

.cicatrices-libro figure {
	position: relative;
	margin: 0;
	transform: rotateY(-11deg);
	transform-origin: right center;
}

.cicatrices-libro img {
	display: block;
	width: 100%;
	max-width: 24rem;
	height: auto;
	border-radius: 2px 5px 5px 2px;
}

.cicatrices-libro figure::after {
	position: absolute;
	width: 1.1rem;
	border-radius: 2px 0 0 2px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.04));
	content: "";
	inset: 0 auto 0 0;
	pointer-events: none;
}

/* ---------- pie ---------- */

.cicatrices-pie {
	position: relative;
	overflow: hidden;
	margin-top: calc(var(--cicatrices-hueco) * 4);
	color: var(--wp--preset--color--base);
}

.cicatrices-pie::before {
	position: absolute;
	background-image: url( assets/images/pie-montanas.webp );
	background-position: center 70%;
	background-size: cover;
	background-repeat: no-repeat;
	content: "";
	inset: -14% 0;
	transform: translate3d(0, var(--cicatrices-paralaje, 0), 0);
}

.cicatrices-pie::after {
	position: absolute;
	background: rgba(36, 26, 20, 0.88);
	content: "";
	inset: 0;
}

.cicatrices-pie > * {
	position: relative;
	z-index: 2;
}

.cicatrices-pie__inner {
	display: grid;
	align-items: center;
	gap: 2rem;
	grid-template-columns: 1fr 1.1fr 1.2fr;
	padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

.cicatrices-pie__inner > * {
	min-width: 0;
	margin: 0;
}

.cicatrices-pie__lema p {
	margin: 0;
	font-style: italic;
	line-height: 1.6;
}

.cicatrices-pie__cinta {
	border-top: 1px solid rgba(236, 228, 217, 0.18);
	background: rgba(26, 18, 13, 0.5);
	color: var(--wp--preset--color--accent-soft);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cicatrices-pie__cinta p {
	margin: 0;
	padding-block: 1rem;
	text-align: center;
}

.cicatrices-pie .wp-block-social-links {
	gap: 0.6rem;
}

.cicatrices-pie .wp-social-link {
	width: 32px;
	height: 32px;
	border: 1px solid rgba(236, 228, 217, 0.45);
	border-radius: 50%;
	background: transparent;
}

/* ==========================================================================
   Adaptación a pantallas menores
   ========================================================================== */

@media (max-width: 1080px) {
	.cicatrices-b-libro {
		grid-template-columns: 1fr 1fr;
	}

	.cicatrices-b-libro > *:last-child {
		grid-column: 1 / -1;
	}

	.cicatrices-b-lina,
	.cicatrices-b-caminos,
	.cicatrices-lina {
		grid-template-columns: 1fr;
	}

	.cicatrices-datos {
		padding-top: 1.8rem;
		padding-left: 0;
		border-top: 1px solid rgba(236, 228, 217, 0.25);
		border-left: 0;
	}

	.cicatrices-b-caminos__cita {
		align-items: flex-start;
	}

	.cicatrices-b-caminos__cita::after {
		background: rgba(36, 26, 20, 0.86);
	}

	.cicatrices-b-caminos__cita .cicatrices-cita {
		max-width: none;
	}

	.cicatrices-b-cierre {
		grid-template-columns: 1fr 1fr;
	}

	.cicatrices-b-cierre > *:nth-child(2) {
		order: 3;
		grid-column: 1 / -1;
		min-height: 20rem;
	}

	.cicatrices-pie__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.cicatrices-pie__inner .wp-block-navigation,
	.cicatrices-pie__inner .wp-block-social-links {
		justify-content: center;
	}
}

@media (max-width: 860px) {
	.cicatrices-hero__inner {
		grid-template-columns: 1fr;
	}

	.cicatrices-hero::after {
		background: rgba(36, 26, 20, 0.86);
	}

	.cicatrices-libro {
		display: none;
	}
}

@media (max-width: 640px) {
	.cicatrices-banda {
		grid-template-columns: 1fr !important;
	}

	.cicatrices-b-libro > *:last-child,
	.cicatrices-b-cierre > *:nth-child(2) {
		order: 0;
		grid-column: auto;
	}

	.cicatrices-caminos {
		grid-template-columns: 1fr;
	}

	.cicatrices-b-libro::before,
	.cicatrices-b-libro::after,
	.cicatrices-b-cierre::after {
		display: none;
	}
}

/* La autoría de cada opinión: nombre y cargo, como en la maqueta. Las emite
   inc/render-testimonio.php, así que las clases vienen de allí. */

.cicatrices-testimonio__autoria {
	display: block;
	margin-top: 1.2rem;
	font-style: normal;
}

.cicatrices-testimonio__nombre {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.04em;
}

.cicatrices-testimonio__cargo {
	display: block;
	color: var(--wp--preset--color--earth);
	font-size: 0.875rem;
}

/* ==========================================================================
   Escritos: índice, archivo y entrada

   El blog usa el mismo lenguaje que la portada -bandas limitadas al
   contenedor, rótulo, crema profundo- para que no parezca otro sitio.
   ========================================================================== */

/* La rejilla de entradas la construye el propio core/post-template con
   `layout: grid`; aquí solo se le quita el aspecto de lista y se dibuja la
   tarjeta. */
.cicatrices-entradas {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cicatrices-entradas > li {
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	background: var(--wp--preset--color--base);
}

.cicatrices-entradas .wp-block-post-featured-image {
	margin-bottom: 1.1rem;
}

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

.cicatrices-entradas .wp-block-post-title {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.25;
}

.cicatrices-entradas .wp-block-post-title a {
	text-decoration: none;
}

.cicatrices-entradas .wp-block-post-title a:hover {
	text-decoration: underline;
}

.cicatrices-entradas .wp-block-post-date {
	margin: 0 0 0.9rem;
	color: var(--wp--preset--color--earth);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cicatrices-entradas .wp-block-post-date a {
	text-decoration: none;
}

/* La autoría del extracto queda abajo para que las tarjetas, que miden
   distinto, alineen el enlace de «seguir leyendo». */
.cicatrices-entradas .wp-block-post-excerpt {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
	color: var(--cicatrices-texto);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.7;
}

.cicatrices-entradas .wp-block-post-excerpt__more-text {
	margin-top: auto;
	padding-top: 1rem;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wp-block-query-pagination {
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* ---------- la entrada ---------- */

/* El contenido de la entrada se lee a 44rem y no a los 82 del contenedor: a
   ancho completo salen unos 145 caracteres por línea, muy por encima de los
   45-90 que recomienda WCAG. El límite lo pone el propio post-content con su
   `contentSize`, así que las imágenes anchas del contenido siguen pudiendo
   salirse. */
.cicatrices-articulo {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.cicatrices-articulo > * {
	margin-block: 0;
}

.cicatrices-articulo > * + * {
	margin-top: 1.2rem;
}

.cicatrices-articulo .wp-block-post-date {
	color: var(--wp--preset--color--earth);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cicatrices-articulo .wp-block-post-content {
	margin-top: 2rem;
}

.cicatrices-navegacion {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--accent-soft);
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cicatrices-navegacion a {
	text-decoration: none;
}

.cicatrices-navegacion a:hover {
	text-decoration: underline;
}

@media (max-width: 860px) {
	.cicatrices-entradas .wp-block-post-title {
		font-size: var(--wp--preset--font-size--lg);
	}
}

/* ==========================================================================
   Ajustes de alineación y ritmo
   ========================================================================== */

/* La franja crema sobre la cabecera.

   WordPress da a los hijos de .wp-site-blocks un margen superior igual al
   blockGap del sitio, y exime al primero. En la portada la cabecera es
   absoluta, así que no ocupa flujo: el <main> seguía siendo el segundo hijo y
   conservaba ese margen, que asomaba por encima del hero. */
.home .wp-site-blocks > main {
	margin-block-start: 0;
}

/* Los saltos de línea de los títulos no van a mano con <br>: se dejan al
   navegador acotando la medida y pidiendo reparto equilibrado, que da los
   mismos tres o cuatro renglones del diseño y no se rompe si el cliente
   reescribe el texto. */
.cicatrices-panel h2,
.cicatrices-lina h2 {
	max-width: 24ch;
	text-wrap: balance;
}

.cicatrices-panel p,
.cicatrices-cita {
	text-wrap: pretty;
}

/* Los tres iconos de los caminos no miden lo mismo de alto -la ramita es
   estrecha y alta, el corazón ancho y bajo-, así que se les reserva una fila
   de altura fija y se apoyan en su base. Sin esto, los tres rótulos
   arrancarían a distinta altura. */
.cicatrices-caminos figure {
	display: flex;
	align-items: flex-end;
	height: 2.15rem;
}

/* Aquí había un `scroll-margin-top: 6rem` en `:where([id])` para el desfase de
   la cabecera fija, y más abajo hay un `scroll-padding-top: 5.5rem` en el html
   para lo mismo. Los dos se suman: el ancla caía casi 12rem más abajo de lo
   que debía, con un hueco vacío por encima del rótulo. Queda solo el
   scroll-padding del html, que es el sitio canónico para compensar una
   cabecera fija y vale para cualquier desplazamiento, no solo para las anclas.
   También había un `margin-top: 0.05rem` a ojo en los iconos de los datos, que
   sobra desde que la figura los centra por caja. */

::selection {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}

/* ==========================================================================
   Transiciones y microinteracciones

   El bloque de prefers-reduced-motion del principio de este archivo ya anula
   toda transición y animación, así que aquí se pueden declarar sin envolverlas
   en otra consulta. Lo que sí se desactiva a mano es lo que no es una
   transición: la aparición al entrar en pantalla y el paralaje no se activan
   si el sistema pide menos movimiento, porque los enciende el JavaScript.
   ========================================================================== */

.wp-element-button {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
		transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-element-button:hover,
.wp-element-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 0.7rem 1.4rem rgba(36, 26, 20, 0.22);
}

.wp-element-button:active {
	transform: translateY(0);
	box-shadow: none;
}

/* El subrayado de los enlaces del menú crece desde la izquierda en vez de
   aparecer de golpe. Se dibuja con un degradado de fondo porque
   text-decoration no se puede animar. */
.cicatrices-cabecera .wp-block-navigation a,
.cicatrices-pie .wp-block-navigation a,
.cicatrices-navegacion a,
.cicatrices-rotulo a {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size 0.35s ease;
}

.cicatrices-cabecera .wp-block-navigation a:hover,
.cicatrices-pie .wp-block-navigation a:hover,
.cicatrices-navegacion a:hover,
.cicatrices-rotulo a:hover {
	background-size: 100% 1px;
	text-decoration: none;
}

/* Las fotografías que son celda propia se acercan despacio al pasar por
   encima. Es el único movimiento de las imágenes: los paneles con texto
   encima no se tocan, para no mover la línea de lectura. */
.cicatrices-foto img {
	transform: scale( var( --cicatrices-acercar, 1.18 ) )
		translateY( var( --cicatrices-paralaje, 0 ) );
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cicatrices-foto:hover img {
	--cicatrices-acercar: 1.24;
}

.cicatrices-b-cierre .cicatrices-foto:hover img {
	--cicatrices-acercar: 1.03;
}

.cicatrices-libro-tela img {
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cicatrices-libro-tela:hover img {
	transform: rotate(-1.5deg) scale(1.03);
}

/* El libro del hero se endereza un poco al pasar el ratón. */
.cicatrices-libro figure {
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cicatrices-libro:hover figure {
	transform: rotateY(-4deg) translateY(-6px);
}

/* Tarjetas: opiniones y entradas del blog. */
.cicatrices-rotor > .cicatrices-testimonio,
.cicatrices-entradas > li {
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.cicatrices-rotor > .cicatrices-testimonio:hover,
.cicatrices-entradas > li:hover,
.cicatrices-entradas > li:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 1rem 2rem rgba(36, 26, 20, 0.14);
}

.cicatrices-entradas .wp-block-post-featured-image img {
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cicatrices-entradas > li:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

.cicatrices-entradas .wp-block-post-featured-image {
	overflow: hidden;
}

/* El botón de reproducir crece y se aclara. */
.cicatrices-video__play {
	transition: transform 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

.cicatrices-video:hover .cicatrices-video__play,
.cicatrices-video:focus-visible .cicatrices-video__play {
	transform: scale(1.09);
}

/* Los iconos de los caminos suben un pelo con su columna. */
.cicatrices-caminos > * {
	transition: transform 0.4s ease;
}

.cicatrices-caminos > *:hover {
	transform: translateY(-3px);
}

.cicatrices-rotor__boton,
.cicatrices-rotor__punto {
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.cicatrices-rotor__punto:hover {
	transform: scale(1.25);
}

/* ---------- aparición al entrar en pantalla ----------
   El estado oculto solo existe si el JavaScript ha marcado la raíz: sin
   script, o con «reducir movimiento» activo, todo se ve desde el principio y
   nada queda atrapado en opacidad cero. */

.cicatrices-animar .se-revela {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--cicatrices-retardo, 0ms);
}

.cicatrices-animar .se-revela.esta-visible {
	opacity: 1;
	transform: none;
}

/* ---------- cabecera que se fija al desplazar ---------- */

/* Este desfase es lo que evita que una sección a la que se llega por un ancla
   aterrice justo debajo de la cabecera fija. Es el único sitio donde se pone:
   ver la nota junto a `scroll-behavior` al principio del archivo. */
html {
	scroll-padding-top: 5.5rem;
}

.cicatrices-cabecera {
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.home .cicatrices-cabecera.esta-fija {
	position: fixed;
	background: rgba(36, 26, 20, 0.92);
	box-shadow: 0 0.5rem 1.5rem rgba(36, 26, 20, 0.25);
	animation: cicatrices-baja 0.4s ease;
}

@supports (backdrop-filter: blur(10px)) {
	.home .cicatrices-cabecera.esta-fija {
		background: rgba(36, 26, 20, 0.72);
		backdrop-filter: blur(12px);
	}
}

.cicatrices-cabecera.esta-fija .cicatrices-contenedor {
	padding-block: 1.1rem;
}

@keyframes cicatrices-baja {
	from { transform: translateY(-100%); }
	to   { transform: none; }
}

/* ==========================================================================
   Hero

   Una sola fotografía -la que se eligió para el hero- con paralaje.

   Hubo un intento de montarlo con tres planos superpuestos: el paisaje al
   fondo, un olivo recortado y unos arbustos delante. No funcionó y se retiró.
   El motivo técnico conviene dejarlo escrito: las imágenes recortadas traen
   mucho lienzo transparente alrededor del motivo, así que al colocarlas como
   fondo con `cover` el navegador recorta el lienzo -no el motivo- y aparece
   el canto recto de la imagen cruzando el hero. Para que un montaje así
   funcione, cada capa necesita `contain`, un anclaje propio y una altura
   pensada para su motivo, y eso hay que verlo en pantalla mientras se ajusta.
   ========================================================================== */

.cicatrices-hero,
.cicatrices-pie,
.cicatrices-panel--foto,
.cicatrices-foto {
	/* Valor por omisión para que los calc() de las capas siempre tengan
	   unidades, incluso antes de que el JavaScript escriba el suyo. */
	--cicatrices-paralaje: 0px;
}

.cicatrices-hero {
	isolation: isolate;
}

.cicatrices-hero::before {
	z-index: 0;
	background-image: url( assets/images/hero-bg.webp );
	background-position: center 60%;
	transform: translate3d(0, var(--cicatrices-paralaje), 0);
}

.cicatrices-hero::after {
	z-index: 2;
}

.cicatrices-hero__inner {
	z-index: 3;
}

/* ---------- el libro del hero, limpio ---------- */

/* Ni sombra ni canto ni inclinación: la portada es un rectángulo opaco y
   cualquiera de las tres cosas se lee como un pegote de CSS, no como un libro.
   La profundidad la dan ahora las capas del hero. */
.cicatrices-libro figure {
	transform: none;
}

.cicatrices-libro figure::after {
	content: none;
}

.cicatrices-libro:hover figure {
	transform: translateY(-6px);
}

/* ---------- alineación del texto sobre fotografía ---------- */

/* La cita de la banda 03 estaba pegada a la derecha para seguir al mockup, y
   rompía la vertical que forman todos los demás textos. Pasa a la izquierda,
   como el resto, y el velo se oscurece hacia ese lado. */
.cicatrices-b-caminos__cita {
	align-items: flex-start;
}

.cicatrices-b-caminos__cita::after {
	background: linear-gradient(90deg, rgba(36, 26, 20, 0.88) 0%, rgba(36, 26, 20, 0.45) 65%);
}

.cicatrices-b-caminos__cita .cicatrices-cita {
	max-width: 30ch;
}

/* ---------- el rotor de opiniones ---------- */

/* La pista tiene overflow-x, y eso obliga al navegador a recortar también en
   vertical: sin este hueco, el levantamiento de la tarjeta al pasar el ratón
   y su sombra quedaban cortados por arriba y por abajo. El margen negativo
   devuelve el espacio que el relleno acaba de añadir. */
.wp-block-group.cicatrices-rotor {
	margin-block: -0.9rem;
	padding-block: 0.9rem;
}

/* Fuera el `height: 100%`: con `align-items: stretch` las tarjetas ya miden lo
   mismo, y esa altura resuelta contra un contenedor de alto automático era lo
   que recortaba el contenido de las más largas. */
.cicatrices-rotor > .cicatrices-testimonio {
	height: auto;
}

/* El botón de pausa, discreto junto a los puntos. */
.cicatrices-rotor__boton--pausa {
	width: 1.9rem;
	height: 1.9rem;
	border-color: transparent;
	color: var(--wp--preset--color--earth);
	font-size: 0.5625rem;
}

.cicatrices-rotor__boton--pausa:hover,
.cicatrices-rotor__boton--pausa:focus-visible {
	border-color: var(--wp--preset--color--accent);
	background: transparent;
	color: var(--wp--preset--color--accent);
}

/* ---------- retrato de la autora ---------- */

/* Esta celda estuvo pensada para un retrato recortado sobre transparencia,
   apoyado en su base como el de una solapa. La fotografía que hay es otra
   cosa: un retrato rectangular con el fondo desenfocado. Recortado sobre
   transparencia habría funcionado suelto sobre el gris; rectangular y suelto se
   ve como una foto pegada en una caja, con márgenes distintos por cada lado.

   Así que llena la celda. El gris queda solo como color de reserva por si
   faltara el archivo, y el encuadre se ancla arriba porque lo que importa de
   un retrato es la cara, no el pecho. */
.cicatrices-retrato {
	display: grid;
	min-height: clamp(20rem, 26vw, 30rem);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.cicatrices-retrato figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.cicatrices-retrato img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center 16%;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cicatrices-retrato:hover img {
	transform: scale(1.035);
}

/* A una sola columna la celda se queda ancha y baja, y con `cover` eso recorta
   el retrato a una franja. Se le da alto de retrato. */
@media (max-width: 1080px) {
	.cicatrices-retrato {
		min-height: min(80vw, 32rem);
	}
}

/* ---------- iconos de redes sociales ---------- */

/* El bloque de WordPress mete su propio relleno en el enlace y dimensiona el
   icono en em, así que dentro de un círculo de tamaño fijo quedaba descentrado.
   Se anula el relleno y se centra con rejilla. */
.cicatrices-pie .wp-social-link {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
}

.cicatrices-pie .wp-social-link a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	line-height: 0;
}

.cicatrices-pie .wp-social-link svg {
	width: 0.95rem;
	height: 0.95rem;
}

/* ---------- ramitas de adorno ---------- */

/* Bajo el título de las secciones a ancho completo. */
.cicatrices-b-plena h2::after,
.cicatrices-b-comprar h2::after {
	display: block;
	width: 6rem;
	height: 1.75rem;
	margin-top: 0.9rem;
	background: url( assets/icons/ramita.svg ) left center / contain no-repeat;
	content: "";
}

.cicatrices-b-comprar h2::after {
	margin-inline: auto;
}

/* Y en la esquina de la banda a ancho completo, que aún no lo tenía. La banda
   de compra tenía también esta ramita y se la ha quitado: en una banda de una
   sola celda, un adorno de 11rem en la esquina es lo único que se veía de
   fondo y parecía un olivo pequeño colocado al azar. Ahí ahora hay una
   fotografía de verdad. */
.cicatrices-b-plena {
	position: relative;
	overflow: hidden;
}

.cicatrices-b-plena::after {
	position: absolute;
	z-index: 3;
	right: -1.5rem;
	bottom: 0;
	width: clamp(7rem, 12vw, 11rem);
	aspect-ratio: 3 / 2;
	background: url( assets/images/rama-ornamento.webp ) center / contain no-repeat;
	content: "";
	mix-blend-mode: multiply;
	opacity: 0.38;
	pointer-events: none;
	transform: scaleX(-1);
}

@media (max-width: 640px) {
	.cicatrices-b-plena::after {
		display: none;
	}
}

/* La banda de compra reutiliza la maquinaria de .cicatrices-panel--foto (capa
   de imagen en ::before con paralaje, velo en ::after) y solo cambia dos
   cosas: la fotografía y la dirección del velo. El de los paneles 04/05 se
   oscurece hacia la izquierda porque su texto va a ese lado; aquí el texto
   está centrado, así que el velo tiene que ser simétrico y no dejar ningún
   tramo claro debajo de una palabra.

   Medido sobre el píxel más claro de paisaje-atardecer.webp: el velo no baja
   de .84 en toda la caja, que sobre crema deja el texto por encima de 8:1. */
.cicatrices-panel--comprar {
	min-height: clamp(19rem, 26vw, 24rem);
}

.cicatrices-panel--comprar::before {
	background-image: url( assets/images/paisaje-atardecer.webp );
	background-position: center 62%;
}

.cicatrices-panel--comprar::after {
	background: linear-gradient(
		180deg,
		rgba(36, 26, 20, 0.9) 0%,
		rgba(36, 26, 20, 0.84) 45%,
		rgba(36, 26, 20, 0.92) 100%
	);
}

/* ---------- la página de entrevistas ---------- */

.cicatrices-videos-lista {
	display: grid;
	gap: var(--cicatrices-hueco);
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
}

.cicatrices-videos-lista > * {
	min-width: 0;
	margin: 0;
}

@media (max-width: 1080px) {
	.cicatrices-videos-lista {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.cicatrices-videos-lista {
		grid-template-columns: 1fr;
	}
}

/* ---------- submenú de la cabecera ---------- */

.cicatrices-cabecera .wp-block-navigation__submenu-container {
	min-width: 17rem;
	padding-block: 0.5rem;
	border: 0;
	background: rgba(36, 26, 20, 0.97);
	box-shadow: 0 0.75rem 2rem rgba(36, 26, 20, 0.35);
}

@supports (backdrop-filter: blur(10px)) {
	.cicatrices-cabecera .wp-block-navigation__submenu-container {
		background: rgba(36, 26, 20, 0.82);
		backdrop-filter: blur(12px);
	}
}

.cicatrices-cabecera .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.25rem;
	background-image: none;
	font-size: var(--wp--preset--font-size--sm);
}

.cicatrices-cabecera .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-soft);
	text-decoration: none;
}

/* ==========================================================================
   Ventana modal del vídeo

   Es un <dialog> abierto con showModal(): de ahí salen gratis el cierre con
   Escape, el atrapado del foco y su devolución al botón que la abrió. El
   iframe se crea al abrir y se destruye al cerrar, así que el vídeo se detiene
   de verdad en vez de seguir sonando detrás.
   ========================================================================== */

.cicatrices-modal {
	width: min(92vw, 68rem);
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--base);
}

.cicatrices-modal::backdrop {
	background: rgba(36, 26, 20, 0.9);
}

@supports (backdrop-filter: blur(6px)) {
	.cicatrices-modal::backdrop {
		background: rgba(36, 26, 20, 0.8);
		backdrop-filter: blur(6px);
	}
}

.cicatrices-modal__caja {
	position: relative;
}

.cicatrices-modal__marco {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 2px;
	background: var(--wp--preset--color--contrast);
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5);
}

.cicatrices-modal__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.cicatrices-modal__cerrar {
	position: absolute;
	top: -3rem;
	right: 0;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--wp--preset--color--accent-soft);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--base);
	font-size: 1.375rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.cicatrices-modal__cerrar:hover,
.cicatrices-modal__cerrar:focus-visible {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}

/* En pantallas bajas el botón no cabe encima: pasa a la esquina de dentro. */
@media (max-height: 34rem), (max-width: 480px) {
	.cicatrices-modal__cerrar {
		top: 0.6rem;
		right: 0.6rem;
		z-index: 2;
		border-color: var(--wp--preset--color--base);
		background: rgba(36, 26, 20, 0.7);
	}
}

/* ==========================================================================
   Menú de móvil

   El overlay de core/navigation llega casi sin estilo, y hereda de la cabecera
   dos cosas que a pantalla completa no tienen sentido: la justificación a la
   derecha -de ahí que los enlaces salieran pegados al borde- y el tamaño de
   texto de una barra horizontal.

   El submenú es el otro arreglo. En escritorio es un desplegable flotante; a
   pantalla completa, flotar dentro de la capa que ya es el menú deja una caja
   suspendida en medio de la nada. Dentro del overlay vuelve a ser lo que es:
   una lista indentada debajo de su título.

   El color del overlay no se pone aquí sino en parts/header.html, con los
   atributos overlayBackgroundColor y overlayTextColor del bloque: así el
   editor lo muestra igual que el frontend y quien edite el menú lo ve.
   ========================================================================== */

.cicatrices-cabecera .wp-block-navigation__responsive-container-open,
.cicatrices-cabecera .wp-block-navigation__responsive-container-close {
	padding: 0.4rem;
	color: currentColor;
}

.cicatrices-cabecera .wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(4.5rem, 11vh, 7.5rem) var(--cicatrices-gutter) clamp(2.5rem, 8vh, 5rem);
}

/* Los enlaces centrados, a tamaño de titular y con aire: es un menú a pantalla
   completa, no una barra. El blockGap de la cabecera se anula porque aquí el
   ritmo lo marca el padding de cada enlace, que además es la zona pulsable.

   El centrado no se pelea con el core, se le dice por donde él lo lee. En el
   overlay, el core alinea con `align-items: var(--navigation-layout-justification-setting)`,
   y ese valor lo fija la clase de justificación del bloque -aquí
   `items-justified-right`, que es lo que queremos en la barra de escritorio-.
   Sobrescribir cada `align-items` uno por uno era pelearse con reglas del core
   de la misma especificidad y perder en silencio; cambiando la variable en el
   overlay, todos los `align-items` del core resuelven a centro de una vez. */
.cicatrices-cabecera .wp-block-navigation__responsive-container.is-menu-open,
.cicatrices-cabecera .is-menu-open .wp-block-navigation__container.items-justified-right {
	--navigation-layout-justification-setting: center;
}

.cicatrices-cabecera .is-menu-open .wp-block-navigation__responsive-container-content,
.cicatrices-cabecera .is-menu-open .wp-block-navigation__container {
	justify-content: flex-start;
	width: 100%;
	gap: 0;
}

.cicatrices-cabecera .is-menu-open .wp-block-navigation-item {
	text-align: center;
}

.cicatrices-cabecera .is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding-block: 0.85rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.2;
}

/* El subrayado que crece al pasar el ratón se dibuja con background-size, y a
   ancho completo la línea cruzaría toda la pantalla. */
.cicatrices-cabecera .is-menu-open .wp-block-navigation-item__content {
	background-image: none;
}

.cicatrices-cabecera .is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-soft);
}

/* El título del submenú no es un enlace más: marca el grupo que viene debajo. */
.cicatrices-cabecera .is-menu-open .wp-block-navigation-submenu__toggle,
.cicatrices-cabecera .is-menu-open .has-child > .wp-block-navigation-item__content {
	justify-content: center;
	width: 100%;
	color: var(--wp--preset--color--accent-soft);
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}

.cicatrices-cabecera .is-menu-open .wp-block-navigation__submenu-container {
	position: static;
	min-width: 0;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	opacity: 1;
	transform: none;
	visibility: visible;
}

.cicatrices-cabecera .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: 0.7rem;
	color: inherit;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: normal;
	text-transform: none;
}

/* Una línea fina cierra el grupo del submenú, como el hueco de 6px cierra las
   celdas de las bandas. */
/* El grupo del submenú se estira a todo el ancho -sus dos líneas son lo que lo
   separa del resto del menú- mientras su contenido sigue centrado. Sin el
   `align-self`, al centrar los elementos la caja mediría lo que su texto y las
   líneas quedarían convertidas en dos subrayados sueltos. */
.cicatrices-cabecera .is-menu-open .has-child {
	align-self: stretch;
	width: 100%;
	padding-block: 0.6rem;
	border-block: 1px solid rgba(236, 228, 217, 0.18);
	margin-block: 0.6rem;
}

/* El enlace padre y su lista quedan centrados dentro de esa caja estirada. */
.cicatrices-cabecera .is-menu-open .has-child > .wp-block-navigation-item__content,
.cicatrices-cabecera .is-menu-open .has-child > .wp-block-navigation__submenu-container {
	align-self: center;
	text-align: center;
}

/* ==========================================================================
   Abusómetro espiritual

   Tres niveles de alerta, veintiuna señales. Los colores son los del arte
   original del marcador, sacados del PDF con un muestreo de píxeles y no a
   ojo: #d59b36, #c74a27 y #8c1a24.

   De ahí sale el único ajuste que no es fiel al arte, y es por contraste
   medido sobre el crema del theme:

   - El amarillo #d59b36 da 1.94:1 con el crema. No se puede usar ni para
     texto ni para dibujo encima de crema, así que en la cabecera del nivel
     va de fondo con el texto oscuro (6.95:1) y la tinta de sus iconos y
     titulares es un #7d5a12 (4.99:1).
   - El naranja #c74a27 da 3.76:1 con el crema: pasa para un titular grande
     pero no para texto normal, así que la cabecera usa #a83a1c (5.07:1).
   - El rojo #8c1a24 da 7.28:1 y se usa tal cual.
   ========================================================================== */

.cicatrices-b-nivel {
	grid-template-columns: 1fr;
}

.cicatrices-nivel--amarillo {
	--nivel: #d59b36;
	--nivel-tinta: #7d5a12;
	--nivel-texto: var(--wp--preset--color--contrast);
}

.cicatrices-nivel--naranja {
	--nivel: #a83a1c;
	--nivel-tinta: #a83a1c;
	--nivel-texto: var(--wp--preset--color--base);
}

.cicatrices-nivel--rojo {
	--nivel: #8c1a24;
	--nivel-tinta: #8c1a24;
	--nivel-texto: var(--wp--preset--color--base);
}

/* ---------- la cabecera de cada nivel ---------- */

.cicatrices-nivel__cabeza {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.4rem, 2.6vw, 2.3rem) var(--cicatrices-pad-panel);
	background: var(--nivel);
	color: var(--nivel-texto);
}

.cicatrices-nivel__cabeza > * {
	margin-block: 0;
	max-width: none;
}

.cicatrices-nivel__cabeza > * + * {
	margin-top: 0.5rem;
}

.cicatrices-nivel__marca {
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.cicatrices-nivel__cabeza h2 {
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 400;
	line-height: 1.2;
}

.cicatrices-nivel__apodo {
	color: inherit;
	font-size: var(--wp--preset--font-size--lg);
	font-style: italic;
	opacity: 0.88;
}

/* ---------- las señales ---------- */

.cicatrices-nivel__entrada {
	--cicatrices-medida: 74ch;

	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
}

/* Cada señal vive en su columna: la medida ya la pone la rejilla. */
.cicatrices-senales,
.cicatrices-aviso {
	--cicatrices-medida: none;
}

.cicatrices-senales {
	display: grid;
	gap: clamp(1.7rem, 2.8vw, 2.6rem);
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
	margin-top: clamp(1.8rem, 3vw, 2.6rem);
}

.cicatrices-senal {
	min-width: 0;
	padding-top: 1.1rem;
	border-top: 2px solid var(--nivel-tinta);
	margin: 0;
}

.cicatrices-senal > * {
	margin-block: 0;
}

/* Misma solución que en la lista de datos: la figura tiene altura fija y el
   icono se centra dentro, así los veintiún titulares arrancan a la misma
   altura aunque cada dibujo llene su lienzo de forma distinta. */
.cicatrices-senal figure {
	display: grid;
	height: 2.1rem;
	margin-bottom: 0.8rem;
	place-items: center start;
}

.cicatrices-senal img {
	width: 2.1rem;
	height: 2.1rem;
	object-fit: contain;
}

.cicatrices-senal h3 {
	color: var(--nivel-tinta);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
}

.cicatrices-senal p {
	margin-top: 0.6rem;
	color: var(--cicatrices-texto);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.65;
}

/* La escala completa, como leyenda del panel de «cómo leerlo». Va en CSS y no
   en el contenido porque es la misma información que ya dan los tres niveles:
   marcado que el editor tendría que arrastrar sin poder editarlo. */
.cicatrices-aviso::before {
	display: block;
	width: min(100%, 24rem);
	height: 0.4rem;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		#d59b36 0 33.33%,
		#c74a27 33.33% 66.66%,
		#8c1a24 66.66%
	);
	content: "";
	margin-bottom: 1.4rem;
}

@media (max-width: 1080px) {
	.cicatrices-senales {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.cicatrices-senales {
		grid-template-columns: 1fr;
	}
}