/*==================================================
                    PAYPE
==================================================*/

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

:root{

--primary:#00C8FF;
--secondary:#00F5C4;
--dark:#07111F;
--dark2:#0E1B2C;
--text:#FFFFFF;
--gray:#A8B5C7;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:var(--dark);
color:white;
overflow-x:hidden;

}

/*=============================
        FONDO
=============================*/

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:

radial-gradient(circle at 20% 20%,rgba(0,200,255,.18),transparent 30%),

radial-gradient(circle at 90% 10%,rgba(0,255,196,.12),transparent 25%),

linear-gradient(180deg,#07111F,#08182B,#07111F);

z-index:-2;

}

/*=============================
        CONTAINER
=============================*/

.container{

width:92%;

max-width:1450px;

margin:auto;

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

header{

position:fixed;

top:0;
left:0;

width:100%;

padding:25px 0;

backdrop-filter:blur(15px);

background:rgba(8,17,31,.35);

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

z-index:999;

}

.header-content{

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

}

/*=============================
        LOGO
=============================*/

.logo img{

height:58px;

display:block;

}

/*=============================
        MENU
=============================*/

nav{

margin-left:auto;

}

nav ul{

display:flex;

list-style:none;

gap:35px;

align-items:center;

}

nav ul li{

list-style:none;

}

nav ul li a{

text-decoration:none;

color:white;

font-weight:500;

font-size:15px;

transition:.3s;

}

nav ul li a:hover{

color:var(--primary);

}

/*=============================
        BOTON
=============================*/

.btn-demo{

text-decoration:none;

padding:16px 32px;

border-radius:50px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#00151D;

font-weight:700;

transition:.35s;

}

.btn-demo:hover{

transform:translateY(-3px);

box-shadow:0 15px 40px rgba(0,200,255,.35);

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

padding-top:130px;

}

.hero-grid{

display:grid;

grid-template-columns:55% 45%;

align-items:center;

gap:30px;

}

.hero-left{

padding-right:40px;

}

/*=============================
        TEXTO
=============================*/

.badge{

display:inline-block;

padding:12px 22px;

border-radius:50px;

background:rgba(0,200,255,.10);

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

color:var(--primary);

font-size:14px;

margin-bottom:30px;

}

.hero-left h1{

font-size:68px;

font-weight:800;

line-height:1.12;

letter-spacing:-2px;

margin-bottom:35px;

max-width:760px;

}

.hero-left p{

font-size:21px;

line-height:38px;

color:#B4C2D3;

max-width:620px;

margin-top:25px;

margin-bottom:50px;

}

.pregunta{

display:block;

font-size:68px;

line-height:1.05;

font-weight:800;

color:#fff;

margin-bottom:20px;

}

.respuesta{

display:block;

font-size:50px;

line-height:1.15;

font-weight:700;

color:#E8EEF7;

}

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

.buttons{

display:flex;

align-items:center;

gap:22px;

margin-top:15px;

margin-bottom:55px;

}

.btn-primary{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 40px;

border-radius:50px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#00151D;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-5px);

}

.btn-secondary{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 40px;

border-radius:50px;

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

color:white;

text-decoration:none;

transition:.35s;

}

.btn-secondary:hover{

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

}

/*=============================
        ITEMS
=============================*/

.hero-items{

display:flex;

flex-direction:column;

gap:18px;

font-size:17px;

font-weight:500;

}

/*=============================
        IMAGEN
=============================*/

.hero-right{

display:flex;

justify-content:center;

align-items:flex-start;

padding-top:20px;

}

.hero-right img{

width:100%;

max-width:340px;

transform:rotate(-8deg);

transition:.5s;

filter:
drop-shadow(0 35px 60px rgba(0,0,0,.40))
drop-shadow(0 0 50px rgba(0,180,255,.12));

}


.hero-right{

position:relative;

display:flex;

justify-content:center;

align-items:center;

padding-left:60px;

}

.hero-right::before{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

background:#00AEEF;

filter:blur(180px);

opacity:.18;

z-index:-1;

}

.hero-right{

position:relative;

}

.hero-right::after{

content:"";

position:absolute;

width:420px;

height:420px;

background:#00bfff;

filter:blur(170px);

opacity:.12;

border-radius:50%;

z-index:-1;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

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

@media(max-width:991px){

.hero-grid{

grid-template-columns:1fr;

align-items:center;

gap:60px;

}

.hero-left h1{

font-size:46px;

}

.hero-left p{

font-size:21px;

line-height:38px;

color:#B4C2D3;

max-width:620px;

margin-bottom:0;

}

.buttons{

display:flex;

align-items:center;

gap:22px;

margin-top:45px;

margin-bottom:55px;

}

.hero-items{

align-items:center;

}

}
.yape{

color:#8D32D9;

font-weight:800;

text-shadow:0 0 18px rgba(134,0,151,.25);

}

.paype{

background:linear-gradient(90deg,#00D5FF,#00F5C4);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

font-weight:800;

}