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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#090909;

    color:#ffffff;

    overflow-x:hidden;

}

img{

    max-width:100%;

}

a{

    text-decoration:none;

}

.container{

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

}

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

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    backdrop-filter:blur(20px);

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

    border-bottom:1px solid rgba(255,255,255,.05);

}



.logo{

    display:flex;
    align-items:center;
    gap:12px;

    font-size:24px;
    font-weight:800;
    letter-spacing:1px;
    color:#fff;

}

.logo img{

    height:65px;
    width:auto;

}

/* ==========================
MODAL
========================== */

.modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

display:none;

justify-content:center;

align-items:center;

z-index:99999;

backdrop-filter:blur(10px);

}

.modal-content{

width:95%;

max-width:520px;

background:#171717;

padding:45px;

border-radius:20px;

position:relative;

animation:modalShow .35s;

}

@keyframes modalShow{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.close-modal{

position:absolute;

right:20px;

top:18px;

font-size:32px;

cursor:pointer;

color:#fff;

}

.modal h2{

margin-bottom:15px;

}

.modal p{

margin-bottom:30px;

color:#bdbdbd;

}

.modal input{

width:100%;

padding:16px;

margin-bottom:18px;

background:#0f0f0f;

border:1px solid #333;

border-radius:10px;

color:#fff;

font-size:16px;

}

.modal button{

width:100%;

cursor:pointer;

border:none;

}

/* ==========================================
WHATSAPP FLOAT
========================================== */

.whatsapp-float{

    position:fixed;

    bottom:25px;

    right:25px;

    width:68px;

    height:68px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:36px;

    text-decoration:none;

    z-index:9999;

    box-shadow:0 15px 35px rgba(37,211,102,.45);

    transition:.35s;

    animation:whatsappPulse 2s infinite;

}

.whatsapp-float:hover{

    transform:scale(1.12);

    box-shadow:0 20px 50px rgba(37,211,102,.6);

}

@keyframes whatsappPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

@media(max-width:768px){

    .whatsapp-float{

        width:60px;

        height:60px;

        font-size:32px;

        right:18px;

        bottom:18px;

    }

}

/* ==========================================
BANNER
========================================== */

.banner-explicativo{

    padding:40px 0 80px;

}

.banner-explicativo img{

    width:100%;

    display:block;

    border-radius:22px;

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

    transition:.5s;

}

.banner-explicativo img:hover{

    transform:scale(1.01);

}

.nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:82px;

}

.logo{

    font-size:24px;

    font-weight:800;

    letter-spacing:2px;

    color:#fff;

}

nav{

    display:flex;

    gap:35px;

}

nav a{

    color:#ddd;

    transition:.3s;

}

nav a:hover{

    color:#ff3434;

}

/* ==========================
BOTONES
========================== */

.btn{

    background:#e53935;

    color:#fff;

    padding:15px 28px;

    border-radius:12px;

    font-weight:700;

    transition:.35s;

}

.btn:hover{

    transform:translateY(-3px);

    background:#ff4d4d;

    box-shadow:0 20px 40px rgba(255,0,0,.25);

}

.btn-secondary{

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

    color:#fff;

    padding:15px 28px;

    border-radius:12px;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

}

.hero-content{

    display:grid;

    grid-template-columns:1fr 480px;

    gap:80px;

    align-items:center;

}

.badge{

    display:inline-flex;

    padding:8px 18px;

    border-radius:40px;

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

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

    margin-bottom:30px;

}

.hero h1{

    font-size:64px;

    line-height:1.05;

    margin-bottom:30px;

}

.hero p{

    color:#bcbcbc;

    font-size:20px;

    line-height:1.8;

    max-width:700px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

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

.hero-right{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.stats-card{

    background:#141414;

    border-radius:22px;

    padding:35px;

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

    transition:.35s;

}

.stats-card:hover{

    transform:translateY(-8px);

    border-color:#e53935;

}

.stats-card h2{

    font-size:50px;

    color:#ff3a3a;

}

.stats-card p{

    margin-top:10px;

    color:#bdbdbd;

}

/* ==========================
SECCIONES
========================== */

section{

    padding:120px 0;

}

section h2{

    font-size:48px;

    text-align:center;

    margin-bottom:70px;

}

/* ==========================
CARDS
========================== */

.cards{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.card{

    background:#131313;

    border-radius:20px;

    padding:35px;

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

}

.card span{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#e53935;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    margin-bottom:25px;

}

.card h3{

    margin-bottom:15px;

}

.card p{

    color:#bbb;

    line-height:1.7;

}

/* ==========================
BENEFICIOS
========================== */

.benefits-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.benefit{

    background:#141414;

    border-radius:22px;

    padding:45px;

}

.benefit h3{

    margin-bottom:20px;

}

.benefit p{

    color:#bdbdbd;

}

/* ==========================
NUMBERS
========================== */

.equation{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:50px;

    margin-top:70px;

}

.equation h3{

    font-size:72px;

    color:#ff3d3d;

}

.equation span{

    font-size:55px;

    opacity:.25;

}

/* ==========================
PRECIO
========================== */

.price-box{

    max-width:650px;

    margin:auto;

    text-align:center;

    background:#151515;

    border-radius:28px;

    padding:60px;

}

.price-box h2{

    font-size:72px;

    margin:20px 0;

    color:#ff3d3d;

}

.price-box small{

    display:block;

    margin:30px 0;

    color:#888;

}

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

.faq{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.faq div{

    background:#151515;

    padding:35px;

    border-radius:18px;

}

.faq h3{

    margin-bottom:15px;

}

/* ==========================
CTA
========================== */

.cta{

    text-align:center;

}

.cta h2{

    max-width:900px;

    margin:auto;

}

.cta p{

    color:#bdbdbd;

    margin:25px 0 45px;

}

/* ==========================
FOOTER
========================== */

footer{

    border-top:1px solid rgba(255,255,255,.05);

    padding:40px 0;

    text-align:center;

    color:#777;

}

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

@media(max-width:991px){

.hero-content{

grid-template-columns:1fr;

}

.cards{

grid-template-columns:1fr 1fr;

}

.benefits-grid{

grid-template-columns:1fr;

}

.equation{

flex-direction:column;

}

.faq{

grid-template-columns:1fr;

}

.hero h1{

font-size:48px;

}

nav{

display:none;

}

}

@media(max-width:768px){

.cards{

grid-template-columns:1fr;

}

.hero-buttons{

flex-direction:column;

}

.hero{

padding-top:100px;

}

}