/* =========================================================
   PENSIÓMETRO · hero.css — gauge gigante + odómetro
   ========================================================= */
#hero{min-height:100svh;display:grid;place-items:center;padding-top:calc(var(--head-h) + 24px);padding-bottom:72px;overflow:hidden;isolation:isolate}
#hero .pulse{position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 50% 62%,rgba(79,179,255,.18),transparent 70%);transition:background 1.4s var(--ease)}
#hero.red .pulse{background:radial-gradient(60% 50% at 50% 62%,rgba(255,77,94,.28),transparent 70%);animation:hpulse 2.4s ease-in-out infinite}
@keyframes hpulse{50%{opacity:.45;transform:scale(1.06)}}
.rays{position:absolute;left:50%;top:62%;width:220vmax;height:220vmax;transform:translate(-50%,-50%);z-index:-1;opacity:.12;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(79,179,255,.6) 0 .4deg,transparent .4deg 6deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 40%);mask-image:radial-gradient(circle,#000 0,transparent 40%);animation:spin 120s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero-in{width:100%;max-width:1200px;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-tag{color:var(--gris);margin-bottom:10px;max-width:46ch;line-height:1.5}
/* padding lateral para que las etiquetas de referencia del arco no se corten */
.gauge-hero{width:min(100%,880px);margin:-4px auto 0;position:relative;padding:0 4%}
.gauge-hero svg{width:100%;height:auto;overflow:visible;display:block}
.odo{display:flex;justify-content:center;align-items:flex-end;font:700 clamp(2.9rem,13vw,9.6rem)/1 var(--f-num);letter-spacing:-.05em;margin-top:-.12em;position:relative;
  transition:text-shadow 1.2s,color 1.2s}
#hero.red .odo{color:#fff;text-shadow:0 0 60px rgba(255,77,94,.55)}
.odo .d{height:1em;overflow:hidden;display:inline-block;width:.62em;text-align:center}
.odo .d>span{display:flex;flex-direction:column;transition:transform 2.6s cubic-bezier(.2,1.25,.3,1)}
.odo .d>span>i{font-style:normal;height:1em;line-height:1em}
.odo .sep{width:.26em;color:var(--gris2)}
.hero-sub{font:800 clamp(1.05rem,3.6vw,2rem)/1.15 var(--f-title);text-transform:uppercase;letter-spacing:.02em;margin-top:18px}
.hero-sub em{font-style:normal;color:var(--rojo)}
.hero-meta{display:flex;flex-wrap:wrap;gap:0 22px;justify-content:center;margin-top:14px;color:var(--gris)}
.scrollcue{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--gris2)}
.scrollcue i{width:1px;height:34px;background:linear-gradient(var(--celeste),transparent);animation:cue 2s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media(max-height:700px){.scrollcue{display:none}}
.g-tick{font:500 20px var(--f-mono);fill:var(--gris);letter-spacing:.04em}
.g-ref{font:600 17px var(--f-mono);letter-spacing:.06em}
@media(max-width:640px){.g-tick{font-size:26px}.g-ref{font-size:24px}.gauge-hero{padding:0 13%}}
/* QA responsive: móvil en landscape (p.ej. 812x375) — el arco ocupaba todo el alto y el odómetro quedaba fuera de pantalla */
@media(orientation:landscape) and (max-height:520px){
  #hero{padding-top:calc(var(--head-h) + 4px);padding-bottom:24px}
  .gauge-hero{width:min(100%,100svh);padding:0 6%}
  .odo{font-size:min(13vw,19svh)}
  .hero-sub{margin-top:8px}
}