/* Ajustes para pantallas chicas — MABATEC
   ---------------------------------------------------------------------------
   La cabecera y el pie del sitio original son contenedores flex a los que
   nunca se les permitio envolver, asi que en un telefono empujaban la pagina
   a unos 495px de ancho y el navegador recortaba todo lo que sobraba.
   Estan duplicados en diez hojas distintas, asi que en vez de tocar las diez
   esta se carga al final en todas las paginas y corrige los dos.
   (Recordar: html{font-size:75%}, o sea 1rem = 12px. Por eso van pixeles.) */

@media (max-width: 900px){

  /* ---------- cabecera ---------- */
  .header_1{
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 4%;
  }
  .header_1 .logo{
    height: auto;
    max-height: 62px;
    max-width: 62%;
  }
  .navbar{
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
  }
  .header_1 .navbar a{
    margin: 3px 9px;
    font-size: 14px;
  }

  /* ---------- pie ---------- */
  .footer-07{
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 16px 4%;
  }
  .footer_heading{
    width: 100%;
    margin: 4px 0 8px;
    font-size: 17px;
  }
  .footer-07 .telefono,
  .footer-07 .correo{
    margin: 4px 8px;
  }
  /* El correo es lo mas largo del pie: si no puede partirse, estira la pagina. */
  .footer-07 .correo{
    width: 100%;
    word-break: break-word;
  }
  .social_buttons{
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
  }
}

/* ---------------------------------------------------------------------------
   Arreglos puntuales de desborde horizontal, a cualquier ancho. */

/* En servicios.html la cabecera pide width:100vw. Los 100vw incluyen la barra
   de desplazamiento, asi que siempre sobresale unos pixeles. */
.header_1{ width: 100%; }

/* servicios.html: la grilla de fotos pedia el 100% del ancho MAS 3rem de
   margen a cada lado, o sea siempre mas que la pantalla. Y las fotos, fijadas
   solo por su alto, no tenian tope de ancho. */
.c_serv_3{ width: auto; }
.c_serv_3 img{ max-width: 100%; object-fit: cover; }

@media (max-width: 900px){
  .c_serv_3{
    grid-template-columns: minmax(0, 1fr);
    margin: 16px;
  }
  .c_serv_3 img{ height: auto; }
  .c_serv_3 div{ height: auto; padding: 20px; }
}

/* Ultima red de seguridad: que nada asome fuera de la pantalla. */
body{ overflow-x: hidden; }

/* ---------------------------------------------------------------------------
   Boton flotante de WhatsApp, presente en todas las paginas.
   Va aca porque esta hoja ya se carga en las 16. */
.wsp-flota{
  position:fixed; right:18px; bottom:18px; z-index:900;
  width:56px; height:56px; border-radius:50%;
  background:#25d366; display:grid; place-items:center;
  box-shadow:0 5px 18px rgba(0,0,0,.3);
  transition:transform .16s ease;
}
.wsp-flota:hover,
.wsp-flota:focus-visible{ transform:scale(1.07); }
.wsp-flota:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.wsp-flota svg{ width:31px; height:31px; fill:#fff; }

@media (max-width:640px){
  .wsp-flota{ right:14px; bottom:14px; width:52px; height:52px; }
  .wsp-flota svg{ width:28px; height:28px; }
}

/* Enlace a la otra línea de negocio, en el pie de todas las páginas.
   El pie es un flex en una sola fila: para meter una linea entera hay que
   dejarlo envolver y mandar este bloque al final con order.
   Y hay que anular el text-transform:capitalize global del sitio, o sale
   «¿Buscabas Construcción? Mabatec También Hace Obras Y Acabados». */
.footer-07{ flex-wrap:wrap; align-items:center; }
.otra-linea{
  width:100%; order:10; text-align:center;
  margin:14px 0 0; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.14);
  font-family:'Roboto',sans-serif; font-size:14.5px;
  text-transform:none;
}
.otra-linea *{ text-transform:none; }
.otra-linea i{ color:#8fc74a; margin-right:7px; }
.otra-linea a{ color:rgba(255,255,255,.88); text-decoration:none; }
.otra-linea a:hover{ color:#fff; text-decoration:underline; }