/* =====================================================================
   RESPONSIVE — LEGALES (prefijos terms- y dac-)
   ---------------------------------------------------------------------
   Cubre 3 vistas que comparten la maqueta .terms-page:
     · /terms           → TerminosCondiciones.jsx (TOC + 13 secciones)
     · /privacy_policy  → PoliticaDePrivacidad.jsx (TOC + 14 secciones)
     · /uninstall       → EliminarCuenta.jsx (pasos dac- con capturas)
   Scope: .rsp (solo páginas adaptadas).
   Móvil:  < 768px · Tablet: 768px – 1199.98px · Desktop (≥1200px) intacto.
   Estas páginas ya están maquetadas en flujo: aquí se colapsa el
   layout TOC+contenido a una columna, se limita la columna de texto
   a ~68ch, se hacen táctiles los enlaces y se apilan los pasos de
   Eliminar Cuenta. El IntersectionObserver del TOC usa threshold 0,
   por lo que no requiere ajustes en el JSX.
   ===================================================================== */

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

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

  /* La cápsula "Última actualización" puede partir en dos líneas */
  .rsp .terms-hero-updated {
    white-space: normal;
    line-height: 1.4;
    text-align: center;
  }

  /* ═══ LAYOUT: TOC + CONTENIDO → UNA COLUMNA ═══ */
  .rsp .terms-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* TOC deja de ser sidebar sticky: pasa a tarjeta-índice en flujo,
     alineada con la columna de texto */
  .rsp .terms-toc {
    position: static;
    width: 100%;
    max-width: 68ch;
    margin: 0 auto;
    box-sizing: border-box;
    max-height: none;
    overflow: visible;
  }

  /* Enlaces del índice con área táctil ≥44px */
  .rsp .terms-toc-link {
    padding: 12px 14px;
  }

  /* Columna de lectura legible (~68ch) y centrada */
  .rsp .terms-content {
    max-width: 68ch;
    margin: 0 auto;
    overflow-wrap: break-word; /* RIF, correos, términos largos */
  }

  /* Despeje al navegar por anclas (header pill flotante) */
  .rsp .terms-section {
    scroll-margin-top: 110px;
  }

  /* Enlaces inline de párrafo (Ver Términos, Eliminar mi cuenta…)
     con zona de toque más generosa sin romper el flujo del texto */
  .rsp .terms-content p > a:not(.terms-link-cta) {
    display: inline-block;
    padding: 8px 2px;
  }

  /* Botón CTA (Ir a Contáctanos →) con altura táctil ≥48px */
  .rsp .terms-link-cta {
    padding: 16px 26px;
  }
}

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

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

  .rsp .terms-hero-subtitle {
    font-size: clamp(17px, 4.6vw, 20px);
  }

  .rsp .terms-hero-title {
    font-size: clamp(32px, 9.5vw, 42px);
    line-height: 1.08;
  }

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

  /* ═══ CUERPO DEL DOCUMENTO ═══ */
  .rsp .terms-wrap {
    padding: 48px 24px 72px; /* 24px de padding lateral */
  }

  .rsp .terms-layout {
    gap: 28px;
  }

  .rsp .terms-toc {
    padding: 20px 14px;
  }

  .rsp .terms-section {
    margin-bottom: 44px;
  }

  /* Títulos de sección con clamp() y chip numérico compacto */
  .rsp .terms-section-title {
    font-size: clamp(21px, 6vw, 25px);
    gap: 12px;
    margin-bottom: 18px;
  }

  .rsp .terms-section-num {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 15px;
  }

  .rsp .terms-subtitle {
    font-size: clamp(17px, 4.8vw, 19px);
    margin: 24px 0 10px;
  }

  /* Texto legible 16px con interlineado holgado */
  .rsp .terms-content p,
  .rsp .terms-list > li,
  .rsp .terms-sublist > li {
    font-size: 16px;
    line-height: 1.65;
  }

  .rsp .terms-list > li {
    padding-left: 16px;
  }

  .rsp .terms-list > li::before {
    top: 10px;
  }

  /* Sub-listas (5.3.a…) con sangría reducida para no comprimir
     el texto en pantallas estrechas (sin overflow horizontal) */
  .rsp .terms-sublist {
    padding-left: 8px;
  }

  .rsp .terms-footer-note {
    margin-top: 44px;
    padding-top: 24px;
  }

  /* ═══ ELIMINAR CUENTA: PASOS (dac-) ═══ */
  /* Pasos apilados en una columna, capturas centradas */
  .rsp .dac-steps {
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 26px 0 8px;
  }

  .rsp .dac-step {
    padding: 26px 20px 24px;
  }

  /* Captura de pantalla del teléfono, centrada y contenida */
  .rsp .dac-shot {
    max-width: 216px;
    margin-left: auto;
    margin-right: auto;
  }

  .rsp .dac-step-title {
    font-size: 18px;
  }

  .rsp .dac-step-text {
    font-size: 15px;
  }
}

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

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

  .rsp .terms-hero-subtitle {
    font-size: 22px;
  }

  .rsp .terms-hero-title {
    font-size: clamp(44px, 6.5vw, 56px);
  }

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

  /* ═══ CUERPO DEL DOCUMENTO ═══ */
  .rsp .terms-wrap {
    padding: 64px 48px 96px;
  }

  /* Índice a dos columnas: aprovecha el ancho sin empujar tanto
     el documento hacia abajo */
  .rsp .terms-toc-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 16px;
  }

  .rsp .terms-section-title {
    font-size: 26px;
  }

  .rsp .terms-section-num {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  /* ═══ ELIMINAR CUENTA: PASOS (dac-) ═══ */
  /* Se conservan las 3 columnas del desktop con respiración ajustada */
  .rsp .dac-steps {
    gap: 20px;
  }

  .rsp .dac-step {
    padding: 26px 18px 24px;
  }
}