/* Marca Routsetter — sutil, nunca protagonista.
   El logo se usa EXACTAMENTE como en el archivo original: composición vertical (símbolo a la
   izquierda y «ROUTSETTER» en vertical a la derecha). No se gira ni se recompone.
   Para cambiarlo: sustituye frontend/static/img/routsetter-mark.svg (una sola forma, sin fondo;
   se tiñe con CSS, así que vale cualquier color) y ajusta --rs-ratio (ancho / alto) si cambia. */
:root {
  --rs-logo: url("/static/img/routsetter-mark.svg");
  --rs-ratio: 0.6323;             /* ancho / alto del logo original (463.5 × 733.1) */
  --rs-watermark-opacity: .035;   /* marca de agua casi imperceptible: el protagonista es el rocódromo */
}

.rs-mark {
  display: inline-block; vertical-align: middle; height: 1.6em; aspect-ratio: var(--rs-ratio);
  background-color: currentColor;
  -webkit-mask: var(--rs-logo) center / contain no-repeat; mask: var(--rs-logo) center / contain no-repeat;
}

/* Firma en pie de página */
.powered { display: flex; align-items: center; justify-content: center; gap: 10px; opacity: .7; }
.powered .rs-mark { height: 52px; color: var(--ink); }
/* En la entrada del rocódromo la firma es algo mayor, pero el nombre del gimnasio sigue mandando */
.landing .powered { flex-direction: column; gap: 6px; opacity: .8; margin-top: 34px; }
.landing .powered .rs-mark { height: 96px; }

/* Marca de agua en el fondo: debajo del contenido, sin girar */
body::before {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  right: 2vw; bottom: 90px; height: min(26vh, 220px); aspect-ratio: var(--rs-ratio);
  background-color: var(--ink); opacity: var(--rs-watermark-opacity);
  -webkit-mask: var(--rs-logo) center / contain no-repeat; mask: var(--rs-logo) center / contain no-repeat;
}
#app, #admin { position: relative; z-index: 1; }
@media print { body::before { display: none; } }