/* astranode.live: portada, /rtmp y /webrtc. Se carga después de styles.css (tokens y guías). */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.site-nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--copper); }
code { font-family: var(--mono); font-size: 0.92em; color: var(--copper-hi); overflow-wrap: anywhere; }

/* ---------- Portada: elegir app ---------- */
.home-hero { padding: clamp(64px, 9vw, 112px) 0 clamp(40px, 6vw, 64px); }
.home-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
  max-width: 17ch;
  margin-bottom: 24px;
}
.home-hero .lede { max-width: 52ch; }
.choose {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  padding-bottom: clamp(64px, 9vw, 104px);
}
.choice {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease;
}
.choice:hover { border-color: var(--copper); }
.choice:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.choice img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); }
.choice-body { padding: 26px 28px 30px; display: grid; gap: 10px; align-content: start; }
.choice h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.choice p { color: var(--muted); max-width: 44ch; }
.choice .go { margin-top: 8px; color: var(--copper); font-weight: 600; }

.two-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.two-ways > div { border-top: 1px solid var(--copper); padding-top: 22px; }
.two-ways h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.two-ways p { color: var(--muted); max-width: 52ch; }

/* ---------- Páginas de cada app ---------- */
.app-hero { padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 80px); }
.app-hero .hero-grid { align-items: center; }
.app-hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin-bottom: 24px;
}

/* Las dos formas de usarla */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); align-items: start; }
.way h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 10px; }
.way > p { color: var(--muted); max-width: 48ch; margin-bottom: 22px; }
.way ul { list-style: none; display: grid; gap: 8px; margin: -8px 0 22px; }
.way li { position: relative; padding-left: 26px; color: var(--paper); font-size: 1rem; }
.way li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 12px; height: 2px; background: var(--copper); }
.way .tag {
  display: inline-block; margin-bottom: 14px; padding: 3px 12px;
  border: 1px solid #3a4150; border-radius: 999px; color: var(--muted); font-size: 0.875rem;
}

/* Marcos para las capturas: ventana de la app y navegador */
.frame {
  margin: 0;
  border: 1px solid #262c38;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 165, 147, 0.05);
}
.frame-bar {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 12px;
  background: #161b23; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 0.8125rem;
}
.frame-bar img { width: 16px; height: 16px; }
.frame-app .frame-bar::after {
  content: "\2013\2003\25A1\2003\2715";
  margin-left: auto;
  color: var(--muted);
  font-size: 0.8125rem;
  opacity: 0.8;
}
.frame-web .frame-bar::before {
  content: ""; width: 34px; height: 8px; flex: none;
  background: radial-gradient(circle, #4b4f5b 3px, transparent 3.5px) 0 0 / 12px 8px repeat-x;
}
.frame-url {
  flex: 1; max-width: 360px; padding: 3px 12px;
  border-radius: 999px; background: var(--ink); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.75rem; color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frame > img { width: 100%; height: auto; }
.frame-bar { white-space: nowrap; }
.frame figcaption, .frame-cap { padding: 12px 16px; color: var(--muted); font-size: 0.875rem; border-top: 1px solid var(--line); }

/* Descargas */
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dl-item {
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  padding: 26px 28px; display: grid; gap: 10px; align-content: start;
}
.dl-item h3 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.015em; }
.dl-item h3 .os-ico { width: 20px; height: 20px; }
.dl-item p { color: var(--muted); font-size: 0.975rem; }
.dl-item .btn-main, .dl-item .btn-line { justify-self: start; margin-top: 8px; }
.dl-note { margin-top: 22px; color: var(--muted); max-width: 70ch; }

/* Guías: dos segmentos */
.guide-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.seg-head { display: grid; gap: 10px; margin-bottom: 40px; max-width: 720px; }
.seg-head h2 { margin-bottom: 0 !important; }
.seg-head p { color: var(--muted); }
.steps .os { display: block; margin-top: 10px; padding: 12px 16px; border-left: 2px solid var(--line); color: var(--muted); }
.steps .os b { color: var(--paper); }

/* ---------- Animaciones (se reproducen solas, en bucle) ---------- */
.anim {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #262c38;
  background: radial-gradient(70% 60% at 80% -10%, rgba(28, 56, 82, 0.45), transparent 70%), #0d1117;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 165, 147, 0.05);
  container-type: inline-size;
}
.anim > * { position: absolute; }
.anim.is-off, .anim.is-off * { animation-play-state: paused !important; }

/* Escenas de cámara dibujadas con CSS */
.scene-a, .scene-b { position: absolute; inset: 0; }
.scene-a { background: linear-gradient(180deg, #1c3852 0%, #8b7d80 58%, #d4a593 76%, #f3d0c1 100%); }
.scene-a::after {
  content: ""; position: absolute; inset: 0; background: #12171f;
  clip-path: polygon(0 74%, 16% 60%, 32% 70%, 52% 46%, 70% 66%, 84% 56%, 100% 68%, 100% 100%, 0 100%);
}
.scene-b {
  background:
    radial-gradient(circle at 50% 44%, #d4a593 0 15%, transparent 15.5%),
    radial-gradient(ellipse 36% 32% at 50% 100%, #a79b93 98%, transparent 100%),
    linear-gradient(180deg, #1a202c, #2f3542);
}

/* Recorrido de la señal: dos versiones que se alternan cada 6 s */
.flow > * { font-size: 1.9cqi; }
.flow-mode { left: 5%; top: 6%; display: inline-grid; }
.flow-mode span {
  grid-area: 1 / 1;
  padding: 0.35em 0.9em; border-radius: 999px;
  border: 1px solid #3a4150; background: #10151c; color: var(--paper); font-weight: 600;
  animation: 12s ease infinite;
}
.flow-mode .m-a { animation-name: f-a; }
.flow-mode .m-b { animation-name: f-b; opacity: 0; }
.flow-line { left: 18%; right: 18%; top: 47%; height: 0; border-top: 2px dashed #3a4150; }
.flow-pkt {
  top: calc(47% - 0.45em); left: 18%;
  width: 0.9em; height: 0.9em; border-radius: 50%;
  background: var(--copper-hi); box-shadow: 0 0 1em rgba(243, 208, 193, 0.5);
  animation: f-pkt 2s linear infinite;
}
.flow-pkt:nth-of-type(2) { animation-delay: -0.5s; }
.flow-pkt:nth-of-type(3) { animation-delay: -1s; }
.flow-pkt:nth-of-type(4) { animation-delay: -1.5s; }
.flow-wifi { left: 25%; top: 31%; color: var(--muted); font-size: 1.6cqi; display: flex; align-items: center; gap: 0.5em; }
.flow-wifi svg { width: 2.6cqi; height: 2.6cqi; fill: none; stroke: var(--copper); stroke-width: 2; stroke-linecap: round; }

/* Cada nodo centra su ícono sobre la línea: --h es la altura del ícono. */
.node { --h: 8cqi; display: grid; justify-items: center; gap: 0.7em; top: 47%; transform: translate(-50%, calc(var(--h) / -2)); }
.n-src:has(.phones) { --h: 15cqi; }
.n-board { --h: 7.4cqi; }
.n-dst { --h: 12.3cqi; }
.node b { font-weight: 600; color: var(--paper); white-space: nowrap; }
.node small { color: var(--muted); font-size: 0.85em; white-space: nowrap; height: 1.3em; display: inline-grid; }
.node small span { grid-area: 1 / 1; animation: 12s ease infinite; }
.node small .m-a { animation-name: f-a; }
.node small .m-b { animation-name: f-b; opacity: 0; }

/* Fuente: dron */
.n-src { left: 12%; }
.drone { width: 12cqi; height: 8cqi; animation: f-hover 3s ease-in-out infinite; }
.drone svg { width: 100%; height: 100%; overflow: visible; }
.rotor { transform-box: fill-box; transform-origin: center; animation: f-spin 0.35s linear infinite; }

/* Fuente: 12 celulares */
.phones { display: grid; grid-template-columns: repeat(4, 2.6cqi); gap: 0.9cqi; }
.phones i {
  width: 2.6cqi; height: 4.4cqi; border-radius: 0.5cqi;
  border: 0.25cqi solid #a79b93; background: #12171f;
  animation: f-phone 12s ease infinite;
  animation-delay: calc(var(--n) * 0.12s);
}

/* Placa: solo en la segunda versión */
.n-board { left: 50%; animation: f-b 12s ease infinite; opacity: 0; }
.board {
  position: relative; width: 11cqi; height: 7.4cqi; border-radius: 0.8cqi;
  background: #17321f; border: 0.25cqi solid #7ec9a0;
  box-shadow: 0 0 0 0.6cqi rgba(126, 201, 160, 0.08);
}
.board::before {
  content: ""; position: absolute; left: 34%; top: 26%; width: 32%; height: 48%;
  background: #0a0d12; border-radius: 0.3cqi; border: 0.2cqi solid #2a2f3a;
}
.board::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 8%; height: 0.7cqi;
  background: repeating-linear-gradient(90deg, #d4a593 0 0.45cqi, transparent 0.45cqi 0.9cqi);
  opacity: 0.8;
}
.board .led { position: absolute; right: 9%; bottom: 14%; width: 1cqi; height: 1cqi; border-radius: 50%; background: var(--ok); animation: f-blink 1.2s ease-in-out infinite; }

/* Destino: computadora */
.n-dst { left: 84%; }
.laptop { position: relative; width: 17cqi; }
.laptop .screen {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 0.8cqi 0.8cqi 0 0;
  border: 0.5cqi solid #2a2f3a; background: var(--ink); overflow: hidden;
}
.laptop .base { width: 118%; margin-left: -9%; height: 1.1cqi; border-radius: 0 0 1cqi 1cqi; background: #2a2f3a; }
.laptop .live {
  position: absolute; right: 6%; top: 8%; z-index: 2;
  display: flex; align-items: center; gap: 0.4em;
  font-size: 1.3cqi; font-weight: 600; color: #fff;
  padding: 0.15em 0.6em; border-radius: 0.4em; background: rgba(10, 13, 18, 0.7);
}
.laptop .live::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--tally); box-shadow: 0 0 0.8em rgba(224, 88, 75, 0.8); animation: f-blink 1.6s ease-in-out infinite; }
.mini-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; padding: 2px; }
.mini-grid i { position: relative; overflow: hidden; border-radius: 2px; background: #1a202c; }
.mini-grid i:nth-child(odd) { background: linear-gradient(180deg, #1c3852, #8b7d80); }
.mini-grid i:nth-child(3n) { background: linear-gradient(180deg, #2f3542, #a79b93); }
.mini-grid i.on { outline: 2px solid var(--tally); outline-offset: -2px; animation: f-pick 12s steps(1) infinite; }

.flow-cap { left: 5%; right: 5%; bottom: 6%; color: var(--muted); display: grid; }
.flow-cap span { grid-area: 1 / 1; animation: 12s ease infinite; }
.flow-cap .m-a { animation-name: f-a; }
.flow-cap .m-b { animation-name: f-b; opacity: 0; }

@keyframes f-a { 0%, 46% { opacity: 1; } 50%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes f-b { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes f-pkt { 0% { left: 18%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 81%; opacity: 0; } }
@keyframes f-hover { 50% { transform: translateY(-0.8cqi); } }
@keyframes f-spin { to { transform: rotate(360deg); } }
@keyframes f-blink { 50% { opacity: 0.35; } }
@keyframes f-phone {
  0%, 4% { background: #12171f; }
  8%, 100% { background: linear-gradient(180deg, #1c3852, #d4a593); }
}
@keyframes f-pick { 0% { grid-area: 1 / 1; } 25% { grid-area: 1 / 3; } 50% { grid-area: 2 / 2; } 75% { grid-area: 3 / 4; } }

/* ---------- Animación: panel del dron (8 s) ---------- */
.ui > * { font-size: 1.6cqi; line-height: 1.35; }
.ui b { display: block; font-weight: 600; color: var(--paper); }
.u-swap { display: inline-grid; }
.u-swap i { grid-area: 1 / 1; font-style: normal; }
.u-b { opacity: 0; }
.u-dot { flex: none; width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--tally-off); }
.u-cursor {
  width: 3.4cqi; height: 3.4cqi;
  left: 92%; top: 98%;
  fill: var(--paper); stroke: var(--ink); stroke-width: 1.5;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  opacity: 0;
  transform-origin: 20% 10%;
}
.r-head { left: 4%; top: 5%; display: flex; align-items: center; gap: 0.9em; }
.r-head img { width: 4.4em; height: 4.4em; }
.r-head b { font-size: 2.7em; letter-spacing: -0.035em; line-height: 1; }
.r-head span { color: var(--muted); }
.r-pill {
  right: 4%; top: 8%;
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.5em 1em; border: 1px solid var(--line); border-radius: 999px;
  background: #10151c; color: var(--paper); font-weight: 600;
}
.r-pill .u-dot { animation: r-dot 8s ease infinite; }
.r-pill .u-a { animation: r-off 8s ease infinite; }
.r-pill .u-b { animation: r-on 8s ease infinite; color: var(--ok); }
.r-control {
  left: 4%; top: 27%; width: 92%; height: 15%;
  padding: 0 1.3em; display: grid; align-content: center;
  border: 1px solid var(--line); border-radius: 0.9em; background: #10151c;
}
.r-control b { font-size: 1.15em; }
.r-control span { color: var(--muted); }
.r-btn { top: 30.5%; height: 8.5%; display: grid; place-items: center; border-radius: 0.6em; font-weight: 600; }
.r-start { left: 61%; width: 18%; background: var(--copper); color: var(--ink); animation: r-start 8s ease infinite; }
.r-stop { left: 81%; width: 12.5%; border: 1px solid var(--line); background: #1a202c; color: var(--paper); }
.r-card { top: 47%; height: 49%; width: 44.5%; padding: 1em 1.2em; border: 1px solid var(--line); border-radius: 0.9em; background: #10151c; }
.r-in { left: 4%; }
.r-out { left: 51.5%; }
.r-card b { font-size: 1.15em; }
.r-field { display: block; margin: 0.6em 0 0.7em; padding: 0.35em 0; border-bottom: 1px solid var(--line); font-family: var(--mono); color: var(--muted); }
.r-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5em; }
.r-stats span { border: 1px solid var(--line); border-radius: 0.5em; padding: 0.35em 0.6em; color: var(--paper); }
.r-stats small { display: block; color: var(--muted); font-size: 0.8em; }
.r-meter { display: flex; align-items: flex-end; gap: 0.3em; height: 2.6em; margin-top: 0.8em; }
.r-meter i { flex: 1; height: 12%; border-radius: 0.15em; background: var(--copper); animation: r-bar 8s ease-in-out infinite; }
.r-meter i:nth-child(odd) { animation-delay: 0.12s; }
.r-meter i:nth-child(3n) { animation-delay: 0.24s; }
.r-meter i:nth-child(4n) { animation-delay: 0.36s; }
.r-view { position: relative; height: 72%; margin-top: 0.8em; border: 1px solid var(--line); border-radius: 0.6em; overflow: hidden; background: var(--ink); }
.r-view .scene-a { opacity: 0; animation: r-view 8s ease infinite; }
.r-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); animation: r-wait 8s ease infinite; }
.ui-rtmp .u-cursor { animation: r-cur 8s ease-in-out infinite; }

@keyframes r-cur {
  0%, 8% { left: 92%; top: 98%; opacity: 0; transform: scale(1); }
  11% { opacity: 1; }
  18% { left: 69%; top: 33%; transform: scale(1); }
  20% { left: 69%; top: 33%; transform: scale(0.82); }
  22%, 36% { left: 69%; top: 33%; transform: scale(1); }
  48% { left: 90%; top: 94%; opacity: 1; }
  52%, 100% { left: 90%; top: 94%; opacity: 0; }
}
@keyframes r-start { 0%, 19% { background: var(--copper); color: var(--ink); } 21%, 92% { background: #5a4a45; color: #b9aaa2; } 97%, 100% { background: var(--copper); color: var(--ink); } }
@keyframes r-dot { 0%, 21% { background: var(--tally-off); } 23%, 92% { background: var(--ok); } 97%, 100% { background: var(--tally-off); } }
@keyframes r-on { 0%, 21% { opacity: 0; } 23%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes r-off { 0%, 21% { opacity: 1; } 23%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes r-view { 0%, 36% { opacity: 0; } 42%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes r-wait { 0%, 36% { opacity: 1; } 40%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes r-bar {
  0%, 28% { height: 12%; }
  33% { height: 55%; } 38% { height: 30%; } 43% { height: 85%; } 48% { height: 45%; }
  53% { height: 92%; } 58% { height: 38%; } 63% { height: 70%; } 68% { height: 52%; }
  73% { height: 88%; } 78% { height: 40%; } 83% { height: 76%; } 88% { height: 50%; }
  94%, 100% { height: 12%; }
}

/* ---------- Animación: cambiar de cámara (10 s) ---------- */
.ui-cam .u-head { left: 4%; top: 4.5%; display: flex; align-items: center; gap: 0.8em; }
.ui-cam .u-head img { width: 3.4em; height: 3.4em; }
.ui-cam .u-head b { font-size: 1.5em; letter-spacing: -0.02em; }
.ui-cam .u-head .u-swap { color: var(--muted); }
.u-program { left: 4%; top: 19%; width: 92%; height: 41%; border: 1px solid var(--line); border-radius: 0.9em; background: #10151c; }
.u-preview { position: absolute; left: 1.6%; top: 6%; width: 44%; height: 88%; border: 1px solid var(--line); border-radius: 0.6em; overflow: hidden; background: var(--ink); }
.feed { position: absolute; inset: 0; }
.feed span {
  position: absolute; left: 0.7em; bottom: 0.6em; z-index: 1;
  padding: 0.15em 0.6em; border-radius: 0.4em;
  background: rgba(10, 13, 18, 0.75); color: var(--paper); font-weight: 600;
}
.feed-0 { display: grid; place-content: center; justify-items: center; gap: 0.5em; }
.feed-0 img { width: 5.5em; opacity: 0.85; }
.feed-0 span { position: static; background: none; color: var(--muted); font-weight: 500; }
.feed-1, .feed-2 { opacity: 0; animation: 10s ease infinite; }
.feed-1 { animation-name: c-f1; }
.feed-2 { animation-name: c-f2; }
.u-virtual { position: absolute; left: 50%; top: 11%; width: 46%; }
.u-virtual b { font-size: 1.35em; margin-bottom: 0.2em; }
.u-virtual span { color: var(--muted); }
.u-btn {
  top: 46%; height: 8%; width: 13.5%;
  display: grid; place-items: center;
  border: 1px solid #2a2f3a; border-radius: 0.5em;
  background: #12171f; color: var(--muted); font-weight: 600;
  animation: 10s ease infinite;
}
.ub-1 { left: 50%; animation-name: c-b1; }
.ub-2 { left: 65%; animation-name: c-b2; }
.ub-0 { left: 80%; animation-name: c-b0; }
.u-card { top: 65%; height: 31%; width: 29%; border: 1px solid var(--line); border-radius: 0.9em; background: #12171f; overflow: hidden; }
.uc-1 { left: 4%; }
.uc-2 { left: 35%; }
.uc-3 { left: 66%; }
.u-thumb { position: relative; height: 52%; background: #0b0f14; border-bottom: 1px solid var(--line); }
.u-thumb > div { opacity: 0; animation: 10s ease infinite; }
.u-card b { font-size: 1.25em; padding: 0.45em 0.8em 0.1em; }
.u-status { display: flex; align-items: center; gap: 0.45em; padding: 0 0.8em; color: var(--muted); }
.u-card .u-dot, .u-card .u-a, .u-card .u-b, .ui-cam .u-head .u-a, .ui-cam .u-head .u-b { animation: 10s ease infinite; }
.uc-1 .u-thumb > div { animation-name: c-on1; }
.uc-1 .u-dot { animation-name: c-dot1; }
.uc-1 .u-a { animation-name: c-off1; }
.uc-1 .u-b { animation-name: c-on1; }
.uc-2 .u-thumb > div, .uc-2 .u-b, .ui-cam .u-head .u-b { animation-name: c-on2; }
.uc-2 .u-dot { animation-name: c-dot2; }
.uc-2 .u-a, .ui-cam .u-head .u-a { animation-name: c-off2; }
.uc-3 .u-thumb > div, .uc-3 .u-b { animation-name: c-on3; }
.uc-3 .u-dot { animation-name: c-dot3; }
.uc-3 .u-a { animation-name: c-off3; }
.ui-cam .u-cursor { animation: c-cur 10s ease-in-out infinite; }

@keyframes c-on1 { 0%, 10% { opacity: 0; } 14%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes c-off1 { 0%, 10% { opacity: 1; } 14%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes c-dot1 { 0%, 10% { background: var(--tally-off); } 14%, 92% { background: var(--ok); } 97%, 100% { background: var(--tally-off); } }
@keyframes c-on2 { 0%, 18% { opacity: 0; } 22%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes c-off2 { 0%, 18% { opacity: 1; } 22%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes c-dot2 { 0%, 18% { background: var(--tally-off); } 22%, 92% { background: var(--ok); } 97%, 100% { background: var(--tally-off); } }
@keyframes c-on3 { 0%, 24% { opacity: 0; } 28%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes c-off3 { 0%, 24% { opacity: 1; } 28%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes c-dot3 { 0%, 24% { background: var(--tally-off); } 28%, 92% { background: var(--ok); } 97%, 100% { background: var(--tally-off); } }
@keyframes c-f1 { 0%, 38% { opacity: 0; } 40%, 63% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes c-f2 { 0%, 64% { opacity: 0; } 66%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes c-b0 {
  0%, 37% { background: var(--tally); border-color: var(--tally); color: #fff; }
  39%, 93% { background: #12171f; border-color: #2a2f3a; color: var(--muted); }
  97%, 100% { background: var(--tally); border-color: var(--tally); color: #fff; }
}
@keyframes c-b1 {
  0%, 37% { background: #12171f; border-color: #2a2f3a; color: var(--muted); }
  39%, 63% { background: var(--tally); border-color: var(--tally); color: #fff; }
  65%, 100% { background: #12171f; border-color: #2a2f3a; color: var(--muted); }
}
@keyframes c-b2 {
  0%, 63% { background: #12171f; border-color: #2a2f3a; color: var(--muted); }
  65%, 93% { background: var(--tally); border-color: var(--tally); color: #fff; }
  97%, 100% { background: #12171f; border-color: #2a2f3a; color: var(--muted); }
}
@keyframes c-cur {
  0%, 28% { left: 92%; top: 98%; opacity: 0; transform: scale(1); }
  31% { opacity: 1; }
  36% { left: 55%; top: 49%; transform: scale(1); }
  38% { left: 55%; top: 49%; transform: scale(0.82); }
  40%, 56% { left: 55%; top: 49%; transform: scale(1); }
  62% { left: 70%; top: 49%; transform: scale(1); }
  64% { left: 70%; top: 49%; transform: scale(0.82); }
  66% { left: 70%; top: 49%; transform: scale(1); }
  80% { left: 88%; top: 94%; opacity: 1; }
  84%, 100% { left: 88%; top: 94%; opacity: 0; }
}

/* ---------- Anchos menores ---------- */
@media (max-width: 960px) {
  .choose, .ways, .two-ways, .dl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .choice-body, .dl-item { padding: 22px 20px 24px; }
  .flow > * { font-size: 2.6cqi; }
  .flow-wifi { display: none; }
}
@media (max-width: 480px) {
  .brand span { display: none; }
  .site-nav a { white-space: nowrap; }
}