/* ==========================================================================
   Correcciones sobre la maqueta de Campestre

   Campestre es la página de 2022 y está en producción. Aquí no se rediseña
   nada: solo entran arreglos de fallos comprobados, uno por uno y con la
   medición que los justifica.
   ========================================================================== */

/* ---- El menú lateral asomaba 102 px en móvil ----------------------------- */
/*
   ElementsKit esconde su off-canvas con `left: -100%`, pero le da `width:
   100vw`. Mientras el ancho de maquetación coincida con el de la ventana, da
   igual. En este sitio no coinciden: el botón "¡AGENDA TU CITA!" del
   encabezado mide 300 px y arranca en x=204, o sea que llega a 504 sobre una
   pantalla de 412. Ese desborde infla el viewport de maquetación a 514.

   A partir de ahí, 100% son 412 y 100vw son 514. El menú se esconde 412 px
   pero mide 514: le sobran 102, que se quedan pegados al borde izquierdo de
   la pantalla como una franja verde (rgb(35,48,43)), permanentemente y sin
   que nadie haya abierto el menú.

   Medido en el aparato del cliente —Android 10, Chrome, pantalla de 412—:
   el menú en `left:-411px` con `width:514px`, `active=false`, `visibility:
   visible`, borde derecho en 103. Y reproducido aquí a 412 de ancho: borde
   derecho en 102.

   No lo causaba el aviso emergente. El aviso solo tapaba la pantalla
   mientras corrían las animaciones de entrada de Elementor, y al cerrarse
   dejaba a la vista una franja que ya estaba ahí.

   El CSS de ElementsKit lo esconde así:

     @media (max-width:1024px) {
       .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements {
         width: 100%;  left: -100vw;  position: fixed;
       }
     }

   Sobre una página que no desborda, eso funciona. Aquí no: `100vw` resuelve
   contra el bloque contenedor inicial, que son los 412 px del aparato, pero
   `width:100%` resuelve contra el padre, que mide 514 por el desborde. Se
   esconde 412 y mide 514.

   Se corrige con transform y no con `left`. Los porcentajes de `left`
   resuelven contra el mismo bloque contenedor que ya está mal; los de
   `translateX` resuelven contra el ancho del propio elemento, así que lo
   esconden entero midan lo que midan la ventana y el padre.

   Comprobado a 412 px de ancho, borde derecho del menú cerrado:

     sin arreglo         +102 px   asoma
     left: -100%         +102 px   asoma  (mismo bloque contenedor roto)
     translateX(-100%)   -412 px   oculto

   Con la clase `active` la regla deja de aplicar y el menú se abre igual.

   Esto trata el síntoma. La causa es el desborde horizontal, y mientras siga
   ahí la página se sirve alejada al 80% en móvil y el propio botón del
   encabezado sale cortado.
*/
.elementskit-menu-offcanvas-elements:not(.active) {
	transform: translateX(-100%);
}