/* ==========================================================================
   Responsive — ajustes finos globales por breakpoint
   (La mayoría de las reglas mobile-first viven junto a cada componente;
   aquí sólo van afinaciones transversales de gran pantalla / accesibilidad.)
   ========================================================================== */

/* ---- Aseguramos que nada provoque scroll horizontal ---- */
html, body {
  max-width: 100%;
}

/* ---- Móviles muy pequeños (320–374px): compactar espaciados ---- */
@media (max-width: 374px) {
  :root {
    --space-lg: 2.6rem;
    --space-xl: 3.8rem;
  }

  .hero__title {
    font-size: clamp(2.4rem, 12vw, 3rem);
  }
}

/* ---- Tablet mediano: recuperar aire lateral ---- */
@media (min-width: 768px) {
  .btn { padding: 1.05rem 1.8rem; }
}

/* ---- Desktop grande: limitar longitudes de línea en cuerpo editorial ---- */
@media (min-width: 1536px) {
  :root {
    --container: 1440px;
  }

  body {
    font-size: 1.05rem;
  }
}

/* ---- Impresión (cortesía, contacto/servicios) ---- */
@media print {
  .site-header, .mobile-nav, .whatsapp-float, .hero__media video {
    display: none !important;
  }
}