/* ═══════════════════════════════════════════════════════════════════════════════════════
   1on1Spanish · faq.css — hoja de la página /faq
   Maqueta el Figma `/faq — Desktop 1440` (317:2).
   Mismas reglas que pricing.css: cero colores a mano, todo por token, y las cotas del
   diseño en px porque los bloques están medidos contra el Figma.

   El acordeón NO se redefine aquí: `.faq__item` vive en framework.css y esta hoja solo le
   pone la piel de página (ancho, aire y el titular dentro del `<summary>`).
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.faq-pagina {
  --fq-ancho: 1440px;
  --fq-lateral: 72px;
  /* La medida del Figma: el bloque de preguntas ocupa 1000 de los 1440. */
  --fq-columna: 1000px;
}

.faq-pagina .f1__inner,
.faq-pagina .f2__inner,
.faq-pagina .f3__inner,
.faq-pagina .f4__inner {
  max-width: var(--fq-ancho);
  margin-inline: auto;
  padding-inline: var(--fq-lateral);
}

/* Las anclas de arriba saltan a la sección; el hueco lo pide la cabecera sticky. */
.faq-pagina .f2 { scroll-margin-top: calc(var(--altura-cabecera) + var(--e-4)); }

/* ── F1 · Hero + anclas ──────────────────────────────────────────────────────────────── */

.f1 { background: var(--c-crema-calida); }

.f1__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
  padding-block: 56px 48px;
}

.f1__titular {
  margin: 0;
  max-width: var(--fq-columna);
  font-size: var(--t-display);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.f1__entrada {
  margin: 0;
  max-width: var(--fq-columna);
  font-size: var(--t-lead);
  color: var(--c-navy);
}

.f1__anclas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-2);
}

/* Píldora de navegación, no botón de acción: por eso va en blanco sobre el crema del hero.
   48 px de alto para el dedo, aunque en escritorio sobre. */
.f1__ancla {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--e-4);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-pill);
  background: var(--c-blanco);
  font-size: var(--t-tarjeta);
  font-weight: var(--peso-semi);
  color: var(--c-navy);
  text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease;
}

.f1__ancla:hover {
  border-color: var(--c-acento);
  color: var(--c-acento);
}

/* ── F2 · Grupos de preguntas ────────────────────────────────────────────────────────────
   Bandas alternas crema / blanco, como en el Figma: el cambio de fondo es lo que separa un
   grupo del siguiente, sin necesidad de líneas ni cajas. */

.f2 { background: var(--c-crema); }
.f2--clara { background: var(--c-blanco); }

.f2__inner { padding-block: 56px; }

.f2__titular {
  margin: 0 0 var(--e-5);
  max-width: var(--fq-columna);
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.f2__lista { max-width: var(--fq-columna); }

.f2__item { margin-bottom: var(--e-3); }
.f2__item:last-child { margin-bottom: 0; }

/* El área pulsable llega a 48 px sin engordar la caja cerrada: el padding del `.faq__item`
   ya pone 16 px arriba y abajo, y aquí se asegura el suelo. */
.f2__item summary { min-height: 48px; }

/* La pregunta es un H3 real dentro del `<summary>`: los motores de IA lo leen como pregunta
   y no como texto de control. Hay que anular los márgenes y el tamaño de titular. */
.f2__pregunta {
  margin: 0;
  font-size: var(--t-cuerpo);
  line-height: 1.4;
  font-weight: var(--peso-semi);
  letter-spacing: 0;
  color: var(--c-navy);
}

.f2__item p { font-size: var(--t-tarjeta); }
.f2__item p:last-child { margin-bottom: 0; }

/* Pregunta maquetada y pendiente de dato: solo se ve con SUSA_LEGAL_PENDIENTES a true, y se
   marca en rojo para que nadie la confunda con contenido publicado. */
.f2__item--pendiente { border: 1px dashed var(--c-acento); }
.f2__nota { color: var(--c-acento); font-weight: var(--peso-semi); }

/* ── F3 · Respaldo ───────────────────────────────────────────────────────────────────── */

.f3 { background: var(--c-navy); color: var(--c-blanco); }

.f3__inner {
  padding-block: 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.f3__titular { margin: 0; font-size: var(--t-h5); font-weight: 700; color: var(--c-blanco); }
.f3__notas { margin: 0; font-size: var(--t-tarjeta); color: var(--c-ambar-suave); }
.f3__notas span { color: var(--c-texto-navy); }
.f3__cierre { margin: 0; font-size: var(--t-muletilla); color: var(--c-texto-navy); }

/* ── F4 · Still deciding ─────────────────────────────────────────────────────────────── */

.f4 { background: var(--c-blanco); }

.f4__inner {
  padding-block: 72px 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-4);
  text-align: center;
}

.f4__titular { margin: 0; font-size: var(--t-h2); line-height: var(--i-titular); font-weight: var(--peso-extra); color: var(--c-navy); }
.f4__texto { margin: 0; max-width: 44rem; font-size: var(--t-lead); color: var(--c-pizarra); }
/* Plus Jakarta no tiene cursiva real (framework.css §«Palabras en español»): la pregunta
   interior se marca con peso y color, no con `italic` sintética. */
.f4__texto em { font-style: normal; font-weight: 700; color: var(--c-navy); }
.f4__letra-pequena { margin: 0; font-size: var(--t-tarjeta); font-weight: var(--peso-semi); color: var(--c-navy); }
.f4__cta { border-radius: var(--r-pill); padding: 18px 36px; min-height: 48px; }

/* ── Tablet ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .faq-pagina { --fq-lateral: var(--e-6); }

  .f1__inner { padding-block: 40px 36px; }
  .f2__inner { padding-block: 44px; }
}

/* ── Móvil ───────────────────────────────────────────────────────────────────────────────
   Aquí la navegación ES el acordeón: las anclas ocupaban dos filas para llevar a algo que
   ya está a un golpe de pulgar. Se ocultan, no se borran del HTML. */

@media (max-width: 700px) {
  .faq-pagina { --fq-lateral: 20px; }

  .f1__anclas { display: none; }

  .f1__inner { padding-block: 28px 24px; gap: var(--e-3); }
  .f1__titular { font-size: var(--t-h2); }
  .f1__entrada { font-size: var(--t-cuerpo); color: var(--c-pizarra); }

  .f2__inner { padding-block: 32px; }
  .f2__titular { margin-bottom: var(--e-4); }

  /* El padding lateral de la tarjeta baja: a 390 px una pregunta larga no puede permitirse
     40 px de aire a los lados sin partirse en cinco líneas. */
  .f2__item { padding: var(--e-4); }

  .f3__inner { padding-block: 32px; }
  .f4__inner { padding-block: 40px 56px; }
  .f4__cta { width: 100%; }
}