/* ===== REMEDIA — página: Preguntas Frecuentes =====
   Solo secciones de esta página.
   Todo selector prefijado con .page-preguntas-frecuentes o .sec--*

   Esta página NO trae componentes propios: los colapsables son el
   componente compartido .valor (main.css, el mismo de "La Firma" §
   valores, "El Problema" § ecosistema y "Únete" § perfiles) y el
   cierre es .sec--banda/.grad--banda. Aquí solo vive el layout de
   los grupos de preguntas y la tipografía del hero.
   ===================================== */

/* ===== 00 · INTRO (hero) =======================================
   Eyebrow + H1 + párrafo, alineados a la izquierda — mismo criterio
   que .sec--intro de "Los Resultados" (eyebrow arriba del título) y
   mismos tamaños que "El Sistema". */

.sec--intro__inner .eyebrow {
  margin-bottom: var(--sp-4);
}

.sec--intro__title {
  margin-bottom: var(--sp-3);
}

.sec--intro__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-xl);
  color: var(--c-text-muted);
}

.sec--intro__subtitle + .sec--intro__subtitle {
  margin-top: var(--sp-3);
}

/* ===== 01 · FAQ (8 grupos de preguntas) ========================
   Una sola .sec para los 8 grupos: antes cada grupo era su propia
   <section class="sec">, y dos --sp-section seguidos (120+120) dejaban
   un hueco enorme entre temas. Ahora el aire entre grupos es --sp-7
   y el --sp-section solo abre y cierra la sección completa.

   Layout por grupo = mismo criterio que .sec--principios (el-sistema)
   y .sec--ecosistema (el-problema): título del tema a la izquierda,
   lista colapsable a la derecha. El título queda sticky (igual que
   .unidad__media en el-sistema.css) para no perder el tema de vista
   mientras se recorren las preguntas. */

.sec--faq__grupo {
  align-items: flex-start;   /* necesario para el sticky del título: si la
                                 columna se estira a todo el alto de la fila,
                                 position:sticky no tiene dónde desplazarse */
}

.sec--faq__grupo + .sec--faq__grupo {
  margin-top: var(--sp-7);
}

.sec--faq__intro {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-5));
}

.sec--faq__title {
  margin-bottom: var(--sp-3);
}

/* La línea de arriba cierra la lista por el tope — mismo criterio que
   .sec--perfiles__list (unete.css) y .sec--unidades__list (el-sistema.css);
   el borde inferior ya lo pone cada .valor. */
.sec--faq__list {
  border-top: 1px solid var(--c-line);
}

/* Las preguntas son frases largas, no etiquetas de 2 palabras como en
   "La Firma" ("Rigor y Sensibilidad"). A --fs-h3 (24px) cada una ocupaba
   3 líneas y 27 preguntas se volvían un muro. Van en --fs-h4, el mismo
   tamaño que el título del colapsable de "Entregables estructurales"
   (.unidad__entregables-title, el-sistema.css) — que es el precedente
   del sitio para un colapsable con título largo. Lo demás del
   componente (ícono +/−, itálica al abrir, hover, espaciados) no se
   toca. */
.sec--faq__list .valor__toggle h3 {
  font-size: var(--fs-h4);
}

@media (max-width: 991.98px) {
  .sec--faq__intro {
    position: static;
    margin-bottom: var(--sp-4);
  }
}

/* ===== 02 · CIERRE (banda CTA) =================================
   Componente compartido .sec--banda / .grad--banda (main.css), igual
   que el cierre de las demás páginas. Gradiente turquesa = acento de
   esta página (mismas paradas que .sec--banda--turquesa del home). */

.sec--banda {
  --g1: #0B0B0B;
  --g2: #0F2B29;
  --g3: #18C4B0;
  --g4: var(--p-turquesa);
}