/* ===============================
   ERS.control Electric
   Diseño tecnológico moderno
================================*/


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


html{
    scroll-behavior:smooth;
}



body{

    background:
    linear-gradient(135deg,#0f172a,#0369a1,#0ea5e9);

    color:white;

    overflow-x:hidden;

}



/* efecto de luces en movimiento */

body::before{

content:"";

position:fixed;

width:600px;

height:600px;

background:#38bdf8;

border-radius:50%;

filter:blur(150px);

opacity:.25;

top:-200px;

left:-200px;

animation:movimiento 8s infinite alternate;

z-index:-1;

}



@keyframes movimiento{

from{

transform:translate(0,0);

}


to{

transform:translate(300px,200px);

}

}






/* ===============================
        NAVBAR
================================*/


header{


width:100%;

padding:20px 8%;

display:flex;

justify-content:space-between;

align-items:center;

position:fixed;

top:0;

z-index:1000;


background:rgba(15,23,42,.55);

backdrop-filter:blur(15px);


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


}




.logo-area{


display:flex;

align-items:center;

gap:15px;

}



.logo-area img{


width:55px;

height:55px;

object-fit:contain;


}



.logo-area h2{


font-size:25px;

color:#38bdf8;

}




nav{


display:flex;

align-items:center;

gap:25px;

}



nav a{


color:white;

text-decoration:none;

font-weight:bold;

transition:.3s;


}



nav a:hover{


color:#38bdf8;

transform:translateY(-3px);


}




.login-btn{


background:#0ea5e9;

padding:12px 20px;

border-radius:30px;

box-shadow:0 0 20px #0ea5e9;


}



.login-btn:hover{


background:#38bdf8;

color:white;


}







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


.hero{


min-height:100vh;

padding:130px 8% 50px;

display:flex;

align-items:center;

justify-content:space-between;


}



.hero-text{


width:50%;

animation:entrada 1.5s ease;


}




@keyframes entrada{


from{

opacity:0;

transform:translateX(-80px);

}


to{

opacity:1;

transform:translateX(0);

}

}



.hero h1{


font-size:55px;

line-height:1.1;


}



.hero h1 span{


color:#38bdf8;

text-shadow:0 0 20px #0ea5e9;


}



.hero h2{


margin:20px 0;

font-size:30px;

}



.hero p{


font-size:18px;

line-height:1.7;

color:#dbeafe;


}



.hero-image img{


width:350px;


animation:flotar 4s infinite ease-in-out;


filter:drop-shadow(0 0 30px #38bdf8);


}




@keyframes flotar{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-25px);

}


}







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


.buttons{


margin-top:35px;

display:flex;

gap:20px;


}



.btn-primary,
.btn-secondary{


padding:15px 30px;

border-radius:30px;

text-decoration:none;

font-weight:bold;

transition:.4s;


}



.btn-primary{


background:#0ea5e9;

color:white;

box-shadow:0 0 20px #0ea5e9;


}



.btn-primary:hover{


transform:scale(1.08);


}




.btn-secondary{


border:2px solid #38bdf8;

color:white;


}



.btn-secondary:hover{


background:#38bdf8;

}





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


.section{


margin:80px auto;

width:85%;


padding:40px;


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

backdrop-filter:blur(20px);


border-radius:25px;


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


box-shadow:0 20px 40px rgba(0,0,0,.25);


animation:aparecer linear;

animation-timeline:view();


}





.section h2{


text-align:center;

font-size:35px;

margin-bottom:25px;

color:#38bdf8;


}



.section p{


text-align:center;

font-size:18px;

line-height:1.7;


}







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


.cards{


display:grid;

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

gap:25px;


}




.card{


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


padding:30px;


border-radius:20px;


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


transition:.4s;


}



.card:hover{


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


background:rgba(14,165,233,.25);


box-shadow:0 0 30px #0ea5e9;


}




.card h3{


color:#38bdf8;

margin-bottom:15px;


}





/* ===============================
      MULTIMEDIA
================================*/


.media-box{


display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;


}



.media-box p{


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

padding:25px;

border-radius:20px;

}





/* ===============================
        CONTACTO
================================*/


.contact{


text-align:center;

font-size:18px;


}


.contact a{


color:#38bdf8;

text-decoration:none;


}



.contact a:hover{


text-shadow:0 0 15px #38bdf8;


}






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


footer{


padding:30px;

text-align:center;


background:#020617;


color:#94a3b8;


}








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


@media(max-width:900px){


header{


flex-direction:column;

gap:15px;


}



nav{


flex-wrap:wrap;

justify-content:center;


}


.hero{


flex-direction:column;

text-align:center;


}



.hero-text{


width:100%;


}



.hero h1{


font-size:40px;


}



.hero-image img{


width:250px;


}



}