/* ============================================================
   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; }
}

/* ============================================================
   ENTRADAS · AJUSTE iPHONE (single.php: Informes, Evaluaciones,
   Arsenal, Neuroquímica). Padding del artículo y cabecera en móvil.
   ============================================================ */
@media (max-width: 768px) {
  .single-layout { padding: 24px 16px 48px !important; gap: 24px !important; }
  .single-article { padding: 24px 18px !important; }
  .page-header { padding: 96px 20px 32px !important; }
  .page-header h1 { font-size: clamp(34px, 10vw, 52px) !important; letter-spacing: 1px !important; }
  .single-article h2 { font-size: clamp(24px, 7vw, 32px) !important; }
  .single-article img,
  .single-article iframe,
  .single-article video { max-width: 100% !important; height: auto; }
}

/* Ficha flotante del Arsenal (Front Page y página Arsenal): altura real
   visible en Safari y respeto a la barra inferior del iPhone */
.sup-float {
  padding: 16px !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}
.sup-float-panel {
  max-height: 90vh !important;
  max-height: calc(100dvh - 32px - env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(26px + env(safe-area-inset-bottom)) !important;
}

/* ============================================================
   PUERTAS DE ENTRADA (Informes · Evaluaciones · Arsenal) · iPhone
   #sp-spot     → mu-plugins/spartan-frontpage-spotlight.php
   #spa-arspage → mu-plugins/spartan-arsenal-hover.php
   En móvil NO hay columna vertical «SALIR»: el contenido va centrado
   y se sale tocando fuera de los botones (o con Escape en teclado).
   ============================================================ */
@media (max-width: 820px) {

  /* Se quita la columna vertical SALIR en las 3 secciones */
  #sp-spot .sp-spot-exitL,
  #spa-arspage .spa-exitL { display: none !important; }

  /* ── INFORMES / EVALUACIONES ── */
  #sp-spot { height: 100vh; height: 100dvh; }
  #sp-spot .sp-spot-in {
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
    padding: 0 !important;
    overflow-y: auto;                        /* si no cabe, se desplaza */
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
  #sp-spot .sp-spot-stage {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    flex: 0 1 42vh !important;               /* mismo tamaño que en Evaluaciones... */
    min-height: 110px !important;            /* ...pero se encoge si el texto es más largo */
    margin-top: auto;                        /* centra el conjunto en vertical */
  }
  #sp-spot .sp-spot-txt {
    margin-bottom: auto;
    padding: 20px 22px 24px !important;
    text-align: center !important;
  }
  #sp-spot .sp-spot-sub { margin-left: auto !important; margin-right: auto !important; }
  /* Botón principal a todo el ancho; YouTube y Spotify, uno junto al otro
     (ahorra altura en Informes, que es donde salen los tres botones) */
  #sp-spot .sp-spot-actions {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: stretch !important;
    max-width: 420px;
    margin: 0 auto;
  }
  #sp-spot .sp-spot-full { flex: 1 1 100%; justify-content: center; }
  #sp-spot .sp-spot-ext {
    flex: 1 1 0;
    min-width: 120px;
    justify-content: center;
    padding: 12px 10px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
  }

  /* Sin el cartelito «Haz clic para salir» en móvil */
  #sp-spot-hint { display: none !important; }

  /* ── ARSENAL TÁCTICO (página blanca) ──
     Todo el contenido se compacta para caber en la zona visible de Safari:
     la imagen del producto se adapta a la altura disponible y el resto de
     bloques (título, uso, plataformas, «Ver ficha») quedan juntos y centrados. */
  #spa-arspage {
    height: 100vh; height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start !important;
    padding: 24px 20px calc(36px + env(safe-area-inset-bottom)) !important;
  }
  #spa-arspage .in { margin: auto 0; gap: 14px !important; }       /* centrado sin recortar */

  #spa-arspage .img {
    width: min(56vw, 28vh) !important;       /* fallback */
    width: min(56vw, 28dvh) !important;      /* se adapta a la altura visible */
    max-width: 270px !important;
    justify-self: center !important;
    margin: 0 auto;
  }
  #spa-arspage .txt { text-align: center; }
  #spa-arspage .cat { font-size: 11px !important; letter-spacing: 3px !important; margin-bottom: 8px !important; }
  #spa-arspage h2 {
    font-size: clamp(26px, 8vw, 34px) !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 10px !important;
  }
  #spa-arspage .uso {
    font-size: 15px !important; line-height: 1.5 !important;
    margin: 0 auto 12px !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  #spa-arspage .uso[hidden] { display: none !important; }
  #spa-arspage .meta { margin: 0 0 14px !important; gap: 24px !important; justify-content: center; }
  #spa-arspage .meta b { font-size: 20px !important; }
  #spa-arspage .buy { margin: 0 0 14px !important; }
  #spa-arspage .buy-h { font-size: 11px !important; letter-spacing: 2.5px !important; margin-bottom: 8px !important; }
  #spa-arspage .plats { justify-content: center; gap: 18px !important; }
  #spa-arspage .plats.filled { padding: 10px 18px !important; }
  #spa-arspage .plat svg,
  #spa-arspage .plat img { height: 24px !important; }
  #spa-arspage .verficha { font-size: 12px !important; }

  /* Tocar en cualquier zona vacía cierra (el cierre del plugin escucha al fondo);
     solo la imagen, las plataformas y «Ver ficha» reciben el toque. */
  #spa-arspage .in,
  #spa-arspage .txt { pointer-events: none; }
  #spa-arspage .img,
  #spa-arspage .plat,
  #spa-arspage .verficha { pointer-events: auto; }
}