/* Carrusel de Fondo Premium */
.bg-carousel {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -3; overflow: hidden; background-color: #000;
}
.bg-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0;
    transform: scale(1);
    transition: opacity 2s ease-in-out, transform 12s linear;
}
.bg-slide.active {
    opacity: 0.6; 
    transform: scale(1.1); 
}

/* Animación Inicial de Picos */
.intro-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 99999; pointer-events: none; display: flex; overflow: hidden;
}
.peak-left {
    position: absolute; top: 0; left: 0; width: 55vw; height: 100vh; background: #060c22;
    border-right: 4px solid var(--accent-blue); box-shadow: 15px 0 30px rgba(0, 85, 255, 0.3);
    clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%);
    transform: translateX(-100%); animation: slideLeftPeak 2.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.peak-right {
    position: absolute; top: 0; right: 0; width: 55vw; height: 100vh; background: #060c22;
    border-left: 4px solid var(--accent-blue); box-shadow: -15px 0 30px rgba(0, 85, 255, 0.3);
    clip-path: polygon(100% 0, 25% 0, 0 50%, 25% 100%, 100% 100%);
    transform: translateX(100%); animation: slideRightPeak 2.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes slideLeftPeak {
    0% { transform: translateX(-100%); }
    35% { transform: translateX(0); }
    40% { transform: translateX(-2%); }
    45% { transform: translateX(0); }
    60% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-110%); opacity: 0; }
}
@keyframes slideRightPeak {
    0% { transform: translateX(100%); }
    35% { transform: translateX(0); }
    40% { transform: translateX(2%); }
    45% { transform: translateX(0); }
    60% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
}

/* Estructura del Home */
.hero-section {
    padding: 50px 10%; display: flex; align-items: center; justify-content: space-between;
    min-height: 85vh; position: relative; z-index: 2;
}
.hero-container { max-width: 50%; }
.hero-title { font-family: var(--font-title); font-size: 4rem; font-weight: 700; line-height: 1.1; margin-bottom: 25px; }
.hero-subtitle { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 40px; line-height: 1.6; }

.branding-section, .footer-section {
    padding: 100px 10%; display: flex; justify-content: center;
    background: rgba(4, 8, 20, 0.7); 
    border-top: 1px solid rgba(255,255,255,0.03); backdrop-filter: blur(10px);
}
.branding-content { text-align: center; max-width: 750px; }

/* Cubo 3D */
/* Cubo 3D */
.canvas-container {
    width: 40%; 
    height: 400px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    perspective: 1200px; /* Aumentamos un poco la perspectiva para que no se deforme al crecer */
}

/* Hacemos que la imagen se adapte automáticamente al 100% de la cara del cubo */
.imacube {
    width: 100%; 
    height: 100%; 
    opacity: 0.8; 
    object-fit: cover;
}

/* Nuevo tamaño del cubo: 300px */
.cube-wrapper { 
    width: 400px; 
    height: 400px; 
    transform-style: preserve-3d; 
    animation: rotateCube 20s infinite linear; 
}

.cube { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    transform-style: preserve-3d; 
}

/* Las caras ahora miden exactamente lo mismo que el contenedor */
.face {
    position: absolute; 
    width: 400px; 
    height: 400px; 
    border: 2px solid rgba(0, 85, 255, 0.6);
    background: rgba(10, 18, 44, 0.4); 
    backdrop-filter: blur(4px);
}

/* El translateZ DEBE ser exactamente la mitad del tamaño (300px / 2 = 150px) */
.front  { transform: rotateY(0deg) translateZ(200px); }
.back   { transform: rotateY(180deg) translateZ(200px); }
.left   { transform: rotateY(-90deg) translateZ(200px); }
.right  { transform: rotateY(90deg) translateZ(200px); }
.top    { transform: rotateX(90deg) translateZ(200px); }
.bottom { transform: rotateX(-90deg) translateZ(200px); }

@keyframes rotateCube {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}
/* --- EFECTO DE LETRAS --- */
.split-text { display: inline-block; overflow: hidden; }
.char { display: inline-block; will-change: transform, filter, opacity; white-space: pre; }

/* --- SECCIÓN DE VIDEO INTERACTIVO NATIVA --- */
.scroll-experience-section {
    position: relative;
    width: 100%;
    height: 400vh; /* Altura generosa para el scroll fluido */
    background: transparent;
    z-index: 5;
}

.sticky-track {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* MARCO MÓVIL */
.mobile-phone-wrapper {
    width: 300px;
    height: 580px;
    background: #000;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 40px;
    padding: 10px;
    box-shadow: 0 0 50px rgba(13, 90, 151, 0.4), 0 20px 40px rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    will-change: transform;
}

.phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    background: #000;
}

.phone-screen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CONTENIDO DE LA DERECHA ("Nuestra Visión") */
.vision-side-content {
    width: 100%;
    max-width: 500px;
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    opacity: 0;
    z-index: 11;
    will-change: transform, opacity;
}

/* RESPONSIVE PARA MÓVILES */
@media(max-width: 968px) {
    .hero-section { flex-direction: column; text-align: center; }
    .hero-container { max-width: 100%; margin-bottom: 40px; }
    .canvas-container { width: 100%; }
    .hero-title { font-size: 2.5rem; }

    .scroll-experience-section {
        height: auto;
        padding: 80px 5%;
    }
    .sticky-track {
        position: relative;
        height: auto;
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mobile-phone-wrapper {
        position: relative;
        top: auto; left: auto;
        transform: none !important;
        width: 260px; height: 500px;
        margin-bottom: 40px;
    }
    .vision-side-content {
        position: relative;
        top: auto; right: auto;
        transform: none !important;
        opacity: 1 !important;
        text-align: center;
    }
}