/* ============================= */
/* SECCION INICIO */
/* ============================= */

.inicio{

height:100vh;

position:sticky;
top:0;

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

background:url("https://intercharge.com.mx/wp-content/uploads/2025/11/Background1_1.png");
background-size:cover;
background-position:center;

z-index:1;

}

.inicio::after{

content:"";

position:absolute;

bottom:0;
left:0;

width:100%;
height:200px;

background:linear-gradient(
to bottom,
rgba(0,0,0,0),
#1a1828
);

}




/* ============================= */
/* PANEL DE TEXTO */
/* ============================= */

.inicio-panel{

width:600px;

padding:40px;

border-radius:20px;

backdrop-filter:blur(16px);

background:rgba(255,255,255,0.08);

border:1px solid rgba(255,255,255,0.15);

color:white;

text-align:center;

animation:panelFade 1.2s ease;

}


.inicio-panel h1{

font-size:38px;
margin-bottom:15px;

}


.inicio-panel p{

font-size:17px;
line-height:1.6;

}


/* ============================= */
/* ANIMACION PANEL */
/* ============================= */

@keyframes panelFade{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}



/* ============================= */
/* BUSES ELECTRONICOS */
/* ============================= */

.data-bus{

position:absolute;

width:100%;
height:100%;

pointer-events:none;

overflow:hidden;

}


.data-bus::before,
.data-bus::after{

content:"010101010101010101010101010101";

position:absolute;

white-space:nowrap;

font-family:monospace;

font-size:18px;

color:rgba(255,255,255,0.15);

}


.data-bus::before{

top:30%;
animation:dataFlow 18s linear infinite;

}


.data-bus::after{

top:65%;
animation:dataFlowReverse 20s linear infinite;

}


@keyframes dataFlow{

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

to{
transform:translateX(100%);
}

}


@keyframes dataFlowReverse{

from{
transform:translateX(100%);
}

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