#elementor-popup-modal-11032 .dialog-widget-content{background-color:var( --e-global-color-9b73db9 );background-image:url("https://iboards.es/wp-content/uploads/04_1_IBOARDS_CAMPANIAS_HALLOWEEN_popup.jpg");background-position:center center;background-repeat:no-repeat;background-size:contain;border-style:none;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-11032{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-11032 .dialog-message{width:475px;height:380px;align-items:flex-start;}/* Start custom CSS for column, class: .elementor-element-9279a56 *//*!
 * SECCIÓN TRANSPARENTE - POPUP HALLOWEEN 2025
 * ==========================================
 * 
 * UBICACIÓN: Elementor → Sección → Avanzado → CSS personalizado
 * CLASE: section-popup-halloween-2025
 * VERSIÓN: 5.1 - CONTENEDOR SIMPLE CON RESPONSIVE BÁSICO
 */

.section-popup-halloween-2025 {
  /* Transparente - sin imagen */
  background: transparent !important;
  background-image: none !important;
  
  /* Posicionamiento relativo para el elemento absolute */
  position: relative !important;
  
  /* Heredar dimensiones del popup */
  width: 100% !important;
  height: 100% !important;
  
  /* Sin espaciado */
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Contenedor Elementor interno */
.section-popup-halloween-2025 .elementor-container {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: relative !important;
}

/* RESPONSIVE BÁSICO SOLO PARA ALTURA MÍNIMA */
@media screen and (max-width: 767px) {
  .section-popup-halloween-2025 {
    min-height: 100vh !important;
  }
  
  .section-popup-halloween-2025 .elementor-container {
    min-height: 100vh !important;
  }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-25e72e1 *//*!
 * SECCIÓN TRANSPARENTE - POPUP HALLOWEEN 2025 - RESPONSIVE
 * ========================================================
 * 
 * UBICACIÓN: Elementor → Sección → Avanzado → CSS personalizado
 * CLASE: section-popup-halloween-2025
 * VERSIÓN: 6.0 - CONTENEDOR RESPONSIVE PARA ELEMENTO CLICKEABLE
 */

.section-popup-halloween-2025 {
  /* Transparente - sin imagen (imagen está en nivel 01) */
  background: transparent !important;
  background-image: none !important;
  
  /* Posicionamiento relativo para el elemento absolute */
  position: relative !important;
  
  /* Dimensiones responsive completas */
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  
  /* Sin espaciado para maximizar área clickeable */
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  
  /* Overflow controlado */
  overflow: hidden !important;
  
  /* Z-index para overlay clickeable */
  z-index: 10 !important;
}

/* Contenedor Elementor interno - Responsive */
.section-popup-halloween-2025 .elementor-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: relative !important;
  
  /* Flexbox para centrado responsive */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* RESPONSIVE BREAKPOINTS PARA SECCIÓN */

/* Desktop Grande (1920px+) */
@media screen and (min-width: 1920px) {
  .section-popup-halloween-2025 {
    padding: 2vh 5vw !important;
  }
  
  .section-popup-halloween-2025 .elementor-container {
    max-width: 90vw !important;
  }
}

/* Desktop Estándar (1200px - 1919px) */
@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .section-popup-halloween-2025 {
    padding: 1vh 3vw !important;
  }
  
  .section-popup-halloween-2025 .elementor-container {
    max-width: 94vw !important;
  }
}

/* Tablet Landscape (1024px - 1199px) */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .section-popup-halloween-2025 {
    padding: 1vh 2vw !important;
  }
  
  .section-popup-halloween-2025 .elementor-container {
    max-width: 96vw !important;
  }
}

/* Tablet Portrait (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .section-popup-halloween-2025 {
    padding: 2vh 1vw !important;
  }
  
  .section-popup-halloween-2025 .elementor-container {
    max-width: 98vw !important;
    align-items: flex-start !important;
    padding-top: 5vh !important;
  }
}

/* Mobile Landscape (568px - 767px) */
@media screen and (min-width: 568px) and (max-width: 767px) and (orientation: landscape) {
  .section-popup-halloween-2025 {
    padding: 1vh 1vw !important;
    height: 100vh !important;
  }
  
  .section-popup-halloween-2025 .elementor-container {
    max-width: 98vw !important;
    min-height: 98vh !important;
  }
}

/* Mobile Portrait (481px - 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .section-popup-halloween-2025 {
    padding: 2vh 1vw !important;
  }
  
  .section-popup-halloween-2025 .elementor-container {
    max-width: 98vw !important;
    align-items: flex-start !important;
    padding-top: 3vh !important;
  }
}

/* Mobile Pequeño (320px - 480px) */
@media screen and (min-width: 320px) and (max-width: 480px) {
  .section-popup-halloween-2025 {
    padding: 1vh 0.5vw !important;
  }
  
  .section-popup-halloween-2025 .elementor-container {
    max-width: 99vw !important;
    align-items: flex-start !important;
    padding-top: 2vh !important;
  }
}

/* Mobile Extra Pequeño (< 320px) */
@media screen and (max-width: 319px) {
  .section-popup-halloween-2025 {
    padding: 1vh 0.25vw !important;
  }
  
  .section-popup-halloween-2025 .elementor-container {
    max-width: 99.5vw !important;
    align-items: flex-start !important;
    padding-top: 1vh !important;
  }
}

/* ACCESIBILIDAD Y UX RESPONSIVE */

/* Focus visible para navegación por teclado */
.section-popup-halloween-2025:focus-within {
  outline: 2px solid #ff6b35;
  outline-offset: -2px;
}

/* Reducir animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .section-popup-halloween-2025,
  .section-popup-halloween-2025 .elementor-container {
    transition: none !important;
  }
}

/* OPTIMIZACIÓN PARA TOUCH DEVICES */
@media (hover: none) and (pointer: coarse) {
  .section-popup-halloween-2025 {
    /* Optimizaciones para touch */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    
    /* Evitar zoom accidental */
    touch-action: manipulation;
  }
}

/* DEBUG MODE (solo para desarrollo) */
.section-popup-halloween-2025.debug {
  border: 2px solid blue !important;
  background-color: rgba(0, 0, 255, 0.1) !important;
}

.section-popup-halloween-2025.debug::after {
  content: 'SECTION DEBUG - W:' attr(data-width) ' H:' attr(data-height);
  position: absolute;
  top: 50px;
  left: 10px;
  background: rgba(0, 0, 255, 0.9);
  color: white;
  padding: 5px 10px;
  font-size: 11px;
  z-index: 999999;
  border-radius: 3px;
}

/* ========================================
   📱 NOTAS DE IMPLEMENTACIÓN RESPONSIVE:
   
   1. Sección transparente que no interfiere con imagen del popup
   2. Flexbox centrado responsive para contenido interno
   3. Padding adaptativo según dispositivo
   4. Touch optimizations para móviles
   5. Accesibilidad mejorada con focus-within
   
   🎯 JERARQUÍA RESPONSIVE:
   01_popup (imagen) → 02_section (contenedor) → 03_column → 04_element
   ======================================== *//* End custom CSS */
/* Start custom CSS *//* ========================================
   🎃 POPUP HALLOWEEN 2025 - NIVEL 01 - CONFIGURACIÓN MANUAL UX
   ⚠️ IMPORTANTE: La imagen responsive se configura desde Elementor UX
   ======================================== */

/* 
 * ⚠️ NOTA CRÍTICA SOBRE ELEMENTOR:
 * ===============================
 * Algunos estilos de Elementor vienen con valores "Por defecto" que se aplican
 * a un nivel superior y tienen mayor prioridad que nuestro CSS personalizado.
 * 
 * CONFIGURACIÓN REQUERIDA EN ELEMENTOR UX:
 * 1. Popup → Style → Background → Image: [Subir imagen Halloween]
 * 2. Popup → Style → Background → Size: "Contain" (para imagen completa)
 * 3. Popup → Style → Background → Position: "Center Center" 
 * 4. Popup → Responsive → Tablet/Mobile: Ajustar Size y Position según necesidad
 * 
 * ❌ NO FUNCIONA: Aplicar background-size desde CSS (Elementor lo sobreescribe)
 * ✅ SÍ FUNCIONA: Configurar desde Elementor UX (nivel superior)
 */

/* ELIMINACIÓN DE BARRA DE SCROLL DEL POPUP */
.dialog-message.dialog-lightbox-message,
.dialog-message .elementor-location-popup,
.elementor-location-popup,
.popup-halloween-2025 {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* CONTENEDORES INTERNOS DE ELEMENTOR - SIN SCROLL */
.elementor-location-popup .elementor-section-wrap,
.elementor-location-popup .elementor-container,
.elementor-location-popup .elementor-row,
.elementor-location-popup .elementor-column,
.elementor-location-popup .elementor-widget-wrap {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* BODY Y HTML - PREVENIR SCROLL GLOBAL CUANDO POPUP ESTÁ ACTIVO */
body.elementor-popup-modal-active,
html.elementor-popup-modal-active {
    overflow: hidden !important;
}

/* OPTIMIZACIONES MENORES QUE SÍ SE PUEDEN APLICAR POR CSS */
.popup-halloween-2025,
.elementor-location-popup {
    /* Asegurar que no hay bordes o sombras que interfieran */
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ========================================
   📱 CONFIGURACIÓN RESPONSIVE EN ELEMENTOR UX:
   
   DESKTOP:
   - Background Size: "Contain"
   - Background Position: "Center Center"
   
   TABLET:
   - Background Size: "Contain" o "Cover" según necesidad
   - Background Position: "Center Center" o "Center Top"
   
   MOBILE:
   - Background Size: "Contain" (recomendado para imagen completa)
   - Background Position: "Center Center"
   - Background Attachment: "Scroll" (mejor performance)
   
   ⚠️ IMPORTANTE: Usar los controles responsive de Elementor
   en lugar de CSS para configuración de imagen de fondo.
   ======================================== *//* End custom CSS */