/* =========================================
   VARIABLES CON LA PALETA DE TU APP
   ========================================= */
:root {
    --app-blue: #0056d2;        /* El azul vibrante de tu cabecera y botón principal */
    --app-green: #0da164;       /* El verde neón del indicador activo de tu menú */
    --app-lavender: #f1edfa;    /* El fondo lavanda/lila de las tarjetas de idioma */
    
    --bg-dark: #0a0e17;         /* Fondo oscuro elegante de la web para contraste */
    --bg-card: #161c2a;         /* Color de tarjetas */
    --text-main: #ffffff;       /* Texto principal claro */
    --text-muted: #a0aab5;      /* Texto secundario */
    
    --font-main: 'Poppins', sans-serif;
    --transition: all 0.3s ease;
}

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

html {
    scroll-behavior: smooth;
    font-family: var(--font-main);
    color: var(--text-main);
    background-color: var(--bg-dark);
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; height: auto; }

/* Títulos con degradado usando tu color azul corporativo */
.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    background: linear-gradient(to right, #fff, var(--app-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 60px;
    font-size: 1.1rem;
}

/* =========================================
   BOTONES Y ELEMENTOS INTERACTIVOS
   ========================================= */
.btn-primary, .btn-secondary, .btn-small, .btn-store {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--app-blue);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 86, 210, 0.4);
    border: none;
}

.btn-primary:hover {
    box-shadow: 0 6px 25px rgba(0, 86, 210, 0.6);
    transform: translateY(-3px);
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--app-green);
    color: var(--app-green);
}

.btn-secondary:hover {
    background: rgba(13, 161, 100, 0.1);
    transform: translateY(-2px);
}

.btn-small {
    padding: 8px 22px;
    border: 2px solid var(--app-blue);
    font-size: 0.8rem;
}
.btn-small:hover { background-color: var(--app-blue); color: #fff; }

/* Animación de flotado suave para simular la app en mano */
@keyframes floating {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}
.floating { animation: floating 5s ease-in-out infinite; }

.app-mockup {
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(0, 86, 210, 0.25);
    max-height: 550px;
    border: 6px solid #1f2937;
}

/* Efecto Onda en botones */
.ripple { position: relative; overflow: hidden; }
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}
@keyframes ripple-animation {
    to { transform: scale(4); opacity: 0; }
}

/* =========================================
   NAVBAR
   ========================================= */
.navbar {
    position: fixed;
    top: 0; width: 100%; height: 80px;
    display: flex; align-items: center; z-index: 1000;
    transition: var(--transition);
}

.navbar.scrolled {
    background-color: rgba(10, 14, 23, 0.95);
    height: 70px;
    border-bottom: 1px solid rgba(0, 86, 210, 0.2);
}

.navbar .container { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.logo { font-size: 1.8rem; font-weight: 700; color: #fff; }
.logo .accent { color: var(--app-blue); }

.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a:not(.btn-small):hover { color: var(--app-green); }

.menu-toggle { display: none; cursor: pointer; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: #fff; transition: var(--transition); }

/* =========================================
   HERO SECTION & PARALLAX
   ========================================= */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 130%;
    background-image: url('https://images.unsplash.com/photo-1543269865-cbf427effbad?q=80&w=2070');
    background-size: cover;
    background-position: center;
    z-index: -2;
}

.hero-section::after {
    content: ''; position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(10,14,23,0.85), var(--bg-dark));
    z-index: -1;
}

.hero-content { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: 50px; padding-top: 80px; }
.hero-text h1 { font-size: 3.8rem; line-height: 1.15; margin-bottom: 25px; font-weight: 700; }
.hero-text p { color: var(--text-muted); font-size: 1.2rem; margin-bottom: 40px; line-height: 1.6; }
.hero-btns { display: flex; gap: 20px; }

/* =========================================
   FEATURES (TARJETAS CON TOQUE LAVANDA)
   ========================================= */
.features-section { padding: 100px 0; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

.feature-card {
    background-color: var(--bg-card);
    padding: 40px;
    border-radius: 24px;
    transition: var(--transition);
    border: 1px solid rgba(241, 237, 250, 0.05);
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--app-blue);
    box-shadow: 0 15px 35px rgba(0, 86, 210, 0.15);
}

.icon-box {
    font-size: 2.8rem;
    color: var(--app-green); /* Verde neón llamativo para iconos */
    margin-bottom: 20px;
}

.feature-card h3 { margin-bottom: 15px; font-size: 1.4rem; color: var(--app-lavender); }
.feature-card p { color: var(--text-muted); line-height: 1.6; }

/* =========================================
   CARRUSEL DE INTERFAZ
   ========================================= */
.screenshot-section { position: relative; padding: 100px 0; }
.parallax-bg-2 {
    position: absolute; top: -10%; left: 0; width: 100%; height: 130%;
    background-image: url('https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&w=2070');
    background-size: cover; z-index: -2; opacity: 0.08;
}

.slider-container {
    position: relative; max-width: 850px; margin: 0 auto;
    overflow: hidden; border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    border: 3px solid rgba(0, 86, 210, 0.3);
}

.slider { display: flex; transition: transform 0.5s ease-in-out; }
.slide { min-width: 100%; position: relative; }
.slide img { width: 100%; display: block; }
.slide-caption {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px;
    background: linear-gradient(to top, rgba(10,14,23,0.95), transparent);
    color: #fff; text-align: center; font-size: 1.05rem;
}

.prev, .next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background-color: rgba(0, 86, 210, 0.4); color: #fff;
    border: none; padding: 16px; cursor: pointer; border-radius: 50%;
    font-size: 1.2rem; z-index: 10; transition: var(--transition);
}
.prev:hover, .next:hover { background-color: var(--app-blue); }
.prev { left: 20px; } .next { right: 20px; }

/* =========================================
   VIDEO SECTION
   ========================================= */
.video-section { padding: 100px 0; background-color: var(--bg-card); }
.video-content-wrapper { display: grid; grid-template-columns: 1fr 1.3fr; gap: 50px; align-items: center; }
.video-text h2 { font-size: 2.6rem; margin-bottom: 20px; font-weight: 700; }
.video-text p { color: var(--text-muted); line-height: 1.8; }

.video-player-container {
    position: relative; padding-bottom: 56.25%; height: 0;
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    border: 3px solid rgba(0, 86, 210, 0.2);
}
.video-player-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* =========================================
   DOWNLOAD / CTA
   ========================================= */
.download-section { padding: 120px 0; background: linear-gradient(135deg, #0a0e17 0%, #152238 100%); }
.download-section h2 { font-size: 3rem; margin-bottom: 20px; }
.download-section p { color: var(--text-muted); font-size: 1.2rem; margin-bottom: 50px; }
.download-btns { display: flex; gap: 20px; justify-content: center; }

.btn-store {
    background-color: #000; color: #fff; border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; gap: 15px; padding: 16px 32px;
}
.btn-store i { font-size: 1.8rem; color: var(--app-blue); }
.btn-store span { font-size: 1rem; text-transform: none; display: block; text-align: left;}
.btn-store:hover { border-color: var(--app-green); transform: scale(1.03); }

/* =========================================
   FOOTER & RESPONSIVE
   ========================================= */
.footer { padding: 40px 0; background-color: #05070b; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); }
.footer p { color: var(--text-muted); margin-bottom: 15px; }
.social-links { display: flex; gap: 20px; justify-content: center; }
.social-links a { font-size: 1.4rem; color: var(--text-muted); }
.social-links a:hover { color: var(--app-green); }

@media (max-width: 992px) {
    .hero-content, .video-content-wrapper { grid-template-columns: 1fr; text-align: center; }
    .hero-text h1 { font-size: 2.8rem; }
    .hero-btns, .download-btns { justify-content: center; flex-wrap: wrap; }
    .hero-image { order: -1; } /* Muestra la app arriba en móviles */
    .app-mockup { max-height: 450px; }
}

@media (max-width: 768px) {
    .nav-links {
        position: absolute; right: 0; height: 92vh; top: 80px;
        background-color: var(--bg-dark); display: flex; flex-direction: column;
        width: 60%; transform: translateX(100%); transition: transform 0.4s ease;
        padding-top: 60px; border-left: 1px solid rgba(0, 86, 210, 0.2);
    }
    .menu-toggle { display: block; }
    .nav-active { transform: translateX(0); }
    .toggle .bar:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
    .toggle .bar:nth-child(2) { opacity: 0; }
    .toggle .bar:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }
}