/* Odómetro · Moxen — los estilos del efecto y de la demostración. */
:root {
  --od-fondo: #0a0a0a;
  --od-texto: #f4f4f4;
  --od-suave: rgba(255, 255, 255, .5);
  --od-linea: rgba(255, 255, 255, .16);
  /* los tambores (los lee odometro.js): negros con cifras blancas, y el
     de las décimas al revés, como en los cuentakilómetros de verdad */
  --od-tambor: #151515;
  --od-cifra: #eeeeee;
  --od-tambor-decimal: #e9e9e9;
  --od-cifra-decimal: #121212;
  --od-interior: #030303;
  /* la placa de metal */
  --od-placa-a: #2c2c2c;
  --od-placa-b: #151515;
  --od-placa-c: #0e0e0e;
  --od-placa-luz: rgba(255, 255, 255, .13);
  --od-grabado: rgba(255, 255, 255, .34);
  --od-grabado-luz: rgba(255, 255, 255, .07);
  --od-grabado-sombra: rgba(0, 0, 0, .9);
  --od-sombra: rgba(0, 0, 0, .8);
  --od-pomo-a: #6a6a6a;
  --od-pomo-b: #262626;
  --od-pomo-c: #101010;
  /* las medidas: todo el aparato se escala con su tamaño de letra */
  --od-escala: min(16px, calc((100vw - 28px) / 61));
}

/* ── el efecto ─────────────────────────────────────────────────────── */
/* La ventana: un hueco en la placa. Su bisel es la pared del hueco: la
   de arriba mira hacia abajo y queda en sombra, la de abajo recibe la luz. */
.od-ventana {
  position: relative; flex: none; width: 41em; height: 14em; border-radius: 1.1em;
  background: var(--od-interior);
}
.od-ventana::before {
  content: ""; position: absolute; inset: -.55em; z-index: -1; border-radius: 1.55em;
  background: linear-gradient(180deg, #000 0%, #0b0b0b 40%, #2c2c2c 82%, #4a4a4a 100%);
  box-shadow: 0 1px 0 var(--od-placa-luz), 0 -1px 0 rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .12);
}
.od-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
/* El vidrio: un reflejo ancho en diagonal y otro fino, la luz del techo
   en el borde de arriba, y la sombra que el bisel echa sobre los tambores. */
.od-vidrio {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(104deg, transparent 0 17%, rgba(255, 255, 255, .075) 17.5% 27%, transparent 27.5% 62%,
      rgba(255, 255, 255, .045) 62.5% 64.5%, transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .015) 24%, transparent 46%, transparent 84%, rgba(255, 255, 255, .035));
  box-shadow:
    inset 0 1.7em 1.6em -.9em rgba(0, 0, 0, .92),
    inset 0 -1.3em 1.3em -.9em rgba(0, 0, 0, .8),
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ── la demostración ───────────────────────────────────────────────── */
.od-escena {
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--od-escala) * 3.4); padding: 2rem 14px;
  /* una luz cenital suave sobre el aparato */
  background: radial-gradient(60% 55% at 50% 42%, rgba(255, 255, 255, .045), transparent 70%);
}
/* La placa: metal cepillado con el canto de arriba iluminado. */
.od-placa {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 1.7em; padding: 2.5em 2.3em 2.5em 2.6em;
  font-size: var(--od-escala); border-radius: 2.4em;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 3px, rgba(0, 0, 0, .025) 3px 4px),
    radial-gradient(130% 150% at 32% 0%, var(--od-placa-a), var(--od-placa-b) 52%, var(--od-placa-c));
  box-shadow:
    inset 0 1px 0 var(--od-placa-luz), inset 0 -1px 0 rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .035),
    0 .2em .4em rgba(0, 0, 0, .35), 0 2.6em 4.5em -1.4em var(--od-sombra);
}
/* cuatro remaches abombados en las esquinas, con la luz desde arriba */
.od-placa::before {
  content: ""; position: absolute; inset: 1.15em; pointer-events: none;
  --od-remache: radial-gradient(circle at 42% 34%, var(--od-pomo-a) 0, var(--od-pomo-b) .22em, var(--od-pomo-c) .36em, rgba(0, 0, 0, .55) .44em, transparent .52em);
  background: var(--od-remache) 0 0, var(--od-remache) 100% 0, var(--od-remache) 0 100%, var(--od-remache) 100% 100%;
  background-size: 1.1em 1.1em; background-repeat: no-repeat;
}
/* el golpe seco de la leva al poner a cero: la placa acusa un pelo */
.od-placa.is-golpe { animation: od-golpe .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes od-golpe { 0% { transform: none; } 18% { transform: translateY(.09em); } 100% { transform: none; } }

/* letras grabadas en el metal: el canto de arriba en sombra, el de abajo con luz */
.od-grabado {
  flex: none; font-size: 1.05em; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--od-grabado);
  text-shadow: 0 -1px 0 var(--od-grabado-sombra), 0 1px 0 var(--od-grabado-luz); user-select: none;
}
.od-grabado:first-child { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .32em; }

/* El botón de cero: un pomo moleteado que se hunde en su casquillo. */
.od-cero {
  position: relative; flex: none; width: 3.6em; height: 3.6em; margin-left: .4em; padding: 0; border: 0; border-radius: 50%;
  font-size: inherit;   /* los botones no heredan la letra: sin esto, sus em no siguen a la placa */
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .45), transparent 26%),
    radial-gradient(circle at 50% 45%, var(--od-pomo-a), var(--od-pomo-b) 58%, var(--od-pomo-c));
  box-shadow: 0 .45em .55em rgba(0, 0, 0, .55), 0 0 0 .32em #050505, 0 0 0 .4em rgba(255, 255, 255, .07), inset 0 -.2em .3em rgba(0, 0, 0, .35);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}
/* el moleteado del canto */
.od-cero::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(rgba(0, 0, 0, .3) 0 4deg, rgba(255, 255, 255, .06) 4deg 8deg);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%); mask: radial-gradient(circle, transparent 64%, #000 66%);
}
/* un área de toque más grande que el pomo */
.od-cero::after { content: ""; position: absolute; inset: -.9em; border-radius: 50%; }
.od-cero:active, .od-cero.is-pulsado {
  transform: translateY(.12em) scale(.95); transition-duration: .06s;
  box-shadow: 0 .12em .2em rgba(0, 0, 0, .6), 0 0 0 .32em #050505, 0 0 0 .4em rgba(255, 255, 255, .07), inset 0 -.1em .2em rgba(0, 0, 0, .4);
}
.od-cero:focus-visible { outline: 2px solid var(--od-suave); outline-offset: .7em; }

.od-boton {
  padding: .95rem 1.7rem; border-radius: 99px; cursor: pointer; border: 1px solid var(--od-linea);
  background: none; color: var(--od-texto); font: 500 1rem "Jost", system-ui, sans-serif;
  transition: border-color .25s, background-color .25s, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.od-boton:hover { border-color: var(--od-suave); background: rgba(127, 127, 127, .06); }
.od-boton:active { transform: scale(.96); transition-duration: .08s; }
.od-boton:focus-visible { outline: 2px solid var(--od-suave); outline-offset: 4px; }

/* en el móvil, la etiqueta vertical sobra */
@media (max-width: 560px) {
  .od-grabado:first-child { display: none; }
  .od-placa { gap: 1.4em; padding: 2.2em 2em; }
}
@media (prefers-reduced-motion: reduce) {
  .od-placa.is-golpe { animation: none; }
}