/* ============================================================================
   HERO · mínimo
   ----------------------------------------------------------------------------
   El estilo «Hero · mínimo» (inc/hero.php) es el centrado con menos aire y
   sin trazos: para páginas de servicio secundarias, legales o listados.
   Las otras tres disposiciones son las de la librería (heros.css) tal cual.
   ========================================================================== */
.c-ihero--minimo .cmp__inner {
  padding-block: var(--wp--preset--spacing--60);
}
.c-ihero--minimo .c-ihero__lead {
  font-size: var(--wp--preset--font-size--medium);
}
.c-ihero--minimo .c-trazo,
.c-ihero--minimo .c-mark {
  display: none;
}

/* Cabecera transparente sobre el hero (c-header--sobre-hero): es fija y no
   ocupa sitio, así que el primer hero de la página reserva arriba al menos el
   alto de la barra (--cds-header-alto, que pone componentes.js; 68px si aún no
   está) más un margen. `max()` respeta el padding propio del hero cuando ya es
   mayor (escritorio). Visto en /terapia-online/ a 390px: el hilo de Ariadna
   empezaba a 48px bajo una barra de 68. Pedido el 2026-09-16. */
body:has(.c-header--sobre-hero) main > :first-child .c-ihero:not(.c-ihero--band):first-child > .c-ihero__inner,
body:has(.c-header--sobre-hero) main > :first-child .c-ihero:not(.c-ihero--band):first-child > .cmp__inner,
body:has(.c-header--sobre-hero) main > .c-ihero:not(.c-ihero--band):first-child > .cmp__inner {
  padding-top: max(
    var(--wp--custom--space--section-y),
    calc(var(--cds-header-alto, 68px) + var(--wp--preset--spacing--40))
  );
}
body:has(.c-header--sobre-hero) main > :first-child .c-ihero--band:first-child > .c-ihero__inner,
body:has(.c-header--sobre-hero) main > .c-ihero--band:first-child > .c-ihero__inner {
  padding-top: max(
    calc(var(--wp--custom--space--section-y) + var(--wp--preset--spacing--70)),
    calc(var(--cds-header-alto, 68px) + var(--wp--preset--spacing--40))
  );
}

/* Franja de datos del hero (25 minutos · modalidad · online · idiomas).
   Feedback 18-09-2026 y ajuste del 29-09: la etiqueta en sans, sin
   versalitas; el valor también en sans, con un SUBRAYADO A MANO
   debajo, como un trazo de rotulador. «Online» es un valor más (enlazado a
   terapia online), sin píldora. */
.c-ihero__meta {
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: var(--wp--custom--typography--tracking--text);
  text-transform: none;
  --cds-subrayado: var(--wp--preset--color--accent-warm);
}
/* Naranja sobre naranja no se ve; sobre el amarillo pálido (cmp--rosa) el
   naranja choca con el azul del texto y los botones. En los dos, azul. */
.cmp:is(.cmp--naranja, .cmp--rosa) .c-ihero__meta { --cds-subrayado: var(--wp--preset--color--primary); }

.c-ihero__meta strong,
.c-ihero--split .c-ihero__meta strong {
  display: block;
  width: fit-content;
  position: relative;
  margin-top: var(--wp--preset--spacing--10);
  padding-bottom: 0.3em;
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: var(--wp--custom--typography--weight--regular);
  letter-spacing: var(--wp--custom--typography--tracking--text);
  text-transform: none;
}
/* El subrayado: una pincelada que adelgaza hacia la derecha. Máscara SVG,
   así el color sale de --cds-subrayado según el fondo. */
.c-ihero__meta strong::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.15em;
  bottom: 0;
  height: 0.32em;
  background-color: var(--cds-subrayado);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1 7.2C28 5.4 74 3.6 126 3.7c30 .1 55 .9 73 2.3-17 .9-42 1.6-72 2C88 8.5 44 9.7 3 10.8z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1 7.2C28 5.4 74 3.6 126 3.7c30 .1 55 .9 73 2.3-17 .9-42 1.6-72 2C88 8.5 44 9.7 3 10.8z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
/* «Online» enlazado: mismo aspecto que los otros valores. */
.cmp .c-ihero__meta strong > a,
.cmp .c-ihero__meta a.c-chip {
  all: unset;
  color: inherit;
  cursor: pointer;
}
.cmp .c-ihero__meta strong > a:hover,
.cmp .c-ihero__meta strong > a:focus-visible { opacity: 0.8; }
.cmp .c-ihero__meta strong > a:focus-visible {
  outline: var(--wp--custom--state--focus-width) solid currentColor;
  outline-offset: 2px;
}
/* Un solo subrayado: el de pincel (::after del <strong>). En los heros naranja
   y lila la regla de enlaces de color.css (.cmp.cmp--naranja a:not(…), 0,3,1)
   volvía a poner el subrayado del navegador encima del `all: unset` de arriba,
   y los nombres de un capítulo salían con dos rayas (revisión de Bárbara,
   8-10-2026, R55.1). Al pasar el ratón vuelve el del enlace: sigue siendo un
   enlace. */
.cmp .c-ihero__meta strong > a:is(:link, :visited) {
  text-decoration: none;
}
.cmp .c-ihero__meta strong > a:is(:link, :visited):is(:hover, :focus-visible) {
  opacity: 0.8;
}

/* Cuando el valor son enlaces (las autoras de un capítulo: «Laura del Mar…,
   Marta Tarrida…»), el subrayado de pincel va debajo de CADA enlace y no de
   todo el valor: se lee como dos personas, y la coma queda fuera. Pedido por
   Miquel el 9-10-2026. Cada nombre es un bloque en línea: si no cabe, baja
   entero a la línea siguiente con su subrayado, sin partirse.
   El subrayado del <strong> se apaga en cuanto el valor lleva un enlace: hoy
   son las autoras y el «Online» enlazado de los servicios, que es un enlace
   solo y queda igual que antes. */
.c-ihero__meta strong:has(> a)::after {
  content: none;
}
.cmp .c-ihero__meta strong > a:is(:link, :visited) {
  position: relative;
  display: inline-block;
}
.cmp .c-ihero__meta strong > a::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.15em;
  bottom: -0.3em;
  height: 0.32em;
  background-color: var(--cds-subrayado);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1 7.2C28 5.4 74 3.6 126 3.7c30 .1 55 .9 73 2.3-17 .9-42 1.6-72 2C88 8.5 44 9.7 3 10.8z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1 7.2C28 5.4 74 3.6 126 3.7c30 .1 55 .9 73 2.3-17 .9-42 1.6-72 2C88 8.5 44 9.7 3 10.8z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* Cabecera transparente sobre una PRIMERA SECCIÓN azul que no es un grupo
   c-ihero (sobre-calma): la sección reserva el alto de la barra igual que
   los heros de franja (--band), que es lo que parece: título centrado.

   Hasta el 8 oct el aire lo daba, sin querer, una marca «arco» de 48px azul
   sobre azul, invisible, encima de «Nosotras». Al quitarla el antetítulo
   quedaba a 20px de la barra; con la fórmula del --band vuelve a ~160px. */
body:has(.c-header--sobre-hero) main .wp-block-post-content > .cmp:first-child:not(.c-ihero) > .cmp__inner {
  padding-top: max(
    calc(var(--wp--custom--space--section-y) + var(--wp--preset--spacing--70)),
    calc(var(--cds-header-alto, 68px) + var(--wp--preset--spacing--40))
  );
}

/* ============================================================================
   MÓVIL: HEROS CON MIGAS, SIN HUECOS DE SOBRA (Miquel, 9-10-2026)
   ----------------------------------------------------------------------------
   Medido a 375 px en 15 páginas:
     · 48 px vacíos entre la cabecera y las migas en casi todos los heros;
     · 120 px arriba y 120 abajo en los de banda (Voy a la Psico, capítulos):
       las migas empezaban a 189 px del borde de la pantalla;
     · 20 px entre las migas y el antetítulo, dos líneas pequeñas que se leían
       como un agujero.
   Las migas ya hacen de borde de arriba: basta un aire corto. NO se tocan los
   heros que van bajo la cabecera transparente (portada, secciones azules):
   allí el padding es el alto de la barra que los tapa, y sus reglas (arriba,
   body:has(.c-header--sobre-hero) …) son más específicas.
   ========================================================================= */
@container (max-width: 47.99rem) {
  .cmp:is(.c-ihero, .c-article-head) > .cmp__inner:has(.c-breadcrumb__list) {
    padding-top: var(--wp--preset--spacing--40);
  }
  .cmp:is(.c-ihero, .c-article-head) nav:has(> .c-breadcrumb__list) {
    margin-bottom: calc(var(--wp--preset--spacing--30) - var(--wp--preset--spacing--40));
  }

  /* Banda: el aire de abajo era para el trazo del suelo (72 px). Con el trazo
     a 40 px basta la mitad; el de arriba, también a 40 px, va a la derecha de
     las migas y no las toca. */
  .cmp.c-ihero--band > .c-ihero__inner {
    padding-bottom: var(--wp--preset--spacing--70);
  }
  .c-ihero--band .c-trazo--edge,
  .c-ihero--band .c-trazo--floor {
    height: 2.5rem;
  }
}

/* Voy a la Psico: mientras el hero va en una sola columna (la banda pasa a dos
   a partir de 56rem), el logo animado va arriba, antes de las migas, y
   centrado (Miquel, 9-10-2026). */
@container (max-width: 55.99rem) {
  .c-ihero__inner > .c-ihero__side:has(.c-logo-animado) {
    order: -1;
  }
  .c-ihero__inner > .c-ihero__side:has(.c-logo-animado) {
    align-items: center;
  }
  .c-ihero__inner > .c-ihero__side .c-logo-animado {
    max-width: 18rem;
    margin-inline: auto;
  }
}