/* IA: núcleo 3D reactivo, respuesta que se escribe, conversación guardada, respaldo, panel de reglas. Se apoya en puerta2.css. */
.door2 .core3d{position:relative;width:min(100%,330px);aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.door2 .core3d .halo{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(146,129,247,.22),transparent 72%);animation:breathe 7s ease-in-out infinite}
.door2 .core3d .fl3{position:relative;width:86%;animation:float 8s ease-in-out infinite}
.door2 .core3d img{display:block;width:100%;height:auto;transform:perspective(900px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) rotate(calc(var(--rot,0deg) + -6deg)) translateY(var(--ty,0px));transition:transform .5s var(--ease);will-change:transform;filter:drop-shadow(0 24px 40px rgba(0,0,0,.7))}
.door2 .core3d .rule{position:absolute;padding:7px 12px;border-radius:6px;background:#0b0b0d;box-shadow:inset 0 0 0 1px var(--hair);font:400 12px/1 var(--font-mono);letter-spacing:.04em;color:#e6e5e2;white-space:nowrap;animation:bob 6.5s ease-in-out infinite;animation-delay:var(--dl,0s)}

/* respuesta que se escribe */

.js.door2 .scene .stream{clip-path:inset(0 100% 0 0)}
.js.door2 .scene.in .stream{animation:wipe 1.7s steps(26) forwards;animation-delay:calc(var(--i,0)*.38s + .9s)}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.door2 .alert{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:7px 12px;border-radius:99px;font-size:13px;color:#fff;box-shadow:inset 0 0 0 1px rgba(146,129,247,.55);background:rgba(146,129,247,.1)}
.door2 .alert i{width:7px;height:7px;border-radius:50%;background:var(--vg)}

/* conversación guardada */
.door2 .saved{margin:6px 16px 16px;padding:12px 14px;border-radius:12px;background:#0b0b0d;box-shadow:inset 0 0 0 1px var(--hair)}
.door2 .saved small.t{display:block;font:400 12px/1 var(--font-mono);letter-spacing:.08em;color:var(--t3);text-transform:uppercase;margin-bottom:8px}
.door2 .saved .f{display:grid;grid-template-columns:86px 1fr auto;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--hair);font-size:14px}
.door2 .saved .f span:first-child{color:var(--t3);font-size:12.5px}.door2 .saved .f b{font-weight:500;color:#fff}
.door2 .saved .f i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:#3ad389;color:#04140b;font:700 10px/1 var(--font-sans);font-style:normal}

/* respaldo */
.door2 .fl{padding:16px 18px;display:grid;justify-items:start}
.door2 .fn{width:100%;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:#0b0b0d;box-shadow:inset 0 0 0 1px var(--hair);font-size:14.5px;color:#fff;transition:opacity .6s var(--ease),box-shadow .6s}
.door2 .fn small{display:block;font-size:12.5px;color:var(--t3);margin-top:2px}
.door2 .fn .st2{display:inline-grid}.door2 .fn .st2>span{grid-area:1/1;transition:opacity .5s}
.door2 .fn .st2 .b2{opacity:0}
.door2 .cn{width:1px;height:20px;margin:0 0 0 26px;background:var(--hair);position:relative}
.door2 .cn::after{content:"";position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:var(--vg);animation:travel 2.2s linear infinite}
@keyframes travel{from{top:0;opacity:1}to{top:100%;opacity:.2}}
.door2 .fn .ic{width:10px;height:10px;border-radius:50%;background:#3ad389}
.door2 .fl .rules{opacity:.4}
.door2 .fl.done .ai{opacity:.55}.door2 .fl.done .ai .ic{background:#ff6465}
.door2 .fl.done .ai .st2 .b1{opacity:0}.door2 .fl.done .ai .st2 .b2{opacity:1}
.door2 .fl.done .rules{opacity:1;box-shadow:inset 0 0 0 1px #3a3e43}

/* panel de reglas */
.door2 .ctl{padding:14px 16px;display:grid;gap:12px}
.door2 .ctl label,.door2 .ctl .lb{font:400 12px/1 var(--font-mono);letter-spacing:.08em;color:var(--t3);text-transform:uppercase}
.door2 .ctl .inp{margin-top:6px;padding:10px 12px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--hair);background:#0b0b0d;font-size:14.5px;color:#fff}
.door2 .tpc{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.door2 .tpc span{padding:6px 12px;border-radius:6px;font-size:13px;box-shadow:inset 0 0 0 1px var(--hair);color:#e6e5e2}
.door2 .tpc span.off{opacity:.4;text-decoration:line-through}
.door2 .row2{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:#e6e5e2}
.door2 .swt{width:38px;height:22px;border-radius:99px;background:#101112;box-shadow:inset 0 0 0 1px var(--hair);position:relative;transition:background .4s;flex:none}
.door2 .swt::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#62666d;transition:transform .4s var(--ease),background .4s}
.door2 .row2.done .swt{background:#fff}.door2 .row2.done .swt::after{transform:translateX(16px);background:#000}

/* dos niveles */
.door2 .lvls{display:grid;gap:12px;margin-top:22px;text-align:left}
.door2 .lv{padding:20px;border-radius:16px;background:rgba(236,235,232,.035);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 1px rgba(255,255,255,.12)}
.door2 .lv small{font:400 12px/1 var(--font-mono);letter-spacing:.08em;color:var(--t3);text-transform:uppercase}
.door2 .lv b{display:block;font:400 28px/1.1 var(--font-serif);color:#fff;margin-top:8px}
.door2 .lv p{font-size:16.5px;line-height:1.5;color:var(--t3);margin-top:6px}
.door2 .lv.ai{box-shadow:inset 0 0 0 1px rgba(146,129,247,.45),inset 0 1px 1px rgba(255,255,255,.12)}

@media (prefers-reduced-motion:reduce){
 .js.door2 .scene .stream{clip-path:none!important}
 .door2 .core3d img{transform:rotate(-6deg)!important}
}
@media (min-width:900px){.door2 .core3d{margin:0}.door2 .lvls{grid-template-columns:1fr 1fr}}



.door2 .fn small.st2{display:grid;margin-top:2px}