/* Landing de Atlas. Generada a partir del diseno de Claude Design (paleta "amanecer", ventana oscura).
   Los colores van en linea en landing.html; aqui solo lo que no puede ir en un atributo style. */
html { scroll-behavior: smooth; }
body { margin: 0; background: #FBF8F3; }
.base { font-family: 'Figtree', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.disp { font-family: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif; letter-spacing: -0.035em; }
button { font-family: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #2A62E8; outline-offset: 3px; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -0.12em; background: currentColor; animation: parpadeo 1s steps(1) infinite; }
.giro { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #cfd3dc; border-top-color: #15171E; animation: gira .8s linear infinite; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer;
        border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.05); color: #E6EAF5; }
.chip.on { border-color: #4FD1E8; background: #4FD1E8; color: #06202A; }
.trazar { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: trazar 6s ease-in-out infinite; }
.escaner { animation: escanear 6s steps(6) infinite; }
.avance { animation: avanzar 6s ease-in-out infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes pulsar { 50% { opacity: .35; } }
@keyframes trazar { 0% { stroke-dashoffset: 1400; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes escanear { from { transform: translateY(0); } to { transform: translateY(228px); } }
@keyframes avanzar { 0% { width: 8%; } 80%, 100% { width: 100%; } }
@media (max-width: 760px) { .lateral { display: none !important; } }
@media (max-width: 620px) { .ocultar-estrecho { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret, .giro, .escaner, .avance { animation: none; }
  .trazar { animation: none; stroke-dashoffset: 0; }
}