:root { --fondo: #0f1113; --texto: #E8E8E8; --tenue: #A7A7A9; --enlace: #07F5AE; --punto: #D4FF00; --arena: rgba(7, 245, 174, 0.30); --arena2: rgba(212, 255, 0, 0.26); }
@media (prefers-color-scheme: light) {
  :root { --fondo: #ffffff; --texto: #3F3F3F; --tenue: #5c5c5e; --enlace: #B8005F; --punto: #B8005F; --arena: rgba(7, 245, 174, 0.45); --arena2: rgba(184, 0, 95, 0.25); }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fondo); color: var(--texto);
  font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: grid; place-items: center; padding: 1.5rem;
}
main { max-width: 36rem; text-align: center; }
h1 { font-size: clamp(2.5rem, 10vw, 4rem); letter-spacing: 0.12em; margin: 0 0 1rem; }
h1 .punto { color: var(--punto); }
.que { font-size: 1.2rem; margin: 0 0 0.5rem; }
.como { color: var(--tenue); margin: 0 0 2rem; }
.contacto { margin: 0; }
a { color: var(--enlace); }
#cimatica { position: fixed; inset: 0; width: 100%; height: 100%; color: var(--arena); border: 0 solid var(--arena2); z-index: 0; pointer-events: none; }
main { position: relative; z-index: 1; }