/*
Theme Name: Confilosofía
Theme URI: https://confilosofia.es
Author: César Castillo
Description: Tema de bloques para confilosofia.es. Editorial cálido: papel crema, tinta azul profunda y un acento ocre. Gutenberg nativo, sin constructores ni dependencias de otros temas. Paleta con contrastes WCAG verificados (AAA en texto corrido).
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.1.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: confilosofia
Tags: block-theme, editorial, accessibility-ready, full-site-editing
*/

/* ==========================================================================
   Alias cortos sobre los tokens que genera theme.json.
   Los nombres son los del sistema de diseño, para poder leer el CSS
   comparándolo con el diseño sin traducir mentalmente.
   ========================================================================== */
:root {
  --papel: var(--wp--preset--color--papel);
  --susurro: var(--wp--preset--color--susurro);
  --destaque: var(--wp--preset--color--destaque);
  --tarjeta: var(--wp--preset--color--tarjeta);
  --tinta: var(--wp--preset--color--tinta);
  --tinta-suave: var(--wp--preset--color--tinta-suave);
  --enlace: var(--wp--preset--color--enlace);
  --ocre-texto: var(--wp--preset--color--ocre-texto);
  --amarillo: var(--wp--preset--color--amarillo);
  --paja: var(--wp--preset--color--paja);
  --borde: var(--wp--preset--color--borde);
  --borde-fuerte: var(--wp--preset--color--borde-fuerte);

  --serif: var(--wp--preset--font-family--gelasio);
  --sans: var(--wp--preset--font-family--inter);

  --borde-quieto: var(--wp--custom--borde-quieto);
  --radio: var(--wp--custom--radio--base);
  --radio-card: var(--wp--custom--radio--card);
  --radio-pill: var(--wp--custom--radio--pill);
  --sombra-card: var(--wp--preset--shadow--card);
  --sombra-lift: var(--wp--preset--shadow--lift);
  --sombra-hover: var(--wp--preset--shadow--hover);
  --ls-eyebrow: var(--wp--custom--ls--eyebrow);
  --transicion: var(--wp--custom--transicion);
  --blanco-suave: var(--wp--custom--blanco-suave);
  --blanco-tenue: var(--wp--custom--blanco-tenue);
  --seccion-y: var(--wp--preset--spacing--seccion);
}

/* El modelo de caja del sistema: el relleno cuenta dentro del ancho.
   Faltaba, y sin él cualquier `width` + `padding` se pasa de la medida. */
*, *::before, *::after { box-sizing: border-box; }

body { -webkit-font-smoothing: antialiased; text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
p { max-width: var(--wp--custom--medida); }

/* El foco nunca se quita. 2px de ocre a 2px de distancia. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ocre-texto);
  outline-offset: 2px;
}

/* La cursiva es la frase que resuelve la idea: siempre en Gelasio. */
em, i { font-family: var(--serif); font-style: italic; }

/* ==========================================================================
   Antetítulo (eyebrow): filete ámbar de 34px + versalitas en ocre.
   Es la única mayúscula del sistema junto a los títulos de columna del pie.
   ========================================================================== */
.cf-eyebrow,
.is-style-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--wp--preset--spacing--40);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ocre-texto);
  line-height: 1.3;
}
.cf-eyebrow::before,
.is-style-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: var(--wp--custom--marca--eyebrow-rule, 34px);
  height: 1.5px;
  background: var(--amarillo);
}
.cf-inverso .cf-eyebrow,
.cf-inverso .is-style-eyebrow { color: rgba(255,255,255,.72); }
.cf-inverso .cf-eyebrow::before,
.cf-inverso .is-style-eyebrow::before { background: rgba(255,255,255,.45); }

/* El acento del titular: la mitad humana de la frase, en ocre y cursiva. */
.cf-acento { font-family: var(--serif); font-style: italic; font-size: 1em; color: var(--ocre-texto); }
.cf-inverso .cf-acento { color: var(--amarillo); font-weight: 400; }

/* ==========================================================================
   Marca de agua: una palabra gigante en contorno de 1px al 11% de tinta,
   detrás de un encabezado de sección. Repite una palabra que ya está
   escrita como texto real, así que se oculta a los lectores de pantalla.
   ========================================================================== */
.cf-ghost {
  position: absolute;
  left: 0;
  top: -0.5em;
  max-width: 100%;
  z-index: 0;
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(3rem, 7.5vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: var(--wp--custom--ls--ghost);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--wp--custom--ghost-stroke);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.cf-inverso .cf-ghost { -webkit-text-stroke-color: var(--wp--custom--ghost-stroke-inverse); }
.cf-con-ghost { position: relative; }
.cf-con-ghost > *:not(.cf-ghost) { position: relative; z-index: 1; }

/* ==========================================================================
   Fotografía: tres formas y solo tres.
   El arco (portada), el óvalo (retratos) y el rectángulo de 12px (todo lo demás).
   ========================================================================== */
/* Cuando una imagen va envuelta en <picture> —lo hace confilosofia_foto()
   para servir AVIF y WebP—, el envoltorio se convierte en una caja intermedia
   que rompe cualquier `height:100%` + `object-fit` de dentro. `display:contents`
   lo saca del árbol de composición: el <img> vuelve a ser hijo directo de su
   marco y las reglas de abajo siguen valiendo tal cual. */
picture { display: contents; }

.cf-arco img,
.is-style-arco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: min(50%, 260px) min(50%, 260px) var(--radio-card) var(--radio-card);
}
.cf-arco, .is-style-arco { aspect-ratio: 4 / 5; overflow: hidden; background: var(--susurro); box-shadow: var(--sombra-lift); border-radius: min(50%, 260px) min(50%, 260px) var(--radio-card) var(--radio-card); }
.cf-ovalo img, .is-style-ovalo img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }
.cf-ovalo, .is-style-ovalo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--susurro); box-shadow: var(--sombra-lift); border-radius: 50%; }
/* La sombra va en el marco, no en la imagen. */

/* ==========================================================================
   Franja práctica: la tira de credenciales bajo la portada.
   ========================================================================== */
.cf-franja {
  background: var(--susurro);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.cf-franja ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
  justify-content: space-between;
  flex-wrap: nowrap;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ocre-texto);
}
.cf-franja li { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.cf-franja li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amarillo);
}

/* ==========================================================================
   Bandas de tinta a sangre. Es lo que de verdad estructura la página:
   los fondos claros solo se separan 1,14:1 entre sí y no pueden hacerlo.
   ========================================================================== */
.cf-inverso {
  background: var(--tinta);
  color: #fff;
}
.cf-inverso :where(h1, h2, h3, h4, p, li, figcaption):not(.cf-ghost) { color: inherit; }
.cf-inverso .cf-lede,
.cf-inverso .cf-secundario { color: var(--blanco-suave); }
.cf-inverso hr { border-color: var(--blanco-tenue); }
/* Los botones quedan fuera: esta regla es para los enlaces del texto.
   Sin excluir `.cf-btn` ganaba por especificidad (0,2,1 contra 0,1,0) y pintaba
   «Solicitar información» en blanco sobre el fondo blanco del propio botón —
   invisible en todas las páginas interiores y en los artículos—, y al pasar el
   ratón lo dejaba en ámbar sobre ámbar. La excepción se escribió cuando los
   botones eran los de WordPress; los propios llegaron después. */
.cf-inverso a:not(.wp-element-button):not(.cf-btn) { color: #fff; }
.cf-inverso a:not(.wp-element-button):not(.cf-btn):hover { color: var(--amarillo); }

/* Banda clara: siempre con filete quieto arriba y abajo, o no se ve. */
.cf-banda-clara {
  background: var(--susurro);
  border-top: var(--borde-quieto);
  border-bottom: var(--borde-quieto);
}
.cf-banda-destaque {
  background: var(--destaque);
  border-top: var(--borde-quieto);
  border-bottom: var(--borde-quieto);
}

/* ==========================================================================
   Botones. Píldoras, siempre en pareja: relleno + contorno.
   Nunca dos rellenos juntos.
   ========================================================================== */
.wp-block-button__link { transition: background var(--transicion), color var(--transicion), border-color var(--transicion); }

.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--tinta);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--tinta);
  color: #fff;
}
.cf-inverso .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  background: #fff;
  color: var(--tinta);
}
.cf-inverso .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
  background: var(--amarillo);
  color: var(--tinta);
}
.cf-inverso .wp-block-button.is-style-outline > .wp-block-button__link {
  border-color: #fff;
  color: #fff;
}
.cf-inverso .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: #fff;
  color: var(--tinta);
}

/* Enlace-píldora con flecha, el que usan las tarjetas. */
.cf-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radio-pill);
  border: 1px solid var(--tinta);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--tinta);
  background: transparent;
  transition: background 500ms cubic-bezier(.2,.6,.2,1), color 500ms cubic-bezier(.2,.6,.2,1);
}
.cf-pill::after { content: "→"; display: inline-block; transition: transform 500ms cubic-bezier(.2,.6,.2,1); }

/* ==========================================================================
   Tarjetas. Blancas, 12px, filete casi invisible y sombra larga y baja.
   ========================================================================== */
.cf-card {
  background: var(--tarjeta);
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-card);
}
.cf-card--lift { box-shadow: var(--sombra-lift); }

/* Tarjeta de motivo: foto arriba, filete ámbar que crece al pasar por encima. */
.cf-motivo {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: var(--tinta);
  background: var(--tarjeta);
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-card);
  transition: box-shadow 600ms cubic-bezier(.2,.6,.2,1);
  height: 100%;
}
.cf-motivo__foto { overflow: hidden; position: relative; aspect-ratio: 16 / 11; }
.cf-motivo__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1100ms cubic-bezier(.2,.6,.2,1);
}
.cf-motivo__regla { height: 2px; width: 0; background: var(--amarillo); transition: width 700ms cubic-bezier(.2,.6,.2,1); }
.cf-motivo__cuerpo {
  padding: var(--wp--preset--spacing--60);
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); flex: 1;
}
.cf-motivo h3 { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.cf-motivo p { margin: 0; font-size: 0.85rem; color: var(--tinta-suave); line-height: 1.6; flex: 1; max-width: none; }
.cf-motivo:hover { box-shadow: var(--sombra-hover); }
.cf-motivo:hover .cf-motivo__foto img { transform: scale(1.07); }
.cf-motivo:hover .cf-motivo__regla { width: 100%; }
.cf-motivo:hover .cf-pill { background: var(--tinta); color: #fff; }
.cf-motivo:hover .cf-pill::after { transform: translateX(3px); }

/* Tarjeta de método: se invierte entera al pasar por encima. */
.cf-metodo {
  position: relative;
  overflow: hidden;
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  padding: var(--wp--preset--spacing--70);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
  background: var(--tarjeta);
  box-shadow: var(--sombra-card);
  height: 100%;
  transition: background-color 650ms cubic-bezier(.2,.6,.2,1), box-shadow 650ms cubic-bezier(.2,.6,.2,1), color 650ms cubic-bezier(.2,.6,.2,1);
}
.cf-metodo::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--amarillo);
  transform: scaleY(0); transform-origin: top;
  transition: transform 650ms cubic-bezier(.2,.6,.2,1);
}
.cf-metodo__icono {
  display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; flex: 0 0 auto;
  border-radius: var(--radio-pill);
  border: 1px solid var(--amarillo);
  color: var(--ocre-texto);
  transition: background-color 650ms cubic-bezier(.2,.6,.2,1), color 650ms cubic-bezier(.2,.6,.2,1);
}
.cf-metodo__icono svg { width: 20px; height: 20px; }
.cf-metodo h3 { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: inherit; }
.cf-metodo p { margin: 0; font-size: 0.85rem; line-height: 1.6; flex: 1; color: var(--tinta-suave); max-width: none; transition: color 650ms cubic-bezier(.2,.6,.2,1); }
.cf-metodo a { align-self: flex-start; font-size: 0.85rem; font-weight: 600; text-underline-offset: .25em; }
.cf-metodo:hover { background-color: var(--tinta); color: #fff; box-shadow: var(--sombra-hover); }
.cf-metodo:hover::before { transform: scaleY(1); }
.cf-metodo:hover p { color: var(--blanco-suave); }
.cf-metodo:hover a { color: var(--amarillo); }
.cf-metodo:hover .cf-metodo__icono { background-color: var(--amarillo); color: var(--tinta); }

/* Tarjeta de opinión: vive dentro de una banda de tinta, sobre blanco. */
.cf-opinion {
  background: var(--tarjeta);
  color: var(--tinta);
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-card);
  padding: var(--wp--preset--spacing--70);
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50);
  height: 100%;
}
.cf-opinion__estrellas { color: var(--amarillo); letter-spacing: 3px; font-size: .8rem; line-height: 1; margin: 0; }
.cf-opinion blockquote {
  margin: 0; border: 0; padding: 0;
  font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.6;
}
.cf-opinion blockquote p { max-width: none; margin: 0; }
.cf-opinion footer { margin-top: auto; font-size: .72rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; line-height: 1.4; }
.cf-opinion footer strong { font-weight: 600; }
.cf-opinion footer span { color: var(--tinta-suave); }

/* Tarjeta de artículo del blog. */
.cf-articulo { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); text-decoration: none; color: var(--tinta); height: 100%; }
.cf-articulo__foto { overflow: hidden; border-radius: var(--radio-card); box-shadow: var(--sombra-card); aspect-ratio: 16 / 11; background: var(--susurro); }
.cf-articulo__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1100ms cubic-bezier(.2,.6,.2,1); }
.cf-articulo:hover .cf-articulo__foto img { transform: scale(1.07); }
.cf-articulo:hover .cf-pill { background: var(--tinta); color: #fff; }
.cf-articulo:hover .cf-pill::after { transform: translateX(3px); }
.cf-articulo .cf-fecha { font-size: .68rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ocre-texto); font-weight: 600; }
.cf-articulo h3 { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.cf-articulo p { margin: 0; font-size: .85rem; color: var(--tinta-suave); line-height: 1.6; flex: 1; max-width: none; }

/* Query Loop del blog: la rejilla y la ausencia de imagen destacada.
   Un tercio de las entradas no tiene foto, así que el hueco no puede colapsar. */
.cf-blog .wp-block-post-featured-image { margin: 0; }
.cf-blog .wp-block-post-featured-image img { border-radius: var(--radio-card); box-shadow: var(--sombra-card); aspect-ratio: 16/11; object-fit: cover; width: 100%; }
.cf-blog .wp-block-post-title { font-size: 1.15rem; line-height: 1.25; margin: 0; }
.cf-blog .wp-block-post-date { font-size: .68rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ocre-texto); font-weight: 600; }
.cf-blog .wp-block-post-excerpt__excerpt { font-size: .85rem; color: var(--tinta-suave); line-height: 1.6; }

/* ==========================================================================
   Cifras. Sin animación de contador: el diseño lo pide expresamente.
   ========================================================================== */
.cf-cifras { display: flex; gap: var(--wp--preset--spacing--100); flex-wrap: wrap; }
.cf-cifra strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--tinta);
}
.cf-cifra span {
  display: block;
  margin-top: var(--wp--preset--spacing--20);
  font-size: .85rem;
  letter-spacing: var(--ls-eyebrow);
  color: var(--tinta-suave);
}

/* Nota: el aviso con filete ámbar a la izquierda. */
.cf-nota,
.is-style-nota {
  border-left: 3px solid var(--borde);
  padding-left: var(--wp--preset--spacing--40);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* ==========================================================================
   Cabecera. Pegajosa, y lo único pegajoso de la página.
   ========================================================================== */
.cf-cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papel);
  border-bottom: var(--borde-quieto);
}
.cf-cabecera .wp-block-navigation { font-size: .82rem; font-weight: 500; }
.cf-cabecera .wp-block-navigation a { color: var(--tinta-suave); text-decoration: none; }
.cf-cabecera .wp-block-navigation a:hover,
.cf-cabecera .wp-block-navigation .current-menu-item > a { color: var(--tinta); }
.cf-cabecera .wp-block-navigation .current-menu-item > a { font-weight: 600; }
.cf-cabecera .wp-block-navigation__submenu-container {
  background: var(--tarjeta);
  border: var(--borde-quieto) !important;
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-lift);
  padding: .6rem;
  min-width: 300px;
}
.cf-cabecera .wp-block-navigation__submenu-container a {
  border-radius: var(--wp--custom--radio--sm);
  padding: .6rem .75rem;
  line-height: 1.35;
}
.cf-cabecera .wp-block-navigation__submenu-container a:hover { background: var(--susurro); }
.cf-telefono {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .82rem; font-weight: 600; color: var(--tinta);
  text-decoration: none; white-space: nowrap;
}
.cf-telefono svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--ocre-texto);
}

/* ==========================================================================
   Pie. Cuatro columnas de enlaces más el lockup del logo.
   ========================================================================== */
.cf-pie { background: var(--tinta); color: var(--blanco-suave); }
.cf-pie h2, .cf-pie h3 {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--amarillo);
  margin: 0 0 var(--wp--preset--spacing--40);
}
.cf-pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); font-size: .85rem; }
.cf-pie a { color: var(--blanco-suave); text-decoration: none; transition: color 250ms cubic-bezier(.2,.6,.2,1); }
.cf-pie a:hover { color: var(--amarillo); }
.cf-pie__legal {
  margin-top: var(--wp--preset--spacing--100);
  padding-top: var(--wp--preset--spacing--50);
  border-top: 1px solid var(--blanco-tenue);
  font-size: .75rem;
  color: rgba(255,255,255,.5);
  max-width: none;
}

/* El logo se pinta con máscara para heredar el color del contexto. */
.cf-logo { display: block; background: currentColor; }
.cf-logo--marca { width: 209px; height: 26px; -webkit-mask: url(assets/logo/marca.svg) no-repeat center/contain; mask: url(assets/logo/marca.svg) no-repeat center/contain; }
.cf-logo--lockup { width: 248px; height: 64px; -webkit-mask: url(assets/logo/lockup-completo.svg) no-repeat center/contain; mask: url(assets/logo/lockup-completo.svg) no-repeat center/contain; }

/* ==========================================================================
   Formularios.
   ========================================================================== */
.cf-form input[type="email"],
.cf-form input[type="text"],
.cf-form textarea,
.cf-form select {
  font: inherit;
  font-size: .92rem;
  padding: .85rem 1.1rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--tinta);
  width: 100%;
}
.cf-form button[type="submit"] {
  font-family: var(--sans); font-size: .9rem; font-weight: 600; line-height: 1;
  padding: 1rem 1.9rem;
  border-radius: var(--radio-pill);
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: #fff;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.cf-form button[type="submit"]:hover { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); }
.cf-form label { display: flex; align-items: flex-start; gap: .6rem; font-size: .8rem; color: var(--tinta-suave); line-height: 1.5; }
.cf-form input[type="checkbox"] { width: 1rem; height: 1rem; margin-top: .2rem; accent-color: var(--tinta); }

/* ==========================================================================
   Rejillas de tres. En móvil, una sola columna.
   ========================================================================== */
.cf-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--90) var(--wp--preset--spacing--60); align-items: stretch; }
.cf-tres--ancho { gap: var(--wp--preset--spacing--80); }
@media (max-width: 900px) { .cf-tres { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cf-tres { grid-template-columns: 1fr; } }

.cf-encabezado-seccion {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--wp--preset--spacing--80); flex-wrap: wrap;
  margin-bottom: var(--wp--preset--spacing--90);
}
.cf-encabezado-seccion h2 { margin: 0 0 var(--wp--preset--spacing--50); max-width: 34ch; }
.cf-encabezado-seccion .cf-lede { margin: 0; max-width: 40ch; font-size: .85rem; line-height: 1.7; color: var(--tinta-suave); }

/* ==========================================================================
   Movimiento: mínimo y honesto. Y cero si el sistema lo pide.
   ========================================================================== */
@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;
  }
}


/* ==========================================================================
   CORRECCIONES tras la primera revisión (2026-08-06)
   Cada regla responde a un punto concreto del repaso, y los tamaños salen de
   HOME-decisiones.md: «lg» para casi todos los encabezados de sección y «md»
   solo para Propósito y César.
   ========================================================================== */

/* Tamaños de titular explícitos. Van en el elemento para que no dependan de
   cómo resuelva theme.json el h2 en cada contexto: era la causa de que unos
   se vieran bien y otros no. */
.cf-h-lg {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.cf-h-md {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

/* Nada de franja de papel entre secciones a sangre: el espaciado de bloques de
   WordPress la metía entre banda y banda. */
main.wp-block-group > * { margin-block-start: 0; }

/* Antetítulo SIN filete, para «La metodología»: el filete es exclusivo del
   antetítulo de sección. */
.cf-kicker {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ocre-texto);
}

/* Botones de la misma altura, siempre. El de contorno tiene borde y el de
   relleno no lo tenía: de ahí que se vieran dispares. */
.wp-block-button__link,
.cf-pill {
  border-width: 1px;
  border-style: solid;
  min-height: 3.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link { border-color: transparent; }
.cf-pill { min-height: 2.6rem; }

/* Tarjeta de motivo: enlace en toda su superficie. La píldora es decorativa
   (un span), para no anidar un enlace dentro de otro. */
a.cf-motivo, a.cf-metodo, a.cf-articulo { text-decoration: none; color: var(--tinta); display: flex; }
a.cf-motivo:hover, a.cf-metodo:hover, a.cf-articulo:hover { color: var(--tinta); }
a.cf-metodo:hover { color: #fff; }

/* Las fotos de las tarjetas van como fondo: así no hay petición fallida
   mientras la página se dibuja. */
.cf-foto-fondo {
  background-size: cover;
  background-position: center;
  background-color: var(--susurro);
  transition: transform 1100ms cubic-bezier(.2,.6,.2,1);
}

/* Opiniones: las tarjetas son blancas dentro de una banda de tinta, así que
   hay que devolverles el color de texto o heredan el blanco y no se leen. */
.cf-inverso .cf-tres { color: var(--tinta); }
.cf-inverso .cf-opinion :where(p, blockquote, footer, strong, span) { color: inherit; }
.cf-inverso .cf-opinion footer span { color: var(--tinta-suave); }

/* Blog: cuando una entrada no tiene imagen destacada, el hueco no colapsa. */
.cf-blog .wp-block-post-template > li { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.cf-blog .wp-block-post-template > li:not(:has(.wp-block-post-featured-image))::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 11;
  border-radius: var(--radio-card);
  background: var(--susurro);
  border: var(--borde-quieto);
}

/* La nota de modalidades pegada al párrafo anterior se lee mal. */
.cf-nota, .is-style-nota { margin-top: 2rem; }

/* Casilla legal: área de clic amplia y marca visible. */
.cf-form label {
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem .6rem 0;
  min-height: 44px;
  cursor: pointer;
  border-radius: var(--wp--custom--radio--sm);
}
.cf-form label:hover { background: rgba(3,61,88,.04); }
.cf-form input[type="checkbox"] {
  width: 1.35rem; height: 1.35rem; margin: 0; flex: 0 0 auto;
  accent-color: var(--tinta);
}

/* Pie: cinco columnas fijas, nunca una sola. */
.cf-pie .wp-block-columns { flex-wrap: nowrap !important; gap: var(--wp--preset--spacing--80); }
@media (max-width: 900px) {
  .cf-pie .wp-block-columns { flex-wrap: wrap !important; }
  /* El selector lleva el > y el :not del core a propósito: la regla de
     WordPress que apila las columnas al 100% en móvil tiene más especificidad
     que un simple .cf-pie .wp-block-column, y ganaba. El modelo dice que el
     pie no debe colapsar a una sola columna: dos por fila en móvil. */
  .cf-pie .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 45% !important; }
  .cf-pie .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:first-child { flex-basis: 100% !important; }
}

/* La cabecera envuelve si no cabe, pero teléfono y botón no se separan. */
.cf-cabecera .wp-block-group.is-layout-flex { flex-wrap: wrap; }
.cf-cabecera .wp-block-group.is-layout-flex > .wp-block-group { margin-left: auto; flex-wrap: nowrap; }

/* Los títulos de tarjeta pasan a <span> al hacer la tarjeta clicable: dentro de
   un enlace, seis encabezados seguidos ensucian el índice de la página. */
.cf-motivo__titulo, .cf-metodo__titulo {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
}
.cf-motivo__texto, .cf-metodo__texto {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  flex: 1;
  transition: color 650ms cubic-bezier(.2,.6,.2,1);
}
.cf-metodo__accion {
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--enlace);
  text-decoration: underline;
  text-underline-offset: .25em;
  transition: color 650ms cubic-bezier(.2,.6,.2,1);
}
.cf-metodo:hover .cf-metodo__texto { color: var(--blanco-suave); }
.cf-metodo:hover .cf-metodo__accion { color: var(--amarillo); }
.cf-motivo__foto { display: block; }
.cf-motivo__foto .cf-foto-fondo { display: block; width: 100%; height: 100%; }
.cf-motivo:hover .cf-motivo__foto .cf-foto-fondo { transform: scale(1.07); }
/* El velo de tinta al 14% sobre la foto, al pasar por encima. */
.cf-motivo__foto::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--tinta);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms cubic-bezier(.2,.6,.2,1);
}
.cf-motivo:hover .cf-motivo__foto::after { opacity: .14; }
.cf-motivo__cuerpo { display: flex; flex-direction: column; }

/* ==========================================================================
   Héroe: slider de tres diapositivas.
   Único JavaScript propio del tema, y está aquí porque HOME-decisiones.md lo
   pide expresamente: fundido de 700 ms con desplazamiento vertical leve,
   autoplay de 8 s, flechas y barras de posición que reinician el temporizador.
   Sin JavaScript el bloque degrada a las tres diapositivas apiladas y legibles.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {}

/* Los dos botones del blog viven en la fila del encabezado, junto a la bajada. */
.cf-botonera { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--50); }
.cf-pill--relleno { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.cf-pill--relleno:hover { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); }
.cf-pill--amarillo { background: transparent; }
.cf-pill--amarillo:hover { background: var(--tinta); color: #fff; }
a.cf-pill { text-decoration: none; }

/* ==========================================================================
   Segunda ronda de correcciones, ya midiendo sobre la copia (2026-08-06)
   ========================================================================== */

/* La franja se desbordaba a lo ancho y cada apunte ocupaba dos líneas.
   Ahora cada apunte va en UNA línea y es la fila la que envuelve si no cabe:
   así nunca hay scroll horizontal. */
.cf-franja ul { flex-wrap: wrap; row-gap: var(--wp--preset--spacing--30); }
.cf-franja li { white-space: nowrap; }
@media (max-width: 1000px) {
  .cf-franja ul { justify-content: flex-start; column-gap: var(--wp--preset--spacing--80); }
}

/* Las filas de tarjetas se solapaban: la altura al 100% peleaba con el
   estirado de la rejilla. Se deja que la rejilla mande. */
.cf-motivo, .cf-metodo, .cf-opinion, .cf-articulo { height: auto; }
.cf-tres > * { min-width: 0; }

/* Nada puede provocar scroll horizontal. `clip` y no `hidden`: hidden
   convierte a body en contenedor de scroll y ROMPE position:sticky de la
   cabecera. Con clip, la cabecera fija funciona. */
html, body { overflow-x: clip; }
.cf-ghost { max-width: none; }

/* La píldora de las tarjetas de blog, que la genera el bloque «Leer más». */
.cf-blog .cf-pill { align-self: flex-start; margin-top: var(--wp--preset--spacing--20); }

/* Cuando falta el archivo de una imagen destacada, el hueco no se rompe. */
.cf-blog img[src$=".webp"]:not([srcset]) { background: var(--susurro); }

/* El bloque «Leer más» no viene envuelto en `.wp-block-button`, así que no
   hereda su `flex: 0 1 auto` y se estiraba ocupando la fila completa: en la
   tercera diapositiva eso empujaba «Ir al blog» a una segunda fila y los
   botones medían 122px en vez de 49. Con esto las tres miden igual. */
.wp-block-buttons > .wp-block-read-more {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}

/* ==========================================================================
   Texto solo para lectores de pantalla.
   Faltaba en el tema, y no era un detalle: WordPress añade con esta clase el
   título de la entrada dentro del botón «Leer más». Sin ocultarla, el botón
   decía «Leer el artículo: La IA está reescribiendo la Historia», medía 421px
   y ocupaba tres líneas. Lo mismo le pasa a cualquier etiqueta accesible que
   WordPress inyecte en el resto del sitio.
   ========================================================================== */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--tarjeta);
  clip-path: none;
  color: var(--tinta);
  display: block;
  font-size: 0.9rem;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 1rem 1.5rem;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  box-shadow: var(--sombra-lift);
  border-radius: var(--radio);
}


/* ==========================================================================
   HÉROE · slider de tres diapositivas
   Valores tomados uno a uno del modelo de Claude Design. El marcado lo
   escribe patterns/portada-apertura.php en PHP, no en bloques: así no hay
   nada que WordPress añada por su cuenta que haya que corregir después.
   ========================================================================== */
.cf-hero { position: relative; }

.cf-hero__envoltorio {
  max-width: 1160px;
  margin-inline: auto;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 4vw, 2rem) clamp(2.5rem, 4vw, 3.5rem);
  min-height: clamp(23rem, 30vw, 28rem);
}

/* Sin JavaScript: las tres, una debajo de otra, todas legibles. */
.cf-slider__pista > .cf-hero__slide + .cf-hero__slide { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Con JavaScript: las tres en la MISMA celda, así la caja no cambia de alto. */
.cf-slider.esta-vivo .cf-slider__pista { display: grid; grid-template-areas: "escena"; }
.cf-slider.esta-vivo .cf-hero__slide {
  grid-area: escena;
  margin-top: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(.2,.6,.2,1), transform 700ms cubic-bezier(.2,.6,.2,1);
}
.cf-slider.esta-vivo .cf-hero__slide.esta-activa { visibility: visible; pointer-events: auto; }
.cf-slider.esta-vivo .cf-hero__slide.esta-visible { opacity: 1; transform: translateY(0); }

/* La diapositiva: dos columnas 1,3 / 0,7 centradas, como el modelo. */
.cf-hero__slide {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  /* Centradas en vertical, como el modelo: la caja mide lo que la diapositiva
     más alta (van apiladas en la misma celda) y cada una centra su contenido. */
  align-items: center;
}
.cf-hero__texto { min-width: 0; }
.cf-hero__titulo {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 var(--wp--preset--spacing--50);
  max-width: 24ch;
  text-wrap: balance;
}
.cf-hero__parrafo {
  max-width: 52ch;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--tinta-suave);
}
/* Los botones van a continuación del texto, con el margen del modelo (sp-8). */
.cf-hero__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--wp--preset--spacing--80);
}

.cf-hero__foto { width: 100%; max-width: 370px; justify-self: end; align-self: center; }

/* ---- Botones propios, sin el bloque de WordPress ----
   Valores del componente Button del sistema, tamaño md. */
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 1rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--radio-pill);
  background: var(--tinta);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background 350ms cubic-bezier(.2,.6,.2,1), color 350ms cubic-bezier(.2,.6,.2,1), border-color 350ms cubic-bezier(.2,.6,.2,1);
}
.cf-btn:hover { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); }
.cf-btn--contorno { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.cf-btn--contorno:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }

/* ---- Mandos ---- */
.cf-slider__mandos { display: none; align-items: center; gap: var(--wp--preset--spacing--60); margin-top: clamp(1.5rem, 2.5vw, 2.5rem); }
.cf-slider.esta-vivo .cf-slider__mandos { display: flex; }
.cf-slider__barras { display: flex; gap: 0.55rem; align-items: center; }
.cf-slider__barras button {
  width: 32px; height: 5px; padding: 0; border: 0; cursor: pointer;
  border-radius: 999px; background: rgba(3,61,88,.18);
  transition: background 300ms cubic-bezier(.2,.6,.2,1);
}
.cf-slider__barras button[aria-current="true"] { background: var(--tinta); }
.cf-slider__flechas { display: flex; gap: 0.5rem; margin-left: auto; }
.cf-slider__flechas button {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--borde); background: none; color: var(--tinta);
  font-size: 0.95rem; cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.cf-slider__flechas button:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }

@media (max-width: 860px) {
  .cf-hero__slide { grid-template-columns: 1fr; }
  /* En móvil el héroe va sin foto: el texto es el protagonista y la caja
     queda compacta y estable entre diapositivas. */
  .cf-hero__foto { display: none; }
  .cf-hero__titulo { max-width: none; }
  /* Botones apilados, centrados y al mismo ancho. */
  .cf-hero__botones {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .cf-hero__botones .cf-btn {
    width: min(100%, 22rem);
    justify-content: center;
  }
  /* Los mandos, centrados bajo el texto. */
  .cf-slider__mandos { justify-content: center; }
  .cf-slider__flechas { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-slider.esta-vivo .cf-hero__slide { transition: none; }
}


/* ==========================================================================
   Sin huecos de papel entre las cajas raíz: WordPress separa los hijos de
   wp-site-blocks (cabecera, main, pie) con un margen — era la franja blanca
   entre el newsletter y el pie. Cada sección ya trae su propio padding.
   ========================================================================== */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
.wp-site-blocks > main { padding-top: 0; padding-bottom: 0; }

/* La cabecera fija: el envoltorio que WordPress crea para la parte de
   plantilla mide exactamente lo que la cabecera, así que el sticky no tenía
   recorrido. `display:contents` lo hace transparente y la cabecera pasa a
   fijarse contra la página entera. */
.wp-block-template-part:has(> .cf-cabecera) { display: contents; }

/* El encabezado de sección, como el modelo: titular a la izquierda (máx 18ch,
   el ancho del componente DisplayHeading) y la entradilla a su derecha,
   alineada abajo. Sin esto la entradilla caía debajo del titular. */
.cf-encabezado-seccion > div:first-child { flex: 1 1 0; min-width: 0; }
.cf-encabezado-seccion h2 { max-width: 18ch; }
.cf-encabezado-seccion .cf-lede { flex: 0 1 40ch; }
@media (max-width: 900px) {
  .cf-encabezado-seccion > div:first-child { flex-basis: 100%; }
  .cf-encabezado-seccion .cf-lede { flex-basis: 100%; }
}


/* ==========================================================================
   PÁGINAS INTERIORES — valores de los modelos «Blog Confilosofía»,
   «Artículo del blog» y «Qué es el asesoramiento filosófico».
   ========================================================================== */

/* El acento del sistema también cuando el titular viene del contenido. */
h1 em, h2 em, h3 em { color: var(--ocre-texto); }
.cf-inverso :where(h1, h2, h3) em { color: var(--amarillo); }

/* ---- Encabezado interior (artículo y página) ---- */
.cf-articulo-encabezado {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(2.5rem, 4vw, 3.5rem) 0 var(--wp--preset--spacing--80);
}
.cf-migas {
  display: flex;
  gap: .5em;
  flex-wrap: wrap;
  font-size: .72rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: var(--wp--preset--spacing--60);
}
.cf-migas a { color: var(--tinta-suave); text-decoration: none; }
.cf-migas a:hover { color: var(--tinta); }
.cf-migas__actual { color: var(--ocre-texto); font-weight: 600; }

.cf-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: var(--wp--preset--spacing--60); }
.cf-chip {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ocre-texto);
  border: 1px solid var(--amarillo);
  border-radius: var(--radio-pill);
  padding: .32rem .8rem;
  text-decoration: none;
}
a.cf-chip:hover { background: var(--destaque); color: var(--ocre-texto); }
.cf-chip--quieta { color: var(--tinta-suave); border: var(--borde-quieto); }

.cf-titulo-interior {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 var(--wp--preset--spacing--50);
  max-width: 20ch;
  text-wrap: balance;
}
.cf-lede-italica {
  margin: 0 0 var(--wp--preset--spacing--70);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  max-width: 44ch;
}
.cf-subtitulo-italica {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ocre-texto);
}

.cf-autor-mini {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  padding-top: var(--wp--preset--spacing--50);
  border-top: var(--borde-quieto);
}
.cf-autor-mini p { margin: 0; font-size: .85rem; line-height: 1.5; max-width: none; }
.cf-autor-mini b { font-weight: 600; }
.cf-autor-mini span { color: var(--tinta-suave); }
.cf-ovalo--mini { width: 44px; height: 44px; flex: 0 0 auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: block; box-shadow: none; }
.cf-ovalo--mini img { width: 100%; height: 100%; object-fit: cover; }
.cf-ovalo--media { width: 96px; height: 96px; flex: 0 0 auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: block; box-shadow: var(--sombra-card); }
.cf-ovalo--media img { width: 100%; height: 100%; object-fit: cover; }

.cf-imagen-ancha { margin-inline: auto; }
.cf-imagen-ancha img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--radio-card);
}

/* ---- El cuerpo de lectura ---- */
.cf-cuerpo { padding-top: var(--seccion-y); }
.cf-cuerpo :where(p) { font-size: 1.02rem; line-height: 1.8; }
.cf-cuerpo :where(h2) {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  margin: var(--wp--preset--spacing--90) 0 var(--wp--preset--spacing--50);
  max-width: 26ch;
}
.cf-cuerpo :where(h3) { font-size: 1.25rem; font-weight: 600; margin: var(--wp--preset--spacing--80) 0 var(--wp--preset--spacing--40); }
.cf-cuerpo :where(ul) { list-style: none; margin: 0 0 var(--wp--preset--spacing--80); padding: 0; display: grid; gap: var(--wp--preset--spacing--40); }
.cf-cuerpo :where(ul) > :where(li) { position: relative; padding-left: 1.4rem; font-size: .95rem; line-height: 1.7; }
.cf-cuerpo :where(ul) > :where(li)::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amarillo);
}
.cf-cuerpo :where(ol) { padding-left: 1.4rem; }
.cf-cuerpo :where(blockquote, .wp-block-quote) {
  margin: 0 0 var(--wp--preset--spacing--80);
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
  background: var(--susurro);
  border-left: 3px solid var(--amarillo);
  border-radius: var(--radio-card);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
}
.cf-cuerpo :where(blockquote cite) {
  display: block;
  margin-top: var(--wp--preset--spacing--40);
  font-family: var(--sans);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ocre-texto);
  font-weight: 600;
}
.cf-cuerpo :where(img) { border-radius: var(--radio-card); }
.cf-cuerpo :where(figcaption) { font-size: .78rem; color: var(--tinta-suave); line-height: 1.6; margin-top: var(--wp--preset--spacing--30); }

/* ---- Caja de autor y navegación entre entradas ---- */
.cf-articulo-pie { padding-top: var(--wp--preset--spacing--100); }
.cf-autor-caja {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--60);
  padding: var(--wp--preset--spacing--70);
  background: var(--tarjeta);
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-card);
  margin-bottom: var(--wp--preset--spacing--100);
  flex-wrap: wrap;
}
.cf-autor-caja > div { flex: 1 1 18rem; }
.cf-autor-caja__nombre { margin: 0 0 var(--wp--preset--spacing--30); font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.cf-autor-caja__bio { margin: 0 0 var(--wp--preset--spacing--50); color: var(--tinta-suave); font-size: .9rem; line-height: 1.7; }

.cf-btn--sm { font-size: .78rem; padding: .72rem 1.3rem; }
.cf-btn--inverso { background: #fff; color: var(--tinta); border-color: #fff; }
.cf-btn--inverso:hover { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); }
.cf-btn--inverso-contorno { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.cf-btn--inverso-contorno:hover { background: #fff; color: var(--tinta); border-color: #fff; }

.cf-nav-entradas {
  display: flex;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--60);
  flex-wrap: wrap;
  padding: var(--wp--preset--spacing--60) 0;
  border-top: var(--borde-quieto);
  border-bottom: var(--borde-quieto);
}
.cf-nav-entradas a { max-width: 26ch; text-decoration: none; color: var(--tinta); }
.cf-nav-entradas__siguiente { text-align: right; margin-left: auto; }
.cf-nav-entradas .cf-eyebrow { margin-bottom: .3rem; }
.cf-nav-entradas__siguiente .cf-eyebrow { justify-content: flex-end; }
.cf-nav-entradas__siguiente .cf-eyebrow::before { display: none; }
.cf-nav-entradas__titulo { font-family: var(--serif); font-size: 1rem; font-weight: 600; line-height: 1.35; }

/* ---- Recomendados ---- */
.cf-recomendados { padding: var(--seccion-y) clamp(1.25rem, 4vw, 2rem); }
.cf-recomendados__caja { max-width: 1160px; margin-inline: auto; }
.cf-recomendados__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--wp--preset--spacing--60);
  flex-wrap: wrap;
  margin-bottom: var(--wp--preset--spacing--80);
}
.cf-recomendados__cabecera h2 { margin: 0; font-size: 1.7rem; font-weight: 700; line-height: 1.25; }
.cf-recomendados__cabecera a { font-size: .85rem; font-weight: 600; }
.cf-articulo__titulo { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.cf-articulo__extracto { font-size: .9rem; color: var(--tinta-suave); line-height: 1.6; }
.cf-articulo__foto { display: block; overflow: hidden; border-radius: var(--radio-card); box-shadow: var(--sombra-card); aspect-ratio: 16 / 11; background: var(--susurro); }
.cf-articulo__foto .cf-foto-fondo { display: block; width: 100%; height: 100%; }
.cf-articulo:hover .cf-articulo__foto .cf-foto-fondo { transform: scale(1.07); }
a.cf-articulo { gap: var(--wp--preset--spacing--40); flex-direction: column; }

/* ---- Comentarios ---- */
.cf-comentarios { padding: var(--seccion-y) 0 var(--wp--preset--spacing--120); }
.cf-comentarios .wp-block-comments-title { font-size: 1.5rem; margin-bottom: var(--wp--preset--spacing--80); }
.cf-comentario {
  background: var(--tarjeta);
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-card);
  padding: var(--wp--preset--spacing--60);
  margin-bottom: var(--wp--preset--spacing--60);
}
.cf-comentarios .wp-block-comment-template,
.cf-comentarios .wp-block-comment-template ol { list-style: none; margin: 0; padding: 0; }
.cf-comentarios .wp-block-comment-template li { list-style: none; }
.cf-comentarios .wp-block-comment-template li li .cf-comentario {
  margin-left: var(--wp--preset--spacing--90);
  border-left: 3px solid var(--amarillo);
}
.cf-comentario__firma { gap: .5rem !important; font-size: .8rem; margin-bottom: var(--wp--preset--spacing--30); }
.cf-comentario__firma .wp-block-comment-author-name { font-weight: 600; }
.cf-comentario__firma .wp-block-comment-date { color: var(--tinta-suave); font-size: .8rem; }
.cf-comentario .wp-block-comment-content { font-size: .95rem; line-height: 1.7; color: var(--tinta-suave); }
.cf-comentario .wp-block-comment-content p { margin: 0 0 var(--wp--preset--spacing--40); max-width: none; }
.cf-comentario .wp-block-comment-reply-link { font-size: .8rem; font-weight: 600; }
.cf-comentarios .comment-form textarea,
.cf-comentarios .comment-form input:not([type="checkbox"]):not([type="submit"]) {
  font: inherit;
  font-size: .95rem;
  width: 100%;
  padding: .85rem 1.1rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--tinta);
}
.cf-comentarios .comment-form input[type="submit"] {
  font-family: var(--sans); font-size: .9rem; font-weight: 600; line-height: 1;
  padding: 1rem 1.9rem;
  border-radius: var(--radio-pill);
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: #fff;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.cf-comentarios .comment-form input[type="submit"]:hover { background: var(--amarillo); color: var(--tinta); border-color: var(--amarillo); }
.cf-comentarios .comment-form label { display: block; font-size: .8rem; color: var(--tinta-suave); margin-bottom: .3rem; }
.cf-comentarios .comment-form > p { margin-bottom: var(--wp--preset--spacing--50); }

/* ---- CTA interior ---- */
.cf-cta-interior { padding: var(--seccion-y) clamp(1.25rem, 4vw, 2rem); }
.cf-cta-interior__caja {
  max-width: 1160px;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--wp--preset--spacing--60);
}
.cf-cta-interior h2 {
  margin: 0;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  max-width: 20ch;
  text-wrap: balance;
}
.cf-cta-interior .cf-lede { margin: 0; max-width: 48ch; font-size: .85rem; }
.cf-cta-interior__botones { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ---- Banda del asesor ---- */
.cf-asesor-banda { padding: var(--wp--preset--spacing--110) clamp(1.25rem, 4vw, 2rem); }
.cf-asesor-banda__caja {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  gap: var(--wp--preset--spacing--70);
  align-items: center;
  flex-wrap: wrap;
}
.cf-asesor-banda__caja > div { flex: 1 1 20rem; }
.cf-asesor-banda__nombre { margin: 0 0 var(--wp--preset--spacing--30); font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.cf-asesor-banda__datos { margin: 0; color: var(--tinta-suave); font-size: .92rem; line-height: 1.7; }

/* ---- Cabecera del archivo del blog ---- */
.cf-archivo-cabecera {
  margin-inline: auto;
  padding: clamp(2.5rem, 4vw, 3.5rem) 0 var(--wp--preset--spacing--80);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--wp--preset--spacing--80);
  flex-wrap: wrap;
}
.cf-archivo-cabecera h1 {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  max-width: 20ch;
  text-wrap: balance;
}
.cf-archivo-cabecera .cf-lede { margin: 0; max-width: 42ch; font-size: .95rem; line-height: 1.7; color: var(--tinta-suave); }

/* ---- Destacado del blog ---- */
.cf-destacado-envoltorio { margin-inline: auto; padding-bottom: var(--wp--preset--spacing--100); }
.cf-destacado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  text-decoration: none;
  color: var(--tinta);
  background: var(--tarjeta);
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-card);
  overflow: hidden;
  transition: box-shadow 600ms cubic-bezier(.2,.6,.2,1);
}
.cf-destacado:hover { box-shadow: var(--sombra-hover); color: var(--tinta); }
.cf-destacado__foto { display: block; min-height: 320px; height: 100%; }
.cf-destacado__texto { display: flex; flex-direction: column; align-items: flex-start; padding: var(--wp--preset--spacing--80); padding-left: 0; }
@media (max-width: 700px) { .cf-destacado__texto { padding-left: var(--wp--preset--spacing--80); padding-top: 0; } }
.cf-destacado__titulo {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  max-width: 18ch;
  margin-bottom: var(--wp--preset--spacing--40);
}
.cf-destacado__extracto { color: var(--tinta-suave); font-size: .95rem; line-height: 1.7; max-width: 46ch; margin-bottom: var(--wp--preset--spacing--60); }
.cf-destacado:hover .cf-pill { background: var(--tinta); color: #fff; }
.cf-destacado:hover .cf-pill::after { transform: translateX(3px); }

/* ---- El archivo: listado + barra lateral ---- */
.cf-archivo {
  margin-inline: auto;
  padding-bottom: var(--seccion-y);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: flex-start;
}
.cf-archivo__principal { flex: 1 1 26rem; min-width: 0; }

.cf-filtros {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding-bottom: var(--wp--preset--spacing--60);
  border-bottom: 1px solid var(--borde);
  margin-bottom: var(--wp--preset--spacing--30);
}
.cf-filtro {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  padding: .5rem 1rem;
  border-radius: var(--radio-pill);
  border: 1px solid var(--borde);
  color: var(--tinta-suave);
  text-decoration: none;
  transition: background 250ms cubic-bezier(.2,.6,.2,1), color 250ms cubic-bezier(.2,.6,.2,1);
}
.cf-filtro:hover { background: var(--susurro); color: var(--tinta); }
.cf-filtro.esta-activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.cf-fila-post {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--wp--preset--spacing--60);
  align-items: start;
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
  margin: 0 calc(-1 * var(--wp--preset--spacing--50));
  border-bottom: var(--borde-quieto);
  text-decoration: none;
  color: var(--tinta);
  transition: background 300ms cubic-bezier(.2,.6,.2,1);
}
.cf-fila-post:hover { background: var(--susurro); color: var(--tinta); }
.cf-fila-post__foto {
  display: block;
  overflow: hidden;
  border-radius: var(--radio-card);
  aspect-ratio: 4 / 3;
}
.cf-fila-post:hover .cf-fila-post__foto { transform: scale(1.04); }
.cf-fila-post__titulo { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.3; margin-bottom: var(--wp--preset--spacing--20); }
.cf-fila-post__extracto { display: block; font-size: .92rem; color: var(--tinta-suave); line-height: 1.65; max-width: 60ch; margin-bottom: var(--wp--preset--spacing--40); }
.cf-fila-post__chips { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 560px) {
  .cf-fila-post { grid-template-columns: 1fr; }
  .cf-fila-post__foto { aspect-ratio: 16 / 9; }
}

.cf-sin-resultados { padding: var(--wp--preset--spacing--80) 0; color: var(--tinta-suave); }

.cf-paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--60);
  margin-top: var(--wp--preset--spacing--90);
  flex-wrap: wrap;
}
.cf-paginacion__estado { margin: 0; font-size: .8rem; color: var(--tinta-suave); }
.cf-paginacion__enlaces { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cf-paginacion__enlaces .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .6rem;
  border-radius: var(--radio-pill);
  border: 1px solid var(--borde);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--tinta);
}
.cf-paginacion__enlaces a.page-numbers:hover { background: var(--susurro); }
.cf-paginacion__enlaces .page-numbers.current { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.cf-paginacion__enlaces .page-numbers.dots { border: 0; min-width: auto; color: var(--tinta-suave); }
.cf-paginacion__enlaces .page-numbers.next,
.cf-paginacion__enlaces .page-numbers.prev { background: var(--tinta); border-color: var(--tinta); color: #fff; padding: 0 1.1rem; }

/* ---- Barra lateral ---- */
.cf-lateral {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: var(--wp--preset--spacing--90);
  flex: 1 1 14rem;
  min-width: 0;
}
.cf-lateral input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: .9rem;
  padding: .75rem 1rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--tinta);
}
.cf-lateral__categorias { list-style: none; margin: 0; padding: 0; }
.cf-lateral__categorias li {
  display: flex;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
  padding: .6rem 0;
  border-bottom: var(--borde-quieto);
  font-size: .9rem;
}
.cf-lateral__categorias a { text-decoration: none; color: var(--tinta); }
.cf-lateral__categorias a:hover { color: var(--ocre-texto); }
.cf-lateral__categorias span { color: var(--tinta-suave); font-size: .8rem; }
.cf-lateral__destacados { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--30); }
.cf-lateral__destacados li { position: relative; padding-left: 1rem; font-size: .9rem; line-height: 1.5; }
.cf-lateral__destacados li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--amarillo);
}
.cf-lateral__destacados a { text-decoration: none; color: var(--tinta); }
.cf-lateral__destacados a:hover { color: var(--ocre-texto); }
.cf-lateral__suscripcion {
  background: var(--destaque);
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  padding: var(--wp--preset--spacing--60);
}
.cf-lateral__titulo { margin: 0 0 var(--wp--preset--spacing--30); font-family: var(--serif); font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.cf-lateral__suscripcion p:not(.cf-lateral__titulo) { margin: 0 0 var(--wp--preset--spacing--50); color: var(--tinta-suave); font-size: .85rem; line-height: 1.6; }

/* ==========================================================================
   Imagen destacada de las páginas: banda recortada, no cartel.
   Las destacadas del sitio miden 640px de ancho (11 de las 14 medidas el
   2026-08-06). Estirarlas a `alignwide` (1160px) las escala 1,81x y las
   emborrona, además de comerse la primera pantalla. Aquí van a la anchura
   del texto y recortadas en altura: 1,19x de escala y la lectura sigue.
   ========================================================================== */
.cf-imagen-banda {
  max-width: 760px;
  margin-inline: auto;
}
.cf-imagen-banda img {
  display: block;
  width: 100%;
  /* Sin esto manda el atributo `height` del HTML y la proporción se ignora. */
  height: auto;
  aspect-ratio: 29 / 10;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radio-card);
}
.cf-imagen-banda figcaption {
  margin-top: var(--wp--preset--spacing--30);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: none;
}
/* En móvil una banda de 2,9/1 se queda en un hilo: se abre a 2/1. */
@media (max-width: 600px) {
  .cf-imagen-banda img { aspect-ratio: 2 / 1; }
}

/* ==========================================================================
   Páginas de contenido largo.
   Ocho listas seguidas se leen como una sola: cada tipo de lista lleva su
   propio tratamiento para que la página tenga ritmo. La jerarquía viene del
   aire, de los filetes y de las tarjetas blancas — nunca del color de fondo,
   que en esta paleta solo da 1,14:1 y no separa nada.
   ========================================================================== */

/* El cuerpo pone a cada `li` una viñeta ámbar absoluta y una sangría. Aquí las
   listas son tarjetas, pasos y filas, así que se retiran de una vez y cada
   componente dibuja lo suyo. Va ANTES que los componentes a propósito: empatan
   en especificidad y el desempate lo gana el que se declara después. */
.cf-pagina-larga :where(ul, ol) > :where(li) {
  padding-left: 0;
}
.cf-pagina-larga :where(ul, ol) > :where(li)::before {
  content: none;
  position: static;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

/* ---- Andamiaje de sección ---- */
.cf-seccion { padding-top: var(--seccion-y); }
.cf-seccion__intro { margin-bottom: var(--wp--preset--spacing--90); }
.cf-seccion__titulo {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 var(--wp--preset--spacing--50);
  max-width: 24ch;
}
.cf-seccion__entrada { margin: 0; color: var(--tinta-suave); line-height: 1.75; }

/* ---- La frase que abre: serif grande, sin comillas ---- */
.cf-declaracion {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.85rem);
  line-height: 1.35;
  font-weight: 400;
  color: var(--tinta);
  margin: 0 0 var(--wp--preset--spacing--70);
  max-width: 26ch;
  text-wrap: balance;
}
.cf-declaracion em { color: var(--ocre-texto); font-style: italic; }

/* ---- Cita con firma. El filete ámbar hace de comilla ---- */
/* Sin fondo ni caja: el filete ámbar hace de comilla y lo demás es aire. Hay
   que apagar a mano el relleno y el fondo de la cita genérica del cuerpo. */
.cf-cita {
  margin: 0;
  padding: 0 0 0 clamp(1.25rem, 3vw, 2.25rem);
  background: none;
  border: 0;
  border-left: 2px solid var(--amarillo);
  border-radius: 0;
  font-size: inherit;
  font-style: normal;
  line-height: inherit;
}
.cf-cita p {
  font-family: var(--serif);
  font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem);
  font-style: italic;
  line-height: 1.65;
  color: var(--tinta);
  margin: 0 0 var(--wp--preset--spacing--50);
  max-width: 52ch;
}
.cf-cita p:last-of-type { margin-bottom: var(--wp--preset--spacing--60); }
.cf-cita footer {
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--tinta-suave);
  font-style: normal;
}
.cf-cita footer strong { display: block; font-weight: 600; color: var(--tinta); font-size: .88rem; }

/* ---- Beneficios: tarjetas blancas con número ---- */
.cf-beneficios {
  display: grid;
  /* 18rem deja tres columnas en 1056px y evita que caigan cuatro tarjetas
     estrechas donde el texto se parte en cinco líneas. */
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--wp--preset--spacing--60);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: beneficio;
}
/* Son siete: la séptima se quedaría sola en su fila. Cuando eso pasa, ocupa
   la fila entera y se coloca en horizontal, que llena mejor que una tarjeta
   suelta y medio vacía. */
.cf-beneficio:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
  align-items: baseline;
}
.cf-beneficio:last-child:nth-child(3n + 1)::before { margin-bottom: 0; }
.cf-beneficio:last-child:nth-child(3n + 1) h3 { grid-column: 2; margin-bottom: var(--wp--preset--spacing--20); }
.cf-beneficio:last-child:nth-child(3n + 1) p { grid-column: 2; }
.cf-beneficio {
  counter-increment: beneficio;
  background: var(--tarjeta);
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
  box-shadow: var(--sombra-card);
  max-width: none;
}
.cf-beneficio::before {
  content: counter(beneficio, decimal-leading-zero);
  display: block;
  font-family: var(--serif);
  font-size: .95rem;
  color: var(--ocre-texto);
  margin-bottom: var(--wp--preset--spacing--40);
}
.cf-beneficio h3 {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 var(--wp--preset--spacing--30);
}
.cf-beneficio p { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--tinta-suave); max-width: none; }

/* ---- Situaciones: dos columnas separadas por filete, con marca ámbar ---- */
.cf-situaciones {
  display: grid;
  /* 22rem fuerza dos columnas en 1056px: con tres, cada frase se parte y la
     lista deja de leerse de un vistazo. */
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: 0 var(--wp--preset--spacing--100);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cf-situaciones li {
  position: relative;
  padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--50) 2rem;
  border-bottom: var(--borde-quieto);
  line-height: 1.7;
  max-width: none;
}
.cf-situaciones li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--wp--preset--spacing--50) + .62em);
  width: 12px;
  height: 2px;
  background: var(--amarillo);
}

/* ---- Proceso: espina vertical con pasos numerados ---- */
.cf-proceso {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: paso;
}
.cf-proceso li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 var(--wp--preset--spacing--90) clamp(3rem, 5vw, 4rem);
  max-width: none;
}
.cf-proceso li:last-child { padding-bottom: 0; }
/* La espina se detiene en el último paso: no debe sobresalir. */
.cf-proceso li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: clamp(1.1rem, 1.9vw, 1.5rem);
  top: 2.6rem;
  bottom: .4rem;
  width: 1px;
  background: rgba(3, 61, 88, .14);
}
.cf-proceso li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(2.2rem, 3.8vw, 3rem);
  height: clamp(2.2rem, 3.8vw, 3rem);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--papel);
  border: 1px solid var(--amarillo);
  font-family: var(--serif);
  font-size: .95rem;
  color: var(--ocre-texto);
}
.cf-proceso h3 {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
  margin: .35rem 0 var(--wp--preset--spacing--30);
}
.cf-proceso p { margin: 0; line-height: 1.75; color: var(--tinta-suave); max-width: none; }

/* ---- Comparativa: el mensaje central del sitio ---- */
/* Son tres y se comparan entre sí: o caben las tres o se apilan. Con `auto-fit`
   caían a 2+1 en tableta y la tercera —la que importa— quedaba suelta y a
   media anchura, como si fuera una nota al pie. */
.cf-comparativa {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--60);
}
@media (min-width: 900px) {
  .cf-comparativa { grid-template-columns: repeat(3, 1fr); }
}
.cf-comparativa__col {
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
  background: var(--tarjeta);
}
/* La columna propia se distingue por el borde y la paja, no por el fondo:
   la paja sola da 1,43:1 contra el papel y no dibujaría la caja. */
.cf-comparativa__col--propia {
  background: var(--destaque);
  border: 1px solid var(--borde);
}
.cf-comparativa__col h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--wp--preset--spacing--40);
}
.cf-comparativa__col p { margin: 0 0 var(--wp--preset--spacing--40); font-size: .92rem; line-height: 1.72; color: var(--tinta-suave); max-width: none; }
.cf-comparativa__col p:last-child { margin-bottom: 0; }
.cf-comparativa__etiqueta {
  display: inline-block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ocre-texto);
  margin-bottom: var(--wp--preset--spacing--30);
}
/* Sobre `destaque` el ocre baja a 6,77:1, y esto es versalita de 11px: el
   sistema lo prohíbe en texto pequeño. La columna propia ya se distingue por
   el fondo y el borde, así que su etiqueta va en tinta (11,0:1). */
.cf-comparativa__col--propia .cf-comparativa__etiqueta { color: var(--tinta); }

/* ---- Mitos: el bulo en cursiva apagada, la respuesta en tinta ---- */
.cf-mitos { list-style: none; margin: 0; padding: 0; }
.cf-mitos li {
  display: grid;
  grid-template-columns: minmax(11rem, 17rem) 1fr;
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--80);
  padding: var(--wp--preset--spacing--70) 0;
  border-top: var(--borde-quieto);
  max-width: none;
}
.cf-mitos li:last-child { border-bottom: var(--borde-quieto); }
.cf-mito__bulo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  margin: 0;
  max-width: none;
}
.cf-mito__respuesta { margin: 0; line-height: 1.75; max-width: none; }
.cf-mito__respuesta strong { color: var(--ocre-texto); font-weight: 600; }
@media (max-width: 640px) {
  .cf-mitos li { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
}

/* ---- Nota discreta al pie de una sección (fuentes, avisos) ---- */
.cf-nota {
  font-size: .78rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  margin: var(--wp--preset--spacing--60) 0 0;
  max-width: none;
}

/* ---- Anchuras del cuerpo de una página ----
   La caja `.cf-cuerpo` sale a lo ancho desde la plantilla y el ancho de
   lectura se decide aquí. Así una página puede sacar una rejilla fuera de la
   columna de texto sin que haya que darle plantilla propia. */
.cf-cuerpo > *,
.cf-cuerpo > .entry-content > * {
  max-width: 47.5rem;
  margin-inline: auto;
}
/* `post-content` envuelve el contenido en `.entry-content`: si se le pone el
   tope a ella, la rejilla de dentro nunca puede salir de la columna. El tope
   va en sus hijos, no en ella. */
.cf-cuerpo > .entry-content { max-width: none; }
.cf-cuerpo > .cf-pagina-larga,
.cf-cuerpo > .entry-content > .cf-pagina-larga { max-width: none; }

.cf-pagina-larga {
  padding-inline: clamp(1.25rem, 4vw, 2rem);
  /* Cierra con el mismo aire con el que separa secciones. Sin esto, la página
     acaba justo donde empieza la banda del asesor, que lleva fondo propio: si
     el último bloque es un párrafo cuela por su margen, pero si es una cita o
     una lista —que van a margen cero— el texto queda pegado al color. */
  padding-block-end: var(--seccion-y);
}
/* La primera sección ya viene con aire desde la banda de la imagen. */
.cf-pagina-larga > .cf-seccion--primera { padding-top: var(--wp--preset--spacing--110); }
/* Y por eso el cuerpo no debe añadir el suyo encima: sumaban 208px de hueco
   entre la entradilla y el primer párrafo, que en las páginas sin imagen
   destacada se veía como un salto. El espacio lo gobierna el patrón. */
.cf-cuerpo:has(.cf-pagina-larga) { padding-top: 0; }

/* La columna de lectura y su versión ancha comparten eje: la rejilla respira
   más, pero el centro no se mueve y el borde izquierdo no queda dentado. */
.cf-columna { max-width: 47.5rem; margin-inline: auto; }
.cf-columna--ancha { max-width: 66rem; }
.cf-columna-interior { max-width: 47.5rem; margin-inline: auto; }

/* ---- Figura dentro del texto ----
   Respira entre secciones sin cortar la lectura. Va a la anchura de la
   columna, no a lo ancho: comprueba el tamaño del original antes de elegir
   dónde ponerla, que en esta mediateca la mayoría son de 640px. */
.cf-figura {
  margin: 0;
  max-width: 47.5rem;
  margin-inline: auto;
}
.cf-figura img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio-card);
}
.cf-figura--alta img { aspect-ratio: 3 / 2; }
.cf-figura figcaption {
  margin-top: var(--wp--preset--spacing--40);
  padding-left: var(--wp--preset--spacing--50);
  border-left: 2px solid var(--amarillo);
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  max-width: 52ch;
}
@media (max-width: 600px) {
  .cf-figura img { aspect-ratio: 3 / 2; }
}

/* ---- Temas: bloques de «en qué te puedo ayudar» ----
   Las páginas de `sesiones-*` y las de servicio son listas de asuntos con
   título y uno o dos párrafos. Ni tarjeta ni viñeta: filete ámbar corto
   encima del titular y aire entre bloques. Se lee como un índice comentado. */
.cf-temas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cf-temas > li {
  padding: var(--wp--preset--spacing--90) 0;
  border-top: var(--borde-quieto);
  max-width: none;
}
.cf-temas > li:last-child { border-bottom: var(--borde-quieto); }
.cf-temas h3 {
  position: relative;
  margin: 0 0 var(--wp--preset--spacing--40);
  padding-top: var(--wp--preset--spacing--40);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
  max-width: 34ch;
}
.cf-temas h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 1.5px;
  background: var(--amarillo);
}
.cf-temas p { margin: 0 0 var(--wp--preset--spacing--40); line-height: 1.78; max-width: 62ch; }
.cf-temas p:last-child { margin-bottom: 0; }

/* Variante a dos columnas cuando los bloques son cortos y hay muchos. */
.cf-temas--dos { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 0 var(--wp--preset--spacing--100); }

/* ---- Preguntas frecuentes ----
   `details`/`summary` nativos: se abren sin JavaScript, se pueden buscar con
   Ctrl+F cuando el navegador lo soporta y son accesibles de serie. */
.cf-faq { display: grid; gap: 0; }
.cf-faq details {
  border-top: var(--borde-quieto);
}
.cf-faq details:last-of-type { border-bottom: var(--borde-quieto); }
.cf-faq summary {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--50);
  padding: var(--wp--preset--spacing--60) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta);
  transition: color var(--transicion);
}
.cf-faq summary::-webkit-details-marker { display: none; }
.cf-faq summary:hover { color: var(--ocre-texto); }
/* El signo lo dibuja el CSS: dos trazos, y al abrir se queda el horizontal. */
.cf-faq summary::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 14px;
  height: 14px;
  margin-top: .35em;
  background:
    linear-gradient(var(--ocre-texto), var(--ocre-texto)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--ocre-texto), var(--ocre-texto)) center / 1.5px 14px no-repeat;
  transition: transform var(--transicion), opacity var(--transicion);
}
.cf-faq details[open] summary::after {
  background: linear-gradient(var(--ocre-texto), var(--ocre-texto)) center / 14px 1.5px no-repeat;
}
.cf-faq details > div {
  padding: 0 0 var(--wp--preset--spacing--80);
  max-width: 62ch;
}
.cf-faq details > div > p { margin: 0 0 var(--wp--preset--spacing--50); line-height: 1.78; max-width: none; }
.cf-faq details > div > p:last-child { margin-bottom: 0; }

/* Grupo de preguntas, para no soltar diecinueve seguidas. */
.cf-faq-grupo + .cf-faq-grupo { margin-top: var(--wp--preset--spacing--110); }
.cf-faq-grupo__titulo {
  margin: 0 0 var(--wp--preset--spacing--50);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ocre-texto);
}

/* ---- Índice de un hub ----
   Los dos hubs (`consultoria-filosofica` y `sesiones-*`) enumeraban sus temas
   sin enlazar con las páginas hijas, que existen y están escritas. Aquí cada
   tarjeta lleva a la suya. Enlaza solo la píldora final, no la tarjeta entera:
   un enlace que envuelve titular, lista e imagen da un nombre accesible
   larguísimo — la misma decisión que en «Motivos» de la portada. */
.cf-indice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--wp--preset--spacing--60);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cf-indice > li {
  display: flex;
  flex-direction: column;
  background: var(--tarjeta);
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
  box-shadow: var(--sombra-card);
  max-width: none;
  transition: box-shadow var(--transicion), border-color var(--transicion);
}
.cf-indice > li:hover { box-shadow: var(--sombra-hover); border-color: var(--borde); }
.cf-indice h3 {
  margin: 0 0 var(--wp--preset--spacing--40);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}
.cf-indice ul {
  list-style: none;
  margin: 0 0 var(--wp--preset--spacing--60);
  padding: 0;
  display: grid;
  gap: var(--wp--preset--spacing--20);
}
.cf-indice ul li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  max-width: none;
}
.cf-indice ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1.5px;
  background: var(--amarillo);
}
/* La píldora se pega abajo para que todas queden a la misma altura. */
.cf-indice .cf-pill { margin-top: auto; align-self: flex-start; }

/* ---- Ficha de credenciales ----
   Formación, publicaciones y reconocimientos de la página del asesor. Filas de
   etiqueta y contenido: se recorre con la vista sin leerlo entero, que es como
   se leen las credenciales. */
.cf-credenciales { list-style: none; margin: 0; padding: 0; }
.cf-credenciales > li {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 1fr;
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--80);
  padding: var(--wp--preset--spacing--60) 0;
  border-top: var(--borde-quieto);
  max-width: none;
}
.cf-credenciales > li:last-child { border-bottom: var(--borde-quieto); }
.cf-credenciales dt,
.cf-credenciales .cf-credenciales__etiqueta {
  margin: 0;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ocre-texto);
  line-height: 1.5;
  padding-top: .15em;
}
.cf-credenciales p { margin: 0 0 var(--wp--preset--spacing--30); line-height: 1.75; max-width: none; }
.cf-credenciales p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .cf-credenciales > li { grid-template-columns: 1fr; }
}

/* ---- Contacto: formulario y datos, a dos columnas ----
   La página traía su propio CSS con tipografías y colores de Astra, ajeno al
   sistema. Aquí usa los del tema y el formulario sigue siendo el de Contact
   Form 7, que se inserta con do_shortcode desde el patrón. */
/* La foto y los datos a la izquierda, el formulario a la derecha. Es la
   excepción de esta página: la banda de imagen del encabezado empujaba el
   formulario fuera de la primera pantalla, y aquí el formulario es a lo que
   se viene. Con la foto en columna, ambos se ven de entrada. */
.cf-contacto {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--wp--preset--spacing--100);
  align-items: start;
}
.cf-contacto__foto { margin: 0 0 var(--wp--preset--spacing--80); max-width: none; }
.cf-contacto__foto img { aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .cf-contacto { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--90); }
  /* En una sola columna manda el formulario: la foto y los datos, después. */
  .cf-contacto__forma { order: 1; }
  .cf-contacto__aparte { order: 2; }
  .cf-contacto__foto { display: none; }
}
.cf-contacto__forma {
  background: var(--tarjeta);
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
  box-shadow: var(--sombra-card);
}
.cf-contacto__titulo {
  margin: 0 0 var(--wp--preset--spacing--60);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
}
.cf-contacto__privacidad {
  margin: var(--wp--preset--spacing--50) 0 0;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  max-width: none;
}
.cf-contacto__aparte { display: grid; gap: var(--wp--preset--spacing--80); }
.cf-contacto__promesas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--40); }
.cf-contacto__promesas li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.7;
  font-size: .94rem;
  max-width: none;
}
.cf-contacto__promesas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 14px;
  height: 1.5px;
  background: var(--amarillo);
}
.cf-contacto__directo { display: grid; gap: var(--wp--preset--spacing--20); }
.cf-contacto__directo a { font-family: var(--serif); font-size: 1.1rem; color: var(--enlace); }

/* Los campos de Contact Form 7 heredan del tema, que no los conoce. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: .8rem 1rem;
  margin-top: .3rem;
}
.wpcf7-form textarea { min-height: 8rem; resize: vertical; }
.wpcf7-form p { margin: 0 0 var(--wp--preset--spacing--50); max-width: none; }
.wpcf7-form label { font-size: .82rem; font-weight: 600; color: var(--tinta); }
.wpcf7-form input[type="submit"] {
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 1rem 1.9rem;
  border: 1px solid var(--tinta);
  border-radius: var(--radio-pill);
  background: var(--tinta);
  color: #fff;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.wpcf7-form input[type="submit"]:hover {
  background: var(--amarillo);
  color: var(--tinta);
  border-color: var(--amarillo);
}
.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label { font-size: .82rem; font-weight: 400; color: var(--tinta-suave); }

/* ---- Correcciones del formulario (2026-08-06) ----
   Dos fallos que se vieron en la copia:

   1. Los campos se salían 33px por la derecha. El tema NO fija
      `box-sizing: border-box` en ningún sitio, así que un `width: 100%` con
      relleno y borde suma por encima de su caja. Se arregla en los controles,
      que es donde escuece; hacerlo global a estas alturas movería medidas ya
      verificadas en el resto del sitio.
   2. La casilla de aceptación medía 13x13px, la de serie del navegador. Muy
      por debajo de los 24px de objetivo táctil recomendados, y con un área
      pulsable de solo 16px de alto. */
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select,
.wpcf7-form button {
  box-sizing: border-box;
  max-width: 100%;
}

/* La casilla: más grande, y todo el renglón pulsable. */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  /* 44px de alto mínimo: el objetivo táctil que recomienda WCAG. */
  min-height: 44px;
  padding: .55rem .75rem .55rem .6rem;
  margin-left: -.6rem;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background var(--transicion);
}
.wpcf7-form .wpcf7-acceptance label:hover { background: var(--susurro); }
.wpcf7-form input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  accent-color: var(--tinta);
  cursor: pointer;
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  padding-top: .1rem;
}
.wpcf7-form .wpcf7-acceptance a { color: var(--enlace); }

/* Mensajes de validación del propio Contact Form 7. */
.wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  color: #8a2b18;
}
.wpcf7-form .wpcf7-response-output {
  margin: var(--wp--preset--spacing--50) 0 0;
  padding: var(--wp--preset--spacing--50);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: .88rem;
  line-height: 1.6;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
  border-color: var(--borde-fuerte);
}

/* ---- Alta en la newsletter ----
   El formulario es el 218 de MC4WP, insertado por shortcode. Los estilos
   cuelgan de `.mc4wp-form`, que es su propia clase, para que se vea bien
   aparezca donde aparezca; `.cf-suscripcion` solo pone la caja.

   Ya sin `!important`: el 2026-08-07 se limpiaron los estilos en línea desde el
   panel (ver seo/formulario-mc4wp-218.html), así que la hoja del tema manda.
   El único estilo en línea que queda es el `display:none` de la trampa
   antispam, que lo pone el plugin y tiene que seguir ahí. */
.cf-suscripcion {
  max-width: 30rem;
  margin-top: var(--wp--preset--spacing--80);
  padding: var(--wp--preset--spacing--80);
  background: var(--tarjeta);
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-card);
}
.mc4wp-form input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: .8rem 1rem;
  margin-bottom: var(--wp--preset--spacing--50);
}
.mc4wp-form input[type="email"]:focus { border-color: var(--borde-fuerte); }

/* La casilla, al mínimo táctil de 44px y con todo el renglón pulsable.
   `:not(.screen-reader-text)` no es un detalle: la etiqueta accesible del campo
   de correo lleva esa clase, y el tema la esconde con `clip-path` para que siga
   leyéndose en voz alta. Si entrara aquí, se le aplicaría un `display` que la
   ocultaría también a los lectores de pantalla, que es justo lo contrario de
   para lo que está. */
.mc4wp-form label:not(.screen-reader-text) {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 44px;
  padding: .55rem .75rem .55rem .6rem;
  margin-left: -.6rem;
  border-radius: var(--radio);
  cursor: pointer;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  transition: background var(--transicion);
}
.mc4wp-form label:not(.screen-reader-text):hover { background: var(--susurro); }

/* Y la etiqueta accesible hay que volver a esconderla a mano.
   MC4WP trae su propia hoja con `.mc4wp-form label` (0,1,1), que le gana por
   especificidad a `.screen-reader-text` (0,1,0) y le devuelve el ancho y el
   alto. Resultado: el texto «Tu correo electrónico» se leía en voz alta, que es
   lo que se buscaba, pero también se veía encima del campo. */
.mc4wp-form label.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.mc4wp-form input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  accent-color: var(--tinta);
  cursor: pointer;
}
.mc4wp-form a { color: var(--enlace); text-decoration: underline; }
.mc4wp-form input[type="submit"] {
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 1rem 1.9rem;
  border: 1px solid var(--tinta);
  border-radius: var(--radio-pill);
  background: var(--tinta);
  color: #fff;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.mc4wp-form input[type="submit"]:hover {
  background: var(--amarillo);
  color: var(--tinta);
  border-color: var(--amarillo);
}
.mc4wp-alert { margin-top: var(--wp--preset--spacing--50); font-size: .88rem; line-height: 1.6; }

/* ---- Puente del artículo hacia el servicio ----
   Banda destaque entre el pie del artículo y los recomendados. Va antes que
   ellos a propósito: primero se ofrece el servicio y solo después más blog.
   El fondo `destaque` no separa por sí solo —en esta paleta da 1,14:1— así que
   la caja se dibuja con borde. */
.cf-puente {
  padding: var(--seccion-y) clamp(1.25rem, 4vw, 2rem);
}
.cf-puente__caja {
  max-width: 45rem;
  margin-inline: auto;
  padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
  background: var(--destaque);
  border: 1px solid var(--borde);
  border-radius: var(--radio-card);
}
.cf-puente__titulo {
  margin: 0 0 var(--wp--preset--spacing--40);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  font-weight: 700;
  line-height: 1.25;
  max-width: 26ch;
}
.cf-puente__texto {
  margin: 0 0 var(--wp--preset--spacing--70);
  line-height: 1.75;
  color: var(--tinta-suave);
  max-width: 58ch;
}
/* El ocre sobre `destaque` baja a 6,77:1 y el sistema lo prohíbe en versalita
   pequeña: el antetítulo de esta banda va en tinta. */
.cf-puente .cf-eyebrow { color: var(--tinta); }
.cf-puente .cf-eyebrow::before { background: var(--ocre-texto); }

/* ---- El formulario cuando aparece suelto en una entrada ----
   Cuatro entradas del blog llevan el formulario incrustado en su contenido, sin
   la caja de las páginas de servicio. Sin esto salían sin ningún formato: los
   estilos colgaban de `.cf-contacto__forma` en vez de del propio formulario,
   que es el mismo error que ya habíamos cometido con el de MC4WP. Ahora los
   campos se estilan desde `.wpcf7-form` y la caja se la damos aquí. */
.cf-cuerpo .wpcf7 {
  max-width: 47.5rem;
  margin: var(--wp--preset--spacing--100) auto;
  padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
  background: var(--tarjeta);
  border: var(--borde-quieto);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-card);
}

/* ==========================================================================
   Cabecera repensada (2026-08-07): cuatro entradas y sin saltos de línea.
   «Contacto» sale del menú porque el botón ya lleva ahí; «Quién soy» entra
   en «Qué es». En anchos medios el teléfono se oculta, y por debajo de 900px
   entra el menú de hamburguesa en vez de dejar que la fila se parta en dos.
   ========================================================================== */
.cf-cabecera .wp-block-navigation__container > * > a,
.cf-cabecera .wp-block-navigation-item__content { white-space: nowrap; }

/* En anchos de portátil el número no cabe, pero el teléfono no puede
   desaparecer: es la señal de confianza mejor colocada del sitio y el público
   es en parte mayor. Se queda el icono, pulsable y con su etiqueta accesible.
   (Antes: display:none — el teléfono no existía entre 900 y 1150px.) */
@media (min-width: 900px) and (max-width: 1150px) {
  .cf-cabecera .cf-telefono { font-size: 0; gap: 0; padding: .5rem; }
  .cf-cabecera .cf-telefono svg { width: 18px; height: 18px; }
}

/* La hamburguesa del core entra a 600px; aquí hace falta antes. Se replican
   sus selectores con la media invertida para ganar a su regla de min-width. */
@media (min-width: 600px) and (max-width: 899px) {
  .cf-cabecera .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .cf-cabecera .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
}

/* ==========================================================================
   Menú móvil repensado (2026-08-07). Lo de serie era difícil de pulsar, no
   dejaba hacer scroll hasta «Blog», y al abrirse desaparecían el teléfono y
   el botón de contacto. Ahora: objetivos táctiles de 44px o más, panel con
   scroll, y una barra fija abajo con el teléfono y el contacto en grande
   mientras el menú está abierto.
   ========================================================================== */
@media (max-width: 899px) {
  /* La fila: logo más contenido + teléfono + hamburguesa. El botón de
     contacto sale de la fila (no cabe) y reaparece en la barra del menú. */
  .cf-cabecera .cf-logo--marca { width: 144px; height: 18px; }
  .cf-cabecera .wp-block-group.alignwide { gap: .75rem !important; }
  .cf-cabecera .cf-telefono { font-size: .78rem; }
  .cf-cabecera .cf-cabecera__acciones .wp-block-buttons { display: none; }

  /* La hamburguesa: tres líneas de verdad (el icono del core lleva dos y no
     se lee como menú) y a la DERECHA del todo. */
  .cf-cabecera .wp-block-group.alignwide > .wp-block-navigation { order: 3; }
  .cf-cabecera .wp-block-navigation__responsive-container-open {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }
  .cf-cabecera .wp-block-navigation__responsive-container-open svg { display: none; }
  .cf-cabecera .wp-block-navigation__responsive-container-open::before {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: var(--tinta);
    box-shadow: 0 -7px 0 var(--tinta), 0 7px 0 var(--tinta);
  }

  /* El panel abierto: papel, scroll propio y sitio abajo para la barra. */
  .cf-cabecera .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--papel) !important;
    padding: 4.5rem 1.5rem 10rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .cf-cabecera .is-menu-open .wp-block-navigation__responsive-container-close {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Las cuatro entradas, como titulares: grandes, a toda anchura, separadas
     por filetes. Los hijos, indentados tras un filete ámbar y con 44px. */
  .cf-cabecera .is-menu-open .wp-block-navigation__container {
    width: 100%;
    gap: 0 !important;
  }
  .cf-cabecera .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
    width: 100%;
    display: block;
    border-bottom: var(--borde-quieto);
    padding: .4rem 0;
  }
  .cf-cabecera .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tinta);
  }
  .cf-cabecera .is-menu-open .wp-block-navigation__submenu-icon { display: none; }
  .cf-cabecera .is-menu-open .wp-block-navigation__submenu-container {
    border-left: 2px solid var(--amarillo);
    padding: .1rem 0 .4rem 1rem !important;
    margin: 0 0 .35rem !important;
    background: none !important;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
  }
  .cf-cabecera .is-menu-open .wp-block-navigation__submenu-container a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--sans);
    font-size: .95rem;
    color: var(--tinta-suave);
    padding: 0 !important;
  }

  /* Con el menú abierto, el teléfono y el contacto no se van: bajan a una
     barra fija, por encima del panel, en grande. */
  .cf-cabecera:has(.is-menu-open) .cf-cabecera__acciones {
    position: fixed;
    left: .75rem;
    right: .75rem;
    /* Elevada del borde: el aviso de cookies vive abajo del todo y la tapaba. */
    bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px));
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .8rem 1rem;
    background: var(--papel);
    border: var(--borde-quieto);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-lift);
  }
  .cf-cabecera:has(.is-menu-open) .cf-cabecera__acciones .cf-telefono { font-size: 1rem; }
  .cf-cabecera:has(.is-menu-open) .cf-cabecera__acciones .wp-block-buttons {
    display: flex;
    flex: 1 1 auto;
  }
  .cf-cabecera:has(.is-menu-open) .cf-cabecera__acciones .wp-block-button { width: 100%; }
  .cf-cabecera:has(.is-menu-open) .cf-cabecera__acciones .wp-block-button__link {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    white-space: nowrap;
    font-size: .82rem !important;
    padding: .95rem 1rem !important;
  }
  .cf-cabecera:has(.is-menu-open) .cf-cabecera__acciones { gap: .75rem; }
  .cf-cabecera:has(.is-menu-open) .cf-cabecera__acciones .cf-telefono { font-size: .95rem; }
}

/* ==========================================================================
   Motivos en móvil: tira deslizable con scroll-snap, sin JavaScript.
   Seis tarjetas apiladas eran ~2.500px de página; así ocupan una, la
   siguiente asoma por el borde para invitar al gesto, y al ser scroll
   nativo funciona con dedo, teclado o lo que sea.
   ========================================================================== */
@media (max-width: 700px) {
  .cf-tres--deslizable {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    /* El div lleva margin-inline:auto EN LÍNEA (centra la rejilla de
       escritorio), y un estilo en línea gana a la hoja: sin el !important el
       sangrado no se aplicaba y las tarjetas se cortaban a 20px del borde. */
    margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1.25rem)) !important;
    max-width: none !important;
    padding-inline: var(--wp--style--root--padding-left, 1.25rem);
    /* La sombra de la tarjeta baja 26px; sin este aire la caja de scroll la
       corta en seco. El margen negativo devuelve el ritmo a la sección. */
    padding-bottom: 2.25rem;
    margin-bottom: -1.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cf-tres--deslizable::-webkit-scrollbar { display: none; }
  .cf-tres--deslizable > * {
    /* Relativo a la pantalla, no al contenedor: así la tarjeta llena el ancho
       con un asomo de la siguiente, mida lo que mida el padding de la caja. */
    flex: 0 0 min(78vw, 22rem);
    scroll-snap-align: center;
  }
}

/* Los dos elementos clicables de la franja (consulta gratis y teléfono) se
   visten como sus hermanos de texto, con el subrayado como única seña de que
   se pueden pulsar. Nada de azul enlace aquí: la franja es una lista de
   hechos, no un menú. */
.cf-franja li a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--amarillo);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.cf-franja li a:hover { color: var(--ocre-texto); }