/* ════════════════════════════════════════════════════════════════
   © 2026 Mizziu Fuentes · mizziu.com
   Hecho a la medida por Norrium · norrium.com
   Todos los derechos reservados.
   ════════════════════════════════════════════════════════════════

   MIZZIU FUENTES · css/00_base.css · v30
   La base

   Los colores de la casa (claro y oscuro), las letras, lo que se
   esconde y la forma en que aparecen las cosas al bajar.

   — ✦ — · Marcos 11:24
   ════════════════════════════════════════════════════════════════ */

/* ── Los colores y el modo oscuro ──────────────────────────────── */

:root {
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
  --paper: #f5efe3;
  --ink: #1f1b16;
  --soft: #6a6055;
  --rule: #d9cdb8;
  --accent: #b4532a;
  --accent-soft: #f0dccb;
  --card: #fbf7ef;
  --hero: #14110d;
  --hero-ink: #f3eadb;
  --hero-soft: #cdbfa8;
  --cobre: #e9a273;
  --oro: #d9a441;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16130f;
    --ink: #ece3d3;
    --soft: #a99d8b;
    --rule: #3a3229;
    --accent: #e07b4a;
    --accent-soft: #3a2418;
    --card: #1d1914;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #16130f;
  --ink: #ece3d3;
  --soft: #a99d8b;
  --rule: #3a3229;
  --accent: #e07b4a;
  --accent-soft: #3a2418;
  --card: #1d1914;
  color-scheme: dark;
}

/* ── Lo básico de la página ────────────────────────────────────── */

html {
  scroll-padding-top: env(safe-area-inset-top,0px);
}

body {
  padding: 0;
  font: 14px -apple-system,BlinkMacSystemFont,sans-serif;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader",Georgia,serif;
  font-size: 1.15rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

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

img {
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline-offset: 3px;
}

[hidden]:not([hidden=until-found i]),
[hidden] {
  display: none !important;
}

/* ── Las letras ────────────────────────────────────────────────── */

.mono {
  font-family: "IBM Plex Mono",monospace;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mono[style*="--oro"] {
  color: var(--cobre) !important;
}

/* ── Las salas y cómo aparecen al bajar ────────────────────────── */

.page {
  display: none;
}

.page.on {
  display: block;
}

.js .rev {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease,transform .7s ease;
}

.js .rev.vis {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .rev {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Etiquetas de ejemplo ──────────────────────────────────────── */

.ejemplo {
  font-family: "IBM Plex Mono",monospace;
  text-transform: uppercase;
  color: #8a7c6c;
  border: 1px dashed #4a3f33;
  border-radius: 999px;
  padding: 2px 8px;
  justify-self: start;
  align-self: start;
  font-size: .7rem;
  letter-spacing: .12em;
}