*{
-webkit-tap-highlight-color:transparent;
}

*,
*::before,
*::after{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
overflow-x:hidden;
}

body{
font-family:'Orbitron',sans-serif;
background:#000;
color:#fff;
overflow-x:hidden;
min-height:100svh;
min-height:100vh;

position:relative;
text-rendering:auto;
scroll-padding-top:120px;

-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overscroll-behavior-y:auto;
touch-action:auto;
-webkit-overflow-scrolling:touch;

padding-left:env(safe-area-inset-left);

padding-right:env(safe-area-inset-right);
}
:root{

--cyan:#00ffff;
--blue:#008cff;
--purple:#7a00ff;
--pink:#ff00ff;

--bg:#000;
--glass:rgba(255,255,255,.05);

--radius:32px;

--transition:.35s ease;

--shadow-cyan:
0 0 25px rgba(0,255,255,.12);

--shadow-purple:
0 0 60px rgba(122,0,255,.16);

}




img,
canvas,
video{
user-select:none;
-webkit-user-drag:none;
}

canvas{
position:fixed;
inset:0;
width:100%;
height:100%;
pointer-events:none;
}

.section,
.panel-card,
.hero-content{
transform:translateZ(0);
backface-visibility:hidden;
}
.panel-card{
  contain:layout paint;

}
.section{
  contain:layout;
}


::selection{
background:#7a00ff;
color:#fff;
}

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

.space{
position:fixed;
inset:0;
width:100%;
height:100%;
overflow:hidden;
z-index:-999;

background:
radial-gradient(circle at center,#050018 0%,#000 75%);
}

.space::before{
content:"";

position:absolute;
inset:-50%;

background:
radial-gradient(2px 2px at 20% 30%, #fff, transparent),
radial-gradient(2px 2px at 70% 40%, #00ffff, transparent),
radial-gradient(1px 1px at 40% 70%, #ff00ff, transparent),
radial-gradient(2px 2px at 80% 10%, #ffffff, transparent),
radial-gradient(1px 1px at 10% 90%, #00ffff, transparent),
radial-gradient(2px 2px at 90% 70%, #7a00ff, transparent);

opacity:.5;

animation:spaceMove 160s linear infinite;
transform:translateZ(0);
backface-visibility:hidden;

will-change:auto;
}


.content{
position:relative;
z-index:10;

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

margin:auto;

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

gap:150px;




    padding-top:90px;

}


section{
width:100%;
display:flex;
justify-content:center;
}

.section{
width:100%;
max-width:1250px;

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

opacity:0;
transform:translateY(80px);

transition:
opacity .9s ease,
transform .9s ease;

scroll-margin-top:130px;
}

.section.show{
opacity:1;
transform:translateY(0);
}




.header-futuristic{
position:fixed;
top:0;
left:0;
pointer-events: none;
width:100%;

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

padding:
15px
clamp(15px,4vw,50px);

z-index:9999;
}





.logo-container{

position:relative;

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

width:fit-content;
max-width:100%;

margin:auto;

overflow:hidden;

isolation:isolate;

}

.hero{
width:100%;
min-height:100dvh;
min-height:100svh;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;

text-align:center;

position:relative;
}





.hero-content{

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

margin:auto;

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

gap:30px;

position:relative;
z-index:5;
}





.hero h1{

width:100%;

font-size:clamp(2.5rem,7vw,4rem);

line-height:1.05;

font-weight:900;

text-align:center;

margin-inline:auto;

font-family:inherit;

background:
linear-gradient(
90deg,
#00ffff,
#008cff,
#7b00ff,
#ff00ff,
#00ffff
);

background-size:300% 300%;

-webkit-background-clip:text;
background-clip:text;

-webkit-text-fill-color:transparent;

animation:neonFlow 8s linear infinite;

text-shadow:
0 0 8px #0000008c,
0 0 38px #ff00ff66,
0 0 18px #00bfffae,
0 0 28px #9b16d866;
}

@keyframes neonFlow{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}





.hero p{

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

margin:auto;

font-size:clamp(1rem,2vw,1.25rem);

line-height:1.9;

text-align:center;

opacity:.85;
}





.btn{

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

padding:
18px
42px;

border-radius:999px;

background:
linear-gradient(
90deg,
rgba(0,255,255,.12),
rgba(0,140,255,.14),
rgba(122,0,255,.16)
);

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

backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);

color:#fff;

font-size:15px;
font-weight:700;

text-decoration:none;

box-shadow:
0 0 25px rgba(0,255,255,.12),
0 0 70px rgba(122,0,255,.12);

transition:
transform .35s ease,
box-shadow .35s ease,
border .35s ease;
}

.btn:hover{

transform:
translateY(-5px)
scale(1.03);

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

box-shadow:
0 0 20px #00ffff,
0 0 60px #7a00ff,
0 0 40px rgba(255,0,255,.22);
}





.section h2{

position:relative;

font-size:clamp(2rem,5vw,3.5rem);

text-align:center;

margin-bottom:70px;

background:
linear-gradient(
90deg,
#00ffff,
#008cff,
#7a00ff,
#ff00ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.section h2::after{

content:"";

position:absolute;

left:50%;
bottom:-18px;

transform:translateX(-50%);

width:140px;
height:4px;

border-radius:999px;

background:
linear-gradient(
90deg,
transparent,
#00ffff,
#7a00ff,
transparent
);

box-shadow:
0 0 20px #00ffff;
}













.cards-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(min(320px,100%),1fr));

}


.panel-card{

position:relative;

display:flex;
flex-direction:column;
justify-content:flex-start;


padding:clamp(22px,3vw,35px);
min-height:260px;

border-radius:32px;

overflow:hidden;

background:
linear-gradient(
180deg,
rgba(255,255,255,.06),
rgba(255,255,255,.02)
);

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

backdrop-filter:blur(10px);

transition:
transform .4s ease,
box-shadow .4s ease,
border .4s ease;
}



.panel-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:2px;

background:
linear-gradient(
90deg,
transparent,
#00ffff,
#7a00ff,
transparent
);

opacity:.8;
}



.panel-card::after{

content:"";

position:absolute;

inset:-2px;

border-radius:32px;

background:
linear-gradient(
135deg,
rgba(0,255,255,.12),
transparent,
rgba(255,0,255,.08)
);

opacity:0;

transition:.4s;

pointer-events:none;
}

.panel-card:hover::after{
opacity:1;
}

.panel-card:hover{

transform:
translateY(-12px)
scale(1.02);

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

box-shadow:
0 0 30px rgba(0,255,255,.12),
0 0 90px rgba(122,0,255,.18);
}



.panel-card h3{

font-size:1.45rem;

margin-bottom:18px;

line-height:1.4;

text-align:center;

background:
linear-gradient(
90deg,
#00ffff,
#7a00ff,
#ff00ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}



.panel-card p{

font-size:.98rem;

line-height:1.9;

opacity:.82;

text-align:center;
}




.galaxy{

position:absolute;

top:50%;
left:50%;

width:min(70vw,700px);
height:min(70vw,700px);

transform:
translate(-50%,-50%)
rotateX(65deg)
rotateZ(-15deg);

animation:floatGalaxy 25s ease-in-out infinite alternate;

opacity:.7;

pointer-events:none;
}

.core{

position:absolute;

top:50%;
left:50%;

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

width:90px;
height:90px;

border-radius:50%;

background:#000;

box-shadow:
0 0 40px #4d00ff,
0 0 120px #001aff,
0 0 200px #000;
}





.planet{

position:absolute;

width:clamp(90px,15vw,240px);

border-radius:50%;

opacity:.9;

transition:
transform .4s ease,
filter .4s ease;
}

.planet img{
width:100%;
display:block;
border-radius:50%;
}

.planet:hover{

transform:scale(1.08);

filter:
drop-shadow(0 0 20px #00ffff)
drop-shadow(0 0 40px #7a00ff);
}




.spaceship{
    position:fixed;
    left:-400px;
    top:-400px;

    width:clamp(120px,12vw,280px);

    opacity:0;

    z-index:999998;
    pointer-events:none;

    will-change:transform,opacity;
    transform:translate3d(0,0,0);

    backface-visibility:hidden;

    contain:layout style paint;
    isolation:isolate;

    filter:
        drop-shadow(0 0 10px rgba(0,255,255,.4))
        drop-shadow(0 0 20px rgba(0,180,255,.3));
}


.spaceship img{
width:100%;
display:block;
}

@keyframes spaceshipFloat{

0%{
transform:
translateX(-250px)
translateY(120px);
}

100%{
transform:
translateX(calc(100vw + 250px))
translateY(-80px);
}

}



.astronaut{

position:fixed;

width:70px;

z-index:45;

pointer-events:none;

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


}

.astronaut img{
width:100%;
display:block;
}





.footer{

width:100%;

padding:50px 20px;

text-align:center;

opacity:.65;
}






.mobile-menu{


position:fixed;


isolation:isolate;
top:0;




width:min(88%,380px);
height:100vh;


padding:
120px
25px
40px;


display:flex;
flex-direction:column;


gap:18px;









background:








linear-gradient(








90deg,








#000000,








#0022706f,
#000000,
#2c004688,








#000000


);
backdrop-filter:blur(-10px);


border-right:
1px solid rgba(22, 0, 53, 0.18);








z-index:99999;
left:0;


transform:translateX(-100%);


transition:
transform .55s cubic-bezier(.77,0,.18,1),
opacity .4s ease;


overflow-y:auto;
}




































.mobile-menu.show{


transform:translateX(0);


opacity:1;


}






.mobile-menu a{


display:flex;
align-items:center;


padding:18px 20px;


border-radius:5px;


text-decoration:none;


color:#ffffff;


font-size:17px;
font-weight:700;
background:
linear-gradient(
180deg,
rgba(39, 0, 56, 0.495),
rgba(38, 0, 109, 0.581),


rgba(0, 0, 0, 0.375),
rgba(34, 0, 92, 0.637),


rgba(0, 0, 0, 0.96)
);










transition:
transform .35s ease,
box-shadow .35s ease,

}


.mobile-menu a:hover{


transform:translateX(8px);
background:
linear-gradient(
180deg,
rgba(39, 0, 56, 0.199),
rgba(38, 0, 109, 0.132),




rgba(255, 255, 255, 0.96),
rgba(34, 0, 92, 0.225),




rgba(0, 0, 0, 0.253)
);
color: rgb(25, 0, 62);








}







.menu-close{


position:absolute;


top:22px;
right:25px;


font-size:30px;


cursor:pointer;


color:#ffffff;


transition:.3s;
}


.menu-close:hover{


transform:
rotate(90deg)
scale(1.1);


color:#560180ce;
text-shadow: #c200c9 3px 3px 3px;
}






.menu-overlay{


position:fixed;
inset:0;


background:rgba(0,0,0,.6);


backdrop-filter:blur(5px);


opacity:0;


pointer-events:none;


transition:.4s;


z-index:9000;
}


.menu-overlay.show{
opacity:1;
pointer-events:auto;
}





































.swipe-indicator{


position:fixed;

left:-32px;

top:50%;

transform:translateY(-50%);

z-index:4000;

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

pointer-events:none;

}





.cyber-arrow{

position:relative;

width:92px;
height:92px;

border:none;
background:transparent;

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

animation:
swipeFloat 5s ease-in-out infinite;

opacity:.82;

}






.arrow-shell::after{

content:"";

position:absolute;
inset:0;

background:

repeating-linear-gradient(
90deg,
transparent 0 8px,
rgba(255,255,255,.03) 8px 9px
);

opacity:.35;

mix-blend-mode:screen;

}





.arrow-group{

position:absolute;

display:flex;
flex-direction:row;

align-items:center;

gap:0;

z-index:5;

}

.arrow-group span{

width:26px;
height:26px;

border-top:5px solid #5bd6ff;
border-right:5px solid #5bd6ff;

transform:rotate(45deg);

margin-left:-10px;

opacity:.22;

filter:

drop-shadow(0 0 6px #00ffff)
drop-shadow(0 0 12px #bb00ff)
drop-shadow(0 0 22px #eb35ff);

animation:arrowPulse 1.4s infinite;

}

.arrow-group span:nth-child(1){
animation-delay:0s;
}

.arrow-group span:nth-child(2){
animation-delay:.2s;
}

.arrow-group span:nth-child(3){
animation-delay:.4s;
}




.swipe-text{

position:absolute;

z-index:10;

font-size:.72rem;

font-weight:800;

letter-spacing:.22em;

color:#dffcff;

text-transform:uppercase;

text-shadow:

0 0 6px #00ffff,
0 0 18px #7a00ff,
0 0 32px #3cbbff;

animation:textGlow 2.5s ease-in-out infinite;

}




.cyber-arrow:hover{

transform:
scale(1.08)
rotateY(8deg);

filter:

drop-shadow(0 0 12px #00ffff)
drop-shadow(0 0 32px #7a00ff);

}





@keyframes arrowPulse{

0%{

opacity:.18;

transform:
rotate(45deg)
translate(-8px,8px)
scale(.92);

}

50%{

opacity:1;

transform:
rotate(45deg)
translate(0,0)
scale(1);

}

100%{

opacity:.18;

transform:
rotate(45deg)
translate(8px,-8px)
scale(.92);

}

}



@keyframes swipeFloat{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0px);
}

}

@keyframes textGlow{

0%{

opacity:.7;

filter:
brightness(1);

}

50%{

opacity:1;

filter:
brightness(1.5);

}

100%{

opacity:.7;

filter:
brightness(1);

}

}





img,
video,
canvas,
iframe{
max-width:100%;
display:block;
}

.section,
.cards-grid,
.panel-card,
.hero-content{
min-width:0;
}

h1,
h2,
h3,
p,
a{
word-wrap:break-word;
overflow-wrap:break-word;
}





body.menu-active::before{

content:"";

position:fixed;
inset:0;

background:
radial-gradient(
circle at center,
rgba(0,255,255,.12),
rgba(122,0,255,.15),
transparent 70%
);

z-index:8000;

pointer-events:none;

animation:menuPulse .8s ease;
}

@keyframes menuPulse{

0%{
opacity:0;
transform:scale(.8);
}

50%{
opacity:1;
transform:scale(1);
}

100%{
opacity:0;
transform:scale(1.2);
}

}









@media(prefers-reduced-motion:reduce){

*{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition:none !important;
scroll-behavior:auto !important;
}

}



.header-futuristic{

transition:
transform .7s ease,
opacity .7s ease,
filter .7s ease;

will-change:auto;

}

/* estado scroll */

.header-futuristic.hide-logo{

transform:
translateY(-120px)
scale(.35)
rotateX(70deg)
rotateY(-15deg);

opacity:0;




pointer-events:none;

transition:
transform 1s cubic-bezier(.19,1,.22,1),
opacity .9s ease,
filter 1s ease;

}



.floating-mini-logo{

position:fixed;

top:18px;
left:22px;

width:74px;
height:74px;

z-index:999999;

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

border-radius:22px;

opacity:0;

transform:
translateY(-30px)
scale(.5)
rotate(-10deg);

transition:
transform .9s cubic-bezier(.19,1,.22,1),
opacity .9s ease;

pointer-events:none;

overflow:hidden;
}



















.floating-mini-logo.show{

opacity:1;

transform:
translateY(0)
scale(1)
rotate(0deg);

}

/* imagen */

.floating-mini-logo img{

position:relative;

width:72%;
z-index:2;




animation:miniFloat 4s ease-in-out infinite;
}



@keyframes miniFloat{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-4px);
}

100%{
transform:translateY(0);
}

}


@keyframes miniLogoSpin{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}







.hero-title{

  transform-style: preserve-3d;
position:relative;
width:100%;
max-width:1800px;

margin:auto;

padding-inline:clamp(10px,3vw,40px);

min-height:340px;

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

perspective:none;

overflow:visible;

}


/* =========================================================
TITLE LINE
========================================================= */

.title-line{
  transform-style: preserve-3d;
 /* backface-visibility: visible;*/
position:absolute;

left:50%;
top:50%;

  transform:
  translate3d(-50%,-50%,0)
  rotateX(65deg);





width:100%;

max-width:min(1700px,95vw);

padding-inline:clamp(4px,2vw,24px);

text-align:center;

font-family:'Orbitron',sans-serif;

font-size:clamp(1.2rem,6vw,5rem);

line-height:1.12;

font-weight:900;

letter-spacing:.03em;
display:block;

/*display:flex;*/

flex-wrap:wrap;
/*
justify-content:center;
align-items:center;
*/
column-gap:.16em;
row-gap:.16em;

pointer-events:none;

opacity:0;

visibility:hidden;

z-index:20;
overflow:visible;
isolation:isolate;
contain:none;

-webkit-font-smoothing:antialiased;
text-rendering:geometricPrecision;
text-shadow:
0 0 2px rgb(0, 0, 0),
0 0 6px rgba(0, 141, 180, 0.649),
0 0 30px rgb(124, 6, 174);
animation:
magicGradient 5s linear infinite,
/*electricPulse 7s ease-in-out infinite;*/



}


/* =========================================================
ACTIVE
========================================================= */

.title-line.active{
animation:none;
opacity:.7;
/*opacity:1;*/
visibility:visible;

transform:
translate(-50%,-50%)
scale(.96)
rotateX(0deg);

}


/* =========================================================
EXIT
========================================================= */

.title-line.exit{

opacity:0 !important;

visibility:hidden !important;

pointer-events:none !important;

transform:
translate(-50%,-160px)
scale(1.12)
rotateX(-70deg);
/*
filter:
brightness(1.4);
*/
}






.title-line::before{


content:"";

position:absolute;


width:140%;
height:180%;

top:-20%;
left:-20%;
/*
width: min(220%, 1400px);
height: min(300%, 900px);
top:-65%;
left:-35%;*/
    /*width:170%;
    height:240%;*/

    transform: translateZ(0);






/*inset:auto;*/
pointer-events:none;

z-index:80;
overflow:visible;

opacity:0;

/*mix-blend-mode:normal;*/


background-size:100% 100%;


background-repeat:no-repeat;
background-position:center;

/*transform: translate3d(0,0,0) scale(1.1);*/
backface-visibility:visible;


  
will-change:auto;
background-image:
url("../imgs/rayos-electricos.svg");

/*isolation: auto;*/


filter:
brightness(2.2)
drop-shadow(0 0 6px #ffffff)
drop-shadow(0 0 12px #73b7ff)
drop-shadow(0 0 20px #5b8cff);

}





.title-line.active::before{
  /*
animation:none;
opacity:.7;
*/

animation:
logoStorm 2.5s infinite linear,
logoElectricMove 8s infinite ease-in-out;


}






.title-line .letter{

display:inline-block;
/*display:inline;*/

opacity:0;

transform:
translateX(var(--x))
translateY(var(--y))
rotate(var(--r))
scale(.2);

filter:none;

position:relative;

z-index:25;

animation:
letterAssemble 1.2s cubic-bezier(.19,1,.22,1) forwards;

backface-visibility:hidden;

will-change:auto;

}




.title-line .space{

width:.35em;
height:1px;
opacity:0;

}






@keyframes letterAssemble{

0%{

opacity:0;

transform:
translateX(var(--x))
translateY(var(--y))
rotate(var(--r))
scale(.1);

}

50%{

opacity:1;

}

100%{

opacity:1;

transform:
translateX(0)
translateY(0)
rotate(0deg)
scale(1);

}

}






@keyframes electricMove{

0%{

background-position:

2% 0%,
98% 0%,
50% -4%,
2% 52%,
98% 52%,
10% 100%,
90% 100%;

transform:
translate3d(0,0,0)
scale(.98);

}

25%{

background-position:

4% 4%,
96% 2%,
48% 2%,
4% 56%,
96% 46%,
14% 96%,
86% 98%;

transform:
translate3d(1px,-1px,0)
scale(1);

}

50%{

background-position:

0% 8%,
100% 6%,
52% 4%,
0% 46%,
100% 58%,
8% 92%,
92% 100%;

transform:
translate3d(-1px,1px,0)
scale(.96);

}

75%{

background-position:

6% -2%,
94% 8%,
48% -2%,
2% 48%,
98% 50%,
16% 100%,
84% 94%;

transform:
translate3d(1px,0,0)
scale(1);

}

100%{

background-position:

2% 0%,
98% 0%,
50% -4%,
2% 52%,
98% 52%,
10% 100%,
90% 100%;

transform:
translate3d(0,0,0)
scale(.98);

}

}

@keyframes stormUltra{

0%{
opacity:0;
}

2%{
opacity:1;
}

3%{
opacity:.08;
}

4%{
opacity:1;
}

6%{
opacity:.04;
}

7%{
opacity:1;
}

10%{
opacity:0;
}

/* SEGUNDA DESCARGA */

26%{
opacity:0;
}

27%{
opacity:1;
}

28%{
opacity:.05;
}

29%{
opacity:1;
}

31%{
opacity:0;
}

/* FLASH FUERTE */

52%{
opacity:0;
}

53%{
opacity:1;
}

54%{
opacity:.08;
}

55%{
opacity:1;
}

56%{
opacity:.03;
}

57%{
opacity:1;
}

59%{
opacity:0;
}

/* FINAL */

82%{
opacity:0;
}

83%{
opacity:1;
}

84%{
opacity:.05;
}

85%{
opacity:1;
}

86%{
opacity:0;
}

100%{
opacity:0;
}

}




@keyframes magicGradient{

0%{
background-position:0% 50%;
}

25%{
background-position:120% 50%;
}

50%{
background-position:260% 50%;
}

75%{
background-position:420% 50%;
}

100%{
background-position:700% 50%;
}

}


/*
.title-line,
.title-line::before,
.title-line .letter{

will-change:auto;

}*/








.hero,
.hero-content,
.hero-title,
.title-line{

overflow:visible;

}

.title-line,
.title-line.active,
.title-line .letter{

transform-style:preserve-3d;

backface-visibility:hidden;

}

.title-line{

hyphens:none;

}

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

.hero-title{
position:relative;
overflow:visible;
}





.logo-container{

position:relative;

overflow:visible;

isolation:isolate;

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

transform-style:preserve-3d;

transform:translateZ(0);

}






.logo-container::before{

content:"";

position:absolute;

top:-35%;
left:-22%;

width:144%;
height:175%;

pointer-events:none;

z-index:15;

opacity:0;

mix-blend-mode:screen;



transform:
translate3d(0,0,0)
scale(.96);

backface-visibility:hidden;
will-change:auto;







background-image:
url("../imgs/rayos-electricos.svg");




filter:
drop-shadow(0 0 8px #8c5cff)
drop-shadow(0 0 18px #3c97ff);

/* =========================================================
ANIMACIONES PREMIUM
========================================================= */


animation:

logoStorm 2.5s infinite linear,
logoElectricMove 8s infinite ease-in-out;

}






.logo-container::after{

content:"";

position:absolute;

inset:-15%;

pointer-events:none;

z-index:8;

opacity:0;

/*mix-blend-mode:screen;*/
/*mix-blend-mode:color-dodge;*/
opacity:.5;
border-radius:50%;


animation:
logoFlash 5s infinite linear;

}








@keyframes logoElectricMove{

0%,100%{
transform:scale(.98);
}

50%{
transform:scale(1);
}

}







@keyframes logoStorm{

0%{
opacity:0;
}

1%{
opacity:1;
}

2%{
opacity:.08;
}

3%{
opacity:1;
}

5%{
opacity:.04;
}

6%{
opacity:1;
}

8%{
opacity:.1;
}

9%{
opacity:1;
}

13%{
opacity:.06;
}

14%{
opacity:1;
}

18%{
opacity:.5;
}

19%{
opacity:1;
}

23%{
opacity:.25;
}

24%{
opacity:1;
}

28%{
opacity:0;
}

100%{
opacity:0;
}

}


/* =========================================================
AURA FLASH
========================================================= */

@keyframes logoFlash{

0%{
opacity:0;
transform:scale(.7);
}

2%{
opacity:.45;
}

4%{
opacity:.08;
}

6%{
opacity:.4;
}

9%{
opacity:.12;
}

14%{
opacity:.35;
}

18%{
opacity:.1;
}

22%{
opacity:.25;
}

28%{
opacity:0;
transform:scale(1.2);
}

100%{
opacity:0;
}

}
















@media (max-width:1200px){


    .content{
        gap:120px;
    }


    .hero h1{
        font-size:clamp(2.3rem,7vw,5rem);
    }


}






/* =========================================================
TABLET
========================================================= */


@media (max-width:992px){


    .hero{
        min-height:90vh;
    }


    .galaxy{
        width:520px;
        height:520px;
    }


    .panel-card{
        padding:30px;
    }


}




@media (max-width:850px){

.cards-grid{

grid-template-columns:1fr;

}

}






@media (max-width:768px){

    /* ======================
       CONTENEDOR
    ====================== */

    .content{
        padding-inline:22px;
        gap:95px;
    }

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

    .hero{
        min-height:84vh;
    }

    .hero-content{
        gap:35px;
    }

    .hero h1{
        font-size:clamp(2.2rem,6vw,3.4rem);
    }

    .hero p{
        max-width:90%;
        font-size:1rem;
        line-height:1.8;
    }

    /* ======================
       LOGO
    ====================== */
.logo-container{


transform:none;


margin-top:
clamp(-120px,-12vw,-40px);


}


   
   
   

    .logo-container img{
        width:92vw;
        max-width:760px;
    }

    /* ======================
       FRASE
    ====================== */

    .hero-title{
        min-height:320px;
    }

    .title-line{
        max-width:92vw;
        font-size:clamp(2.2rem,7vw,4rem);
        line-height:1.08;
    }

    /* ======================
       TARJETAS
    ====================== */

    .cards-grid{
        gap:28px;
    }

    .panel-card{
        padding:26px;
        border-radius:24px;
    }

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

    .btn{
        padding:16px 24px;
        font-size:.95rem;
    }

    /* ======================
       UNIVERSO
    ====================== */

    .galaxy{
        width:400px;
        height:400px;
        opacity:.55;
    }

    .planet{
        width:100px;
    }

    .spaceship{
        width:145px;
        opacity:.85;
    }

    .astronaut{
        width:50px;
    }

    /* ======================
       SWIPE
    ====================== */

    .swipe-indicator{
        left:18px;
    }

}





/* =========================================================
SMALL MOBILE
0px -> 480px
========================================================= */

@media (max-width:480px){

    .content{
        padding-inline:14px;
        gap:75px;
    }

    .hero{
        min-height:78vh;
    }

    .hero h1{
        font-size:2rem;
    }

    .hero p{
        font-size:.9rem;
        line-height:1.75;
    }

    .section h2{
        font-size:1.8rem;
    }

    .panel-card{
        padding:22px;
        border-radius:22px;

        backdrop-filter:none;
        -webkit-backdrop-filter:none;

        background:rgba(15,15,25,.82);
    }

    .panel-card h3{
        font-size:1.05rem;
    }

    .btn{
        padding:15px 20px;
        font-size:14px;

        backdrop-filter:none;
        -webkit-backdrop-filter:none;

        background:rgba(15,15,25,.82);
    }

    .galaxy{
        width:280px;
        height:280px;
        opacity:.45;
    }

    .planet{
        width:80px;
        opacity:.55;
    }

    .spaceship{
        display:block;
        width:120px;
        opacity:.8;
    }

    .astronaut{
        display:block;
        width:42px;
        opacity:.8;
        z-index:50;
    }

    .swipe-indicator{
        left:10px;
        opacity:.9;
    }

    .cyber-arrow{
        width:62px;
        height:62px;
    }

    .arrow-group{
        flex-direction:column;
        gap:2px;
    }

    .arrow-group span{
        width:15px;
        height:15px;

        border-top:3px solid #5bd6ff;
        border-right:3px solid #5bd6ff;

        margin-left:0;
    }

    .swipe-text{
        font-size:.46rem;
        display:none;
    }

    .mobile-menu{




background:
















linear-gradient(
















90deg,
















#000000,
















#0022706f,
#000000,
#2c004688,
















#000000




);
backdrop-filter:blur(-10px);




    }



















    .hero-title{
        min-height:280px;
    }

    .title-line{

        max-width:95vw;

        font-size:clamp(1.8rem,9vw,3rem);

        line-height:1.05;

        color:#fff;

        background:none;

        -webkit-background-clip:initial;
        -webkit-text-fill-color:#fff;

        -webkit-text-stroke:1px rgb(100,3,185);

        text-shadow:
        0 0 4px rgba(246,80,255,.62);

    }

    .title-line::before{

        top:-55%;
        left:-35%;

        width:190%;
        height:240%;

        background-size:contain;

        filter:
        brightness(3)
        drop-shadow(0 0 12px #fff)
        drop-shadow(0 0 24px #73b7ff)
        drop-shadow(0 0 40px #5b8cff)
        drop-shadow(0 0 70px #7d3cff);

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










.logo-container{

transform:none;

margin-top:
clamp(-120px,-12vw,-40px);

}




/*
 .logo-container{
     transform:translateY(-250px);
     
 }*/
 .logo-container img{
     width:78vw;
     max-width:480px;
     
 }
 .logo-container::before{
     top:90%;
     left:-18%;
     width:140%;
     height:250%;
     opacity:.95;
     filter:
         brightness(2.8)
         drop-shadow(0 0 10px #ffffff)
         drop-shadow(0 0 20px #73b7ff)
         drop-shadow(0 0 35px #5b8cff)
         drop-shadow(0 0 55px #7d3cff);
 }
 .logo-container::after{
     inset:-10%;
     opacity:.75;
 }
 .hero-title{
     min-height:320px;
     margin-top:-10px;
 }










}


/* =========================================================
EXTRA SMALL DEVICES
341px -> 380px
========================================================= */


@media (max-width:380px){

.logo-container{


transform:none;


margin-top:
clamp(-120px,-12vw,-40px);


}


    .hero h1{
        font-size:1.6rem;
        line-height:1.2;
    }


    .hero p{
        font-size:.82rem;
    }


    .section h2{
        font-size:1.5rem;
    }


    .btn{
        font-size:13px;
        padding:14px 18px;
    }


    .panel-card{
        padding:18px;
    }


    .panel-card h3{
        font-size:1.05rem;
    }

.logo-container{


transform:none;


margin-top:
clamp(-120px,-12vw,-40px);


}








/*
 .logo-container{
     transform:translateY(-250px);
     
 }*/
 .logo-container img{
     width:78vw;
     max-width:480px;
     
 }
 .logo-container::before{
     top:90%;
     left:-18%;
     width:140%;
     height:250%;
     opacity:.95;
     filter:
         brightness(2.8)
         drop-shadow(0 0 10px #ffffff)
         drop-shadow(0 0 20px #73b7ff)
         drop-shadow(0 0 35px #5b8cff)
         drop-shadow(0 0 55px #7d3cff);
 }
 .logo-container::after{
     inset:-10%;
     opacity:.75;
 }
 .hero-title{
     min-height:320px;
     margin-top:-10px;
 }




















}




 


/* =========================================================
MINI DEVICES
0px -> 340px
========================================================= */


@media (max-width:340px){










    .hero h1{
        font-size:1.7rem;
    }


    .section h2{
        font-size:1.5rem;
    }


    .mobile-menu{
       /* backdrop-filter:none;
        -webkit-backdrop-filter:none;*/


        background:linear-gradient(
            180deg,
            rgba(0,0,0,.98),
            rgba(10,0,30,.98),
            rgba(0,15,40,.98)
        );
    }

 
 
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 .logo-container{




transform:none;




margin-top:
clamp(-120px,-12vw,-40px);




}
















/*
 .logo-container{
     transform:translateY(-250px);
     
 }*/
 .logo-container img{
     width:78vw;
     max-width:480px;
     
 }
 .logo-container::before{
     top:90%;
     left:-18%;
     width:140%;
     height:250%;
     opacity:.95;
     filter:
         brightness(2.8)
         drop-shadow(0 0 10px #ffffff)
         drop-shadow(0 0 20px #73b7ff)
         drop-shadow(0 0 35px #5b8cff)
         drop-shadow(0 0 55px #7d3cff);
 }
 .logo-container::after{
     inset:-10%;
     opacity:.75;
 }
 .hero-title{
     min-height:320px;
     margin-top:-10px;
 }


 
 
 
 
 
 
 
 
 
 
 
 
 
}




/* =========================================================
MOBILE (481px - 768px)
========================================================= */

@media (min-width:481px) and (max-width:649px){

    /* =======================
       LOGO
    ======================= */
.logo-container{

transform:none;

margin-top:
clamp(-160px,-12vw,-40px);


}



 .logo-container img{
     width:78vw;
     max-width:480px;
     
 }
 .logo-container::before{
     top:90%;
     left:-18%;
     width:140%;
     height:250%;
     opacity:.95;
     filter:
         brightness(2.8)
         drop-shadow(0 0 10px #ffffff)
         drop-shadow(0 0 20px #73b7ff)
         drop-shadow(0 0 35px #5b8cff)
         drop-shadow(0 0 55px #7d3cff);
 }
 .logo-container::after{
     inset:-10%;
     opacity:.75;
 }
 .hero-title{
     min-height:320px;
     margin-top:-10px;
 }





















   
   

   
   
   
   
   
   

   
   
   

   

    .logo-container::after{
        inset:-12%;
        opacity:.75;
    }

    /* =======================
       FRASE
    ======================= */

    .hero-title{
        min-height:300px;
    }

    .title-line{
        max-width:92vw;
        font-size:clamp(2.2rem,7vw,4rem);
        line-height:1.08;
    }

    .title-line::before{

        top:-32%;
        left:-16%;

        width:132%;
        height:170%;

        opacity:.95;

        background-position:center;
        background-repeat:no-repeat;
        background-size:100% 100%;

        filter:
        brightness(2.8)
        drop-shadow(0 0 10px #ffffff)
        drop-shadow(0 0 20px #73b7ff)
        drop-shadow(0 0 35px #5b8cff)
        drop-shadow(0 0 55px #7d3cff);

        animation:
        logoStorm 2.5s linear infinite,
        logoElectricMove 8s ease-in-out infinite;

    }

    .title-line.active::before{

        animation:
        logoStorm 2.5s linear infinite,
        logoElectricMove 8s ease-in-out infinite;

        animation-fill-mode:both;

    }

    /* =======================
       OPTIMIZACIÓN
    ======================= */

    .title-line::before,
    .logo-container::before,
    .logo-container::after{
        mix-blend-mode:normal;
        transform:translateZ(0);
    }

}

/* =========================================================
TABLET GRANDE (650px -> 768px)
========================================================= */

@media (min-width:650px) and (max-width:768px){


    .logo-container{


transform:none;


margin-top:
clamp(-120px,-12vw,-40px);




}






 .logo-container img{
     width:78vw;
     max-width:480px;
     
 }
 .logo-container::before{
     top:90%;
     left:-18%;
     width:140%;
     height:250%;
     opacity:.95;
     filter:
         brightness(2.8)
         drop-shadow(0 0 10px #ffffff)
         drop-shadow(0 0 20px #73b7ff)
         drop-shadow(0 0 35px #5b8cff)
         drop-shadow(0 0 55px #7d3cff);
 }
 .logo-container::after{
     inset:-10%;
     opacity:.75;
 }
 .hero-title{
     min-height:320px;
     margin-top:-10px;
 }






}


/* =========================================================
TABLET (769px -> 999px)
========================================================= */

@media (min-width:769px) and (max-width:1023px){

    .logo-container{


transform:none;


margin-top:
clamp(-100px,-12vw,-40px);




}






 .logo-container img{
     width:78vw;
     max-width:480px;
     
 }
 .logo-container::before{
     top:50%;
     left:-18%;
     width:140%;
     height:250%;
     opacity:.95;
     filter:
         brightness(2.8)
         drop-shadow(0 0 10px #ffffff)
         drop-shadow(0 0 20px #73b7ff)
         drop-shadow(0 0 35px #5b8cff)
         drop-shadow(0 0 55px #7d3cff);
 }
 .logo-container::after{
     inset:-10%;
     opacity:.75;
 }
 .hero-title{
     min-height:320px;
     margin-top:-10px;
 }
























}

/* =========================================================
PORTÁTILES (1024px -> 1600px)
========================================================= */

@media (min-width:1024px) and (max-width:1600px){

.logo-container{


transform:none;


margin-top:
clamp(-80px,-12vw,-40px);




}






 .logo-container img{
     width:78vw;
     max-width:480px;
     
 }
 .logo-container::before{
     top:40%;
     left:-18%;
     width:140%;
     height:250%;
     opacity:.95;
     filter:
         brightness(2.8)
         drop-shadow(0 0 10px #ffffff)
         drop-shadow(0 0 20px #73b7ff)
         drop-shadow(0 0 35px #5b8cff)
         drop-shadow(0 0 55px #7d3cff);
 }
 .logo-container::after{
     inset:-10%;
     opacity:.75;
 }
 .hero-title{
     min-height:320px;
     margin-top:-10px;
 }






     
}


/* =========================================================
TV FULL HD (1920px+)
========================================================= */

@media (min-width:1920px){

    .content{
        max-width:1800px;
        gap:220px;
    }

    .hero-content{
        max-width:1400px;
    }

    .hero h1{
        font-size:clamp(4rem,5vw,7rem);
    }

    .hero p{
        max-width:1200px;
        font-size:1.6rem;
    }

    .section h2{
        font-size:5rem;
    }

    .cards-grid{
        grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
        gap:50px;
    }

    .panel-card{
        padding:50px;
        min-height:320px;
    }

    .panel-card h3{
        font-size:2rem;
    }

    .panel-card p{
        font-size:1.2rem;
    }

    .btn{
        font-size:1.2rem;
        padding:24px 60px;
    }

    .logo-container img{
        width:900px;
    }

    .spaceship{
        width:220px;
    }

    .astronaut{
        width:90px;
    }

    .swipe-indicator{
        transform:translateY(-50%) scale(1.4);
    }
}


/* =========================================================
TV PREMIUM (2200px+)
========================================================= */

@media (min-width:2200px){

    html{
        font-size:1.15rem;
    }

    .content{
        max-width:2400px;
        padding-top:180px;
        gap:260px;
    }

    .hero{
        min-height:100vh;
    }

    .hero-content{
        max-width:1800px;
        gap:50px;
    }
}

/* =========================================================
ULTRA TV / 4K / 8K / 80"
2500px+
OPTIMIZADO PREMIUM
========================================================= */

@media (min-width:2500px){

    html{
        font-size:1.15rem;
    }

    /* ======================
       CONTENIDO
    ====================== */

    .content{
        max-width:2400px;
        padding-top:180px;
        padding-inline:90px;
        gap:220px;
    }

    .hero{
        min-height:100vh;
    }

    .hero-content{
        max-width:1800px;
        gap:55px;
    }

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

    .logo-container{
        transform:translateY(-70px);
    }

    .logo-container img{
        width:820px;
        max-width:100%;
    }

    .logo-container::before{

        top:-28%;
        left:-14%;

        width:128%;
        height:158%;

        filter:
            brightness(2.7)
            drop-shadow(0 0 14px #73b7ff)
            drop-shadow(0 0 34px #7d3cff);

    }

    /* ======================
       FRASE
    ====================== */

    .hero-title{
        min-height:620px;
    }

    .title-line{

        max-width:1700px;

        font-size:clamp(4.3rem,2.8vw,6rem);

        line-height:1.05;

    }

    .title-line::before{

        top:-72%;
        left:-36%;

        width:170%;
        height:235%;

        background-size:contain;

        filter:
            brightness(2.8)
            drop-shadow(0 0 16px #73b7ff)
            drop-shadow(0 0 34px #7d3cff);

    }

    /* ======================
       UNIVERSO
    ====================== */

    .galaxy{

        width:620px;
        height:620px;

        opacity:.55;

    }

    .core{

        width:90px;
        height:90px;

    }

    .planet{

        width:105px;

    }

    .spaceship{

        width:180px;

        opacity:.9;

    }

    .astronaut{

        width:72px;

    }

    /* ======================
       TEXTOS
    ====================== */

    .hero p{

        max-width:1100px;

        font-size:1.45rem;

        line-height:1.9;

    }

    .section h2{

        font-size:4.5rem;

        margin-bottom:80px;

    }

    /* ======================
       TARJETAS
    ====================== */

    .cards-grid{

        grid-template-columns:repeat(auto-fit,minmax(430px,1fr));

        gap:45px;

    }

    .panel-card{

        min-height:320px;

        padding:48px;

        border-radius:34px;

    }

    .panel-card h3{

        font-size:2rem;

    }

    .panel-card p{

        font-size:1.15rem;

        line-height:1.8;

    }

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

    .btn{

        font-size:1.15rem;

        padding:22px 58px;

    }

    /* ======================
       MENÚ
    ====================== */

    .mobile-menu{

        width:420px;

        padding-top:150px;

    }

    .mobile-menu a{

        padding:22px;

        font-size:1.2rem;

    }

    /* ======================
       SWIPE
    ====================== */

    .swipe-indicator{

        transform:translateY(-50%) scale(1.55);

    }

}

/* =========================================================
TV 4K PREMIUM
3000px+
Optimizado para televisores 4K
========================================================= */

@media (min-width:3000px){

    html{
        font-size:1.28rem;
    }

    /* ======================
       CONTENEDOR
    ====================== */

    .content{
        max-width:2600px;
        padding-inline:90px;
        gap:220px;
    }

    .hero-content{
        max-width:2100px;
    }

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

    .hero{
        min-height:100vh;
    }

    .hero h1{
        font-size:clamp(5rem,4vw,6.8rem);
    }

    .hero p{
        max-width:1450px;
        font-size:1.9rem;
        line-height:1.9;
    }

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

    .logo-container{
        transform:translateY(-70px);
    }

    .logo-container img{
        width:980px;
        max-width:none;
    }

    .logo-container::before{
        filter:
            brightness(3)
            drop-shadow(0 0 14px #fff)
            drop-shadow(0 0 28px #73b7ff)
            drop-shadow(0 0 55px #5b8cff);
    }

    /* ======================
       FRASE
    ====================== */

    .hero-title{
        min-height:700px;
    }

    .title-line{
        max-width:2100px;
        font-size:clamp(4.8rem,3vw,6.5rem);
    }

    .title-line::before{

        width:170%;
        height:240%;

        top:-70%;
        left:-35%;

        background-size:contain;

        filter:
            brightness(3.5)
            drop-shadow(0 0 18px #fff)
            drop-shadow(0 0 35px #73b7ff)
            drop-shadow(0 0 60px #7d3cff);
    }

    /* ======================
       UNIVERSO
    ====================== */

    .galaxy{
        width:620px;
        height:620px;
    }

    .core{
        width:90px;
        height:90px;
    }

    .planet{
        width:110px;
    }

    .spaceship{
        width:180px;
    }

    .astronaut{
        width:80px;
    }

    /* ======================
       CARDS
    ====================== */

    .cards-grid{
        grid-template-columns:repeat(auto-fit,minmax(450px,1fr));
        gap:55px;
    }

    .panel-card{
        min-height:330px;
        padding:55px;
        border-radius:32px;
    }

    .panel-card h3{
        font-size:2rem;
    }

    .panel-card p{
        font-size:1.2rem;
        line-height:1.8;
    }

    /* ======================
       TITULOS
    ====================== */

    .section h2{
        font-size:5.5rem;
    }

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

    .btn{
        font-size:1.35rem;
        padding:24px 70px;
    }

    /* ======================
       MENÚ
    ====================== */

    .mobile-menu{
        width:450px;
        padding-top:170px;
    }

    .mobile-menu a{
        font-size:1.3rem;
        padding:22px;
    }

    /* ======================
       SWIPE
    ====================== */

    .swipe-indicator{
        transform:translateY(-50%) scale(1.7);
    }

}








@media (min-width:3200px){

    html{
        font-size:1.32rem;
    }

    /* =========================================================
       CONTENEDOR
    ========================================================= */

    .content{
        max-width:2800px;
        padding-top:220px;
        padding-inline:120px;
        gap:260px;
    }

    .hero{
        min-height:100vh;
    }

    .hero-content{
        max-width:2200px;
        gap:70px;
    }

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

    .logo-container{
        transform:translateY(-90px);
    }

    .logo-container img{
        width:1000px;
        max-width:none;
    }

    .logo-container::before{

        top:-28%;
        left:-14%;

        width:128%;
        height:160%;

        filter:
            brightness(3.3)
            drop-shadow(0 0 14px #ffffff)
            drop-shadow(0 0 28px #73b7ff)
            drop-shadow(0 0 55px #5b8cff)
            drop-shadow(0 0 80px #7d3cff);

    }

    /* =========================================================
       FRASE PRINCIPAL
    ========================================================= */

    .hero-title{
        min-height:760px;
    }

    .title-line{

        max-width:2200px;

        font-size:clamp(5rem,2.8vw,6.8rem);

        line-height:1.04;

        letter-spacing:.03em;

    }

    .title-line::before{

        top:-70%;
        left:-35%;

        width:170%;
        height:240%;

        background-size:contain;

        filter:
            brightness(3.8)
            drop-shadow(0 0 18px #ffffff)
            drop-shadow(0 0 35px #a473ff)
            drop-shadow(0 0 65px #5b8cff)
            drop-shadow(0 0 100px #7d3cff);

    }

    /* =========================================================
       UNIVERSO
    ========================================================= */

    .galaxy{
        width:650px;
        height:650px;
    }

    .core{
        width:95px;
        height:95px;
    }

    .planet{
        width:120px;
    }

    .spaceship{
        width:190px;
    }

    .astronaut{
        width:85px;
    }

    /* =========================================================
       TEXTOS
    ========================================================= */

    .hero p{
        max-width:1500px;
        font-size:2rem;
        line-height:1.9;
    }

    .section h2{
        font-size:5.8rem;
        margin-bottom:90px;
    }

    /* =========================================================
       CARDS
    ========================================================= */

    .cards-grid{
        grid-template-columns:repeat(auto-fit,minmax(480px,1fr));
        gap:60px;
    }

    .panel-card{
        min-height:360px;
        padding:60px;
        border-radius:34px;
    }

    .panel-card h3{
        font-size:2.3rem;
    }

    .panel-card p{
        font-size:1.25rem;
        line-height:1.9;
    }

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

    .btn{
        padding:26px 70px;
        font-size:1.4rem;
    }

    /* =========================================================
       MENÚ
    ========================================================= */

    .mobile-menu{
        width:500px;
        padding-top:180px;
    }

    .mobile-menu a{
        padding:24px;
        font-size:1.35rem;
    }

    /* =========================================================
       SWIPE
    ========================================================= */

    .swipe-indicator{
        transform:translateY(-50%) scale(1.8);
    }

}

/* =========================================================
   8K CINEMA MODE
   5000px+
   PREMIUM OPTIMIZADO
========================================================= */

@media (min-width:5000px){

    html{
        font-size:1.45rem;
    }

    /* ======================
       CONTENIDO
    ====================== */

    .content{
        max-width:3400px;
        padding-inline:180px;
        gap:320px;
    }

    .hero-content{
        max-width:2600px;
    }

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

    .logo-container{
        transform:translateY(-100px);
    }

    .logo-container img{
        width:1150px;
        max-width:none;
    }

    .logo-container::before{

        top:-28%;
        left:-14%;

        width:128%;
        height:160%;

        filter:
            brightness(3.5)
            drop-shadow(0 0 18px #ffffff)
            drop-shadow(0 0 35px #6b029f)
            drop-shadow(0 0 70px #1a0271)
            drop-shadow(0 0 100px #7d3cff);

    }

    /* ======================
       TITULO
    ====================== */

    .hero-title{
        min-height:850px;
    }

    .title-line{

        max-width:2600px;

        font-size:clamp(6rem,2.5vw,7.5rem);

        line-height:1.02;

        letter-spacing:.03em;

    }

    .title-line::before{

        top:-70%;
        left:-35%;

        width:170%;
        height:240%;

        background-size:contain;

        filter:
            brightness(4)
            drop-shadow(0 0 20px #fff)
            drop-shadow(0 0 40px #73b7ff)
            drop-shadow(0 0 70px #5b8cff)
            drop-shadow(0 0 110px #7d3cff);

    }

    /* ======================
       UNIVERSO
    ====================== */

    .galaxy{
        width:750px;
        height:750px;
    }

    .core{
        width:110px;
        height:110px;
    }

    .planet{
        width:130px;
    }

    .spaceship{
        width:220px;
    }

    .astronaut{
        width:100px;
    }

    /* ======================
       TEXTOS
    ====================== */

    .hero p{
        font-size:2.1rem;
        max-width:1800px;
        line-height:2;
    }

    .section h2{
        font-size:6rem;
        margin-bottom:100px;
    }

    /* ======================
       CARDS
    ====================== */

    .cards-grid{
        grid-template-columns:repeat(auto-fit,minmax(520px,1fr));
        gap:70px;
    }

    .panel-card{
        padding:70px;
        min-height:420px;
        border-radius:40px;
    }

    .panel-card h3{
        font-size:2.5rem;
    }

    .panel-card p{
        font-size:1.35rem;
        line-height:2;
    }

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

    .btn{
        font-size:1.5rem;
        padding:30px 80px;
    }

    /* ======================
       SWIPE
    ====================== */

    .swipe-indicator{
        transform:translateY(-50%) scale(2);
    }

}

/*styles admin*/
img{

display:block;

max-width:100%;

height:auto;

object-fit:cover;

}
.btn{

position:relative;

overflow:hidden;

isolation:isolate;

}
.btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transform:skewX(-25deg);

transition:1s;

}
.btn:hover::before{

left:160%;

}
button,
a{

touch-action:manipulation;

}
input,
textarea{

font:inherit;

color:inherit;

}
.container{

width:min(100%,1450px);

margin-inline:auto;

padding-inline:

clamp(18px,4vw,55px);

}



/*ahorrar cpu*/
@media (hover:hover){

.panel-card:hover{

transform:

translateY(-12px)
scale(1.02);

}

}
picture,
img{

max-inline-size:100%;

block-size:auto;

}



/* =========================================================
LOGO EXPLOSION SYSTEM
========================================================= */

.logo-core{

position:relative;
display:flex;
justify-content:center;
align-items:center;
transition:1s cubic-bezier(.19,1,.22,1);
 pointer-events:auto;

}










































@keyframes chargeShake{

0%{
transform:translate(0,0) rotate(0deg) scale(1);
}

15%{
transform:translate(-1px,1px) rotate(-.3deg) scale(1.01);
}

30%{
transform:translate(2px,-2px) rotate(.8deg) scale(1.02);
}

45%{
transform:translate(-4px,3px) rotate(-1.5deg) scale(1.03);
}

60%{
transform:translate(6px,-5px) rotate(2deg) scale(1.05);
}

75%{
transform:translate(-9px,7px) rotate(-3deg) scale(1.07);
}

90%{
transform:translate(14px,-10px) rotate(5deg) scale(1.10);
}

95%{
transform:translate(-18px,14px) rotate(-7deg) scale(1.12);
}

100%{
transform:translate(22px,-18px) rotate(9deg) scale(1.15);
}

}


@keyframes chargePulse{

0%{
transform:scale(1);
}

25%{
transform:scale(1.015);
}

50%{
transform:scale(1.05);
}

75%{
transform:scale(1.025);
}

100%{
transform:scale(1);
}

}










@keyframes chargeGlow{

0%{

filter:
brightness(1)
drop-shadow(0 0 20px #008cff)
drop-shadow(0 0 45px #0055ff);

}

50%{

filter:
brightness(2)
drop-shadow(0 0 45px #00d5ff)
drop-shadow(0 0 90px #7a00ff);

}

80%{

filter:
brightness(3)
drop-shadow(0 0 80px #ffffff)
drop-shadow(0 0 140px #00ffff)
drop-shadow(0 0 220px #7a00ff);

}

100%{

filter:
brightness(5)
drop-shadow(0 0 120px #ffffff)
drop-shadow(0 0 220px #00ffff)
drop-shadow(0 0 320px #ff00ff);

}

}















/* =======================================
EXPLOSION
======================================= */

/*
.logo-core.explode img{
animation:logoExplosion .65s forwards;
}*/
.logo-core.explode img{

animation:logoExplosion .45s cubic-bezier(.22,1,.36,1) forwards;

}

@keyframes logoExplosion{

0%{

transform:

scale(1)
rotate(0deg);

opacity:1;

}

35%{

transform:

scale(1.45)
rotate(8deg);

}

65%{

transform:

scale(.2)
rotate(30deg);

opacity:.3;

filter:

brightness(8)

blur(4px);

}
100%{

transform:scale(0);

opacity:0;

visibility:hidden;



}

}
#cinemaFlash{

position:fixed;

inset:0;

background-image: url(../imgs/rayos-electricos.svg);

opacity:0;

pointer-events:none;

z-index:9999;

transition:.4s;

}

#cinemaFlash.show{

animation:cinemaFlash .3s;

}

@keyframes cinemaFlash{

0%{

opacity:0;

}

15%{

opacity:1;

}

100%{

opacity:0;

}

}

#logoExplosion{

position:absolute;

left:50%;

top:50%;

width:10px;

height:10px;

pointer-events:none;

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

z-index:4;

}






#adminPortal{

position:absolute;

left:50%;
top:50%;

transform:
translate(-50%,-50%)
scale(.4);

opacity:0;

width:min(900px,92vw);

display:grid;

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

gap:30px;

pointer-events:none;

transition:
1s cubic-bezier(.19,1,.22,1);

z-index:50;

}

#adminPortal.show{

opacity:1;

pointer-events:auto;

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

}

#adminPortal button{

opacity:0;

transform:

translateY(100px)
scale(.4);

}

#adminPortal.show button{

animation:

portalButton .4s forwards;

}

#adminPortal.show button:nth-child(1){animation-delay:.10s;}
#adminPortal.show button:nth-child(2){animation-delay:.20s;}
#adminPortal.show button:nth-child(3){animation-delay:.30s;}
#adminPortal.show button:nth-child(4){animation-delay:.40s;}
#adminPortal.show button:nth-child(5){animation-delay:.50s;}
#adminPortal.show button:nth-child(6){animation-delay:.60s;}

/* =========================================================
PORTAL BUTTON 2099 - GPU OPTIMIZED
========================================================= */

@keyframes portalButton{

0%{

opacity:0;

transform:
translate3d(0,40px,0)
scale(.82);

}

55%{

opacity:1;

transform:
translate3d(0,-6px,0)
scale(1.03);

}

75%{

transform:
translate3d(0,2px,0)
scale(.99);

}

100%{

opacity:1;

transform:
translate3d(0,0,0)
scale(1);

}

}
/*styles de btns admin*/




.admin-btn{

opacity:0;

backface-visibility:hidden;

transform-style:preserve-3d;

will-change:
transform,
opacity;

contain:layout paint;

/*background:#32004448;*/



background:


linear-gradient(


90deg,


#000000,


#0022706f,
#000000,
#2c004688,


#000000


);





border-radius: 5px;
color:#fff;
box-shadow: rgba(33, 0, 73, 0.663) 15px 15px 15px;
}










/* =============================
AURA
============================= */

.admin-btn::after{

content:"";

position:absolute;

inset:-3px;

border-radius:inherit;
/*
background:

linear-gradient(

90deg,

#050005,

#000000fb,
#000000,
#19001fdc,

#000000

);
*/
background-image: url("../imgs/rayos-electricos.svg");
opacity:0;

/*filter:blur(18px);*/

z-index:-1;

transition:.45s;

}


.admin-btn:hover::before{

left:150%;

}

.admin-btn:hover::after{

opacity:1;

}


/* =============================
CLICK
============================= */

.admin-btn:active{

transform:scale(.96);

}






.admin-btn{

position:relative;
isolation:isolate;

}

.admin-btn span{

position:relative;
z-index:5;

}








/* =============================
ENTRADA
============================= */
#adminPortal.show .admin-btn{
    animation:portalButton .55s cubic-bezier(.22,1,.36,1) forwards;
/*
animation:
portalButton .8s forwards;*/
/*
animation:
portalButton .55s cubic-bezier(.22,1,.36,1) forwards;
*/
}
/*
#adminPortal.show .admin-btn{

animation:

portalButton .8s forwards,

portalFloat 4s ease-in-out infinite;

}
*/
#adminPortal.show .admin-btn:nth-child(1){

animation-delay:.10s,1s;

}

#adminPortal.show .admin-btn:nth-child(2){

animation-delay:.20s,1.1s;

}

#adminPortal.show .admin-btn:nth-child(3){

animation-delay:.30s,1.2s;

}

#adminPortal.show .admin-btn:nth-child(4){

animation-delay:.40s,1.3s;

}

#adminPortal.show .admin-btn:nth-child(5){

animation-delay:.50s,1.4s;

}

#adminPortal.show .admin-btn:nth-child(6){

animation-delay:.60s,1.5s;

}




.admin-btn{

position:relative;

overflow:visible;

isolation:isolate;

}
.admin-btn::before{

content:"";

position:absolute;

left:-15%;
top:-20%;

width:130%;
height:140%;

pointer-events:none;

opacity:0;

z-index:5;

background-image:url("../imgs/rayos-logo.svg");

background-repeat:no-repeat;

background-position:center;

background-size:200% 200%;

filter:

brightness(2)

drop-shadow(0 0 8px #ffffff)

drop-shadow(0 0 18px #001eff)

drop-shadow(0 0 30px #7a00ff);

transition:.3s;

}
#adminPortal.show .admin-btn::before{

opacity:.75;

animation:

logoStorm 2.4s linear infinite,

logoElectricMove 8s ease-in-out infinite;

}

.admin-btn span{

position:relative;

z-index:20;

}






@media (min-width:1801px){


#adminPortal{


    width:min(82vw,1800px);


    display:grid;


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


    gap:42px;


    padding:36px;


}


.admin-btn{


    min-height:120px;


    padding:34px 42px;


    font-size:20px;


    letter-spacing:3px;


}


}

/* =========================================================
DESKTOP (1201px - 1800px)
========================================================= */


@media (min-width:1201px) and (max-width:1800px){


#adminPortal{


    width:min(88vw,1450px);


    display:grid;


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


    gap:34px;


    padding:28px;


}


.admin-btn{


    min-height:105px;


    padding:28px 34px;


    font-size:17px;


    letter-spacing:2.5px;


}
.floating-mini-logo{
    width: 400px;
    height: 400px;
    margin-top: -100px;
    margin-left: -100px;
}
.admleft{
    position:relative;
    left: 200px;
}
.adm1left{
    position:relative;
    left: 200px;
}





}








/* =========================================================
LAPTOPS (999px - 1200px)
========================================================= */


@media (min-width:993px) and (max-width:1200px){


#adminPortal{


    width:min(94vw,1100px);


    display:grid;


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


    gap:28px;


    padding:24px;


}


.admin-btn{


    min-height:92px;


    padding:24px 26px;


    font-size:16px;


    letter-spacing:2px;


}
.floating-mini-logo{
    width: 300px;
    height: 300px;
    margin-top: -60px;
    margin-left: -60px;
}


.admleft{
    position:relative;
    left: 180px;
}
.adm1left{
    position:relative;
    left: 180px;
}







}





/* =========================================================
TABLETS Y LAPTOPS
========================================================= */

@media (max-width:992px){

#adminPortal{

    width:min(96vw,900px);

    display:grid;

    grid-template-columns:
    repeat(2,minmax(260px,1fr));

    gap:26px;

    padding:20px;

}

.admin-btn{

    min-height:86px;

    padding:24px;

    font-size:16px;

    letter-spacing:2px;

}
.floating-mini-logo{
    width: 300px;
    height: 300px;
    margin-top: -60px;
    margin-left: -60px;
}
.admleft{


    position:relative;


    left: 210px;


}


}

/* =========================================================
TABLETS PEQUEÑAS
========================================================= */

@media (max-width:768px){

#adminPortal{

    width:min(95vw,650px);

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

    gap:18px;

    padding:18px;
.logo-core img{


filter:none;


}


.logo-core.charging img{


filter:


drop-shadow(0 0 12px #005eff);


}
}

.admin-btn{

    min-height:78px;

    padding:20px;

    font-size:15px;

}

.logo-core img{

    filter:none;

}

.logo-core.charging img{

    filter:
    drop-shadow(0 0 12px #005eff);

}
.floating-mini-logo{
    width: 200px;
    height: 200px;
    margin-top: -60px;
    margin-left: -60px;
}
.admleft{




    position:relative;




    left: 140px;




}






}
/* =========================================================
MOVILES
========================================================= */

@media (max-width:600px){

#adminPortal{

    position:fixed;

    left:50%;
    top:50%;

    transform:
    translate(-50%,-50%) scale(.4);

    width:min(94vw,430px);

    padding:16px;

    display:grid;

    grid-template-columns:1fr;

    gap:16px;

}

#adminPortal.show{

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

}

.admin-btn{

   /* width:100%;

    min-height:74px;

    padding:20px;*/

    font-size:14px;

    letter-spacing:1px;


    width:100%;

min-height:90px;


max-width:none;

padding:24px;
}








.floating-mini-logo{
    

    width:300px;
    height:300px;

    left:35%;
    

    transform:
       
        scale(.5)
        rotate(-10deg);
}




.admleft{








    position:relative;








    left: 0px;








}




}

/*
@media (min-width:410px) and ( max-width:520px){
    .logo-container img{
    width: 480px;
}
}*/


@media (min-width:0px) and ( max-width:409px){

.floating-mini-logo{

    



    width:300px;

    height:300px;



    left:28%;
    top: -30px;

    



    transform:

       

        scale(.5)

        rotate(-10deg);

        
}
/*
.logo-container img{
    width: 430px;
}*/
}


@media (min-width:0px) and ( max-width:300px){
/*
.logo-container img{
    width: 400px;
}*/

.floating-mini-logo{



    







    width:300px;



    height:300px;







    left:20%;



    







    transform:



       



        scale(.5)

        rotate(-10deg);



}





}




/*==========================================================
CONTENEDOR DEL SWITCH


Alinea:


switch


+


texto


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


.estado-box{


display:flex;


align-items:center;


gap:12px;


}


/*==========================================================
SWITCH


Aumentamos un poco el tamaño.


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


.estado-switch{


width:22px;


height:22px;


cursor:pointer;


accent-color:#00ffff;


}


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


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


.estado-texto{


font-weight:bold;


color:white;


font-size:14px;


}












#contadorCaracteres{


text-align:right;


margin-top:-18px;


margin-bottom:25px;


font-size:14px;


color:#9db8ff;


transition:.3s;


}























































/*=========================================================
CAJA PRINCIPAL
Panel futurista galáctico
=========================================================*/

.panel_admf{

/*width:min(560px,92vw);*/
width:min(500px,94vw);

padding:24px;

margin:auto;

padding:38px;

border-radius:28px;

position:relative;

overflow:hidden;


       
 background:


linear-gradient(




90deg,



#0000001f,

#0000000f,

#052a40b9,

#000e2f55,
#00000024,
#2c00465a,
#780ab888,


#00000089,

#00000000
);




backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);

















}




















































.h1f{
margin-bottom:20px;

/*margin-bottom:35px;*/

text-align:center;
font-size:1.7rem;
/*font-size:2rem;*/

font-weight:800;

letter-spacing:2px;

color:#fff;

text-shadow:

0 0 8px #4d208c,

0 0 20px #0f0233,

0 0 35px #7a00ff;

}


/*=========================================================
LABELS
=========================================================*/

.labelf{

display:block;
margin-bottom:6px;

font-size:14px;
/*margin-bottom:10px;*/

font-weight:700;

/*font-size:15px;*/

color:#dffcff;

letter-spacing:.5px;

}


/*=========================================================
INPUTS
=========================================================*/

.inputf,
.textareaf,
.selectf{

width:100%;
padding:12px 16px;

margin-bottom:16px;

font-size:15px;
/*padding:16px 18px;

margin-bottom:24px;*/

border-radius:16px;

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

background:

linear-gradient(
180deg,
rgba(8,12,35,.95),
rgba(20,18,55,.95)
);

color:#ffffff;

/*font-size:16px;*/

outline:none;

transition:

border-color .35s,

box-shadow .35s,

transform .25s,

background .35s;

}



/*=========================================================
SELECT FUTURISTA GALÁCTICO
=========================================================*/

.selectf{

appearance:none;
/* Elimina el diseño nativo del navegador */

-webkit-appearance:none;
/* Compatibilidad con Chrome y Safari */

-moz-appearance:none;
/* Compatibilidad con Firefox */

cursor:pointer;
/* Cambia el cursor a una mano */

padding-right:65px;
/* Dejamos espacio para la flecha futurista */

background-image:

linear-gradient(
180deg,
rgba(8,12,35,.96),
rgba(20,18,55,.95)
),

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%2300ffff' d='M7 10l5 5 5-5'/%3E%3C/svg%3E");








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


background-position:

center,
right 22px center;






background-size:

100% 100%,
22px;





letter-spacing:1px;
/* Separa ligeramente las letras */

font-weight:700;
/* Texto más elegante */

transition:

all .45s ease;

}
/*=========================================================
HOVER SELECT
=========================================================*/

.selectf:hover{

border-color:#00ffff;
/* Borde cian */

box-shadow:

0 0 10px #00ffff,
0 0 25px rgba(0,255,255,.35),
0 0 45px rgba(122,0,255,.22);



transform:

translateY(-2px)
scale(1.01);



}
/*=========================================================
FOCUS SELECT
=========================================================*/

.selectf:focus{

background-image:

linear-gradient(
180deg,
rgba(10,18,60,.98),
rgba(18,8,45,.98)
),

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 10l5 5 5-5'/%3E%3C/svg%3E");

/* La flecha cambia a blanco */

box-shadow:

0 0 0 2px rgba(0,255,255,.12),
0 0 20px #00ffff,
0 0 45px rgba(122,0,255,.25);

}
/*=========================================================
OPCIONES DEL SELECT
=========================================================*/

.selectf option{

background:#090d26;
/* Fondo oscuro */

color:#ffffff;
/* Letras blancas */

font-weight:700;
/* Texto más fuerte */

}

/*=========================================================
FOCUS
=========================================================*/

.inputf:focus,
.textareaf:focus,
.selectf:focus{

border-color:#00ffff;

background:#111738;

transform:translateY(-2px);

box-shadow:

0 0 0 2px rgba(0,255,255,.12),

0 0 18px rgba(0,255,255,.28),

0 0 35px rgba(122,0,255,.16);

}


/*=========================================================
TEXTAREA
=========================================================*/

.textareaf{
min-height:90px;
/*min-height:150px;*/

resize:vertical;

}


/*=========================================================
BOTÓN
=========================================================*/

.buttonf{

width:100%;
padding:14px;
/*padding:18px;*/

border:none;

border-radius:10px;

cursor:pointer;

font-size:16px;

font-weight:700;

letter-spacing:1px;

color:#fff;

background:
linear-gradient(
180deg,
rgba(39, 0, 56, 0.495),
rgba(38, 0, 109, 0.581),


rgba(0, 0, 0, 0.375),
rgba(34, 0, 92, 0.637),


rgba(0, 0, 0, 0.96)
);

background-size:220%;

transition:

transform .35s,

box-shadow .35s,

background-position .7s;

box-shadow:

0 0 18px rgba(255, 255, 255, 0.997);

}


/*=========================================================
HOVER BOTÓN
=========================================================*/

.buttonf:hover{

background-position:right center;

transform:

translateY(-3px)

scale(1.015);

box-shadow:

0 0 18px #a600ff,

0 0 40px rgba(1, 42, 112, 0.803);

}


/*=========================================================
BOTÓN PRESIONADO
=========================================================*/

.buttonf:active{

transform:scale(.98);

}


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

@media(max-width:768px){

.panel_admf{

width:94vw;
padding:20px;
/*padding:28px;*/

border-radius:22px;

}

.h1f{

font-size:1.6rem;

}

.inputf,
.textareaf,
.selectf{

padding:12px;

font-size:15px;

}

.buttonf{

padding:16px;

font-size:16px;

}

}








@media(max-width:480px){

.panel_admf{

width:96vw;

padding:16px;

border-radius:18px;

}

.h1f{

font-size:1.45rem;

margin-bottom:15px;

}

.labelf{

font-size:13px;

margin-bottom:5px;

}

.inputf,
.textareaf,
.selectf{

padding:11px 13px;

font-size:14px;

margin-bottom:14px;

}

.textareaf{

min-height:90px;

}

.buttonf{

padding:13px;

font-size:15px;

}

}








.neon-modal{


position:fixed;
top:0;
left:0;


width:100%;
height:100%;


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


padding:25px;


background:
rgba(2,5,20,.78);


backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);


z-index:999999;


animation:fadeModal .35s ease;


}




/* ==========================================================
   CAJA
========================================================== */


.neon-box{


position:relative;


width:min(92vw,560px);


padding:


45px
35px
38px;


border-radius:28px;


overflow:hidden;


background:


linear-gradient(
160deg,
rgba(6, 50, 153, 0.189),
rgba(134, 1, 121, 0.204)
);






box-shadow:


0 0 25px rgba(246, 245, 248, 0.773),


0 0 70px rgb(250, 250, 250),


inset 0 0 35px rgba(255, 255, 255, 0.619);


text-align:center;


animation:


popup .45s
cubic-bezier(.18,.89,.32,1.28);


}






.neon-box h2{


position:relative;


margin:0;


font-size:


clamp(1.6rem,4vw,2.2rem);


font-weight:800;


letter-spacing:3px;


color:#080808;


text-shadow:


0 0 8px #fffdfd,


0 0 20px #fefefe,


0 0 40px #eaeaea;


}




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


.neon-box p{


position:relative;


margin-top:25px;


line-height:1.8;


font-size:


clamp(.96rem,2vw,1.08rem);


color:#d6dfff;


}




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


.close-btn{


position:absolute;


top:18px;
right:18px;


width:42px;
height:42px;


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


border-radius:50%;


cursor:pointer;


font-size:22px;


color:#ffffff;


background:




linear-gradient(
90deg,
#0026ff4c,
#df0dff3d
);




box-shadow:




0 0 20px #ffffff,




0 0 45px rgb(253, 252, 255);




/*
background:


linear-gradient(
135deg,
#00cfff,
#751bff
);
*


box-shadow:


0 0 12px #00ffff,


0 0 35px rgba(123,46,255,.5);
*/
transition:.35s;


z-index:5;


}


.close-btn:hover{


transform:


rotate(180deg)
scale(1.12);


box-shadow:


0 0 20px #00ffff,


0 0 55px #7B2EFF;


}




/* ==========================================================
   ICONOS
========================================================== */


.neon-box .icon{


font-size:


clamp(58px,10vw,78px);


margin-bottom:20px;


display:block;


filter:


drop-shadow(0 0 15px #f0f0f6fc)


drop-shadow(0 0 35px #f9f9f9);




}




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


.neon-btn{


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


margin-top:30px;


padding:


14px
34px;


border-radius:60px;


text-decoration:none;


font-weight:700;


letter-spacing:2px;


color:white;


background:


linear-gradient(
90deg,
#0026ff4c,
#df0dff3d
);


box-shadow:


0 0 20px #ffffff,


0 0 45px rgb(253, 252, 255);


transition:.35s;


}


.neon-btn:hover{


transform:


translateY(-3px)
scale(1.05);


box-shadow:


0 0 30px #00ffff,


0 0 65px #7b2eff;


}




/* ==========================================================
   ANIMACIONES
========================================================== */


@keyframes popup{


0%{


opacity:0;


transform:


scale(.65)
translateY(60px);


}


100%{


opacity:1;


transform:


scale(1)
translateY(0);


}


}


@keyframes fadeModal{


from{


opacity:0;


}


to{


opacity:1;


}


}


@keyframes shine{


0%{


transform:
translateX(-25%)
rotate(0deg);


}


100%{


transform:
translateX(25%)
rotate(360deg);


}


}




/* ==========================================================
   TABLET
========================================================== */


@media(max-width:768px){


.neon-box{


padding:


38px
24px
30px;


border-radius:22px;


}


.close-btn{


width:38px;
height:38px;


font-size:20px;


}


}




/* ==========================================================
   CELULARES
========================================================== */


@media(max-width:480px){


.neon-modal{


padding:18px;


}


.neon-box{


width:100%;


padding:


34px
20px
28px;


border-radius:20px;


}


.close-btn{


top:12px;
right:12px;


width:34px;
height:34px;


font-size:18px;


}


.neon-box p{


font-size:.95rem;


line-height:1.6;


}


}




@media(min-width:2000px){


.neon-box{


max-width:700px;


padding:


60px
50px
45px;


}


.neon-box h2{


font-size:3rem;


}


.neon-box p{


font-size:1.35rem;


}


}









/*burburja wasap*/


/* =========================================================
WHATSAPP FLOAT
========================================================= */


.whatsapp-float{


position:fixed;


right:25px;
bottom:25px;


width:100px;
height:100px;


border-radius:50%;


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


background:
linear-gradient(
135deg,
rgba(1, 58, 137, 0.204),
rgba(212, 0, 255, 0.104)
);






box-shadow:
0 0 20px rgba(13, 254, 33, 0.777),
0 0 45px rgba(0, 0, 0, 0.781);


z-index:999999;


transition:
transform .35s,
box-shadow .35s;


animation:whatsappFloat 3s ease-in-out infinite;


text-decoration:none;


overflow:visible;


}


.whatsapp-float:hover{


transform:
translateY(-8px)
scale(1.08);


box-shadow:
0 0 30px #00ff44,
0 0 70px #d3d1d6;


}


.whatsapp-float img{


width:400px;
height:100px;


display:block;


pointer-events:none;


}


.whatsapp-float span{


position:absolute;


right:88px;


padding:12px 18px;


border-radius:999px;


background:rgba(10,10,20,.92);


border:1px solid rgb(255, 255, 255);


color:#fff;


font-size:13px;
font-weight:700;


white-space:nowrap;


opacity:0;


visibility:hidden;


transform:translateX(10px);


transition:.35s;


box-shadow:
0 0 15px rgba(2, 202, 52, 0.925);


}


.whatsapp-float:hover span{


opacity:1;


visibility:visible;


transform:translateX(0);


}


@keyframes whatsappFloat{


0%{


transform:translateY(0);


}


50%{


transform:translateY(-10px);


}


100%{


transform:translateY(0);


}


}


/* Pulso */


.whatsapp-float::before{


content:"";


position:absolute;


inset:-8px;


border-radius:50%;


border:2px solid rgba(0, 255, 26, 0.814);


animation:whatsappPulse 2.4s infinite;


}


@keyframes whatsappPulse{


0%{


transform:scale(.9);


opacity:.9;


}


100%{


transform:scale(1.5);


opacity:0;


}


}
/*responsive*/
@media (max-width:768px){


.whatsapp-float{


width:80px;
height:80px;


right:18px;
bottom:18px;


}


.whatsapp-float img{


width:80px;
height:80px;


}


.whatsapp-float span{


display:none;


}


}