/*====================================
    RESET
====================================*/

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

html{
    scroll-behavior:smooth;
}


/*====================================
    VARIABLES
====================================*/

:root{

    /* Colores */

    --primary:#2563EB;
    --primary-dark:#0F172A;
    --primary-light:#38BDF8;
    --accent:#7C3AED;

    /* Fondos */

    --background:#F8FAFC;
    --surface:#FFFFFF;

    /* Texto */

    --text:#1E293B;
    --text-light:#64748B;

    /* Bordes */

    --border:#E2E8F0;

    /* Sombras */

    --shadow-sm:0 4px 12px rgba(15,23,42,.08);
    --shadow-md:0 10px 30px rgba(15,23,42,.12);
    --shadow-lg:0 20px 45px rgba(15,23,42,.18);

    /* Radios */

    --radius-sm:10px;
    --radius-md:18px;
    --radius-lg:30px;

}


/*====================================
    BODY
====================================*/

body{

    font-family:'Poppins',sans-serif;
    background:var(--background);
    color:var(--text);

}


/*====================================
    UTILIDADES
====================================*/

.container{

    width:min(1200px,92%);
    margin:auto;

}


/*====================================
    NAVBAR
====================================*/

.navbar{

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:min(1100px,92%);

    z-index:1000;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:999px;

    transition:.4s;

}

.navbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 30px;

}

.brand{

    color:white;

    text-decoration:none;

    font-size:1.3rem;

    font-weight:700;

    letter-spacing:2px;

}

.nav-links{

    display:flex;

    list-style:none;

    gap:30px;

}

.nav-links a{

    color:white;

    text-decoration:none;

    font-weight:500;

    transition:.3s;

}

.nav-links a:hover{

    color:var(--primary-light);

}


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

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

    background:linear-gradient(
        135deg,
        #0F172A 0%,
        #1D4ED8 60%,
        #38BDF8 100%
    );

}

.hero-content{

    max-width:850px;

    text-align:center;

    color:white;

}

.logo{

    width:140px;

    margin-bottom:35px;

}

.subtitle{

    font-size:1rem;

    letter-spacing:3px;

    text-transform:uppercase;

    opacity:.9;

    margin-bottom:20px;

}

.hero h1{

    font-size:3.5rem;

    line-height:1.2;

    margin-bottom:25px;

    font-weight:700;

}

.description{

    font-size:1.15rem;

    line-height:1.9;

    max-width:700px;

    margin:auto;

    opacity:.95;

}

.buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.buttons a{

    text-decoration:none;

    padding:16px 34px;

    border-radius:50px;

    transition:.35s;

    font-weight:600;

}

.btn-primary{

    background:white;

    color:var(--primary-dark);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}

.btn-secondary{

    border:2px solid white;

    color:white;

}

.btn-secondary:hover{

    background:white;

    color:var(--primary-dark);

}


/*====================================
    RESPONSIVE
====================================*/

@media (max-width:768px){

    .hero{

        padding:25px;

    }

    .hero h1{

        font-size:2.4rem;

    }

    .description{

        font-size:1rem;

    }

    .logo{

        width:110px;

    }

    .navbar .container{

        padding:15px 20px;

    }

    .nav-links{

        gap:18px;

    }

}