*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#f5f7fb;
    color:#333;
    line-height:1.7;
}

/* NAVBAR */

nav{
    position:fixed;
    width:100%;
    top:0;
    left:0;
    background:rgba(15,23,42,.95);
    backdrop-filter:blur(10px);
    z-index:1000;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

.nav{
    height:75px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    color:#fff;
    font-size:28px;
    font-weight:700;
    letter-spacing:1px;
}

nav ul{
    display:flex;
    list-style:none;
}

nav li{
    margin-left:30px;
}

nav a{
    color:white;
    text-decoration:none;
    font-weight:500;
    transition:.3s;
}

nav a:hover{
    color:#3b82f6;
}

/* HERO */

header{

    height:100vh;

    background:
    linear-gradient(rgba(15,23,42,.75),rgba(15,23,42,.75)),
    url("https://images.unsplash.com/photo-1553413077-190dd305871c?auto=format&fit=crop&w=1600&q=80");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
}

.hero{
    width:800px;
    max-width:90%;
}

.hero h1{
    font-size:58px;
    margin-bottom:20px;
}

.hero p{
    font-size:22px;
    margin-bottom:35px;
}

.boton{

    display:inline-block;

    background:#2563eb;

    color:white;

    padding:15px 40px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.boton:hover{

    background:#1d4ed8;

    transform:translateY(-3px);

}

/* SECCIONES */

section{

    padding:90px 0;

}

h2{

    text-align:center;

    font-size:38px;

    color:#0f172a;

    margin-bottom:25px;

}

.texto{

    max-width:900px;

    margin:auto;

    text-align:center;

    font-size:18px;

}

/* TARJETAS */

.cards{

display:grid;

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

gap:30px;

margin-top:50px;

}

.card{

background:white;

padding:40px 30px;

border-radius:18px;

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

text-align:center;

transition:.35s;

}

.card:hover{

transform:translateY(-10px);

}

.card i{

font-size:55px;

color:#2563eb;

margin-bottom:20px;

}

.card h3{

margin-bottom:15px;

color:#0f172a;

}

/* BENEFICIOS */

.ventajas{

background:#0f172a;

color:white;

}

.ventajas h2{

color:white;

}

.beneficios{

display:grid;

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

gap:25px;

margin-top:40px;

}

.beneficios div{

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

padding:25px;

border-radius:12px;

font-size:18px;

text-align:center;

}

.beneficios i{

color:#22c55e;

margin-right:10px;

}

/* CONTACTO */

.contacto{

background:white;

padding:50px;

border-radius:18px;

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

text-align:center;

}

.contacto p{

margin:18px 0;

font-size:18px;

}

.contacto i{

color:#2563eb;

margin-right:8px;

}

/* FOOTER */

footer{

background:#020617;

color:white;

text-align:center;

padding:40px 20px;

}

footer h3{

margin-bottom:15px;

}

/* WHATSAPP */

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:white;

font-size:32px;

text-decoration:none;

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

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.1);

}

/* RESPONSIVE */

@media(max-width:768px){

.hero h1{

font-size:38px;

}

.hero p{

font-size:18px;

}

.nav{

flex-direction:column;

height:auto;

padding:15px 0;

}

nav ul{

margin-top:10px;

flex-wrap:wrap;

justify-content:center;

}

nav li{

margin:8px 12px;

}

section{

padding:70px 0;

}

h2{

font-size:30px;

}

.contacto{

padding:35px 20px;

}

}