/* ════════════════════════════════════════════════════════════════════════════
   🔴 FICHERO GENERADO — NO LO EDITES. Lo escribe `scripts/generar-css.py`.

   Lo que se edita es la hoja COMENTADA:  assets/css/_fuente/bonos.css

   Aquí se sirve la misma hoja sin los comentarios, que son el 80 % de los bytes
   que descarga el visitante (`ROADMAP U-284`). Los comentarios NO se han
   perdido: siguen enteros en la fuente, que es donde se leen.
   ════════════════════════════════════════════════════════════════════════════ */
:root {

  color-scheme: dark;

  --bo-acento: #e8c477;
  --bo-acento-rgb: 232, 196, 119;
  --bo-sobre-acento: #010103;
  --bo-fondo: #010103;
  --bo-alta: #0c0c10;
  --bo-senal: #2e2310;
  --bo-borde: rgba(255, 255, 255, 0.12);
  --bo-cota: rgba(255, 255, 255, 0.62);
  --bo-cristal: rgba(255, 255, 255, 0.05);
  --bo-t: 240ms;
  --bo-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bo-cifra: clamp(40px, 7.4vw, 88px);
}

.bo-body { background: var(--bo-fondo); }

.bo-seccion {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(60px, 9vw, 128px) clamp(18px, 5vw, 48px);
}
.bo-seccion > p { max-width: 62ch; }

.bo-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: var(--bo-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bo-acento);
}
.bo-titulo {
  margin: 0 0 18px;
  font-size: clamp(30px, 5.2vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.02em;

  text-wrap: balance;
}
.bo-seccion p { color: rgba(255, 255, 255, 0.84); line-height: 1.6; }
.bo-seccion p strong { color: #fff; }

.bo-sup-alta, .bo-sup-senal { position: relative; z-index: 0; }
.bo-sup-alta::before, .bo-sup-senal::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
}
.bo-sup-alta::before { background: var(--bo-alta); }
.bo-sup-senal::before { background: var(--bo-senal); }
.bo-sup-senal {
  --bo-cota: rgba(255, 255, 255, 0.78);
  --bo-borde: rgba(255, 255, 255, 0.2);
  --bo-cristal: rgba(255, 255, 255, 0.07);
}

.bo-sup-senal .bo-cifra { color: #fff; }
.bo-sup-senal .bo-eyebrow { color: var(--bo-acento); }

.bo-escena { position: relative; }

.bo-hero {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(56px, 8vh, 92px) clamp(18px, 5vw, 48px) clamp(30px, 5vh, 56px);
  text-align: center;
}
@media (min-width: 900px) {
  .bo-hero { position: sticky; top: 0; z-index: 0; }
}

.bo-hero-dentro { display: grid; justify-items: center; gap: clamp(12px, 1.5vw, 20px); }

.bo-sobre {
  position: relative;

  width: clamp(132px, 17vw, 252px);
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, 0.72));
}
.bo-sobre img { display: block; width: 100%; height: auto; }
.bo-sobre img[data-bo-sobre='abierto'] { position: absolute; inset: 0; }

.bo-sobre img[data-bo-sobre='cerrado'] { visibility: hidden; }
.bo-sobre img[data-bo-sobre='abierto'] { visibility: visible; }
.mov .bo-sobre img[data-bo-sobre='cerrado'] { visibility: visible; }
.mov .bo-sobre img[data-bo-sobre='abierto'] { visibility: hidden; }
.mov .bo-sobre.esta-abierto img[data-bo-sobre='cerrado'] { visibility: hidden; }
.mov .bo-sobre.esta-abierto img[data-bo-sobre='abierto'] { visibility: visible; }

.bo-haz {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(var(--bo-acento-rgb), 0.46) 0%,
              rgba(var(--bo-acento-rgb), 0.14) 26%,
              transparent 62%);
  pointer-events: none;
  z-index: -1;
}
.mov .bo-haz { opacity: 0; }
.mov .bo-sobre.esta-abierto .bo-haz { opacity: 1; }

.bo-hero-titular {
  margin: 0;
  font-size: clamp(30px, 4.8vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;

  transform-origin: center bottom;
}

.bo-cifra {
  margin: 0;
  font-size: var(--bo-cifra);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--bo-acento);

  font-variant-numeric: tabular-nums;
}
.bo-frase { margin: 10px 0 0; color: var(--bo-cota); font-size: clamp(14px, 1.8vw, 17px); }
.bo-frase strong { color: #fff; }

.bo-baja {
  font-family: var(--bo-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bo-cota);
}

.bo-aire { height: 0; }
@media (min-width: 900px) { .bo-aire { height: 90svh; } }

.bo-cara {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  align-items: end;
  background: var(--bo-fondo);
  overflow: hidden;
}
.bo-cara-foto { position: absolute; inset: 0; margin: 0; z-index: 0; }
.bo-cara-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bo-cara-foto video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 500ms ease;
}
.bo-cara-foto video.esta-lista { opacity: 1; }

.bo-cara-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1,1,3,0.70) 0%, rgba(1,1,3,0.10) 32%, rgba(1,1,3,0.94) 86%);
}
.bo-cara-texto {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 110px) clamp(18px, 5vw, 48px);
  width: 100%;
}
.bo-cara-texto .bo-titulo { max-width: 16ch; }

.bo-video-caja {
  position: relative;
  margin: clamp(26px, 4vw, 44px) 0 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--bo-borde);
  background: #05050a;
  aspect-ratio: 16 / 9;
}
@media (max-width: 760px) { .bo-video-caja { aspect-ratio: 4 / 5; } }
.bo-video-caja video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms ease;
}
.bo-video-caja video.esta-lista { opacity: 1; }

.bo-decide { text-align: center; }
.bo-decide > p { margin-inline: auto; }

.bo-atajos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.bo-atajos a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  min-width: 62px;
  min-height: 52px;
  padding: 6px 18px;
  border: 1px solid var(--bo-borde);
  border-radius: 12px;
  font-family: var(--bo-mono);
  font-size: 17px;
  color: #fff;
  text-decoration: none;
  background: var(--bo-cristal);
  transition: border-color var(--bo-t) ease, color var(--bo-t) ease, background-color var(--bo-t) ease;
}
.bo-atajos a[aria-current='true'] {
  border-color: var(--bo-acento);
  background: var(--bo-acento);
  color: var(--bo-sobre-acento);
}
.bo-atajo-nota {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--bo-cota);
}
.bo-atajos a[aria-current='true'] .bo-atajo-nota { color: var(--bo-sobre-acento); opacity: 0.74; }
@media (hover: hover) {
  .bo-atajos a:hover { border-color: var(--bo-acento); }
  .bo-atajos a[aria-current='true']:hover { border-color: #fff; }
}

.bo-otra { margin: 16px 0 0; font-size: 14px; color: var(--bo-cota); }

.bo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin-top: 26px;
  padding: 0 34px;
  border-radius: 999px;
  background: var(--bo-acento);
  color: var(--bo-sobre-acento);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  transition: transform var(--bo-t) ease, box-shadow var(--bo-t) ease;
}
@media (hover: hover) {
  .bo-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(var(--bo-acento-rgb), 0.7); }
}

.bo-otra a, .bo-pies a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bo-acento);
}
.bo-pies { margin: 0; }

.bo-muro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 4px;
  margin: clamp(26px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;

  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
}
@media (min-width: 760px) { .bo-muro { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); } }
.bo-muro li { aspect-ratio: 1; overflow: hidden; border-radius: 6px; }
.bo-muro img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter: saturate(0.55) brightness(0.78);
  transition: filter var(--bo-t) ease, transform var(--bo-t) ease;
}
@media (hover: hover) {
  .bo-muro li:hover img { filter: none; transform: scale(1.06); }
}

.bo-fecha { font-size: clamp(19px, 2.6vw, 28px); line-height: 1.35; }
.bo-fecha strong { color: var(--bo-acento); }

.bo-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  background: var(--bo-borde);
  border: 1px solid var(--bo-borde);
  border-radius: 14px;
  overflow: hidden;
}
@media (min-width: 560px) { .bo-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .bo-rejilla { grid-template-columns: repeat(3, 1fr); } }
.bo-dato { padding: 24px 22px; background: var(--bo-alta); }
.bo-dato-t { display: block; font-size: 21px; font-weight: 700; color: var(--bo-acento); }
.bo-dato-d { display: block; margin-top: 6px; font-size: 14px; color: var(--bo-cota); }

.bo-duo { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 34px 0 0; }
.bo-visor { width: clamp(64px, 9vw, 104px); height: auto; color: var(--bo-acento); }
.bo-duo-mas { font-size: 26px; color: var(--bo-cota); }

.bo-placa {
  padding: clamp(26px, 4vw, 46px);
  border-radius: 16px;
  border: 1px solid var(--bo-borde);
  border-left: 3px solid var(--bo-acento);
  background: var(--bo-alta);
}
.bo-placa .bo-titulo { font-size: clamp(26px, 3.6vw, 42px); }

.bo-faq { margin-top: 26px; border-top: 1px solid var(--bo-borde); }
.bo-faq details { border-bottom: 1px solid var(--bo-borde); }
.bo-faq summary {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 10px 2px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.bo-faq summary::-webkit-details-marker { display: none; }
.bo-faq details[open] summary { color: var(--bo-acento); }
.bo-faq-r { padding: 0 2px 20px; margin: 0; color: var(--bo-cota); max-width: 62ch; }

.bo-sticky {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 60;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--bo-acento);
  color: var(--bo-sobre-acento);
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--bo-t) ease, transform var(--bo-t) ease;
}

.bo-sticky.bo-cede {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(12px);
}
@media (max-width: 480px) {
  .bo-sticky { left: 16px; right: 16px; transform: none; justify-content: center; }
  .bo-sticky.bo-cede { transform: translateY(12px); }
}

.mov [data-bo-reveal] { opacity: 0; transform: translateY(26px); }

@media (prefers-reduced-motion: reduce) {
  .bo-sobre { filter: none; }
  .bo-cta:hover { transform: none; }
  .bo-muro img { transition: none; }
  .mov [data-bo-reveal] { opacity: 1; transform: none; }

  .mov .bo-sobre img[data-bo-sobre='cerrado'] { visibility: hidden; }
  .mov .bo-sobre img[data-bo-sobre='abierto'] { visibility: visible; }
  .mov .bo-haz { opacity: 1; }
}

.bo-atajos a:focus-visible,
.bo-cta:focus-visible,
.bo-sticky:focus-visible,
.bo-faq summary:focus-visible,
.bo-otra a:focus-visible,
.bo-pies a:focus-visible,
.bo-pasos a:focus-visible,
.bo-video-pausa:focus-visible {
  outline: 2px solid var(--bo-acento);
  outline-offset: 3px;
  border-radius: 12px;
}

.bo-sup-senal .bo-atajos a:focus-visible,
.bo-sup-senal .bo-cta:focus-visible,
.bo-sup-senal .bo-otra a:focus-visible { outline-color: #fff; }

.bo-atajos a, .bo-cta, .bo-sticky, .bo-faq summary,
.bo-otra a, .bo-pies a, .bo-pasos a, .bo-video-pausa { touch-action: manipulation; }

.bo-linea {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.bo-linea > span { display: block; will-change: transform; }
.mov .bo-linea > span { transform: translateY(105%); }

.mov [data-bo-tras] { opacity: 0; transform: translateY(14px); }

.mov .bo-muro li { opacity: 0; transform: scale(0.86); }

@keyframes bo-abrir-solo {
  0%, 22%  { opacity: 0; }
  26%, 100% { opacity: 1; }
}
@keyframes bo-latir-haz {
  0%, 24%   { opacity: 0; transform: scale(0.6); }
  48%       { opacity: 1; transform: scale(1.06); }
  100%      { opacity: 0.82; transform: scale(1); }
}
@media (max-width: 899px) {
  .js .bo-sobre img[data-bo-sobre='abierto'] { animation: bo-abrir-solo 1100ms ease-out both; }
  .js .bo-sobre img[data-bo-sobre='cerrado'] {
    visibility: visible;
    animation: bo-abrir-solo 1100ms ease-out both;
    animation-direction: reverse;
  }
  .js .bo-haz { animation: bo-latir-haz 1400ms ease-out both; transform-origin: center; }
}

@keyframes bo-pulso { 0% { transform: scale(1); } 46% { transform: scale(1.045); } 100% { transform: scale(1); } }
.bo-cifra.ha-cambiado { animation: bo-pulso 160ms ease-out; }

.bo-faq summary { gap: 12px; }
.bo-faq summary::before {
  content: '';
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #ff79b0, #d3346f 62%, #8e1f47);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.5);
  transition: transform var(--bo-t) ease;
}
.bo-faq details[open] summary::before { transform: scale(1.18) rotate(-12deg); }

.bo-pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  background: var(--bo-borde);
  border: 1px solid var(--bo-borde);
  border-radius: 14px;
  overflow: hidden;
}
@media (min-width: 760px) { .bo-pasos { grid-template-columns: repeat(3, 1fr); } }
.bo-paso {
  position: relative;
  padding: 26px 22px 24px;
  background: var(--bo-alta);

  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.bo-paso::before {
  content: attr(data-paso);
  display: block;
  margin-bottom: 10px;
  font-family: var(--bo-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--bo-acento);
}
.bo-paso b { display: block; font-size: 18px; margin-bottom: 6px; }
.bo-paso span { color: var(--bo-cota); font-size: 15px; line-height: 1.5; }

.bo-prueba {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 26px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--bo-borde);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(var(--bo-acento-rgb), 0.10), transparent 62%);
}
.bo-prueba-nota { font-size: 30px; font-weight: 700; color: var(--bo-acento); line-height: 1; }
.bo-prueba-txt { margin: 0; color: var(--bo-cota); font-size: 15px; }
.bo-prueba-txt strong { color: #fff; }

.bo-video-caja { --bo-pausa: 0; }
.bo-video-pausa {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--bo-borde);
  border-radius: 999px;
  background: rgba(1, 1, 3, 0.62);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--bo-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
@media (hover: hover) { .bo-video-pausa:hover { border-color: var(--bo-acento); color: var(--bo-acento); } }

.bo-sup-alta::before {
  background:
    radial-gradient(120% 60% at 18% 0%, rgba(var(--bo-acento-rgb), 0.055), transparent 58%),
    var(--bo-alta);
}
.bo-sup-senal::before {
  background:
    radial-gradient(90% 70% at 82% 10%, rgba(var(--bo-acento-rgb), 0.16), transparent 62%),
    var(--bo-senal);
}

@media (prefers-reduced-motion: reduce) {
  .mov .bo-linea > span { transform: none; }
  .mov [data-bo-tras] { opacity: 1; transform: none; }
  .mov .bo-muro li { opacity: 1; transform: none; }
  .bo-cifra.ha-cambiado { animation: none; }
  .bo-faq details[open] summary::before { transform: none; }
  .js .bo-sobre img[data-bo-sobre='abierto'],
  .js .bo-sobre img[data-bo-sobre='cerrado'],
  .js .bo-haz { animation: none; }

  @media (max-width: 899px) {
    .js .bo-sobre img[data-bo-sobre='cerrado'] { visibility: hidden; }
    .js .bo-sobre img[data-bo-sobre='abierto'] { visibility: visible; opacity: 1; }
    .js .bo-haz { opacity: 1; transform: none; }
  }
}

.bo-para {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}
.bo-para label { font-size: 14px; color: var(--bo-cota); }
.bo-para input {
  width: clamp(130px, 26vw, 190px);
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--bo-borde);
  border-radius: 10px;
  background: var(--bo-cristal);
  color: #fff;
  font: inherit;
  font-size: 16px;
  text-align: center;
}
.bo-para input::placeholder { color: rgba(255, 255, 255, 0.34); }
.bo-para input:focus-visible { outline: 2px solid var(--bo-acento); outline-offset: 3px; }

.bo-destino {
  position: absolute;

  left: 14%;
  top: 63%;
  z-index: 2;
  max-width: 62%;
  text-align: left;
  padding: 0 6px;
  font-size: clamp(13px, 1.5vw, 19px);
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity var(--bo-t) ease;
  pointer-events: none;

  rotate: -3.5deg;
}
.bo-sobre.tiene-nombre .bo-destino { opacity: 1; }
.bo-destino::before { content: 'Para '; opacity: 0.62; }

.bo-polvo {
  position: fixed;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
}
.bo-polvo.esta-vivo { opacity: 1; }

.bo-sello {
  position: absolute;
  right: clamp(14px, 4vw, 44px);
  top: clamp(14px, 3vw, 34px);
  width: clamp(54px, 7vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #ff79b0, #d3346f 62%, #8e1f47);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.45), 0 10px 26px -12px rgba(0, 0, 0, 0.9);
  opacity: 0.72;
  rotate: -7deg;
  pointer-events: none;
}
.bo-sello::after {
  content: '?';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.5em;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.4);
}
@supports (animation-timeline: view()) {
  .bo-sello {
    animation: bo-estampa 1s linear both;
    animation-timeline: view();
    animation-range: cover 18% cover 50%;
  }
}
@keyframes bo-estampa {
  from { opacity: 0;    scale: var(--bo-desde, 2.6); rotate: -16deg; }
  62%  { opacity: 0.72; scale: 0.94;                 rotate: -5deg;  }
  to   { opacity: 0.72; scale: 1;                    rotate: -7deg;  }
}

@media (max-width: 700px) {
  .bo-sello {
    --bo-desde: 1.45;
    width: 42px;
    right: 24px;
    top: 18px;
  }
}

.bo-tira {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0 0 10px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.bo-tira::-webkit-scrollbar { display: none; }
.bo-tira.esta-cogida { cursor: grabbing; scroll-snap-type: none; }
.bo-tira > li {
  flex: 0 0 auto;
  width: clamp(132px, 19vw, 210px);
  scroll-snap-align: center;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--bo-borde);
}
.bo-tira img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;

  -webkit-user-drag: none;
  user-select: none;
}
.bo-tira-pista {
  margin: 10px 0 0;
  font-family: var(--bo-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bo-cota);
}

.bo-momento {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding: 9px 18px;
  border: 1px solid rgba(var(--bo-acento-rgb), 0.42);
  border-radius: 999px;
  background: rgba(var(--bo-acento-rgb), 0.10);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-size: 14px;
  color: #fff;
}
.bo-momento b { color: var(--bo-acento); font-weight: 700; }
.bo-momento[hidden] { display: none; }

.bo-barra {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  width: 100%;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(var(--bo-acento-rgb), 0.3), var(--bo-acento));
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .bo-barra {
    animation: bo-barra-llena linear both;
    animation-timeline: scroll();
  }
}
@keyframes bo-barra-llena { to { transform: scaleX(1); } }

.bo-aviso {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--bo-borde);
  border-radius: 10px;
  background: rgba(var(--bo-acento-rgb), 0.08);
  font-family: var(--bo-mono);
  font-size: 12px;
  color: #fff;
  opacity: 0;
}
.bo-aviso.ha-llegado { opacity: 1; }
.bo-aviso::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bo-acento);
  flex: 0 0 auto;
}

@keyframes bo-respira {
  0%, 100% { text-shadow: 0 0 0 rgba(var(--bo-acento-rgb), 0); }
  50%      { text-shadow: 0 0 26px rgba(var(--bo-acento-rgb), 0.34); }
}
.bo-cifra { animation: bo-respira 3.6s ease-in-out infinite; }

.bo-cifra.ha-cambiado { animation: bo-pulso 160ms ease-out; }

@media (prefers-reduced-motion: reduce) {

  :root { --bo-t: 180ms; }

  .bo-cara-foto video,
  .bo-video-caja video { transition: none; }

  .bo-cifra { animation: none; }
  .bo-sello { animation: none; }
  .bo-barra { animation: none; transform: scaleX(1); opacity: 0.45; }
  .bo-polvo { display: none; }
  .bo-aviso { opacity: 1; }
  .bo-destino { transition: none; }
}