/* ============================================================
   SPARTAN · ENDURECIDO RESPONSIVE (móvil + tablet)
   ------------------------------------------------------------
   Objetivo: que NINGUNA página se pueda arrastrar de lado en
   móvil/tablet y que las secciones a 2 columnas colapsen a 1
   con el contenido legible. Solo afecta a pantallas pequeñas
   (media queries) salvo la salvaguarda anti-scroll global, que
   es segura en cualquier tamaño.

   Se carga DESPUÉS de spartan.css y de los <style> en línea de
   las plantillas, por eso las reglas estructurales llevan
   !important: los estilos en línea del cuerpo, si no, ganarían.
   ============================================================ */

/* ── 0. NUNCA scroll horizontal en toda la web ──────────────
   La causa nº1 de "se sale la web" en móvil es un solo hijo
   más ancho que la pantalla. Este cinturón de seguridad lo
   contiene sin tocar el diseño de escritorio. */
html, body {
  max-width: 100% !important;
  /* 'clip' evita el scroll horizontal SIN convertir el body en contenedor de scroll
     (con 'hidden' el body se volvía scroller y ROMPÍA el scroll-snap vertical del Front Page). */
  overflow-x: clip !important;
}

/* Medios e incrustados nunca desbordan */
img, video, iframe, canvas, svg, embed, object, audio {
  max-width: 100%;
}
img, video { height: auto; }

/* ── 1. Rejillas/flex: los items deben poder ENCOGERSE ──────
   Por defecto un item de grid/flex tiene min-width:auto y se
   niega a bajar del ancho de su contenido (una tabla ancha,
   una fila de tarjetas). Eso rompe la página. min-width:0 lo
   arregla de raíz. */
.single-layout, .single-article, .single-sidebar,
.sp-main-layout, .sp-left, .suparc-right, .ar-rotator,
.arsenal-grid, .arsenal-left, .arsenal-right, .arsenal-fichas,
.podcast-layout, #elite-teaser,
.single-layout > *, .sp-main-layout > *, .arsenal-grid > *,
.podcast-layout > *, #elite-teaser > * {
  min-width: 0 !important;
}

/* Tablas anchas (comparativas, especificaciones técnicas):
   en móvil/tablet se hacen desplazables por dentro en vez de
   ensanchar la página (el usuario arrastra la tabla, no la web).
   En escritorio no se tocan: tienen sitio de sobra. */
@media (max-width: 1024px) {
  .single-article table,
  .entry-content table,
  .spartan-article table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Bloques de código / preformateado tampoco desbordan */
pre, code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

/* Palabras/URLs muy largas no rompen el ancho */
.single-article, .entry-content, .spartan-article,
.page-header, .sidebar-box, .affiliate-cta-info {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ── 2. TABLET (≤1024px): las 2 columnas de contenido a 1 ── */
@media (max-width: 1024px) {
  .single-layout { grid-template-columns: 1fr !important; }
  .single-sidebar { position: static !important; width: auto !important; }
}

/* ── 3. TABLET/MÓVIL (≤1100px): secciones de portada a 1 col ── */
@media (max-width: 1100px) {
  .sp-main-layout { grid-template-columns: 1fr !important; height: auto !important; }
  .suparc-right, .ar-rotator { overflow: visible !important; height: auto !important; }
}

/* ── 4. Pie de página: enlaces legales que NO caben ─────────
   La fila de enlaces legales del pie se salía; que envuelva. En
   escritorio no cambia nada (siguen en una línea con su gap de
   24px); solo gana la capacidad de envolver cuando no caben. */
.footer-legal-links { flex-wrap: wrap !important; }
@media (max-width: 768px) {
  .footer-legal-links { justify-content: center; gap: 8px 16px !important; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ── 5. Banner de cookies: apilado y sin desbordar ─────────── */
@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 16px 20px !important;
  }
  .cookie-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .cookie-accept, .cookie-reject, .cookie-config { flex: 1 1 auto; text-align: center; }
}

/* ── 6. Ventanas modales (login, respuestas) a ancho móvil ── */
@media (max-width: 640px) {
  .modal-box, .modal-overlay .modal-box,
  .spq-modal-card, .sup-card {
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
  }
  .google-btn, .modal-eyebrow { max-width: 100% !important; }
}

/* ── 7. Ficha de producto: cabecera legible en móvil ────────
   La cabecera imagen+info se apila y la imagen no se estira. */
@media (max-width: 768px) {
  .ficha-hero {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ficha-hero-img { width: 100% !important; max-width: 100% !important; }
  .ficha-hero-img img { width: 100%; height: auto; object-fit: contain; }
  .ficha-hero-info { width: auto !important; }
  /* Botones de plataforma / afiliación a lo ancho, fáciles de tocar */
  .affiliate-cta { flex-wrap: wrap; }
  .sidebar-box { width: auto !important; }
}

/* ── 8. Objetivo de toque cómodo (accesibilidad móvil) ──────
   Los enlaces/botones principales con al menos 40px de alto
   para el dedo, sin afectar al escritorio. */
@media (max-width: 768px) {
  .nav-mobile-toggle { min-width: 44px; min-height: 40px; justify-content: center; }
  .page-header h1 { word-break: break-word; }
}

/* ── 9. Carruseles/filas horizontales de Arsenal: 1 columna ── */
@media (max-width: 900px) {
  .arsenal-grid { grid-template-columns: 1fr !important; height: auto !important; }
  .arsenal-left { border-right: none !important; }
}