/* Puerta v2 — Linear (estructura) + cristal AuthKit + Resend (disciplina). Lienzo negro, acento violeta solo en detalles. */
.door2{--v:#9281f7;--vg:#baa7ff;--hair:#292d30;--t1:#fff;--t2:#d0d6e0;--t3:#a1a4a5;--ease:cubic-bezier(.22,.8,.2,1);background:#000}
.door2 body{background:#000;color:var(--t2)}
.door2 body::before,.door2 body::after{display:none}
.door2 main{display:block;max-width:none}
.door2 main section{position:relative;height:auto;max-width:none;margin:0;display:block;scroll-snap-align:none}
.door2 .webs-header{z-index:60}
.door2 .webs-mark{background:#000}
#d2-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--v),var(--vg));z-index:70;pointer-events:none}

/* ---- cabecera ---- */
.door2 .hero{padding:92px 24px 28px;max-width:1100px;margin:0 auto}
.door2 .hero::after{content:"";position:absolute;left:-30%;right:-30%;top:-18%;height:52%;background:radial-gradient(closest-side,rgba(146,129,247,.11),transparent);pointer-events:none;animation:breathe 9s ease-in-out infinite}
.door2 .pill{justify-self:start;width:fit-content;display:inline-flex;align-items:center;padding:6px 14px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--hair);font:400 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#f0f0f0;position:relative;z-index:1}
.door2 h1{font:400 clamp(46px,12.6vw,86px)/1 var(--font-serif);letter-spacing:-.01em;color:var(--t1);margin-top:18px;max-width:14ch;text-wrap:balance;position:relative;z-index:1}
.door2 h1 em{font-style:italic;color:var(--vg)}
.door2 .lead{font-size:17px;line-height:1.5;color:var(--t3);margin-top:14px;max-width:46ch;position:relative;z-index:1}
.door2 .btns{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;margin-top:22px;position:relative;z-index:1}
.door2 .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:0;border-radius:6px;background:transparent;box-shadow:inset 0 0 0 1px #fff;color:#fff;font:500 15px/1 var(--font-sans);letter-spacing:-.011em;cursor:pointer;text-decoration:none;transition:background .2s var(--ease),transform .15s var(--ease)}
.door2 .btn:active{transform:scale(.97)}
.door2 .lnk{display:inline-flex;align-items:center;min-height:44px;font:500 15px/1 var(--font-sans);color:var(--t2);text-decoration:none;transition:color .2s}
.door2 .lnk:active{transform:scale(.98)}
.door2 .btn:focus-visible,.door2 .lnk:focus-visible,.door2 .more a:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.door2 .btn:hover{background:rgba(255,255,255,.08)}.door2 .lnk:hover{color:#fff}}
.door2 .obj{display:grid;place-items:center;margin:28px 0 0;position:relative;z-index:1;height:210px}
.door2 .tile{width:68px;height:68px;border-radius:20px;background:linear-gradient(160deg,#2b2b30,#09090a);box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 -12px 22px rgba(0,0,0,.6),0 0 0 1px #1b1b1f,0 14px 34px rgba(146,129,247,.22);display:grid;place-items:center;position:relative}
.door2 .tile svg{width:30px;height:30px;stroke:#f3f1ff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.door2 .tile.big{width:128px;height:128px;border-radius:34px;animation:float 7s ease-in-out infinite}
.door2 .tile.big svg{width:56px;height:56px;stroke-width:1.3;animation:spin 22s linear infinite}
.door2 .ring{position:absolute;inset:-26px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(146,129,247,.22);animation:ringpulse 6s ease-in-out infinite}
.door2 .ring.r2{inset:-52px;box-shadow:inset 0 0 0 1px rgba(146,129,247,.1);animation-delay:-3s}

/* ---- secciones ---- */
.door2 .sec{padding:60px 24px 0;text-align:left;max-width:1100px;margin:0 auto}
.door2 .sec .tile{margin:0}
.door2 .idx{font:400 12px/1 var(--font-mono);letter-spacing:.1em;color:var(--t3);margin-top:18px}
.door2 .sec h2{font:400 clamp(34px,9vw,52px)/1.05 var(--font-serif);letter-spacing:-.01em;color:var(--t1);margin-top:8px;text-wrap:balance}
.door2 .sec .txt p{font-size:17px;line-height:1.5;color:var(--t3);margin:10px 0 0;max-width:36ch}
.door2 .sec .note{font-size:14.5px;margin-top:6px;color:var(--t3)}
.door2 .panel{margin:22px -2px 0;height:300px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent);text-align:left}
.door2 .win{height:340px;border-radius:16px 16px 0 0;background:linear-gradient(#101012,#050506);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 1px rgba(255,255,255,.12)}
.door2 .wbar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--hair);font:400 12px/1 var(--font-mono);letter-spacing:.1em;color:var(--t3);text-transform:uppercase}
.door2 .wbar i{width:8px;height:8px;border-radius:50%;background:#2a2d31}
.door2 .wbar b{margin-left:auto;font-weight:400}
.door2 .chat{padding:16px;display:grid;gap:10px}
.door2 .bub{max-width:82%;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.4;color:#f0f0f0;background:#17181a;box-shadow:inset 0 0 0 1px var(--hair)}
.door2 .bub.me{justify-self:end;background:#fff;color:#000;box-shadow:none}
.door2 .bub small{display:block;font:400 12px/1.3 var(--font-mono);color:var(--t3);margin-top:4px}
.door2 .chip{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:6px 12px;border-radius:99px;font-size:13px;color:#fff;box-shadow:inset 0 0 0 1px var(--hair);background:rgba(255,255,255,.03)}
.door2 .dot{width:7px;height:7px;border-radius:50%;background:#3ad389;flex:none}
.door2 .dot.p{background:#ffca16}.door2 .dot.w{background:#fff}
.door2 .rows{padding:6px 16px;list-style:none;margin:0}
.door2 .rows li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--hair);font-size:14.5px}
.door2 .rows b{display:block;font-weight:500;color:#fff}
.door2 .rows small{font-size:12.5px;color:var(--t3)}
.door2 .st{display:inline-grid;position:relative;padding:4px 10px;border-radius:99px;font-size:12.5px;color:#fff;box-shadow:inset 0 0 0 1px var(--hair)}
.door2 .st>span{display:inline-flex;align-items:center;gap:8px;grid-area:1/1;transition:opacity .5s var(--ease)}
.door2 .st .after{opacity:0}
.door2 .rows li.paid .st .before{opacity:0}.door2 .rows li.paid .st .after{opacity:1}
.door2 .cal{padding:14px 16px;display:grid;grid-template-columns:42px repeat(5,1fr);gap:6px;font:400 12px/1 var(--font-mono);color:var(--t3);text-align:center}
.door2 .cal div{min-height:34px;border-radius:6px;box-shadow:inset 0 0 0 1px #1d2023;display:grid;place-items:center}
.door2 .cal .h{box-shadow:none;min-height:20px}.door2 .cal .t{box-shadow:none;place-items:center end;padding-right:4px}
.door2 .cal .on{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px #3a3e43;color:#fff}

/* ---- guia con codigo ---- */
.door2 .steps{list-style:none;margin:22px 0 0;padding:0;text-align:left;display:grid;gap:0}
.door2 .steps li{display:grid;grid-template-columns:34px 1fr;gap:2px 8px;padding:14px 0;border-top:1px solid var(--hair)}
.door2 .steps li::before{content:counter(s,decimal-leading-zero);counter-increment:s;font:400 12px/1.9 var(--font-mono);color:var(--t3)}
.door2 .steps{counter-reset:s}
.door2 .steps b{font:400 26px/1.1 var(--font-serif);color:#fff;display:block}
.door2 .steps span{grid-column:2;font-size:16px;line-height:1.5;color:var(--t3)}
.door2 .code{margin:26px 0 0;border-radius:16px;background:#050506;box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 1px rgba(255,255,255,.1);overflow:hidden;text-align:left}
.door2 .code pre{margin:0;padding:14px 16px 18px;overflow-x:auto;font:400 12.5px/1.75 var(--font-mono);color:#c9ced6;white-space:pre}
.door2 .code .l{display:block}
.door2 .code .k{color:var(--vg)}.door2 .code .s{color:#3ad389}.door2 .code .c{color:#62666d}.door2 .code .v{color:#70b8ff}
.door2 .code .cur{display:inline-block;width:7px;height:14px;background:#fff;vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(1) infinite}

/* ---- mas + cierre + pie ---- */
.door2 .more{padding:60px 24px 0;text-align:left;max-width:1100px;margin:0 auto}
.door2 .more h2{font:400 clamp(32px,8.4vw,48px)/1.05 var(--font-serif);color:#fff;margin-top:8px;letter-spacing:-.01em;text-wrap:balance}
.door2 .more ul{list-style:none;margin:22px 0 0;padding:0;text-align:left;border-top:1px solid var(--hair)}
.door2 .more li{padding:16px 0;border-bottom:1px solid var(--hair)}
.door2 .more li b{display:block;font:400 24px/1.15 var(--font-serif);color:#fff}
.door2 .more li p{font-size:16.5px;line-height:1.5;color:var(--t3);margin-top:4px}
.door2 .close{margin:64px 24px 0;padding:46px 24px;border-radius:16px;text-align:center;background:linear-gradient(#0d0d0f,#000);box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 1px rgba(255,255,255,.1);position:relative;overflow:hidden;max-width:1052px}
.door2 .close::before{content:"";position:absolute;left:-20%;right:-20%;top:-60%;height:100%;background:radial-gradient(closest-side,rgba(146,129,247,.09),transparent);animation:breathe 9s ease-in-out infinite}
.door2 .close h2{font:400 clamp(34px,9vw,52px)/1.05 var(--font-serif);color:#fff;position:relative;letter-spacing:-.01em}
.door2 .close p{font-size:17px;line-height:1.5;color:var(--t3);margin:10px auto 0;max-width:36ch;position:relative}
.door2 .close .btn{margin-top:20px;position:relative}
.door2 .webs-footer{margin-top:40px}

/* ---- animaciones (solo con JS activo y sin 'reducir movimiento') ---- */
@keyframes float{50%{transform:translateY(-7px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ringpulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes blink{50%{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js.door2 .hero .pill,.js.door2 .hero h1,.js.door2 .hero .lead,.js.door2 .hero .btns,.js.door2 .hero .obj{opacity:0;animation:enter .8s var(--ease) forwards}
.js.door2 .hero h1{animation-delay:.08s}.js.door2 .hero .lead{animation-delay:.18s}.js.door2 .hero .btns{animation-delay:.28s}.js.door2 .hero .obj{animation-delay:.4s}
.js.door2 .rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js.door2 .rv.in{opacity:1;transform:none}
.js.door2 .seq>*{opacity:0}
.js.door2 .seq.in>*{animation:rise .6s var(--ease) forwards;animation-delay:calc(var(--i,0)*.38s + .25s)}
.js.door2 .cal .on{opacity:0}
.js.door2 .cal.in .on{animation:pop .5s var(--ease) forwards;animation-delay:calc(var(--i,0)*.16s + .3s)}
.js.door2 .cal{opacity:1}
.js.door2 .code .l{opacity:0}
.js.door2 .code.in .l{animation:rise .35s var(--ease) forwards;animation-delay:calc(var(--i,0)*.22s + .2s)}
@media (hover:hover) and (pointer:fine){.door2 .win,.door2 .code,.door2 .close{transition:box-shadow .3s}.door2 .win:hover,.door2 .code:hover{box-shadow:inset 0 0 0 1px #3a3e43,inset 0 1px 1px rgba(255,255,255,.14)}}
@media (prefers-reduced-motion:reduce){
 .door2 *,.door2 *::before,.door2 *::after{animation:none!important;transition:none!important}
 .js.door2 .rv,.js.door2 .seq>*,.js.door2 .cal .on,.js.door2 .code .l,.js.door2 .hero .pill,.js.door2 .hero h1,.js.door2 .hero .lead,.js.door2 .hero .btns,.js.door2 .hero .obj{opacity:1!important;transform:none!important}
 #d2-progress{display:none}
}

/* ---- escritorio ---- */
@media (min-width:900px){
 .door2 .hero{display:grid;grid-template-columns:1.2fr .8fr;column-gap:48px;align-items:center;padding-top:130px}
 .door2 .hero .obj{grid-column:2;grid-row:1/span 4;margin:0;height:320px}
 .door2 .hero>*:not(.obj){grid-column:1}
 .door2 .sec{display:grid;grid-template-columns:1fr 1.15fr;column-gap:72px;align-items:center;text-align:left;padding-top:120px}
 .door2 .sec .tile{margin:0}
 .door2 .sec .txt p{margin-left:0}
 .door2 .sec .panel{margin:0}
 .door2 .sec.flip .txt{order:2}
 .door2 .more{padding-top:120px}
}





.door2 .webs-footer nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.door2 .webs-form input[type=text],.door2 .webs-form textarea{min-height:44px}
.door2 .webs-note a{display:inline-block;padding:10px 0}















.door2 .webs-contact-panel{padding-bottom:calc(140px + var(--kbh,0px))!important}
.door2 .webs-form input,.door2 .webs-form textarea{scroll-margin-block:120px}

.door2 .close .lnk{margin-left:16px;position:relative}