/* insyncengine.com mientras no se lanza (10 oct): solo «Coming soon» y el correo para el aviso.
   A la izquierda, la misma ilustración que la pantalla de entrada de la app: tres cámaras con su onda que pasan bajo
   el cabezal, desalineadas y con el LED en ámbar. Al apuntarte se alinean y el LED se pone verde (el único momento). */
.pre-body { min-height: 100vh; min-height: 100svh; }
.pre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 36vw); min-height: 100vh; min-height: 100svh; }

/* ---------- ilustración (copiada de la app) ---------- */
.pre-art { position: relative; overflow: hidden; background: var(--panel); border-right: 1px solid var(--line); }
.pre-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pre-art .sync-line { stroke: var(--bone); stroke-width: 1; stroke-dasharray: 3 5; opacity: .55; }
.pre-art .led { fill: var(--faint); transition: fill .3s; }
.pre-art .strip { transition: transform 1.6s cubic-bezier(.22, .9, .2, 1); }
.pre-art .wave { animation: pre-roll 20s linear infinite; will-change: transform; }
.pre-art.waiting .led { fill: var(--warn); animation: pre-blink 1.6s ease-in-out infinite; }
.pre-art.aligned .strip { transform: translateX(0) !important; }
.pre-art.aligned .led { fill: var(--ok); animation: none; }
@keyframes pre-roll { from { transform: translateX(0); } to { transform: translateX(-1000px); } }
@keyframes pre-blink { 50% { opacity: .25; } }

/* ---------- columna ---------- */
.pre-side { display: flex; flex-direction: column; gap: 40px; padding: 36px clamp(28px, 3.6vw, 56px) 28px; background: var(--case); }
.pre-main { margin: auto 0; display: grid; gap: 34px; }
.soon { font: 800 clamp(64px, 6.6vw, 118px)/.9 var(--font-display); letter-spacing: -.045em; color: var(--bone); margin: 0; }
/* el punto final es el LED de la ilustración: ámbar mientras esperas, verde cuando te apuntas */
.soon .dot { display: inline-block; width: .17em; height: .17em; margin-left: .07em; border-radius: 50%; background: var(--warn);
  box-shadow: 0 0 .22em rgba(255, 179, 71, .55); animation: pre-blink 1.6s ease-in-out infinite; transition: background .3s, box-shadow .3s; }
.soon .dot.on { background: var(--ok); box-shadow: 0 0 .26em rgba(61, 220, 151, .65); animation: none; }
.pre-lead { color: var(--dim); font-size: 17px; max-width: 30em; }
#f { display: grid; gap: 14px; margin-top: 18px; }
.pre-row { display: flex; gap: 10px; }
.pre-row .input { flex: 1; min-width: 0; }
.pre-row .btn { flex: none; }
.pre-done { font-size: 17px; color: var(--dim); max-width: 30em; }
.pre-done b { display: block; color: var(--bone); font-size: 22px; margin-bottom: 4px; }
.pre-done:focus { outline: none; }
.pre-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; }
.pre-legal a { color: var(--faint); text-decoration: none; }
.pre-legal a:hover { color: var(--bone); text-decoration: underline; }

/* ---------- móvil: la ilustración arriba, como una franja ---------- */
@media (max-width: 860px) {
  .pre { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 34svh) auto; }
  .pre-art { border-right: 0; border-bottom: 1px solid var(--line); }
  .pre-side { padding: 24px 20px 24px; gap: 32px; }
  .pre-side > .brand { order: -1; }
  .soon { font-size: clamp(60px, 19vw, 104px); }
}
@media (max-width: 420px) {
  .pre-row { flex-direction: column; }
  .pre-row .input { flex: none; }
  .pre-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pre-art .wave, .pre-art.waiting .led, .soon .dot { animation: none; }
  .pre-art .strip, .soon .dot { transition: none; }
}
.pre-lead b { color: var(--bone); font-weight: 600; }