/* Movimiento y acabado */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes pop{0%{transform:scale(.9);opacity:.4}60%{transform:scale(1.06)}100%{transform:none;opacity:1}}
@keyframes glow{50%{box-shadow:0 0 38px var(--on)}}
.hero-in>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.hero-in>:nth-child(2){animation-delay:.1s}.hero-in>:nth-child(3){animation-delay:.2s}
.sticky{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding-bottom:12px}
.pane:not([hidden]) .card{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
.pane:not([hidden]) .card:nth-child(2){animation-delay:.08s}
.pane:not([hidden]) .card:nth-child(3){animation-delay:.16s}
.pane:not([hidden]) .card:nth-child(4){animation-delay:.24s}
button{transition:transform .12s,background .2s,color .2s,border-color .2s,box-shadow .2s}
button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.12)}
button:not(:disabled):active{transform:scale(.97)}
.sw .knob::after{transition:bottom .22s cubic-bezier(.3,1.5,.5,1)}
.fb.ok{animation:pop .35s}
.fb.bad{animation:shake .4s}
.opt.ok{background:var(--on);border-color:var(--on);color:#06301A;animation:pop .35s}
.opt.ok:disabled{opacity:1}
.opt.bad{border-color:var(--bad);animation:shake .4s}
.bump{animation:pop .35s}
.tv td{transition:background .3s}
.led{transition:background .25s,box-shadow .25s}
.led.on{animation:glow 1.8s ease-in-out infinite}
details{border:1px solid var(--line);border-radius:8px;margin:8px 0;padding:10px 14px;transition:border-color .2s}
details[open]{border-color:var(--pri)}
summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
details p{margin:8px 0 0;color:var(--muted);animation:rise .3s both}
.grow{flex:1;min-width:220px}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}}
html{scroll-behavior:smooth}
.card{transition:border-color .25s,box-shadow .25s}
.card:hover{border-color:color-mix(in srgb,var(--pri) 35%,var(--line));box-shadow:0 10px 28px rgba(0,0,0,.07)}
.entra{animation:rise .4s cubic-bezier(.2,.7,.2,1) both}
.nivelbar{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:.9rem;color:var(--muted)}
.pips{display:flex;gap:5px}
.pips i{width:26px;height:6px;border-radius:3px;background:var(--line);transition:background .35s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.pips i.on{transform:scaleY(1.5)}
.pips[data-n="1"] i.on{background:var(--on)}
.pips[data-n="2"] i.on{background:#E8A317}
.pips[data-n="3"] i.on{background:var(--bad)}
label.od:has(:checked){transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}}

/* Acabado profesional */
.hero h1{background:linear-gradient(100deg,#EAF5EF 20%,#5BE3A0 50%,#EAF5EF 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 6s ease-in-out infinite}
@keyframes brillo{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.bit{position:absolute;bottom:-24px;z-index:1;font:500 14px 'IBM Plex Mono',monospace;color:#5BE3A0;opacity:0;pointer-events:none;animation:subir linear infinite}
@keyframes subir{0%{transform:translateY(0);opacity:0}15%{opacity:.45}100%{transform:translateY(-230px);opacity:0}}
.chispa{position:fixed;width:7px;height:7px;margin:-3px;border-radius:50%;pointer-events:none;z-index:60;animation:chispa .7s ease-out forwards}
@keyframes chispa{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0),color-mix(in srgb,var(--pri) 13%,transparent),transparent 70%)}
.card:hover::before{opacity:1}
.pri{background-image:linear-gradient(135deg,color-mix(in srgb,var(--pri) 100%,#fff 0%),color-mix(in srgb,var(--pri) 78%,#000))}
.pips i{width:20px}
.pips[data-n] i.on{background:hsl(calc(150 - var(--k) * 14) 70% 45%)}
.nivelbar.up .nl{animation:pop .5s}
.nivelbar.up .pips i.on{animation:pop .5s}
.tabs button[aria-selected=true]{box-shadow:0 4px 14px rgba(0,0,0,.18)}
@media (prefers-reduced-motion:reduce){.hero h1{animation:none}.bit{display:none}}