/*
Theme Name: Hello Elementor Child
Theme URI: https://oddino.co/
Description: Child theme de Hello Elementor. Centraliza el CSS y JS custom del sitio (scroll-lock de popups, bloques mobile, video de fondo, layout de popups). Pensado como base replicable.
Author: Connected
Template: hello-elementor
Version: 1.7.2
Text Domain: hello-elementor-child
*/

/* =========================================================
   1. SCROLL-LOCK DE POPUPS
   ---------------------------------------------------------
   El bloqueo lo maneja assets/js/scroll-lock.js bloqueando el
   scroll del fondo por eventos (wheel/touch/teclado). NO
   tocamos position NI overflow del html/body: cambiar overflow
   en paginas con fullpage forzaba un recalculo que hacia que
   el scroll "saltara al top y volviera" al cerrar el popup.
   Solo evitamos el rebote elastico, que no mueve el scroll.
   ========================================================= */
html.oddino-popup-lock,
body.oddino-popup-lock {
  overscroll-behavior: none !important;
}

/* Contiene el rebote de scroll dentro del modal de Elementor. */
.dialog-lightbox-widget,
.dialog-lightbox-message,
.elementor-location-popup {
  overscroll-behavior: contain;
}


/* =========================================================
   2. BLOQUES MOBILE 50% / 50%
   ---------------------------------------------------------
   Contenedor que ocupa el alto visible del telefono con dos
   hijos al 50%. Aplica solo en mobile (<=767px).
   Clase a poner en el contenedor de Elementor: bloque-mitad-mobile
   ========================================================= */
@media (max-width: 767px) {
  .bloque-mitad-mobile {
    min-height: 100svh !important;
    height: 100svh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .bloque-mitad-mobile > .e-con {
    min-height: 50% !important;
    height: 50% !important;
    flex: 0 0 50% !important;
  }

  .bloque-mitad-mobile > .e-con:first-child {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .bloque-mitad-mobile > .e-con:last-child {
    overflow: hidden !important;
  }
}


/* =========================================================
   3. VIDEO HTML COMO FONDO DE CONTENEDOR
   ---------------------------------------------------------
   Clase a poner en el contenedor de Elementor: video-full-bg-section
   El widget HTML con el video lleva la clase: video-bg-widget
   ========================================================= */
.video-full-bg-section {
  position: relative !important;
  overflow: hidden !important;
}

.video-full-bg-section .elementor-widget-html.video-bg-widget {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.video-full-bg-section .elementor-widget-html.video-bg-widget .elementor-widget-container,
.video-full-bg-section .custom-video-bg {
  width: 100% !important;
  height: 100% !important;
}

.video-full-bg-section .custom-video-bg video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.video-full-bg-section > .e-con-inner {
  position: relative !important;
  z-index: 2 !important;
}

.video-full-bg-section .elementor-widget:not(.video-bg-widget),
.video-full-bg-section .e-con:not(.custom-video-bg) {
  position: relative;
  z-index: 2;
}


/* =========================================================
   4. POPUPS DE ELEMENTOR: SIN SCROLL INTERNO + CARRUSEL
   ---------------------------------------------------------
   Evita barras de scroll fantasma dentro de los popups y hace
   que el carrusel funcione como ventana (una imagen visible).
   Aplica a TODOS los popups. Si algun popup necesita scroll
   interno real (formulario largo), darle una clase propia y
   excluirlo de estas reglas.
   ========================================================= */
.elementor-popup-modal {
  overflow: hidden !important;
}

.elementor-popup-modal .dialog-widget-content {
  overflow: hidden !important;
  max-height: calc(100dvh - 2px) !important;
}

.elementor-popup-modal .dialog-message,
.elementor-popup-modal .dialog-lightbox-message {
  overflow: hidden !important;
  max-height: calc(100dvh - 2px) !important;
  overscroll-behavior: contain !important;
}

.elementor-popup-modal .elementor-image-carousel-wrapper,
.elementor-popup-modal .swiper {
  overflow: hidden !important;
  width: 100% !important;
}

.elementor-popup-modal .swiper-wrapper {
  align-items: center !important;
}

.elementor-popup-modal .swiper-slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* Si vuelve a aparecer scroll en algun popup, subir el -70px a -90px. */
.elementor-popup-modal .swiper-slide img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 70px) !important;
  object-fit: contain !important;
}


/* =========================================================
   5. FIX VIEWPORTS BAJOS / LANDSCAPE (ej: iPad Mini horizontal)
   ---------------------------------------------------------
   En pantallas anchas pero de poca altura, las secciones a
   pantalla completa (min-height:100vh) recortan el contenido.
   Aca dejamos que la seccion crezca con su contenido en vez
   de cortarlo. Ajustar el max-height del media query segun el
   dispositivo a soportar (768 = iPad Mini landscape).
   ========================================================= */
@media (orientation: landscape) and (max-height: 768px) {
  .elementor-section.elementor-section-height-full,
  .e-con-full.oddino-full-height,
  .e-con.oddino-full-height {
    height: auto !important;
    min-height: 100svh !important;
  }

  /* Evita que el contenido vertical se corte: permite que se vea completo. */
  .elementor-section.elementor-section-height-full > .elementor-container,
  .e-con-full.oddino-full-height > .e-con-inner {
    height: auto !important;
    overflow: visible !important;
  }
}