.elementor-2429 .elementor-element.elementor-element-6d58597{--display:flex;--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:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2429 .elementor-element.elementor-element-b8b9d75{--display:flex;--min-height:100vh;--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;}.elementor-2429 .elementor-element.elementor-element-b8b9d75:not(.elementor-motion-effects-element-type-background), .elementor-2429 .elementor-element.elementor-element-b8b9d75 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFEFE;}@media(min-width:768px){.elementor-2429 .elementor-element.elementor-element-6d58597{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-c86b4d5 *//* Importamos la fuente Georama desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Georama:wght@400;700&display=swap');

body {
    margin: 0;
    background-color: #0d0d21;
    color: #fff;
    font-family: 'Georama', sans-serif;
    overflow-x: hidden;
}

/* --- ESTRUCTURA DE CAPAS (Z-INDEX) --- */
.gradient-background { z-index: 1; }
.hero-image-container { z-index: 1; }
#webgl-canvas { z-index: 3; }
.hero h1, .hero p, .marquee-container { z-index: 4; }
/* --- FIN ESTRUCTURA DE CAPAS --- */

.gradient-background {
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100%;
    overflow: hidden;
}

.blob { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.7; }
.blob1 { width: 400px; height: 400px; background-color: #47539D; top: -150px; left: -150px; }
.blob2 { width: 500px; height: 500px; background-color: #5f4b8b; bottom: -200px; right: -200px; }
.blob3 { width: 300px; height: 300px; background-color: #6a3093; bottom: 50px; left: 100px; }


.content {
    height: 250vh; /* Se mantiene igual */
    position: relative; /* ¡CLAVE! Ahora es el marco de referencia. */
    z-index: 2; /* Aseguramos que esté por encima del fondo de blobs */
}

#webgl-canvas {
    position: absolute;   /* ANTES: fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;         /* 100% de su padre (.content), que mide 250vh */
    z-index: 1;           /* Está en la capa inferior DENTRO de .content */
}

/* El nuevo wrapper para el contenido de texto */
.content-wrapper {
    position: relative; /* Se puede posicionar */
    z-index: 2;         /* Está por encima del canvas DENTRO de .content */
}

.hero {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* CAMBIO: Subimos el texto para dar espacio al marquee */
.hero h1 {
    position: absolute;
    bottom: 120px; 
    left: 50px;
    margin: 0;
    text-align: left;
    font-size: clamp(40px, 10vw, 120px);
    line-height: 0.9;
    font-weight: 700;
}

.hero p {
    position: absolute;
    bottom: 120px;
    right: 50px;
    margin: 0;
    max-width: 350px;
    text-align: right;
    font-size: 16px;
    color: #fff;
}

.hero-image-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.hero-image-container img {
    width: 100%; height: 100%;
    object-fit: cover; 
    object-position: center bottom; 
}


.marquee-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px 0;    
    display: flex;
    overflow: hidden; 
}

.marquee-content {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    
    animation: marquee-scroll 60s linear infinite; /* Aumentamos la duración a 60s para que sea más lento con el contenido extra */
}

.marquee-content span {
    font-size: clamp(18px, 2vw, 22px);
    text-transform: uppercase;
    margin: 0 40px;
    font-weight: 700;
    color: #fff;
}

.separator-svg {

    width: 20px;
    height: 20px;
    animation: rotate-star 15s linear infinite;
    flex-shrink: 0;
}

.separator-svg svg {
    width: 100%;
    height: 100%;
    fill: #FFBCD0;
}

@keyframes marquee-scroll {
    from { transform: translateX(0%); }
    to { transform: translateX(-100%); }
}

@keyframes rotate-star {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* El resto de los estilos no cambian */
.spacer { height: 50vh; }
.final-text { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 100%; max-width: 800px; margin: 0 auto; padding: 0 1rem; box-sizing: border-box; }/* End custom CSS */