/* Radarcrypto — landing v2 · FONDOS DE ESCENA
   Generado por web/landing2/escenas/generar.py (no editar a mano: cambia el generador y vuelve a
   lanzarlo). Ver ESCENAS.md. Se enlaza DESPUÉS de landing2.css y solo toca las capas de fondo
   .l2-escena--{hero,universo,contigo,radar,paso,cta} y .l2-arcos--{…} (y sus ::before/::after).

   Capas de cada sección (de abajo arriba):
     .l2-escena  imagen WebP opaca (Tierra de noche de NASA Black Marble, atmósfera menta/cian,
                 cordilleras de relieve real) sobre --bg; sin estrellas horneadas;
       ::before  estrellas vectoriales (dos teselas SVG de periodos distintos: no se nota la
                 repetición), nítidas a cualquier densidad de píxeles y continuas entre secciones;
                 la máscara les RESTA lo sólido de la imagen (planeta, montañas: l2-solido-*.svg,
                 colocado exactamente igual que la imagen);
       ::after   (hero y cta) unas pocas estrellas más claras que titilan despacio;
     .l2-arcos   anillos de radar y nodos (SVG, trazo de 1 px a cualquier escala);
       ::after   halos de los nodos, que laten. Sin animación con prefers-reduced-motion.
   Escritorio (≥ 1200 px): todo mide en --u (1 px a 1672 de ancho, como la página): lienzos de 2240u
   (el diseño de 1672 más 284u por lado, para pantallas anchas) centrados y anclados arriba o abajo.
   Móvil y tableta (< 1200 px, la maqueta apilada): imágenes verticales a todo el ancho, con la cresta
   del planeta anclada a una distancia fija en px del borde de su sección. */

/* ------------------------------------------------------------------ comunes */
.l2-escena--hero, .l2-escena--universo, .l2-escena--contigo, .l2-escena--radar, .l2-escena--paso, .l2-escena--cta { -webkit-mask-image: none; mask-image: none; }
.l2-escena--hero::before, .l2-escena--universo::before, .l2-escena--contigo::before, .l2-escena--radar::before, .l2-escena--paso::before, .l2-escena--cta::before, .l2-escena--hero::after, .l2-escena--cta::after, .l2-arcos--hero::after, .l2-arcos--universo::after, .l2-arcos--contigo::after, .l2-arcos--radar::after, .l2-arcos--paso::after, .l2-arcos--cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.l2-escena--hero::before, .l2-escena--universo::before, .l2-escena--contigo::before, .l2-escena--radar::before, .l2-escena--paso::before, .l2-escena--cta::before {
  background: url(/assets/l2-estrellas-a-v1.svg) 0 0 / 640px 640px, url(/assets/l2-estrellas-b-v1.svg) 211px 97px / 997px 997px;
}
.l2-escena--hero::after, .l2-escena--cta::after {
  background: url(/assets/l2-estrellas-c-v1.svg) 317px 143px / 1181px 1181px;
  opacity: .7; animation: l2esc-titila 6.5s ease-in-out infinite alternate;
}
.l2-escena--cta::after { animation-delay: -3.2s; }
.l2-arcos--hero::after, .l2-arcos--universo::after, .l2-arcos--contigo::after, .l2-arcos--radar::after, .l2-arcos--paso::after, .l2-arcos--cta::after { opacity: .8; animation: l2esc-late 4.6s ease-in-out infinite alternate; }
.l2-arcos--universo::after { animation-delay: -0.9s; }
.l2-arcos--contigo::after { animation-delay: -1.8s; }
.l2-arcos--radar::after { animation-delay: -2.7s; }
.l2-arcos--paso::after { animation-delay: -3.6s; }
.l2-arcos--cta::after { animation-delay: -4.5s; }
@keyframes l2esc-titila { from { opacity: .12; } to { opacity: .95; } }
@keyframes l2esc-late { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .l2-escena--hero::after, .l2-escena--cta::after, .l2-arcos--hero::after, .l2-arcos--universo::after, .l2-arcos--contigo::after, .l2-arcos--radar::after, .l2-arcos--paso::after, .l2-arcos--cta::after { animation: none; }
}

/* ------------------------------------------------------------------ escritorio */
.l2-escena--hero { background: url(/assets/l2-hero-v1.webp) 50% 0 / calc(2240 * var(--u)) auto no-repeat, var(--bg, #07090b); }
.l2-escena--hero::before, .l2-escena--hero::after { -webkit-mask: linear-gradient(#000 0 0), url(/assets/l2-solido-hero-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; -webkit-mask-composite: source-out; mask: linear-gradient(#000 0 0), url(/assets/l2-solido-hero-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; mask-composite: subtract; }
.l2-arcos--hero { background: url(/assets/l2-arcos-hero-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; }
.l2-arcos--hero::after { background: url(/assets/l2-nodos-hero-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; }
.l2-escena--universo { background: url(/assets/l2-universo-v1.webp) 50% 100% / calc(2240 * var(--u)) auto no-repeat, var(--bg, #07090b); }
.l2-escena--universo::before { -webkit-mask: linear-gradient(#000 0 0), url(/assets/l2-solido-universo-v1.svg) 50% 100% / calc(2240 * var(--u)) auto no-repeat; -webkit-mask-composite: source-out; mask: linear-gradient(#000 0 0), url(/assets/l2-solido-universo-v1.svg) 50% 100% / calc(2240 * var(--u)) auto no-repeat; mask-composite: subtract; }
.l2-arcos--universo { background: url(/assets/l2-arcos-universo-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; }
.l2-arcos--universo::after { background: url(/assets/l2-nodos-universo-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; }
.l2-escena--contigo { background: url(/assets/l2-contigo-v1.webp) 50% 0 / calc(2240 * var(--u)) auto no-repeat, var(--bg, #07090b); }
.l2-escena--contigo::before { -webkit-mask: linear-gradient(#000 0 0), url(/assets/l2-solido-contigo-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; -webkit-mask-composite: source-out; mask: linear-gradient(#000 0 0), url(/assets/l2-solido-contigo-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; mask-composite: subtract; }
.l2-arcos--contigo { background: url(/assets/l2-arcos-contigo-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; }
.l2-arcos--contigo::after { background: url(/assets/l2-nodos-contigo-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; }
.l2-escena--radar { background: url(/assets/l2-radar-v1.webp) 50% 0 / calc(2240 * var(--u)) auto no-repeat, var(--bg, #07090b); }
.l2-escena--radar::before { -webkit-mask: linear-gradient(#000 0 0), url(/assets/l2-solido-radar-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; -webkit-mask-composite: source-out; mask: linear-gradient(#000 0 0), url(/assets/l2-solido-radar-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; mask-composite: subtract; }
.l2-arcos--radar { background: url(/assets/l2-arcos-radar-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; }
.l2-arcos--radar::after { background: url(/assets/l2-nodos-radar-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; }
.l2-escena--paso { background: url(/assets/l2-paso-v1.webp) 50% 100% / calc(2240 * var(--u)) auto no-repeat, radial-gradient(ellipse calc(900 * var(--u)) calc(320 * var(--u)) at 50% calc(50 * var(--u)), rgba(58, 150, 150, .07), transparent 70%), var(--bg, #07090b); }
.l2-escena--paso::before { -webkit-mask: linear-gradient(#000 0 0), url(/assets/l2-solido-paso-v1.svg) 50% 100% / calc(2240 * var(--u)) auto no-repeat; -webkit-mask-composite: source-out; mask: linear-gradient(#000 0 0), url(/assets/l2-solido-paso-v1.svg) 50% 100% / calc(2240 * var(--u)) auto no-repeat; mask-composite: subtract; }
.l2-arcos--paso { background: url(/assets/l2-arcos-paso-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; }
.l2-arcos--paso::after { background: url(/assets/l2-nodos-paso-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; }
.l2-escena--cta { background: url(/assets/l2-cta-v1.webp) 50% 0 / calc(2240 * var(--u)) auto no-repeat, var(--bg, #07090b); }
.l2-escena--cta::before, .l2-escena--cta::after { -webkit-mask: linear-gradient(#000 0 0), url(/assets/l2-solido-cta-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; -webkit-mask-composite: source-out; mask: linear-gradient(#000 0 0), url(/assets/l2-solido-cta-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; mask-composite: subtract; }
.l2-arcos--cta { background: url(/assets/l2-arcos-cta-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; }
.l2-arcos--cta::after { background: url(/assets/l2-nodos-cta-v1.svg) 50% 0 / calc(2240 * var(--u)) auto no-repeat; }

/* ------------------------------------------------------------------ móvil y tableta (maqueta apilada) */
@media (max-width: 1199.98px) {
  .l2-escena--hero, .l2-escena--universo, .l2-escena--contigo, .l2-escena--radar, .l2-escena--paso, .l2-escena--cta, .l2-arcos--hero, .l2-arcos--universo, .l2-arcos--contigo, .l2-arcos--radar, .l2-arcos--paso, .l2-arcos--cta { --um: max(100vw / 800, min(100vw / 390, 1.1px)); }
  .l2-escena--hero { background: url(/assets/l2-hero-m-v1.webp) center bottom calc(640px - 324 * var(--um)) / calc(800 * var(--um)) auto no-repeat, var(--bg, #07090b); }
  .l2-escena--hero::before, .l2-escena--hero::after { -webkit-mask: linear-gradient(#000 0 0), url(/assets/l2-solido-hero-m-v1.svg) center bottom calc(640px - 324 * var(--um)) / calc(800 * var(--um)) auto no-repeat; -webkit-mask-composite: source-out; mask: linear-gradient(#000 0 0), url(/assets/l2-solido-hero-m-v1.svg) center bottom calc(640px - 324 * var(--um)) / calc(800 * var(--um)) auto no-repeat; mask-composite: subtract; }
  .l2-escena--universo { background: url(/assets/l2-universo-m-v1.webp) center bottom 0px / calc(800 * var(--um)) auto no-repeat, var(--bg, #07090b); }
  .l2-escena--universo::before { -webkit-mask: linear-gradient(#000 0 0), url(/assets/l2-solido-universo-m-v1.svg) center bottom 0px / calc(800 * var(--um)) auto no-repeat; -webkit-mask-composite: source-out; mask: linear-gradient(#000 0 0), url(/assets/l2-solido-universo-m-v1.svg) center bottom 0px / calc(800 * var(--um)) auto no-repeat; mask-composite: subtract; }
  .l2-escena--contigo { background: url(/assets/l2-contigo-m-v1.webp) center top calc(560px - 260 * var(--um)) / calc(800 * var(--um)) auto no-repeat, var(--bg, #07090b); }
  .l2-escena--contigo::before { -webkit-mask: linear-gradient(#000 0 0), url(/assets/l2-solido-contigo-m-v1.svg) center top calc(560px - 260 * var(--um)) / calc(800 * var(--um)) auto no-repeat; -webkit-mask-composite: source-out; mask: linear-gradient(#000 0 0), url(/assets/l2-solido-contigo-m-v1.svg) center top calc(560px - 260 * var(--um)) / calc(800 * var(--um)) auto no-repeat; mask-composite: subtract; }
  .l2-escena--radar { background: url(/assets/l2-radar-m-v1.webp) center bottom 0px / calc(800 * var(--um)) auto no-repeat, var(--bg, #07090b); }
  .l2-escena--radar::before { -webkit-mask: linear-gradient(#000 0 0), url(/assets/l2-solido-radar-m-v1.svg) center bottom 0px / calc(800 * var(--um)) auto no-repeat; -webkit-mask-composite: source-out; mask: linear-gradient(#000 0 0), url(/assets/l2-solido-radar-m-v1.svg) center bottom 0px / calc(800 * var(--um)) auto no-repeat; mask-composite: subtract; }
  .l2-escena--paso { background: radial-gradient(ellipse 90% 260px at 50% 60px, rgba(58, 150, 150, .07), transparent 70%), var(--bg, #07090b); }
  .l2-escena--paso::before { -webkit-mask: none; mask: none; }
  .l2-escena--cta { background: url(/assets/l2-cta-m-v1.webp) center bottom calc(160px - 160 * var(--um)) / calc(800 * var(--um)) auto no-repeat, var(--bg, #07090b); }
  .l2-escena--cta::before, .l2-escena--cta::after { -webkit-mask: linear-gradient(#000 0 0), url(/assets/l2-solido-cta-m-v1.svg) center bottom calc(160px - 160 * var(--um)) / calc(800 * var(--um)) auto no-repeat; -webkit-mask-composite: source-out; mask: linear-gradient(#000 0 0), url(/assets/l2-solido-cta-m-v1.svg) center bottom calc(160px - 160 * var(--um)) / calc(800 * var(--um)) auto no-repeat; mask-composite: subtract; }
  .l2-escena--cta { -webkit-mask-image: linear-gradient(transparent, #000 90px); mask-image: linear-gradient(transparent, #000 90px); }
  .l2-arcos--hero { opacity: 1; background: url(/assets/l2-arcos-m-v1.svg) center top calc(208px - 200 * var(--um)) / calc(800 * var(--um)) auto no-repeat; }
  .l2-arcos--hero::after { background: url(/assets/l2-nodos-m-v1.svg) center top calc(208px - 200 * var(--um)) / calc(800 * var(--um)) auto no-repeat; }
  .l2-arcos--universo { opacity: 1; background: url(/assets/l2-arcos-m-v1.svg) center top calc(129px - 200 * var(--um)) / calc(800 * var(--um)) auto no-repeat; }
  .l2-arcos--universo::after { background: url(/assets/l2-nodos-m-v1.svg) center top calc(129px - 200 * var(--um)) / calc(800 * var(--um)) auto no-repeat; }
  .l2-arcos--contigo { opacity: 1; background: url(/assets/l2-arcos-m-v1.svg) center top calc(128px - 200 * var(--um)) / calc(800 * var(--um)) auto no-repeat; }
  .l2-arcos--contigo::after { background: url(/assets/l2-nodos-m-v1.svg) center top calc(128px - 200 * var(--um)) / calc(800 * var(--um)) auto no-repeat; }
  .l2-arcos--radar { opacity: 1; background: url(/assets/l2-arcos-m-v1.svg) center top calc(130px - 200 * var(--um)) / calc(800 * var(--um)) auto no-repeat; }
  .l2-arcos--radar::after { background: url(/assets/l2-nodos-m-v1.svg) center top calc(130px - 200 * var(--um)) / calc(800 * var(--um)) auto no-repeat; }
  .l2-arcos--paso { opacity: 1; background: url(/assets/l2-arcos-m-v1.svg) center top calc(88px - 200 * var(--um)) / calc(800 * var(--um)) auto no-repeat; }
  .l2-arcos--paso::after { background: url(/assets/l2-nodos-m-v1.svg) center top calc(88px - 200 * var(--um)) / calc(800 * var(--um)) auto no-repeat; }
  .l2-arcos--cta { opacity: 1; background: url(/assets/l2-arcos-cta-m-v1.svg) center bottom calc(160px - 160 * var(--um)) / calc(800 * var(--um)) auto no-repeat; }
  .l2-arcos--cta::after { background: url(/assets/l2-nodos-cta-m-v1.svg) center bottom calc(160px - 160 * var(--um)) / calc(800 * var(--um)) auto no-repeat; }
}