/* Web ANLOK 2026 · arranca.css — la portada de ANLOK Motors que arranca (lo monta arranca.js sobre #inicio)
   Todo cuelga de .arr, que solo pone el JS: sin JS la portada es la de siempre. El logo va dentro del
   cuentarrevoluciones con START/STOP debajo; de fondo, el panel real en oscuro que descubren los faros.
   [data-motor] = apagado | ralenti | fondo. */
.arr{isolation:isolate;background:#000000}
.arr-fondo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.arr-fondo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(56px,10svh,110px);background:linear-gradient(0deg,#000000,rgba(0,0,0,0))}
.arr-panel{position:absolute;left:50%;bottom:-4%;width:max(116%,1100px);max-width:none;height:auto;
  transform:translateX(calc(-50% + var(--tx,0px))) perspective(1400px) rotateX(16deg);transform-origin:50% 100%}
.arr-noche{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.arr-velo{position:absolute;inset:0;background:radial-gradient(ellipse 38% 50% at 50% 52%,rgba(0,0,0,.66),rgba(0,0,0,0) 100%)}
.arr .hero-producto__interior{position:relative;z-index:2;gap:clamp(8px,1.4svh,16px)}
.arr .hero-producto__titulo{text-shadow:0 2px 24px rgba(0,0,0,.9)}
.arr .hero-producto__sub{text-shadow:0 1px 12px rgba(0,0,0,.9)}
.arr .btn-fantasma{background:rgba(0,0,0,.72)}
.arr .btn-fantasma:hover{background:rgba(30,30,40,.86)}

.arr-cuadro{position:relative;width:clamp(260px,50svh,540px);aspect-ratio:1;display:grid;place-items:center}   /* 27/10: más grande (lo pidió Xuban) */
.arr-reloj{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible}
.arr-pista{fill:none;stroke:rgba(255,255,255,.1);stroke-width:7}
.arr-roja{fill:none;stroke:#FF4D6D;stroke-width:7;opacity:.55;transition:opacity .22s ease,filter .22s ease}
.arr-avance{fill:none;stroke:url(#arr-grad);stroke-width:7;stroke-dasharray:0 100;filter:drop-shadow(0 0 6px rgba(140,133,255,.9))}
.arr-raya{stroke:rgba(255,255,255,.45);stroke-width:1.2;stroke-linecap:round}
.arr-raya-g{stroke:rgba(255,255,255,.85);stroke-width:2.2}
.arr-raya-r{stroke:#FF6F87}
.arr-num{font:700 11px var(--sans);fill:rgba(255,255,255,.75);text-anchor:middle}
.arr-num-r{fill:#FF8DA0}
.arr-aguja path{fill:#FAAA2F;filter:drop-shadow(0 0 4px rgba(250,170,47,.9))}
/* petardeo en el corte (arranca.js pone .arr-pop unas centésimas): la zona roja y la aguja se encienden */
.arr-aguja path{transition:filter .22s ease}
.arr-pop .arr-roja{opacity:1;filter:drop-shadow(0 0 7px rgba(255,77,109,.95));transition:none}
.arr-pop .arr-aguja path{filter:drop-shadow(0 0 9px rgba(255,190,90,1));transition:none}
.arr-cuadro .hero-producto__logo{position:relative;width:42%;height:auto;max-width:none;transform:translateY(-8%);
  filter:drop-shadow(0 0 calc(var(--revs,0) * 28px) rgba(140,133,255,.8))}

.arr-boton{position:absolute;left:50%;bottom:-1%;width:clamp(72px,26%,128px);aspect-ratio:1;translate:-50% 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;border:0;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,#4A4A58 0%,#24242D 48%,#0E0E13 100%);color:#FFFFFF;cursor:pointer;
  font-family:var(--sans);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 0 0 3px #1A1A21,0 0 0 5px rgba(250,170,47,.75),0 0 26px 2px rgba(250,170,47,.35),0 14px 30px rgba(0,0,0,.7),inset 0 2px 1px rgba(255,255,255,.18);
  transition:transform .12s ease,box-shadow .3s ease}
.arr-boton::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 2px rgba(250,170,47,.7);animation:arr-ping 1.8s ease-out infinite;pointer-events:none}
.arr:is([data-motor="ralenti"],[data-motor="fondo"]) .arr-boton{box-shadow:0 0 0 3px #1A1A21,0 0 0 5px rgba(140,133,255,.95),0 0 32px 6px rgba(108,99,255,.55),0 14px 30px rgba(0,0,0,.7),inset 0 2px 1px rgba(255,255,255,.18)}
.arr:is([data-motor="ralenti"],[data-motor="fondo"]) .arr-boton::after{animation:none;opacity:0}
.arr-boton.pisado{transform:scale(.93);box-shadow:0 0 0 3px #1A1A21,0 0 0 5px #FAAA2F,0 0 46px 12px rgba(250,170,47,.55),0 6px 14px rgba(0,0,0,.7),inset 0 4px 10px rgba(0,0,0,.6)}
.arr-boton b{font-size:clamp(16px,2.5svh,24px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.arr-boton__p{font-size:clamp(8.5px,1.1svh,10.5px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);line-height:1.1}
.arr-boton__led{width:7px;height:7px;margin-bottom:3px;border-radius:50%;background:#FAAA2F;box-shadow:0 0 8px #FAAA2F}
.arr:is([data-motor="ralenti"],[data-motor="fondo"]) .arr-boton__led{background:#8CFFB8;box-shadow:0 0 10px #8CFFB8}
.arr .arr-boton:focus-visible{outline:3px solid #FFFFFF;outline-offset:8px;border-radius:50%}
@keyframes arr-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}

/* Sonido: pastilla discreta en la esquina del reloj, a la altura de START; se puede tocar en 44 px */
.arr-sonido{position:absolute;right:-5%;bottom:1%;z-index:3;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 12px;border:0;border-radius:999px;
  background:rgba(255,255,255,.06);color:rgba(236,234,255,.6);font:650 12.5px/1 var(--sans);letter-spacing:.01em;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.arr-sonido svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.arr-sonido[aria-pressed="true"]{color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.arr-sonido[aria-pressed="true"] svg{color:#FAAA2F}
.arr-sonido[aria-pressed="true"] .arr-sonido__no,.arr-sonido[aria-pressed="false"] .arr-sonido__si{display:none}
.arr-sonido:hover{background:rgba(255,255,255,.11);color:#FFFFFF}
.arr .arr-sonido:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px;border-radius:999px}

.arr-lectura{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 0;min-height:28px;font-size:14px;line-height:1.4;color:rgba(236,234,255,.8)}
.arr-rpm{min-width:6.6em;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums;color:#FAAA2F;text-align:center}
.arr[data-motor="fondo"] .arr-rpm{color:#FF8DA0}

@media (max-width:759px){
  .arr-cuadro{width:min(88vw,clamp(250px,46svh,380px))}
  .arr-cuadro .hero-producto__logo{width:42%;transform:translateY(-8%)}
  .arr-boton{width:80px;bottom:0}
  .arr-boton b{font-size:16px}
  .arr-boton__p{font-size:8px}
  .arr-sonido{right:-4%;bottom:-1%;padding:0 10px 0 8px;font-size:12px}
  .arr-panel{width:1000px}
  .arr-lectura{font-size:12.5px;gap:8px}
}
/* Pantallas bajas de ordenador: el reloj encoge y el botón de sonido se queda en el icono (el texto sigue para lectores) */
@media (max-height:700px) and (min-width:760px){
  .arr-cuadro{width:42svh}
  .arr-boton b{font-size:14px}
  .arr-boton__p{font-size:7.5px}
  .arr-sonido{right:-4%;width:44px;padding:0;justify-content:center}
  .arr-sonido__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.arr-boton::after{animation:none}.arr-boton,.arr-sonido{transition:none}}