/* ============================================================================
   «Pedir cita» (inc/bloque-pedir-cita.php)
   Una sola tarjeta: título, «¿Qué tipo de terapia buscas?» y debajo el panel
   del grupo escogido. Los formularios y la agenda de dentro pierden su propia
   tarjeta (lo hace el PHP).
   ========================================================================== */
.c-pedir-cita__selector { margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50); }
.c-pedir-cita__selector .c-field { margin: 0; }
.c-pedir-cita__panel[hidden] { display: none; }
.c-pedir-cita__panel > .c-form,
.c-pedir-cita__panel > .c-reserva { padding: 0; background: none; border: 0; box-shadow: none; }

/* Pareja y neuropsicología fuera de su página: el aviso con el botón. */
.c-pedir-cita__aviso {
  padding: var(--wp--preset--spacing--50);
  border-left: var(--wp--custom--border--width-strong) solid var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--base);
}
.c-pedir-cita__aviso p { margin: 0 0 var(--wp--preset--spacing--30); }
.c-pedir-cita__aviso p:last-child { margin-bottom: 0; }
.c-pedir-cita__aviso-titulo { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--primary); }

/* La agenda tiene una tira de días con su propio desplazamiento, pero como
   columna de una rejilla (c-formsec, hero de primera cita) la tarjeta no
   encogía por debajo de esa tira (min-width: auto) y ensanchaba la página. */
/* Toda la cadena: la columna de la rejilla, la tarjeta y las cajas flexibles
   de la agenda, hasta la tira, que es la que desplaza. */
.c-formsec__inner > *,
.c-ihero__inner > *,
.c-pedir-cita,
.c-pedir-cita__panel,
.c-pedir-cita .c-reserva,
.c-pedir-cita .c-reserva > *,
.c-pedir-cita .c-reserva__paso > * { min-width: 0; max-width: 100%; }

/* Ancho máximo de la tarjeta, en todas partes (Miquel, 13 oct 2026): sola en
   una sección (/reservar/) ocupaba toda la fila en escritorio. 43.5rem es el
   ancho que ya tiene en la columna de las páginas de servicio; en columnas
   más estrechas (hero de primera cita) manda la columna. */
.c-pedir-cita {
  max-width: min(100%, 43.5rem);
  margin-inline: auto;
}

/* ============================================================================
   Tarjeta fija en el hero (primera cita, 9 oct 2026)
   ----------------------------------------------------------------------------
   Con el hero a dos columnas, la columna de la tarjeta se queda pegada bajo la
   cabecera mientras se lee la columna de texto, y se suelta al acabar el hero.

   ⚠️ El hero lleva `overflow: hidden` (heros.css) para recortar los trazos, y
   un antepasado con overflow hidden es un contenedor de desplazamiento: el
   sticky se pegaría a él y no a la ventana, o sea, no haría nada. `clip`
   recorta igual y no crea ese contenedor.

   La distancia arriba la pone pedir-cita.js en --cds-pedir-cita-top: bajo la
   cabecera si la tarjeta cabe en la ventana; si no cabe (la agenda crece al
   escoger día), negativa, para que la tarjeta suba hasta enseñar su final.
   ========================================================================== */
.c-ihero:has(.c-pedir-cita) {
  overflow: clip;
}

@container (min-width: 56rem) {
  .c-ihero__inner > :has(> .c-pedir-cita) {
    position: sticky;
    top: var(--cds-pedir-cita-top, calc(var(--wp-admin--admin-bar--height, 0px) + var(--cds-header-alto, 68px) + var(--wp--preset--spacing--40)));
    align-self: start;
  }
}