/* ===================================
   QSBP STYLE V2
=================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');

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

body{
    background:#000;
    color:#ffffff;
    font-family:'Oswald',sans-serif;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:white;
    transition:.3s;
}

img{
    max-width:100%;
    display:block;
}

.container{
    width:92%;
    max-width:1400px;
    margin:auto;
}


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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:rgba(0,0,0,0.95);

    backdrop-filter:blur(10px);

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

    padding:12px 0;

}

header .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo img{
    width:55px;
}

.logo span{
    font-size:42px;
    font-weight:700;
    letter-spacing:2px;
}


.nav-menu{
    display:flex;
    align-items:center;
    gap:35px;
}

.nav-menu a{
    font-size:20px;
    color:#d7d7d7;
}

.nav-menu a:hover{
    color:#ff0000;
}

.nav-menu a{

    position:relative;

}


.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:red;

    transition:.3s;

}


.nav-menu a:hover::after{

    width:100%;

}
.login-btn{
    border:2px solid #ff0000;
    padding:12px 25px;
    border-radius:12px;
}

.login-btn:hover{

    background:#ff0000;

    box-shadow:
    0 0 20px red,
    0 0 40px red;
}


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

.hero{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

}


.hero-left{

    position:relative;

    z-index:10;

    width:700px;

}

.hero .container{

    display:flex;

    align-items:center;

    gap:25px;
}


.hero-left{

    width:40%;
}


.hero h1{

    font-size:80px;

    line-height:1.05;

    margin-bottom:15px;
}


.hero p{

    font-size:24px;

    color:#d5d5d5;

    line-height:1.5;
}

opacity:.35;
filter:drop-shadow(0 0 30px red);

} 

filter:brightness(.8);
.red{

    color:#ff0000;
}
/* Imagen de fondo con texto superpuesto */

.hero{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    z-index:1;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:2;
}

.hero .container{
    position:relative;
    z-index:3;
}

.hero-home::before{
    background-image:url("../images/hero-home.png");
}

.hero-analisis::before{
    background-image:url("../images/hero-analisis.png");
}

.hero-planes::before{
    background-image:url("../images/hero-planes.png");
}

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

.buttons{

    display:flex;

    gap:15px;

    margin-top:25px;
}


.btn{

    padding:15px 35px;

    border-radius:15px;

    border:2px solid #ff0000;

    background:linear-gradient(#380000,#ff0000);

    color:white;

    font-size:20px;

    cursor:pointer;

    transition:.4s;
}


.btn:hover{

    box-shadow:

    0 0 20px red,

    0 0 50px red;
}


/* ===================================
SEPARADORES
=================================== */

.section-divider{

    width:100%;

    height:1px;

    margin:20px 0;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,0,0,.8),
    transparent);

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

.section{

    padding:25px 0;

}

.section-divider{
    margin:10px 0;

}

.section-title{

    text-align:center;

    font-size:48px;

    margin-bottom:30px;
}


/* ===================================
TARJETAS GENERALES
=================================== */

.cards{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(300px,1fr));

    gap:20px;

}


.card{

    background:

    linear-gradient(
    180deg,
    #0d0d0d,
    #050505);

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

    border-radius:25px;

    padding:45px;

    transition:.4s;
}


.card:hover{

    transform:translateY(-8px);

    border-color:red;

    box-shadow:

    0 0 20px rgba(255,0,0,.3),

    0 0 40px rgba(255,0,0,.15);
}


.card i{

    font-size:45px;

    color:red;

    margin-bottom:15px;
}


.card h3{

    font-size:26px;

    margin-bottom:12px;

    line-height:1.2;
}


.card p{

    font-size:18px;

    color:#d0d0d0;

    line-height:1.5;
}


/* ===================================
BATALLAS
=================================== */

.battles{

    margin-top:30px;
}


.battle-card{

    background:

    linear-gradient(
    180deg,
    #110000,
    #050505);

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

    border-radius:25px;

    padding:25px;

    text-align:center;

    transition:.4s;
}


.battle-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 0 20px rgba(255,0,0,.4),

    0 0 50px rgba(255,0,0,.2);
}


.battle-card i{

    font-size:70px;

    color:red;

    margin-bottom:25px;
}


.battle-card h3{

    font-size:36px;

    margin-bottom:25px;
}


.battle-card p{

    color:#d0d0d0;

    font-size:22px;

    line-height:1.8;
}


/* ===================================
RESULTADO
=================================== */

.result-box{

    max-width:1000px;

    margin:auto;

    background:

    linear-gradient(
    180deg,
    #160000,
    #050505);

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

    border-radius:30px;

    padding:30px;

    text-align:center;
}


.result-box h2{

    font-size:36px;

    margin-bottom:15px;
}


.result-box p{

    font-size:18px;

    color:#d7d7d7;

    line-height:1.6;
}


/* ===================================
CENTRADO
=================================== */

.center{

    text-align:center;
}
/* ===================================
PLANES PLANES
=================================== */

.planes-plans{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(320px,1fr));

    gap:20px;

}


.plan-card{

    position:relative;

    background:

    linear-gradient(
    180deg,
    #140000,
    #050505);

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

    border-radius:30px;

    padding:35px 25px;

    text-align:center;

    transition:.4s;

}


.plan-card:hover{

    transform:translateY(-10px);

    border-color:red;

    box-shadow:

    0 0 20px rgba(255,0,0,.4),

    0 0 50px rgba(255,0,0,.2);

}


.plan-card i{

    font-size:55px;

    color:red;

    margin-bottom:15px;

}


.plan-card h2{

    font-size:34px;

    margin-bottom:15px;

}


.plan-card ul{

    margin-bottom:40px;

}


.plan-card li{

    color:#d2d2d2;

    font-size:23px;

    margin-bottom:20px;

}


.price{

    font-size:40px;

    color:red;

    margin-bottom:20px;

}


.plan-button{

    display:inline-block;

    padding:14px 35px;

    border-radius:15px;

    border:2px solid red;

    background:

    linear-gradient(
    #350000,
    red);

    font-size:18px;

    transition:.4s;

}


.plan-button:hover{

    box-shadow:

    0 0 20px red,

    0 0 50px red;

}


/* ===================================
MÁS POPULAR
=================================== */

.popular{

    border:2px solid red;

    box-shadow:

    0 0 20px rgba(255,0,0,.5),

    0 0 50px rgba(255,0,0,.2);

}


.popular-label{

    position:absolute;

    top:-18px;

    left:50%;

    transform:translateX(-50%);

    background:red;

    color:white;

    padding:10px 30px;

    border-radius:15px;

    font-size:18px;

    font-weight:700;

}


/* ===================================
FRASE INFERIOR
=================================== */

.planes-message{

    max-width:1000px;

    margin:auto;

    text-align:center;

    padding-top:30px;

}


.planes-message h2{

    font-size:32px;

    margin-bottom:15px;

}


.planes-message p{

    color:#d0d0d0;

    font-size:18px;

    line-height:1.6;

}
/* ===================================
FORMULARIOS
=================================== */

.form-section{

    padding:100px 0;

}


.form-container{

    max-width:700px;

    margin:auto;

}


.form-card{

    background:

    linear-gradient(
    180deg,
    #140000,
    #050505);

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

    border-radius:30px;

    padding:70px 50px;

    transition:.4s;

}


.form-card:hover{

    box-shadow:

    0 0 20px rgba(255,0,0,.3),

    0 0 50px rgba(255,0,0,.15);

}


.form-title{

    text-align:center;

    font-size:55px;

    margin-bottom:50px;

}


.form-group{

    margin-bottom:35px;

}


.form-group label{

    display:block;

    margin-bottom:12px;

    font-size:22px;

    color:#ffffff;

}


.form-group input{

    width:100%;

    background:#090909;

    border:1px solid #222;

    border-radius:15px;

    color:white;

    padding:22px;

    font-size:20px;

    outline:none;

    transition:.3s;

}


.form-group input:focus{

    border-color:red;

    box-shadow:

    0 0 10px rgba(255,0,0,.4);

}


.form-btn{

    width:100%;

    border:none;

    cursor:pointer;

    padding:24px;

    border-radius:15px;

    background:

    linear-gradient(
    #350000,
    red);

    color:white;

    font-size:24px;

    transition:.4s;

}


.form-btn:hover{

    box-shadow:

    0 0 20px red,

    0 0 50px red;

}


.form-links{

    text-align:center;

    margin-top:40px;

}


.form-links a{

    color:#d0d0d0;

    font-size:20px;

    transition:.3s;

}


.form-links a:hover{

    color:red;

}


.form-links p{

    margin-top:25px;

}


/* ===================================
CHECKBOX
=================================== */

.checkbox-group{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:30px;

}


.checkbox-group input{

    width:20px;

    height:20px;

}


.checkbox-group label{

    color:#d0d0d0;

    font-size:18px;

}


/* ===================================
TEXTOS INFERIORES
=================================== */

.bottom-text{

    text-align:center;

    margin-top:60px;

}


.bottom-text h3{

    font-size:40px;

    margin-bottom:25px;

}


.bottom-text p{

    color:#d0d0d0;

    font-size:24px;

    line-height:1.8;

}
/* ===================================
DISCLAIMER
=================================== */

.disclaimer-container{

    max-width:1200px;

    margin:auto;

}


.disclaimer-card{

    display:flex;

    gap:30px;

    align-items:flex-start;

    background:

    linear-gradient(
    180deg,
    #100000,
    #050505);

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

    border-radius:25px;

    padding:40px;

    margin-bottom:35px;

    transition:.4s;

}


.disclaimer-card:hover{

    transform:translateY(-5px);

    box-shadow:

    0 0 20px rgba(255,0,0,.3),

    0 0 50px rgba(255,0,0,.15);

}


.disclaimer-card i{

    color:red;

    font-size:60px;

    min-width:60px;

}


.disclaimer-content h3{

    font-size:34px;

    margin-bottom:15px;

}


.disclaimer-content p{

    color:#d0d0d0;

    font-size:22px;

    line-height:1.8;

}


/* ===================================
REDES SOCIALES
=================================== */

.social-section{

    padding:20px 0;

}

.socials{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}


.socials a{

    color:#d0d0d0;

    font-size:20px;

    transition:.3s;

}


.socials a:hover{

    color:red;

}


.socials i{

    margin-right:12px;

    font-size:28px;

}


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

footer{

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

    padding:25px 0;

}


footer p{

    text-align:center;

    color:#888;

    margin-top:10px;

    font-size:18px;

}


/* ===================================
SEPARADOR ROJO
=================================== */

.section-divider{

    width:100%;

    height:1px;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,0,0,.8),
    transparent);

}


/* ===================================
EFECTOS GENERALES
=================================== */

.glow{

    box-shadow:

    0 0 20px rgba(255,0,0,.3),

    0 0 40px rgba(255,0,0,.15);

}


.shadow-red{

    box-shadow:

    0 0 25px rgba(255,0,0,.4);

}
/* ===================================
TABLETS
=================================== */

@media(max-width:1200px){

.hero h1{

font-size:90px;

}

.hero p{

font-size:26px;

}

.section-title{

font-size:55px;

}

.logo span{

font-size:50px;

}

}


/* ===================================
TABLETS PEQUEÑAS
=================================== */

@media(max-width:992px){

header .container{

flex-direction:column;

gap:25px;

}


.nav-menu{

gap:30px;

flex-wrap:wrap;

justify-content:center;

}


.hero .container{

flex-direction:column;

text-align:center;

}


.hero-left{

width:100%;

}


.hero-right{

width:100%;

max-width:700px;

margin:auto;

}


.buttons{

justify-content:center;

flex-wrap:wrap;

}


.section-title{

font-size:50px;

}


.card{

padding:35px;

}


.plan-card{

padding:50px 30px;

}


.disclaimer-card{

flex-direction:column;

}


.socials{

gap:30px;

}

}


/* ===================================
MÓVILES
=================================== */

@media(max-width:768px){

.logo img{

width:55px;

}


.logo span{

font-size:36px;

}


.nav-menu{

gap:18px;

}


.nav-menu a{

font-size:20px;

}


.hero{

padding-top:30px;

padding-bottom:30px;

}


.hero h1{

font-size:60px;

}


.hero p{

font-size:22px;

}


.buttons{

flex-direction:column;

gap:20px;

}


.btn{

width:100%;

text-align:center;

font-size:22px;

}


.section{

padding:70px 0;

}


.section-title{

font-size:40px;

margin-bottom:40px;

}


.cards{

grid-template-columns:1fr;

}


.card h3{

font-size:28px;

}


.card p{

font-size:20px;

}


.battle-card h3{

font-size:30px;

}


.battle-card p{

font-size:20px;

}


.result-box{

padding:50px 30px;

}


.result-box h2{

font-size:40px;

}


.result-box p{

font-size:22px;

}


.form-card{

padding:50px 30px;

}


.form-title{

font-size:40px;

}


.form-group label{

font-size:18px;

}


.form-group input{

font-size:18px;

padding:18px;

}


.plan-card h2{

font-size:38px;

}


.price{

font-size:45px;

}


.disclaimer-content h3{

font-size:28px;

}


.disclaimer-content p{

font-size:19px;

}


.socials{

flex-direction:column;

gap:20px;

}


footer p{

font-size:16px;

}

}


/* ===================================
IPHONES PEQUEÑOS
=================================== */

@media(max-width:480px){

.hero h1{

font-size:48px;

}


.hero p{

font-size:20px;

}


.logo span{

font-size:30px;

}


.nav-menu a{

font-size:18px;

}


.section-title{

font-size:34px;

}


.card{

padding:30px;

}


.plan-card{

padding:40px 25px;

}


.form-card{

padding:40px 20px;

}
}
/*==================================
AVISO IMPORTANTE
==================================*/

.warning-section{

    padding:35px 0;

}

.warning-box{

    max-width:1200px;

    margin:auto;

    background:none;

    border:none;

    border-radius:0;

    padding:0;

    text-align:center;

}

.warning-box h2{

    color:red;

    font-size:14px;

    margin-bottom:15px;

}

.warning-box p{

    color:#d0d0d0;

    font-size:14px;

    line-height:1.8;

}

.warning-box a{

    color:white;

    font-size:24px;

    border-bottom:1px solid red;

    transition:.3s;

}

.warning-box a:hover{

    color:red;

}
/*==================================
BOTON DISCLAIMER
==================================*/

.warning-button{
    margin-top:20px;
    text-align:center;
}

.warning-button a{

    display:inline-block;

    padding:14px 30px;

    background:#0b0b0b;

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

    border-radius:12px;

    color:#ffffff;

    font-size:18px;

    letter-spacing:1px;

    transition:.3s;

}

.warning-button a:hover{

    border-color:#ff0000;

    color:#ffffff;

    box-shadow:
        0 0 12px rgba(255,0,0,.45);

    transform:translateY(-2px);

}
}