/* ============================================================
   InnovaBlack — Mobile fixes (single source of truth)
   ============================================================
   Cambia este archivo → todas las páginas se actualizan.
   Reglas defensivas para que ninguna página haga overflow
   horizontal en móvil (320–480px).
   Cargar SIEMPRE al final, después de header.css/footer.css y
   de los <style> inline de la página, para ganarle a la
   especificidad de los estilos viejos.
   ============================================================ */

/* --- Global anti-overflow ------------------------------------ */
html { width: 100%; overflow-x: hidden; }
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
}

/* En mobile, todo elemento heredará box-sizing border-box y nunca
   excederá el ancho del padre (cascada natural).  No usamos 100vw
   porque incluye scrollbar en algunos browsers. */
@media (max-width: 768px) {
  *, *::before, *::after {
    box-sizing: border-box;
  }
  /* Forzar contenedores típicos a 100% del padre */
  section, header, footer, main, article, nav,
  .sec-inner, .hero-content, .nav-inner {
    max-width: 100% !important;
  }
}

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

pre, code, table {
  max-width: 100%;
  overflow-x: auto;
}

/* --- Hero (home + DTX pages) -------------------------------- */
@media (max-width: 768px) {
  /* Title — usar overflow-wrap (no word-break) para que palabras
     completas pasen a línea nueva sin partirse a la mitad. */
  .hero-h1,
  .h1,
  .h2,
  h1, h2 {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .hero-h1 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .hero-h1 .gold::after { display: none !important; }

  .hero-sub,
  .lead,
  p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .hero-sub {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .hero-tag {
    letter-spacing: 0.12em !important;
    font-size: 11px !important;
    word-break: break-word;
    max-width: 100% !important;
  }

  /* CTAs — labels largos no deben desbordar */
  .btn,
  .nav-cta,
  .hero-actions a,
  [data-cta-stack] a {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }
  .hero-actions .btn {
    text-align: center;
    justify-content: center;
  }
}

/* --- Sections, grids, marquees ------------------------------ */
@media (max-width: 768px) {
  .sec-inner,
  section {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Cualquier grid genérico se colapsa a 1col en móvil */
  .grid-2,
  .grid-3,
  .grid-4,
  .problem-grid,
  .clients-grid,
  .quote-grid,
  .service-row {
    grid-template-columns: 1fr !important;
  }

  /* Marquee no debe agregar scroll horizontal externo */
  #marquee-band,
  .marquee {
    overflow: hidden;
  }
}

/* --- Footer canónico ---------------------------------------- */
@media (max-width: 640px) {
  #footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  #footer .footer-bottom {
    flex-direction: column !important;
    text-align: center;
    gap: 8px;
  }
}

/* --- Tablas/cuadros DTX ------------------------------------- */
@media (max-width: 768px) {
  .stack-table,
  .pricing-table,
  .compare-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Lead magnet / blog post containers --------------------- */
@media (max-width: 768px) {
  article,
  .post-content,
  .lead-magnet-content {
    max-width: 100%;
    overflow-wrap: break-word;
  }
  article img {
    width: 100%;
    height: auto;
  }
}

/* --- Forms ---------------------------------------------------- */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    width: 100%;
    max-width: 100%;
    font-size: 16px; /* iOS no zoom */
    box-sizing: border-box;
  }
}

/* --- Nav padding extra-tight on tiny phones ----------------- */
@media (max-width: 360px) {
  :root { --pad-x: 16px; }
  #nav { padding: 0 16px; }
  .mobile-menu { padding: 24px 16px; }
  #footer .sec-inner { padding: 0 16px; }
  .hero-content { padding-left: 16px; padding-right: 16px; }
  .hero-h1 { font-size: 26px !important; }
}