/* Ingreso futurista (01-11-2026, Wilson eligió la maqueta E = mezcla de D y A, en el color 7 «Oro + carmesí»:
   manda el oro de la marca y el carmesí acompaña en pulsos, pistas, borde, botón y «circuito.»; maqueta colores.html).
   Fondo: video de circuitos renderizado con HyperFrames; encima, pistas vivas que nacen de la tarjeta (ingreso.js).
   Todo va con prefijo pt- y colgado de #portada: el CRM ya tiene .velo, .campo y .btn propios. */
#portada{--pt-neon:#e8b96f;--pt-borde:rgba(226,196,143,.16);--pt-borde-2:rgba(226,196,143,.28);--pt-suave:cubic-bezier(.22,.8,.2,1);
  position:relative;isolation:isolate;overflow:hidden;background:#07070a;
  grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(24px,6vw,96px);place-items:center stretch;
  max-width:none;padding:56px max(clamp(16px,4vw,56px),calc((100vw - 1280px)/2)) 40px;perspective:1200px}
#portada .pt-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;filter:hue-rotate(-12deg) saturate(1.1) brightness(.8);transform:scale(1.04);transition:transform 1.2s var(--pt-suave)}
#portada .pt-velo{position:fixed;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(7,7,10,.86) 0%,rgba(7,7,10,.45) 48%,rgba(7,7,10,.62) 100%)}
#portada .pt-placa{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none}

/* El titular de la izquierda */
#portada .pt-rotulo{font:600 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--acento);margin-bottom:18px;display:flex;gap:10px;align-items:center}
#portada .pt-rotulo::before{content:"";width:28px;height:1px;background:var(--acento);box-shadow:0 0 8px var(--pt-neon)}
#portada .pt-titular h2{font-size:clamp(34px,4.6vw,68px);line-height:1.02;font-weight:700;letter-spacing:-.025em;text-shadow:0 2px 24px rgba(0,0,0,.6)}
#portada .pt-titular h2 .pt-barrido{color:var(--pt-neon);text-shadow:0 0 26px rgba(232,185,111,.45)}
#portada .pt-titular h2 .pt-barrido>span{background:linear-gradient(90deg,var(--pt-neon),#ff8a7a);-webkit-background-clip:text;background-clip:text;color:transparent}
#portada .pt-titular p{margin-top:20px;max-width:440px;color:var(--texto-suave);font-size:15px}

/* La tarjeta: vidrio flotante con un borde de neón que recorre el contorno */
#portada .pt-tarjetas{justify-self:end;width:min(420px,100%);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--pt-suave)}
#portada .login{position:relative;width:100%;padding:34px 32px 26px;border-radius:20px;border:0;background:rgba(21,21,23,.62);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);isolation:isolate}
#portada .login::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--pt-giro,0deg),transparent 0 62%,rgba(232,185,111,.15) 70%,var(--pt-neon) 78%,rgba(255,138,122,.6) 82%,transparent 90%),linear-gradient(var(--pt-borde),var(--pt-borde));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:pt-giro 7s linear infinite}
@property --pt-giro{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes pt-giro{to{--pt-giro:360deg}}
#portada .login .logo-wg{margin:0 auto 24px}
#portada .login .logo-wg i{position:relative;width:58px;height:58px;color:var(--pt-neon);border-color:var(--pt-neon);
  box-shadow:0 0 18px rgba(232,185,111,.35),inset 0 0 12px rgba(232,185,111,.18);text-shadow:0 0 10px rgba(232,185,111,.7)}
#portada .login .logo-wg i::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(232,185,111,.35);animation:pt-gira 18s linear infinite}
@keyframes pt-gira{to{transform:rotate(360deg)}}
#portada .login h1{font-size:26px;letter-spacing:-.01em}
#portada .login p{margin-bottom:22px}
#portada .login .campo input{padding:11px 13px;border-radius:10px;border-color:var(--pt-borde-2);background:rgba(10,10,12,.72);transition:border-color .2s,box-shadow .2s}
#portada .login .campo input:focus{outline:0;border-color:var(--pt-neon);box-shadow:0 0 0 3px rgba(232,185,111,.14),0 0 18px rgba(232,185,111,.18)}
#portada .login .campo input::placeholder{color:var(--texto-mudo)}
#portada .login .btn.primario{position:relative;overflow:hidden;padding:12px;border:0;border-radius:10px;font-size:14px;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(100deg,#e8b96f,var(--acento) 45%,#e0645a);box-shadow:0 0 0 1px rgba(232,185,111,.5),0 8px 28px -6px rgba(232,185,111,.55)}
#portada .login .btn.primario::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:pt-brillo 4.5s var(--pt-suave) infinite 1.8s}
@keyframes pt-brillo{0%,60%{left:-60%}100%{left:130%}}
#portada .login .btn.primario:hover{filter:brightness(1.08)}
#portada .pt-pie{margin-top:16px;text-align:center;font:11.5px var(--mono);color:var(--texto-mudo)}
#portada .pt-pie i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6be0a0;box-shadow:0 0 8px #6be0a0;margin-right:7px}

/* Texto que se revela tras una máscara, barrido de luz y entrada encadenada de la tarjeta.
   Lo escondido depende de .pt-anima, que pone ingreso.js: si ese archivo no carga, el login se ve igual. */
#portada .pt-revela{display:block;overflow:hidden;padding-bottom:.08em}
#portada .pt-revela>span{display:inline-block}
#portada.pt-anima .pt-revela>span{transform:translateY(110%);transition:transform 1s var(--pt-suave)}
#portada.pt-listo .pt-revela>span{transform:none}
#portada .pt-barrido{position:relative;display:inline-block}
#portada .pt-barrido::after{content:"";position:absolute;inset:0;background:var(--pt-neon);transform:scaleX(0);transform-origin:left;box-shadow:0 0 18px var(--pt-neon)}
#portada.pt-listo .pt-barrido::after{animation:pt-barre 1.1s var(--pt-suave) forwards .7s}
@keyframes pt-barre{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
#portada.pt-anima .pt-barrido>span{opacity:0;transition:opacity 0s 1.2s}
#portada.pt-listo .pt-barrido>span{opacity:1}
#portada.pt-anima .login>*{opacity:0;transform:translateY(10px);transition:opacity .6s var(--pt-suave),transform .6s var(--pt-suave)}
#portada.pt-listo .login>*{opacity:1;transform:none}

@media (max-width:980px){
  #portada{grid-template-columns:1fr;place-items:center;align-content:center;padding:40px 16px}
  #portada .pt-titular{text-align:center} #portada .pt-rotulo{justify-content:center} #portada .pt-titular p{margin:16px auto 0}
  #portada .pt-tarjetas{justify-self:center}
  #portada .pt-velo{background:rgba(7,7,10,.62)}
}
@media (max-width:520px){#portada .pt-titular h2{font-size:30px} #portada .pt-titular p{font-size:13.5px} #portada .login{padding:28px 22px 22px}}
@media (prefers-reduced-motion:reduce){
  #portada *,#portada *::before,#portada *::after{animation:none!important;transition:none!important}
  #portada .pt-revela>span,#portada .login>*{transform:none;opacity:1}
  #portada .pt-barrido>span{opacity:1}
}
#portada .login .cambiar:empty{display:none}