/* ====CONFIGURACIÓN GENERAL====== */

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

body{
font-family:'Exo 2',sans-serif;
background:#050714;
color:#e0e0e0;
line-height:1.6;
overflow-x:hidden;
}
.contenedor{
max-width:1400px;
margin:auto;
}

.titulo{
font-family:'Orbitron',sans-serif;
font-size:3rem;
text-align:center;
color:#00ff88;
margin-bottom:1rem;
}

.subtitulo{
text-align:center;
color:#8892b0;
max-width:700px;
margin:auto;
margin-bottom:4rem;
}


/* ======FONDOS DECORATIVOS=========== */

.fondo-cuadrados{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:
linear-gradient(90deg,rgba(0,255,136,.015) 1px,transparent 1px),
linear-gradient(rgba(0,255,136,.015) 1px,transparent 1px);
background-size:50px 50px;
pointer-events:none;
z-index:0;
}

.fondo-color{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-image:
radial-gradient(circle at 20% 50%,rgba(0,255,136,0.25) 0%,transparent 50%),
radial-gradient(circle at 80% 80%,rgba(0,212,255,0.25) 0%,transparent 50%);
pointer-events:none;
z-index:0;
}

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

nav{
position:fixed;
top:0;
width:100%;
background:rgba(10,14,39,.95);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(0,255,136,.2);
z-index:100;
padding:1rem 0;
}

.nav-container{
max-width:1400px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 2rem;
}

.logo{
font-family:'Orbitron',sans-serif;
font-size:1.8rem;
font-weight:900;
color:#00ff88;
text-shadow:0 0 20px rgba(0,255,136,.5);
}

.nav-links{
display:flex;
gap:2rem;
list-style:none;
}

.nav-links a{
text-decoration:none;
color:#e0e0e0;
font-size:.9rem;
text-transform:uppercase;
letter-spacing:1px;
font-weight:600;
position:relative;
}

.nav-links a::after{
content:'';
position:absolute;
bottom:-5px;
left:0;
width:0;
height:2px;
background:#00ff88;
}

.nav-links a:hover{
color:#00ff88;
}

.nav-links a:hover::after{
width:100%;
}

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

.btn{
padding: 1rem 2.5rem;
border: none;
border-radius: 0;
font-family: 'Orbitron', sans-serif;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
overflow: hidden;
text-decoration: none;
display: inline-block;
border-radius:20px;
}

.btn-inicio-1{
background:#00ff88;
color:#0a0e27;
box-shadow:0 0 30px rgba(0,255,136,.4);
}

.btn-inicio-1:hover{
transform:translateY(-3px);
box-shadow:0 5px 40px rgba(0,255,136,.6);
}

.btn-inicio-2{
background:transparent;
border:2px solid #00d4ff;
color:#00d4ff;
}

.btn-inicio-2:hover{
background:#00d4ff;
color:#0a0e27;
}

.btn-login{
padding:.7rem 1.5rem;
background:transparent;
border:2px solid #00ff88;
color:#00ff88;
font-family:'Orbitron',sans-serif;
font-size:.8rem;
text-transform:uppercase;
border-radius:20px;
}

.btn-login:hover{
background:#00ff88;
color:#0a0e27;
}

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

.inicio{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:2rem;
position:relative;
}

.inicio h1{
font-family:'Orbitron',sans-serif;
font-size:5rem;
margin-bottom:1rem;
color:#00ff88;
text-shadow:0 0 30px rgba(0,255,136,.5);
}

.inicio p{
font-size:1.4rem;
color:#8892b0;
max-width:700px;
margin:auto;
margin-bottom:3rem;
}

.botones-inicio{
display:flex;
gap:1.5rem;
justify-content:center;
flex-wrap:wrap;
}

/* ========= Servicios =========== */

.servicios{
padding:8rem 2rem;
position:relative;
z-index:2;
}

.contenedor-servicios{
max-width:1400px;
margin:auto;
}

.grid{
display:grid;
gap:2.5rem;
}

.bloque-grid{
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}

.carta-servicios{
background:rgba(10,14,39,.6);
border:1px solid rgba(0,255,136,.2);
backdrop-filter:blur(10px);
padding:2.5rem;
}

.carta-card:hover{
transform:translateY(-10px);
border-color:#00ff88;
box-shadow:0 10px 50px rgba(0,255,136,.3);
}

.icono-servicio{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
margin-bottom:1rem;
background:linear-gradient(135deg,#00ff88,#00d4ff);
clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}

.carta-servicios h3{
font-family:'Orbitron',sans-serif;
margin-bottom:.5rem;
color:#00ff88;
}

.carta-servicios p{
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
unicode-bidi: isolate;
}

/* =========Sobre Nosotros=========== */

.sobrenosotros{
background: rgba(0, 212, 255, 0.05);
border-top: 1px solid rgba(0, 255, 136, 0.1);
border-bottom: 1px solid rgba(0, 255, 136, 0.1);
}

.contenedor-grid-sobrenosotros{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}

.div-sobrenosotros{
text-align: center;
padding: 2rem;
transition: transform 0.3s;
background: rgba(0, 255, 136, 0.03);
border-radius: 8px;
margin-bottom: 5rem;
}

.contenedor-sobrenosotros{
max-width:1400px;
margin:auto;
}

.parrafo-sobrenosotros{
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
unicode-bidi: isolate;
}
.numero-sobrenosotros{
font-family:'Orbitron',sans-serif;
font-size:4rem;
color: #00ff88;
margin-bottom:1rem;
}


/* ========Estadisticas============== */
.estadisticas {
    background: rgba(0, 212, 255, 0.05);
    padding: 6rem 2rem;
    border-top: 1px solid rgba(0,255,136,.1);
    border-bottom: 1px solid rgba(0,255,136,.1);
}
.estadisticas-grid{
display: grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
text-align:center;
gap: 3rem;

}

.estadisticas-number{
font-family:'Orbitron',sans-serif;
font-size:4rem;
color:#00ff88;
text-shadow:0 0 30px rgba(0,255,136,.5);
}

.estadisticas-label{
color:#8892b0;
font-size:.9rem;
letter-spacing:2px;
text-transform:uppercase;
}
.estadisticas-bloque {
    padding: 2rem;
    
}

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

.contact{
background:rgba(10,14,39,.8);
padding: 6rem 2rem 3rem;
}

.contact-form{
display:grid;
gap:1.5rem;
margin-top:3rem;
}

input,textarea{
width:100%;
padding:1rem;
background:rgba(0,255,136,.05);
border:1px solid rgba(0,255,136,.3);
color:#e0e0e0;
font-family:'Exo 2',sans-serif;
}

input:focus,textarea:focus{
outline:none;
border-color:#00ff88;
background:rgba(0,255,136,.1);
box-shadow:0 0 20px rgba(0,255,136,.2);
}

.contact-contenido {
max-width: 800px;
margin: 0 auto;
text-align: center;
}

textarea{
resize:vertical;
min-height:150px;
}

/* ========LOGIN========= */

.login{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(5,7,20,.95);
backdrop-filter:blur(10px);
z-index:1000;
align-items:center;
justify-content:center;
}

.login.active{
display:flex;
}

.contenedor-login{
background:rgba(10,14,39,.95);
padding:3rem;
max-width:450px;
width:90%;
position:relative;
border-radius:20px;
}

#loginForm input{
width:100%;
padding:12px;
margin:10px 0;
border-radius:8px;
border:1px solid #00ff88;
background:#0a0e27;
color:white;
box-sizing:border-box;
}

.btnLogin{
width:100%;
padding:12px;
margin-top:10px;
border-radius:25px;
border:2px solid #00ff88;
background:transparent;
color:#00ff88;
font-weight:bold;
cursor:pointer;
transition:0.3s;
}

.btnLogin:hover{
background:#00cc6a;
color:#0a0e27;
}

.btn-registrarse{
background:transparent;
color:#00ff88;
}

.btn-registrarse:hover{
background:#00ff88;
color:#0a0e27;
}

.btnVolverLogin{
background:transparent;
}

.btnVolverLogin:hover{
background: #00ff88;

}

.login-close{
position:absolute;
top:1rem;
right:1rem;
background:none;
border:none;
font-size:2rem;
color:#00ff88;
cursor:pointer;
}



/* =========FOOTER=========== */
.contenedor-footer {
    max-width: 1400px;
    margin: 0 auto;
}
footer{
background:#050714;
border-top:1px solid rgba(0,255,136,.2);
padding:3rem 2rem;
text-align:center;
}

.footer-links{
display:flex;
justify-content:center;
gap:2rem;
flex-wrap:wrap;
margin-bottom:2rem;
}

.footer-links a{
color:#8892b0;
text-decoration:none;
}

.footer-links a:hover{
color:#00ff88;
}

.copyright{
color:#8892b0;
font-size:.9rem;
}

/* BOTON menu oculto para pc */

.menu-movil{
display:none;
font-size:2rem;
background:none;
border:none;
color:#00ff88;
cursor:pointer;
}

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


@media (max-width:768px){

.menu-movil{
display:block;
}

.nav-links{
display:none;
position:absolute;
top:70px;
left:0;
width:100%;
background:#0a0e27;
flex-direction:column;
align-items:center;
gap:1.5rem;
padding:2rem 0;
display:none;
}

.nav-links.active{
display:flex;
}

.inicio h1{
font-size:2.5rem;
}

.inicio p{
font-size:1rem;
padding:0 1rem;
}

.botones-inicio{
flex-direction:column;
}

.titulo{
font-size:2rem;
}

.subtitulo{
font-size:.9rem;
padding:0 1rem;
}

.carta-servicios{
padding:1.5rem;
}

}