/* ============================================================
   1. ESTILOS GLOBALES Y EDITOR (BODY / HEADER)
   ============================================================ */
body {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

header > .elementor-element {
    max-width: 100vw !important;
}

body.elementor-editor-active #tk-loader {
    display: none;
    pointer-events: none;
}

/* ============================================================
   2. CONTENEDOR DE PROYECTO (HERO WRAPPER)
   ============================================================ */
.elementor-3314 .elementor-element.elementor-element-7d449c7 {
    z-index: -1;
}
.hero-loop-project-container {
    position: relative !important;
    overflow: hidden;
}

/* Efecto de bordes cuando se hace hover */
.hero-loop-project-container.hover {
    border-width: 0px 0px 0px 0px !important;
    --border-top-width: 0px !important;
    --border-right-width: 0px !important;
    --border-bottom-width: 0px !important;
    --border-left-width: 0px !important;
    border-color: var(--e-global-color-accent) !important;
    --border-color: var(--e-global-color-accent) !important;
}




/* ============================================================
   5. ENLACES Y OVERLAYS (ARCHIVE LINKS)
   ============================================================ */
.archive-link-container.elementor-element::before {
    opacity: 0 !important;
    content: "" !important;
    transition: opacity 0.3s ease-in-out !important;
}

.archive-link-container.elementor-element:hover::before,
.archive-link-container.elementor-element.hover::before {
    opacity: 0.8 !important;
}


.elementor-3314 .elementor-element.elementor-element-f6295f7:hover {
    box-shadow: none !important;
}

.elementor-3314 .elementor-element.elementor-element-f6295f7 {
    transition: all 0.4s ease-in-out !important;
}

/* ============================================================
   6. AJUSTES RESPONSIVE (MOBILE - 768px)
   ============================================================ */
@media (max-width: 1024px) {
    .hero-home {
        height: 100vh !important;
        width: 100vw !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .hero-iframe-container {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        z-index: -2 !important;
        pointer-events: none; 
    }


    .hero-iframe-container iframe {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 177.77vh !important; 
        height: 100vh !important;        
        min-width: 100vw !important;
        min-height: 100vh !important;
        max-width: none !important;
    }
	
	    .movil-video-background {
        position: absolute !important;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 0 !important; 
        pointer-events: none !important; 
    }
	
	.hero-loop-project-container {
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }

    .video-background-hidden-link {

		position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 999 !important;
        pointer-events: auto !important; 
    }
	
	    /* Overlays de Elementor */
    .archive-link-container.elementor-element:hover::before {
        opacity: 0 !important;
    }
    .archive-link-container.elementor-element.hover::before {
        opacity: 0.8 !important;
    }
}