/* Estilos móviles generales */
@media (max-width: 768px) {
  .contenedor-central {
    padding: 20px;
    margin: 20px 10px;
  }

  .tarjetas {
    grid-template-columns: 1fr;
  }

  .bloque-servicio {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bloque-servicio img {
    margin: 10px auto;
  }

  .info-servicio {
    padding: 20px;
  }

  .formulario-contacto {
    max-width: 100%;
  }

  .contador-grid {
    flex-direction: column;
    gap: 20px;
  }

  .nav-links {
    width: 100%;
  }

  .mensaje-resultado {
    width: 90%;
    font-size: 14px;
  }

  #btnEnviar {
    width: 100%;
    padding: 14px;
  }

  .mapa iframe {
    width: 100%;
    height: 250px;
  }
}



/* ====== HARDEN: móviles muy chicos (≤360px) ====== */
@media (max-width: 360px) {
  html { font-size: 87.5%; } /* reduce tipografía global ~14% */

  /* Contenedor principal más compacto */
  .contenedor-central {
    padding: 16px;
    margin: 16px 8px;
  }

  /* Navbar */
  .nav-top { gap: 8px; }
  .menu-toggle { font-size: 24px; }
  .logo, .logo-link { font-size: 18px; }

  /* Menú desplegable */
  .nav-links {
    padding: 12px 0;
  }
  .nav-links li { margin: 6px 0; }

  /* Títulos y botones hero */
  .contenido h1 { font-size: clamp(22px, 6vw, 28px); }
  .contenido .btn {
    display: inline-block;
    padding: 10px 16px;
    font-size: 14px;
  }

  /* Tarjetas */
  .tarjetas { grid-template-columns: 1fr; }
  .tarjeta { padding: 16px; min-width: 0; }
  .tarjeta img { width: 64px; height: 64px; }

  /* Sección servicios */
  .bloque-servicio { flex-direction: column; }
  .bloque-servicio img {
    width: 120px; height: 120px; margin: 12px auto;
  }
  .info-servicio { padding: 16px; }

  /* Contacto: evita desbordes por min-width de secciones */
  .contacto-contenido { gap: 16px; }
  .formulario-contacto,
  .mapa {
    min-width: 0 !important; /* anula min-width:300px */
    width: 100% !important;
    max-width: 100% !important;
  }
  .campo label { font-size: 14px; left: 12px; }
  .formulario-contacto input,
  .formulario-contacto textarea {
    padding: 12px 10px;
  }
  .validacion { right: 8px; }

  .grupo-envio { gap: 6px; }
  #btnEnviar { width: 100%; padding: 12px; }

  /* Mapa embebido */
  .mapa iframe {
    width: 100% !important;
    height: 200px !important;
  }

  /* Contadores */
  .contador-grid { gap: 16px; }
  .contador-item { padding: 20px; }

  /* WhatsApp flotante + menú */
  .whatsapp-bot { right: 14px; bottom: 14px; }
  #btnWsp { width: 52px; height: 52px; }
  #btnWsp img { width: 44px; height: 44px; }

  .menu-wsp {
    right: 0;
    left: auto;
    width: auto;
    max-width: calc(100vw - 32px);
    padding: 12px;
  }
  .menu-wsp button {
    font-size: 13px;
    padding: 8px;
    white-space: normal; /* que el texto pueda saltar de línea */
  }

  .mensaje-resultado {
    width: 95%;
    font-size: 13px;
  }
}

/* ====== ULTRA chico (≤330px): recortes extra ====== */
@media (max-width: 330px) {
  .contenedor-central {
    padding: 12px;
    margin: 12px 6px;
  }
  .logo, .logo-link { font-size: 17px; }
  .nav-links { padding: 10px 0; }

  .tarjeta { padding: 14px; }
  .tarjeta h3 { font-size: 16px; }
  .tarjeta p { font-size: 13px; }

  .bloque-servicio img {
    width: 110px; height: 110px;
  }

  .contacto h2 { font-size: 22px; }
  .contacto p { font-size: 13px; margin-bottom: 24px; }

  .menu-wsp { max-width: calc(100vw - 24px); }
}