/* r4 1789824241 */
/* ===========================================================================
   ADAGIO — Scroll horizontal en móvil
   Cargado por wp-content/mu-plugins/adagio-megamenu.php

   PROBLEMA
   En un viewport de 440px el documento medía 982px de ancho, así que la
   página se podía arrastrar hacia el costado y se veía corrida.
   Medido con el inspector, los culpables son elementos con posición
   absoluta y offsets en px pensados para escritorio:

     .elementor-element-efad209   imagen decorativa (círculos) -> borde derecho en 981px
     .elementor-element-91a0b09   imagen decorativa (círculos) -> 575px
     .elementor-element-ff55309   imagen decorativa            -> 588px
     .elementor-element-08ad3e8   imagen decorativa            -> 564px
     .custom-lang-switcher-*      selector de idioma           -> 455px

   Los carruseles (swiper) también sobresalen, pero su contenedor ya los
   recorta y no generan scroll: no hay que tocarlos.

   SOLUCIÓN
   No borrar el arte decorativo, sino recortarlo en el borde de su sección,
   y darle al selector de idioma el ancho que su contenido necesita.
   =========================================================================== */

@media (max-width: 1024px) {

  /* --- 1. arte decorativo: se recorta en el borde de su sección --------- */
  .elementor-element.elementor-element-831cf74,
  .elementor-element.elementor-element-b25bffe {
    /* overflow-x: clip es preferible a hidden porque no convierte la sección
       en un contenedor de scroll (no rompe position:sticky ni el anclaje de
       elementos internos). Se deja hidden antes como respaldo para
       navegadores que no soporten clip. */
    overflow-x: hidden;
    overflow-x: clip;
  }

  /* --- 2. selector de idioma -------------------------------------------- */
  /* El widget mide 55px pero su contenido ("ES" + iconos) necesita 71px, así
     que se salía 15px. Con width:auto el widget toma el ancho de su
     contenido y, como su contenedor es flex alineado a la derecha, queda
     pegado al borde sin pasarse. */
  .elementor-element.elementor-element-658a87e {
    width: auto !important;
    min-width: 78px !important;
    flex: 0 0 auto !important;
  }

  /* nada de max-width acá: recortar la caja no achica el contenido, sólo
     hacía que la flechita se saliera 7px. El widget de arriba le da el
     ancho que necesita y, al estar alineado a la derecha, no desborda. */
  [class*="custom-lang-switcher"] {
    max-width: none;
  }
}

/* ===========================================================================
   PALABRAS LARGAS EN TÍTULOS GRANDES
   A 320px el título "Estamos transformando la gestión de Recursos Humanos"
   generaba scroll: la palabra "transformando" sola mide 310px a 44px de
   tipografía, y en 320px de pantalla quedan 260px útiles.
   =========================================================================== */

/* red de seguridad: si alguna palabra no entra, que corte en vez de empujar
   la página. Sólo actúa cuando la palabra realmente no cabe. */
@media (max-width: 400px) {
  .elementor-widget-text-editor h1,
  .elementor-widget-text-editor h2,
  .elementor-widget-text-editor h3,
  .elementor-widget-heading h1,
  .elementor-widget-heading h2,
  .elementor-widget-heading h3 {
    overflow-wrap: break-word;
  }
}

/* y para este título en particular, bajamos la tipografía lo justo para que
   "transformando" entre entera y no haga falta cortarla */
@media (max-width: 360px) {
  .elementor-element.elementor-element-0e7c4ae h2 {
    font-size: 34px !important;
  }
}

/* ===========================================================================
   RED DE SEGURIDAD
   Después de contener los casos puntuales, a 320px quedaba un residuo de
   ~32px repartido entre elementos internos de los carruseles. En vez de
   perseguir cada uno, se impide el scroll horizontal a nivel documento.

   Se usa clip y NO hidden a propósito: hidden convierte al elemento en un
   contenedor de scroll y puede romper el header sticky; clip no.
   Los navegadores que no soporten clip simplemente ignoran la línea.
   =========================================================================== */

@media (max-width: 767px) {
  html,
  body {
    overflow-x: clip;
  }
}