/* Fuentes incluidas en el sistema (funcionan sin internet) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/Inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../fonts/Lexend-latin.woff2") format("woff2"); }

:root {
  --ground: #F6F7FB;
  --main: #2A5CA8;
  --ink: #111827;
  --muted: #6B7280;
  --line: #D1D5DB;
  --accent: #D63848;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background-color: var(--ground);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 8%, transparent) 2px, transparent 2.6px);
  background-size: 56px 56px;
  background-position: 28px 28px;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Escenario animado (fondo) */
.stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.stage circle { transform-box: fill-box; transform-origin: center; }
.stage .ghost { fill: color-mix(in srgb, var(--ink) 16%, var(--ground)); }
.stage .ping { fill: none; stroke-width: 3; }
.stage .route { fill: none; stroke-linecap: round; }
.stage .route-faint { stroke: color-mix(in srgb, var(--ink) 22%, var(--ground)); stroke-width: 4; }

/* Titulares de la intro */
.intro-words { position: fixed; left: clamp(16px, 7vw, 140px); top: clamp(24px, 12vh, 130px); width: min(1000px, 90vw); z-index: 1; pointer-events: none; }
.intro-line {
  position: absolute; margin: 0;
  font-family: Lexend, Inter, sans-serif; font-weight: 700; letter-spacing: -.015em; line-height: 1.05;
  font-size: clamp(34px, 5vw, 96px);
}
.intro-line span { display: inline-block; white-space: pre; }

.skip {
  position: fixed; right: 20px; bottom: 20px; z-index: 3;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 999px; padding: 8px 16px; font: 500 14px Inter, sans-serif; cursor: pointer;
}

/* Tarjeta de acceso */
.card {
  position: relative; z-index: 2;
  width: min(420px, calc(100vw - 32px));
  background: #fff; border: 1px solid #E5E7EB; border-radius: 22px;
  box-shadow: 0 20px 50px rgba(17, 24, 39, .10);
  padding: 40px 36px 32px;
  text-align: center;
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .9, .3, 1.2);
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wordmark { font-family: Lexend, Inter, sans-serif; font-size: 26px; letter-spacing: .02em; }
.wm-a { font-weight: 800; } .wm-b { font-weight: 300; }
.wordmark-svg { display: block; width: 300px; max-width: 100%; height: auto; color: #0A0A0A; }
.card h1 { font-size: 26px; margin: 18px 0 4px; font-weight: 700; }
.hint { margin: 0 0 22px; color: var(--muted); font-size: 16px; }
.card form { text-align: left; display: flex; flex-direction: column; }
.card label { font-size: 15px; margin: 12px 0 6px; }
.card input {
  width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 10px;
  padding: 0 14px; font: 16px Inter, sans-serif; color: var(--ink); background: #fff;
}
.card input:focus { outline: 2px solid color-mix(in srgb, var(--main) 35%, transparent); border-color: var(--main); }
.pass { position: relative; }
.pass input { padding-right: 64px; }
.ver { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--main); font: 15px Inter, sans-serif; cursor: pointer; }
.submit {
  margin-top: 22px; height: 48px; border: 0; border-radius: 10px;
  background: var(--main); color: #fff; font: 600 16px Inter, sans-serif; cursor: pointer;
}
.submit:hover { background: color-mix(in srgb, var(--main) 88%, #000); }
.forgot { display: inline-block; margin-top: 18px; color: var(--muted); font-size: 15px; text-decoration: none; }
.forgot:hover { text-decoration: underline; }
.error { background: color-mix(in srgb, var(--accent) 10%, #fff); color: var(--accent); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-bottom: 8px; text-align: left; }

/* Estados: durante la intro la tarjeta espera oculta */
body.intro .card { opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none; }
body.intro .mark circle { transform: scale(0); }
body:not(.intro) .skip, body:not(.intro) .intro-words { display: none; }

/* El logo de la tarjeta "aterriza" punto a punto */
.mark circle { transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.mark circle:nth-of-type(2) { transition-delay: .04s; } .mark circle:nth-of-type(3) { transition-delay: .08s; }
.mark circle:nth-of-type(4) { transition-delay: .12s; } .mark circle:nth-of-type(5) { transition-delay: .16s; }
.mark circle:nth-of-type(6) { transition-delay: .20s; } .mark circle:nth-of-type(7) { transition-delay: .24s; }
.mark circle:nth-of-type(8) { transition-delay: .28s; } .mark circle:nth-of-type(9) { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .card, .mark circle { transition: none; }
}