/* ============================= */
/* BASE */
/* ============================= */

body{

margin:0;
padding:0;

font-family:Arial, Helvetica, sans-serif;

background:#020617;
color:white;

line-height:1.6;

overflow-x:hidden;

}


/* ============================= */
/* FONDO NEURONAL */
/* ============================= */

#metaverse-bg{

position:fixed;

top:0;
left:0;

width:100vw;
height:100vh;

z-index:-1;

pointer-events:none;

}


/* ============================= */
/* LINKS */
/* ============================= */

a{

color:white;
text-decoration:none;

transition:0.25s;

}

a:hover{

color:#cfe6ff;

}


/* ============================= */
/* HEADER */
/* ============================= */

header{

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

padding:20px 24px;

flex-wrap:wrap;

}


/* LOGO */

.logo{

display:flex;
align-items:center;
gap:10px;

}

.logo img{

height:60px;

filter:drop-shadow(0 0 10px rgba(90,160,255,0.7));

}

.logo span{

font-size:20px;
font-weight:bold;

}


/* ============================= */
/* NAV */
/* ============================= */

nav{

display:flex;
gap:16px;

flex-wrap:wrap;

}

nav a{

font-size:15px;

opacity:0.9;

}

nav a:hover{

opacity:1;

}


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

.hero{

text-align:center;

padding:80px 20px 40px;

max-width:900px;

margin:auto;

}

.hero h1{

font-size:42px;

margin-bottom:16px;

}

.hero p{

font-size:18px;

opacity:0.9;

}


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

.btn{

display:inline-block;

margin-top:20px;

padding:12px 26px;

border:1px solid rgba(111,168,255,0.5);

border-radius:6px;

background:rgba(90,160,255,0.12);

color:white;

transition:0.25s;

}

.btn:hover{

background:rgba(90,160,255,0.3);

border-color:#6fa8ff;

}


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

.section{

max-width:1000px;

margin:auto;

padding:40px 20px;

text-align:center;

}

.section h2{

font-size:30px;

margin-bottom:10px;

}

.section p{

font-size:17px;

opacity:0.9;

}


/* ============================= */
/* GRID */
/* ============================= */

.grid{

display:grid;

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

gap:30px;

margin-top:30px;

}


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

.card{

background:rgba(255,255,255,0.05);

border:1px solid rgba