.elementor-4804 .elementor-element.elementor-element-712c1d9{--display:flex;--position:absolute;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:-1px;--margin-right:5px;--padding-top:-20px;--padding-bottom:-20px;--padding-left:-20px;--padding-right:-20px;top:-57px;}.elementor-4804 .elementor-element.elementor-element-712c1d9.e-con{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-4804 .elementor-element.elementor-element-712c1d9{left:0px;}body.rtl .elementor-4804 .elementor-element.elementor-element-712c1d9{right:0px;}@media(max-width:1024px){.elementor-4804 .elementor-element.elementor-element-712c1d9{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:2px;}}@media(min-width:768px){.elementor-4804 .elementor-element.elementor-element-712c1d9{--width:103.796%;}}@media(max-width:1024px) and (min-width:768px){.elementor-4804 .elementor-element.elementor-element-712c1d9{--width:892.111px;}}@media(max-width:767px){.elementor-4804 .elementor-element.elementor-element-712c1d9{--width:1430.111px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:7px;--padding-top:0px;--padding-bottom:0px;--padding-left:-1px;--padding-right:-6px;}}/* Start custom CSS for html, class: .elementor-element-0c1d46e *//* ===============================
   AJUSTES GLOBALES
==================================*/
:root{
  /* Cambia este breakpoint si quieres */
  --breakpoint-fill: 1024px;
}

/* Quita cualquier “flash” del fondo y márgenes */
html, body { height: 100%; margin: 0; }
body { background: #000; } /* color de respaldo mientras carga el hero */

/* ===============================
   HEADER (Elementor Header)
   — Ocultar cuando el HERO no está en vista
   — Mostrar cuando el HERO está visible
   NOTA: A tu sección HERO dale la clase: 'welcome'
==================================*/

/* Mostrar header cuando el hero ESTÁ en vista */
body:has(.welcome:in-view) header.elementor-location-header{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: transform .4s ease, opacity .4s ease;
}

/* Ocultar header cuando el hero NO está en vista */
body:has(.welcome:not(:in-view)) header.elementor-location-header{
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: transform .4s ease, opacity .4s ease;
}

/* ===============================
   HERO A PANTALLA COMPLETA (sin “fugas” de fondo)
   — Aplícalo a tu sección con clase 'welcome'
==================================*/
.welcome.elementor-section{
  /* Garantiza que el hero llene la pantalla en móvil/desktop */
  min-height: 100svh;  /* viewport “small” (seguro en móvil) */
  height: 100lvh;      /* viewport “large” (cuando barra del navegador se oculta) */
  padding: 0 !important;
  overflow: hidden; /* evita que se vea fondo al hacer scroll/barras */
}

/* Si usas fondo de sección/overlay/slide de Elementor, que SIEMPRE cubra */
.welcome.elementor-section,
.welcome .elementor-background-overlay,
.welcome/* End custom CSS */