/* Webs: marcos de navegador en 3D con las mini webs reales, que se desplazan solas. Se apoya en puerta2.css. */
.door2 .stage3d{position:relative;width:min(100%,360px);aspect-ratio:1/1.02;margin:0 auto;perspective:1100px}
.door2 .stage3d .grp{position:absolute;inset:0;transform-style:preserve-3d;animation:float 8s ease-in-out infinite}
.door2 .bf{position:absolute;width:82%;border-radius:12px;background:#08090a;box-shadow:inset 0 0 0 1px #2a2d31,0 28px 50px rgba(0,0,0,.75);overflow:hidden;transition:transform .5s var(--ease)}
.door2 .bf .tb{display:flex;gap:5px;padding:8px 10px;border-bottom:1px solid #1d2023;background:#0d0e10}
.door2 .bf .tb i{width:7px;height:7px;border-radius:50%;background:#2a2d31}
.door2 .bf .scr{aspect-ratio:16/10;overflow:hidden;background:#111}
.door2 .bf img,.door2 .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0%;animation:pan 24s ease-in-out infinite alternate}
.door2 .bf.a{left:0;top:6%;transform:rotateY(calc(18deg + var(--ry,0deg))) rotateX(calc(4deg + var(--rx,0deg))) translateZ(0)}
.door2 .bf.b{right:0;bottom:4%;transform:rotateY(calc(18deg + var(--ry,0deg))) rotateX(calc(4deg + var(--rx,0deg))) translateZ(70px)}
.door2 .bf.b img{animation-delay:-9s;animation-duration:28s}
@keyframes pan{to{object-position:50% 100%}}

.door2 .shot{margin:26px 0 0;border-radius:16px;overflow:hidden;background:#08090a;box-shadow:inset 0 0 0 1px var(--hair),0 24px 40px rgba(0,0,0,.6);text-align:left}
.door2 .shot .tb{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--hair);background:#0d0e10;font:400 12px/1 var(--font-mono);letter-spacing:.06em;color:var(--t3)}
.door2 .shot .tb i{width:8px;height:8px;border-radius:50%;background:#2a2d31}
.door2 .shot .tb b{margin-left:auto;font-weight:400}
.door2 .shot .scr{aspect-ratio:16/11;overflow:hidden}
.door2 .shot a{display:block;height:100%}
.door2 .acts2{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:flex-start;margin-top:12px}
.door2 .vnote{font-size:14.5px;color:var(--t3);margin-top:8px}
@media (hover:hover) and (pointer:fine){.door2 .shot{transition:transform .5s var(--ease)}.door2 .shot:hover{transform:translateY(-4px)}}

/* Cuida tu web: texto informativo plano */
.door2 .plans{display:grid;gap:12px;margin-top:22px;text-align:left}
.door2 .plan{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 .plan h3{font:400 30px/1.1 var(--font-serif);color:#fff}
.door2 .plan ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.door2 .plan li{font-size:16.5px;line-height:1.5;color:var(--t3);padding-left:16px;position:relative}
.door2 .plan li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--t3)}
.door2 .plan.pro{box-shadow:inset 0 0 0 1px rgba(146,129,247,.45),inset 0 1px 1px rgba(255,255,255,.12)}
.door2 .fine{font-size:15px;line-height:1.5;color:var(--t3);margin:18px 0 0;max-width:52ch}
.door2 .fine a{color:var(--t2);text-decoration:underline;text-underline-offset:4px}

@media (prefers-reduced-motion:reduce){.door2 .bf img,.door2 .shot img{animation:none!important}}
@media (min-width:900px){.door2 .stage3d{margin:0}.door2 .plans{grid-template-columns:repeat(3,1fr)}}