/* TARSIS · sistema visual (mismo manual que somostarsis.com y tarsis-preguntas)
   Negro, blanco hueso y rojo fuego. Instrument Serif para titulares, Aileron para el texto. */

@font-face { font-family: "Instrument Serif"; src: url("/static/fuentes/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/static/fuentes/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("/static/fuentes/Aileron-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("/static/fuentes/Aileron-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("/static/fuentes/Aileron-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Aileron"; src: url("/static/fuentes/Aileron-Heavy.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --negro: #000000;
  --carbon: #0e0d0c;
  --brasa: #1a1614;
  --hueso: #e6e6e6;
  --hueso-2: #d6d3cf;
  --ceniza: #8f8a85;
  --humo: #5a5552;
  --fuego: #c93c23;
  --fuego-oscuro: #9d2d19;
  --rosa: #e89d86;
  --linea: rgba(230, 230, 230, 0.14);
  --ok: #7fbf8e;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Aileron", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
a { color: var(--hueso); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border-radius: 999px; border: 1px solid var(--linea);
  background: transparent; color: var(--hueso);
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.boton:hover { border-color: rgba(230, 230, 230, 0.35); }
.boton:disabled { opacity: 0.45; cursor: default; }
.boton.fuego { background: var(--fuego); border-color: var(--fuego); color: #fff; }
.boton.fuego:hover { background: var(--fuego-oscuro); border-color: var(--fuego-oscuro); }
.boton.claro { background: var(--hueso); border-color: var(--hueso); color: var(--negro); }
.boton.claro:hover { background: #fff; }
.boton.pequeno { min-height: 36px; padding: 6px 14px; font-size: 13px; }

:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }

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