/* ==========================================================================
   ARCHIVO GENERADO — no se edita a mano.
   Sale de Marca/marca.tokens.json con Marca/generar-movimiento.py.
   Si cambias un color aquí, deja de ser el de la marca: los valores
   salen del bloque `color` de los tokens y se regeneran solos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SELECCIÓN DE TEXTO. El navegador pone su azul de sistema encima de
   cualquier paleta, y en una web de marca eso se ve. Oro de fondo y
   verde profundo de letra: #12291F sobre #C9A667 da 6,70:1, así que el texto
   seleccionado se lee mejor que antes, no peor.

   🔴 Va también en ::-moz-selection: Firefox no reconoce la forma corta
      dentro de una lista de selectores y se salta la regla ENTERA.
   -------------------------------------------------------------------------- */
::selection{ background:#C9A667; color:#12291F; text-shadow:none; }
::-moz-selection{ background:#C9A667; color:#12291F; text-shadow:none; }

/* --------------------------------------------------------------------------
   BARRA DE SCROLL. `scrollbar-color` es el estándar y lo entienden
   Firefox y Chrome 121+; `::-webkit-scrollbar` cubre Safari. Los dos,
   porque el que falte deja la barra gris del sistema en una página que
   ha cuidado todo lo demás.

   Y NO se esconde: una barra invisible es una pista de navegación que
   se le quita al visitante para que la página quede «limpia».
   -------------------------------------------------------------------------- */
html{ scrollbar-color:#C9A667 transparent; scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:#C9A667; border-radius:100px;
  border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:#12291F; background-clip:content-box; }

/* Los bloques de fondo oscuro invierten el pulgar: el verde sobre verde
   no se ve. Se marca con [data-tono="oscuro"] donde haga falta. */
[data-tono="oscuro"]{ scrollbar-color:#E2D9C6 transparent; }

/* --------------------------------------------------------------------------
   ANILLO DE FOCO. `motion.css` ya lo pinta con `currentColor`, que es lo
   correcto: se ve sobre cualquier fondo. Aquí solo se le da el grosor y
   la separación, que son de marca y no de movimiento.
   -------------------------------------------------------------------------- */
:focus-visible{ outline-width:2px; outline-offset:3px; }

/* Y el enlace de salto, que existe en las ocho páginas y solo aparece al
   tabular. Si se ve, tiene que verse bien. */
.fx-saltar:focus, .skip:focus{ background:#C9A667; color:#12291F; }