/* ============================================================================
   FORMULARIO POR PASOS Y «LEER MÁS» · traídos de la maqueta v1.2
   ----------------------------------------------------------------------------
   Secciones 6 y 8 de maqueta/v1.2/v1.2.css, copiadas con un script. Los dos
   scripts que las mueven, pasos.js y leer.js, viven ya en assets/js/ y se
   encolan solo en las páginas cuyo contenido lleva `data-paso` o `data-leer`.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   6 · FORMULARIO POR PASOS · solo en primera-cita
   ----------------------------------------------------------------------------
   ⚠️ Los pasos 2 y 3 llevan `hidden` en el HTML y es pasos.js quien lo quita.
   Al revés sería más corto y estaría mal: si el JavaScript no corre, con
   `hidden` puesto por CSS quedaría medio formulario inalcanzable. Como está,
   sin JavaScript se ven los tres a la vez y se puede pedir cita igual.
   ------------------------------------------------------------------------- */
/* «Paso 1 de 3»: una línea de texto y una barra fina.
   ----------------------------------------------------------------------------
   Sustituye a la lista de tres piezas con el nombre de cada paso. En móvil
   ocupaba tres renglones —se ve en la captura— y repetía el nombre que el
   titular del paso dice dos centímetros más abajo.

   ⚠️ El texto usaba `--wp--preset--font-size--x-small`, un peldaño que me
   inventé: no está en tokens.css ni en theme.json. La declaración era inválida y
   el tamaño caía al heredado. Ahora usa `--size--caption`, que sí existe.
   ------------------------------------------------------------------------- */
.c-pasos__cuenta {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  margin: 0 0 var(--wp--preset--spacing--50);
  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-pasos__cuenta-txt {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.c-pasos__cuenta [data-cuenta-n] {
  color: var(--wp--preset--color--primary);
}

/* La barra se queda con lo que sobra de la línea: dice cuánto falta sin gastar
   ni una palabra más. */
.c-pasos__barra {
  flex: 1 1 auto;
  height: 2px;
  background-color: var(--wp--preset--color--border);
}

.c-pasos__barra > span {
  display: block;
  width: 33.33%;
  height: 100%;
  background-color: var(--wp--preset--color--primary);
  transition: width 240ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .c-pasos__barra > span { transition: none; }
}

.c-pasos__titulo {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--typography--weight--regular);
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--primary);
}

/* El titular recibe el foco al cambiar de paso, para que un lector de pantalla
   anuncie dónde está. No debe salir el recuadro del navegador por eso. */
.c-pasos__titulo:focus {
  outline: none;
}

.c-pasos__ayuda {
  margin: 0 0 var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
}

.c-pasos__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
}

/* «Atrás» primero en el código y a la izquierda: el orden de tabulación tiene
   que coincidir con lo que se ve. */
.c-pasos__nav .c-btn--ghost {
  margin-right: auto;
}

/* El repaso del último paso. */
.c-resumen {
  margin-bottom: var(--wp--preset--spacing--50);
  padding: var(--wp--preset--spacing--40);
  background-color: var(--wp--preset--color--surface);
}

.c-resumen__lista {
  margin: 0;
  display: grid;
  gap: var(--wp--preset--spacing--30);
}

.c-resumen__fila dt {
  font-size: var(--wp--custom--typography--size--caption);
  letter-spacing: var(--wp--custom--typography--tracking--text);
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.c-resumen__fila dd {
  margin: 0.15em 0 0;
  font-size: var(--wp--preset--font-size--small);
}

/* ----------------------------------------------------------------------------
   8 · «LEER MÁS» EN EL HERO · solo móvil
   ----------------------------------------------------------------------------
   Quien abre «primera cita» en un teléfono viene a pedir cita. Con los cuatro
   párrafos de introducción, el formulario empezaba a 1087 px, o sea a 1,29
   pantallas de un iPhone de 844 px de alto, y el primer campo a 1655 px. Se
   pliega a partir del segundo párrafo.

   El botón es un enlace, no un botón de acción: no hace nada irreversible y no
   debe competir con «Pedir primera valoración», que sí es la llamada de verdad.

   Quien pliega y despliega es leer.js. Aquí NO hay ninguna regla que esconda el
   texto: si se escondiera con CSS y el script no corriera, dos párrafos se
   perderían sin manera de abrirlos.
   ------------------------------------------------------------------------- */
.c-leer,
.c-leer__resto {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}

/* ⚠️ SIN ESTA LÍNEA EL PLEGADO NO PLIEGA. El atributo `hidden` esconde con
   `display: none` desde la hoja del navegador, y cualquier `display` que
   escribas tú le gana por especificidad: el `display: flex` de arriba dejaba los
   dos párrafos a la vista con `hidden` puesto. Medido: la caja seguía midiendo
   553 px con los cuatro párrafos y el formulario no subía ni un píxel. */
.c-leer__resto[hidden] {
  display: none;
}

.c-leer {
  max-width: var(--wp--custom--layout--measure);
}

.c-leer__btn {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--custom--typography--size--button);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;

  /* El área de toque mínima. Un enlace de 17 px de alto se falla con el pulgar. */
  min-height: var(--wp--custom--layout--tap);
}

.c-leer__btn:hover,
.c-leer__btn:focus-visible {
  color: var(--wp--preset--color--primary-hover);
}


/* ── El número del paso, por contador ──────────────────────────────────────
   La maqueta escribe <span class="c-steps__num">1</span> en cada paso. En
   WordPress ese <span> no existe —era un core/html por paso, 29 en total— y
   el número lo pone el navegador con el contador que la librería ya declara
   (.c-steps: counter-reset · .c-steps__item: counter-increment). Mismas
   declaraciones que .c-steps__num en componentes.css. `:has` evita pintarlo
   dos veces en la maqueta, que sigue con su <span>. */
.c-steps__item:not(:has(> .c-steps__num))::before {
  content: counter(paso);
  flex: none;
  display: grid;
  place-items: center;
  width: var(--wp--preset--spacing--70);
  height: var(--wp--preset--spacing--70);
  border: var(--wp--custom--border--width) solid var(--wp--preset--color--contrast);
  border-radius: var(--wp--custom--radius--round);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1;
}

/* ── El número, centrado con la primera línea del texto ────────────────────
   El círculo mide spacing-70 (72px) y el titular del paso una línea de
   font-size large × leading h4 (≈28px); alineados por arriba, el número
   quedaba colgado sobre el título. El cuerpo baja la mitad de la diferencia
   para que el centro del círculo coincida con el centro de la primera línea.
   Si el paso no lleva título, se calcula con la línea del párrafo. Pedido el
   2026-09-16 en /terapia-online/. */
.c-steps__item > .c-steps__cuerpo {
  padding-top: calc((var(--wp--preset--spacing--70) - var(--wp--preset--font-size--large) * var(--wp--custom--typography--leading--h4)) / 2);
}
.c-steps__item > .c-steps__cuerpo:not(:has(> .c-steps__title)) {
  padding-top: calc((var(--wp--preset--spacing--70) - var(--wp--preset--font-size--medium) * var(--wp--custom--typography--leading--body)) / 2);
}
/* En la variante horizontal el número va encima del texto: sin desplazamiento. */
@container (min-width: 56rem) {
  .c-steps--h .c-steps__item > .c-steps__cuerpo { padding-top: 0; }
}

/* ── Pasos como línea de tiempo (feedback 18-09-2026, págs. 24, 31, 45) ──
   Números grandes y una línea que une los pasos y ACABA EN FLECHA: hacia
   abajo en móvil, hacia la derecha en escritorio. La flecha es parte del
   trazo (dos pseudoelementos: ::after la línea, .c-steps__cuerpo::before la
   punta), nunca un carácter suelto detrás del círculo siguiente. */
.c-steps--linea {
  gap: var(--wp--preset--spacing--50);
  position: relative;
}
/* Aire entre el último paso y lo que venga detrás (párrafos, botones). */
.c-steps--linea:not(:last-child) {
  margin-bottom: var(--wp--preset--spacing--60);
}
.c-steps--linea .c-steps__item {
  position: relative;
  gap: var(--wp--preset--spacing--50);
}
.c-steps--linea .c-steps__item::before {
  width: var(--wp--preset--spacing--80);
  height: var(--wp--preset--spacing--80);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-large);
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--surface);
  position: relative;
  z-index: 1;
}
/* La línea, del borde de abajo del círculo hasta justo antes del siguiente. */
.c-steps--linea .c-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--wp--preset--spacing--80) / 2 - 1px);
  top: var(--wp--preset--spacing--80);
  bottom: calc(-1 * var(--wp--preset--spacing--50) + 8px);
  width: 2px;
  background-color: var(--wp--preset--color--border);
}
/* La punta de flecha: un triángulo soldado al final de la línea. */
.c-steps--linea .c-steps__item:not(:last-child) > .c-steps__cuerpo::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  /* móvil: apunta hacia abajo, centrada bajo el círculo */
  left: calc(var(--wp--preset--spacing--80) / 2 - 5px);
  bottom: calc(-1 * var(--wp--preset--spacing--50));
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--wp--preset--color--border);
}
.c-steps--linea .c-steps__item > .c-steps__cuerpo {
  padding-top: calc((var(--wp--preset--spacing--80) - var(--wp--preset--font-size--large) * var(--wp--custom--typography--leading--h4)) / 2);
}
.c-steps--linea .c-steps__title {
  font-size: var(--wp--custom--typography--size--h3);
}
/* En ancho, cuatro columnas: línea horizontal y flecha hacia la derecha.
   Salvo con el estilo «Pasos · apilados» (inc/block-styles.php): entonces se
   quedan uno debajo de otro, como en móvil, también en escritorio. */
@container (min-width: 64rem) {
  /* Tantas columnas como pasos (2, 3 o 4); a partir de 5 se reparten en
     filas de 4. */
  .c-steps--linea:not(.is-style-pasos-apilados) {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wp--preset--spacing--50);
  }
  .c-steps--linea:not(.is-style-pasos-apilados):has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  .c-steps--linea:not(.is-style-pasos-apilados):has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .c-steps--linea:not(.is-style-pasos-apilados) .c-steps__item {
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
  }
  .c-steps--linea:not(.is-style-pasos-apilados) .c-steps__item > .c-steps__cuerpo { padding-top: 0; }
  .c-steps--linea:not(.is-style-pasos-apilados) .c-steps__item:not(:last-child)::after {
    left: var(--wp--preset--spacing--80);
    right: calc(-1 * var(--wp--preset--spacing--50) + 8px);
    top: calc(var(--wp--preset--spacing--80) / 2 - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
  }
  /* la punta, hacia la derecha, pegada al círculo siguiente */
  .c-steps--linea:not(.is-style-pasos-apilados) .c-steps__item:not(:last-child) > .c-steps__cuerpo::before {
    left: auto;
    bottom: auto;
    right: calc(-1 * var(--wp--preset--spacing--50));
    top: calc(var(--wp--preset--spacing--80) / 2 - 5px);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--wp--preset--color--border);
    border-right: 0;
  }
  /* el último de cada fila de 4 no lleva línea ni punta */
  .c-steps--linea:not(.is-style-pasos-apilados) .c-steps__item:nth-child(4n)::after,
  .c-steps--linea:not(.is-style-pasos-apilados) .c-steps__item:nth-child(4n) > .c-steps__cuerpo::before { display: none; }
}

/* «Pasos · apilados»: uno debajo de otro en cualquier ancho, con la línea
   vertical y la flecha hacia abajo del móvil (las reglas de escritorio de
   arriba no le llegan). A un ancho de lectura, porque cada paso puede llevar
   varios párrafos. Pedido por Miquel el 7-10-2026 para «¿Cómo funciona la
   reserva?» de primera cita. */
.c-steps--linea.is-style-pasos-apilados {
  max-width: 48rem;
}

/* «Pasos · apilados» en móvil: sin línea ni flecha, y el número centrado
   encima del título. Pedido por Miquel el 7-10-2026. */
@container (max-width: 63.99rem) {
  .c-steps--linea.is-style-pasos-apilados .c-steps__item {
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
  }
  .c-steps--linea.is-style-pasos-apilados .c-steps__item::before {
    align-self: center;
  }
  .c-steps--linea.is-style-pasos-apilados .c-steps__item::after,
  .c-steps--linea.is-style-pasos-apilados .c-steps__item > .c-steps__cuerpo::before {
    display: none;
  }
  .c-steps--linea.is-style-pasos-apilados .c-steps__item > .c-steps__cuerpo {
    padding-top: 0;
  }
}