@import url('https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"TikTok Sans",sans-serif;background:#020922;color:#fff;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
button{background:none;border:none;cursor:pointer;}

h1,h2,h3,h4,h5,h6{ display:inline !important; font-weight: 400;}

.hero{position:absolute;top:0;left:0;width:100%;padding:40px 60px;background:transparent;z-index:999;}

.header{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
width:100%;
}

.logo{flex-shrink:0;}

.logo img{
width:140px;
height:auto;
display:block;
}

.hero-text{
flex:1;
max-width:340px;
font-size:18px;
line-height:1.35;
font-weight:400;
text-align:left;
margin:0;
}

.hero-text span{color:#3f6cff;}

.header-right{
display:flex;
align-items:center;
gap:25px;
flex-shrink:0;
}

.btn-conecta img{
width:180px;
display:block;
}

.menu-btn{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.menu-btn img{
width:40px;
height:40px;
object-fit:contain;
display:block;
transition:.18s ease;
}

.menu-btn:hover img{opacity:.65;}

.hero-title{
font-size:8vw;
font-weight:300;
line-height:.9;
letter-spacing:-3px;
max-width:1200px;
margin-top:90px;
}

.menu-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#3f66f3;
padding:40px 60px;
display:flex;
flex-direction:column;
justify-content:space-between;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .25s ease;
z-index:999;
}

.menu-overlay.active{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.menu-top{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
}

.logo-white{
width:140px;
height:auto;
display:block;
margin:0;
transition:none;
transform:none;
}

.menu-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px 60px;
margin-top:50px;
}

.menu-grid a{
display:flex;
align-items:center;
gap:18px;
padding:25px 0;
border-bottom:1px solid rgba(255,255,255,.25);
font-size:4vw;
font-weight:300;
color:#fff;
transition:.18s ease;
opacity:0;
transform:translateY(20px);
}

.menu-overlay.active .menu-grid a{
opacity:1;
transform:translateY(0);
}

.menu-grid a:hover{
color:#000;
padding-left:10px;
}

.menu-grid a span{
font-size:16px;
min-width:30px;
opacity:.8;
}

.flecha-hover{
width:48px;
height:48px;
opacity:0;
transform:translateX(-10px);
transition:.18s ease;
flex-shrink:0;
}

.menu-grid a:hover .flecha-hover{
opacity:1;
transform:translateX(0);
}

.menu-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:35px;
margin-top:40px;
font-size:12px;
}

.follow-group{
display:flex;
align-items:center;
gap:22px;
}

.follow-text{
white-space:nowrap;
opacity:.9;
}

.social{
display:flex;
align-items:center;
gap:18px;
}

.social img{
height:22px;
width:auto;
transition:.25s ease;
}

.social a:hover img{
transform:translateY(-4px);
}

.privacy{
white-space:nowrap;
text-decoration:underline;
transition:.18s ease;
}

.privacy:hover{opacity:.7;}

@media(max-width:900px){

.hero{
padding:25px 20px;
}

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

.logo img{
width:110px;
}

.logo-white{
width:110px;
margin:0;
display:block;
}

.hero-text{
display:block;
flex:1;
max-width:180px;
font-size:11px;
line-height:1.3;
text-align:left;
margin:0;
}

.btn-conecta{
display:none;
}

.header-right{
gap:18px;
}

.hero-title{
font-size:12vw;
line-height:.95;
text-align:center;
margin-top:50px;
}

.menu-overlay{
padding:25px 20px;
overflow-y:auto;
}

.menu-top{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
}

.menu-grid{
grid-template-columns:1fr;
gap:8px;
margin-top:35px;
}

.menu-grid a{
justify-content:center;
align-items:center;
font-size:8vw;
padding:14px 0;
gap:12px;
text-align:center;
}

.menu-grid a span{
display:none;
}

.menu-grid a:hover{
padding-left:0;
}

.flecha-hover{
width:28px;
height:28px;
}

.menu-footer{
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:18px;
margin-top:28px;
}

.follow-group{
flex-direction:column;
align-items:center;
gap:14px;
}

.follow-text,.privacy{
white-space:normal;
}

.social{
justify-content:center;
}
}