/* ==========================================================================
 * Lolo Drago — hoja de marca del tema hijo
 *
 * Se encola después de la del padre (vidaytu-base-main) y hace tres cosas:
 *   1. Parchear las variables de tamaño de fuente que WordPress no genera.
 *   2. Poner el esqueleto de bandas a sangre de la maqueta.
 *   3. Adaptar a fondo oscuro los bloques que se heredan del padre.
 *
 * El CSS de los bloques propios del proyecto NO vive aquí: va en el style.css
 * de cada bloque, como en el padre.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Parche de variables de tamaño de fuente
 *
 * WordPress pasa los slugs por _wp_to_kebab_case() al generar las custom
 * properties, y eso mete un guión entre el número y las letras:
 *
 *     slug "3xl"  ->  --wp--preset--font-size--3-xl
 *
 * Las hojas del padre escriben var(--wp--preset--font-size--3xl), sin guión.
 * Esa variable no existe, la declaración entera se invalida y el titular cae
 * al tamaño heredado (16px) sin que se note a simple vista: el texto sigue
 * "en su sitio", solo que pequeño. Son 76 referencias en 42 archivos del padre.
 *
 * Con estos tres alias las referencias del padre resuelven al valor correcto
 * sin tener que tocar el padre, que es compartido con otros proyectos.
 * -------------------------------------------------------------------------- */
:root {
	--wp--preset--font-size--2xl: var(--wp--preset--font-size--2-xl);
	--wp--preset--font-size--3xl: var(--wp--preset--font-size--3-xl);
	--wp--preset--font-size--4xl: var(--wp--preset--font-size--4-xl);
}

/* --------------------------------------------------------------------------
 * 2. Tokens de la maqueta
 *
 * Alias cortos sobre los presets de theme.json, para no repetir la cantinela
 * de --wp--preset--color-- en cada regla.
 * -------------------------------------------------------------------------- */
:root {
	--lolo-oro: var(--wp--preset--color--primary);
	--lolo-oro-claro: var(--wp--preset--color--primary-hover);

	--lolo-negro: var(--wp--preset--color--ink);
	--lolo-banda: var(--wp--preset--color--band);
	--lolo-tarjeta: var(--wp--preset--color--navy);
	--lolo-marco: var(--wp--preset--color--frame);

	--lolo-texto: var(--wp--preset--color--text);
	--lolo-texto-suave: var(--wp--preset--color--text-muted);
	--lolo-texto-tenue: var(--wp--preset--color--text-faint);

	--lolo-claro: var(--wp--preset--color--bg-soft);
	--lolo-claro-marco: var(--wp--preset--color--bg-muted);
	--lolo-tinta: var(--wp--preset--color--ink);
	--lolo-tinta-cuerpo: var(--wp--preset--color--ink-body);
	--lolo-tinta-tenue: var(--wp--preset--color--ink-faint);

	--lolo-linea: rgba(255, 255, 255, 0.08);
	--lolo-linea-tarjeta: rgba(255, 255, 255, 0.09);
	--lolo-linea-fuerte: rgba(255, 255, 255, 0.35);
	--lolo-linea-oro: rgba(193, 159, 32, 0.45);
	--lolo-linea-oro-suave: rgba(193, 159, 32, 0.5);

	/* Medidas del lienzo: 1440 de ancho con 72 de aire lateral -> 1296 útiles. */
	--lolo-ancho: var(--wp--custom--sitio--ancho);
	--lolo-aire-lateral: var(--wp--custom--sitio--aire-lateral);
	--lolo-aire-seccion: var(--wp--custom--sitio--aire-seccion);

	--lolo-radio-boton: var(--wp--custom--radius--sm);
	--lolo-radio-tarjeta: var(--wp--custom--radius--md);
}

/* --------------------------------------------------------------------------
 * 3. Esqueleto
 * -------------------------------------------------------------------------- */

body {
	background: var(--lolo-negro);
	color: var(--lolo-texto);
	font-family: var(--wp--preset--font-family--sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* El <main> va en layout "default", no "constrained": cada sección es una
 * banda a sangre que se pone su propio fondo y limita el contenido por dentro.
 * Si el contenedor restringiera al contentSize, los fondos se cortarían. */
#lolo-main > * {
	max-width: none;
}

/* WordPress mete 24px de margen entre bloques hermanos (`is-layout-flow`). En
 * esta web las bandas van pegadas, y ese margen abría once costuras del color
 * del fondo del body entre sección y sección: sobre negro no se ven, pero
 * contra las bandas crema salía una franja negra de 24px. */
#lolo-main .entry-content > *,
#lolo-main > .entry-content {
	margin-block: 0;
}

/* Contenedor interior común, tanto para los bloques del padre como para los
 * del hijo. Todos rematan su envoltorio interno en __inner. */
.lolo-wrap,
#lolo-main [class*="wp-block-vidaytu-"] > [class*="__inner"] {
	max-width: var(--lolo-ancho);
	margin-inline: auto;
	padding-inline: var(--lolo-aire-lateral);
}

/* Va anclado al #lolo-main a propósito. Cuando el bloque está a sangre el
 * padre baja el aire lateral a 24px con una regla de tres clases
 * (`.bloque.alignfull .bloque__inner`), y aquí el diseño mantiene los 72 y los
 * 1296 de contenido en cualquier caso. */
#lolo-main [class*="wp-block-vidaytu-"].alignfull > [class*="__inner"] {
	max-width: var(--lolo-ancho);
	padding-inline: var(--lolo-aire-lateral);
}

/* Aire vertical de sección: la maqueta usa 96px arriba y abajo en todas las
 * bandas. El padre trae 64 (--spacing--70).
 *
 * Los bloques propios del proyecto quedan fuera: cada uno declara su propio
 * aire (la cabecera 14, el hero 88/80, la tira de lema 26) y esta regla se lo
 * pisaba, porque tiene la misma especificidad que su `.lolo-header` y esta
 * hoja se carga después del style.css del bloque. */
[class*="wp-block-vidaytu-"]:not([class*="wp-block-vidaytu-lolo-"]) {
	padding-block: var(--lolo-aire-seccion);
}

/* Sistema de bandas.
 *
 * Manda el envoltorio, no el bloque. Cada sección de la maqueta va dentro de
 * un grupo con una de estas tres clases, que es quien pone el fondo; los
 * bloques que caen dentro se vuelven transparentes y heredan la tinta que
 * toque. Así un mismo bloque del padre sirve igual sobre negro que sobre
 * crema sin depender de que tenga un atributo `background` con el valor
 * adecuado — varios no lo tienen.
 */
.lolo-banda {
	width: 100%;
}

/* El aire de sección lo pone la banda y sólo la banda. Si lo pusiera cada
 * bloque, dos secciones seguidas dentro de la misma banda sumarían 96 + 96 y
 * un titular suelto delante de un bloque abriría otro hueco más. */
#lolo-main .lolo-banda {
	padding-block: var(--lolo-aire-seccion);
}

#lolo-main .lolo-banda [class*="wp-block-vidaytu-"] {
	background: transparent;
	padding-block: 0;
}

.lolo-banda--oscura { background: var(--lolo-negro); color: var(--lolo-texto); }
.lolo-banda--profunda {
	background: var(--lolo-banda);
	color: var(--lolo-texto);
	border-block: 1px solid var(--lolo-linea);
}
.lolo-banda--clara { background: var(--lolo-claro); color: var(--lolo-tinta); }

/* Kicker: la etiqueta pequeña en oro que abre casi todas las secciones. */
.lolo-kicker {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--lolo-oro);
}

/* Marcos de las fotos que todavía no existen. Conservan la proporción del
 * diseño para que al sustituirlos por la imagen real no se mueva el layout. */
.lolo-foto-pendiente {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--lolo-radio-tarjeta);
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: 1px;
	text-align: center;
	padding: var(--wp--preset--spacing--40);
	background: var(--lolo-marco);
	border: 1px solid var(--lolo-linea-oro);
	color: var(--lolo-texto-tenue);
}

.lolo-banda--clara .lolo-foto-pendiente,
.lolo-foto-pendiente.is-clara {
	background: var(--lolo-claro-marco);
	border-color: rgba(193, 159, 32, 0.55);
	color: var(--lolo-tinta-tenue);
}

.lolo-foto-pendiente img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* --------------------------------------------------------------------------
 * 4. Botones
 * -------------------------------------------------------------------------- */

.lolo-boton,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	line-height: 1.2;
	border-radius: var(--lolo-radio-boton);
	text-decoration: none;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.lolo-boton--oro {
	background: var(--lolo-oro);
	color: var(--lolo-negro);
	font-size: var(--wp--preset--font-size--lg);
	padding: 18px 30px;
}
.lolo-boton--oro:hover,
.lolo-boton--oro:focus-visible {
	background: var(--lolo-oro-claro);
	color: var(--lolo-negro);
}

/* Variante compacta: la que va dentro de tarjetas y en la barra de navegación. */
.lolo-boton--oro-sm {
	background: var(--lolo-oro);
	color: var(--lolo-negro);
	font-size: var(--wp--preset--font-size--md);
	padding: 15px 24px;
}
.lolo-boton--oro-sm:hover,
.lolo-boton--oro-sm:focus-visible {
	background: var(--lolo-oro-claro);
	color: var(--lolo-negro);
}

.lolo-boton--contorno {
	background: transparent;
	border: 1px solid var(--lolo-linea-fuerte);
	color: var(--lolo-texto);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	padding: 17px 26px;
}
.lolo-boton--contorno:hover,
.lolo-boton--contorno:focus-visible {
	border-color: var(--lolo-oro);
	color: var(--lolo-oro);
}

.lolo-boton--contorno-sm {
	background: transparent;
	border: 1px solid var(--lolo-linea-fuerte);
	color: var(--lolo-texto);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	padding: 14px 24px;
}
.lolo-boton--contorno-sm:hover,
.lolo-boton--contorno-sm:focus-visible {
	border-color: var(--lolo-oro);
	color: var(--lolo-oro);
}

/* Enlace en oro con flecha: el «Conoce mi historia completa →» del diseño. */
.lolo-enlace-oro {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md);
	color: var(--lolo-oro);
	text-decoration: none;
}
.lolo-enlace-oro:hover,
.lolo-enlace-oro:focus-visible {
	color: var(--lolo-oro-claro);
	text-decoration: underline;
}

/* Variantes registradas para core/button en functions.php. */
.wp-block-button.is-style-contorno .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--lolo-linea-fuerte);
	color: var(--lolo-texto);
	font-weight: 600;
}
.wp-block-button.is-style-contorno .wp-block-button__link:hover {
	border-color: var(--lolo-oro);
	color: var(--lolo-oro);
}

.wp-block-button.is-style-texto-oro .wp-block-button__link {
	background: transparent;
	padding: 0;
	color: var(--lolo-oro);
}
.wp-block-button.is-style-texto-oro .wp-block-button__link:hover {
	color: var(--lolo-oro-claro);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * 5. Adaptación de los bloques heredados del padre
 *
 * El padre está pensado para tema claro: pinta los titulares con --navy y el
 * cuerpo con --text, dando por hecho que el fondo es blanco. Aquí la web es
 * negra de base con bandas claras intercaladas, así que hay que invertir los
 * colores banda a banda.
 *
 * Tres decisiones que conviene tener presentes al tocar esto:
 *
 *  - Los selectores usan `[class$="__x"]` (termina en) y no `[class*="__x"]`
 *    (contiene). Con «contiene», `__card` también captura `__card-title` y
 *    `__card-body`, y el titular acababa pintado del color del fondo de su
 *    propia tarjeta.
 *  - Las listas no incluyen `p`, `h2` ni etiquetas sueltas. Al incluirlas, un
 *    `<p class="…__title">` entraba a la vez en la lista de titulares y en la
 *    de cuerpo, y ganaba la que estuviera escrita más abajo. El texto suelto
 *    de los bloques del núcleo se resuelve por herencia, con el `color` que la
 *    propia banda declara.
 *  - Las reglas por `is-bg-*` van ANTES que las de banda, no después: tienen
 *    la misma especificidad, así que sólo el orden decide, y quien manda es
 *    la banda.
 *
 * `:where()` no suma especificidad: el peso lo pone la clase de banda de
 * fuera, y va doblada porque WordPress inyecta el CSS de varios bloques en un
 * <style> en línea que cae DESPUÉS de esta hoja.
 * -------------------------------------------------------------------------- */

/* --- Bloque suelto, sin banda alrededor ---------------------------------- *
 * Un bloque del padre colocado a pelo se pinta según su propio atributo
 * `background`. Es el caso de las páginas que se maqueten sin envolver cada
 * sección. */

[class*="wp-block-vidaytu-"].is-bg-default :where(
	[class$="__heading"], [class$="__title"], [class$="__card-title"],
	[class$="__item-title"], [class$="__name"], [class$="__author-name"],
	[class$="__quote"]
) {
	color: var(--lolo-texto);
}

[class*="wp-block-vidaytu-"].is-bg-default :where(
	[class$="__intro"], [class$="__body"], [class$="__card-body"],
	[class$="__item-desc"], [class$="__excerpt"], [class$="__subtitle"],
	[class$="__meta"], [class$="__role"], [class$="__author-role"],
	[class$="__date"]
) {
	color: var(--lolo-texto-suave);
}

[class*="wp-block-vidaytu-"].is-bg-default :where([class$="__card"], [class$="__item"]) {
	background: var(--lolo-tarjeta);
	border-color: var(--lolo-linea-tarjeta);
}

/* Bandas navy y oro del padre: resuelve el texto con var(--…--bg) dando por
 * hecho que el fondo del sitio es blanco. Aquí --bg es negro, así que sin esto
 * el texto saldría negro sobre tarjeta oscura. */

[class*="wp-block-vidaytu-"].is-bg-navy {
	background: var(--lolo-tarjeta);
	color: var(--lolo-texto);
}

[class*="wp-block-vidaytu-"].is-bg-navy :where(
	[class$="__heading"], [class$="__title"], [class$="__card-title"]
) {
	color: var(--lolo-texto);
}

[class*="wp-block-vidaytu-"].is-bg-navy :where(
	[class$="__body"], [class$="__intro"], [class$="__subtitle"]
) {
	color: var(--lolo-texto-suave);
}

/* En la maqueta el oro siempre lleva tinta negra, nunca blanca. */
[class*="wp-block-vidaytu-"].is-bg-primary,
[class*="wp-block-vidaytu-"].is-bg-primary :where(
	[class$="__heading"], [class$="__title"], [class$="__body"], [class$="__eyebrow"]
) {
	color: var(--lolo-negro);
}

/* --- Dentro de una banda: manda la banda -------------------------------- */

/* Titulares sobre oscuro */
#lolo-main .lolo-banda--oscura :where(
	[class$="__heading"], [class$="__title"], [class$="__card-title"],
	[class$="__item-title"], [class$="__name"], [class$="__author-name"],
	[class$="__quote"]
),
#lolo-main .lolo-banda--profunda :where(
	[class$="__heading"], [class$="__title"], [class$="__card-title"],
	[class$="__item-title"], [class$="__name"], [class$="__author-name"],
	[class$="__quote"]
) {
	color: var(--lolo-texto);
}

/* Cuerpo sobre oscuro */
#lolo-main .lolo-banda--oscura :where(
	[class$="__intro"], [class$="__body"], [class$="__card-body"],
	[class$="__item-desc"], [class$="__excerpt"], [class$="__subtitle"],
	[class$="__meta"], [class$="__role"], [class$="__author-role"],
	[class$="__date"]
),
#lolo-main .lolo-banda--profunda :where(
	[class$="__intro"], [class$="__body"], [class$="__card-body"],
	[class$="__item-desc"], [class$="__excerpt"], [class$="__subtitle"],
	[class$="__meta"], [class$="__role"], [class$="__author-role"],
	[class$="__date"]
) {
	color: var(--lolo-texto-suave);
}

/* Tarjetas sobre oscuro */
#lolo-main .lolo-banda--oscura :where([class$="__card"], [class$="__item"], [class$="__slide"]),
#lolo-main .lolo-banda--profunda :where([class$="__card"], [class$="__item"], [class$="__slide"]) {
	background: var(--lolo-tarjeta);
	border-color: var(--lolo-linea-tarjeta);
}

/* Titulares sobre claro */
#lolo-main .lolo-banda--clara :where(
	[class$="__heading"], [class$="__title"], [class$="__card-title"],
	[class$="__item-title"], [class$="__name"], [class$="__author-name"],
	[class$="__quote"]
) {
	color: var(--lolo-tinta);
}

/* Cuerpo sobre claro */
#lolo-main .lolo-banda--clara :where(
	[class$="__intro"], [class$="__body"], [class$="__card-body"],
	[class$="__item-desc"], [class$="__excerpt"], [class$="__subtitle"],
	[class$="__meta"], [class$="__role"], [class$="__author-role"],
	[class$="__date"]
) {
	color: var(--lolo-tinta-cuerpo);
}

/* Tarjetas sobre claro */
#lolo-main .lolo-banda--clara :where([class$="__card"], [class$="__item"]) {
	background: #ffffff;
	border-color: rgba(10, 10, 10, 0.08);
}

/* El antetítulo siempre va en oro, caiga donde caiga, y con la caja del
 * diseño: Montserrat 700 a 12px con 3px de separación entre letras. El padre
 * lo trae a 13/600. */
#lolo-main .lolo-banda :where([class$="__kicker"], [class$="__eyebrow"]) {
	color: var(--lolo-oro);
	opacity: 1;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
}

/* --- Tipografía de los bloques heredados --------------------------------- *
 * Los titulares de sección del padre vienen en 700 con tracking negativo, que
 * es su estética; la de la maqueta es Montserrat 600 sin tracking a 36px. Los
 * titulares de tarjeta sí van en 700 y no entran aquí. */

#lolo-main .lolo-banda :where([class$="__heading"]) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--3xl);
	font-weight: 600;
	letter-spacing: normal;
}

/* Entradillas y cuerpos de sección: 17px en la maqueta, 15 en el padre. */
#lolo-main .lolo-banda :where([class$="__intro"], [class$="__body"]) {
	font-size: var(--wp--preset--font-size--prose);
	line-height: 1.7;
}

/* Los textos dentro de tarjeta se quedan más pequeños, como en la maqueta. */
#lolo-main .lolo-banda :where([class$="__card-body"]) {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.7;
}

#lolo-main .lolo-banda :where([class$="__card-title"]) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 700;
	letter-spacing: normal;
}

/* Los títulos de paso de las listas numeradas van en 700 en la maqueta; el
 * padre los deja en 600. */
#lolo-main .lolo-banda :where([class$="__quote"]) {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
	font-style: italic;
}

#lolo-main .lolo-banda :where([class$="__item-title"]) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: normal;
}

/* --- CTA de los bloques del padre ---------------------------------------- *
 * El padre pinta el botón en primario con texto blanco y radio md. En la
 * maqueta es oro con tinta negra y radio 3. */

/* Ojo con el selector: el enlace del CTA lleva DOS clases
 * (`…__cta wp-block-button__link`), así que un `[class$="__cta"]` no lo coge.
 * Se busca por etiqueta, que además deja fuera el <p> envoltorio
 * (`__cta-wrap`) y el <span> de la flecha (`__cta-arrow`). */
#lolo-main a[class*="__cta"] {
	border-radius: var(--lolo-radio-boton);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	background: var(--lolo-oro);
	color: var(--lolo-negro);
}

#lolo-main a[class*="__cta"]:hover,
#lolo-main a[class*="__cta"]:focus-visible {
	background: var(--lolo-oro-claro);
	color: var(--lolo-negro);
}

#lolo-main a[class*="__cta--link"] {
	background: transparent;
	padding: 0;
	color: var(--lolo-oro);
}

#lolo-main a[class*="__cta--link"]:hover {
	background: transparent;
	color: var(--lolo-oro-claro);
	text-decoration: underline;
}

/* Secciones marcadas con .lolo-cta-enlace: el CTA no es un botón, es el
 * enlace en oro con flecha que usa la maqueta en «Quién soy». */
#lolo-main .lolo-cta-enlace a[class*="__cta"] {
	background: transparent;
	padding: 0;
	color: var(--lolo-oro);
	font-size: var(--wp--preset--font-size--md);
}
#lolo-main .lolo-cta-enlace a[class*="__cta"]:hover,
#lolo-main .lolo-cta-enlace a[class*="__cta"]:focus-visible {
	background: transparent;
	color: var(--lolo-oro-claro);
	text-decoration: underline;
}

/* --- Iconos -------------------------------------------------------------- */

#lolo-main .lolo-banda :where([class$="__icon"]),
[class*="wp-block-vidaytu-"].is-bg-default :where([class$="__icon"]) {
	color: var(--lolo-oro);
}

/* --- Ajustes por sección de la portada ----------------------------------- */

/* Titulares de sección sueltos (los core/heading que abren una banda). */
.lolo-seccion-titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--3xl);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-wrap: balance;
	margin-block: 0 var(--wp--preset--spacing--60);
}

/* Dos caminos: la primera tarjeta abre en oro y la segunda en gris, que es lo
 * que distingue en la maqueta la vía clínica de la vía de ponencias. */
#lolo-main .lolo-caminos [class$="__card"]:first-child {
	border-top: 3px solid var(--lolo-oro);
}
#lolo-main .lolo-caminos [class$="__card"]:nth-child(2) {
	border-top: 3px solid var(--lolo-texto-suave);
}

/* Cómo trabajamos: los tres pasos van bajo la foto, en la columna derecha. */
#lolo-main .lolo-como-trabajamos .vidaytu-texto-numbered-list.is-layout-split [class$="__list"] {
	grid-column: 2;
}

/* Cuatro pruebas: en la maqueta es una rejilla de cuatro con filete superior
 * en oro, no la lista vertical que trae el bloque. */
#lolo-main .lolo-pruebas [class$="__list"] {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}
#lolo-main .lolo-pruebas [class$="__item"] {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--lolo-linea-oro-suave);
	border-radius: 0;
	padding: 22px 0 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
#lolo-main .lolo-pruebas [class$="__marker"] {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 800;
	color: var(--lolo-oro);
	background: transparent;
	width: auto;
	height: auto;
	padding: 0;
}
#lolo-main .lolo-pruebas [class$="__item-title"] {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: normal;
}
#lolo-main .lolo-pruebas [class$="__item-desc"] {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.65;
}

/* Faldón: 15/700 arriba y 13 tenue debajo, con 56px de aire en vez de 96, y
 * sin la caja de tarjeta que el resto de bandas oscuras da a los __item. */
#lolo-main .lolo-faldon {
	padding-block: 56px;
}
#lolo-main .lolo-faldon [class$="__item"] {
	background: transparent;
	border: 0;
	padding: 0;
}
#lolo-main .lolo-faldon [class$="__title"] {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: normal;
}
#lolo-main .lolo-faldon [class$="__subtitle"] {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--lolo-texto-tenue);
}

/* Blog: en la maqueta el titular y el enlace «ver todas» comparten fila,
 * alineados por la base. El bloque del padre saca su cabecera y su rejilla en
 * bloques distintos, así que el enlace se sube con un margen negativo del alto
 * de su propia línea. */
.lolo-blog__todas {
	margin: 0;
	text-align: right;
}

#lolo-main .lolo-blog {
	position: relative;
}

#lolo-main .lolo-blog .lolo-blog__todas {
	position: absolute;
	top: var(--lolo-aire-seccion);
	right: var(--lolo-aire-lateral);
	margin: 0;
}

#lolo-main .lolo-blog .lolo-blog__todas .lolo-enlace-oro {
	display: inline-block;
	border: 1px solid rgba(10, 10, 10, 0.4);
	border-radius: var(--lolo-radio-boton);
	padding: 14px 22px;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--lolo-tinta);
	white-space: nowrap;
}
#lolo-main .lolo-blog .lolo-blog__todas .lolo-enlace-oro:hover {
	border-color: var(--lolo-oro);
	color: var(--lolo-oro);
	text-decoration: none;
}

/* Miniaturas a 190 de alto, como en la maqueta. */
#lolo-main .lolo-blog [class*="__image"],
#lolo-main .lolo-blog [class$="__media"] {
	aspect-ratio: auto;
	height: 190px;
}

/* CTA final: 110px de aire y el dragón asomando por abajo a la izquierda,
 * girado -10 grados y al 10% de opacidad, como en la maqueta. */
#lolo-main .lolo-cta-final {
	position: relative;
	overflow: hidden;
	padding-block: 110px;
}

#lolo-main .lolo-cta-final::before {
	content: "";
	position: absolute;
	left: -70px;
	bottom: -110px;
	/* El PNG mide 244x511, así que a 380 de ancho le tocan 796 de alto. */
	width: 380px;
	height: 796px;
	background: url("../img/dragon-oro.png") no-repeat center / contain;
	opacity: 0.1;
	transform: rotate(-10deg);
	pointer-events: none;
}

/* Por encima del dragón, que si no el texto queda por debajo. */
#lolo-main .lolo-cta-final > * {
	position: relative;
}

#lolo-main .lolo-cta-final [class$="__title"] {
	font-weight: 600;
	letter-spacing: normal;
	text-wrap: balance;
}
.lolo-cta-final__nota {
	margin: var(--wp--preset--spacing--40) auto 0;
	max-width: 720px;
	font-size: var(--wp--preset--font-size--base);
	color: var(--lolo-texto-tenue);
}

@media (max-width: 1000px) {
	#lolo-main .lolo-pruebas [class$="__list"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#lolo-main .lolo-como-trabajamos .vidaytu-texto-numbered-list.is-layout-split [class$="__list"] {
		grid-column: auto;
	}
}

@media (max-width: 640px) {
	#lolo-main .lolo-pruebas [class$="__list"] {
		grid-template-columns: minmax(0, 1fr);
	}
	.lolo-blog__todas {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
 * 6. Accesibilidad
 * -------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--lolo-oro);
	color: var(--lolo-negro);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}
.skip-link:focus {
	left: 0;
}

:focus-visible {
	outline: 2px solid var(--lolo-oro);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * 7. Responsive general
 *
 * El aire lateral de 72px sólo tiene sentido en el lienzo de 1440. Por debajo
 * se va cerrando hasta los 20px del artboard móvil (390px).
 * -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	:root {
		--lolo-aire-lateral: 2.5rem;
		--lolo-aire-seccion: 4.5rem;
	}
}

@media (max-width: 640px) {
	:root {
		--lolo-aire-lateral: 1.25rem;
		--lolo-aire-seccion: 3.5rem;
	}
}

/* --------------------------------------------------------------------------
 * 8. Ajustes finos contra la maqueta
 *
 * Estas reglas salen de comparar la captura del sitio contra el render del
 * artboard, sección a sección. Cada una anota qué desviación corrige.
 * -------------------------------------------------------------------------- */

/* --- Quién soy ----------------------------------------------------------- *
 * En la maqueta la columna izquierda es antetítulo + titular + foto, y la
 * derecha sólo el texto largo con su enlace. El bloque del padre reparte por
 * bloques enteros (media a un lado, todo el texto al otro), así que la foto
 * salía sola a la izquierda y el titular a la derecha: espejo de la maqueta.
 *
 * `display: contents` sobre el contenedor de texto disuelve esa caja y sus
 * hijos pasan a ser celdas de la misma rejilla, que es lo que permite colocar
 * el titular junto a la foto sin duplicar el bloque. */

#lolo-main .lolo-quien-soy [class$="__inner"] {
	display: grid;
	grid-template-columns: 400px minmax(0, 1fr);
	grid-template-rows: auto auto auto 1fr;
	column-gap: 72px;
	row-gap: 20px;
	align-items: start;
}

#lolo-main .lolo-quien-soy [class$="__content"] {
	display: contents;
}

#lolo-main .lolo-quien-soy [class$="__kicker"]  { grid-column: 1; grid-row: 1; }
#lolo-main .lolo-quien-soy [class$="__heading"] { grid-column: 1; grid-row: 2; }
#lolo-main .lolo-quien-soy [class$="__media"]   { grid-column: 1; grid-row: 3 / 5; }
#lolo-main .lolo-quien-soy [class$="__body"]    { grid-column: 2; grid-row: 1 / 4; padding-top: 44px; }
#lolo-main .lolo-quien-soy [class$="__cta-wrap"]{ grid-column: 2; grid-row: 4; margin: 0; }

/* La maqueta traía aquí un apaisado de 400x300 y la regla forzaba ese 4:3. Con
 * el retrato vertical de verdad, la foto se quedaba en una franja de 4:3 dentro
 * de un marco 3:4 y dejaba media caja de fondo vacío debajo. Ahora llena el
 * marco que le da el bloque, anclada un poco por encima del centro para que no
 * se coma la cabeza. */
#lolo-main .lolo-quien-soy [class*="__image"] {
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

/* --- Dos caminos --------------------------------------------------------- *
 * La segunda tarjeta es la vía de ponencias: en la maqueta va con botón de
 * contorno, no en oro, para que no compita con la vía clínica. */
#lolo-main .lolo-caminos [class$="__card"]:nth-child(2) a[class*="__cta"] {
	background: transparent;
	border: 1px solid var(--lolo-linea-fuerte);
	color: var(--lolo-texto);
	font-weight: 600;
}
#lolo-main .lolo-caminos [class$="__card"]:nth-child(2) a[class*="__cta"]:hover {
	background: transparent;
	border-color: var(--lolo-oro);
	color: var(--lolo-oro);
}

/* --- Cómo trabajamos ----------------------------------------------------- *
 * En la maqueta la columna izquierda es el texto con su botón y la derecha
 * lleva la foto y, debajo, los tres pasos numerados. Aquí son dos bloques
 * hermanos (imagen+texto y lista numerada), así que los pasos caían debajo de
 * todo y la sección crecía 236px de más.
 *
 * La solución es la misma que en «Quién soy»: se disuelven los envoltorios de
 * ambos bloques con `display: contents` y la propia banda hace de rejilla, de
 * modo que las piezas de los dos bloques comparten cuadrícula. Las columnas
 * van a medida fija (520 + 72 + 704 = los 1296 de contenido) y centradas, que
 * es como se mantiene el aire lateral de 72 sin renunciar al fondo a sangre. */

#lolo-main .lolo-como-trabajamos {
	display: grid;
	grid-template-columns: 520px minmax(0, 704px);
	column-gap: 72px;
	row-gap: 24px;
	justify-content: center;
	align-items: start;
	padding-inline: var(--lolo-aire-lateral);
}

#lolo-main .lolo-como-trabajamos > [class*="wp-block-vidaytu-"],
#lolo-main .lolo-como-trabajamos [class$="__inner"] {
	display: contents;
}

#lolo-main .lolo-como-trabajamos [class$="__content"] {
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#lolo-main .lolo-como-trabajamos [class$="__media"] {
	grid-column: 2;
	grid-row: 1;
	/* `align-self: start` evita que la caja se estire a lo alto de la fila, y
	 * `aspect-ratio: auto` le quita la proporción 4:3 que trae el bloque: sin
	 * eso la caja seguía midiendo el ancho de la columna por 0,75 aunque la
	 * imagen de dentro ya fuese de 240. */
	align-self: start;
	aspect-ratio: auto;
	height: auto;
}

#lolo-main .lolo-como-trabajamos [class$="__list"] {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
}

/* La foto de la maqueta es una banda de 240 de alto, no una imagen 4:3. */
#lolo-main .lolo-como-trabajamos [class*="__image"] {
	aspect-ratio: auto;
	height: 240px;
	min-height: 0;
	box-sizing: border-box;
}

/* Los pasos son texto suelto, sin la caja de tarjeta que la banda da al resto
 * de __item. */
#lolo-main .lolo-como-trabajamos [class$="__item"] {
	background: transparent;
	border: 0;
	padding: 0;
}

/* --- Cuatro pruebas ------------------------------------------------------ */
#lolo-main .lolo-pruebas [class$="__heading"] {
	text-align: center;
	margin-inline: auto;
	/* En la maqueta entra en una sola línea: nada de text-wrap: balance, que
	 * lo partía en dos aunque cupiera. */
	max-width: none;
}

/* --- Testimonios --------------------------------------------------------- *
 * El carrusel del padre saca su viewport fuera del contenedor para que las
 * tarjetas puedan asomar por el borde; aquí la maqueta las alinea con el resto
 * de la página. */
#lolo-main .lolo-testimonios [class$="__viewport"] {
	padding-inline: 0;
	margin-inline: 0;
	/* `hidden`, no `visible`: el carril del carrusel pone las tres tarjetas en
	 * fila y con overflow visible empujaba el ancho del documento a 969px en
	 * móvil, con scroll horizontal en toda la página. */
	overflow: hidden;
}
#lolo-main .lolo-testimonios [class$="__track"] {
	gap: 28px;
}
#lolo-main .lolo-testimonios [class$="__slide"] {
	background: transparent;
	border: 0;
	padding: 0;
}
#lolo-main .lolo-testimonios [class$="__card"] {
	padding: 32px;
	height: 100%;
}

/* --- Blog ---------------------------------------------------------------- *
 * En la maqueta el «Leer más» de cada tarjeta es un enlace en oro, no un botón
 * relleno como en el resto de la web. */
#lolo-main .lolo-blog a[class*="__cta"] {
	background: transparent;
	padding: 0;
	color: var(--lolo-oro);
	font-size: var(--wp--preset--font-size--md);
}
#lolo-main .lolo-blog a[class*="__cta"]:hover {
	background: transparent;
	color: var(--lolo-oro-claro);
	text-decoration: underline;
}

/* --- CTA final ----------------------------------------------------------- *
 * El segundo botón es de contorno en la maqueta; el bloque del padre lo saca
 * como enlace suelto. */
#lolo-main .lolo-cta-final a[class*="__cta-secondary"],
#lolo-main .lolo-cta-final [class$="__actions"] a:last-child:not(:first-child) {
	background: transparent;
	border: 1px solid var(--lolo-linea-fuerte);
	color: var(--lolo-texto);
	font-weight: 600;
	padding: 17px 26px;
	border-radius: var(--lolo-radio-boton);
}
#lolo-main .lolo-cta-final a[class*="__cta-secondary"]:hover,
#lolo-main .lolo-cta-final [class$="__actions"] a:last-child:not(:first-child):hover {
	border-color: var(--lolo-oro);
	color: var(--lolo-oro);
}

/* --- Testimonios: la comilla en oro -------------------------------------- *
 * La maqueta abre cada tarjeta con una comilla tipográfica en Montserrat 800
 * a 34px. El bloque del padre no la dibuja, así que se añade como decoración.
 * Va con aria-hidden implícito (es un ::before), de modo que los lectores de
 * pantalla no la leen. */
#lolo-main .lolo-testimonios [class$="__card"] {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#lolo-main .lolo-testimonios [class$="__card"]::before {
	content: "“";
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 34px;
	line-height: 1;
	color: var(--lolo-oro);
}

#lolo-main .lolo-testimonios [class$="__quote"] {
	flex-grow: 1;
}

#lolo-main .lolo-testimonios [class$="__author-name"] {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

#lolo-main .lolo-testimonios [class$="__author-role"] {
	font-weight: 400;
	color: var(--lolo-texto-tenue);
}

/* --------------------------------------------------------------------------
 * 9. Responsive de las dos secciones con rejilla compartida
 *
 * «Quién soy» y «Cómo trabajamos» disuelven los envoltorios de sus bloques con
 * `display: contents` para repartirse una misma rejilla. Por debajo de 1100 hay
 * que devolver cada cosa a su sitio: si no, las columnas fijas (400/520 px) se
 * salen de la pantalla y el texto acaba con coordenadas negativas.
 * -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

	/* --- Quién soy --- */
	#lolo-main .lolo-quien-soy [class$="__inner"] {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	#lolo-main .lolo-quien-soy [class$="__content"] {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	#lolo-main .lolo-quien-soy :where(
		[class$="__kicker"], [class$="__heading"], [class$="__media"],
		[class$="__body"], [class$="__cta-wrap"]
	) {
		grid-column: auto;
		grid-row: auto;
		padding-top: 0;
	}

	/* Apilada, la foto ocuparía todo el ancho de la banda —673px a 768— y el
	 * archivo mide 333 de origen: se vería blanda. Se limita a algo cercano a
	 * su tamaño real. */
	#lolo-main .lolo-quien-soy [class$="__media"] {
		width: 100%;
		max-width: 420px;
	}

	/* El orden en vertical es el de la maqueta móvil: antetítulo, titular,
	 * foto y luego el texto. */
	#lolo-main .lolo-quien-soy [class$="__media"] {
		order: 1;
	}

	/* --- Cómo trabajamos --- */
	#lolo-main .lolo-como-trabajamos {
		display: block;
		padding-inline: 0;
	}

	#lolo-main .lolo-como-trabajamos > [class*="wp-block-vidaytu-"] {
		display: block;
	}

	#lolo-main .lolo-como-trabajamos [class$="__inner"] {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	#lolo-main .lolo-como-trabajamos [class$="__content"] {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	#lolo-main .lolo-como-trabajamos :where(
		[class$="__content"], [class$="__media"], [class$="__list"]
	) {
		grid-column: auto;
		grid-row: auto;
		align-self: auto;
	}

	#lolo-main .lolo-como-trabajamos [class*="__image"] {
		height: 200px;
	}

	/* --- Blog: el «ver todas» deja de flotar y vuelve al flujo --- */
	#lolo-main .lolo-blog .lolo-blog__todas {
		position: static;
		text-align: left;
		margin-top: var(--wp--preset--spacing--40);
	}

	/* --- CTA final: el dragón estorba en pantallas estrechas --- */
	#lolo-main .lolo-cta-final {
		padding-block: 72px;
	}
	#lolo-main .lolo-cta-final::before {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * 10. Resalte en oro dentro de un titular
 *
 * La maqueta parte algunos titulares en dos: la primera frase en blanco y la
 * segunda en oro. Se marca con un <span class="lolo-oro"> dentro del propio
 * texto del bloque, así que sigue siendo editable desde el editor.
 * -------------------------------------------------------------------------- */
.lolo-oro {
	color: var(--lolo-oro);
}

/* El titular del CTA de cierre es más grande que el resto: 44/700 y no 36/600. */
#lolo-main .lolo-cta-final [class$="__title"] {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.15;
	max-width: 820px;
	margin-inline: auto;
}

#lolo-main .lolo-cta-final [class$="__body"] {
	max-width: 700px;
	margin-inline: auto;
}

@media (max-width: 640px) {
	#lolo-main .lolo-cta-final [class$="__title"] {
		font-size: 30px;
	}
}

/* --------------------------------------------------------------------------
 * 11. Páginas interiores
 * -------------------------------------------------------------------------- */

/* --- Cita de cierre (Mi historia) ---------------------------------------- *
 * Banda profunda con el dragón asomando abajo a la izquierda, la comilla en
 * oro a 44px y la cita en Montserrat 600 a 30px. */

#lolo-main .lolo-cita {
	position: relative;
	overflow: hidden;
	padding-block: 100px;
}

#lolo-main .lolo-cita::before {
	content: "";
	position: absolute;
	left: -70px;
	bottom: -110px;
	/* El PNG mide 244x511: a 360 de ancho le tocan 754 de alto. */
	width: 360px;
	height: 754px;
	background: url("../img/dragon-oro.png") no-repeat center / contain;
	opacity: 0.1;
	transform: rotate(-10deg);
	pointer-events: none;
}

#lolo-main .lolo-cita > * {
	position: relative;
}

#lolo-main .lolo-cita [class$="__mark"] {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	color: var(--lolo-oro);
}

#lolo-main .lolo-cita [class$="__body"],
#lolo-main .lolo-cita [class$="__body"] p {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.45;
	max-width: 940px;
	margin-inline: auto;
	color: var(--lolo-texto);
	text-wrap: balance;
	font-style: normal;
}

/* --- Cierre de página ---------------------------------------------------- */

#lolo-main .lolo-cierre [class$="__title"] {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	max-width: 760px;
	margin-inline: auto;
	letter-spacing: normal;
	text-wrap: balance;
}

/* El segundo botón del cierre va de contorno, como en toda la web. */
#lolo-main .lolo-cierre a[class*="__cta-secondary"],
#lolo-main .lolo-cierre [class$="__actions"] a:last-child:not(:first-child) {
	background: transparent;
	border: 1px solid var(--lolo-linea-fuerte);
	color: var(--lolo-texto);
	font-weight: 600;
	padding: 17px 26px;
	border-radius: var(--lolo-radio-boton);
}
#lolo-main .lolo-cierre a[class*="__cta-secondary"]:hover,
#lolo-main .lolo-cierre [class$="__actions"] a:last-child:not(:first-child):hover {
	border-color: var(--lolo-oro);
	color: var(--lolo-oro);
}

@media (max-width: 900px) {
	#lolo-main .lolo-cita {
		padding-block: 64px;
	}
	#lolo-main .lolo-cita::before {
		display: none;
	}
	#lolo-main .lolo-cita [class$="__body"],
	#lolo-main .lolo-cita [class$="__body"] p {
		font-size: 22px;
	}
	#lolo-main .lolo-cierre [class$="__title"] {
		font-size: 28px;
	}
}

/* --- Tratamiento ---------------------------------------------------------- */

/* La insignia va dentro del titular de la tarjeta, marcada con un <span>, para
 * que siga siendo editable desde el editor sin necesidad de un bloque a medida
 * con campos propios. */
.lolo-insignia {
	display: inline-block;
	margin-left: 10px;
	vertical-align: middle;
	background: rgba(193, 159, 32, 0.15);
	color: var(--lolo-oro);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1px;
	padding: 5px 10px;
	border-radius: 99px;
	white-space: nowrap;
}

/* Qué tratamos: las tres tarjetas abren con un filete en oro. */
#lolo-main .lolo-que-tratamos [class$="__card"] {
	border-top: 3px solid var(--lolo-oro);
}

/* La tarjeta del ingreso es la que se quiere destacar. */
#lolo-main .lolo-modalidades [class$="__card"]:nth-child(2) {
	border-color: var(--lolo-linea-oro);
}

/* Las cinco fases: una tira al pie de las modalidades, con el rótulo en oro a
 * la izquierda y las fases seguidas a la derecha.
 *
 * Va a lo ancho del contenido igual que la rejilla de tarjetas de encima: como
 * es un párrafo suelto dentro de la banda, sin el `max-width` y el aire lateral
 * se quedaba en 839px y descuadraba respecto a las tarjetas. */
#lolo-main .lolo-fases {
	/* El ancho lo pone el `.lolo-wrap` que la envuelve; aquí sólo el aire de
	 * separación con la rejilla de tarjetas. */
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 28px 34px;
	display: flex;
	align-items: center;
	gap: 24px;
	background: var(--lolo-banda);
	border: 1px solid var(--lolo-linea);
	border-radius: var(--lolo-radio-tarjeta);
}

.lolo-fases__rotulo {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	color: var(--lolo-oro);
	white-space: nowrap;
}

.lolo-fases__lista {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.7;
	color: var(--lolo-texto-suave);
}

/* Variante fiel: las fases van seguidas, con el numeral delante y un punto
 * medio entre una y otra. */
.lolo-fase {
	display: inline;
}

.lolo-fase b {
	font-weight: 400;
}

.lolo-fase b::after {
	content: ". ";
}

/* Carácter literal y no el escape hexadecimal del espacio duro: los escapes hexadecimales de CSS
 * se han leído mal más de una vez en este proyecto y acaban imprimiéndose. */
.lolo-fase + .lolo-fase::before {
	content: " · ";
	color: var(--lolo-texto-tenue);
}

@media (max-width: 900px) {
	#lolo-main .lolo-fases {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 24px;
	}
	.lolo-fases__rotulo {
		white-space: normal;
	}
}

/* Las FAQs son tarjetas siempre abiertas, como en la maqueta: sin acordeón. */
#lolo-main .lolo-faqs [class$="__card"] {
	padding: 28px;
	gap: 10px;
}

#lolo-main .lolo-faqs [class$="__card-title"] {
	font-size: var(--wp--preset--font-size--lg);
}

#lolo-main .lolo-faqs [class$="__card-body"] {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.65;
}

@media (max-width: 900px) {
	.lolo-insignia {
		display: inline-block;
		margin: 6px 0 0;
	}
}

/* --- Bloque de «escríbenos» (Tratamiento) ------------------------------------ *
 * La maqueta lo resuelve en 342px: dos mitades a sangre, la del texto sobre la
 * banda profunda y 72px de aire. El bloque del padre trae bastante más. */

#lolo-main .lolo-escribir {
	border-block: 1px solid var(--lolo-linea);
	padding-block: 0;
}

#lolo-main .lolo-escribir [class$="__content"] {
	background: var(--lolo-banda);
	padding: 72px;
	gap: 16px;
}

/* La mitad de la foto no debe marcar el alto: con la proporción 4:3 del bloque
 * la imagen medía 534 y estiraba la sección. Manda el texto. */
#lolo-main .lolo-escribir [class$="__media"],
#lolo-main .lolo-escribir [class*="__image"] {
	aspect-ratio: auto;
	height: 100%;
	min-height: 0;
}

#lolo-main .lolo-escribir [class$="__title"] {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--lolo-texto);
}

#lolo-main .lolo-escribir [class$="__body"] {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.7;
	color: var(--lolo-texto-suave);
}

@media (max-width: 900px) {
	#lolo-main .lolo-escribir [class$="__content"] {
		padding: 44px var(--lolo-aire-lateral);
	}
}

/* --- Contacto ------------------------------------------------------------ */

/* Formulario y columna lateral comparten rejilla: 720 + 72 + 380 son los
 * 1172 que ocupa la sección en la maqueta dentro de los 1296 de contenido. */
#lolo-main .lolo-contacto-form {
	display: grid;
	grid-template-columns: minmax(0, 720px) 380px;
	column-gap: 72px;
	justify-content: center;
	align-items: start;
	padding-inline: var(--lolo-aire-lateral);
}

#lolo-main .lolo-contacto-form > * {
	min-width: 0;
}

/* La columna lateral son dos tarjetas apiladas, no una rejilla de dos. */
#lolo-main .lolo-lateral [class$="__inner"] {
	max-width: none;
	padding-inline: 0;
}

#lolo-main .lolo-lateral [class$="__grid"] {
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

#lolo-main .lolo-lateral [class$="__card"] {
	padding: 30px;
	border-radius: 6px;
	gap: 14px;
}

#lolo-main .lolo-lateral [class$="__card-title"] {
	font-size: var(--wp--preset--font-size--prose);
	font-weight: 700;
}

#lolo-main .lolo-lateral [class$="__card-body"] {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
}

/* Los pasos numerados dentro de la tarjeta: el número en oro oscuro, que es el
 * que la maqueta usa sobre blanco para que no cante. */
.lolo-paso {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-top: 14px;
}

.lolo-paso b {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--base);
	color: #9a7d14;
	flex-shrink: 0;
}

.lolo-perfiles {
	display: block;
	margin-top: 10px;
	line-height: 1.9;
}

.lolo-perfiles b {
	color: #9a7d14;
	font-weight: 600;
}

/* Los canales de arriba: en la maqueta llevan borde en oro. */
#lolo-main .lolo-canales [class$="__card"] {
	border-color: var(--lolo-linea-oro-suave);
	border-radius: 6px;
	padding: 34px;
}

/* Nota de emergencia: información de seguridad, con más peso que una nota al
 * pie pero sin gritar. */
.lolo-emergencia {
	max-width: 1000px;
	margin-inline: auto;
	text-align: center;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
	color: var(--lolo-texto-suave);
}

.lolo-emergencia strong {
	color: var(--lolo-oro);
}

#lolo-main .lolo-emergencia-banda {
	padding-block: 48px;
}

@media (max-width: 1100px) {
	#lolo-main .lolo-contacto-form {
		display: block;
		padding-inline: 0;
	}
	#lolo-main .lolo-lateral {
		margin-top: 40px;
	}
	#lolo-main .lolo-lateral [class$="__inner"] {
		padding-inline: var(--lolo-aire-lateral);
	}
	#lolo-main .lolo-contacto-form .lolo-form {
		margin-inline: auto;
		padding-inline: var(--lolo-aire-lateral);
		max-width: none;
	}
}

/* Dónde estamos: tres fichas apiladas a la izquierda y el mapa a la derecha,
 * como en la maqueta, en vez de la rejilla de tres del bloque. */
#lolo-main .lolo-donde {
	display: grid;
	grid-template-columns: minmax(0, 520px) minmax(0, 704px);
	column-gap: 72px;
	justify-content: center;
	align-items: start;
	padding-inline: var(--lolo-aire-lateral);
}

#lolo-main .lolo-donde > [class*="wp-block-vidaytu-"] {
	grid-column: 1;
}

#lolo-main .lolo-donde [class$="__inner"] {
	max-width: none;
	padding-inline: 0;
}

#lolo-main .lolo-donde [class$="__grid"] {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

#lolo-main .lolo-donde .lolo-mapa {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	min-height: 340px;
	align-self: stretch;
}

/* Nota de emergencia: filete en oro a la izquierda para que se lea como aviso
 * y no como una nota al pie más. */
#lolo-main .lolo-emergencia-banda .lolo-emergencia {
	max-width: var(--lolo-ancho);
	margin-inline: auto;
	padding: 20px 24px 20px 22px;
	border-left: 3px solid var(--lolo-oro);
	background: rgba(193, 159, 32, 0.06);
	text-align: left;
}

@media (max-width: 1100px) {
	#lolo-main .lolo-donde {
		display: block;
		padding-inline: 0;
	}
	#lolo-main .lolo-donde [class$="__inner"] {
		padding-inline: var(--lolo-aire-lateral);
	}
	#lolo-main .lolo-donde [class$="__grid"] {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
	#lolo-main .lolo-donde .lolo-mapa {
		margin: 32px var(--lolo-aire-lateral) 0;
		min-height: 240px;
	}
}

/* --- Ponencias ------------------------------------------------------------ */

/* El selector de público del hero no lleva línea inferior ni etiqueta a la
 * izquierda: va centrado, justo bajo la cabecera. */
#lolo-main .lolo-selector {
	border-bottom: 0;
}

#lolo-main .lolo-selector .lolo-anclas__inner {
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding-top: 0;
	padding-bottom: 72px;
}

#lolo-main .lolo-selector .lolo-anclas__lista {
	justify-content: center;
}

#lolo-main .lolo-selector .lolo-anclas__pildora {
	border-color: var(--lolo-linea-oro-suave);
	color: var(--lolo-texto);
	font-size: var(--wp--preset--font-size--base);
	padding: 13px 20px;
}

/* En la lista de ponencias el público va como antetítulo dentro del titular, y
 * la etiqueta «gratuita» cierra el cuerpo. */
.lolo-publico {
	display: block;
	margin-bottom: 8px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 3px;
	color: var(--lolo-oro);
}

.lolo-gratuita {
	display: inline-block;
	margin-top: 12px;
	background: rgba(193, 159, 32, 0.15);
	color: var(--lolo-oro);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1px;
	padding: 5px 10px;
	border-radius: 99px;
}

#lolo-main .lolo-ponencias-lista [class$="__card-title"] {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.35;
}

/* La tarjeta del dossier: una fila con el texto a la izquierda y el botón a la
 * derecha, no la lista de descargas por defecto del bloque. */
#lolo-main .lolo-dossier {
	margin-top: var(--wp--preset--spacing--50);
}

#lolo-main .lolo-dossier [class$="__inner"] {
	padding-inline: 0;
	max-width: none;
}

/* --- Fichas de ponencia --------------------------------------------------- */

/* El desglose del contenido va en dos columnas, como en la maqueta, no en la
 * lista vertical que trae el bloque. */
#lolo-main .lolo-desglose [class$="__list"] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
	row-gap: 22px;
}

#lolo-main .lolo-desglose [class$="__item"] {
	background: transparent;
	border: 0;
	padding: 0;
}

/* Los dos argumentos de cierre no llevan etiqueta, así que la columna de la
 * izquierda queda sólo para el titular. */
#lolo-main .lolo-argumentos [class$="__etiqueta"]:empty {
	display: none;
}

@media (max-width: 900px) {
	#lolo-main .lolo-desglose [class$="__list"] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Blog ----------------------------------------------------------------- */

/* Filtros por categoría: el bloque core/categories saca una <ul>; aquí se
 * convierte en la fila de píldoras de la maqueta. */
#lolo-main .lolo-filtros {
	padding-block: 0;
	border-bottom: 1px solid var(--lolo-linea);
}

#lolo-main .lolo-filtros__lista {
	max-width: var(--lolo-ancho);
	margin-inline: auto;
	padding: 0 var(--lolo-aire-lateral) 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
}

#lolo-main .lolo-filtros__lista li {
	margin: 0;
}

#lolo-main .lolo-filtros__lista a {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 99px;
	padding: 9px 18px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--lolo-texto-suave);
	text-decoration: none;
}

#lolo-main .lolo-filtros__lista a:hover,
#lolo-main .lolo-filtros__lista a:focus-visible {
	border-color: var(--lolo-oro);
	color: var(--lolo-oro);
}

/* El contador de entradas que añade el bloque estorba en una fila de píldoras. */
#lolo-main .lolo-filtros__lista .post-count {
	display: none;
}

/* Listado */
#lolo-main .lolo-listado .wp-block-query {
	max-width: var(--lolo-ancho);
	margin-inline: auto;
	padding-inline: var(--lolo-aire-lateral);
}

#lolo-main .lolo-listado__rejilla {
	gap: 28px;
}

#lolo-main .lolo-listado__imagen img {
	border-radius: var(--lolo-radio-tarjeta);
}

#lolo-main .lolo-listado__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	margin-block: 10px 8px;
}

#lolo-main .lolo-listado__titulo a {
	color: var(--lolo-tinta);
	text-decoration: none;
}

#lolo-main .lolo-listado__titulo a:hover {
	color: var(--lolo-oro);
}

#lolo-main .lolo-listado__extracto {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.65;
	color: var(--lolo-tinta-cuerpo);
}

#lolo-main .lolo-listado__paginacion {
	margin-top: var(--wp--preset--spacing--60);
	gap: 10px;
}

#lolo-main .lolo-listado__paginacion a,
#lolo-main .lolo-listado__paginacion span {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	color: var(--lolo-tinta-cuerpo);
	text-decoration: none;
	padding: 8px 12px;
	border-radius: var(--lolo-radio-boton);
}

#lolo-main .lolo-listado__paginacion .current {
	background: var(--lolo-oro);
	color: var(--lolo-negro);
}

/* Suscripción */
#lolo-main .lolo-suscripcion [class$="__inner"] {
	max-width: 820px;
	text-align: center;
}

/* En las fichas, el desglose son tarjetas blancas con el número en oro y el
 * título y la descripción en la misma línea, no texto suelto. */
#lolo-main .lolo-desglose [class$="__item"] {
	background: #ffffff;
	border: 1px solid rgba(10, 10, 10, 0.1);
	border-radius: var(--lolo-radio-tarjeta);
	padding: 20px 22px;
	gap: 12px;
}

#lolo-main .lolo-desglose [class$="__marker"] {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--lolo-oro);
	background: transparent;
	width: auto;
	height: auto;
	padding: 0;
}

#lolo-main .lolo-desglose [class$="__item-title"] {
	display: inline;
	font-size: var(--wp--preset--font-size--lg);
}

#lolo-main .lolo-desglose [class$="__item-desc"] {
	display: inline;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
}

/* Los dos argumentos van uno al lado del otro. */
#lolo-main .lolo-argumentos .lolo-actos__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 72px;
}

#lolo-main .lolo-argumentos .lolo-actos__acto {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

#lolo-main .lolo-argumentos .lolo-actos__acto + .lolo-actos__acto {
	border-top: 0;
	padding-top: 0;
}

@media (max-width: 900px) {
	#lolo-main .lolo-argumentos .lolo-actos__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}
}

/* --- Newsletter ----------------------------------------------------------- *
 * El panel del bloque del padre trae un gris claro escrito a pelo (#f5f5f5),
 * no un token, así que sobre banda oscura quedaba texto claro sobre fondo
 * claro: ilegible. Aquí se le da el fondo de tarjeta de esta web. */

#lolo-main .lolo-banda--profunda [class$="__panel"],
#lolo-main .lolo-banda--oscura [class$="__panel"] {
	background: var(--lolo-tarjeta);
	border: 1px solid var(--lolo-linea-tarjeta);
	border-radius: var(--lolo-radio-tarjeta);
}

/* Los campos del formulario del padre heredan el gris del panel; sobre oscuro
 * necesitan fondo propio y tinta oscura para poder leer lo que se escribe. */
#lolo-main .lolo-banda [class*="newsletter"] :where(input[type="email"], input[type="text"]) {
	background: #ffffff;
	color: var(--lolo-tinta);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--lolo-radio-boton);
	padding: 15px 16px;
}

#lolo-main .lolo-banda [class*="newsletter"] :where(label, [class$="__consent"], [class$="__option"]) {
	color: var(--lolo-texto-suave);
}

#lolo-main .lolo-banda [class*="newsletter"] [class$="__submit"] {
	background: var(--lolo-oro);
	color: var(--lolo-negro);
	border-radius: var(--lolo-radio-boton);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

/* --- Las 5 fases: variante en pasos --------------------------------------- *
 * Alternativa a la franja de una línea de la maqueta. Reparte las cinco fases
 * en columnas, con el numeral en oro y un filete arriba, que es como esta web
 * resuelve el resto de secuencias numeradas («Cuatro razones», «Cómo
 * trabajamos»). Se activa cambiando la clase en inc/contenido-paginas.php. */

#lolo-main .lolo-fases-wrap.es-pasos .lolo-fases {
	display: block;
	background: transparent;
	border: 0;
	padding: 0;
}

#lolo-main .lolo-fases-wrap.es-pasos .lolo-fases__rotulo {
	display: block;
	margin-bottom: 22px;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 3px;
	text-transform: uppercase;
	white-space: normal;
}

#lolo-main .lolo-fases-wrap.es-pasos .lolo-fases__lista {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 24px;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
	color: var(--lolo-texto-suave);
}

#lolo-main .lolo-fases-wrap.es-pasos .lolo-fase {
	display: block;
	border-top: 1px solid var(--lolo-linea-oro-suave);
	padding-top: 16px;
}

#lolo-main .lolo-fases-wrap.es-pasos .lolo-fase + .lolo-fase::before {
	content: none;
}

#lolo-main .lolo-fases-wrap.es-pasos .lolo-fase b::after {
	content: none;
}

#lolo-main .lolo-fases-wrap.es-pasos .lolo-fase b {
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--md);
	color: var(--lolo-oro);
}

@media (max-width: 1000px) {
	#lolo-main .lolo-fases-wrap.es-pasos .lolo-fases__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	#lolo-main .lolo-fases-wrap.es-pasos .lolo-fases__lista {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Lo que pasa en la sala (Ponencias) ---------------------------------- *
 * Los tres apuntes van sin etiqueta, así que la columna izquierda queda sólo
 * para el titular. */
#lolo-main .lolo-en-la-sala [class$="__etiqueta"]:empty {
	display: none;
}

/* Variante a la izquierda del titular de sección suelto. El de la portada va
 * centrado; en «Lo que pasa en la sala» acompaña a un texto alineado a la
 * izquierda y centrado quedaría descolgado. */
.lolo-seccion-titulo--izq {
	text-align: left;
	margin-inline: 0;
	max-width: 820px;
}

#lolo-main .lolo-en-la-sala .lolo-seccion-titulo {
	max-width: var(--lolo-ancho);
	margin-inline: auto;
	padding-inline: var(--lolo-aire-lateral);
	box-sizing: border-box;
}


/* ==========================================================================
 * REPASO RESPONSIVE
 * Correcciones de la revisión a 320 / 390 / 768 / 1024 / 1280 / 1440.
 * Cada regla lleva anotado el desborde concreto que corrige.
 * ========================================================================== */

/* 1. Selector de público de Ponencias -------------------------------------- *
 * `.lolo-anclas__inner` pasa a columna en esta variante, y con
 * `align-items: center` el <ul> deja de estirarse: coge el ancho de su
 * contenido y se salía 29px a 390 y 99px a 320. Son tres píldoras, no un
 * índice largo, así que envuelven mejor de lo que se deslizan: deslizando, la
 * tercera queda escondida sin ninguna pista de que está ahí. */
@media (max-width: 900px) {
	#lolo-main .lolo-selector .lolo-anclas__lista {
		max-width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		overflow-x: visible;
	}
}

/* 2. Botón del CTA de cierre ------------------------------------------------ *
 * El bloque del padre lo fija con `white-space: nowrap`, y
 * «Escribir a comunicacion@lolodrago.com» medía 320px dentro de 280
 * disponibles: se salía 20px en seis páginas a 320. */
@media (max-width: 640px) {
	/* Dos clases en el mismo elemento (`…__cta wp-block-button__link`), así que
	 * `[class$=]` no engancha: tiene que ser `[class*=]`. */
	#lolo-main [class*="cta-banner"] a[class*="__cta"] {
		white-space: normal;
		text-align: center;
	}
}

/* 3. Titular del hero con tarjeta ------------------------------------------ *
 * A 50px, «Encontremos» pide 346px de min-content y la columna sólo tenía
 * 305: desbordaba Tratamiento (46px) y la ficha educativa (18px) a 320. */
@media (max-width: 480px) {
	#lolo-main .lolo-reserva__titulo {
		font-size: clamp(1.75rem, 8.4vw, 2.5rem);
	}
}

/* 4. Palabras que no se pueden partir -------------------------------------- *
 * `comunicacion@lolodrago.com` es un solo token de 291px y hacía desbordar la
 * rejilla de canales de Contacto a 320. `anywhere` —y no `break-word`— porque
 * sólo el primero cuenta para el tamaño mínimo intrínseco, que es justo lo que
 * estaba forzando el desborde. Por debajo de 600px, partir un correo siempre
 * es mejor que una barra de desplazamiento horizontal. */
@media (max-width: 600px) {
	#lolo-main,
	.lolo-footer {
		overflow-wrap: anywhere;
	}

	/* La rejilla de tarjetas del padre deja `1fr` (mínimo automático) en su
	 * ruptura a una columna; con el mínimo a 0 ya no la estira el contenido. */
	#lolo-main [class*="icon-cards"] [class$="__grid"] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 5. Campos de formulario en móvil ----------------------------------------- *
 * Con menos de 16px, Safari en iOS hace zoom automático al enfocar un campo y
 * ya no vuelve atrás: el usuario se queda con la página ampliada a mitad del
 * formulario. Medían 15px. */
@media (max-width: 782px) {
	#lolo-main :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
	.lolo-footer :where(input, select, textarea) {
		font-size: 1rem;
	}
}

/* 6. Zonas pulsables ------------------------------------------------------- *
 * Los enlaces sueltos medían entre 19 y 25px de alto. Cumplen el mínimo de
 * 24px de la WCAG por separación, pero con el pulgar se fallan. En móvil se
 * les da alto real sin tocar su aspecto en escritorio. */
@media (max-width: 600px) {
	#lolo-main :where([class*="icon-cards"], [class*="latest-grid"]) a[class*="__cta"],
	#lolo-main .lolo-comparativa__enlace,
	#lolo-main [class*="__read-more"] {
		min-height: 44px;
		align-items: center;
	}

	/* En el pie, un poco de aire vertical en cada fila: pasan de 32px de
	 * separación entre centros a 40. */
	.lolo-footer :where(.lolo-footer__lista, ul) a {
		display: inline-block;
		padding-block: 5px;
	}
}

/* 7. Bandas de texto corrido ----------------------------------------------- *
 * La entrada del blog y las páginas legales no usan bloques con `__inner`:
 * son grupos «constrained», que centran el contenido pero no reservan aire
 * lateral. Por debajo de su `contentSize` el texto llegaba a x=0, pegado al
 * borde de la pantalla, en toda la entrada y en el h1. */
#lolo-main :where(.lolo-entrada__cabecera, .lolo-entrada__portada, .lolo-entrada__cuerpo, .lolo-texto-corrido) {
	padding-inline: var(--lolo-aire-lateral);
}

/* 8. Bloques de núcleo dentro de una banda clara --------------------------- *
 * Las reglas de color de banda clara enganchan por el sufijo de clase de los
 * bloques (`__heading`, `__body`…). Un `core/heading` suelto no lleva ninguna,
 * así que se quedaba con el color de titular del theme.json —pensado para el
 * fondo negro— y salía a 1,04:1 sobre la banda: invisible. Le pasaba al H2 de
 * «Qué ocurre durante una charla sobre adicciones».
 *
 * Se limita a los hijos directos de la banda y al contenido de entrada para no
 * pisar los colores propios de los bloques (antetítulos en oro, etc.). */
#lolo-main .lolo-banda--clara > :where(h1, h2, h3, h4, h5, h6),
#lolo-main .lolo-banda--clara .entry-content :where(h1, h2, h3, h4, h5, h6) {
	color: var(--lolo-tinta);
}

#lolo-main .lolo-banda--clara > :where(p, ul, ol, dl, blockquote, table),
#lolo-main .lolo-banda--clara .entry-content :where(p, ul, ol, dl, blockquote, table) {
	color: var(--lolo-tinta-cuerpo);
}

/* 9. Costura entre bandas en la entrada del blog --------------------------- *
 * La regla que mata los 24px del layout de flujo estaba puesta sobre
 * `.entry-content > *`, que cubre las páginas montadas por el importador. En
 * single.html las bandas cuelgan directamente de <main>, así que entre el
 * cuerpo del artículo y «Otros artículos» quedaba una tira negra de fondo. */
#lolo-main > * {
	margin-block: 0;
}

/* 10. Testimonios en móvil ------------------------------------------------- *
 * El carrusel del padre va sin flechas ni puntos (`showArrows`/`showDots` a
 * false), que en escritorio es correcto porque caben las tres a la vez. En
 * móvil la pista sigue siendo de tres columnas dentro de un viewport con
 * `overflow: hidden`: se ve la primera, un trozo de la segunda y la tercera no
 * hay forma de alcanzarla. Apiladas se leen las tres. */
@media (max-width: 1024px) {
	#lolo-main [class*="testimonials"] [class$="__viewport"] {
		overflow: visible;
	}

	/* Hasta 1024 el padre reparte la pista en dos columnas y la tercera queda
	 * fuera; envolviendo en filas caben las tres (2 + 1). */
	#lolo-main [class*="testimonials"] [class$="__track"] {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		transform: none;
	}
}

@media (max-width: 640px) {
	#lolo-main [class*="testimonials"] [class$="__track"] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 11. Pista de que la tira de anclas se desliza ---------------------------- *
 * En «Mi historia» quedan 394px de píldoras fuera de pantalla sin ningún aviso
 * de que hay más a la derecha. El degradado sobre el último tramo lo insinúa;
 * si la tira cabe entera, el degradado cae sobre el fondo y no se ve. */
@media (max-width: 900px) {
	#lolo-main .lolo-anclas:not(.lolo-selector) .lolo-anclas__inner {
		position: relative;
	}

	#lolo-main .lolo-anclas:not(.lolo-selector) .lolo-anclas__inner::after {
		content: "";
		position: absolute;
		inset-block: 0;
		right: 0;
		width: 36px;
		pointer-events: none;
		background: linear-gradient(to right, rgba(10, 10, 10, 0), var(--lolo-negro));
	}
}

/* 12. Marcador de foto de la cabecera editorial ---------------------------- *
 * En la variante editorial la imagen es una capa a sangre detrás del texto.
 * Con la foto real no hay problema —el velo la oscurece— pero mientras es un
 * marcador, su texto queda centrado justo detrás del titular y a 390px se lee
 * encima de «Antes de ser terapeuta, fui paciente». Se sube al borde superior,
 * que ahí no hay nada. */
#lolo-main .lolo-cabecera.is-editorial .lolo-cabecera__media {
	align-items: flex-end;
	justify-content: flex-end;
}

#lolo-main .lolo-cabecera.is-editorial .lolo-cabecera__marcador {
	margin: 0 16px 8px;
	max-width: 60%;
	text-align: right;
	font-size: 0.625rem;
}

/* Por debajo de 640 el texto ocupa la cabecera entera y el marcador no tiene
 * dónde ponerse sin cruzarse con la entradilla. El marco oscuro ya dice por sí
 * solo que ahí va una foto. Con la foto real esta regla es indiferente. */
@media (max-width: 640px) {
	#lolo-main .lolo-cabecera.is-editorial .lolo-cabecera__marcador {
		display: none;
	}
}

/* 13. Cabecera editorial en pantallas estrechas ---------------------------- *
 * El velo va `position: absolute; bottom: 0`, así que no cuenta para el alto de
 * la cabecera. A 320px el texto ocupa más de los 380px de `min-height` y crece
 * hacia arriba: los primeros 43px del titular quedaban cortados por el
 * `overflow: hidden`. En relativo entra en el flujo y la cabecera crece con él;
 * el z-index lo mantiene por encima de la capa de imagen, que es absoluta. */
@media (max-width: 900px) {
	#lolo-main .lolo-cabecera.is-editorial .lolo-cabecera__velo {
		position: relative;
		z-index: 1;
	}
}


/* ==========================================================================
 * LA ENTRADA DEL BLOG
 * La maqueta no traía artboard de entrada individual, así que estaba montada
 * con piezas por defecto: cabecera vacía, cuerpo sin componer y nada al final.
 * Esto le da la misma lengua que el resto del sitio.
 * ========================================================================== */

/* ---- Cabecera ----------------------------------------------------------- */

#lolo-main .lolo-entrada__cabecera {
	padding-block: 72px 44px;
}

#lolo-main .lolo-entrada__categoria a {
	color: var(--lolo-oro);
	text-decoration: none;
}

#lolo-main .lolo-entrada__categoria a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

#lolo-main .lolo-entrada__titulo {
	margin-block: 18px 22px;
	color: var(--lolo-texto);
	font-size: clamp(2rem, 1.25rem + 2.6vw, 3.125rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: normal;
	text-wrap: balance;
}

/* ---- Portada ------------------------------------------------------------ */

/* El grupo existe siempre, pero sin imagen destacada se queda a cero para no
 * dejar una banda negra de relleno entre la cabecera y el cuerpo. */
#lolo-main .lolo-entrada__portada {
	padding-block: 0 0;
}

#lolo-main .lolo-entrada__portada:has(img) {
	padding-bottom: 56px;
}

#lolo-main .lolo-entrada__imagen img {
	width: 100%;
	height: auto;
	border-radius: var(--lolo-radio-tarjeta, 4px);
	display: block;
}

/* ---- Cuerpo ------------------------------------------------------------- */

#lolo-main .lolo-entrada__cuerpo {
	padding-block: 64px 72px;
}

/* La medida de lectura manda sobre el ancho de banda: 68-72 caracteres. */
#lolo-main .lolo-entrada__cuerpo .entry-content {
	color: var(--lolo-tinta-cuerpo);
	font-size: 1.0625rem;
	line-height: 1.75;
}

#lolo-main .lolo-entrada__cuerpo .entry-content > * {
	margin-block: 0 1.4em;
}

/* El primer párrafo hace de entradilla. */
#lolo-main .lolo-entrada__cuerpo .entry-content > p:first-child {
	color: var(--lolo-tinta);
	font-size: 1.3125rem;
	line-height: 1.6;
	margin-bottom: 1.5em;
}

#lolo-main .lolo-entrada__cuerpo .entry-content :where(h2, h3, h4) {
	color: var(--lolo-tinta);
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: normal;
	line-height: 1.2;
	text-wrap: balance;
}

#lolo-main .lolo-entrada__cuerpo .entry-content h2 {
	margin-block: 2em 0.7em;
	font-size: 1.75rem;
	font-weight: 700;
}

#lolo-main .lolo-entrada__cuerpo .entry-content h3 {
	margin-block: 1.8em 0.6em;
	font-size: 1.3125rem;
	font-weight: 700;
}

#lolo-main .lolo-entrada__cuerpo .entry-content h4 {
	margin-block: 1.6em 0.5em;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#lolo-main .lolo-entrada__cuerpo .entry-content :where(ul, ol) {
	padding-left: 1.35em;
	margin-bottom: 1.5em;
}

#lolo-main .lolo-entrada__cuerpo .entry-content li {
	margin-bottom: 0.5em;
	padding-left: 0.25em;
}

#lolo-main .lolo-entrada__cuerpo .entry-content li::marker {
	color: var(--lolo-oro);
	font-weight: 700;
}

#lolo-main .lolo-entrada__cuerpo .entry-content strong {
	color: var(--lolo-tinta);
	font-weight: 700;
}

#lolo-main .lolo-entrada__cuerpo .entry-content a:not(.wp-block-button__link) {
	color: #7a6310;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

#lolo-main .lolo-entrada__cuerpo .entry-content a:not(.wp-block-button__link):hover {
	text-decoration-thickness: 2px;
}

/* La cita destacada, con el filete en oro del resto del sitio. */
#lolo-main .lolo-entrada__cuerpo .entry-content blockquote {
	margin-block: 2em;
	padding: 4px 0 4px 26px;
	border-left: 2px solid var(--lolo-oro);
	color: var(--lolo-tinta);
	font-size: 1.1875rem;
	font-style: italic;
	line-height: 1.6;
}

#lolo-main .lolo-entrada__cuerpo .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

#lolo-main .lolo-entrada__cuerpo .entry-content blockquote cite {
	display: block;
	margin-top: 12px;
	color: var(--lolo-tinta-suave, #4a4842);
	font-size: 0.875rem;
	font-style: normal;
}

/* Las imágenes del artículo respiran fuera de la medida de lectura. */
#lolo-main .lolo-entrada__cuerpo .entry-content :where(figure, .wp-block-image) img {
	width: 100%;
	height: auto;
	border-radius: var(--lolo-radio-tarjeta, 4px);
	display: block;
}

#lolo-main .lolo-entrada__cuerpo .entry-content figcaption {
	margin-top: 10px;
	color: var(--lolo-tinta-suave, #4a4842);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* El separador del núcleo viene con `max-width: 100px` y centrado; aquí hace de
 * pausa entre tramos del artículo, así que va de lado a lado de la columna. */
#lolo-main .lolo-entrada__cuerpo .entry-content hr {
	width: 100%;
	max-width: none;
	margin-block: 2.5em;
	border: 0;
	border-top: 1px solid rgba(10, 10, 10, 0.12);
}

/* En móvil el título del artículo hace la miga muy larga: se corta con puntos
 * suspensivos y el recorrido sigue legíble. */
@media (max-width: 640px) {
	#lolo-main .lolo-breadcrumb__item:last-child {
		max-width: 62vw;
		overflow: hidden;
	}

	/* Los puntos suspensivos tienen que ir en el elemento que lleva el texto,
	 * no en el <li>: dentro hay un <span> y el recorte se quedaba a medias. */
	#lolo-main .lolo-breadcrumb__item:last-child > :last-child {
		display: inline-block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: bottom;
	}
}

#lolo-main .lolo-entrada__cuerpo .entry-content :where(code, kbd, samp) {
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(10, 10, 10, 0.06);
	font-size: 0.9em;
}

#lolo-main .lolo-entrada__cuerpo .entry-content pre {
	padding: 18px 20px;
	border-radius: var(--lolo-radio-tarjeta, 4px);
	background: rgba(10, 10, 10, 0.06);
	overflow-x: auto;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* ---- Firma -------------------------------------------------------------- */

#lolo-main .lolo-entrada__firma {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	max-width: 720px;
	margin: 56px auto 0;
	padding-top: 32px;
	border-top: 1px solid rgba(10, 10, 10, 0.12);
}

/* El marcador redondo: sin `nowrap` el texto se parte en una letra por línea y
 * estira el círculo hasta convertirlo en una elipse de 130px de alto. */
#lolo-main .lolo-entrada__firma-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 50%;
	font-size: 0.5rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

#lolo-main .lolo-entrada__firma-texto > * {
	margin-block: 0;
}

#lolo-main .lolo-entrada__firma-nombre {
	color: var(--lolo-tinta);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

#lolo-main .lolo-entrada__firma-bio {
	margin-top: 8px;
	color: var(--lolo-tinta-cuerpo);
	font-size: 0.9375rem;
	line-height: 1.6;
}

#lolo-main .lolo-entrada__firma-enlace {
	margin-top: 12px;
	font-size: 0.9375rem;
}

/* ---- Estrechos ---------------------------------------------------------- */

@media (max-width: 640px) {
	#lolo-main .lolo-entrada__cabecera {
		padding-block: 44px 32px;
	}

	#lolo-main .lolo-entrada__cuerpo {
		padding-block: 44px 52px;
	}

	#lolo-main .lolo-entrada__cuerpo .entry-content > p:first-child {
		font-size: 1.1875rem;
	}

	#lolo-main .lolo-entrada__firma {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 16px;
		margin-top: 44px;
	}
}

/* 14. Aire de la firma del artículo --------------------------------------- *
 * La regla que deja transparentes y sin aire vertical los bloques dentro de
 * una banda —`#lolo-main .lolo-banda [class*="wp-block-vidaytu-"]`— también
 * pisaba el `padding-top` de la firma, y el retrato quedaba pegado al filete:
 * 1px de separación en vez de 32. El `margin-top` lo pisaba, además, el layout
 * de flujo del grupo, que impone 24px. Se recuperan los dos con más peso. */
#lolo-main .lolo-banda .lolo-firma {
	margin-top: 64px;
	padding-top: 36px;
}

@media (max-width: 640px) {
	#lolo-main .lolo-banda .lolo-firma {
		margin-top: 48px;
		padding-top: 28px;
	}
}