@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/vendor/fonts/bricolage/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
}
@font-face { font-family: 'Figtree'; src: url('/vendor/fonts/figtree/figtree-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/vendor/fonts/figtree/figtree-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/vendor/fonts/figtree/figtree-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

@font-face {
  font-family: 'Geist';
  src: url('/vendor/fonts/geist/geist-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/vendor/fonts/geist/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --fondo: #121A25;
  --hundido: #0D131C;
  --panel: #1A2432;
  --panel-2: #212D3D;
  --linea: #2A3646;
  --linea-fuerte: #3A4A5E;
  --texto: #DCE6F0;
  --blanco: #F4F8FC;
  --tenue: #8B9AAE;

  --azul-hielo: #CFE6FA;
  --azul: #8EC5F2;
  --azul-medio: #5FA8E8;
  --azul-fondo: #16283A;
  --durazno: #FBD6B5;
  --naranja: #F6B07A;
  --naranja-fuerte: #F28C3C;
  --naranja-fondo: #33261B;

  --verde: #4CC38A;
  --amarillo: #F2C94C;
  --rojo: #E5484D;
  --rojo-texto: #F19A9C;
  --rojo-fondo: #3A1C20;
  --amarillo-fondo: #352D17;
  --verde-fondo: #173226;

  --display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cuerpo: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 10px;
  --r-chico: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { font-family: var(--display); color: var(--blanco); margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.15; }
h2 { font-size: 1.25rem; line-height: 1.25; }
h3 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--azul); }
.tenue { color: var(--tenue); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

/* ---------- Formularios ---------- */
label { display: block; font-size: 0.85rem; color: var(--tenue); margin-bottom: 4px; }
input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--blanco);
  background: var(--hundido);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-chico);
  padding: 9px 11px;
  min-height: 42px;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(142, 197, 242, 0.18); }
input[type='checkbox'] { width: auto; min-height: 0; }
.campo { margin-bottom: 14px; }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.ayuda { font-size: 0.8rem; color: var(--tenue); margin-top: 4px; }
.error { color: var(--rojo-texto); font-size: 0.875rem; margin-top: 8px; min-height: 1.2em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 0.9rem;
  border-radius: var(--r-chico);
  padding: 9px 16px; min-height: 40px;
  border: 1px solid var(--linea-fuerte);
  background: var(--panel-2); color: var(--blanco);
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { border-color: var(--azul); }
.btn-primario { background: var(--azul); border-color: var(--azul); color: #0E1622; }
.btn-primario:hover { background: var(--azul-hielo); border-color: var(--azul-hielo); }
.btn-naranja { background: var(--naranja); border-color: var(--naranja); color: #2B1A0C; }
.btn-naranja:hover { background: var(--durazno); border-color: var(--durazno); }
.btn-peligro { color: var(--rojo-texto); }
.btn-peligro:hover { border-color: var(--rojo); }
.btn-texto { background: none; border-color: transparent; color: var(--azul); padding: 6px 8px; min-height: 32px; }
.btn-texto:hover { border-color: transparent; text-decoration: underline; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}