/* =========================================================================
   RESPONSIVE.CSS — Ajustes para móvil y tablet (menú desplegable, etc.)
   Cargar SIEMPRE al final para que sus reglas tengan prioridad.
   ========================================================================= */

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  /* El menú se convierte en panel desplegable a pantalla completa */
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-deep); padding: .5rem 1.2rem 1.4rem;
    transform: translateY(-120%); transition: transform .32s ease;
    box-shadow: 0 20px 30px rgba(0,0,0,.25);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav.open { transform: translateY(0); }
  .nav a { padding: .95rem .2rem; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 1.05rem; }
  .nav a::after { display: none; }

  /* En móvil ocultamos el botón de contacto del cabezal (queda el flotante) */
  .header-cta .btn--header-desktop { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero__stats { gap: 1.4rem 2rem; }
  .region__map { order: -1; }
}