/* =====================================================================
   RESPONSIVE — PREGUNTAS FRECUENTES (.faq-page, prefijo faq-)
   ---------------------------------------------------------------------
   Scope: .rsp (solo páginas adaptadas).
   Móvil:  < 768px · Tablet: 768px – 1199.98px · Desktop (≥1200px) intacto.
   Esta página ya está maquetada en flujo (no usa el lienzo 1440px):
   aquí se afinan tipografía fluida, paddings, acordeones a ancho
   completo con área táctil ≥48px y la nav flotante inferior.
   Animaciones: los IntersectionObserver de la vista usan threshold
   0.05 / 0, por lo que disparan bien en móvil sin cambios en el JSX.
   ===================================================================== */

/* ────────────────────────────────────────────────────────────────────
   COMÚN (móvil + tablet)
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {

  /* ═══ SECCIÓN: HERO ═══ */
  .rsp .faq-hero {
    min-height: 0; /* el alto lo define el contenido + padding */
  }

  /* ═══ SECCIÓN: ACORDEONES (todas las categorías) ═══ */
  /* Pregunta = área táctil ≥48px garantizada aunque el texto sea corto */
  .rsp .faq-question {
    box-sizing: border-box;
    min-height: 48px;
  }

  /* Respuestas sin desbordes con palabras largas / rutas de menú */
  .rsp .faq-answer {
    overflow-wrap: break-word;
  }

  /* ═══ NAV FLOTANTE INFERIOR ═══ */
  /* Botones con altura táctil ≥44px; la píldora sigue siendo
     scrolleable en horizontal (scrollbar oculta ya en desktop) */
  .rsp .faq-nav-btn {
    min-height: 44px;
  }

  .rsp .faq-nav-floating {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* ═══ FOOTER ═══ */
  /* core.css re-define el padding del footer (.rsp .footer) y elimina
     el colchón de 110px que en desktop evita que la nav flotante tape
     el contenido. Se restituye aquí (este archivo carga después). */
  .rsp .faq-page .footer {
    padding-bottom: 150px;
  }
}

/* ────────────────────────────────────────────────────────────────────
   MÓVIL (< 768px)
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* ═══ SECCIÓN: HERO ═══ */
  .rsp .faq-hero {
    padding: 118px 24px 56px;
  }

  .rsp .faq-hero-subtitle {
    font-size: clamp(18px, 5vw, 22px);
  }

  .rsp .faq-hero-title {
    font-size: clamp(38px, 11vw, 50px);
    line-height: 1.05;
  }

  .rsp .faq-hero-desc {
    font-size: clamp(16px, 4.4vw, 18px);
  }

  /* ═══ SECCIONES DE CATEGORÍA (pill + título + lista) ═══ */
  .rsp .faq-section {
    padding: 52px 20px 10px;
    scroll-margin-top: 96px; /* despeje del header pill al navegar */
  }

  .rsp .faq-section-pill {
    padding: 10px 18px;
    font-size: 15px;
    gap: 8px;
    margin-bottom: 18px;
  }

  .rsp .faq-section-ico {
    width: 18px;
    height: 18px;
  }

  .rsp .faq-section-title {
    font-size: clamp(24px, 6.8vw, 30px);
    line-height: 1.15;
    margin-bottom: 24px;
  }

  .rsp .faq-subgroup {
    margin: 28px 0 12px;
    font-size: 18px;
  }

  /* ═══ ACORDEONES ═══ */
  .rsp .faq-list {
    gap: 12px;
  }

  .rsp .faq-item {
    border-radius: 18px;
  }

  /* Pregunta: texto 16px legible + padding táctil; se reserva espacio
     a la derecha para el botón +/− */
  .rsp .faq-question {
    padding: 16px 56px 16px 18px;
    font-size: 16px;
    line-height: 1.4;
  }

  .rsp .faq-question::after,
  .rsp .faq-question::before {
    right: 16px;
  }

  .rsp .faq-answer {
    padding: 0 18px 18px;
    font-size: 16px;
    line-height: 1.55;
  }

  .rsp .faq-answer-list {
    padding-left: 20px;
  }

  /* ═══ CTA DE CONTACTO ═══ */
  .rsp .faq-cta-wrap {
    padding: 44px 20px 72px;
  }

  .rsp .faq-cta {
    padding: 36px 22px;
    border-radius: 28px;
  }

  .rsp .faq-cta-title {
    font-size: clamp(24px, 6.5vw, 28px);
  }

  .rsp .faq-cta-desc {
    font-size: 17px;
    margin-bottom: 22px;
  }

  /* Botón táctil ≥48px */
  .rsp .faq-cta-btn {
    padding: 16px 32px;
    font-size: 17px;
  }

  /* ═══ NAV FLOTANTE INFERIOR ═══ */
  /* Se mantiene con scroll horizontal (patrón app); compactada para
     no invadir tanto la pantalla */
  .rsp .faq-nav-floating {
    gap: 4px;
    padding: 6px;
    max-width: calc(100vw - 24px);
  }

  .rsp .faq-nav-btn {
    padding: 12px 15px;
    gap: 7px;
  }
}

/* ────────────────────────────────────────────────────────────────────
   TABLET (768px – 1199.98px)
   ──────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199.98px) {

  /* ═══ SECCIÓN: HERO ═══ */
  .rsp .faq-hero {
    padding: 150px 48px 80px;
  }

  .rsp .faq-hero-subtitle {
    font-size: 24px;
  }

  .rsp .faq-hero-title {
    font-size: clamp(52px, 7vw, 62px);
  }

  .rsp .faq-hero-desc {
    font-size: 19px;
  }

  /* ═══ SECCIONES DE CATEGORÍA ═══ */
  .rsp .faq-section {
    padding: 68px 48px 16px;
  }

  .rsp .faq-section-title {
    font-size: 34px;
    margin-bottom: 30px;
  }

  .rsp .faq-subgroup {
    font-size: 20px;
  }

  /* ═══ ACORDEONES ═══ */
  .rsp .faq-question {
    padding: 20px 64px 20px 24px;
    font-size: 18px;
  }

  .rsp .faq-question::after,
  .rsp .faq-question::before {
    right: 22px;
  }

  .rsp .faq-answer {
    padding: 0 24px 22px;
    font-size: 16px;
  }

  /* ═══ CTA DE CONTACTO ═══ */
  .rsp .faq-cta-wrap {
    padding: 64px 48px 90px;
  }

  .rsp .faq-cta {
    padding: 48px 40px;
  }

  .rsp .faq-cta-title {
    font-size: 32px;
  }
}