/* ════════════════════════════════════════════════════════════
   RESPONSIVE FIX v2 — Adaptación móvil/tablet (Android, iOS, etc.)
   Reformas Julio Valladolid · se carga el último (máxima prioridad)
   Objetivo: que TODO quede centrado, sin desbordes ni descuadres,
   en cualquier dispositivo y sistema operativo.
════════════════════════════════════════════════════════════ */

/* 0) Android Chrome infla el texto y descuadra: lo desactivamos */
html{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* 1) Nunca scroll horizontal ni contenido fuera de la pantalla */
html, body{ max-width:100%; overflow-x:hidden; }
*, *::before, *::after{ min-width:0; }          /* permite encoger en flex/grid */

/* 2) Multimedia y bloques anchos siempre dentro del ancho disponible */
img, svg, video, canvas, iframe{ max-width:100%; height:auto; }
pre, code{ white-space:pre-wrap; word-break:break-word; }
table{ max-width:100%; }

/* 3) Palabras/títulos largos no rompen el ancho */
h1,h2,h3,h4,p,a,span,li{ overflow-wrap:anywhere; }

/* 4) Más aire lateral y contenedores al 100% en móvil */
@media (max-width:600px){
  .container{ padding-left:16px !important; padding-right:16px !important; width:100%; }
}

/* 5) Cabecera y menú: que el logo no se salga (el menú ya colapsa a ≤760px) */
.nav{ flex-wrap:wrap; }
.brand, .brand-text{ min-width:0; }

/* 6) HÉROE: las 4 estadísticas en 2x2 en vez de tira con scroll lateral */
@media (max-width:600px){
  .hero-stats{
    display:flex !important; flex-wrap:wrap !important; overflow:visible !important;
    gap:0 !important;
  }
  .hero-stat{
    flex:1 1 50% !important; min-width:0 !important;
    border-right:none !important; padding:10px 6px !important;
  }
}

/* 7) Rejillas de sección a una sola columna en móvil (refuerzo general) */
@media (max-width:640px){
  .card-grid, .project-grid, .blog-grid, .values-grid,
  .process-steps, .steps, .split, .service-grid, .svc-grid,
  .blog-post{
    grid-template-columns:1fr !important;
  }
  .stats-row, .footer-cols, .footer-top{ grid-template-columns:1fr 1fr !important; }
  .features-bar .container{ grid-template-columns:1fr 1fr !important; gap:14px !important; }
}
@media (max-width:400px){
  .stats-row, .footer-cols, .features-bar .container{ grid-template-columns:1fr !important; }
}

/* 8) Layouts de DOS columnas → una sola en móvil/tablet */
@media (max-width:820px){
  .shop-wrap{ grid-template-columns:1fr !important; }
  .sidebar{ position:static !important; width:auto !important; }
  .brands-panel{ max-width:100% !important; }
  .pres-layout{ grid-template-columns:1fr !important; }
  .pres-intro-grid{ grid-template-columns:1fr !important; }
}

/* 9) TIENDA: rejilla de productos cómoda en móvil */
@media (max-width:600px){
  .pgrid{ grid-template-columns:repeat(2, 1fr) !important; gap:12px !important; }
}
@media (max-width:380px){
  .pgrid{ grid-template-columns:1fr !important; }
}

/* 10) CLAVE — Presupuesto: en móvil el campo de cantidad NO se oculta.
   (antes display:none → el cliente no podía escribir m²/uds/ml) */
@media (max-width:520px){
  .pp-item{ grid-template-columns:28px 1fr !important; row-gap:6px; }
  .pp-item-qty{
    display:flex !important; grid-column:1 / -1;
    align-items:center; justify-content:flex-start;
    gap:6px; padding-left:34px; margin-top:2px;
  }
  .pp-item-qty input{ width:110px; max-width:60%; }
}

/* 11) Resumen del presupuesto y datos en una columna en pantallas pequeñas */
.resumen-datos-grid{ grid-template-columns:1fr 1fr; }
@media (max-width:480px){ .resumen-datos-grid{ grid-template-columns:1fr; } }

/* 12) Footer: redes (con WhatsApp) y contacto ajustan bien */
.footer-socials{ flex-wrap:wrap; }
.footer-contact li{ flex-wrap:wrap; }

/* 13) Tablas anchas (p. ej. tabla de cookies): desplazables dentro de su
   caja en móvil, sin cortar contenido ni romper el ancho de la página */
@media (max-width:760px){
  .cookies-table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:normal;
  }
}