/* r6 1789824125 */
/* ===========================================================================
   ADAGIO — Header en móvil (< 768px)
   Cargado por wp-content/mu-plugins/adagio-megamenu.php

   PROBLEMA
   Por debajo de 768px la cadena de contenedores del header se encogía: la
   columna exterior quedaba en 177px y la sección interna (la píldora blanca)
   en 157px, en vez de los 353px disponibles. Con tan poco espacio las tres
   columnas (logo / menú / botón) se apilaban una debajo de la otra y el
   botón se salía de la píldora.

   Además, la columna del menú arrastraba el ancho del panel desplegable
   (que está en el flujo normal, no absoluto), así que pedía 143px cuando en
   realidad sólo tiene que mostrar la hamburguesa de 33px.

   SOLUCIÓN
   1. Forzar ancho completo en toda la cadena de contenedores.
   2. Rearmar la fila: logo | Contáctanos | hamburguesa.
   3. Sacar el panel desplegable del flujo para que no infle el header.
   =========================================================================== */

@media (max-width: 767px) {

  /* --- 1. la cadena de contenedores recupera el ancho completo ---------- */
  .elementor-151 .elementor-element.elementor-element-05a3050 > .elementor-container,
  .elementor-151 .elementor-element.elementor-element-675bf03,
  .elementor-151 .elementor-element.elementor-element-675bf03 > .elementor-widget-wrap,
  .elementor-151 .elementor-element.elementor-element-3ebcaea,
  .elementor-151 .elementor-element.elementor-element-3ebcaea > .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* --- 2. una sola fila: logo | Contáctanos | hamburguesa --------------- */
  .elementor-151 .elementor-element.elementor-element-3ebcaea > .elementor-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    padding: 12px 16px !important;
  }

  .elementor-151 .elementor-element.elementor-element-571e76f,
  .elementor-151 .elementor-element.elementor-element-f81808a,
  .elementor-151 .elementor-element.elementor-element-259b6d4 {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  .elementor-151 .elementor-element.elementor-element-571e76f { order: 1; } /* logo */
  .elementor-151 .elementor-element.elementor-element-259b6d4 { order: 2; } /* Contáctanos */
  .elementor-151 .elementor-element.elementor-element-f81808a { order: 3; } /* hamburguesa */

  .elementor-151 .elementor-element.elementor-element-571e76f > .elementor-widget-wrap,
  .elementor-151 .elementor-element.elementor-element-f81808a > .elementor-widget-wrap,
  .elementor-151 .elementor-element.elementor-element-259b6d4 > .elementor-widget-wrap {
    width: auto !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
  }

  /* --- 3. el widget del menú sólo ocupa la hamburguesa ------------------ */
  .elementor-151 .elementor-element.elementor-element-eea6541 {
    position: relative !important;
    width: 44px !important;
  }

  .elementor-151 .elementor-element.elementor-element-eea6541 .elementor-menu-toggle {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* El panel desplegable del menú móvil está en el flujo normal, así que su
     ancho natural (el del menú entero) inflaba la columna. Lo sacamos del
     flujo y lo anclamos debajo del header.
     OJO: se apunta a .elementor-nav-menu__container a propósito — la clase
     .elementor-nav-menu--dropdown sola también la llevan los <ul> de
     submenú del mega menú de escritorio. */
  .elementor-151 .elementor-element.elementor-element-eea6541 .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    /* -16px compensa el padding lateral de la píldora, para que el panel
       quede alineado con ella: la píldora ocupa 100vw - 60px (20px de la
       sección + 10px de la columna, de cada lado). */
    right: -16px !important;
    left: auto !important;
    width: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 16px;
    z-index: 999;
  }

  /* --- detalles ---------------------------------------------------------- */

  /* botón compacto para que los tres elementos entren en la fila */
  .elementor-151 .elementor-element.elementor-element-9b98341 .elementskit-btn {
    padding: 7px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* el logo no debe estirarse. Con 104px los tres elementos (104 + ~106 del
     botón + 44 de la hamburguesa) entran en los 333px de la píldora dejando
     aire entre ellos, en vez de quedar pegados. */
  .elementor-151 .elementor-element.elementor-element-d9f6991 img {
    max-width: 104px !important;
    height: auto !important;
  }
}

/* ===========================================================================
   PANTALLAS ANGOSTAS
   El ancho útil dentro de la píldora es: viewport - 60px (padding de sección
   y columna) - 32px (padding de la píldora). Los tres elementos miden
   120 + ~107 + 44 = 271px más 20px de separación = 291px, así que por debajo
   de ~390px ya no entran y el botón hamburguesa se salía.
   =========================================================================== */

@media (max-width: 390px) {
  .elementor-151 .elementor-element.elementor-element-3ebcaea > .elementor-container {
    padding: 10px 12px !important;
    gap: 8px;
  }

  .elementor-151 .elementor-element.elementor-element-d9f6991 img {
    max-width: 96px !important;
  }

  .elementor-151 .elementor-element.elementor-element-9b98341 .elementskit-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}

/* Por debajo de 340px ni siquiera eso alcanza: se oculta el botón del header.
   El CTA sigue disponible en el hero y en el resto de la página. */
@media (max-width: 340px) {
  .elementor-151 .elementor-element.elementor-element-259b6d4 {
    display: none !important;
  }
}