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


body{

font-family:Poppins,sans-serif;

background:#ffffff;

color:#222;

}

/* ===== HEADER ===== */

/*================ HEADER ================*/

.topbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 50px;

    background:linear-gradient(135deg,#1d1d1d,#303030,#505050);

    box-shadow:0 4px 15px rgba(0,0,0,.25);

    z-index:999;

    transition:.35s;

}

/* cuando hacemos scroll */

.topbar.scrolled{

    height:70px;

    background:rgba(35,35,35,.75);

    backdrop-filter:blur(10px);

}

.logo{

    width:210px;

    display:block;

}

nav{

    display:flex;

    gap:35px;

}

nav a{

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

    position:relative;

}

nav a:hover{

    color:#4ea3ff;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-5px;

    width:0;

    height:2px;

    background:#4ea3ff;

    transition:.3s;

}

nav a:hover::after{

    width:100%;

}

/* ===== HERO ===== */

.hero{

    text-align:center;

    max-width:900px;

    margin:auto;

    padding:170px 20px 90px;

}

.hero p{

    font-size:22px;

    color:#666;

    line-height:1.7;

}

.hero h1{

    font-size:50px;

    line-height:1.15;

    max-width:800px;

    margin:0 auto 20px;

}

.download{

display:inline-block;

margin-top:40px;

padding:18px 50px;

background:#2563eb;

color:white;

text-decoration:none;

font-weight:bold;

border-radius:12px;

transition:.3s;

}

.download:hover{

background:#1d4ed8;

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.downloader-code{
    margin-top: 35px; /* separación respecto al botón */
    display: flex;
    justify-content: center;
}

.downloader-code img{
    width: min(500px, 80vw);
    height: auto;
    display: block;
    border-radius: 10px;
}

.features{

padding:70px 20px;

background:#f5f7fa;

}

.features h2{

text-align:center;

margin-bottom:50px;

font-size:34px;

}

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

max-width:1100px;

margin:auto;

}

.card{

background:white;

padding:35px;

border-radius:18px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.3s;

}

.card:hover{

transform:translateY(-6px);

}

.card h3{

margin-bottom:15px;

}

/* ===== CONTENEDOR GENERAL ===== */

.container{

    max-width:1100px;

    margin:auto;

    padding:0 20px;

}

/* ===== ABOUT ===== */

.about{

    padding:90px 0;

    background:white;

}

.about h2{

    text-align:center;

    font-size:38px;

    margin-bottom:25px;

}

.about-text{

    max-width:800px;

    margin:auto;

    text-align:center;

    font-size:20px;

    line-height:1.9;

    color:#666;

}

/* ===== FAQ ===== */

.faq{

    padding:90px 0;

    background:#ffffff;

}

.faq h2{

    text-align:center;

    font-size:38px;

    margin-bottom:50px;

}

.faq-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

}

.faq-card{

    background:#f8fafc;

    padding:30px;

    border-radius:18px;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

    transition:.3s;

}

.faq-card:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 30px rgba(0,0,0,.08);

}

.faq-card h3{

    margin-bottom:12px;

    font-size:20px;

}

.faq-card p{

    color:#666;

    line-height:1.7;

}

footer{

padding:30px;

text-align:center;

color:#666;

}

@media (max-width: 768px){

    .topbar{
        height: 60px;
        padding: 0 20px;
        justify-content: center;
    }

    .logo{
        width: 140px;
        margin: 0;
    }

    nav{
        display: none;
    }

    .hero{
        padding: 95px 20px 70px;
    }

    .hero p{
        font-size: 18px;
        line-height: 1.5;
    }

    .download{
        width: 100%;
        max-width: 300px;
        padding: 16px 20px;
    }

    .downloader-code img{
        width: min(350px, 90vw);
    }
}