/* KOMBINAT — the coming-soon page (2026-11-03). His words: "le haces su página web con poca información, que si coming soon y pocos
   detalles de lo que es y recalca que este synth es completamente síntesis, que nada de samples". Little to read: the console in
   the dark with a light wandering over it, the name, "Pure synthesis.", what that means in three lines, the gift with BACKTAPE and
   the waitlist. KOMBINAT's own look (graphite, the screens' blue, red only in the glitch, grain), on the product pages' parts
   (producto.css, copied by Web/fuente/kombinat_web.py). The console is always whole: never masked into pieces (03-11). */

.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: the name over the console, the console in half-light, a light finding it ─────────────────────────────── */
.ko-heroe { position: relative; min-height: max(760px, 100svh); margin-top: -66px; padding: 130px var(--margen) 40px; background: #030304;
  overflow: hidden; isolation: isolate; display: grid; justify-items: center; align-content: center; text-align: center; }
.ko-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: .35; }
.ko-heroe-texto { transform: translate3d(0, calc(var(--h, 0) * -90px), 0); }
.ko-pronto { font: 400 13px/1 var(--rotulo); letter-spacing: .3em; text-transform: uppercase; color: var(--azul); }
.ko-nombre { font: 400 clamp(54px, 12.5vw, 200px)/.95 var(--rotulo); letter-spacing: .04em; color: var(--azul); margin-top: 22px; font-weight: 400;
  text-shadow: 0 0 60px rgba(124, 192, 236, .32); }
.ko-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; }
.ko-maquina { position: relative; width: min(1000px, 100%); margin: clamp(34px, 5vw, 64px) 0 0; transform: translate3d(0, calc(var(--h, 0) * -40px), 0); }
/* here the console is seen (the company's page keeps it in the dark); below the keyboard its base is pure black in the render
   (the bottom 17 % of the picture), so it melts into the dark instead of standing there as a black block */
.ko-maquina img { display: block; width: 100%; }
.ko-sombra { filter: brightness(.82); -webkit-mask-image: linear-gradient(#000 80%, transparent 90%); mask-image: linear-gradient(#000 80%, transparent 90%); }
.ko-luz { position: absolute; inset: 0; filter: brightness(1.3);
  -webkit-mask-image: radial-gradient(circle at var(--lx, 50%) var(--ly, 45%), #000 0, rgba(0, 0, 0, .85) 10%, transparent 26%), linear-gradient(#000 80%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle at var(--lx, 50%) var(--ly, 45%), #000 0, rgba(0, 0, 0, .85) 10%, transparent 26%), linear-gradient(#000 80%, transparent 90%);
  mask-composite: intersect; }
.js .ko-heroe-texto > *, .js .ko-maquina { opacity: 0; translate: 0 26px; transition: opacity 1.2s var(--curva), translate 1.4s var(--curva); }
.js .ko-heroe.listo .ko-heroe-texto > *, .js .ko-heroe.listo .ko-maquina { opacity: 1; translate: none; }
.js .ko-heroe.listo .ko-nombre { transition-delay: .12s; } .js .ko-heroe.listo .ko-lema { transition-delay: .3s; } .js .ko-heroe.listo .ko-maquina { transition-delay: .45s; }

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

/* ── the photographs: no rectangle anywhere (his rule) — the wide shot fades out at the top and the bottom and runs to the
   page's edges, the details fade on every side ─────────────────────────────────────────────────────────────────────────── */
.ko-fotos { padding-top: clamp(70px, 9vw, 130px); }
.ko-plano { position: relative; height: min(84vh, 58vw); overflow: hidden; }
.ko-plano img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1) translate3d(0, calc((var(--p, .5) - .5) * -70px), 0);
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 78%, transparent); }
.ko-detalles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(10px, 2vw, 30px); margin-top: clamp(20px, 3vw, 44px); }
.ko-detalle img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 16%, #000 84%, transparent);
  mask-composite: intersect; }
.ko-detalle:nth-child(2) { margin-top: clamp(30px, 6vw, 90px); }
@media (max-width: 760px) { .ko-detalles { grid-template-columns: minmax(0, 1fr); } .ko-detalle:nth-child(2) { margin-top: 0; } }

.ko-mas { text-align: center; margin-top: 26px; }
/* the waitlist over the console lit from the front, deep in the dark */
.ko-espera { isolation: isolate; padding-bottom: clamp(90px, 11vw, 160px); }
.ko-espera-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ko-espera-fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .4; transform: translate3d(0, calc((var(--p, .5) - .5) * 80px), 0) scale(1.08); }
.ko-espera-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--fondo), rgba(8, 9, 11, .55) 40%, rgba(8, 9, 11, .55) 60%, var(--fondo)); }
.ko-lista { max-width: 520px; }
.ko-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; }
  .ko-heroe { padding-top: 110px; min-height: max(640px, 100svh); }
  .ko-lema { letter-spacing: .3em; padding-left: .3em; }
}