/* La entrada: el único lugar con un gesto grande. Los anillos del radar y un barrido, una sola vez. */
body{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:24px}
.radar{position:fixed;left:50%;top:50%;width:min(1100px,220vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle,transparent 0 89px,var(--tinte-2) 89px 90px);
  -webkit-mask:radial-gradient(circle,#000 25%,transparent 70%);mask:radial-gradient(circle,#000 25%,transparent 70%)}
.radar::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg,transparent 0 300deg,rgba(129,140,248,.34) 360deg);animation:barrido 2.6s cubic-bezier(.3,.1,.3,1) .2s 1}
@keyframes barrido{0%{transform:rotate(-40deg);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:rotate(320deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.radar::after{animation:none}}
.caja{position:relative;width:100%;max-width:400px;text-align:center}
.caja img{display:block;width:60px;height:auto;margin:0 auto 22px}
h1{font:600 clamp(3rem,13vw,4rem)/1 var(--titulos);letter-spacing:-.025em;margin:0}
.caja p{color:var(--suave);font-size:1.0625rem;line-height:1.5;margin:16px auto 32px;max-width:32ch}
a.boton{display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:12px 24px;border-radius:999px;background:var(--hoja);border:1px solid var(--linea-fuerte);
  color:var(--tinta);font-weight:600;text-decoration:none;box-shadow:0 10px 26px -12px rgba(67,56,202,.4);transition:border-color .15s,box-shadow .15s}
@media (hover:hover){a.boton:hover{border-color:var(--acento);box-shadow:0 12px 30px -10px rgba(67,56,202,.55)}}
a.boton svg{width:20px;height:20px;flex:none}
.caja p.error{color:var(--mal);background:var(--mal-f);border-radius:14px;padding:12px 16px;margin:0 0 20px;max-width:none;font-size:.9375rem}
.dominio{display:block;margin-top:20px;font-size:.875rem;color:var(--suave)}