html {
  scroll-behavior: smooth; /* Scroll suave */
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;}
body{background:#0c0f1f;color:white;line-height:1.5;overflow-x:hidden;}
a{text-decoration:none;color:white;}

/* NAV futurista */
nav{
position:fixed;top:0;width:100%;background:#0a0d1a;z-index:1000;
display:grid;grid-template-rows:auto auto auto;gap:15px;padding:20px;
border-bottom:2px solid #00f0ff;
box-shadow:0 0 10px rgba(0,255,255,0.2);
}

/* TITULO */
nav h1{text-align:center;font-size:2em;color:#00f0ff;text-shadow:0 0 25px #00f0ff;}

/* MENÚ CIRCULAR 3D animado */
@keyframes pulse {0%,100%{box-shadow:0 10px 10px rgba(0,255,255,0.4),0 0 5px rgba(0,255,255,0.2) inset;}50%{box-shadow:0 10px 15px rgba(0,255,255,0.7),0 0 10px rgba(0,255,255,0.3) inset;}}
.menu-circular{
display:flex;justify-content:center;gap:35px;flex-wrap:wrap;margin-bottom:10px;
}
.menu-circular a{
width:125px;height:125px;border-radius:50%;background:linear-gradient(145deg,#0d1233,#1b224d);
display:flex;align-items:center;justify-content:center;font-weight:bold;
color:#00f0ff;transition:0.4s all;transform-style:preserve-3d;animation:pulse 2s infinite;
}
.menu-circular a:hover{
transform:translateY(-8px) rotateX(10deg) rotateY(10deg) scale(1.1);
box-shadow:0 15px 10px rgba(0,255,255,0.9),0 0 15px rgba(0,255,255,0.5) inset;
}

/* BOTONES CUADRADOS futurista animados */
.menu-cuadrado{
display:flex;justify-content:center;gap:55px;flex-wrap:wrap;margin-bottom:5px;
}
@keyframes pulse-btn {0%,100%{box-shadow:0 6px 12px rgba(0,255,255,0.3),0 0 10px rgba(0,255,255,0.2) inset;}50%{box-shadow:0 12px 24px rgba(0,255,255,0.6),0 0 15px rgba(0,255,255,0.4) inset;}}
.menu-btn{
padding:12px 25px;background:linear-gradient(145deg,#0d1233,#1b224d);
border-radius:12px;cursor:pointer;color:#00f0ff;font-weight:bold;
gap: 55px;
transition:0.5s all;transform-style:preserve-3d;animation:pulse-btn 2s infinite;
}
.menu-btn:hover{
transform:translateY(-5px) scale(1.05) rotateX(5deg);
background:linear-gradient(145deg,#00f0ff,#0d1233);
color:#000;
}
.menu-btn.activo{
background:linear-gradient(145deg,#00f0ff,#0d1233);
color:#000;
box-shadow:0 12px 4px rgba(0,255,255,0.6),0 0 20px rgba(0,255,255,0.4) inset;
}

/* SUBMENÚ horizontal futurista */
.submenu{
display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:8px;display:none;
}
.submenu a{
background:linear-gradient(145deg,#0d1233,#1b224d);padding:8px 20px;border-radius:8px;
transition:0.3s all;box-shadow:0 5px 10px rgba(0,255,255,0.3);
color:#00f0ff;
}
.submenu a:hover{
background:linear-gradient(145deg,#00f0ff,#0d1233);
color:#000;
transform:scale(1.1) translateY(-3px);
box-shadow:0 10px 20px rgba(0,255,255,0.6);
}

/* HERO imagen principal y neón */
@keyframes neon {
0%,100%{text-shadow:0 0 5px #00f0ff,0 0 10px #00f0ff,0 0 20px #00f0ff,0 0 30px #00f0ff,0 0 40px #00f0ff;}
/* 50%{text-shadow:0 0 10px #00f0ff,0 0 20px #00f0ff,0 0 30px #00f0ff,0 0 40px #00f0ff,0 0 50px #00f0ff;} */
}
.hero{
height:100vh;
background:url(https://picsum.photos/1600) center/cover no-repeat;
display:flex;align-items:center;justify-content:center;font-size:4em;
color:#333737;
font-weight:bold;
animation:neon 1.5s infinite alternate;
text-align:center;
}

/* Secciones normales */
section{padding:180px 10%;min-height:100vh;scroll-margin-top:180px;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;}
.card{background:#1a1f44;padding:40px;border-radius:12px;text-align:center;transition:0.3s transform,0.3s box-shadow;}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,0.6);}
.acerca{display:flex;gap:20px;flex-wrap:wrap;}
.acerca img{width:100%;max-width:400px;}
.acerca div{flex:1;}
form{max-width:500px;margin:auto;display:flex;flex-direction:column;gap:10px;}
input,textarea{padding:10px;border:none;border-radius:6px;}
button{padding:10px;background:#00b4ff;border:none;color:white;cursor:pointer;transition:0.2s transform;}
button:hover{transform:scale(1.05);}

/* FOOTER elegante con iconos de redes */
footer{background:#040714;padding:40px;text-align:center;}
footer p{margin:5px;}
footer .redes{margin-top:15px;}
footer .redes a{margin:0 10px;color:#00f0ff;font-size:1.5em;transition:0.3s transform;}
footer .redes a:hover{transform:scale(1.3);color:#fff;}

/* RESPONSIVE */
@media(max-width:800px){
.menu-circular a{width:120px;height:120px;font-size:14px;}
.grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.hero{font-size:2.5em;}
}