<!
DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mundo Virtual — Experiencias Inmersivas</title>
<meta name="description" content="Explora el mundo virtual: realidades
inmersivas, metaverso, experiencias 3D y más." />
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&displ
ay=swap" rel="stylesheet">
<style>
:root{
--bg:#0e0f1a;
--bg-2:#13162b;
--card:#161a33;
--text:#e7e9fb;
--muted:#b7bee6;
--accent:#84ccff; /* celeste */
--accent-2:#b79cff; /* violeta */
--accent-3:#6ee7b7; /* verde menta */
--ring: rgba(132,204,255,.35);
--shadow: 0 10px 30px rgba(0,0,0,.35);
--radius: 22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
color:var(--text);
background: radial-gradient(1200px 800px at 10% -10%, rgba(132, 204,
255, .12), transparent 60%),
radial-gradient(1000px 600px at 110% 20%, rgba(183, 156,
255, .12), transparent 55%),
linear-gradient(180deg, var(--bg), var(--bg-2));
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI
Emoji', 'Segoe UI Symbol';
line-height:1.6;
overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.wrapper{max-width:1100px; margin:0 auto; padding:24px}
/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.1)
blur(10px); background:linear-gradient(180deg, rgba(15,16,30,.85),
rgba(15,16,30,.4)); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:34px; height:34px; border-radius:12px; display:grid; place-
items:center; background:conic-gradient(from 210deg, var(--accent), var(--accent-
2), var(--accent-3), var(--accent)); box-shadow:0 8px 25px rgba(183,156,255,.25)}
.brand span{font-weight:700; letter-spacing:.3px}
.nav [Link]{padding:10px 16px; border-radius:14px; background:linear-
gradient(135deg, rgba(132,204,255,.18), rgba(183,156,255,.18)); border:1px solid
rgba(255,255,255,.12); transition:.25s ease; font-weight:600}
.nav [Link]:hover{transform:translateY(-1px); box-shadow:0 10px 24px
rgba(132,204,255,.15)}
/* Hero */
.hero{padding:64px 24px 32px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-
items:center}
.eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
border-radius:999px; background:rgba(99,102,241,.14); border:1px solid
rgba(255,255,255,.08); font-size:12px; letter-spacing:.4px}
.eyebrow svg{width:16px; height:16px}
h1{font-family:Poppins, Inter, system-ui, sans-serif; font-weight:700; font-
size:clamp(32px, 5vw, 56px); line-height:1.05; margin:14px 0;}
.grad{background:linear-gradient(90deg, var(--accent), var(--accent-2) 55%,
var(--accent-3)); -webkit-background-clip:text; background-clip:text;
color:transparent}
.lead{font-size:clamp(16px, 2.2vw, 19px); color:var(--muted); max-width:62ch}
.cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.btn-primary, .btn-ghost{padding:14px 18px; border-radius:14px; font-
weight:600; border:1px solid transparent; transition:.25s ease;}
.btn-primary{background:linear-gradient(135deg, rgba(132,204,255,.24),
rgba(183,156,255,.24)); border-color:rgba(255,255,255,.14); box-shadow:0 10px 26px
rgba(132,204,255,.18)}
.btn-primary:hover{transform:translateY(-1.5px)}
.btn-ghost{background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.1)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.hero-art{
position:relative; height:360px; border-radius:var(--radius);
background:radial-gradient(120% 120% at 85% 20%, rgba(132,204,255,.18), transparent
40%), linear-gradient(160deg, #141735, #0e1229);
border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow);
overflow:hidden;
}
.orb{position:absolute; width:120px; height:120px; border-radius:50%;
filter:blur(10px); opacity:.85; animation:float 10s ease-in-out infinite}
.orb--a{top:36px; left:30px; background:radial-gradient(circle at 30% 30%,
var(--accent), transparent 60%)}
.orb--b{bottom:30px; right:40px; width:160px; height:160px; background:radial-
gradient(circle at 70% 70%, var(--accent-2), transparent 60%); animation-
duration:12s}
.orb--c{bottom:18%; left:48%; width:90px; height:90px; background:radial-
gradient(circle at 50% 50%, var(--accent-3), transparent 55%); animation-
duration:8s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-
10px)}}
.grid-lines{position:absolute; inset:0; background-image:linear-
gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg,
rgba(255,255,255,.05) 1px, transparent 1px); background-size:40px 40px; mask-
image:radial-gradient(130% 90% at 50% 10%, black 60%, transparent 100%)}
.holo{position:absolute; inset:auto 20px 20px auto; padding:10px 14px; border-
radius:14px; background:linear-gradient(145deg, rgba(183,156,255,.2),
rgba(132,204,255,.2)); border:1px solid rgba(255,255,255,.18); font-size:13px;
backdrop-filter:blur(8px); box-shadow:0 10px 24px rgba(0,0,0,.25)}
/* Features */
.section{padding:36px 24px}
.kicker{letter-spacing:.2em; text-transform:uppercase; font-size:12px;
color:var(--muted)}
.features{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-
top:16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.03),
rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-
radius:var(--radius); padding:20px; box-shadow:var(--shadow);
transition:transform .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-6px); border-color:rgba(132,204,255,.3)}
.icon{width:36px; height:36px; border-radius:12px; display:grid; place-
items:center; background:linear-gradient(135deg, rgba(132,204,255,.2),
rgba(183,156,255,.2)); border:1px solid rgba(255,255,255,.12); box-shadow:0 10px
24px rgba(132,204,255,.15)}
.card h3{margin:12px 0 6px; font-family:Poppins, Inter, sans-serif}
.card p{color:var(--muted)}
/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-
top:16px}
.tile{position:relative; height:220px; border-radius:var(--radius);
overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#121532}
.tile::before{content:""; position:absolute; inset:0; background:linear-
gradient(120deg, rgba(132,204,255,.25), rgba(183,156,255,.12),
rgba(110,231,183,.18)); opacity:.35}
.tile .label{position:absolute; left:14px; bottom:12px; padding:8px 12px;
border-radius:12px; background:rgba(0,0,0,.35); border:1px solid
rgba(255,255,255,.16); font-weight:600; font-size:14px}
/* CTA */
.cta-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-
items:center; margin-top:16px}
.panel{background:linear-gradient(180deg, rgba(255,255,255,.04),
rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); border-radius:var(--
radius); padding:20px; box-shadow:var(--shadow)}
.panel form{display:flex; gap:10px; flex-wrap:wrap}
input[type="email"]{flex:1; min-width:240px; padding:14px 16px; border-
radius:12px; border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.06); color:var(--text); outline:none}
input[type="email"]:focus{border-color:var(--ring); box-shadow:0 0 0 4px var(--
ring)}
button[type="submit"]{padding:14px 18px; border-radius:12px; border:1px solid
rgba(255,255,255,.14); background:linear-gradient(135deg, rgba(132,204,255,.24),
rgba(183,156,255,.24)); color:var(--text); font-weight:700; cursor:pointer}
/* Footer */
footer{padding:30px 24px; color:var(--muted); border-top:1px solid
rgba(255,255,255,.06); margin-top:30px}
/* Responsive */
@media (max-width: 900px){
.hero-grid, .cta-wrap{grid-template-columns:1fr;}
.features, .gallery{grid-template-columns:1fr 1fr}
.hero{padding-top:38px}
}
@media (max-width: 640px){
.features, .gallery{grid-template-columns:1fr}
.wrapper{padding:18px}
}
/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
.orb{animation:none}
.card:hover{transform:none}
}
</style>
</head>
<body>
<header>
<div class="wrapper nav" role="navigation" aria-label="Principal">
<div class="brand">
<div class="logo" aria-hidden="true"></div>
<span>Mundo Virtual</span>
</div>
<nav class="menu">
<a class="btn" href="#explora">Explorar</a>
<a class="btn" href="#temas">Temas</a>
<a class="btn" href="#unete">Únete</a>
</nav>
</div>
</header>
<main>
<!-- HERO -->
<section class="hero">
<div class="wrapper hero-grid">
<div>
<span class="eyebrow" aria-label="Etiqueta">
<!-- sparkles icon -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-
hidden="true"><path stroke-width="1.5" d="M12 3l2 4 4 2-4 2-2 4-2-4-4-2 4-2 2-4zM19
14l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2z"/></svg>
Realidad inmersiva
</span>
<h1>Descubre el <span class="grad">mundo virtual</span> y crea
experiencias que trascienden la pantalla.</h1>
<p class="lead">Del metaverso a los gemelos digitales: aprende cómo la
VR/AR, la IA y las comunidades online están redefiniendo cómo jugamos, aprendemos y
trabajamos.</p>
<div class="cta">
<a class="btn-primary" href="#temas">Ver Temas</a>
<a class="btn-ghost" href="#unete">Recibir Novedades</a>
</div>
</div>
<div class="hero-art" aria-hidden="true">
<div class="grid-lines"></div>
<div class="orb orb--a"></div>
<div class="orb orb--b"></div>
<div class="orb orb--c"></div>
<div class="holo">Modo Inmersivo • 3D • Social</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section id="temas" class="section">
<div class="wrapper">
<p class="kicker">Temas clave</p>
<div class="features" role="list">
<article class="card" role="listitem">
<div class="icon" aria-hidden="true">
<!-- headset icon -->
<svg viewBox="0 0 24 24" width="22" height="22" fill="none"
stroke="currentColor"><path stroke-width="1.5" d="M4 12a8 8 0 0116 0v6a2 2 0 01-2
2h-2v-6h4M6 20H4a2 2 0 01-2-2v-4h4v6z"/></svg>
</div>
<h3>Realidad Virtual</h3>
<p>Vive mundos 3D con presencia real. Diseña entornos, juegos y
simuladores que despierten emociones.</p>
</article>
<article class="card" role="listitem">
<div class="icon" aria-hidden="true">
<!-- cube icon -->
<svg viewBox="0 0 24 24" width="22" height="22" fill="none"
stroke="currentColor"><path stroke-width="1.5" d="M12 2l9 5-9 5-9-5 9-5zm9 7v8l-9
5-9-5V9"/></svg>
</div>
<h3>Metaverso & Comunidades</h3>
<p>Espacios persistentes donde socializar, crear y comerciar con
avatares y economías digitales.</p>
</article>
<article class="card" role="listitem">
<div class="icon" aria-hidden="true">
<!-- spark cpu icon -->
<svg viewBox="0 0 24 24" width="22" height="22" fill="none"
stroke="currentColor"><path stroke-width="1.5" d="M9 3v3M15 3v3M9 18v3M15 18v3M3
9h3M3 15h3M18 9h3M18 15h3"/><rect x="7" y="7" width="10" height="10" rx="2" ry="2"
stroke-width="1.5"/></svg>
</div>
<h3>IA Generativa</h3>
<p>Modelos que crean mundos, personajes y experiencias personalizadas
en tiempo real.</p>
</article>
</div>
</div>
</section>
<!-- GALLERY / EXPLORA -->
<section id="explora" class="section">
<div class="wrapper">
<p class="kicker">Explora</p>
<div class="gallery">
<div class="tile" style="background-image: radial-gradient(80% 60% at 30%
20%, rgba(132,204,255,.25), transparent 55%), url('data:image/svg+xml;utf8,<svg
xmlns=\'[Link] width=\'800\'
height=\'600\'><defs><linearGradient id=\'g\' x1=\'0\' x2=\'1\'><stop stop-
color=\'%23b79cff\'/><stop offset=\'1\'
stop-color=\'%2384ccff\'/></linearGradient></defs><rect width=\'100%\'
height=\'100%\' fill=\'%2311162e\'/><g fill=\'none\' stroke=\'url(%23g)\'
opacity=\'.35\'></g></svg>'); background-size:cover; background-position:center;">
<span class="label">Salas sociales</span></div>
<div class="tile" style="background-image: radial-gradient(60% 60% at 70%
20%, rgba(110,231,183,.25), transparent 60%), url('data:image/svg+xml;utf8,<svg
xmlns=\'[Link] width=\'800\'
height=\'600\'><defs><linearGradient id=\'g2\' x1=\'0\' x2=\'1\'><stop stop-
color=\'%236ee7b7\'/><stop offset=\'1\'
stop-color=\'%2384ccff\'/></linearGradient></defs><rect width=\'100%\'
height=\'100%\' fill=\'%2310162f\'/><g fill=\'none\' stroke=\'url(%23g2)\'
opacity=\'.35\'></g></svg>'); background-size:cover; background-position:center;">
<span class="label">Eventos en vivo</span></div>
<div class="tile" style="background-image: radial-gradient(70% 60% at 50%
30%, rgba(183,156,255,.25), transparent 60%), url('data:image/svg+xml;utf8,<svg
xmlns=\'[Link] width=\'800\'
height=\'600\'><defs><linearGradient id=\'g3\' x1=\'0\' x2=\'1\'><stop stop-
color=\'%23b79cff\'/><stop offset=\'1\'
stop-color=\'%236ee7b7\'/></linearGradient></defs><rect width=\'100%\'
height=\'100%\' fill=\'%23101730\'/><g fill=\'none\' stroke=\'url(%23g3)\'
opacity=\'.35\'></g></svg>'); background-size:cover; background-position:center;">
<span class="label">Aulas y aprendizaje</span></div>
</div>
</div>
</section>
<!-- CTA / ÚNETE -->
<section id="unete" class="section">
<div class="wrapper cta-wrap">
<div class="panel">
<h2 style="margin:0 0 8px; font-family:Poppins, Inter, sans-serif">Únete
a la comunidad</h2>
<p style="color:var(--muted); margin-top:6px">Recibe guías, recursos y
eventos para construir experiencias virtuales cautivadoras.</p>
<form onsubmit="[Link](); [Link]();
[Link]('button').textContent='¡Listo!';
setTimeout(()=>[Link]('button').textContent='Suscribirme', 1800)">
<label class="sr-only" for="email">Correo</label>
<input id="email" type="email" placeholder="tu@[Link]" aria-
label="Correo electrónico" required />
<button type="submit">Suscribirme</button>
</form>
</div>
<div class="panel" aria-live="polite">
<h3 style="margin:0 0 8px; font-family:Poppins, Inter, sans-serif">¿Por
qué ahora?</h3>
<ul style="margin:0; padding-left:18px; color:var(--muted)">
<li>La adopción de dispositivos XR está creciendo rápidamente.</li>
<li>La IA acelera la creación de mundos y contenidos.</li>
<li>La educación y el trabajo remoto piden experiencias
inmersivas.</li>
</ul>
</div>
</div>
</section>
</main>
<footer>
<div class="wrapper">
<small>© <span id="year"></span> Mundo Virtual. Hecho con ❤ para inspirar
experiencias inmersivas.</small>
</div>
</footer>
<script>
[Link]('year').textContent = new Date().getFullYear();
</script>
</body>
</html>