* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --nav-altura: 80px;
}

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

.banner-container {
    display: flex; /* Aunque sus hijos directos principales son 'absolute', no daña */
    width: 100%;
    height: 90vh;
    min-height: 950px; 
    margin-top: -120px;
    position: relative; /* Clave para los hijos 'absolute' */
    overflow: hidden;
    background-color: #003000;
}

.banner-layer {
    position: absolute; /* Correcto para superponer capas */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

.cloud-layer {
    mix-blend-mode: screen;
    /* justify-content: flex-end; /* Eliminado: no es un flex container */
}

/* --- ANIMACIONES DE ENTRADA (NUBES Y FONDO) --- */
#fondo-color {
    z-index: 1;
    animation: fadeInScaleFondo 0.5s ease-out forwards;
}
@keyframes fadeInScaleFondo {
    0% { transform: scale(1.1); opacity: 0.3; }
    100% { transform: scale(1); opacity: 1; }
}

#nubes-semifondo {
    z-index: 2;
    animation: fadeInScaleNubes 0.5s ease-out 0.1s forwards;
}
@keyframes fadeInScaleNubes {
    0% { transform: scale(1.05); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- NUBES CON MOVIMIENTO HORIZONTAL --- */
#nubes-intermedias, #nubes-anteriores, #nubes-frente {
    /* position: absolute; ya heredado de .banner-layer */
    width: 3000px; 
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    transform: translateX(0px) scale(1); 
    opacity: 0;
}

#nubes-intermedias {
    z-index: 3;
    animation: 
        enterAndDriftIntermedias 50s linear 0s infinite alternate;
}
@keyframes enterAndDriftIntermedias {
    0% { transform: translateX(-1200px) scale(1); opacity: 0; }
    50% { transform: translateX(-1000px) scale(1); opacity: 0.9; }
    100% { transform: translateX(0px) scale(1); opacity: 1; }
}

#nubes-anteriores {
    z-index: 4;
    animation:
        enterAndDriftAnteriores 30s linear 0s infinite alternate;
}
@keyframes enterAndDriftAnteriores {
    0% { transform: translateX(0px) scale(1); opacity: 0; }
    2% { transform: translateX(-1px) scale(1); opacity: 1; }
    100% { transform: translateX(-1080px) scale(1); opacity: 1; }
}

#nubes-frente {
    z-index: 6;
    animation:
        enterAndDriftFrente 20s linear 0s infinite alternate;
}
@keyframes enterAndDriftFrente {
    0% { transform: translateX(0%) scale(1.03); opacity: 0.7; }
    50% { transform: translateX(-400px) scale(1); opacity: 0.7; }
    100% { transform: translateX(-1080px) scale(1); opacity: 1; }
}



/*------Contenedor de motor y texto del banner----*/
.main-content-area {
    display: flex;
    flex-direction: row; /* Uno al lado del otro */
    justify-content: space-between; /* Espacio entre ellos */
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 5%;
}
.banner-content { flex-basis: 45%; /* Ocupa el 45% */ }
#motor-wrapper { flex-basis: 45%; /* Ocupa el 45% */ }



/* --- SECCIÓN DEL MOTOR --- */
#motor-wrapper {
    position: absolute;
    padding-right: 10%;
    margin-top: var(--nav-altura);
    z-index: 5;
    right: 0%;
    width: 50%; 
    opacity: 0;
    animation: motorWrapperAppear 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.0s forwards;
    pointer-events: none;
    /*border: solid 3px aqua;*/
    display: flex;
    height: calc(100% - 80px);
    align-items: center; /* Centra .motor-images-container verticalmente */
    justify-content: center; /* Centra .motor-images-container horizontalmente */
    /* Si prefieres que se alinee a la derecha dentro del wrapper:
    justify-content: flex-end; 
    padding-right: ALGUN_VALOR; (si el hijo no es 100% ancho del wrapper)
    */
}
@keyframes motorWrapperAppear {
    0% { opacity: 0; transform: translateY(-50%) translateY(60px) scale(0.85); }
    100% { opacity: 1; transform: translateY(0%) translateY(0) scale(1); }
}

.motor-images-container {
    position: relative; /* Correcto para los .motor-img absolutos */
    width: 65%; /* 50% del #motor-wrapper */
    height: 65%; /* 50% del #motor-wrapper */
    /* CAMBIO: margin original (50% auto 50% auto) era problemático y probablemente innecesario con flex en el padre.
       Si se necesita un desplazamiento específico, se podría usar margin aquí, 
       pero el centrado ahora lo maneja el flex de #motor-wrapper.
    */
    margin: 0; /* o quitar la propiedad margin completamente */
    animation: levitateImages 5s ease-in-out 0.0s infinite;
    /*border: solid 3px blue;*/
}
@keyframes levitateImages {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.motor-img {
    position: absolute; /* Correcto para superponerse dentro de .motor-images-container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: auto;
    opacity: 0;
}
#motor-hyperion {
    animation: fadeMotorHyperion 20s ease-in-out 0.0s infinite;
    z-index: 2;
}
#motor-pro {
    animation: fadeMotorPro 20s ease-in-out 0.0s infinite;
    z-index: 1;
}
@keyframes fadeMotorHyperion {
    0%, 46.67% { opacity: 1; z-index: 2; }
    50% { opacity: 0; z-index: 1; }
    50.01%, 96.67% { opacity: 0; z-index: 1; }
    100% { opacity: 1; z-index: 2; }
}
@keyframes fadeMotorPro {
    0%, 46.67% { opacity: 0; z-index: 1; }
    50% { opacity: 1; z-index: 2; }
    50.01%, 96.67% { opacity: 1; z-index: 2; }
    100% { opacity: 0; z-index: 1; }
}



/* --- Contenido de Texto y Botones sobre el Banner --- */
.banner-content {
    position: absolute; /* Correcto para posicionamiento sobre el banner */
    padding-left: 5%;
    display: flex; /* Excelente para manejar el contenido interno */
    flex-direction: column;
    gap: 0px; /* Considerar si un gap mayor es deseado o usar margins en hijos */
    z-index: 10;
    color: #fff;
    max-width: 40%;
    height: calc(100% - 80px);
    padding-right: 20px; /* Asegura que no toque el borde si está pegado a la izquierda */
    box-sizing: border-box;
    /*border: solid 3px red;*/
    justify-content: center;
    text-align: left;
    margin: var(--nav-altura) 0 0 10%;
}
.logo-title {
    margin-bottom: 60px;
    display: flex; /* Bien para alinear items si hay más de uno o para control de tamaño */
    width: 65%;
    align-items: center;
}

.banner-content h1 {
    font-size: 32px;
    margin-bottom: 0px;
    line-height: 1.3;
    font-weight: 250;
    letter-spacing: 3px;
}
.banner-content h1 strong {
    font-weight: 600;
    /* font-style: bold; /* font-weight ya lo maneja, font-style es para italic/oblique */
}
.banner-content p {
    font-size: 15px;
    margin-bottom: 35px;
    line-height: 1.3;
    font-weight: 100;
    letter-spacing: 1px;
}


.banner-buttons button {
    background-color: rgba(0, 0, 0, 0.15); /* Este se sobreescribe por 'transparent' abajo */
    border: 1px none #fff; /* 'none' es un valor, no necesita ir con 1px. 'border: none;' o 'border: 1px solid #color;' */
    color: #fff;
    width: 35%;
    padding: 16px 12px;
    margin: 30px 25px 30px 0;
    cursor: pointer;
    border-radius: 29px;
    font-size: 14px;
    
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Cambiado 'none' a 'solid' para que el borde sea visible si esa es la intención */
    /* Si no quieres borde inicial, usa 'border: 1px solid transparent;' o 'border: none;' y luego añade borde en hover */
    color: #fff;
    transition: all 0.2s ease-out;
    box-shadow: 
        10px 10px 20px rgba(35, 83, 51, 1), 
        -8px -8px 17px rgba(51, 191, 107, 1);
}

.banner-buttons button:active {
    box-shadow: 
        inset 20px 20px 15px rgba(51, 191, 107, 1), 
        inset 20px 20px 15px rgba(51, 191, 107, 1); /* Sombra duplicada, probablemente una es suficiente o eran diferentes */
    transform: translateY(1px) translateX(1px);
}

.banner-buttons button:hover {
    box-shadow: 
        6px 6px 12px rgba(51, 191, 107, 1), 
        -6px -6px 12px rgba(51, 191, 107, 1);
    background: rgba(35, 83, 51, 0.2);
}

/* --- Estilos Globales para Secciones (Ejemplo) --- */
.seccion-padding {
    padding: 70px 0;
}

.container-seccion {
    width: 90%;
    max-width: 1920px;
    margin: 0 auto;
    /* Si esta sección va a contener elementos que se beneficien de flex: */
    /* display: flex; flex-direction: column; align-items: center; */
}

.titulo-seccion {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 600;
    margin-bottom: 50px;
    color: #fff; 
    letter-spacing: 1px;
}





/*
================================================================================
================================================================================
==                                                                            ==
==      CÓDIGO RESPONSIVE COMPLETO - COPIAR Y PEGAR TODO ESTE BLOQUE           ==
==                                                                            ==
================================================================================
================================================================================
*/


/*
==========================================================================
    TRANSFORMACIÓN PARA MÓVILES (A PARTIR DE 768px HACIA ABAJO)
==========================================================================
*/
@media (max-width: 768px) {

    /*
    ----------------------------------------------------------------------
        1. GESTIÓN DE NAVEGACIÓN: Ocultar Desktop, Mostrar Móvil
    ----------------------------------------------------------------------
    */
    .nav-desktop, .shadow-div {
        display: none !important; /* Ocultamos el menú de escritorio */
    }

    .mobile-nav {
        display: block !important; /* Mostramos el sistema de menú móvil */
    }


    /*
    ----------------------------------------------------------------------
        2. BANNER: RECOMPOSICIÓN A LA VISIÓN FINAL
    ----------------------------------------------------------------------
    */
    .banner-container {
        margin-top: 0 !important; /* ¡CLAVE! Elimina el espacio superior */
        min-height: 850px;      /* ¡CLAVE! Tu altura solicitada */
        height: 100vh;
    }

    .banner-content {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 450px;
        text-align: center;
        margin: 0;
        padding: 0;
        z-index: 10;
        height: 50%;
    }
    .logo-title {
        margin: 0 auto 50px auto;
        width: 70%;
        max-width: 270px;
    }
    .banner-content h1 {
        font-size: 26px;
    }
    .banner-buttons {
        display: none !important; /* ¡CLAVE! Ocultamos los botones */
    }

    #motor-wrapper {
        bottom: 20px;
        right: auto;
        left: auto;
        height: 450px;
        width: 100%;
        max-width: 100%px;
        /*border: solid 2px aqua;*/
    }

    .motor-images-container{
        /*border: solid 2px aqua;*/
        max-height: 90%;
        height: 85%;
    }

    /* Nueva animación de entrada para el motor en móvil */
    @keyframes motor-appear-mobile {
        0% { 
            opacity: 0; 
            transform: translateX(-50%) translateY(40px) scale(0.9);
        }
        100% { 
            opacity: 1; 
            transform: translateX(-50%) translateY(0) scale(1);
        }
    }


    /*
    ----------------------------------------------------------------------
        3. ESTILOS COMPLETOS DEL MENÚ MÓVIL (para asegurar que existen)
    ----------------------------------------------------------------------
    */
    #burger-toggle { display: none; }

    .burger-button {
        position: fixed;
        bottom: 20px;
        left: 50%;
        width: 70px;
        height: 70px;
        transform: translateX(-50%);
        background-color: #e0e5ec;
        border-radius: 50%;
        box-shadow: 8px 8px 15px #121314, -8px -8px 15px #343a40; /* Sombras adaptadas a tu tema oscuro */
        cursor: pointer;
        z-index: 1002;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }

    .nav-mobile-card {
        position: fixed;
        bottom: 20px;
        left: 50%;
        width: 340px;
        max-width: 90vw;
        height: 480px;
        transform: translateX(-50%) scale(0);
        transform-origin: bottom center;
        background-color: #e0e5ec;
        border: 10px solid #e0e5ec;
        border-radius: 20px;
        box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
        z-index: 1001;
        display: flex;
        justify-content: center;
        padding-top: 40px;
        transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }
    
    .nav-mobile-overlay {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        z-index: 1000; opacity: 0; pointer-events: none;
        transition: opacity 0.5s ease;
    }
    
    .nav-mobile-content {
        display: flex; flex-direction: column; gap: 15px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .nav-mobile-btn {
        text-decoration: none; color: #5f6c7a; background-color: #e0e5ec; padding: 18px;
        border-radius: 15px; box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
        font-weight: 600; font-size: 1.1rem; text-align: center;
        transform: scale(0.5); opacity: 0;
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    }

    .nav-mobile-btn:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 8px 8px 18px #bebebe, -8px -8px 18px #ffffff;
        color: #138040;
    }
    .nav-mobile-btn:active {
        transform: translateY(1px) scale(0.98);
        box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
        color: #33BF6B;
    }

    /* ESTADOS ACTIVOS DEL MENÚ MÓVIL */
    #burger-toggle:checked ~ .burger-button {
        bottom: calc(50% - 240px);
        box-shadow: inset 5px 5px 10px #121314, inset -5px -5px 10px #343a40;
    }
    #burger-toggle:checked ~ .nav-mobile-card {
        transform: translateX(-50%) scale(1);
        bottom: calc(50% - 240px);
    }
    #burger-toggle:checked ~ .nav-mobile-overlay {
        opacity: 1; pointer-events: auto;
    }
    #burger-toggle:checked ~ .nav-mobile-card .nav-mobile-content {
        opacity: 1;
        transition-delay: 0.4s;
    }
    #burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn {
        transform: scale(1); opacity: 1;
    }
    #burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn:nth-child(1) { transition-delay: 0.25s; }
    #burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn:nth-child(2) { transition-delay: 0.30s; }
    #burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn:nth-child(3) { transition-delay: 0.35s; }
    #burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn:nth-child(4) { transition-delay: 0.40s; }
    #burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn:nth-child(5) { transition-delay: 0.45s; }
    #burger-toggle:checked ~ .nav-mobile-card .nav-mobile-btn:nth-child(6) { transition-delay: 0.50s; }

    /* Icono hamburguesa/cierre */
    .burger-button span {
        display: block; position: absolute; height: 4px; width: 35px;
        background: #5f6c7a; border-radius: 9px;
        left: 17.5px;
        transition: all .25s ease-in-out;
    }
    .burger-button span:nth-of-type(1) { top: 20px; }
    .burger-button span:nth-of-type(2) { top: 50%; transform: translateY(-50%); }
    .burger-button span:nth-of-type(3) { bottom: 20px; }
    
    #burger-toggle:checked ~ .burger-button span:nth-of-type(1) { transform: rotate(45deg); top: 33px; }
    #burger-toggle:checked ~ .burger-button span:nth-of-type(2) { width: 0%; opacity: 0; }
    #burger-toggle:checked ~ .burger-button span:nth-of-type(3) { transform: rotate(-45deg); top: 33px; }
}


/*
==========================================================================
    AJUSTES FINOS PARA MÓVILES PEQUEÑOS (HASTA 480px)
==========================================================================
*/
@media (max-width: 480px) {
    .banner-container {
        min-height: 750px;
    }

    .banner-content h1 {
        font-size: 22px;
    }
    .banner-content p {
        font-size: 14px;
        line-height: 1.5;
}

}