/* ==========================================================================
   Calma de Ser — capa de plantillas
   Bloques que solo aparecen en las páginas interiores y que no estaban en la
   librería A–G. Extiende componentes.css: solo tokens, sin literales, cada
   bloque autocontenido y responsive con @container.
   ========================================================================== */

/* P1 · Lista larga de señales ("Puede ayudar si…") -------------------------- */
/* El bloque de reconocimiento de las páginas de servicio: 8–13 puntos. A una
   columna sería un muro; a dos, con filete por ítem, se lee por barrido. */
.c-signals { margin: 0; padding: 0; list-style: none; display: grid; }
@container (min-width: 48rem) {
  .c-signals { grid-template-columns: repeat(2, 1fr); column-gap: var(--wp--preset--spacing--70); }
}
.c-signals li {
  display: flex;
  gap: var(--wp--preset--spacing--30);
  align-items: flex-start;
  padding-block: var(--wp--preset--spacing--40);
  border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
}
.c-signals__note { margin: var(--wp--preset--spacing--50) 0 0; max-width: var(--wp--custom--layout--measure); }

/* P2 · Dos vías: presencial u online --------------------------------------- */
/* No es una tabla comparativa (B17): aquí cada vía es una puerta a su landing,
   así que el enlace manda y va anclado abajo para que las dos igualen altura. */
.c-ways { display: grid; gap: var(--wp--custom--space--grid-gap); }
@container (min-width: 48rem) { .c-ways { grid-template-columns: repeat(2, 1fr); } }
.c-way {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
}
.c-way--alt { background-color: var(--wp--preset--color--surface-alt); }
.c-way__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--typography--weight--regular);
  font-size: var(--wp--custom--typography--size--h3);
  line-height: var(--wp--custom--typography--leading--h3);
  letter-spacing: var(--wp--custom--typography--tracking--display);
  color: var(--wp--preset--color--primary);
  text-wrap: pretty;
}
.c-way p { margin: 0; }
.c-way__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); }
.c-way__list li { display: flex; gap: var(--wp--preset--spacing--30); align-items: flex-start; }
.c-way__link { margin-top: auto; align-self: flex-start; }

/* P3 · Sección de formulario en la propia página --------------------------- */
/* Cinco documentos de copy no enlazan a /primera-cita-psicologica/: bajan al
   formulario de la misma página. Por eso el formulario es una sección con id
   propio, no un apéndice del pie. */
.c-formsec__inner { display: grid; gap: var(--wp--preset--spacing--60); align-items: start; }
@container (min-width: 56rem) {
  .c-formsec__inner { grid-template-columns: 2fr 3fr; gap: var(--wp--preset--spacing--70); }
}
.c-formsec__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); align-items: flex-start; }
.c-formsec__body p { margin: 0; max-width: var(--wp--custom--layout--measure); }
.c-formsec__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); }
.c-formsec__steps li { display: flex; gap: var(--wp--preset--spacing--30); align-items: flex-start; }

/* P4 · Aviso de calma ------------------------------------------------------- */
/* Pieza corta de tranquilización, para poner justo antes de un formulario o de
   un precio. Fondo crema cálido y filete rosa: no es una alerta del sistema. */
.c-reassure {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  max-width: var(--wp--custom--layout--measure);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--surface-alt);
  border-left: var(--wp--custom--border--width-strong) solid var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
}
.c-reassure p { margin: 0; font-size: var(--wp--preset--font-size--small); }
.c-reassure__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--typography--weight--regular);
  font-size: var(--wp--preset--font-size--large);
  line-height: var(--wp--custom--typography--leading--h4);
  color: var(--wp--preset--color--primary);
}

/* P5 · Tabla de tarifas ----------------------------------------------------- */
/* Cinco grupos de servicio, cada uno su propia tabla con caption. No es la tabla
   comparativa B17: aquí las filas son servicios y la columna de precio manda. */
.c-rates-group { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.c-rates-group + .c-rates-group { margin-top: var(--wp--preset--spacing--70); }
/* La tabla no puede encoger por debajo de su min-content (376–423 px según el
   grupo) y .page recorta lo que sobra, así que sin este contenedor la columna de
   precio queda inalcanzable en móvil. Mismo patrón que B17. */
.c-rates-group__scroll { overflow-x: auto; }
.c-rates-group__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--typography--weight--regular);
  font-size: var(--wp--custom--typography--size--h3);
  line-height: var(--wp--custom--typography--leading--h3);
  letter-spacing: var(--wp--custom--typography--tracking--display);
  color: var(--wp--preset--color--primary);
}
.c-rates-table { width: 100%; border-collapse: collapse; text-align: left; }
.c-rates-table caption { text-align: left; padding-bottom: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.c-rates-table th,
.c-rates-table td {
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
  vertical-align: top;
  font-weight: var(--wp--custom--typography--weight--regular);
}
.c-rates-table th { color: var(--wp--preset--color--contrast); }
.c-rates-table td { font-size: var(--wp--preset--font-size--small); }
.c-rates-table__note { color: var(--wp--preset--color--muted); }
.c-rates-table__price {
  white-space: nowrap;
  text-align: right;
  font-size: var(--wp--preset--font-size--large) !important;
  line-height: var(--wp--custom--typography--leading--tight);
  color: var(--wp--preset--color--primary);
}

/* P11 · Índice de secciones (salto directo) --------------------------------- */
/* El copy de tarifas abre con ocho enlaces a las secciones de la propia página:
   quien llega ya sabe qué servicio busca y no debe recorrer nueve bloques. Son
   píldoras, no chips de filtro: navegan, no filtran, así que no llevan estado
   activo ni aria-pressed. */
.c-jump { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.c-jump__title {
  margin: 0;
  font-size: var(--wp--custom--typography--size--eyebrow);
  letter-spacing: var(--wp--custom--typography--tracking--eyebrow);
  text-transform: uppercase;
  font-weight: var(--wp--custom--typography--weight--regular);
  color: var(--wp--preset--color--muted);
}
.c-jump__list { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin: 0; padding: 0; list-style: none; }
.c-jump__link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  min-height: var(--wp--custom--layout--tap);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  background-color: var(--wp--preset--color--surface);
  border: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--pill);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  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);
}
.c-jump__link:hover { border-color: var(--wp--preset--color--primary); background-color: var(--wp--custom--state--overlay-hover); color: var(--wp--preset--color--primary-hover); }
.c-jump__link::after { content: "↓"; color: var(--wp--preset--color--muted); }

/* P12 · Fila de precio dentro de un bloque de texto ------------------------- */
/* Varios servicios del copy no son una tabla: son un bloque explicativo con uno
   o dos precios. La cifra necesita jerarquía propia sin montar una tabla de dos
   filas. */
.c-fee { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; }
.c-fee li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--wp--preset--spacing--30);
  border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
}
.c-fee__what { font-size: var(--wp--preset--font-size--small); }
/* Solo la cifra va aquí: el `nowrap` la protege de partirse, pero un texto largo
   en este hueco desborda la tarjeta sin scroll posible. La unidad o la duración
   van siempre en .c-fee__what. */
.c-fee__price {
  white-space: nowrap;
  font-size: var(--wp--preset--font-size--large);
  line-height: var(--wp--custom--typography--leading--tight);
  color: var(--wp--preset--color--primary);
}
/* Bloque de servicio: título, precios, explicación y CTA opcional. */
.c-service {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
}
.c-service--alt { background-color: var(--wp--preset--color--surface-alt); }
.c-service__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--typography--weight--regular);
  font-size: var(--wp--custom--typography--size--h3);
  line-height: var(--wp--custom--typography--leading--h3);
  letter-spacing: var(--wp--custom--typography--tracking--display);
  color: var(--wp--preset--color--primary);
  text-wrap: pretty;
}
.c-service p { margin: 0; font-size: var(--wp--preset--font-size--small); max-width: var(--wp--custom--layout--measure); }
.c-service__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin-top: auto; }
.c-service__stack { display: grid; gap: var(--wp--custom--space--grid-gap); }
@container (min-width: 48rem) { .c-service__stack--2 { grid-template-columns: repeat(2, 1fr); } }

/* P6 · Episodio de podcast -------------------------------------------------- */
.c-episode { display: grid; gap: var(--wp--preset--spacing--40); padding: var(--wp--custom--space--card-pad); background-color: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); }
@container (min-width: 40rem) { .c-episode { grid-template-columns: 10rem 1fr; align-items: start; } }
.c-episode__art { width: 100%; aspect-ratio: 1; object-fit: cover; }
.c-episode__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.c-episode__meta { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.c-episode__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--typography--weight--regular);
  font-size: var(--wp--custom--typography--size--h3);
  line-height: var(--wp--custom--typography--leading--h3);
  letter-spacing: var(--wp--custom--typography--tracking--display);
  color: var(--wp--preset--color--primary);
  text-wrap: pretty;
}
.c-episode p { margin: 0; font-size: var(--wp--preset--font-size--small); }
/* Hueco del reproductor: en producción, iframe cargado tras el consentimiento. */
.c-episode__player {
  display: grid;
  place-items: center;
  min-height: var(--wp--preset--spacing--80);
  padding: var(--wp--preset--spacing--40);
  background-color: var(--wp--preset--color--surface-alt);
  border-radius: var(--wp--custom--radius--pill);
  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);
}

/* P7 · Vacante -------------------------------------------------------------- */
.c-job { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--50); background-color: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); }
.c-job__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--typography--weight--regular);
  font-size: var(--wp--custom--typography--size--h3);
  line-height: var(--wp--custom--typography--leading--h3);
  letter-spacing: var(--wp--custom--typography--tracking--display);
  color: var(--wp--preset--color--primary);
}
.c-job__meta { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin: 0; padding: 0; list-style: none; }
.c-job__body { display: grid; gap: var(--wp--preset--spacing--50); }
@container (min-width: 48rem) { .c-job__body { grid-template-columns: repeat(2, 1fr); } }
.c-job h4 { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--large); line-height: var(--wp--custom--typography--leading--h4); color: var(--wp--preset--color--primary); }
.c-job ul { margin: 0; padding-left: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--small); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.c-job li::marker { color: var(--wp--preset--color--primary); }

/* P8 · Búsqueda y resultados ------------------------------------------------ */
.c-search { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); align-items: flex-end; max-width: var(--wp--custom--layout--narrow); }
.c-search .c-field { flex: 1 1 16rem; }
.c-results { margin: 0; padding: 0; list-style: none; }
.c-results li { padding-block: var(--wp--preset--spacing--40); border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--border); }
.c-results li:last-child { border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--border); }
.c-result__kind { display: block; margin-bottom: var(--wp--preset--spacing--10); 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); }
.c-result__title {
  margin: 0 0 var(--wp--preset--spacing--10);
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--typography--weight--regular);
  font-size: var(--wp--custom--typography--size--h3);
  line-height: var(--wp--custom--typography--leading--h3);
  letter-spacing: var(--wp--custom--typography--tracking--display);
}
.c-result__title a { color: var(--wp--preset--color--primary); text-decoration: none; }
.c-result__title a:hover { color: var(--wp--preset--color--primary-hover); }
.c-result p { margin: 0; font-size: var(--wp--preset--font-size--small); max-width: var(--wp--custom--layout--measure); }

/* P9 · Bloque vacío con explicación ---------------------------------------- */
/* El copy es explícito: si una profesional no ha escrito artículos, el bloque no
   se muestra. Este estado es para el editor, no para el visitante. */
.c-nocontent {
  padding: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--surface-alt);
  border: var(--wp--custom--border--width) dashed var(--wp--preset--color--border);
  color: var(--wp--preset--color--contrast);
}
.c-nocontent p { margin: 0; font-size: var(--wp--preset--font-size--small); }

/* P10 · Editorial largo con índice ------------------------------------------ */
/* Para un manifiesto de 15 H2 sin tarjetas ni rejillas: lo único que necesita es
   ritmo y una forma de orientarse. El índice se pega en desktop y desaparece en
   móvil, donde ocuparía más de lo que ayuda. */
.c-longread__inner { display: grid; gap: var(--wp--preset--spacing--60); align-items: start; }
@container (min-width: 64rem) {
  .c-longread__inner { grid-template-columns: 16rem 1fr; gap: var(--wp--preset--spacing--70); }
  .c-longread__index { position: sticky; top: var(--wp--preset--spacing--60); }
}
.c-longread__index { display: none; }
@container (min-width: 64rem) { .c-longread__index { display: block; } }
.c-longread__index h2 {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: var(--wp--custom--typography--size--eyebrow);
  letter-spacing: var(--wp--custom--typography--tracking--eyebrow);
  text-transform: uppercase;
  font-weight: var(--wp--custom--typography--weight--regular);
  color: var(--wp--preset--color--muted);
}
.c-longread__index ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.c-longread__index a {
  display: block;
  padding: var(--wp--preset--spacing--20) 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--wp--custom--typography--leading--caption);
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
}
.c-longread__index a:hover { color: var(--wp--preset--color--primary-hover); background-color: var(--wp--custom--state--overlay-hover); }
/* En un manifiesto el ritmo pesa más que en un artículo de blog: los H2 llevan
   más aire por delante y un filete que los separa del bloque anterior. */
.c-longread .c-prose { max-width: var(--wp--custom--layout--measure); }
.c-longread .c-prose h2 {
  margin-top: calc(var(--wp--custom--typography--flow--heading) * 1.4);
  padding-top: var(--wp--preset--spacing--50);
  border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--border);
}
.c-longread .c-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }