/* DESBORDAMIENTO */

/* 0) Nunca permitir scroll horizontal */
html, body { width:100%; overflow-x:hidden; }

/* 1) Imágenes/iframes 100% para que no "empujen" el ancho */
img, svg, video, canvas, iframe { max-width:100%; height:auto; display:block; }

/* 2) Navbar / botón MENÚ recortado (Agency + Bootstrap) */
#mainNav, #mainNav .container { overflow:visible; }
#mainNav .navbar-brand img { max-height:124px; width:auto; height:auto; } /* baja un poco el logo en mobile */
#mainNav .navbar-toggler { 
  white-space:nowrap;           /* que quepa "MENU" entero */
  width:auto;                   /* sin ancho fijo que lo corte */
  padding:.5rem .75rem;
}
#mainNav .navbar { min-width:0; }  /* por si algún flex recorta hijos */

/* 3) Secciones "full" que usan 100vw dentro de containers con padding */
section, header, footer, .masthead, .page-section, .container, .container-fluid {
  max-width:100%;
}
[class*="vw"] { width:100% !important; } /* si accidentalmente usaste 100vw en alguna clase */

/* 4) Botón flotante de WhatsApp (evitar que “empuje” el ancho) */
.whatsapp-float, .whatsapp-float * { box-sizing:border-box; }
.whatsapp-float {
  position:fixed;
  right:16px;                  /* nunca valores negativos */
  bottom:16px;
  max-width:64px;
  max-height:64px;
}

/* 5) Formulario: inputs y botón al 100% sin sobresalir */
#contact form input,
#contact form textarea,
#contact form button {
  width:100%;
  box-sizing:border-box;
}