/* =====================================================
STARFUS SPLASH SCREEN
Pantalla de bienvenida
Versión Carbon Fiber
===================================================== */

#splash-screen{
position:fixed;
inset:0;
z-index:20000;

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

padding:24px;

background:
radial-gradient(circle at 50% 28%,rgba(0,163,255,.20),transparent 30%),
radial-gradient(circle at 75% 70%,rgba(255,106,0,.10),transparent 35%),
linear-gradient(rgba(2,5,12,.82),rgba(2,5,12,.92)),
linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.035) 75%),
linear-gradient(-45deg,rgba(255,255,255,.022) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.022) 75%);

background-size:
auto,
auto,
cover,
8px 8px,
8px 8px;

background-repeat:
no-repeat,
no-repeat,
no-repeat,
repeat,
repeat;

background-position:
center,
center,
center,
0 0,
4px 4px;

opacity:0;
visibility:hidden;
pointer-events:none;

transition:
opacity .7s ease,
visibility .7s ease;
}

#splash-screen.show{
opacity:1;
visibility:visible;
pointer-events:auto;
}

/* Los accesos fijos aparecen recién después de tocar ENTRAR. */
body.splash-active #bcr-widget,
body.splash-active .whatsapp-fixed{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}

/* ========================= */

#splash-content{

width:100%;
max-width:700px;

display:flex;
flex-direction:column;
align-items:center;

text-align:center;
color:#fff;

animation:splashFade .8s ease;
}

.splash-logo{

width:auto;
height:185px;
max-width:390px;

object-fit:contain;

margin-bottom:26px;

filter:
drop-shadow(0 18px 35px rgba(0,0,0,.65))
drop-shadow(0 0 25px rgba(0,163,255,.18));

animation:logoIn .9s ease;
}

#line1{

color:#d7dce9;

font-size:clamp(24px,5vw,40px);
font-weight:700;

margin:0;
}

#line2{

color:#fff;

font-size:clamp(28px,5vw,44px);
font-weight:800;

margin-top:8px;
}

#line2::after{

content:"";

display:block;

width:90px;
height:3px;

margin:20px auto 0;

border-radius:999px;

background:
linear-gradient(
90deg,
transparent,
#00a3ff,
#ff6a00,
transparent
);
}

/* ========================= */

#enter-btn{

margin-top:34px;

min-width:160px;
min-height:50px;

border:none;
border-radius:14px;

cursor:pointer;

color:#180700;
font-size:15px;
font-weight:800;
letter-spacing:.8px;

background:
linear-gradient(
180deg,
#ff913f,
#ff6a00
);

box-shadow:
0 15px 35px rgba(0,0,0,.45),
0 0 25px rgba(255,106,0,.18);

transition:
transform .2s,
box-shadow .2s,
filter .2s;
}

#enter-btn:hover{

transform:translateY(-2px);

filter:brightness(1.08);

box-shadow:
0 18px 40px rgba(0,0,0,.55),
0 0 35px rgba(255,106,0,.30);
}

/* ========================= */

@keyframes splashFade{

from{
opacity:0;
}

to{
opacity:1;
}

}

@keyframes logoIn{

from{
opacity:0;
transform:translateY(-18px) scale(.92);
}

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

}

/* ========================= */

@media(max-width:720px){

.splash-logo{

height:145px;
max-width:82vw;

}

#enter-btn{

min-width:145px;
min-height:46px;

}

}

@media(max-height:620px){

.splash-logo{

height:105px;

}

#line1,
#line2{

font-size:24px;

}

}