/* Galileo Geometría Viva — componentes y movimiento compartidos */
dc-import{display:contents}
@property --a{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --r{syntax:'<percentage>';inherits:true;initial-value:0%}

.g{font-family:var(--ff-body);font-size:16px;line-height:1.5;color:var(--text);background:var(--mesh),var(--bg);-webkit-font-smoothing:antialiased;box-sizing:border-box}
.g *,.g *::before,.g *::after{box-sizing:border-box}
.g h1,.g h2,.g h3,.g h4{font-family:var(--ff-title);margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.g p{margin:0}
.g a:not([class]){color:var(--accent-text)}
.g button,.g input,.g select,.g textarea{font-family:inherit;color:inherit}
.g :focus-visible,.g .s-focus{outline:3px solid var(--ring);outline-offset:3px;border-radius:inherit}
.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.t13{font-size:13px;line-height:1.4}.t21{font-size:21px}.t34{font-size:34px}
.muted{color:var(--text-2)}.faint{color:var(--text-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico-lg{width:34px;height:34px}.ico-sm{width:16px;height:16px;stroke-width:2.2}
.label{font:700 13px/1.3 var(--ff-title);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}

/* ---------- ventana: barra de título + lateral ---------- */
.tb{grid-column:1/-1;display:flex;align-items:center;gap:var(--f21);height:55px;padding:0 var(--f21);border-bottom:1px solid var(--line);background:var(--surface);position:relative;z-index:3}
.tb .dots{display:flex;gap:8px}.tb .dots i{width:13px;height:13px;border-radius:50%;border:2px solid var(--line-strong)}
.tb .logo{height:36px;width:auto;display:block}
.tb .plaque{background:#FFF7F1;border-radius:var(--r8);padding:3px 8px;display:flex}
.tb .menu{display:flex;gap:var(--f3);margin-left:var(--f8)}
.tb .menu button{background:none;border:0;border-radius:var(--r8);min-height:34px;padding:0 13px;font:500 16px var(--ff-body);cursor:pointer;color:var(--text-2);transition:background var(--d144) var(--e-move),color var(--d144)}
.tb .menu button:hover{background:var(--surface-3);color:var(--text)}
.tb .sp{flex:1}
.net{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 13px;border-radius:99px;border:1.5px solid var(--line-strong);font:600 13px var(--ff-body);color:var(--text-2);background:var(--surface-2)}
.net b{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.net.off b{background:transparent;border:2px solid var(--text-3)}

.sb{display:flex;flex-direction:column;align-items:center;gap:var(--f8);width:89px;padding:var(--f13) 0 var(--f21);background:var(--glass);backdrop-filter:blur(21px) saturate(1.3);-webkit-backdrop-filter:blur(21px) saturate(1.3);border-right:1px solid var(--line);position:relative;z-index:2}
.sb .brand{width:55px;height:55px;border-radius:var(--r13);display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);margin-bottom:var(--f13);text-decoration:none;box-shadow:var(--shadow-sm)}
.sb a.it{position:relative;width:65px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 5px;border-radius:var(--r13);text-decoration:none;color:var(--text-2);font:500 13px/1.2 var(--ff-body);transition:background var(--d144) var(--e-move),color var(--d144),transform var(--d233) var(--e-in)}
.sb a.it:hover{background:var(--surface-3);color:var(--text);transform:translateY(-1px)}
.sb a.it[aria-current=page]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);font-weight:700}
.sb a.it[aria-current=page]::before{content:'';position:absolute;left:-12px;top:13px;bottom:13px;width:5px;border-radius:0 5px 5px 0;background:var(--primary)}
.sb .sp{flex:1}

/* ---------- botones, chips, campos ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--f8);min-height:44px;padding:0 var(--f21);border-radius:var(--r13);border:2px solid transparent;font:600 16px/1 var(--ff-body);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform var(--d144) var(--e-in),box-shadow var(--d233) var(--e-move),background var(--d144) var(--e-move),border-color var(--d144)}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:inset 0 -3px 0 rgba(30,20,17,.2),0 5px 13px -5px rgba(232,76,24,.55)}
.btn-primary:hover,.btn-primary.s-hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:inset 0 -3px 0 rgba(30,20,17,.2),0 13px 21px -8px rgba(232,76,24,.6)}
.btn-primary:active,.btn-primary.s-active{transform:translateY(1px);box-shadow:inset 0 3px 0 rgba(30,20,17,.28)}
.btn-sec{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
.btn-sec:hover,.btn-sec.s-hover{background:var(--surface-2);border-color:var(--text-2);transform:translateY(-1px)}
.btn-sec:active,.btn-sec.s-active{transform:translateY(1px);background:var(--surface-3)}
.btn-ghost{background:transparent;color:var(--text)}
.btn-ghost:hover,.btn-ghost.s-hover{background:var(--surface-3)}
.btn-ghost:active,.btn-ghost.s-active{background:var(--line)}
.btn-danger{background:var(--error-bg);border-color:var(--error);color:var(--error-text)}
.btn:disabled,.btn.s-disabled{background:var(--surface-3);border-color:transparent;color:var(--text-3);box-shadow:none;transform:none;cursor:not-allowed;opacity:.8}
.btn-icon{width:44px;padding:0}.btn-lg{min-height:55px;padding:0 var(--f34);font-size:21px;border-radius:var(--r21)}
.btn.s-focus{outline:3px solid var(--ring);outline-offset:3px}

.chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 13px;border-radius:99px;border:1.5px solid var(--line-strong);background:var(--surface);font:500 16px/1 var(--ff-body);cursor:pointer;color:var(--text);transition:background var(--d144) var(--e-move),transform var(--d233) var(--e-in),border-color var(--d144)}
.chip:hover,.chip.s-hover{background:var(--surface-2);border-color:var(--text-2);transform:translateY(-1px)}
.chip[aria-pressed=true],.chip.s-active{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:700}
.chip:disabled,.chip.s-disabled{opacity:.55;cursor:not-allowed;transform:none}
.chip .ico{width:16px;height:16px}

.input,.sel,.area{width:100%;min-height:44px;padding:0 13px;border:2px solid var(--line-strong);border-radius:var(--r13);background:var(--surface);font:16px/1.4 var(--ff-body);color:var(--text);transition:border-color var(--d144) var(--e-move),box-shadow var(--d233)}
.area{padding:13px;resize:none;line-height:1.5}
.input::placeholder,.area::placeholder{color:var(--text-3);opacity:1}
.input:hover,.sel:hover,.area:hover,.input.s-hover{border-color:var(--text-2)}
.input:focus-visible,.sel:focus-visible,.area:focus-visible,.input.s-focus{outline:3px solid var(--ring);outline-offset:2px;border-color:var(--text)}
.input.s-error,.input[aria-invalid=true]{border-color:var(--error);background:var(--error-bg)}
.input:disabled,.input.s-disabled{background:var(--surface-3);border-color:var(--line);color:var(--text-3);cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:5px}.field>label,.field>.lab{font:600 13px/1.3 var(--ff-body);color:var(--text-2)}
.err{display:flex;align-items:center;gap:5px;font:600 13px var(--ff-body);color:var(--error-text)}

.seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r13);background:var(--surface-3)}
.seg button{min-height:34px;padding:0 13px;border:0;border-radius:10px;background:none;font:500 16px var(--ff-body);color:var(--text-2);cursor:pointer;transition:background var(--d144) var(--e-move),color var(--d144)}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--text);font-weight:700;box-shadow:var(--shadow-sm)}

.sw{position:relative;display:inline-block;width:55px;height:34px;flex:none}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.sw span{position:absolute;inset:0;border-radius:99px;background:var(--surface-3);border:2px solid var(--line-strong);transition:background var(--d233) var(--e-move),border-color var(--d233)}
.sw span::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--text-2);transition:transform var(--d377) var(--e-spring),background var(--d233)}
.sw input:checked+span{background:var(--primary);border-color:var(--tinta)}
.sw input:checked+span::after{transform:translateX(21px);background:var(--tinta)}
.sw input:focus-visible+span{outline:3px solid var(--ring);outline-offset:3px}
.sw input:disabled+span{opacity:.5}

.range{--c:var(--primary);--p:50%;-webkit-appearance:none;appearance:none;width:100%;height:21px;background:transparent;cursor:pointer;margin:0}
.range::-webkit-slider-runnable-track{height:8px;border-radius:5px;background:linear-gradient(to right,var(--c) var(--p),var(--surface-3) var(--p));box-shadow:inset 0 0 0 1px var(--line-strong)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:21px;height:21px;margin-top:-7px;border-radius:50%;background:var(--c);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--text),var(--shadow-sm);transition:transform var(--d233) var(--e-spring)}
.range:hover::-webkit-slider-thumb{transform:scale(1.15)}
.range:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:8px}
.range::-moz-range-track{height:8px;border-radius:5px;background:var(--surface-3)}
.range::-moz-range-progress{height:8px;border-radius:5px;background:var(--c)}
.range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--c);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--text)}

.kbd{display:inline-block;font:500 13px/1 var(--ff-mono);padding:4px 8px;border:1.5px solid var(--line-strong);border-bottom-width:3px;border-radius:8px;color:var(--text-2);background:var(--surface)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r21);box-shadow:var(--shadow-sm)}
.seal{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 5px;border-radius:99px;background:var(--ok-bg);color:var(--ok-text);font:700 13px/1.2 var(--ff-body)}
.seal .ico{width:16px;height:16px;color:var(--ok);stroke-width:3}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;background:var(--surface-3);color:var(--text-2);font:600 13px/1.2 var(--ff-body)}
.okmark{color:var(--ok);stroke-width:3}
.pill{display:inline-flex;align-items:center;gap:5px;font:600 13px var(--ff-body);padding:3px 8px;border-radius:99px;border:1.5px solid var(--line-strong);color:var(--text-2)}
.pill.on{background:var(--primary);border-color:transparent;color:var(--on-primary)}
.pill.done{background:var(--ok-bg);border-color:transparent;color:var(--ok-text)}
.pill.bad{background:var(--error-bg);border-color:var(--error);color:var(--error-text)}

/* números que ruedan */
.odo{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:bottom}
.odo-col{display:block;white-space:pre;line-height:1;transition:transform var(--d377) var(--e-move)}
/* pasos como segmentos */
.steps{display:flex;gap:5px;flex:1}
.steps button{flex:1;height:21px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.steps button::before{content:'';position:absolute;left:0;right:0;top:8px;height:5px;border-radius:5px;background:rgba(255,241,230,.28);transition:background var(--d233) var(--e-move),height var(--d233)}
.steps button.done::before{background:var(--piel)}.steps button.now::before{background:var(--primary);height:8px;top:6.5px}
.steps button:hover::before{background:var(--ambar)}
.steps button:focus-visible{outline:3px solid var(--piel);outline-offset:1px;border-radius:5px}

/* bloque 3D marcado */
.bloque3d{position:relative;border-radius:var(--r21);overflow:hidden;background:repeating-linear-gradient(135deg,rgba(255,201,163,.05) 0 13px,transparent 13px 26px),var(--viewer);border:2px dashed var(--viewer-line);color:#FFF1E6}
.bloque3d .tag{position:absolute;display:flex;align-items:center;gap:8px;font:600 13px var(--ff-mono);color:#FFC9A3;padding:5px 13px;border-radius:99px;background:rgba(0,0,0,.35)}

/* ---------- Nauti ---------- */
.nauti-btn{display:inline-block;padding:0;margin:0;border:0;background:none;cursor:pointer;line-height:0;border-radius:var(--r13)}
.nauti{--px:0px;--py:0px;display:block;overflow:visible}
.nauti *{transform-box:fill-box;transform-origin:center}
.nauti .sil{fill:#FFF1E6;stroke:#E84C18;stroke-width:4.5;stroke-linejoin:round}
.nauti .whorl{fill:none;stroke:#E84C18;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.nauti .cam{fill:#FC7C00;fill-opacity:.16;stroke:#E84C18;stroke-width:1.2;stroke-opacity:.35;stroke-linejoin:round}
.nauti .stripe{fill:#E84C18;fill-opacity:.62}
.nauti .hd{fill:#FFC9A3;stroke:#E84C18;stroke-width:3.4}
.nauti .hood{fill:#EE9355;stroke:#E84C18;stroke-width:3;stroke-linejoin:round}
.nauti .spot{fill:#FFF3E8;opacity:.9}
.nauti .lobef{fill:#FFC9A3}
.nauti .lobe{fill:none;stroke:var(--lg,#E84C18);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nauti .tents .tn{stroke-width:2}
.nauti .chin{fill:none;stroke:#E84C18;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.nauti .fx-offline circle{fill:#E84C18}
.nauti .sclera{fill:#FFF8F2;stroke:#E84C18;stroke-width:2.4}
.nauti .pupil{transform:translate(var(--px),var(--py));transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.nauti .pupil circle:first-child{fill:#1E1411}.nauti .gl{fill:#fff}
.nauti .lid{fill:#FFC9A3;transform-origin:50% 0;transform:scaleY(0);animation:blink 5.2s infinite}
.nauti .eye:nth-of-type(2) .lid{animation-delay:.08s}
.nauti .cheek{display:none}
.nauti .tn{fill:none;stroke:#F59A5B;stroke-width:2.6;stroke-linecap:round;transform-origin:100% 0;animation:sway 3.6s ease-in-out infinite;animation-delay:calc(var(--i)*-.45s)}
.nauti .body{animation:float 4.6s ease-in-out infinite}
.nauti .fx{opacity:0;pointer-events:none}
.nauti .fx text{font:800 22px system-ui,sans-serif;fill:#E84C18}
.nauti .fx-listen path,.nauti .fx-repair path,.nauti .fx-offline path{fill:none;stroke:#E84C18;stroke-width:3.2;stroke-linecap:round}
.nauti .fx-think circle{fill:#FFF1E6;stroke:#E84C18;stroke-width:2.4}.nauti .shp{fill:#FC7C00;stroke:none}
.nauti .fx-build .p1{fill:#E84C18}.nauti .fx-build .p2{fill:#FC7C00}.nauti .fx-build .p3{fill:#1E1411}
.nauti .fx-verify circle{fill:rgba(255,255,255,.55);stroke:#1E1411;stroke-width:3.4}.nauti .fx-verify .lens path{stroke:#1E1411;stroke-width:5;stroke-linecap:round}
.nauti .ck{fill:none;stroke:#2E9E5B;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.nauti .fx-repair circle{fill:#FC7C00}.nauti .fx-speak circle{fill:#E84C18}
.nauti .halo{fill:#FC7C00;opacity:.35}.nauti .fx-pearl circle:last-child{fill:#fff;stroke:#FC7C00;stroke-width:2.4}
.nauti .slash{stroke:#1E1411}
.nauti .fx-bubble circle{fill:#FFF1E6;stroke:#E84C18;stroke-width:2.4}
.nauti .hat{display:none}.nauti[data-hat=si] .hat{display:block}
.nauti .hat path:first-child{fill:#1E1411}.nauti .hat path:nth-child(2){fill:#1E1411}.nauti .hat path:nth-child(3){fill:none;stroke:#FC7C00;stroke-width:3;stroke-linecap:round}
/* 24 px: solo silueta y ojos */
.nauti[data-mini=si] .whorl,.nauti[data-mini=si] .cam,.nauti[data-mini=si] .tn,.nauti[data-mini=si] .cheek,.nauti[data-mini=si] .fx,.nauti[data-mini=si] .gl,.nauti[data-mini=si] .hood{display:none}
.nauti[data-mini=si] .sil{stroke-width:15}.nauti[data-mini=si] .hd{stroke-width:11}
.nauti[data-mini=si] .hood{stroke-width:9}.nauti[data-mini=si] .sclera{stroke-width:7}
.nauti[data-mini=si] *{animation:none!important}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes blink{0%,91%,100%{transform:scaleY(0)}94%{transform:scaleY(1)}}
@keyframes breathe{0%,100%{fill-opacity:.12}50%{fill-opacity:.34}}
.nauti .cam{animation:breathe 4.6s ease-in-out infinite;animation-delay:calc(var(--f)*140ms)}
@keyframes glowSeq{0%,100%{fill-opacity:.05}35%,60%{fill-opacity:.9}}
@keyframes wake{0%{fill-opacity:.05}45%{fill-opacity:.95}100%{fill-opacity:.32}}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(38deg)}60%{transform:rotate(-30deg)}}
@keyframes up{0%{opacity:0;transform:translateY(8px) scale(.6)}30%,80%{opacity:1}100%{opacity:0;transform:translateY(-14px) scale(1)}}
@keyframes zz{0%{opacity:0;transform:translate(0,8px)}40%,70%{opacity:1}100%{opacity:0;transform:translate(8px,-14px)}}
@keyframes pop{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes orbit{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(26px,-30px) rotate(180deg)}100%{transform:translate(0,0) rotate(360deg)}}
@keyframes snap{0%,100%{transform:translate(0,0)}45%,60%{transform:translate(36px,-12px) scale(1.05)}}
@keyframes scan{0%,100%{transform:translate(0,0)}50%{transform:translate(70px,-84px)}}
@keyframes tick{0%,12%{opacity:0;stroke-dasharray:0 40}28%,100%{opacity:1;stroke-dasharray:40 40}}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes spinjump{0%{transform:translateY(0) rotate(0) scale(1)}35%{transform:translateY(-22px) rotate(180deg) scale(1.06)}70%{transform:translateY(0) rotate(360deg) scale(.97)}100%{transform:translateY(0) rotate(360deg) scale(1)}}
@keyframes burst{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.6)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r,0deg)) scale(1.1)}}
@keyframes talk{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes rise{0%{opacity:0;transform:translateY(18px) scale(.5)}35%,70%{opacity:1;transform:translateY(-10px) scale(1)}100%{opacity:0;transform:translateY(-34px) scale(1)}}
@keyframes wob{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes flash{0%,100%{fill:#FC7C00;fill-opacity:.5}50%{fill:#E5233B;fill-opacity:1}}
@keyframes look{0%,100%{transform:translate(-3px,0)}50%{transform:translate(3.5px,0)}}

.nauti[data-state=dormido] .lid{animation:none;transform:scaleY(1)}
.nauti[data-state=dormido] .cam{animation:none;fill-opacity:.05}
.nauti[data-state=dormido] .body{animation-duration:7s}.nauti[data-state=dormido] .tn{animation-duration:8s}
.nauti[data-state=dormido] .fx-zzz{opacity:1}.nauti[data-state=dormido] .fx-zzz text{animation:zz 3.6s infinite}
.nauti[data-state=dormido] .fx-zzz text:nth-child(2){animation-delay:1.1s}.nauti[data-state=dormido] .fx-zzz text:nth-child(3){animation-delay:2.2s}
.nauti[data-state=despertar] .cam{animation:wake 1.6s ease-out both;animation-delay:calc(var(--f)*80ms)}
.nauti[data-state=despertar] .tn:nth-child(5){animation:wave 1.1s ease-in-out 3;transform-origin:100% 0}
.nauti[data-state=despertar] .body{animation:spinjump 1.2s cubic-bezier(.3,1.3,.5,1) 1 both,float 4.6s 1.2s ease-in-out infinite}
.nauti[data-state=despertar] .pupil{--py:-1px}
.nauti[data-state=escuchando] .body{transform:rotate(-4deg);animation:none}
.nauti[data-state=escuchando] .pupil{--px:-3.5px;--py:1px}
.nauti[data-state=escuchando] .cam{animation:none;fill-opacity:.3}
.nauti[data-state=escuchando] .fx-listen{opacity:1}.nauti[data-state=escuchando] .fx-listen path{animation:pop 1.4s ease-out infinite;transform-origin:100% 50%}
.nauti[data-state=escuchando] .fx-listen path:nth-child(2){animation-delay:.2s}.nauti[data-state=escuchando] .fx-listen path:nth-child(3){animation-delay:.4s}
.nauti[data-state=pensando] .pupil{--px:3.5px;--py:-3.5px}
.nauti[data-state=pensando] .cam{animation:glowSeq 2.4s ease-in-out infinite;animation-delay:calc(var(--f)*90ms)}
.nauti[data-state=pensando] .fx-think{opacity:1}.nauti[data-state=pensando] .fx-think>*{animation:up 2.4s ease-in-out infinite}
.nauti[data-state=pensando] .fx-think>*:nth-child(2){animation-delay:.25s}.nauti[data-state=pensando] .fx-think>*:nth-child(3){animation-delay:.5s}
.nauti[data-state=pensando] .shell{animation:wob 5s ease-in-out infinite}
.nauti[data-state=construyendo] .cam{animation:glowSeq 1.4s linear infinite;animation-delay:calc(var(--f)*45ms)}
.nauti[data-state=construyendo] .shell{animation:wob 2.6s ease-in-out infinite}
.nauti[data-state=construyendo] .pupil{--py:3px}
.nauti[data-state=construyendo] .tn:nth-child(odd){animation:snap 1.3s ease-in-out infinite;transform-origin:100% 0}
.nauti[data-state=construyendo] .fx-build{opacity:1}.nauti[data-state=construyendo] .fx-build>*{animation:orbit 2.6s ease-in-out infinite}
.nauti[data-state=construyendo] .fx-build>*:nth-child(2){animation-delay:-.9s}.nauti[data-state=construyendo] .fx-build>*:nth-child(3){animation-delay:-1.7s}
.nauti[data-state=verificando] .pupil{animation:look 1.8s ease-in-out infinite;--px:0}
.nauti[data-state=verificando] .cam{animation:none;fill-opacity:.2}
.nauti[data-state=verificando] .fx-verify{opacity:1}.nauti[data-state=verificando] .lens{animation:scan 3s ease-in-out infinite}
.nauti[data-state=verificando] .ck{animation:tick 3s ease-out infinite}.nauti[data-state=verificando] .ck2{animation-delay:.7s}.nauti[data-state=verificando] .ck3{animation-delay:1.4s}
.nauti[data-state=reparando] .body{animation:shake .5s ease-in-out 4,float 4.6s 2s ease-in-out infinite}
.nauti[data-state=reparando] .pupil{--py:3px}
.nauti[data-state=reparando] .cam{animation:breathe 4.6s infinite}
.nauti[data-state=reparando] .fx-repair{opacity:1}.nauti[data-state=reparando] .fx-repair>*{animation:pop .5s ease-out infinite alternate}
.nauti[data-state=celebrando] .body{animation:spinjump 1.3s cubic-bezier(.3,1.3,.5,1) infinite}
.nauti[data-state=celebrando] .cam{animation:none;fill-opacity:.95}
.nauti[data-state=celebrando] .lid{animation:none;transform:scaleY(.42)}
.nauti[data-state=celebrando] .tn{animation:wave .6s ease-in-out infinite;transform-origin:100% 0}
.nauti[data-state=celebrando] .fx-party{opacity:1}.nauti[data-state=celebrando] .fx-party>*{animation:burst 1.3s ease-out infinite}
.nauti[data-state=explicando] .pupil{--px:-1px;--py:0px}
.nauti[data-state=explicando] .cam{animation:breathe .9s ease-in-out infinite;animation-delay:calc(var(--f)*60ms)}
.nauti[data-state=explicando] .tn:nth-child(even){animation:wave 1.8s ease-in-out infinite;transform-origin:100% 0}
.nauti[data-state=explicando] .fx-speak{opacity:1}.nauti[data-state=explicando] .fx-speak circle{animation:talk .9s ease-in-out infinite}
.nauti[data-state=explicando] .fx-speak circle:nth-child(2){animation-delay:.15s}.nauti[data-state=explicando] .fx-speak circle:nth-child(3){animation-delay:.3s}
.nauti[data-state=pista] .pupil{--px:-2px;--py:-1px}
.nauti[data-state=pista] .cam{animation:none;fill-opacity:.28}
.nauti[data-state=pista] .fx-pearl{opacity:1}.nauti[data-state=pista] .fx-pearl>*{animation:rise 2.6s ease-in-out infinite}
.nauti[data-state=error] .sil,.nauti[data-state=error] .whorl{stroke:#A8978E}.nauti[data-state=error] .cam{animation:none;fill-opacity:.04;stroke:#A8978E}
.nauti[data-state=error] .lid{animation:none;transform:scaleY(.38)}.nauti[data-state=error] .pupil{--py:3px}
.nauti[data-state=error] .tn{animation:none;transform:rotate(14deg);stroke:#C9B9AF}
.nauti[data-state=error] .stripe{fill:#C9B9AF}
.nauti[data-state=error] .hood{fill:#D9C7BC;stroke:#A8978E}
.nauti[data-state=error] .hd{stroke:#A8978E}
.nauti[data-state=error] .lobe{stroke:#A8978E}
.nauti[data-state=error] .chin{stroke:#A8978E}.nauti[data-state=error] .body{animation-duration:7s}
.nauti[data-state=error] .fx-error{opacity:1}.nauti[data-state=error] .fx-error text{animation:wob 1.6s ease-in-out infinite}
.nauti[data-state=offline] .body{transform:translateY(8px) scale(.94);animation:none;opacity:.78}
.nauti[data-state=offline] .head{transform:translate(14px,-4px) scale(.82)}
.nauti[data-state=offline] .lid{animation:none;transform:scaleY(1)}.nauti[data-state=offline] .cam{animation:none;fill-opacity:.05}
.nauti[data-state=offline] .tn{animation:none;transform:scale(.15);opacity:0}
.nauti[data-state=offline] .fx-offline{opacity:1}.nauti[data-state=offline] .fx-offline .slash{stroke-dasharray:1;animation:slashdraw 2s ease-out infinite}
/* cámaras como barra de progreso */
.nauti .cam.on{animation:none;fill-opacity:.92}
.nauti .cam.off{animation:none;fill-opacity:.05}
.nauti .cam.flash{animation:flash .6s ease-in-out infinite}

/* ---------- espiral de Fibonacci ---------- */
.spi{display:block;overflow:visible}
.spi .sq,.spi .ar{fill:none;stroke:var(--naranja);stroke-width:var(--sw,.09);stroke-linecap:round;stroke-linejoin:round}
.spi .sq{stroke:var(--ambar);opacity:.85}
.spi.dibuja .sq,.spi.dibuja .ar{stroke-dasharray:1;stroke-dashoffset:1;animation:draw var(--dur,610ms) var(--e-move) var(--del,0ms) both}
.spi .arc1{stroke-width:calc(var(--sw,.09)*1.8)}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes chase{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{display:block;animation:spin 13s linear infinite}
.spinner .trazo{fill:none;stroke:var(--naranja);stroke-width:var(--sw,.5);stroke-linecap:round;stroke-dasharray:.3 .7;animation:chase 1.6s linear infinite}
.spinner .base{fill:none;stroke:var(--line-strong);stroke-width:var(--sw,.5);stroke-linecap:round;opacity:.45}
.wm{position:absolute;pointer-events:none;opacity:.05;transition:transform var(--d610) var(--e-move)}
.wm .ar{fill:none;stroke:var(--naranja);stroke-width:.14;stroke-linecap:round}
.wipe{animation:wipe var(--d987) var(--e-move) both;-webkit-mask-image:conic-gradient(from -90deg at var(--ox,50%) var(--oy,50%),#000 var(--a),transparent calc(var(--a) + .4deg));mask-image:conic-gradient(from -90deg at var(--ox,50%) var(--oy,50%),#000 var(--a),transparent calc(var(--a) + .4deg));clip-path:circle(var(--r) at var(--ox,50%) var(--oy,50%))}
@keyframes wipe{from{--a:0deg;--r:0%}to{--a:361deg;--r:160%}}
@keyframes rise-in{from{opacity:0;transform:translateY(21px)}to{opacity:1;transform:none}}
.rise{animation:rise-in var(--d610) var(--e-in) both;animation-delay:calc(var(--n,0)*89ms)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes unblur{from{opacity:0;filter:blur(21px);transform:scale(.96)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.skel{border-radius:8px;background:linear-gradient(90deg,var(--surface-3) 30%,var(--surface-2) 50%,var(--surface-3) 70%);background-size:200% 100%;animation:shimmer 1.6s linear infinite}
.grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply;opacity:.1}

/* ---------- movimiento reducido: mismos estados, sin movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .g *,.g *::before,.g *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .nauti[data-state=verificando] .ck{opacity:1}
  .nauti[data-state=offline] .fx-offline .slash{stroke-dasharray:none}
  .nauti[data-state=celebrando] .fx-party>*{transform:translate(var(--dx),var(--dy)) rotate(var(--r,0deg))}
  .nauti .cam.flash{fill:#E5233B;fill-opacity:.9}
  .nauti .lens{transform:translate(30px,-30px)}
  .spi.dibuja .sq,.spi.dibuja .ar{stroke-dashoffset:0}
  .wipe{-webkit-mask-image:none;mask-image:none;clip-path:none;animation:fade-in 144ms linear!important}
  .rise{opacity:1;transform:none}
}
.g.reduce *,.g.reduce *::before,.g.reduce *::after{animation:none!important;transition:none!important}
.g.reduce .nauti[data-state=verificando] .ck{opacity:1}
.g.reduce .spi.dibuja .sq,.g.reduce .spi.dibuja .ar{stroke-dashoffset:0}

/* estados forzados para la hoja de componentes */
.sw.s-focus span{outline:3px solid var(--ring);outline-offset:3px}
.sw.s-hover span,.sw:hover span{border-color:var(--text-2)}
.range.s-focus{outline:3px solid var(--ring);outline-offset:3px;border-radius:8px}
.range.s-hover::-webkit-slider-thumb{transform:scale(1.15)}
.range:disabled{opacity:.45;cursor:not-allowed}
.card.s-hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.card.s-focus{outline:3px solid var(--ring);outline-offset:3px}
.card.s-active{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent)}
.card.s-error{border-color:var(--error);background:var(--error-bg)}
.card.s-disabled{opacity:.5}
.seg button.s-hover{color:var(--text);background:var(--surface-2)}
.seg button.s-focus{outline:3px solid var(--ring);outline-offset:2px}
.seg button:disabled{opacity:.5;cursor:not-allowed}
.sb a.it.s-hover{background:var(--surface-3);color:var(--text)}
.sb a.it.s-focus{outline:3px solid var(--ring);outline-offset:3px}
.sb a.it[aria-disabled=true]{opacity:.5;pointer-events:none}

@keyframes slashdraw{0%,12%{stroke-dashoffset:1}40%,100%{stroke-dashoffset:0}}