/* =========================================
   HERO & ADVANCED CAROUSEL (3D Phone Effect)
   ========================================= */

.hero {
    display: flex;
    align-items: center;
    max-width: 1200px; 
    margin: 0 auto;
    padding: 2rem 2rem;
    gap: 2rem;
    overflow: hidden; 
}

.hero-content {
    flex: 1;
    z-index: 10;
}

/* --- ESCENARIO DEL CARRUSEL (3D) --- */
.hero-carousel-view {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 500px;
    perspective: 2000px; 
}

.carousel-stage {
    position: relative;
    width: 220px; 
    height: 430px;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- CONTENEDOR PRINCIPAL --- */
.phone-mockup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0f172a; /* Fondo ligeramente más oscuro */
    border-radius: 40px; /* Curvatura más de smartphone moderno */
    border: 4px solid #334155; 
    /* Sombra 3D hiper-realista: sombra exterior + reflejo de borde interno */
    box-shadow: 
        0 20px 40px -10px rgba(0, 0, 0, 0.25),
        inset 0 0 0 2px rgba(255, 255, 255, 0.15),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
        
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    backface-visibility: hidden; 
    opacity: 0; 
    will-change: transform, opacity, filter;
}

/* --- EL DETALLE MAESTRO: LA ISLA DINÁMICA / NOTCH --- */
.phone-mockup::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 28%;
    height: 24px;
    background-color: #000;
    border-radius: 20px;
    z-index: 10;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2); /* Ligero brillo en la cámara */
}

/* --- IMAGEN --- */
.phone-mockup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.1); /* Evita líneas blancas en los bordes por el anti-aliasing */
}

/* --- REFLEJO DE PANTALLA MEJORADO --- */
.phone-mockup::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right, 
        rgba(255,255,255,0.2) 0%, 
        rgba(255,255,255,0.05) 30%, 
        rgba(255,255,255,0) 40%
    );
    transform: rotate(15deg);
    pointer-events: none;
    z-index: 5;
}

/* --- ESTADOS DEL CARRUSEL --- */
.phone-mockup.active {
    opacity: 1;
    transform: translateZ(120px) scale(1);
    z-index: 5;
    filter: blur(0px);
    
    /* MEJORA 2: Sombra principal más suave (0.4 en vez de 0.8) 
       MEJORA 3: Cambiamos el halo azul por un halo con el verde principal (#2D5A27) en baja opacidad */
    box-shadow: 
        0 30px 50px -15px rgba(0, 0, 0, 0.4), 
        0 0 45px rgba(45, 90, 39, 0.25); 
}

.phone-mockup.next {
    opacity: 0.5;
    transform: translateX(220px) translateZ(-150px) rotateY(-35deg) scale(0.85);
    z-index: 3;
    filter: blur(2px); /* Efecto de profundidad de campo */
}

.phone-mockup.prev {
    opacity: 0.5;
    transform: translateX(-220px) translateZ(-150px) rotateY(35deg) scale(0.85);
    z-index: 3;
    filter: blur(2px); /* Efecto de profundidad de campo */
}

/* Nota: Propiedad 'opacity' corregida (estaba dentro de transform) */
.phone-mockup.hidden-left {
    opacity: 0;
    transform: translateX(-400px) translateZ(-300px) rotateY(45deg) scale(0.7);
    pointer-events: none;
}

.phone-mockup.hidden-right {
    opacity: 0;
    transform: translateX(400px) translateZ(-300px) rotateY(-45deg) scale(0.7);
    pointer-events: none;
}