/* ============================================================================
   ACORDEÓN · con `core/details`, con el diseño de verdad
   ----------------------------------------------------------------------------
   Las preguntas de la maqueta son un <div> con un <button> y un panel que abre
   componentes.js: en WordPress eso es un `core/html` que nadie puede editar.
   `core/details` da lo mismo, ya está en la lista de bloques permitidos, lo abre
   el navegador —funciona sin JavaScript— y Ctrl+F encuentra el texto de dentro.

   ⚠️ LA PRIMERA VERSIÓN DE ESTE ARCHIVO COPIÓ EL COMPONENTE EQUIVOCADO. Me fui a
   `.c-accordion` de componentes.css, que es una lista con filetes, y el diseño
   de verdad está en overrides.css: es H46, bandas a sangre, las impares en lima,
   el titular en versal y un círculo con un «+» dibujado a mano.

   Medido en la maqueta antes de reescribirlo, y por eso se ve la diferencia:

                        maqueta        lo que yo tenía
     tipografía         MyPro          GPro
     versalita          sí             no
     padding del título 32 px          20 px
     banda              a sangre       filete de 1 px
     signo              círculo        un «+» de texto
     panel abajo        48 px          0

   Aquí se calca ese diseño sobre <details>/<summary>.
   ========================================================================== */

.wp-block-details.is-style-acordeon {
  --cds-faq-boton: clamp(2.75rem, 6vw, 5.5rem);
  --cds-faq-tinta: var(--wp--preset--color--primary);

  /* Las bandas van a sangre: salen del contenedor hasta el borde de la ventana
     y devuelven el hueco como padding, para que el texto siga alineado. */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  border: 0;
  color: var(--cds-faq-tinta);
}

/*
 * Impares en lima, pares sin fondo: nunca hay dos bandas seguidas del mismo
 * color, así que no hace falta ninguna línea divisoria.
 *
 * ⚠️ `nth-of-type` Y NO `nth-child`. Entre las preguntas puede haber un titular
 * de grupo —«1. Sobre empezar terapia»—, y con `nth-child` ese titular corre la
 * cuenta y las bandas cambian de color a partir de ahí. `nth-of-type` solo
 * cuenta los <details>.
 */
.wp-block-details.is-style-acordeon:nth-of-type(odd) {
  --cds-faq-tinta: var(--wp--preset--color--primary);

  background-color: var(--wp--preset--color--secondary);
}

.wp-block-details.is-style-acordeon > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--50);
  min-height: calc(var(--cds-faq-boton) + var(--wp--preset--spacing--60));
  padding-block: var(--wp--preset--spacing--50);
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--preset--font-size--large);
  line-height: var(--wp--custom--typography--leading--h-4);
  letter-spacing: var(--wp--custom--typography--tracking--text);
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  list-style: none;
}

.wp-block-details.is-style-acordeon > summary::-webkit-details-marker {
  display: none;
}

/*
 * El círculo con el «+», en UN SOLO pseudoelemento.
 *
 * ⚠️ En la maqueta el signo es un <span> con dos pseudoelementos: uno por barra.
 * Con <details> no hay ese <span> —el bloque del núcleo no lo crea— y un
 * elemento solo tiene un ::after. Las dos barras se dibujan como dos degradados
 * de fondo dentro del mismo círculo: uno horizontal y otro vertical.
 *
 * Al abrir se retira el vertical y el «+» queda en «−». La barra no puede
 * contradecir al estado, porque no hay carácter que se quede desactualizado.
 */
.wp-block-details.is-style-acordeon > summary::after {
  content: "";
  flex: none;
  width: var(--cds-faq-boton);
  height: var(--cds-faq-boton);
  border: var(--wp--custom--border--width) solid currentColor;
  border-radius: var(--wp--custom--radius--round);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size:
    38% var(--wp--custom--border--width),
    var(--wp--custom--border--width) 38%;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: background-size var(--wp--custom--motion--duration-fast, 150ms)
              var(--wp--custom--motion--ease, ease);
}

.wp-block-details.is-style-acordeon[open] > summary::after {
  background-size: 38% var(--wp--custom--border--width), 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-details.is-style-acordeon > summary::after { transition: none; }
}

/*
 * ⚠️ `core/details` LLEVA `is-layout-flow`, y el núcleo mete el blockGap
 * (32 px) como margen arriba de cada hijo. El panel de la maqueta pega el
 * primer párrafo al titular. Medido: +32 px por acordeón abierto.
 */
.wp-block-details.is-style-acordeon > summary + * {
  margin-block-start: 0;
}

/* El panel. El hueco de la derecha deja libre el círculo. */
.wp-block-details.is-style-acordeon > :not(summary) {
  padding-right: calc(var(--cds-faq-boton) + var(--wp--preset--spacing--50));
  /* ⚠️ `content-box`: el párrafo lleva a la vez este padding y la medida de
     lectura de abajo. Con border-box la medida se comía el padding, el texto
     salía 120 px más estrecho que en la maqueta y hacía una línea más. */
  box-sizing: content-box;
  color: inherit;
}

.wp-block-details.is-style-acordeon > :last-child {
  padding-bottom: var(--wp--preset--spacing--60);
}

.wp-block-details.is-style-acordeon p {
  /* La maqueta acota el párrafo del panel a la medida de lectura. Sin esto el
     texto corría más ancho y hacía una línea menos: −32 px por panel abierto. */
  max-width: var(--wp--custom--layout--measure);
  color: inherit;
  font-size: var(--wp--preset--font-size--large);
  line-height: var(--wp--custom--typography--leading--lead);
}

.wp-block-details.is-style-acordeon p + p {
  margin-top: var(--wp--preset--spacing--40);
}

.wp-block-details.is-style-acordeon a {
  color: inherit;
}

/* Grupos de preguntas (página de FAQ): cada tema es un bloque.
   ----------------------------------------------------------------------------
   Revisión de Bárbara, 8-10-2026 (R49): «que se vean las 4 temáticas». El
   título de grupo era un rótulo pequeño en versalita (c-accordion__group-title,
   gris, 22 px) y se perdía entre las preguntas. Ahora es el H2 de las
   secciones (c-shout, en el contenido) y aquí solo va el aire entre grupos:
   el de una sección nueva, no el de una pregunta más. */
.c-accordion__group + .c-accordion__group {
  margin-block-start: var(--wp--preset--spacing--70);
}