*{
-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;


-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overscroll-behavior-y:auto;
touch-action:auto;
-webkit-overflow-scrolling:touch;
}
: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: auto;


margin:auto;

padding:
140px
clamp(18px,4vw,55px)
120px;

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

gap:150px;
}
.content{
    position:relative;
    top:-30px; 
}





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;

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;

}

.logo-container img{
  


width:clamp(280px,42vw,760px);
max-width:100%;
height:auto;

display:block;

animation:logoFloat 8s ease-in-out infinite;

transition:
transform .4s ease,

filter .4s ease;
transform:translateZ(0);
}
.logo-container img{

position:relative;
z-index:2;

}




.hero{
width:100%;
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{

width:100%;

display:grid;

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

gap:35px;

align-items:stretch;
}





.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%);

/*filter:drop-shadow(0 0 12px rgba(122,0,255,.6));*/
}

.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;

}



.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);

}



.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{
  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(6.5rem,8vw,6.8rem);

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;*/



}






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

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

}






.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%;








    transform: translateZ(0);






pointer-events:none;

z-index:80;
overflow:visible;

opacity:0;




background-size:100% 100%;


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

backface-visibility:visible;


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




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:
logoStorm 2.5s infinite linear,
logoElectricMove 8s infinite ease-in-out;


}











.title-line .letter{

display:inline-block;

position:relative;

opacity:0;

transform:
translate3d(var(--x),var(--y),0)
rotate(var(--r))
scale(.15);

animation:

letterAssemble 1.15s cubic-bezier(.19,1,.22,1) forwards,
letterBreath 4s ease-in-out infinite;

animation-delay:
calc(var(--delay) * 1ms),
1.4s;

transform-style:preserve-3d;

backface-visibility:hidden;

filter:
drop-shadow(0 0 8px rgba(0,255,255,.25));

}
@keyframes letterBreath{

0%{

transform:
translateY(0)
scale(1);

filter:

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

}

50%{

transform:
translateY(-3px)
scale(1.035);

filter:

drop-shadow(0 0 12px #00ffff)
drop-shadow(0 0 26px #ff00ff);

}

100%{

transform:
translateY(0)
scale(1);

filter:

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

}

}















.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;
}



26%{
opacity:0;
}

27%{
opacity:1;
}

28%{
opacity:.05;
}

29%{
opacity:1;
}

31%{
opacity:0;
}


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%;
}

}












.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;

}





.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:15%;
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);






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;
}

}






@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:1600px){











.floating-mini-logo{
width: 400px;
height: 300px;
}
}





@media (max-width:1200px){


    .content{
        gap:120px;
    }


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





}










@media (max-width:992px){


    .hero{
        min-height:90vh;
    }


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


    .panel-card{
        padding:30px;
    }
.floating-mini-logo{
width: 200px;
height: 150px;
}

}











@media (max-width:768px){

    
    
        .content{
       /* padding-inline:14px;
        gap:75px;*/
          position:relative;
  top:40px; 
    }

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

   
   
   

    .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-container{
        transform:translateY(-35px);
    }

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

    
    
    

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

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

    
    
    

    .cards-grid{
        gap:28px;
    }

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

    
    
    

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

   
   
   

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

    .planet{
        width:100px;
    }

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

    .astronaut{
        width:50px;
    }

   
   
   

    .swipe-indicator{
        left:18px;
    }

}





























@media (max-width:480px){

    .content{
       /* padding-inline:14px;
        gap:75px;*/
          position:relative;
  top:-10px; 
    }

    .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 #fefefe;
        border-right:3px solid #ffffff;

        margin-left:0;
    }

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

    .mobile-menu{

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

       
       
       
       
       
 background:

linear-gradient(


90deg,


#000000,

#00227030,
#00000024,
#2c00465a,

#00000029

);

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-container{
    transform:translateY(-80px);
}
.logo-container img{
    width:110vw;
    max-width:760px;
}

}


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


@media (max-width:380px){


    .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;
    }


}

/* =========================================================
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:translateY(-20px);
}
.logo-container img{
    width:95vw;
    max-width:760px;
}
.logo-container::before{
    top:-112%;
    left:-16%;
    width:132%;
    height:350%;
    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 #ffffff);
    animation:
    logoStorm 2.5s linear infinite,
    logoElectricMove 8s ease-in-out infinite;
}
.logo-container::after{
    inset:-12%;
    opacity:.75;
}
}

.floating-mini-logo{
width: 200px;
height: 150px;

}



@media (min-width:517px) and (max-width:529px){


    .logo-container{
    transform:translateY(-70px);
}
.logo-container img{
    width:88vw;
    max-width: 500px;
}
.logo-container::before{
    top:20%;
    left:-18%;
    width:140%;
    height:185%;
    opacity:1;
    filter:
        brightness(3)
        drop-shadow(0 0 12px #ffffff)
        drop-shadow(0 0 24px #73b7ff)
        drop-shadow(0 0 40px #5b8cff)
        drop-shadow(0 0 65px #7d3cff);
}
.hero-title{
    margin-top:-25px;
}
}
@media (min-width:530px) and (max-width:649px){
.logo-container{
    transform:translateY(-70px);
}
.logo-container img{
    width:88vw;
    max-width: 500px;
}
.logo-container::before{
    top:20%;
    left:-18%;
    width:140%;
    height:185%;
    opacity:1;
    filter:
        brightness(3)
        drop-shadow(0 0 12px #ffffff)
        drop-shadow(0 0 24px #73b7ff)
        drop-shadow(0 0 40px #5b8cff)
        drop-shadow(0 0 65px #7d3cff);
}
.hero-title{
    margin-top:-25px;
}
}


/* =========================================================
TABLET PEQUEÑA (600px - 768px)
========================================================= */


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

/*
    .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:-35%;
        left:-18%;
        width:135%;
        height:180%;
    }*/
  .logo-container{
      transform:translateY(-80px);
  }
  .logo-container img{
      width:88vw;
      max-width: 550px;
  }
  .logo-container::before{
      top:20%;
      left:-18%;
      width:140%;
      height:185%;
      opacity:1;
      filter:
          brightness(3)
          drop-shadow(0 0 12px #ffffff)
          drop-shadow(0 0 24px #73b7ff)
          drop-shadow(0 0 40px #5b8cff)
          drop-shadow(0 0 65px #7d3cff);
  }
  .hero-title{
      margin-top:-25px;
  }

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

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

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

    .logo-container img{
        width:88vw;
        max-width: 550px;
    }

    .logo-container::before{
        top:20%;
        left:-18%;
        width:140%;
        height:185%;
        opacity:1;
        filter:
            brightness(3)
            drop-shadow(0 0 12px #ffffff)
            drop-shadow(0 0 24px #73b7ff)
            drop-shadow(0 0 40px #5b8cff)
            drop-shadow(0 0 65px #7d3cff);
    }

    .hero-title{
        margin-top:-25px;
    }
}





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

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

    .logo-container img{
        width:78vw;
        max-width:650px;
    }

    .logo-container::before{
        top:15%;
        left:-18%;
        width:140%;
        height:185%;
        opacity:.95;
        filter:
            brightness(2.8)
            drop-shadow(0 0 10px #ffffff)
            drop-shadow(0 0 20px #73b7ff)
            drop-shadow(0 0 35px #ffffff)
            drop-shadow(0 0 55px #240059);
    }

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

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


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

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

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

    .logo-container img{
        width:78vw;
        max-width:660px;
    }

    .title-line{
        font-size:clamp(3rem,5vw,4rem);
        transform:translate(-50%, -50%) rotateX(65deg);
        transform-origin:center;
    }

    .title-line::before{
        width:230%;
        height:330%;
        top:-100%;
        left:-65%;
        background-size:contain;
        transform:translateZ(0) scale(1.12);
        transform-origin:center;
        filter:
            brightness(4)
            drop-shadow(0 0 18px #fff)
            drop-shadow(0 0 35px #ff73ea)
            drop-shadow(0 0 65px #5b8cff)
            drop-shadow(0 0 110px #ffffff);
    }
}






@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);
    }
}






@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;
    }
}







@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-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);

    }

  
  
  

    .galaxy{

        width:620px;
        height:620px;

        opacity:.55;

    }

    .core{

        width:90px;
        height:90px;

    }

    .planet{

        width:105px;

    }

    .spaceship{

        width:180px;

        opacity:.9;

    }

    .astronaut{

        width:72px;

    }

    
    
    

    .hero p{

        max-width:1100px;

        font-size:1.45rem;

        line-height:1.9;

    }

    .section h2{

        font-size:4.5rem;

        margin-bottom:80px;

    }

   
   
   

    .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;

    }

   
   
   

    .btn{

        font-size:1.15rem;

        padding:22px 58px;

    }

   
   
   

    .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);

    }

}







@media (min-width:3000px){

    html{
        font-size:1.28rem;
    }

   
   
   

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

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

   
   
   

    .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-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);
    }

    
    
    

    .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);
    }

   
   
   

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

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

    .planet{
        width:110px;
    }

    .spaceship{
        width:180px;
    }

    .astronaut{
        width:80px;
    }

    
    
    

    .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;
    }

    
    
    

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

   
   
   

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

    
    
    

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

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

    
    
    

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

}








@media (min-width:3200px){

    html{
        font-size:1.32rem;
    }

   
   
   

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

    .hero{
        min-height:100vh;
    }

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

   
   
   

    .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);

    }

   
   
   

    .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 #73b7ff)
            drop-shadow(0 0 65px #5b8cff)
            drop-shadow(0 0 100px #7d3cff);

    }

   
   
   

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

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

    .planet{
        width:120px;
    }

    .spaceship{
        width:190px;
    }

    .astronaut{
        width:85px;
    }

   
   
   

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

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

    
    
    

    .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;
    }

    
    
    

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

    
    
    

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

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

   
   
   

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

}







@media (min-width:5000px){

    html{
        font-size:1.45rem;
    }

    
    
    

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

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

    
    
    

    .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 #73b7ff)
            drop-shadow(0 0 70px #5b8cff)
            drop-shadow(0 0 100px #7d3cff);

    }

   
   
   

    .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);

    }

   
   

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

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

    .planet{
        width:130px;
    }

    .spaceship{
        width:220px;
    }

    .astronaut{
        width:100px;
    }

    
    
    

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

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

   
   
   

    .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;
    }

   
   
   

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

   
   
   

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

}












#heroDynamicText{

position:relative;

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

width:100%;

min-height:170px;

overflow:visible;

text-align:center;

/*contain:layout paint;*/

}


.heroPhrase{

position:absolute;

left:50%;
top:50%;

/*width:min(95%,1600px);*/
width:min(96vw,1600px);

padding:10px 30px;

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

text-align:center;

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

font-weight:900;

line-height:1.15;

letter-spacing:.03em;

white-space:normal;

opacity:0;

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

transition:

opacity .45s ease,
transform .45s cubic-bezier(.22,1,.36,1);

will-change:
opacity,transform;

isolation:isolate;




color:transparent;

background:linear-gradient(
90deg,
#050505b0 0%,
#21295f84 10%,
#4d6eff2c 20%,
#3c80d365 30%,
#002055a8 40%,
#2469ff1a 50%,
#8069ff64 60%,
#a73cff44 70%,
#ff5eff41 80%,
#8e42ff69 90%,
#1b0b3875 100%
);
-webkit-text-stroke: 1px rgba(255,255,255,.35);
text-stroke: 1px rgba(255,255,255,.35); /* compatibilidad futura */
background-size:400% 100%;

background-position:0% 50%;

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

-webkit-text-fill-color:transparent;

animation:heroGradientFlow 12s linear infinite;

}




@keyframes heroGradientFlow{

0%{

background-position:0% 50%;

}

100%{

background-position:400% 50%;

}

}






.heroPhrase.show{

opacity:1;

transform:

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

}






.heroPhrase.hide{

opacity:0;

transform:

translate(-50%,-50%)
scale(1.02);

}






.heroPhrase::before{

content:"";

position:absolute;

width:140%;
height:180%;

top:20%;
left:-20%;

pointer-events:none;

z-index:-1;

opacity:0;

background:

url("../imgs/rayos-electricos.svg")
center/100% 100%
no-repeat;

filter:

brightness(2.1)

drop-shadow(0 0 6px #ffffff)

drop-shadow(0 0 12px #73b7ff)

drop-shadow(0 0 20px #5b8cff);

}






.heroPhrase.show::before{

opacity:.75;

animation:

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

}






.heroPhrase::after{

content:"";

position:absolute;

left:50%;
top:50%;

width:125%;
height:125%;

transform:

translate(-50%,-50%);

pointer-events:none;

z-index:-2;










opacity:.75;

animation:

heroAura 5s ease-in-out infinite;

}




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

    #heroDynamicText{

       
        min-height:260px;

    }

    .heroPhrase{

       
        width:min(88vw,1600px);

       
        padding:18px 45px;

       
        font-size:clamp(3.8rem,4.2vw,5.8rem);

       
        line-height:1.16;

       
        letter-spacing:.03em;

    }

    .heroPhrase::before{

        
        width:170%;
        height:250%;

        left:-35%;
        top:-45%;

    }







}















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

    #heroDynamicText{

        min-height:220px;

    }

    .heroPhrase{

        width:min(94vw,1200px);

        padding:12px 28px;

        font-size:clamp(3rem,4vw,4.4rem);

        line-height:1.18;

        letter-spacing:.025em;

    }

    .heroPhrase::before{

        width:150%;
        height:250%;

        left:-25%;
        top:-85%;

    }

    .heroPhrase::after{

        width:130%;
        height:130%;

    }

}













@media (min-width:601px) and (max-width:998px){

    #heroDynamicText{

        min-height:210px;

    }

    .heroPhrase{

        width:95vw;

        padding:12px 22px;

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

        line-height:1.15;

        letter-spacing:.02em;

    }

    .heroPhrase::before{

        width:145%;
        height:250%;

        left:-22%;
        top:-52%;

    }

}













@media (min-width:421px) and (max-width:600px){

    #heroDynamicText{

        min-height:220px;

    }

    .heroPhrase{
background-color: white;
        width:96vw;

        padding:10px 16px;

        font-size:clamp(2rem,7vw,3rem);

        line-height:1.10;

        letter-spacing:.01em;

    }

    .heroPhrase::before{

        width:145%;
        height:300%;

        left:-22%;
        top:-40%;

    }

}














@media (min-width:361px) and (max-width:420px){

    #heroDynamicText{

        min-height:220px;

    }

    .heroPhrase{

        width:97vw;

        padding:8px 10px;

        font-size:clamp(1.7rem,8vw,2.4rem);

        line-height:1.08;

        letter-spacing:0;
        background-color: white;

    }

    .heroPhrase::before{

        width:150%;
        height:290%;

        left:-25%;
        top:-60%;

    }

}













@media (max-width:360px){

    #heroDynamicText{

        min-height:240px;

    }

    .heroPhrase{

        width:98vw;

        padding:8px;

        font-size:clamp(1.45rem,8vw,2rem);

        line-height:1.05;

        letter-spacing:0;
        
background-color: white;
    }

    .heroPhrase::before{

        width:155%;
        height:300%;

        left:-28%;
        top:-58%;

    }

}










.logo-container{

position:relative;

}




.hidden-admin-access{

position:absolute;

top:30%;

right:75%;

width:38px;

height:38px;

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

border-radius:50%;





opacity:0;

z-index:500;

transition:.35s;

}





.hidden-admin-access:hover,

.hidden-admin-access:focus,

.hidden-admin-access:active{

opacity:1;

}




.hidden-lock{

width:34px;

height:34px;

display:flex;

justify-content:center;

align-items:center;

font-size:18px;

color:#5900ff;

border-radius:50%;

background:

rgba(0,255,255,.08);

border:

1px solid rgba(174, 0, 255, 0.45);

backdrop-filter:blur(12px);

box-shadow:

0 0 12px #000533,

0 0 25px #9a2eff,

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

animation:hiddenPulse 2.2s infinite;

}
@keyframes hiddenPulse{

0%{

transform:scale(.92);

box-shadow:

0 0 8px #00ffff,

0 0 18px #7b2eff;

}

50%{

transform:scale(1.08);

box-shadow:

0 0 18px #00ffff,

0 0 40px #7b2eff,

0 0 60px #00ffff;

}

100%{

transform:scale(.92);

box-shadow:

0 0 8px #00ffff,

0 0 18px #7b2eff;

}

}

@media(max-width:768px){

.hidden-admin-access{

top:30%;

right:75%;

width:42px;

height:42px;

}

}








.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;


}


}