/* ========== APP MOBILE SECTION CON TABS ========== */
.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:60px;
}

/* ========== TABS NAVIGATION ========== */
.app-tabs-wrapper{
    margin-bottom:60px;
}

.app-tabs-nav{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.app-tab{
    position:relative;
    padding:16px 28px;
    background:var(--bg-card);
    border:1.5px solid var(--border);
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    color:var(--text-soft);
    cursor:pointer;
    transition:all 0.3s ease;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:140px;
}

.app-tab:hover{
    border-color:var(--primary);
    background:rgba(0,188,212,.05);
    transform:translateY(-2px);
}

.app-tab.active{
    background:linear-gradient(135deg,rgba(0,188,212,.1),rgba(0,229,255,.1));
    border-color:var(--primary);
    color:var(--primary);
}

.app-tab-icon{
    width:24px;
    height:24px;
    color:var(--text-muted);
    transition:color 0.3s ease;
}

.app-tab.active .app-tab-icon{
    color:var(--primary);
}

.app-tab-label{
    font-size:13px;
    font-weight:600;
    text-align:center;
}

/* Barra de progreso debajo de cada tab */
.app-tab-progress{
    position:absolute;
    bottom:0;
    left:0;
    width:0%;
    height:3px;
    background:linear-gradient(90deg,var(--primary),var(--primary-light));
    border-radius:0 0 12px 12px;
    transition:width 0.1s linear;
}

.app-tab.active .app-tab-progress{
    width:100%;
}

/* ========== DOTS NAVIGATION ========== */
.app-dots-nav{
    display:flex;
    justify-content:center;
    gap:12px;
    align-items:center;
}

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

.app-dot:hover{
    background:var(--text-muted);
    transform:scale(1.2);
}

.app-dot.active{
    background:var(--primary);
    width:36px;
    border-radius:6px;
}

/* Anillo de progreso circular */
.app-dot-progress{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:24px;
    height:24px;
    display:none;
}

.app-dot.active .app-dot-progress{
    display:block;
}

.app-dot-progress circle{
    fill:none;
    stroke:var(--primary);
    stroke-width:3;
    stroke-linecap:round;
    transform:rotate(-90deg);
    transform-origin:center;
    stroke-dasharray:75.4;
    stroke-dashoffset:75.4;
    transition:stroke-dashoffset 0.1s linear;
}

/* ========== FEATURES CONTAINER ========== */
/* ✅ OCULTAR TODAS LAS FEATURES POR DEFECTO EXCEPTO LA ACTIVA */
.app-features {
    position: relative;
    min-height: 700px;
    overflow: hidden;
}

.app-feature {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.app-feature.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    position: relative;
    pointer-events: auto;
    z-index: 2;
}

.app-feature.exit-left{
    opacity:0;
    transform:translateX(-100px);
}

.app-feature.exit-right{
    opacity:0;
    transform:translateX(100px);
}

.app-feature.entering-left{
    transform:translateX(-100px);
}

.app-feature.entering-right{
    transform:translateX(100px);
}

/* ========== NAVIGATION ARROWS ========== */
.app-nav-arrows{
    position:absolute;
    top:50%;
    left:0;
    right:0;
    transform:translateY(-50%);
    display:flex;
    justify-content:space-between;
    pointer-events:none;
    z-index:10;
}

.app-nav-arrow{
    width:50px;
    height:50px;
    background:var(--bg-card);
    border:2px solid var(--border);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.3s ease;
    pointer-events:auto;
}

.app-nav-arrow:hover{
    background:var(--primary);
    border-color:var(--primary);
    transform:scale(1.1);
}

.app-nav-arrow svg{
    width:24px;
    height:24px;
    color:var(--text);
    transition:color 0.3s ease;
}

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

.app-nav-arrow.prev{
    margin-left:-80px;
}

.app-nav-arrow.next{
    margin-right:-80px;
}

/* ========== 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 del móvil */
.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;
    }
    
    .app-nav-arrow.prev{
        margin-left:-70px;
    }
    
    .app-nav-arrow.next{
        margin-right:-70px;
    }
}

@media(max-width:1024px){
    .app-section{
        padding:100px 0 60px;
    }
    
    .mobile-carousel{
        max-width:340px;
        height:600px;
    }
    
    .mobile-frame{
        height:600px;
    }
    
    .app-nav-arrow.prev{
        margin-left:-60px;
    }
    
    .app-nav-arrow.next{
        margin-right:-60px;
    }
}

@media(max-width:968px){
    .app-section{
        padding:80px 0 50px;
    }
    
    .app-header{
        margin-bottom:50px;
    }
    
    .app-tabs-wrapper{
        margin-bottom:50px;
    }
    
    .app-tab{
        padding:14px 24px;
        min-width:120px;
    }
    
    .app-feature{
        grid-template-columns:1fr;
        gap:50px;
        min-height:auto;
    }
    
    .app-feature-visual{
        min-height:560px;
    }
    
    .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;
    }
    
    .app-nav-arrow{
        width:44px;
        height:44px;
    }
    
    .app-nav-arrow.prev{
        margin-left:0;
        left:10px;
    }
    
    .app-nav-arrow.next{
        margin-right:0;
        right:10px;
    }
}

@media(max-width:768px){
    .app-section{
        padding:60px 0 40px;
    }
    
    .app-header{
        margin-bottom:40px;
    }
    
    .app-tabs-wrapper{
        margin-bottom:40px;
    }
    
    .app-tabs-nav{
        gap:6px;
        overflow-x:auto;
        justify-content:flex-start;
        padding:0 4px 10px;
        scrollbar-width:thin;
        scrollbar-color:var(--primary) var(--bg-card);
    }
    
    .app-tabs-nav::-webkit-scrollbar{
        height:6px;
    }
    
    .app-tabs-nav::-webkit-scrollbar-track{
        background:var(--bg-card);
        border-radius:3px;
    }
    
    .app-tabs-nav::-webkit-scrollbar-thumb{
        background:var(--primary);
        border-radius:3px;
    }
    
    .app-tab{
        padding:12px 20px;
        min-width:110px;
        flex-shrink:0;
    }
    
    .app-tab-icon{
        width:20px;
        height:20px;
    }
    
    .app-tab-label{
        font-size:12px;
    }
    
    .app-feature{
        gap:40px;
    }
    
    .app-feature-visual{
        min-height:520px;
    }
    
    .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;
    }
    
    .app-nav-arrows{
        display:none;
    }
}

@media(max-width:640px){
    .app-section{
        padding:50px 0 30px;
    }
    
    .app-header{
        margin-bottom:35px;
    }
    
    .app-tabs-wrapper{
        margin-bottom:35px;
    }
    
    .app-tab{
        padding:10px 16px;
        min-width:100px;
    }
    
    .app-dot{
        width:10px;
        height:10px;
    }
    
    .app-dot.active{
        width:28px;
    }
    
    .app-feature{
        gap:32px;
    }
    
    .app-feature-visual{
        min-height:480px;
    }
    
    .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){
    .app-tab-icon{
        width:18px;
        height:18px;
    }
    
    .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;
    }
}