/*
 * Lo que comparten las webs de ejemplo de /precios (Taller Rojo, un taller inventado): las fuentes, la franja
 * que dice que es un ejemplo y el interruptor para pasar de la estática a la dinámica.
 * Fuentes con licencia OFL: Bebas Neue y Plus Jakarta Sans.
 */
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/bebas-neue-latin-400-normal.woff2") format("woff2") }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fuentes/plus-jakarta-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fuentes/plus-jakarta-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }

:root {
  --rojo: #d81e26; --rojo-osc: #a8141b; --rojo-claro: #fdecec;
  --negro: #0c0c0d; --negro-2: #161618; --negro-3: #222226;
  --blanco: #fff; --hueso: #f5f4f2; --linea: #e6e4e1;
  --tinta: #121213; --tinta-2: #4a4a4f; --tinta-3: #77777d;
  --rotulo: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* La franja de arriba: nadie debe tomarla por un taller de verdad. */
.ej-franja { position: relative; z-index: 70; display: flex; align-items: center; justify-content: center; gap: 8px 14px; flex-wrap: wrap; padding: 9px 16px; background: #050506; color: #d6d6da; font: 500 13.5px/1.4 var(--sans); text-align: center; border-bottom: 1px solid #222 }
.ej-franja b { color: #fff }
.ej-franja nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center }
.ej-franja a { padding: 4px 11px; border-radius: 999px; border: 1px solid #3a3a40; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap }
.ej-franja a.ej-meta { background: #35c9b2; border-color: #35c9b2; color: #03201b }

/* El interruptor estática / dinámica, abajo a la izquierda. */
.ej-cambio { position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; padding: 4px; border-radius: 999px; background: rgba(12,12,13,.92); border: 1px solid #333; box-shadow: 0 10px 30px rgba(0,0,0,.35); font: 700 13px var(--sans); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.ej-cambio a { padding: 8px 14px; border-radius: 999px; color: #c9c9ce; text-decoration: none; white-space: nowrap }
.ej-cambio a[aria-current="page"] { background: var(--rojo); color: #fff }
.ej-cambio small { display: block; font-weight: 600; font-size: 10.5px; opacity: .8 }

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

@media (max-width: 640px) {
  .ej-franja { font-size: 12.5px; padding: 8px 12px }
  .ej-cambio { left: 50%; transform: translateX(-50%); bottom: 12px; font-size: 12px }
  .ej-cambio a { padding: 7px 12px }
}