/* ===== Cartel de velocidad – v4 =====
   Requerimientos:
   - Número y "Km/hr" en NEGRO (sin sombras).
   - "Km/hr" más abajo para despegar del número.
   - Mantiene glare sólo al actualizar (desde v3).
*/
:root{
  --sign-size: clamp(220px, 26vw, 360px); /* ajuste fino centralizado */
}

@media (max-width:640px){
  :root{
    --sign-size: clamp(250px, 74vw, 380px);
  }
}

/* Círculo: sólo anillo PNG + sombra circular */
.sign{
  position: relative;
  width: var(--sign-size);
  height: var(--sign-size);
  border: 0 !important;
  border-radius: 50%;
  background: center/contain no-repeat url("assets/img/sign-ring.png");
  box-shadow:
    0 36px 64px rgba(15,23,42,.18),
    0 12px 24px rgba(15,23,42,.12);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: visible;
  transition: transform .2s ease, box-shadow .25s ease;
}
.sign:hover{ transform: translateY(-1px); }
.sign:active{ transform: translateY(0); }

/* Glare OFF por defecto; ON sólo con .is-glint (lo dispara el JS al actualizar) */
.sign::before{
  content:"";
  position:absolute;
  inset: 4% 4% 8% 4%;
  border-radius: 50%;
  background:
    radial-gradient(140% 90% at 28% 14%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 48%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  z-index: 0;
  opacity: .7;
  transform: translateX(-120%);
  animation: none;
  pointer-events: none;
}
.sign.is-glint::before{ animation: sign-glint 1.2s cubic-bezier(.2,.8,.2,1) 1; }
@keyframes sign-glint{
  0%   { transform: translateX(-120%); opacity:.0; }
  12%  { opacity:.50; }
  50%  { transform: translateX(0);     opacity:.70; }
  88%  { opacity:.35; }
  100% { transform: translateX(120%);  opacity:0; }
}

/* Número — negro, sin sombras, mayor */
.sign #speed-value{
  position: relative;
  z-index: 2;
  font-weight: 950;
  font-size: clamp(2.6rem, 13.5vw, 3.8rem);
  letter-spacing: -0.02em;
  color: #000 !important;   /* negro */
  line-height: 1;
  text-shadow: none !important; /* sin sombras */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  transform: translateZ(0);
}

/* Escalado por dígitos */
.sign span[data-digits="1"]{ font-size: clamp(2.8rem, 14.6vw, 4.1rem); }
.sign span[data-digits="2"]{ font-size: clamp(2.6rem, 13.5vw, 3.8rem); }
.sign span[data-digits="3"]{ font-size: clamp(2.4rem, 12.4vw, 3.4rem); letter-spacing: -0.02em; }
.sign span[data-digits="4"]{ font-size: clamp(2.2rem, 11.4vw, 3.0rem); letter-spacing: 0; }

/* Unidad — negro, más abajo y sin sombras */
.sign .sign-unit{
  position: absolute !important;
  z-index: 2;
  left: 50%;
  bottom: auto !important;
  top: calc(50% + clamp(20px, 4.2vw, 34px)) !important; /* más abajo que v3 */
  transform: translateX(-50%);
  font-weight: 900;
  font-size: clamp(.84rem, 2.4vw, 1.06rem);
  letter-spacing: .06em;
  text-transform: none;
  color: #000 !important;    /* negro */
  background: none;
  border: 0;
  padding: 0;
  opacity: .98;
  text-shadow: none !important;
}
/* Baja adicional con 3 y 4 dígitos */
.sign[data-digits="3"] .sign-unit{ top: calc(50% + clamp(24px, 4.8vw, 38px)) !important; }
.sign[data-digits="4"] .sign-unit{ top: calc(50% + clamp(26px, 5.2vw, 42px)) !important; }

@media (prefers-color-scheme: dark){
  .sign{ box-shadow: 0 26px 56px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.28); }
}

/* === Patch: disable diagonal glint on speed sign === */
.sign::before{ content: none !important; }
.sign.is-glint::before{ animation: none !important; opacity: 0 !important; }

/* === Patch: disable shine/bounce effect when updating the value === */
.sign::after{ content: none !important; }
.sign.shine::after{ animation: none !important; opacity: 0 !important; }
.sign.bump{ animation: none !important; }