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

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

html{
scroll-behavior:smooth;
}

body{

background:#040811;
color:#ffffff;
overflow-x:hidden;

}

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

.background-grid{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:

linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);

background-size:60px 60px;

z-index:-10;

}

.background-glow{

position:fixed;

top:-500px;
left:50%;

transform:translateX(-50%);

width:1400px;
height:1400px;

background:

radial-gradient(
circle,
rgba(46,184,92,.08),
transparent 70%
);

z-index:-9;

}

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

.header{

position:fixed;

top:0;
left:0;

width:100%;

height:85px;

background:rgba(4,8,17,.88);

backdrop-filter:blur(15px);

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

z-index:9999;

}

.container{

max-width:1500px;

height:100%;

margin:auto;

padding:0 25px;

display:flex;
align-items:center;
justify-content:space-between;

}

.logo{

height:55px;

display:block;

}

.nav{

display:flex;

align-items:center;

gap:35px;

}

.nav a{

text-decoration:none;

color:#d5dce5;

font-size:14px;

font-weight:600;

transition:.3s;

}

.nav a:hover{

color:#2eb85c;

}

.menu-toggle{

display:none;

background:none;

border:none;

color:white;

font-size:28px;

cursor:pointer;

}

/* ==================================================
   TICKER
================================================== */

.ticker{

position:fixed;

top:85px;

left:0;

width:100%;

height:38px;

background:#08111f;

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

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

overflow:hidden;

z-index:999;

display:flex;
align-items:center;

}

.ticker-track{

display:flex;

align-items:center;

gap:60px;

white-space:nowrap;

animation:tickerMove 35s linear infinite;

}

.ticker-item{

font-size:13px;

font-weight:700;

color:#3fd46c;

letter-spacing:.5px;

}

@keyframes tickerMove{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

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

.mobile-menu{

position:fixed;

top:123px;

right:-320px;

width:300px;

height:calc(100vh - 123px);

background:#08111f;

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

transition:.35s;

z-index:9998;

padding-top:20px;

}

.mobile-menu.active{

right:0;

}

.mobile-menu a{

display:block;

padding:18px 25px;

color:white;

text-decoration:none;

font-size:14px;

font-weight:600;

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

}

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

.hero{

position:relative;

min-height:100vh;

padding-top:170px;

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;

}

/* ==================================================
   FONDOS ROTATIVOS
================================================== */

.market-bg{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

overflow:hidden;

z-index:1;

}

.market-image{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background-size:cover;

background-position:center center;

background-repeat:no-repeat;

/* IMPORTANTE */

opacity:0;

transition:opacity 2s ease;

filter:
brightness(.35)
contrast(1.1)
saturate(.95);

transform:scale(1.05);

}

.market-image.active{

opacity:1;

z-index:2;

}

.hero{

position:relative;

min-height:100vh;

overflow:hidden;

}
/* ==================================================
   CAPA OSCURA
================================================== */

.hero::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:

linear-gradient(
180deg,
rgba(4,8,17,.45),
rgba(4,8,17,.95)
);

z-index:2;

}

/* ==================================================
   LINEAS FINANCIERAS
================================================== */

.market-lines{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

overflow:hidden;

z-index:3;

}

.line{

position:absolute;

height:2px;

background:

linear-gradient(
90deg,
transparent,
#2eb85c,
transparent
);

opacity:.25;

animation:lineMove linear infinite;

}

.line:nth-child(1){

top:25%;

width:800px;

animation-duration:12s;

}

.line:nth-child(2){

top:50%;

width:1000px;

animation-duration:18s;

}

.line:nth-child(3){

top:72%;

width:700px;

animation-duration:10s;

}

@keyframes lineMove{

from{
transform:translateX(-150%);
}

to{
transform:translateX(250%);
}

}

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

.hero-content{

position:relative;

z-index:5;

max-width:1200px;

padding:0 25px;

text-align:center;

}

.badge{

display:inline-flex;

align-items:center;
justify-content:center;

padding:12px 24px;

border-radius:999px;

background:rgba(46,184,92,.12);

border:1px solid rgba(46,184,92,.25);

color:#55db81;

font-size:12px;

font-weight:800;

letter-spacing:1px;

margin-bottom:25px;

}

.hero h1{

font-size:82px;

font-weight:900;

line-height:1.05;

margin-bottom:25px;

}

.hero p{

font-size:22px;

line-height:1.8;

color:#b8c4d5;

max-width:900px;

margin:auto;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn-primary{

height:58px;

padding:0 35px;

display:flex;

align-items:center;
justify-content:center;

background:#2eb85c;

border-radius:14px;

text-decoration:none;

color:white;

font-weight:700;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

height:58px;

padding:0 35px;

display:flex;

align-items:center;
justify-content:center;

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

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

border-radius:14px;

text-decoration:none;

color:white;

font-weight:700;

}

/* ==================================================
   ESTADISTICAS
================================================== */

.stats{

max-width:1400px;

margin:auto;

padding:100px 25px;

display:grid;

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

gap:25px;

}

.stat-card{

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

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

padding:35px;

border-radius:24px;

text-align:center;

}

.stat-card h2{

font-size:40px;

color:#2eb85c;

margin-bottom:10px;

}

.stat-card span{

color:#b4c1d3;

}

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

.section{

padding:120px 25px;

max-width:1400px;

margin:auto;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:block;

font-size:12px;

font-weight:800;

letter-spacing:2px;

color:#2eb85c;

margin-bottom:15px;

}

.section-title h2{

font-size:54px;

line-height:1.2;

}

.content-grid{

display:grid;

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

gap:25px;

}

.content-card{

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

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

padding:35px;

border-radius:24px;

}

.content-card h3{

font-size:22px;

margin-bottom:15px;

}

.content-card p{

color:#b5c1d1;

line-height:1.8;

}

.dark{

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

border-radius:30px;

}

/* ==================================================
   ECOSISTEMA
================================================== */

.ecosystem{

display:flex;

align-items:center;
justify-content:center;

gap:30px;

flex-wrap:wrap;

}

.ecosystem-item{

padding:20px 35px;

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

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

border-radius:16px;

font-weight:700;

}

.ecosystem-arrow{

font-size:34px;

color:#2eb85c;

}

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

.footer{

padding:100px 25px;

text-align:center;

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

background:#03070f;

}

.footer-logo{

height:70px;

margin-bottom:25px;

}

.footer-title{

font-size:24px;

font-weight:800;

letter-spacing:3px;

margin-bottom:12px;

}

.footer-sub{

color:#aebbd0;

margin-bottom:10px;

}

.footer-copy{

margin-top:25px;

font-size:13px;

color:#6e7c8e;

}

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

@media(max-width:1100px){

.content-grid{

grid-template-columns:1fr;

}

.stats{

grid-template-columns:1fr 1fr;

}

.hero h1{

font-size:60px;

}

}

@media(max-width:900px){

.nav{

display:none;

}

.menu-toggle{

display:block;

}

.hero h1{

font-size:48px;

}

.hero p{

font-size:18px;

}

}

@media(max-width:600px){

.hero{

padding-top:180px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

}

.stats{

grid-template-columns:1fr;

}

.section-title h2{

font-size:34px;

}

.footer-logo{

height:55px;

}

}