/* ============================================================================
   LO QUE VIENE DE LA MAQUETA SE VE COMO EN LA MAQUETA
   ----------------------------------------------------------------------------
   Dos diferencias entre WordPress y la maqueta que no son de ningún componente
   sino del entorno, y que salían en la comparación de estilos calculados:

   1 · theme.json da a TODOS los titulares la display, peso 400, tracking de
       display y un tamaño por nivel. La maqueta no tiene theme.json: un <h3>
       sin regla de la librería hereda la tipografía de texto. Medido:
       .c-steps__title MyPro → GPro, .c-pasos__titulo interlineado 35 → 26.
       Aquí se devuelven esas propiedades al valor del navegador SOLO dentro de
       lo convertido, con especificidad (0,0,1): igual que la de theme.json —y
       esta hoja se imprime después, así que gana— y por debajo de cualquier
       regla de la librería, que empieza en (0,1,0). Fuera de `.cds-libreria`
       —la portada, los artículos— theme.json sigue mandando: la portada tiene
       cuatro <h3> sin clase que cuentan con él.

   2 · Las listas con tick —c-way__list, c-checklist, los pasos del
       formulario…— llevan en la maqueta un SVG en línea en cada punto. El
       conversor lo quita, marca la lista con `cds-ticks` y esta regla lo
       vuelve a pintar con la misma máscara que «Señales».

   3 · El bloque de botones del núcleo centra verticalmente sus botones
       (`align-items: center`); las cajas de botones de la librería no. Con dos
       botones de distinta altura se nota. Solo dentro de lo convertido.
   ========================================================================== */
:where(.cds-libreria) .wp-block-buttons.is-layout-flex {
  align-items: normal;
}
:where(.cds-libreria) :is(h1, h2, h3, h4, h5, h6) {
  font-family: revert;
  font-weight: revert;
  font-size: revert;
  line-height: revert;
  letter-spacing: revert;
}
/* …salvo el peso de h2 y h3: el del navegador es negrita (700), y en la
   tipografía de texto (sans) los titulares van a 400 en todo el proyecto.
   Una clase de la librería que ponga su propio peso sigue ganando (0,1,0).
   Pedido por Miquel el 7-10-2026. */
:where(.cds-libreria) :is(h2, h3) {
  font-weight: 400;
}

.cds-ticks > li::before {
  content: "";
  flex: none;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.2em;
  background-color: var(--wp--preset--color--accent-warm);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17'%3E%3Cpath d='M1 9l6 6 12-13' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17'%3E%3Cpath d='M1 9l6 6 12-13' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* La versión numerada: la misma lista en <ol>, y en lugar del check, el número
   en el mismo naranja. «1.», no «01» (revisión de Bárbara, 8-10-2026, R8). Se
   usa con el bloque Lista en «numerada» y la clase cds-ticks.
   El contador es propio de la lista: no depende de nada de fuera, así que la
   contención de estilo de .cmp (container-type) no lo rompe, como sí rompía el
   de tarifas. */
ol.cds-ticks {
  counter-reset: cds-paso;
  list-style: none;
  padding-left: 0;
}
ol.cds-ticks > li {
  counter-increment: cds-paso;
}
ol.cds-ticks > li::before {
  content: counter(cds-paso) ".";
  width: auto;
  min-width: 1.25em;
  height: auto;
  margin-top: 0;
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
  color: var(--wp--preset--color--accent-warm);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.2em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Si la librería no pone el punto en flex, el tick se quedaría encima del
   texto. Especificidad mínima: la regla de la librería, si existe, manda. */
:where(.cds-ticks) > li {
  display: flex;
  gap: var(--wp--preset--spacing--30);
  align-items: flex-start;
}

/* El logotipo del cajón del menú es el mismo componente que el de la barra
   (patterns/header.php): mismo tamaño. La librería lo dejaba en 6.5rem. */
.c-drawer__bar .c-header__logo img {
  width: 7.5rem;
}

/* Menú abierto: la página de detrás no se desplaza (componentes.js pone la
   clase mientras hay un .c-drawer visible). */
html.cds-sin-scroll {
  overflow: hidden;
}

/* Los CTA de la cabecera con line-height 1.4. Pedido el 2026-09-16 tras
   verlos en Chrome: con el 1.2 de .c-btn la versal quedaba visiblemente alta.
   ⚠️ Medido a 1×, la diferencia es de décimas de píxel (versal −0,65 px con
   1.2, −0,85 con 1.4, −0,45 con `normal`): lo que cambia es dónde ajusta
   Chrome la línea base al píxel, y eso depende de la pantalla. Se deja lo que
   se ve mejor en la pantalla de trabajo. Son botones de una línea: la altura
   la fija min-height y no cambia. */
.c-header__actions--desktop .c-btn {
  line-height: 1.4;
}

/* La cabecera mide siempre lo mismo: el alto reducido que la librería
   reservaba al pegarse (padding-block spacing-20). Ya no crece arriba del
   todo ni encoge al bajar, y la barra del cajón del menú lleva el mismo
   padding para que el logotipo no salte al abrir o cerrar. Pedido el
   2026-09-16. */
.c-header__bar,
.c-header.is-stuck .c-header__bar,
.c-drawer__bar {
  padding-block: var(--wp--preset--spacing--20);
}
.c-header__bar {
  transition: box-shadow var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease);
}

/* Cabecera pegada: el fondo lo pinta .c-header (de borde a borde), no la
   barra interior. La librería daba a la barra fondo crema y sombra al
   pegarse; en la variante azul ya se había retirado (overrides.css) y aquí
   se hace lo mismo en la clara. Pedido el 2026-09-16. */
.c-header.is-stuck {
  background-color: var(--wp--preset--color--base);
  /* El filete también de borde a borde: la barra lo llevaba y se cortaba en
     el contenedor (visto en como-trabajamos, 2026-09-16). */
  border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
}

.c-header.is-stuck .c-header__bar {
  background-color: transparent;
  box-shadow: none;
  border-bottom-color: transparent;
}

.c-header--sobre-hero.is-stuck {
  background-color: var(--wp--preset--color--primary);
  border-bottom-color: transparent;
}

/* Los trazos de los heros, opacos. heros.css les daba 0.4, 0.7 y 0.85 según
   el hero; pedido el 2026-09-16 quitarles toda transparencia. Misma
   especificidad (0,2,0) que las reglas de heros.css: gana por orden. */
.c-ihero .c-trazo,
.c-ihero--center .c-trazo,
.c-ihero__media .c-trazo,
.c-ihero--band .c-trazo--edge,
.c-ihero--band .c-trazo--floor,
.c-home-hero .c-trazo,
.c-home-hero .c-trazo-deco {
  opacity: 1;
}

/* Móvil: la cabecera se esconde al bajar y vuelve al subir (componentes.js
   pone y quita c-header--oculta). Es sticky, así que basta desplazarla. */
@media (max-width: 63.99rem) {
  .c-header {
    transition: transform 200ms ease;
  }
  .c-header--oculta {
    transform: translateY(-100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-header { transition: none; }
}

/* Menú del cajón: en los apartados con hijos, el texto es un enlace a la
   página del padre y solo el galón despliega (inc/nav-walker.php). El
   <button> queda justo antes del <ul>, así que el pliegue por hermano
   adyacente de componentes.css sigue funcionando. */
.c-drawer__item--con-hijos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.c-drawer__item--con-hijos > .c-drawer__link {
  flex: 1 1 auto;
  width: auto; /* la librería le da 100 % y echaba el galón a la línea de abajo */
  min-width: 0;
}
.c-drawer__toggle--galon {
  flex: none;
  width: auto;
  min-width: var(--wp--custom--layout--tap);
  justify-content: center;
}
.c-drawer__item--con-hijos > .c-drawer__sub {
  flex-basis: 100%;
}

/* El galón: cerrado apunta a la derecha, abierto hacia abajo (el SVG está
   dibujado hacia abajo; se gira -90° mientras está cerrado). En móvil, enlace a
   la izquierda y galón en el borde derecho (lo de arriba); en escritorio, el
   galón justo al lado del texto. Pedido por Miquel el 5-10-2026. */
/* El galón es un botón redondo, separado del enlace: filete del color de los
   separadores, que pasa a azul al pasar el ratón, y relleno azul cuando el
   apartado está abierto. Así se ve que el texto lleva a la página y el círculo
   despliega. Mismo lenguaje que los botones del tema (redondos, filete de
   1 px, azul). Pedido por Miquel el 5-10-2026. */
.c-drawer__toggle.c-drawer__toggle--galon {
  align-self: center;
  width: var(--wp--custom--layout--tap);
  height: var(--wp--custom--layout--tap);
  min-width: var(--wp--custom--layout--tap);
  min-height: 0;
  margin-inline-start: var(--wp--preset--spacing--20);
  padding: 0;
  border: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--round);
  color: var(--wp--preset--color--primary);
  transition: background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease),
              border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease),
              color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease);
}
.c-drawer__toggle.c-drawer__toggle--galon:is(:hover, :focus-visible) {
  border-color: var(--wp--preset--color--primary);
  background-color: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}
.c-drawer__toggle.c-drawer__toggle--galon[aria-expanded="true"] {
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--on-primary);
}
.c-drawer__toggle.c-drawer__toggle--galon[aria-expanded="true"]:is(:hover, :focus-visible) {
  border-color: var(--wp--preset--color--primary-hover);
  background-color: var(--wp--preset--color--primary-hover);
}
.c-drawer__toggle--galon svg {
  transform: rotate(-90deg);
  transition: transform var(--wp--custom--motion--duration-fast, 150ms) var(--wp--custom--motion--ease, ease);
}
.c-drawer__toggle--galon[aria-expanded="true"] svg {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .c-drawer__toggle--galon svg { transition: none; }
}
@media (min-width: 64rem) {
  .c-drawer__item--con-hijos > .c-drawer__link {
    flex: 0 1 auto;
  }
}

/* La barra de CTA pegada abajo en móvil: botones con line-height 0.9, para
   que un texto a dos líneas quepa sin crecer. Pedido el 2026-09-16. */
.c-ctabar .c-btn {
  line-height: 0.9;
}

/* Con sesión iniciada, la barra de administración de WordPress es fija y
   tapaba la cabecera pegada. WordPress expone su alto en
   --wp-admin--admin-bar--height (32px; 46px bajo 782px) y la quita del flujo
   fijo bajo 600px. Pedido el 2026-09-16. */
body.admin-bar .c-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}
body.admin-bar .c-drawer {
  top: var(--wp-admin--admin-bar--height, 32px);
}
@media screen and (max-width: 600px) {
  body.admin-bar .c-header,
  body.admin-bar .c-drawer {
    top: 0;
  }
}

/* Listas dentro de contenedores cds-libreria: la capa quita las clases de
   layout (inc/layout-libreria.php) y con ellas el margen entre bloques, así
   que una lista de ticks o señales quedaba pegada a los botones o al párrafo
   siguiente (gap medido: 0px en terapia-online y psicologo-masnou). Solo si
   viene algo detrás. Pedido el 2026-09-16. */
.cds-libreria > :is(ul, ol).wp-block-list:not(:last-child) {
  margin-bottom: var(--wp--preset--spacing--50);
}

/* Saltos con almohadilla (#pedir-cita, #t-cita, índice de la página…): el
   destino se detiene por debajo de la cabecera pegada, no debajo de ella.
   --cds-header-alto lo pone componentes.js; 68px si aún no está. En móvil
   la cabecera se esconde al bajar, pero un salto no es un desplazamiento
   del usuario y vuelve a mostrarla: la reserva sigue haciendo falta.
   Pedido el 2026-09-17. */
[id] {
  scroll-margin-top: calc(var(--cds-header-alto, 68px) + var(--wp--preset--spacing--40));
}

/* Tarjeta de profesional: el nombre es un enlace al perfil (inc/bloque-ficha.php).
   Hereda el color y va sin filete; el filete sale al pasar o al enfocar.
   Pedido el 2026-09-17. */
.c-pro__name-link {
  color: inherit;
  text-decoration: none;
}
.c-pro__name-link:hover,
.c-pro__name-link:focus-visible {
  color: var(--wp--preset--color--primary-hover);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Saltos por almohadilla (#pedir-cita, índice, «elige tu forma»…) con
   desplazamiento suave. El destino ya reserva la cabecera con
   scroll-margin-top. Con `prefers-reduced-motion` va al instante.
   Pedido el 2026-09-21. */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Feedback 18-09-2026 · piezas nuevas ─────────────────────────────── */
/* Microbeneficios bajo los CTA del hero y bajo «por qué online». */
.c-ihero__beneficios {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: var(--wp--custom--typography--tracking--upper);
  text-transform: uppercase;
  opacity: 0.9;
}
/* «Qué necesitas»: cuatro ítems grandes con tick. */
.c-necesitas {
  font-size: var(--wp--preset--font-size--large);
  gap: var(--wp--preset--spacing--40);
}
/* Bloque de SEO local (dirección, cómo llegar, teléfono, WhatsApp). */
.c-local {
  margin-top: var(--wp--preset--spacing--60);
  padding: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--surface);
  border-left: 4px solid var(--wp--preset--color--primary);
}
.c-local__titulo {
  margin: 0 0 var(--wp--preset--spacing--40);
  font-size: var(--wp--custom--typography--size--h3);
  color: var(--wp--preset--color--primary);
}
.c-local__datos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--wp--preset--spacing--30);
}
@container (min-width: 48rem) {
  .c-local__datos { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); }
}
.c-local__datos strong {
  display: block;
  font-size: var(--wp--custom--typography--size--caption);
  letter-spacing: var(--wp--custom--typography--tracking--eyebrow);
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-bottom: var(--wp--preset--spacing--10);
}

/* ── Tarifas (feedback 18-09-2026, págs. 64-67) ───────────────────────── */
/* El precio, protagonista. */
.c-fee__price {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1;
  color: var(--wp--preset--color--primary);
  white-space: nowrap;
}
/* Cada servicio, una tarjeta con el mismo patrón. */
.c-service {
  padding: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--surface);
  border: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
}
.c-service p { font-size: var(--wp--preset--font-size--medium); line-height: var(--wp--custom--typography--leading--body); }
.c-service .c-service__title { font-size: var(--wp--custom--typography--size--h3); }
/* Tarifas sin números de categoría (9-10-2026, Miquel): los antetítulos
   01–08 se quitaron del contenido (tools/revision-barbara-contenido.php,
   R48.1). Antes eran un contador CSS que salía «01» en todas las categorías:
   cada .cmp tiene container-type, y la contención de estilo no deja que un
   contador cruce de una sección a otra. */

/* El índice de la página («Consulta directamente el servicio que necesitas»)
   como una tabla de contenidos, no como píldoras. El titular es un H2 con el
   estilo de los demás (c-shout). Columnas de al menos 17rem: cuatro en
   escritorio, una en el móvil. Cada fila, con su filete y la flecha ↓ en el
   naranja de los checks: es un salto dentro de la página. */
.c-jump .c-jump__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  column-gap: var(--wp--preset--spacing--50);
  border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
}
.c-jump .c-jump__list > li {
  border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
}
.c-jump .c-jump__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  width: 100%;
  padding: var(--wp--preset--spacing--30) 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--primary);
}
.c-jump .c-jump__link::after {
  content: "↓";
  color: var(--wp--preset--color--accent-warm);
  transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease);
}
.c-jump .c-jump__link:is(:hover, :focus-visible) {
  background-color: transparent;
  color: var(--wp--preset--color--primary-hover);
}
.c-jump .c-jump__link:hover::after {
  transform: translateY(3px);
}
@media (prefers-reduced-motion: reduce) {
  .c-jump .c-jump__link::after { transition: none; }
}
/* CTA por categoría. */
.c-tarifas__cta { margin-top: var(--wp--preset--spacing--50); }
/* Pagos y política: información secundaria, compacta. */
.c-tarifas-secundario > .cmp__inner { padding-block: var(--wp--preset--spacing--60); }
.c-tarifas-secundario p, .c-tarifas-secundario li { font-size: var(--wp--preset--font-size--small); }
.c-tarifas-secundario .c-shout { font-size: var(--wp--preset--font-size--large); }
/* Más aire en móvil. */
@container (max-width: 47.99rem) {
  .page-id-23 .c-service { padding: var(--wp--preset--spacing--40); }
  .page-id-23 .c-fee { gap: var(--wp--preset--spacing--30); }
}

/* ── Vacantes plegadas en tarjeta (feedback págs. 68-69) ─────────────── */
.c-job--plegable {
  border: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
  background-color: var(--wp--preset--color--surface);
  padding: 0;
}
.c-job--plegable > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
  padding: var(--wp--preset--spacing--50);
  position: relative;
  padding-right: calc(var(--wp--preset--spacing--50) + 2.5rem);
}
.c-job--plegable > summary::-webkit-details-marker { display: none; }
.c-job--plegable > summary::after {
  content: "+";
  position: absolute;
  right: var(--wp--preset--spacing--50);
  top: 50%;
  transform: translateY(-50%);
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: var(--wp--custom--border--width) solid var(--wp--preset--color--primary);
  border-radius: var(--wp--custom--radius--round);
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1;
}
.c-job--plegable[open] > summary::after { content: "–"; }
.c-job__resumen-titulo {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--custom--typography--size--h3);
  line-height: var(--wp--custom--typography--leading--h3);
  color: var(--wp--preset--color--primary);
}
.c-job__resumen-linea {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
}
.c-job--plegable > :not(summary) { margin-inline: var(--wp--preset--spacing--50); }
.c-job--plegable > summary + * { margin-top: var(--wp--preset--spacing--40); }
.c-job--plegable > :last-child:not(summary) { margin-bottom: var(--wp--preset--spacing--50); }
.c-job--plegable p, .c-job--plegable li { max-width: var(--wp--custom--layout--measure); font-size: var(--wp--preset--font-size--medium); }
.c-job__h4 {
  margin-top: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--10);
  border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--custom--typography--size--eyebrow);
  letter-spacing: var(--wp--custom--typography--tracking--eyebrow);
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}

/* ── Sobre Calma: franja de datos centrada bajo el H1 ────────────────── */
/* Franja de datos centrada (sobre-calma): fuera de un hero dividido no
   hereda el flex ni el reset de lista de heros.css, así que se declara aquí.
   Mismo aspecto que la franja de los heros divididos: fila, sin viñetas,
   cada dato centrado con su subrayado a mano centrado bajo el valor. */
.c-ihero__meta--centro {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
  margin: var(--wp--preset--spacing--50) auto 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.c-ihero__meta--centro > li { margin: 0; }
.c-ihero__meta--centro strong { margin-inline: auto; }

/* ── Blog (feedback págs. 72-73) ─────────────────────────────────────── */
/* El filtro como navegación: píldoras con filete. */
.c-chips .c-chip {
  border: var(--wp--custom--border--width-strong) solid var(--wp--preset--color--primary);
  background-color: transparent;
}
.c-chips .c-chip[aria-current="true"] { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }

/* ── Blog: hero corto con el filtro dentro (pedido el 2026-10-07) ─────── */
/* Antes: hero alto, una sección aparte para los chips, y el primer artículo
   por debajo de la primera pantalla (943 px en escritorio, 1150 en móvil).
   Ahora los chips van en el hero, debajo de la entradilla, y el hero y la
   sección siguiente tienen menos aire entre ellos. */
/* Specificity de sobra: «main > .cmp:not(…) > .cmp__inner», más abajo, pone
   section-y + 20 px a todas las secciones y ganaba por orden. El padding de
   ARRIBA del hero no se toca: es el que lo separa de la barra de cabecera. */
main > .cmp.c-ihero--blog:not(:last-child) > .cmp__inner {
  padding-bottom: var(--wp--preset--spacing--50);
}
main > .c-ihero--blog + .cmp:not(:first-child) > .cmp__inner {
  padding-top: var(--wp--preset--spacing--60);
}
@container (min-width: 64rem) {
  .c-ihero--blog .c-trazo { width: 8rem; }
}

/* El filtro: los chips centrados y el recuento debajo. */
.c-ihero--blog .c-filters {
  width: 100%;
  flex-direction: column;
  /* componentes.css le da wrap. En columna y con wrap, «stretch» estira hasta
     la línea, y la línea mide lo que el hijo más ancho: la fila de chips salía
     de 1202 px en un móvil de 375 y no se deslizaba. */
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--30);
}
.c-ihero--blog .c-filters > nav { width: 100%; }
/* Gap y relleno algo menores que el chip de serie: así los 8 chips caben en
   UNA fila a 1440 px (pedían 1321 px y la fila tiene 1232). */
.c-ihero--blog .c-chips { justify-content: center; gap: var(--wp--preset--spacing--20); }
.c-ihero--blog .c-chip { white-space: nowrap; padding-inline: var(--wp--preset--spacing--30); }

/* Móvil: UNA fila que se desliza, en vez de 9 filas (492 px) de chips. Va
   de borde a borde de la pantalla, así el último chip sale cortado y se ve
   que la fila sigue. La categoría actual se pone a la vista con
   componentes.js. */
@container (max-width: 47.99rem) {
  .c-ihero--blog .c-filters > nav {
    width: auto;
    align-self: stretch;
    margin-inline: calc(-1 * var(--wp--custom--space--gutter-sm));
  }
  .c-ihero--blog .c-chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: var(--wp--preset--spacing--10) var(--wp--custom--space--gutter-sm);
    scroll-padding-inline: var(--wp--custom--space--gutter-sm);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .c-ihero--blog .c-chips::-webkit-scrollbar { display: none; }
  .c-ihero--blog .c-chips > li { flex: none; scroll-snap-align: start; }
}
/* El primer artículo, grande y en horizontal. Solo en listas de ARTÍCULOS
   (el <li> lleva una .c-post): sin el :has(), cualquier bucle de entradas lo
   heredaba, y en /sobre-calma/profesionales/ la primera terapeuta ocupaba la
   fila entera (5-10-2026). */
@container (min-width: 64rem) {
  .wp-block-post-template > li:first-child:has(> .c-post),
  .wp-block-post-template > .c-post:first-child { grid-column: 1 / -1; }
  .wp-block-post-template > li:first-child .c-post,
  .wp-block-post-template > .c-post:first-child { flex-direction: row; }
  .wp-block-post-template > li:first-child .c-post__media,
  .wp-block-post-template > .c-post:first-child .c-post__media { flex: 0 0 55%; }
  .wp-block-post-template > li:first-child .c-post__media img,
  .wp-block-post-template > .c-post:first-child .c-post__media img { height: 100%; aspect-ratio: 4 / 3; }
  .wp-block-post-template > li:first-child .c-post__title,
  .wp-block-post-template > .c-post:first-child .c-post__title { font-size: var(--wp--preset--font-size--x-large); }
  .wp-block-post-template > li:first-child .c-post__body,
  .wp-block-post-template > .c-post:first-child .c-post__body { justify-content: center; padding: var(--wp--preset--spacing--60); }
}
.c-post__leer { margin: auto 0 0; font-size: var(--wp--preset--font-size--small); }
/* La imagen del artículo, al ancho del texto. */
.c-article .c-post__media.wp-block-post-featured-image,
.c-post__media.wp-block-post-featured-image { max-width: var(--wp--custom--layout--measure); }
/* Newsletter con más personalidad: titular grande de pantalla y trazo. */
.c-news__title { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xx-large); line-height: var(--wp--custom--typography--leading--h2); }
/* Sobre la autora, al final del artículo. */
.c-autora {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--wp--preset--spacing--40);
  align-items: start;
  padding: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--surface);
  border-left: 4px solid var(--wp--preset--color--accent-warm);
  max-width: var(--wp--custom--layout--measure);
  /* Aire respecto al final del artículo: iba pegada al último párrafo (5-10-2026). */
  margin-block-start: var(--wp--preset--spacing--70);
}
.c-autora__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.c-autora__nombre { margin: 0; font-size: var(--wp--custom--typography--size--h3); }
.c-autora__rol { margin: 0.2em 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.c-autora__bio { margin: var(--wp--preset--spacing--30) 0 0; font-size: var(--wp--preset--font-size--small); }
.c-autora__enlace { display: inline-block; margin-top: var(--wp--preset--spacing--30); }

/* ── Presencial y online, más destacados (feedback págs. 52, 53, 57) ──
   Las dos vías ya son tarjetas (.c-way): filete de marca, fondo de
   superficie, titular grande y más aire. */
.c-ways { gap: var(--wp--preset--spacing--50); }
.c-way {
  padding: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--surface);
  border: var(--wp--custom--border--width-strong) solid var(--wp--preset--color--primary);
}
.c-way--alt { border-color: var(--wp--preset--color--accent-warm); }
.c-way .c-way__title {
  font-size: var(--wp--preset--font-size--x-large);
  color: var(--wp--preset--color--primary);
}

/* CTA apilados bajo un bloque de texto (psicologo-masnou «No tengo que poder
   con todo»): en columna, alineados a la izquierda, con aire arriba. */
.c-intro__cta {
  margin-top: var(--wp--preset--spacing--50);
  align-items: flex-start;
}

/* Enlaces («Ver todo el equipo →») con justificación del editor: la fila que
   deja inc/botones.php cuando la caja de botones está centrada o a la
   derecha. */
.cds-enlace-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  width: 100%;
}

/* Secciones de PLANTILLA (fichas de profesional, artículos, blog) seguidas,
   sin la franja crema de 32 px del blockGap del núcleo entre ellas: cada
   sección ya lleva su padding interior y el cambio de color hace de
   separación, como en las páginas normales. Pedido el 2026-09-30.
   El margen de 120 px sobre el pie (footer.css) no cambia. */
main > .cmp + .cmp,
main > .cmp + .wp-block-group.cmp,
main > * + .cmp {
  margin-block-start: 0;
}

/* Secciones de PLANTILLA (fichas, artículos, blog): van directamente dentro
   de <main> y WordPress les ponía su blockGap de 32 px, que dejaba tiras de
   fondo crema entre secciones de colores distintos. Las de las páginas no lo
   tienen (van dentro del contenido). Se quita el hueco y cada sección recibe
   16 px más de padding arriba y abajo para compensar el aire. 2026-09-30. */
main > .cmp {
  margin-block-start: 0;
  margin-block-end: 0;
}
main > .cmp:not(:first-child) > .cmp__inner {
  padding-top: calc(var(--wp--custom--space--section-y) + var(--wp--preset--spacing--40));
}
main > .cmp:not(:last-child) > .cmp__inner {
  padding-bottom: calc(var(--wp--custom--space--section-y) + var(--wp--preset--spacing--40));
}

/* Página de contacto: datos en una columna y mapa estático debajo.
   El mapa es, por ahora, un marcador 3:2 enlazado a Google Maps. */
.c-contacto__datos { grid-template-columns: 1fr !important; margin: var(--wp--preset--spacing--50) 0; }
.c-mapa { margin: 0; }
.c-mapa img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); }
.c-mapa figcaption { margin-top: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* Páginas legales: tablas cortas (proveedores, cookies) en letra pequeña,
   alineadas arriba y con desplazamiento propio si no caben en el móvil. */
.c-legal__tabla { margin: var(--wp--preset--spacing--40) 0; overflow-x: auto; font-size: var(--wp--preset--font-size--small); }
.c-legal__tabla table { min-width: 22rem; border-collapse: collapse; }
.c-legal__tabla th,
.c-legal__tabla td { padding: 0.6em 0.75em; text-align: left; vertical-align: top; border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); }
.c-legal__tabla thead th { font-weight: 600; background: var(--wp--preset--color--base); }
.c-legal .c-prose h3 { margin-top: var(--wp--preset--spacing--50); }

/* Confirmación de La isla: el texto centrado bajo el hero centrado. */
.c-isla-gracias .c-prose { margin-inline: auto; }

/* Ficha · «Mis artículos» (inc/bloque-ficha.php): en su propia ficha, el nombre
   de la autora en cada tarjeta sobra. Y el enlace al blog, debajo, con aire. */
.c-ficha-articulos .c-post__autora { display: none; }
.c-ficha-articulos__mas { margin: var(--wp--preset--spacing--50) 0 0; }

/* Una URL o una palabra muy larga dentro del texto de un artículo o una página
   no se corta sola y ensancha la página en el móvil («El duelo en niños»: 398 px
   en una pantalla de 375, 7-10-2026). `anywhere` y no `break-word`: dentro de
   una rejilla, solo `anywhere` reduce el ancho mínimo del bloque. */
.c-prose a,
.c-prose :is(p, li) { overflow-wrap: anywhere; }

/* Un formulario dentro del cierre (c-close, centrado): las etiquetas y los
   campos, alineados a la izquierda, y la tarjeta a un ancho de lectura. Lo pide
   el texto definitivo de /terapia-online/ (formulario corto final, 7-10-2026). */
.c-close .c-form {
  max-width: 40rem;
  margin-inline: auto;
  text-align: start;
}