/* Cargador "Estableciendo conexión": el logo se dibuja punto → arcos y la cortina sube. */
.cargador {
  position: fixed; inset: 0; z-index: 300; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  background: var(--azul); color: var(--senal);
}
.js-cargando .cargador { display: flex; }
.cargador.sale { animation: cortina 700ms var(--ease-entrada-salida) forwards; }
@keyframes cortina { to { clip-path: inset(0 0 100% 0); } }
.cargador__senal { width: 112px; height: 86px; overflow: visible; fill: none; stroke: none; }
.cargador__senal .cs { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: traza 380ms var(--ease-salida) forwards; }
.cargador__senal .cs-1 { animation-delay: 260ms; }
.cargador__senal .cs-2 { animation-delay: 480ms; }
.cargador__senal .cs-3 { animation-delay: 700ms; }
.cargador__senal .cs-0 { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: punto 300ms var(--ease-salida) 60ms forwards; }
@keyframes traza { from { opacity: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes punto { to { transform: scale(1); } }
.cargador__log { display: flex; gap: 0.9rem; font-family: var(--f-dato); font-size: 0.75rem; color: var(--sobre-azul-3); }
.cargador__log span { opacity: 0; animation: aparece 200ms ease forwards; }
.cargador__log span:nth-child(1) { animation-delay: 200ms; }
.cargador__log span:nth-child(2) { animation-delay: 450ms; }
.cargador__log span:nth-child(3) { animation-delay: 700ms; }
.cargador__log span:nth-child(4) { animation-delay: 950ms; color: var(--led-verde); }
@keyframes aparece { to { opacity: 1; } }

/* Entrada de la portada después del cargador (o al cargar, si ya se vio en la sesión) */
.hero__titulo .acr, .hero__bajada, .hero__acciones, .hero__pantalla {
  animation: sube 900ms var(--ease-salida) both;
}
.hero__titulo .acr:nth-child(2) { animation-delay: 80ms; }
.hero__titulo .acr:nth-child(3) { animation-delay: 160ms; }
.hero__bajada { animation-delay: 260ms; }
.hero__acciones { animation-delay: 340ms; }
.hero__pantalla { animation-delay: 200ms; animation-name: aparece-pantalla; }
.js-cargando .hero__titulo .acr, .js-cargando .hero__bajada, .js-cargando .hero__acciones, .js-cargando .hero__pantalla { animation-play-state: paused; }
@keyframes sube { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes aparece-pantalla { from { opacity: 0; clip-path: inset(0 0 100% 0 round 18px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 18px); } }

@media (prefers-reduced-motion: reduce) {
  .js-cargando .cargador { display: none; }
}