/* ==========================================================================
   hero.css · Abertura e instrumento (mostrador com leituras)
   ========================================================================== */
/* hero */
.hero{position:relative;overflow:hidden;padding:34px 0 90px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;background-position:center top}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 72% 45%,transparent 30%,var(--cream) 78%),linear-gradient(transparent 70%,var(--cream));pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:30px;align-items:center}
.hero-t{min-width:0}
.coord{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.coord .lv{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--ink)}
.coord .lv i{width:7px;height:7px;border-radius:50%;background:var(--mut2)}
.coord .lv.on i{background:#3E8E5A;box-shadow:0 0 0 0 rgba(62,142,90,.5);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 7px rgba(62,142,90,0)}100%{box-shadow:0 0 0 0 rgba(62,142,90,0)}}
.hero h1{font-size:clamp(54px,7.6vw,118px);margin:26px 0 26px;letter-spacing:-.055em;line-height:.9}
.hero h1 .s{font-size:1.08em;letter-spacing:-.03em;padding-right:.04em}
.hero .lead{font-size:clamp(17px,1.45vw,19.5px);line-height:1.55;color:var(--ink2);max-width:46ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:46px;border-top:1px solid var(--line2);max-width:600px}
.spec div{padding:16px 16px 0 0}
.spec div+div{padding-left:16px;border-left:1px solid var(--line)}
.spec b{display:block;font:700 26px/1 var(--disp);letter-spacing:-.04em;font-variation-settings:"opsz" 48}
.spec span{display:block;margin-top:6px;font:500 10.5px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
/* instrumento */
.inst{position:relative;width:min(100%,600px);aspect-ratio:1;justify-self:center}
.inst svg.dial{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ticks{transform-origin:300px 300px;animation:spin 140s linear infinite}
.sweep{transform-origin:300px 300px;animation:spin 9s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.bub{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.2);transition:opacity .5s,transform .7s cubic-bezier(.3,1.6,.5,1)}
.inst.full .bub{opacity:1;transform:none}
.inst.full .bub.b1{animation:bob 3.6s ease-in-out .8s infinite}
.inst.full .bub.b2{animation:bob 4.4s ease-in-out 1.2s infinite}
@keyframes bob{50%{transform:translateY(-7px)}}
.mic{opacity:0}
.inst.full .mic{animation:rise 5.2s cubic-bezier(.35,.1,.6,1) infinite}
.inst.full .mic.m2{animation-delay:1.7s;animation-duration:6s}
.inst.full .mic.m3{animation-delay:3.3s;animation-duration:4.8s}
@keyframes rise{0%{opacity:0;transform:translateY(0)}12%{opacity:.85}80%{opacity:.6}100%{opacity:0;transform:translateY(-270px)}}
.ro{position:absolute;z-index:2;padding:11px 14px 12px;border:1px solid var(--line2);border-radius:12px;background:rgba(249,239,229,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 18px 40px -26px rgba(29,29,27,.5);min-width:132px}
.ro small{display:block;font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.ro b{display:block;margin-top:7px;font:500 22px/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ro b u{text-decoration:none;font-size:.6em;color:var(--mut);margin-left:3px}
.ro.r1{left:-2%;top:12%}.ro.r2{right:-3%;top:6%}.ro.r3{left:2%;bottom:6%}.ro.r4{right:-1%;bottom:14%}
.ro::after{content:"";position:absolute;width:34px;height:1px;background:var(--line2);top:50%}
.ro.r1::after,.ro.r3::after{left:100%}.ro.r2::after,.ro.r4::after{right:100%}