/* ════════════════════════════════════════════════════
   tokens.css — Reset, design tokens, utilities, buttons
   ════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body { font-family: var(--font-body); color: var(--text); background: var(--white); line-height: 1.6; overflow-x: hidden; }
img  { display: block; max-width: 100%; }
a    { color: inherit; text-decoration: none; }

/* ── Design Tokens ───────────────────────────────── */
:root {
  /* Tipografía */
  --font-body:   'Barlow', sans-serif;
  --font-accent: 'Noto Sans', sans-serif;
  --font-mono:   'JetBrains Mono', monospace;
  --font-quote:  'Crimson Pro', serif;

  /* Paleta UTN FRC */
  --deep:    #1538B8;   /* Azul UTN FRC */
  --deep2:   #0B2986;   /* Azul Oscuro */
  --deep3:   #071a5e;   /* Azul muy oscuro */
  --teal:    #40C5F2;   /* Celeste Asento */
  --teal2:   #0A3F60;   /* Celeste Oscuro */
  --teal-lt: #E2F6F9;   /* Celeste Claro */
  --blue-lt: #D9E5F4;   /* Azul Claro */
  --slate:   #FAFAFA;   /* Gris Claro */
  --white:   #FFFFFF;
  --text:    #191919;   /* Negro */
  --muted:   #6B7280;
  --border:  #E5E5E5;   /* Gris */
  --danger:  #D94040;
  --success: #6FA958;   /* Verde Vital */
  --magenta:  #D830A0;  /* Magenta Visión */
  --naranja:  #FF8E2C;  /* Naranja Energía */
  --deep-rgb: 21, 56, 184;  /* RGB de --deep para uso en rgba() */
  --teal-rgb: 64, 197, 242; /* RGB de --teal para uso en rgba() */
  --r:    10px;
  --rlg:  16px;
  --sh:   0 2px 16px rgba(21,56,184,0.09);
  --shlg: 0 8px 40px rgba(21,56,184,0.15);
  --gradient-brand: linear-gradient(90deg, #1538B8 0%, #40C5F2 100%);
}

/* ── Utilities ───────────────────────────────────── */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
.container  { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }

/* Noto Sans — textos destacados: etiquetas, insignias, nav */
.eyebrow { font-family: var(--font-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 20px; }
.badge-teal { background: var(--teal-lt); color: var(--teal2); }
.badge-deep { background: rgba(var(--deep-rgb),0.08); color: var(--deep); }
.tag { font-family: var(--font-accent); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--slate); color: var(--deep); }

/* Barlow — títulos y texto general */
.h2  { font-family: var(--font-body); font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; color: var(--deep); line-height: 1.15; letter-spacing: -0.5px; }

/* Barlow — párrafos de apoyo */
.lead { font-size: 16px; color: var(--muted); line-height: 1.75; margin-top: 12px; }

/* Clases utilitarias directas */
.font-accent { font-family: var(--font-accent); }
.font-mono   { font-family: var(--font-mono); }
.font-quote  { font-family: var(--font-quote); }

/* Elementos semánticos */
code, pre, kbd, samp { font-family: var(--font-mono); }
blockquote { font-family: var(--font-quote); font-style: italic; }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: 8px;
  font-family: var(--font-accent); font-size: 14px; font-weight: 600; cursor: pointer;
  border: none; transition: all .18s;
}
.btn-lg    { padding: 13px 26px; font-size: 15px; border-radius: 10px; }
.btn-block { width: 100%; justify-content: center; }
.btn-primary { background: var(--deep); color: #fff; }
.btn-primary:hover { background: var(--deep2); box-shadow: var(--sh); transform: translateY(-1px); }
.btn-teal    { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal2); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--deep); border: 1.5px solid var(--deep); }
.btn-outline:hover { background: var(--deep); color: #fff; }
.btn-ghost   { background: transparent; color: rgba(255,255,255,.75); border: 1.5px solid rgba(255,255,255,.3); }
.btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Botón de formulario bloqueado hasta completar los campos requeridos */
.btn:disabled {
  background: var(--border) !important; color: var(--muted) !important;
  border-color: var(--border) !important;
  cursor: not-allowed; box-shadow: none !important; transform: none !important;
}

/* ── Splash de carga ─────────────────────────────── */
/* Mismo gradiente que el hero: al desvanecerse, la transición es continua.
   El failsafe CSS lo oculta solo a los 6s aunque JS nunca corra;
   init.js lo cierra antes (window.load, mín. 500ms / máx. 3s). */
#splash {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #071a5e 0%, #1538B8 50%, #12566e 100%);
  transition: opacity .45s ease, visibility .45s;
  animation: splashFailsafe .5s ease 6s forwards;
}
.splash-logo { height: clamp(180px, 32vw, 340px); width: auto; }

/* Barra de progreso en el borde superior. El avance es orientativo
   (no hay progreso real medible): crece rápido al inicio y desacelera
   cerca del 88%; al ocultarse el splash salta al 100%. */
.splash-bar {
  /* transform en vez de width: evita forzar layout en cada frame */
  position: absolute; top: 0; left: 0; height: 3px; width: 100%;
  background: var(--teal);
  box-shadow: 0 0 12px rgba(64,197,242,.8);
  transform-origin: left; transform: scaleX(0);
  animation: splashProgress 3s cubic-bezier(.15,.75,.35,1) forwards;
  transition: transform .25s ease;
}
#splash.done .splash-bar { transform: scaleX(1); animation: none; }
@keyframes splashProgress { 0% { transform: scaleX(0); } 100% { transform: scaleX(.88); } }

#splash.done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes splashFailsafe { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  #splash { transition: none; }
  .splash-bar { animation: none; transform: scaleX(1); transition: none; }
}

/* ── Focus visible — accesibilidad teclado ───────── */
:focus-visible {
  outline: 2.5px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible,
button:focus-visible { outline-offset: 4px; border-radius: 8px; }
a:focus-visible      { border-radius: 3px; }