/* VORKAN — the coming-soon page (2026-11-13). A teaser with no pictures of the machine yet. Little to read: the name in the dark
   over two oscilloscope traces, "Pure
   synthesis.", what that means in three lines, the gift with BACKTAPE and the waitlist. Graphite, the screens' blue, red only in
   the glitch, grain; on the product pages' parts (producto.css, copied by Web/fuente/vorkan_web.py). */

.led-azul { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 12px rgba(124, 192, 236, .9);
  animation: led 1.6s ease-in-out infinite; margin-right: 12px; vertical-align: middle; }
@keyframes led { 50% { opacity: .25; box-shadow: none; } }
.enlace.azul { color: var(--azul); }
.enlace.azul:hover { color: #a9d7f4; }
/* the header has no menu in the middle: its links go to the right, and the waitlist stays on the phone too */
.cabecera .derecha { margin-left: auto; }
.cabecera .derecha .enlace.azul { display: inline-flex; }

/* the name glitches now and then, red and blue apart for an instant */
[data-glitch] { position: relative; }
[data-glitch]::before, [data-glitch]::after { content: attr(data-glitch); position: absolute; inset: 0; pointer-events: none; opacity: 0; }
[data-glitch]::before { color: var(--rojo); animation: glitch-a 5.5s steps(1) infinite; }
[data-glitch]::after { color: var(--azul); animation: glitch-b 5.5s steps(1) infinite; }
@keyframes glitch-a { 0%, 91%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  92% { opacity: .8; transform: translate(-4px, 0); clip-path: inset(10% 0 55% 0); } 94% { opacity: .8; transform: translate(3px, 0); clip-path: inset(60% 0 8% 0); } 96% { opacity: 0; } }
@keyframes glitch-b { 0%, 91%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  92.5% { opacity: .8; transform: translate(4px, 0); clip-path: inset(40% 0 30% 0); } 95% { opacity: .8; transform: translate(-3px, 0); clip-path: inset(0 0 70% 0); } 96.5% { opacity: 0; } }

/* ── the opening: only the name, in the dark, over the traces ─────────────────────────────────────────────────────────── */
.vk-heroe { position: relative; min-height: max(720px, 100svh); margin-top: -66px; padding: 130px var(--margen) 60px; background: #030304;
  overflow: hidden; isolation: isolate; display: grid; justify-items: center; align-content: center; text-align: center; }
.vk-heroe::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 36% at 50% 46%, rgba(124, 192, 236, .10), transparent 70%); }
.vk-heroe::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; z-index: -1; pointer-events: none; background: linear-gradient(rgba(3, 3, 4, 0), var(--fondo)); }
.fondo-traza { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .45; }
.vk-heroe-texto { transform: translate3d(0, calc(var(--h, 0) * -90px), 0); }
.vk-pronto { font: 400 13px/1 var(--rotulo); letter-spacing: .3em; text-transform: uppercase; color: var(--azul); }
.vk-nombre { font: 400 clamp(58px, 14vw, 230px)/.95 var(--rotulo); letter-spacing: .04em; color: var(--azul); margin-top: 22px; font-weight: 400;
  text-shadow: 0 0 70px rgba(124, 192, 236, .36); }
.vk-lema { font: 400 clamp(15px, 1.7vw, 22px)/1.2 var(--rotulo); letter-spacing: .42em; text-transform: uppercase; color: var(--blanco); margin-top: 22px; padding-left: .42em; }
.vk-veil { font-size: clamp(14px, 1.2vw, 16px); color: var(--texto); margin-top: clamp(40px, 6vw, 70px); }
.js .vk-heroe-texto > * { opacity: 0; translate: 0 26px; transition: opacity 1.2s var(--curva), translate 1.4s var(--curva); }
.js .vk-heroe.listo .vk-heroe-texto > * { opacity: 1; translate: none; }
.js .vk-heroe.listo .vk-nombre { transition-delay: .12s; } .js .vk-heroe.listo .vk-lema { transition-delay: .3s; } .js .vk-heroe.listo .vk-veil { transition-delay: 1.2s; }

/* ── pure synthesis, in three lines that arrive one by one ──────────────────────────────────────────────────────────────── */
.vk-lineas { max-width: 700px; margin: 30px auto 0; text-align: center; }
.vk-lineas li { font-size: clamp(16px, 1.45vw, 20px); line-height: 1.55; color: var(--texto); padding: 8px 0; text-wrap: pretty; }
.vk-lineas li:first-child { color: var(--blanco); }
.js .vk-lineas li { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 1s var(--curva), transform 1s var(--curva); }
.js .vk-lineas.visible li { opacity: 1; transform: none; }
.js .vk-lineas.visible li:nth-child(2) { transition-delay: .5s; } .js .vk-lineas.visible li:nth-child(n+3) { transition-delay: 1s; }

.vk-mas { text-align: center; margin-top: 26px; }
/* the waitlist in the dark, a little blue light behind it */
.vk-espera { isolation: isolate; padding-bottom: clamp(90px, 11vw, 160px);
  background: radial-gradient(50% 60% at 50% 60%, rgba(124, 192, 236, .07), transparent 70%); }
.vk-lista { max-width: 520px; }
.vk-lista .lista-campo { border-color: rgba(124, 192, 236, .4); }

/* the footer: the name again, in the light of both colours */
.pie { background: radial-gradient(60% 80% at 20% 100%, rgba(255, 75, 58, .12), transparent), radial-gradient(60% 80% at 85% 100%, rgba(124, 192, 236, .14), transparent); }
.pie-grande { color: var(--azul); letter-spacing: .04em; text-shadow: 0 0 50px rgba(124, 192, 236, .25); }
.pie-grande:hover { color: #a9d7f4; }

@media (max-width: 600px) {
  .derecha .enlace:not(.azul) { display: none; }
  .vk-heroe { padding-top: 110px; min-height: max(620px, 100svh); }
  .vk-lema { letter-spacing: .3em; padding-left: .3em; }
}