/* DIRECCION A — "Taller": papel cálido, editorial, el rojo como acento escaso.
   Referencia de la esponja: Anagrama — la obra manda y el marco calla.
   Apuesta: parecer un estudio con oficio, no una empresa de software. */

:root {
  --fondo: #f5f2ec;
  --fondo-2: #efebe2;
  --tinta: #1c1d1a;
  --apagado: #5f5d55;
  --linea: #d6d0c4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #16181a; --fondo-2: #1d2023; --tinta: #eceee9;
    --apagado: #a4a8a2; --linea: #343a3d;
    --rojo: #f2564b; --rojo-hover: #ff6b60;
    --aviso: #d9b45a;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #16181a; --fondo-2: #1d2023; --tinta: #eceee9;
  --apagado: #a4a8a2; --linea: #343a3d;
  --rojo: #f2564b; --rojo-hover: #ff6b60;
  --aviso: #d9b45a;
}

.portada { padding-block: clamp(3.5rem, 2rem + 8vw, 7rem) var(--s6); }
/* 20ch en vez de 16ch: a 16 el titular caia en cuatro lineas y dejaba
   "la culpa." sola en la ultima. Lo cazo el revisor independiente. */
.portada h1 { max-width: 20ch; text-wrap: balance; }
.portada .guia { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); max-width: 44ch; }

/* El numeral editorial: marca la seccion como una revista, no como un panel */
.numeral { font-family: var(--serif); font-size: .95rem; color: var(--rojo); margin-bottom: var(--s1); }

.regla { height: 1px; background: var(--linea); margin-block: var(--s4); }
.tarjeta { background: transparent; }
.tarjeta:hover { border-color: var(--rojo); }