/* portada.css — Estilos de la portada (.pt-*, login por personaje).
   Antes vivía inyectado en JS (pages/portada.js); ahora es CSS de verdad. */

#portada-root{width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:24px;padding:28px 20px;
background:
repeating-radial-gradient(circle at 50% 50%,transparent 0px,transparent 38px,rgba(200,0,0,.07) 40px,transparent 42px),
radial-gradient(ellipse 120% 120% at 50% 50%,rgba(180,0,0,.35),rgba(120,0,0,.15) 40%,rgba(60,0,0,.08) 65%,transparent 85%),
radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,20,0,.18),transparent 60%),
radial-gradient(ellipse 80% 60% at 50% 100%,rgba(200,0,0,.12),transparent 60%),
#080000;overflow:hidden;animation:pt-bgPulse 4s ease-in-out infinite alternate;}
.pt-brand{text-align:center;position:relative;z-index:1;animation:pt-fadeDown .6s ease both;}
.pt-logo{font-family:var(--f-display);font-size:clamp(92px,10vw,150px);line-height:.85;letter-spacing:.03em;color:var(--txt);}
.pt-logo .o{color:#fff;text-shadow:0 0 22px rgba(255,255,255,1),0 0 70px rgba(255,255,255,.6),0 0 140px rgba(255,255,255,.25);}
.pt-tagline{font-size:clamp(10px,1vw,14px);letter-spacing:.24em;text-transform:uppercase;color:var(--txt3);margin-top:12px;}
.pt-cards{display:flex;gap:clamp(16px,2vw,28px);justify-content:center;align-items:stretch;
width:100%;max-width:1040px;margin:0 auto;}
.pt-card{position:relative;flex:1 1 0;min-width:0;max-width:320px;height:auto;aspect-ratio:200 / 290;
background:#000;border:1px solid rgba(255,255,255,.06);border-radius:24px;overflow:hidden;
cursor:pointer;user-select:none;-webkit-user-select:none;
transition:transform .32s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;
animation:pt-fadeUp .5s ease both;
--card-c:rgba(255,255,255,.06);}
.pt-card:nth-child(1){animation-delay:.15s;}
.pt-card:nth-child(2){animation-delay:.3s;}
.pt-card:nth-child(3){animation-delay:.45s;}
.pt-card:hover{transform:translateY(-10px) scale(1.02);
border-color:var(--card-c);box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 30px var(--card-glow,transparent);}
.pt-card:active{transform:scale(.97);transition-duration:.1s;}
.pt-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;
object-fit:cover;object-position:center 12%;background:#000;
transition:transform .4s cubic-bezier(.22,1,.36,1);pointer-events:none;}
.pt-card:hover .pt-video{transform:scale(1.05);}
.pt-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,0) 58%);}
.pt-logomark{display:block;width:46px;height:46px;margin:0 auto 10px;
filter:drop-shadow(0 0 18px rgba(255,255,255,.45));-webkit-user-select:none;user-select:none;}
.pt-card-body{position:absolute;bottom:0;left:0;right:0;z-index:2;
display:flex;flex-direction:column;align-items:center;padding:0 14px 20px;text-align:center;}
.pt-nombre{font-family:var(--f-display);font-size:36px;letter-spacing:.04em;color:#fff;line-height:1;
text-shadow:0 2px 16px rgba(0,0,0,.8);transition:transform .3s;}
.pt-card:hover .pt-nombre{transform:translateY(-4px);}
.pt-rol{font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.12em;text-transform:uppercase;
margin-top:4px;transition:color .3s;}
.pt-card:hover .pt-rol{color:rgba(255,255,255,.7);}
.pt-hint{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.15);
margin-top:14px;transition:color .3s,transform .3s;}
.pt-card:hover .pt-hint{color:rgba(255,255,255,.5);transform:translateY(-2px);}
#pt-pin-overlay{position:fixed;inset:0;z-index:1000;
background:rgba(0,0,0,0);backdrop-filter:blur(0px);
display:flex;align-items:center;justify-content:center;
animation:pt-overlayIn .3s ease forwards;}
.pt-pin-modal{display:flex;flex-direction:column;align-items:center;gap:16px;
padding:36px 40px 32px;background:#080808;
border:1px solid rgba(255,255,255,.09);border-radius:24px;
box-shadow:0 32px 80px rgba(0,0,0,.8);min-width:300px;
animation:pt-modalIn .35s cubic-bezier(.22,1,.36,1) both;animation-delay:.1s;
opacity:0;transform:translateY(24px) scale(.96);}
.pt-pin-nombre{font-family:var(--f-display);font-size:50px;letter-spacing:.04em;color:#fff;line-height:1;}
.pt-pin-sub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:4px;}
.pt-pin-dots{display:flex;gap:14px;}
.pt-pin-dot{width:13px;height:13px;border-radius:50%;
border:2px solid rgba(255,255,255,.2);background:transparent;
transition:background .15s,border-color .15s,transform .15s cubic-bezier(.22,1,.36,1);}
.pt-pin-dot.on{background:var(--pt-c);border-color:var(--pt-c);transform:scale(1.2);
box-shadow:0 0 12px var(--pt-c);}
.pt-pin-err{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:#ff453a;opacity:0;transition:opacity .18s;min-height:16px;}
.pt-pin-err.vis{opacity:1;}
.pt-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:220px;}
.pt-nk{font-family:var(--f-display);font-size:22px;letter-spacing:.04em;
padding:14px 0;border-radius:12px;border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.04);color:#fff;cursor:pointer;
transition:background .12s,border-color .12s,transform .1s cubic-bezier(.22,1,.36,1);
user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;}
.pt-nk:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);}
.pt-nk:active{transform:scale(.88);background:rgba(255,255,255,.18);}
.pt-nk.del{font-size:16px;color:rgba(255,255,255,.5);}
.pt-nk.del:hover{color:#fff;}
.pt-nk.empty{border:none;background:transparent;cursor:default;pointer-events:none;}
.pt-pin-cancel{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:rgba(255,255,255,.2);cursor:pointer;margin-top:4px;
background:none;border:none;transition:color .15s;padding:8px 12px;
-webkit-tap-highlight-color:transparent;}
.pt-pin-cancel:hover{color:rgba(255,255,255,.5);}
@keyframes pt-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.pt-pin-dots.shake{animation:pt-shake .36s ease;}
@keyframes pt-fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes pt-fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pt-overlayIn{to{background:rgba(0,0,0,.85);backdrop-filter:blur(6px)}}
@keyframes pt-modalIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pt-bgPulse{0%{filter:brightness(1)}100%{filter:brightness(1.12)}}
.pt-foot{font-size:11px;color:rgba(255,255,255,.18);text-align:center;letter-spacing:.04em;z-index:1;
animation:pt-fadeUp .5s ease .6s both;}
@media(max-width:640px){
#portada-root{gap:10px;padding:12px 10px 8px;min-height:100vh;min-height:100dvh;justify-content:center;}
.pt-brand{margin-bottom:0;}
.pt-logo{font-size:28px;}
.pt-tagline{font-size:7px;letter-spacing:.18em;margin-top:2px;}
.pt-cards{flex-direction:row;justify-content:center;gap:10px;width:100%;}
.pt-card{flex:1 1 0;width:auto;max-width:200px;min-width:0;
height:auto;aspect-ratio:200 / 290;border-radius:14px;
-webkit-tap-highlight-color:transparent;}
.pt-card:hover{transform:none;box-shadow:none;border-color:var(--card-c);}
.pt-card:active{transform:scale(.97);}
.pt-logomark{display:none;}
.pt-video{object-position:center var(--face-m,32%);}
.pt-card-body{padding:0 6px 10px;}
.pt-nombre{font-size:16px;}
.pt-card:hover .pt-nombre{transform:none;}
.pt-rol{font-size:6px;letter-spacing:.08em;margin-top:2px;}
.pt-hint{display:none;}
.pt-foot{font-size:8px;margin-top:2px;}
#pt-pin-overlay{align-items:flex-end;}
.pt-pin-modal{padding:32px 24px 28px;min-width:0;width:100vw;max-width:100vw;
border-radius:24px 24px 0 0;border-bottom:none;
animation-name:pt-modalSlideUp;}
.pt-pin-nombre{font-size:40px;}
.pt-numpad{width:100%;max-width:300px;gap:6px;}
.pt-nk{padding:16px 0;font-size:24px;border-radius:14px;}
.pt-pin-cancel{padding:12px 16px;font-size:11px;}
}
@keyframes pt-modalSlideUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}