/* =========================================================================
   Mungos — Correcciones responsive móvil (neutralizar el CSS por-widget de
   Elementor).

   PROBLEMA: Elementor genera CSS por instancia (uploads/elementor/css/post-*.css)
   desde los controles de estilo del editor, con selectores de ALTA especificidad
   (p.ej. `.elementor-NNN .elementor-element-XXXX .mu-ticker-item`, 4 clases).
   Esos valores están en px FIJOS pensados para desktop y SIN versión móvil, así
   que en el teléfono pisan las reglas responsive del propio widget (1 clase) y
   todo se ve gigante / descuadrado. Aquí forzamos, SOLO en móvil, valores sanos
   con `!important` (que gana a Elementor sin tocar el diseño desktop).

   Se carga en todas las páginas y queda EXCLUIDO del optimizador de LiteSpeed
   por Asset_Manager (ruta plugins/mungos-animations/), igual que el resto del CSS.

   Dos bloques:
   · GENÉRICO  → por clase de widget: sirve para cualquier página/instancia.
   · PÁGINA HOME (post 103580) → por id de elemento Elementor: secciones y
     widgets NATIVOS (títulos "NOS MUEVE", margen de la sección del ticker…) que
     no tienen clase mungos y solo se pueden alcanzar por su id en esta página.
   ========================================================================= */

@media (max-width: 767px) {

  /* ═══ GENÉRICO (por clase de widget) ═══════════════════════════════════ */

  /* Ticker/marquesina: la tipografía de 50px del editor no cabe en móvil. */
  .mu-ticker-item { font-size: clamp(16px, 5.2vw, 24px) !important; }
  .mu-ticker-separator,
  .mu-ticker-separator svg { font-size: 26px !important; width: 26px !important; height: 26px !important; }
  .mu-ticker-inner { gap: 16px !important; }
  /* La barra va rotada y más ancha que el viewport → recortar para no generar
     scroll horizontal en la página. */
  .elementor-widget-mungos-ticker { overflow-x: clip; }

  /* (El óvalo del portal de la cinta ya lo maneja conveyor-belt.css con la
     geometría escalada/alineada de la garra — se quitó de aquí para no chocar.) */

  /* Testimonios: el editor puso padding lateral de 200px (0200px) → en 384px
     eso deja el contenido sin ancho. Lo reducimos a un margen usable. */
  .elementor-widget-mungos-testimonials > .elementor-widget-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Red de seguridad anti-scroll-horizontal en móvil: NINGÚN widget (bandas
     full-bleed 100vw, elementos rotados como el ticker, decoraciones que asoman)
     puede generar scroll en X. Clip en html + body para cubrir cualquier caso. */
  html, body { overflow-x: clip; }


  /* ═══ PÁGINA HOME (post 103580) — por id de elemento ═══════════════════ */

  /* Sección del ticker: margin-top:-230px / -114px (solape con el hero en
     desktop) es demasiado en móvil → se encima sobre el contenido. */
  .elementor-element-69ed314 { margin-top: -70px !important; margin-bottom: -20px !important; }

  /* Sección de testimonios: min-height:655px pensado para el collage; con el
     slider el contenido es más corto y sobra caja vacía. */
  .elementor-element-48b57c3 { min-height: 0 !important; }

  /* Bloque "NOS MUEVE": títulos nativos de Elementor en 117px y 99px + un icono
     con margin-left:175px / margin-top:-106px → gigantes y fuera de sitio. */
  .elementor-element-db862e5 .elementor-heading-title { font-size: clamp(46px, 16vw, 88px) !important; }
  .elementor-element-56760a7 { margin-left: 0 !important; }
  .elementor-element-56760a7 .elementor-heading-title { font-size: clamp(40px, 14vw, 78px) !important; }
  .elementor-element-39f4fac { margin: -24px 0 0 0 !important; }
  .elementor-element-39f4fac .elementor-icon,
  .elementor-element-39f4fac .elementor-icon svg { font-size: 56px !important; height: 56px !important; }
}