/* Pantalla de ingreso · paleta del logo GGoptimiza: marino, azul, celeste y turquesa */
:root{--marino:#0f1f45;--marino2:#16336f;--azul:#2b4c9b;--azul2:#3e7fd0;--celeste:#4fb9e8;--turquesa:#52c1c7;
  --tinta:#16213a;--gris:#5c6a80;--linea:#dde4ee;--fondo:#f4f7fb;--mal:#b42d24;--malf:#fdecea}
*{box-sizing:border-box}html,body{height:100%}
body.ingreso{margin:0;font:15px/1.5 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--tinta);background:var(--fondo)}
.pantalla{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);height:100vh;height:100dvh;min-height:560px}

/* Panel de marca */
.marca{position:relative;overflow:hidden;color:#e8f1ff;padding:clamp(18px,4vh,44px) clamp(28px,5vw,72px);display:flex;flex-direction:column;gap:clamp(8px,2.2vh,24px);
  background:radial-gradient(1200px 600px at 85% -10%,rgba(82,193,199,.28),transparent 60%),
             radial-gradient(900px 500px at -10% 110%,rgba(79,185,232,.22),transparent 60%),
             linear-gradient(160deg,var(--marino) 0%,var(--marino2) 55%,#1b4a8f 100%)}
.marca::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:44px 44px;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.marca>*{position:relative;z-index:1}
.logo-claro{width:clamp(96px,15vh,170px);height:auto}
.eyebrow{margin:0 0 clamp(4px,1vh,10px);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--turquesa);font-weight:700}
.mensaje h1{margin:0;font-size:clamp(26px,min(3.4vw,5.4vh),46px);line-height:1.08;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.mensaje h1 span{background:linear-gradient(90deg,var(--celeste),var(--turquesa));-webkit-background-clip:text;background-clip:text;color:transparent}
.bajada{margin:clamp(6px,1.4vh,14px) 0 0;max-width:58ch;color:#c4d5f0;font-size:clamp(13.5px,1.9vh,15.5px)}

/* Red de procesos con IA */
.red{width:100%;max-width:640px;height:auto;max-height:34vh;margin:0;flex:0 1 auto;min-height:0}
.red .enlaces path{fill:none;stroke:rgba(127,227,236,.22);stroke-width:1.4}
.red .pulsos path{fill:none;stroke:var(--turquesa);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:6 220;stroke-dashoffset:226;
  animation:pulso 3.4s linear infinite;filter:drop-shadow(0 0 4px rgba(82,193,199,.9))}
.red .pulsos path:nth-child(2){animation-delay:.55s}.red .pulsos path:nth-child(3){animation-delay:1.1s}
.red .pulsos path:nth-child(4){animation-delay:1.65s}.red .pulsos path:nth-child(5){animation-delay:2.2s}.red .pulsos path:nth-child(6){animation-delay:2.75s}
.red .cadena{stroke:rgba(255,255,255,.18);stroke-width:3;fill:none}
.red .cadena-flujo{stroke:url(#g-flujo);stroke-width:3;fill:none;stroke-dasharray:40 480;animation:flujo 4.2s linear infinite}
.red .pasos circle{fill:#132c63;stroke:var(--celeste);stroke-width:2.2}
.red .pasos g:nth-child(odd) circle{stroke:var(--turquesa)}
.red text{fill:#cfe0f7;font-size:13px;font-weight:600;text-anchor:middle;font-family:inherit}
.red .ia text{fill:#fff;font-size:17px;font-weight:800;letter-spacing:.04em}
.red .halo{fill:none;stroke:rgba(127,227,236,.55);stroke-width:1.5;transform-origin:0 0;animation:halo 2.8s ease-out infinite}
.red .halo.dos{animation-delay:1.4s}
@keyframes pulso{to{stroke-dashoffset:0}}
@keyframes flujo{from{stroke-dashoffset:520}to{stroke-dashoffset:0}}
@keyframes halo{from{transform:scale(.7);opacity:.9}to{transform:scale(1.6);opacity:0}}

.pilares{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:760px}
.pilares li{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);border-radius:12px;padding:clamp(7px,1.3vh,12px) 14px;backdrop-filter:blur(2px)}
.pilares b{display:block;color:#fff;font-size:14px}.pilares span{display:block;color:#b3c7e6;font-size:12.5px;margin-top:2px}
.pie-marca{margin:auto 0 0;font-size:12px;color:#8fa6cc;letter-spacing:.04em}

/* Acceso */
.acceso{display:flex;flex-direction:column;justify-content:center;justify-content:safe center;align-items:center;padding:clamp(16px,3vh,40px) 24px;gap:clamp(8px,1.6vh,18px);overflow:auto}
.tarjeta-ingreso{width:100%;max-width:400px;background:#fff;border:1px solid var(--linea);border-radius:18px;padding:clamp(20px,3.6vh,34px) 32px clamp(18px,3vh,28px);
  box-shadow:0 24px 60px -28px rgba(15,31,69,.35),0 2px 6px rgba(15,31,69,.05)}
.simbolo{width:clamp(40px,6vh,56px);height:auto;display:block;margin-bottom:clamp(6px,1.4vh,14px)}
.tarjeta-ingreso h2{margin:0;font-size:26px;letter-spacing:-.01em}
.cliente{margin:4px 0 clamp(10px,2.2vh,22px);color:var(--gris)}.cliente b{color:var(--azul)}
label{display:block;font-size:13px;font-weight:600;color:#334058;margin:clamp(8px,1.5vh,14px) 0 6px}
input[type=text],input[type=password],select{width:100%;font:inherit;padding:clamp(8px,1.3vh,11px) 13px;border:1px solid #cfd8e5;border-radius:10px;background:#fbfcfe;color:var(--tinta);transition:border-color .15s,box-shadow .15s}
input:focus{outline:none;border-color:var(--azul2);box-shadow:0 0 0 4px rgba(62,127,208,.16);background:#fff}
.clave{position:relative}.clave input{padding-right:84px}
.ver{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:#eef3fa;color:var(--azul);font-weight:600;font-size:12px;font-family:inherit;padding:6px 10px;border-radius:7px;cursor:pointer}
.ver:focus-visible,.entrar:focus-visible{outline:3px solid rgba(62,127,208,.45);outline-offset:2px}
.entrar{width:100%;margin-top:clamp(12px,2.4vh,22px);border:0;border-radius:10px;padding:12px 16px;font-weight:700;font-size:15px;font-family:inherit;letter-spacing:.01em;color:#fff;cursor:pointer;
  background:linear-gradient(90deg,var(--azul) 0%,var(--azul2) 55%,var(--celeste) 100%);box-shadow:0 10px 24px -12px rgba(43,76,155,.8);transition:transform .1s,filter .15s}
.entrar:hover{filter:brightness(1.06)}.entrar:active{transform:translateY(1px)}
.error{background:var(--malf);color:var(--mal);border:1px solid #f3c4bf;border-radius:10px;padding:10px 12px;font-size:13.5px;margin-bottom:6px}
.nota{margin:clamp(10px,1.8vh,18px) 0 0;font-size:12.5px;color:var(--gris)}
.legal{margin:0;font-size:12px;color:#7b889c;text-align:center}

/* Pantallas bajas (laptops con zoom de Windows): se quita lo accesorio para que todo entre sin desplazarse */
@media (min-width:961px) and (max-height:760px){.pilares{display:none}}
@media (min-width:961px) and (max-height:640px){.bajada,.pie-marca{display:none}.red{max-height:30vh}}
.eyebrow-tarjeta{margin:0 0 4px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--azul2);font-weight:700}
@media (max-width:960px){
  .pantalla{height:auto;min-height:100vh}
  .pantalla{grid-template-columns:1fr}
  .marca{padding:26px 20px 22px;gap:14px}
  .red,.pilares,.pie-marca,.bajada{display:none}
  .logo-claro{width:130px}.mensaje h1{font-size:28px}
  .acceso{padding:24px 16px 32px;justify-content:flex-start}
  .tarjeta-ingreso{padding:26px 22px 22px;border-radius:16px}.simbolo{display:none}
}
@media (prefers-reduced-motion:reduce){.red *{animation:none!important}}

/* Segundo factor (D-37) */
.aviso{background:#e8f1fb;color:#0b2545;border-radius:8px;padding:.6rem .8rem;margin:.4rem 0 .8rem;font-size:.9rem}
.pasos-2fa{margin:.4rem 0 .2rem 1.1rem;padding:0;font-size:.9rem;line-height:1.4}
.qr-2fa{display:flex;justify-content:center;margin:.4rem 0}
.qr-2fa svg{background:#fff;border-radius:8px}
.clave-2fa{font-size:.85rem;margin-bottom:.4rem}
.clave-2fa code{display:block;margin-top:.3rem;font-size:.95rem;letter-spacing:.05em;word-break:break-all}