@font-face { font-family: "Unbounded"; src: url("/fonts/unbounded.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/fonts/sora.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --fondo: #07051a;
  --fondo-2: #0e0a2b;
  --tinta: #f3f1ff;
  --suave: #b3acdf;
  --tenue: #9a93c8;
  --cian: #22e6ff;
  --magenta: #ff3df2;
  --violeta: #8b5cff;
  --lima: #b6ff5c;
  --vidrio: rgba(22, 16, 58, .55);
  --borde: rgba(160, 140, 255, .28);
  --neon: linear-gradient(100deg, #22e6ff 0%, #8b5cff 45%, #ff3df2 100%);
  --radio: 22px;
  --a1-rgb: 34, 230, 255;
  --a2-rgb: 139, 92, 255;
  --a3-rgb: 255, 61, 242;
  --tintes: 34,230,255|255,61,242|235,232,255;
  --titulos: "Unbounded", "Sora", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding-bottom: 72px; min-height: 100svh; background: var(--fondo); color: var(--tinta);
  font: 400 17px/1.6 "Sora", system-ui, sans-serif; overflow-x: hidden;
}
a { color: var(--cian); }
h1, h2, h3 { font-family: var(--titulos); letter-spacing: -.01em; line-height: 1.1; margin: 0; }
.neon-texto { background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- fondo animado compartido ---------- */
.cielo { position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%; display: block; }
.aurora { position: fixed; inset: -20%; z-index: -2; pointer-events: none; opacity: .5; }
.aurora i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; will-change: transform; animation: flotar 26s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { background: radial-gradient(circle, rgba(91,45,255,.85) 0%, rgba(91,45,255,.25) 35%, transparent 68%); left: 0; top: 5%; }
.aurora i:nth-child(2) { background: radial-gradient(circle, rgba(255,43,214,.7) 0%, rgba(255,43,214,.2) 35%, transparent 68%); right: 0; top: 30%; animation-duration: 32s; animation-delay: -8s; }
.aurora i:nth-child(3) { background: radial-gradient(circle, rgba(0,213,255,.6) 0%, rgba(0,213,255,.18) 35%, transparent 68%); left: 25%; bottom: 0; animation-duration: 38s; animation-delay: -14s; opacity: .7; }
@keyframes flotar { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vmax, -4vmax) scale(1.15); } 100% { transform: translate(-5vmax, 5vmax) scale(.95); } }
.rejilla {
  position: fixed; left: -50%; right: -50%; bottom: -10%; height: 45vh; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(139, 92, 255, .55) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 230, 255, .45) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(420px) rotateX(62deg); transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  animation: avanzar 3.2s linear infinite; opacity: .55;
}
@keyframes avanzar { to { background-position: 0 64px, 0 0; } }

/* ---------- piezas comunes ---------- */
.vidrio { background: var(--vidrio); border: 1px solid var(--borde); border-radius: var(--radio); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 26px;
  border-radius: 16px; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  font: 700 1.02rem/1.2 "Sora", sans-serif; color: #fff; background: var(--neon); background-size: 160% 100%;
  box-shadow: 0 10px 34px -8px rgba(139, 92, 255, .8), 0 0 0 1px rgba(255, 255, 255, .14) inset;
  transition: transform .2s ease, background-position .4s ease, box-shadow .3s ease;
}
.boton:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(255, 61, 242, .7), 0 0 0 1px rgba(255, 255, 255, .2) inset; }
.boton:active { transform: translateY(0) scale(.98); }
.boton.sec { background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1.5px rgba(34, 230, 255, .6) inset; color: var(--tinta); }
.boton.sec:hover { background: rgba(34, 230, 255, .12); }
.boton:focus-visible, .chip:focus-visible, input:focus-visible, .opcion:focus-within { outline: 3px solid var(--cian); outline-offset: 3px; }
.boton[disabled] { opacity: .6; cursor: wait; }
.etiqueta { font: 600 .74rem/1.2 "Sora", sans-serif; letter-spacing: .28em; text-transform: uppercase; color: var(--cian); }
.demo-cinta { position: fixed; z-index: 50; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(10, 7, 30, .82); border: 1px solid var(--borde); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); white-space: nowrap; }
.demo-cinta a { display: inline-flex; align-items: center; min-height: 40px; color: var(--suave); text-decoration: none; font: 600 .8rem/1 "Sora", sans-serif; padding: 8px 13px; border-radius: 999px; }
.demo-cinta a:hover, .demo-cinta a[aria-current="page"] { color: #fff; background: rgba(139, 92, 255, .35); }
.sin-js { position: fixed; inset: auto 0 0; padding: 14px; text-align: center; background: #1a1240; z-index: 60; margin: 0; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"] {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--borde);
  background: rgba(7, 5, 26, .55); color: var(--tinta); font: 500 1.02rem/1.2 "Sora", sans-serif;
}
input::placeholder { color: var(--tenue); }
input[aria-invalid="true"] { border-color: #ff9bd7; }
input:focus { border-color: var(--cian); box-shadow: 0 0 0 3px rgba(34, 230, 255, .2); outline: none; }
label { display: block; font-weight: 600; font-size: .92rem; color: var(--suave); margin: 0 0 6px; }
.error { min-height: 1.4em; margin: 6px 0 0; color: #ff9bd7; font-weight: 600; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.wa { display: inline-flex; align-items: center; gap: 10px; }
.wa svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 380px) { .demo-cinta a { padding: 8px 10px; font-size: .76rem; } }