/* ========== APP MOBILE SECTION ========== */
.app-section{
    min-height:100vh;
    background:var(--bg);
    padding:120px 0 80px;
    position:relative;
}

.app-container{
    max-width:var(--max-w);
    margin:0 auto;
    padding:0 var(--pad);
}

.app-header{
    text-align:center;
    margin-bottom:80px;
}

.app-features{
    display:flex;
    flex-direction:column;
    gap:120px;
}

.app-feature{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
    opacity:0;
    transform:translateY(50px);
    transition:all 0.8s ease;
}

.app-feature.visible{
    opacity:1;
    transform:translateY(0);
}

/* Alternar posición */
.app-feature:nth-child(even) .app-feature-visual{
    order:2;
}

.app-feature:nth-child(even) .app-feature-content{
    order:1;
}

/* ========== CARRUSEL DE MÓVILES ========== */
.app-feature-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:650px;
}

.mobile-carousel{
    position:relative;
    width:100%;
    max-width:380px;
    height:650px;
    margin:0 auto;
}

.mobile-frame{
    position:relative;
    width:100%;
    height:100%;
    background:var(--bg-card);
    border:12px solid var(--bg-elevated);
    border-radius:48px;
    box-shadow:0 40px 100px rgba(0,0,0,.3),
               0 0 0 1px var(--border);
    overflow:hidden;
}

[data-theme="light"] .mobile-frame{
    box-shadow:0 40px 100px rgba(0,0,0,.1),
               0 0 0 1px var(--border);
}

/* Notch del móvil */
.mobile-frame::before{
    content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:140px;
    height:28px;
    background:var(--bg-elevated);
    border-radius:0 0 20px 20px;
    z-index:10;
}

.mobile-slides{
    position:relative;
    width:100%;
    height:100%;
}

.mobile-slide{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.8s ease, transform 0.8s ease;
    transform:scale(1.05);
}

.mobile-slide.active{
    opacity:1;
    transform:scale(1);
    z-index:2;
}

.mobile-slide.exit{
    opacity:0;
    transform:scale(0.95);
    z-index:1;
}

.mobile-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Controles del carrusel */
.mobile-controls{
    position:absolute;
    bottom:-60px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:10;
}

.mobile-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--border);
    cursor:pointer;
    transition:all 0.3s ease;
}

.mobile-dot.active{
    background:var(--primary);
    width:32px;
    border-radius:5px;
}

.mobile-dot:hover{
    background:var(--text-muted);
}

/* Navegación lateral */
.mobile-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.3s ease;
    z-index:10;
}

.mobile-nav:hover{
    background:var(--primary);
    border-color:var(--primary);
    transform:translateY(-50%) scale(1.1);
}

.mobile-nav svg{
    color:var(--text);
    width:20px;
    height:20px;
}

.mobile-nav:hover svg{
    color:#fff;
}

.mobile-nav.prev{
    left:-70px;
}

.mobile-nav.next{
    right:-70px;
}

/* Contador de imágenes */
.mobile-counter{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,.8);
    backdrop-filter:blur(10px);
    padding:8px 16px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
    color:#fff;
    z-index:10;
}

[data-theme="light"] .mobile-counter{
    background:rgba(0,0,0,.6);
}

/* ========== CONTENIDO ========== */
.app-feature-content{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.app-feature-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:fit-content;
    padding:8px 16px;
    font-size:12px;
    font-weight:700;
    color:var(--primary);
    background:rgba(0,188,212,.1);
    border:1px solid rgba(0,188,212,.2);
    border-radius:100px;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.app-feature-badge::before{
    content:'';
    width:6px;
    height:6px;
    background:var(--primary);
    border-radius:50%;
    animation:pulse 2s ease-in-out infinite;
}

.app-feature-title{
    font-family:var(--font);
    font-size:clamp(32px,4vw,48px);
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.02em;
    color:var(--text);
}

.app-feature-title .highlight{
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.app-feature-desc{
    font-size:17px;
    line-height:1.7;
    color:var(--text-soft);
}

.app-feature-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:8px;
}

.app-feature-list li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:14px 18px;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:14px;
    transition:all 0.3s ease;
    font-size:15px;
    color:var(--text-soft);
    line-height:1.6;
}

.app-feature-list li:hover{
    border-color:var(--primary);
    background:rgba(0,188,212,.05);
    transform:translateX(8px);
}

.app-feature-list li svg{
    width:22px;
    height:22px;
    color:var(--primary);
    flex-shrink:0;
    margin-top:2px;
}

.app-stats{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
    margin-top:16px;
}

.app-stat{
    padding:20px 24px;
    background:linear-gradient(135deg,rgba(0,188,212,.08),rgba(0,229,255,.08));
    border:1.5px solid rgba(0,188,212,.25);
    border-radius:16px;
    text-align:center;
}

.app-stat-value{
    display:block;
    font-family:var(--font);
    font-size:32px;
    font-weight:700;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:4px;
}

.app-stat-label{
    font-size:12px;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.05em;
}

/* ========== RESPONSIVE ========== */
@media(max-width:1200px){
    .app-feature{
        gap:60px;
    }
    
    .mobile-nav.prev{
        left:-60px;
    }
    
    .mobile-nav.next{
        right:-60px;
    }
}

@media(max-width:1024px){
    .app-section{
        padding:100px 0 60px;
    }
    
    .app-features{
        gap:100px;
    }
    
    .mobile-carousel{
        max-width:340px;
        height:600px;
    }
    
    .mobile-frame{
        height:600px;
    }
}

@media(max-width:968px){
    .app-section{
        padding:80px 0 50px;
    }
    
    .app-header{
        margin-bottom:60px;
    }
    
    .app-features{
        gap:80px;
    }
    
    .app-feature{
        grid-template-columns:1fr;
        gap:50px;
    }
    
    .app-feature:nth-child(even) .app-feature-visual,
    .app-feature:nth-child(odd) .app-feature-visual{
        order:1;
    }
    
    .app-feature:nth-child(even) .app-feature-content,
    .app-feature:nth-child(odd) .app-feature-content{
        order:2;
    }
    
    .mobile-carousel{
        max-width:320px;
        height:560px;
    }
    
    .mobile-frame{
        height:560px;
        border-width:10px;
        border-radius:40px;
    }
    
    .mobile-nav{
        width:40px;
        height:40px;
    }
    
    .mobile-nav.prev{
        left:10px;
    }
    
    .mobile-nav.next{
        right:10px;
    }
    
    .mobile-controls{
        bottom:-50px;
    }
}

@media(max-width:768px){
    .app-section{
        padding:60px 0 40px;
    }
    
    .app-header{
        margin-bottom:50px;
    }
    
    .app-features{
        gap:60px;
    }
    
    .app-feature{
        gap:40px;
    }
    
    .mobile-carousel{
        max-width:300px;
        height:520px;
    }
    
    .mobile-frame{
        height:520px;
        border-width:8px;
        border-radius:36px;
    }
    
    .mobile-frame::before{
        width:120px;
        height:24px;
    }
    
    .app-feature-title{
        font-size:28px;
    }
    
    .app-feature-desc{
        font-size:16px;
    }
    
    .app-feature-list li{
        padding:12px 16px;
        font-size:14px;
        gap:12px;
    }
    
    .app-feature-list li svg{
        width:20px;
        height:20px;
    }
    
    .app-stats{
        gap:12px;
    }
    
    .app-stat{
        padding:16px 20px;
    }
    
    .app-stat-value{
        font-size:28px;
    }
}

@media(max-width:640px){
    .app-section{
        padding:50px 0 30px;
    }
    
    .app-header{
        margin-bottom:40px;
    }
    
    .app-features{
        gap:50px;
    }
    
    .app-feature{
        gap:32px;
    }
    
    .mobile-carousel{
        max-width:280px;
        height:480px;
    }
    
    .mobile-frame{
        height:480px;
        border-width:6px;
        border-radius:32px;
    }
    
    .mobile-frame::before{
        width:100px;
        height:20px;
    }
    
    .mobile-nav{
        width:36px;
        height:36px;
    }
    
    .mobile-nav svg{
        width:16px;
        height:16px;
    }
    
    .mobile-counter{
        font-size:12px;
        padding:6px 12px;
    }
    
    .mobile-controls{
        gap:8px;
        bottom:-45px;
    }
    
    .mobile-dot{
        width:8px;
        height:8px;
    }
    
    .mobile-dot.active{
        width:24px;
    }
    
    .app-feature-badge{
        font-size:11px;
        padding:7px 14px;
    }
    
    .app-feature-title{
        font-size:26px;
    }
    
    .app-feature-desc{
        font-size:15px;
    }
    
    .app-feature-list{
        gap:10px;
    }
    
    .app-feature-list li{
        padding:10px 14px;
        font-size:13px;
    }
    
    .app-stats{
        grid-template-columns:1fr;
    }
    
    .app-stat{
        padding:14px 18px;
    }
    
    .app-stat-value{
        font-size:24px;
    }
}

@media(max-width:480px){
    .mobile-carousel{
        max-width:260px;
        height:450px;
    }
    
    .mobile-frame{
        height:450px;
        border-width:5px;
        border-radius:28px;
    }
    
    .mobile-nav{
        width:32px;
        height:32px;
    }
    
    .mobile-nav svg{
        width:14px;
        height:14px;
    }
    
    .app-feature-title{
        font-size:24px;
    }
    
    .app-feature-desc{
        font-size:14px;
    }
}

@media(max-width:375px){
    .app-section{
        padding:40px 0 25px;
    }
    
    .mobile-carousel{
        max-width:240px;
        height:420px;
    }
    
    .mobile-frame{
        height:420px;
    }
    
    .app-feature-title{
        font-size:22px;
    }
}