/* TARSIS · sistema visual (mismo manual que somostarsis.com)
   Negro, blanco hueso, rojo fuego y rosa suave. 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 de cada tema (mismo en panel, móvil y pantalla) */
  --tema-apologetica: #e89d86;
  --tema-evangelismo: #e8c37a;
  --tema-misiones: #8fb8d9;
  --tema-otra: #8f8a85;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--fuego); color: #fff; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }

.estrella { display: inline-block; width: .8em; height: .8em; flex: none; fill: currentColor; vertical-align: -0.05em; }
.etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.serif { font-family: var(--serif); font-weight: 400; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--fuego);
  color: #fff;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.boton:hover { background: var(--fuego-oscuro); }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .45; cursor: default; transform: none; }
.boton.fantasma { background: transparent; border-color: rgba(230, 230, 230, .3); color: var(--hueso-2); }
.boton.fantasma:hover { border-color: var(--hueso); color: var(--hueso); }
.boton.hueso { background: var(--hueso); color: #0a0a0a; }
.boton.hueso:hover { background: #fff; }

.campo {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(230, 230, 230, .22);
  border-radius: 0;
  background: var(--carbon);
  color: var(--hueso);
}
.campo::placeholder { color: var(--humo); }
.campo:focus { border-color: var(--rosa); outline: none; }

.tema-chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: 4px 9px;
  border: 1px solid currentColor;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tema-apologetica { color: var(--tema-apologetica); }
.tema-evangelismo { color: var(--tema-evangelismo); }
.tema-misiones { color: var(--tema-misiones); }
.tema-otra { color: var(--tema-otra); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

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