/* FIRST · acceso al portal (login). 27-sep-2026.
   Panel de marca oscuro con la tarjeta dibujada en código; formulario en blanco. */
:root{--red:#E6020D;--red-d:#B00009;--wine:#6E0006;--ink:#0B0B0F;--gray:#5E5E6C;--mist:#F5F5F7;--line:#E7E7EC}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff;min-height:100vh;-webkit-font-smoothing:antialiased}
.wrap{display:flex;min-height:100vh}

/* panel de marca */
.brand{flex:1.05;position:relative;overflow:hidden;color:#fff;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  background:radial-gradient(720px 520px at 100% 0%,rgba(230,2,13,.55),transparent 62%),radial-gradient(640px 520px at 0% 110%,rgba(110,0,6,.9),transparent 65%),linear-gradient(160deg,#16161C 0%,var(--ink) 70%)}
.brand::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 70% 40%,#000,transparent 75%)}
.brand>*{position:relative;z-index:1}
.brand .top img{height:30px;width:auto;display:block}
.brand h1{font-size:46px;font-weight:700;line-height:1.05;letter-spacing:-.03em}
.brand h1 .hl{color:#FF4450}
.brand .lead{margin-top:16px;font-size:16px;color:rgba(255,255,255,.72);max-width:28em;line-height:1.7}
.feats{list-style:none;display:grid;gap:12px}
.feats li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:rgba(255,255,255,.86)}
.feats .ck{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(230,2,13,.9);display:grid;place-items:center;box-shadow:0 0 0 5px rgba(230,2,13,.18)}
.feats .ck svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* la tarjeta, dibujada en código */
.tc-stage{margin-top:36px;perspective:1400px}
.tc{--w:360px;position:relative;width:var(--w);aspect-ratio:1.586;border-radius:18px;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,#ff3a44 0%,rgba(255,58,68,0) 50%),radial-gradient(80% 80% at 0% 100%,#5c0005 0%,rgba(92,0,5,0) 60%),linear-gradient(135deg,#ff1c28 0%,var(--red) 38%,#9a0008 78%,#5c0005 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 40px 70px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);
  transform:rotateX(8deg) rotateY(-14deg) rotate(-5deg);animation:tcf 8s ease-in-out infinite}
@keyframes tcf{0%,100%{transform:rotateX(8deg) rotateY(-14deg) rotate(-5deg)}50%{transform:rotateX(-2deg) rotateY(8deg) rotate(-3deg) translateY(-10px)}}
.tc__wm{position:absolute;right:-12%;bottom:-26%;width:78%;opacity:.1}
.tc__holo{position:absolute;inset:0;mix-blend-mode:color-dodge;opacity:.5;background:linear-gradient(115deg,transparent 35%,rgba(255,214,222,.45) 45%,rgba(190,220,255,.35) 50%,transparent 60%);background-size:260% 260%;animation:holo 7s ease-in-out infinite}
@keyframes holo{0%,100%{background-position:100% 100%}50%{background-position:0 0}}
.tc__logo{position:absolute;left:7.5%;top:11%;width:27%}
.tc__chip{position:absolute;left:7.5%;top:40%;width:12.5%;aspect-ratio:1.3;border-radius:14%;display:grid;grid-template-columns:1fr 1fr;gap:1.5px;background:linear-gradient(135deg,#f7e3a6,#d9b664 45%,#b8903f 70%,#e9cf86);box-shadow:inset 0 0 0 1px rgba(120,86,30,.45)}
.tc__chip i{border:1px solid rgba(120,86,30,.35);border-radius:3px}
.tc__num{position:absolute;left:7.5%;bottom:16%;font-size:15px;font-weight:600;letter-spacing:.14em}
.tc__visa{position:absolute;right:7%;bottom:12%;font:italic 800 28px/1 Poppins,sans-serif}
@media (prefers-reduced-motion:reduce){.tc,.tc__holo{animation:none}}

/* formulario */
.formside{flex:.95;display:flex;align-items:center;justify-content:center;padding:40px 28px;background:#fff}
.box{width:100%;max-width:400px}
.box .logo{display:block;height:28px;width:auto;margin-bottom:34px}
.box h2{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.box .sub{color:var(--gray);font-size:15px;margin:8px 0 28px}
label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:18px 0 8px}
input{width:100%;padding:15px 16px 15px 48px;border:1.5px solid var(--line);border-radius:14px;font:500 16px Poppins,sans-serif;color:var(--ink);background:#fff no-repeat 16px center/20px 20px;transition:border-color .15s,box-shadow .15s}
input::placeholder{color:#A0A0AC;font-weight:400}
input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(230,2,13,.12)}
input[type=email]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5E6C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E")}
input[type=password]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5E6C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
button{width:100%;margin-top:26px;padding:16px;border:0;border-radius:999px;background:var(--red);color:#fff;font:600 16px Poppins,sans-serif;cursor:pointer;box-shadow:0 14px 28px -12px rgba(230,2,13,.75);transition:transform .15s,background .15s}
button:hover{background:var(--red-d);transform:translateY(-1px)}
button:active{transform:scale(.98)}
.forgot{text-align:right;margin-top:10px}
.forgot button{width:auto;margin:0;padding:0;background:none;box-shadow:none;color:var(--red);font-size:13.5px;font-weight:600}
.forgot button:hover{background:none;transform:none;text-decoration:underline}
.divider{display:flex;align-items:center;gap:12px;margin:24px 0 6px;color:#A0A0AC;font-size:12.5px;font-weight:600}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.gbtn{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border:1.5px solid var(--line);border-radius:999px;color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;transition:border-color .15s}
.gbtn:hover{border-color:var(--ink)}
.gbtn svg{width:19px;height:19px}
.err{background:#FFF1F2;color:#A1000A;padding:13px 14px;border-radius:14px;font-size:14px;margin-bottom:10px;line-height:1.5}
.note{background:#EAF7F1;color:#0B6B4B;padding:13px 14px;border-radius:14px;font-size:14px;margin-bottom:10px;line-height:1.5}
.secure{text-align:center;color:var(--gray);font-size:12.5px;margin-top:22px;line-height:1.6}
.secure a{color:var(--ink);font-weight:600}
.secure.alta{margin-top:14px;font-size:14px}
.secure.alta a{color:var(--red);text-decoration:none}

#fpModal{position:fixed;inset:0;z-index:100;background:rgba(11,11,15,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px}
#fpModal.on{display:flex}
#fpModal .m{width:100%;max-width:400px;background:#fff;border-radius:24px;padding:30px 26px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
#fpModal h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
#fpModal p{color:var(--gray);font-size:14.5px;margin:8px 0 12px;line-height:1.6}
#fpModal .row{display:flex;gap:10px;margin-top:20px}
#fpModal .row button{margin:0}
#fpModal .cancel{flex:0 0 auto;width:auto;padding:15px 20px;background:var(--mist);color:var(--ink);box-shadow:none}
#fpModal .cancel:hover{background:#ECECF0}

#splash{position:fixed;inset:0;z-index:9999;background:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px}
#splash.on{display:flex}
#splash .ring{width:72px;height:72px;animation:spin 1s cubic-bezier(.6,.05,.4,.95) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#splash .stxt{font-weight:800;font-size:20px;letter-spacing:-.02em}
#splash .ssub{color:#A0A0AC;font-size:11px;letter-spacing:4px;margin-top:-6px}

/* tablet y móvil */
@media(max-width:1000px){ .brand{padding:40px 36px} .brand h1{font-size:38px} .tc{--w:300px} }
@media(max-width:860px){
  .wrap{flex-direction:column}
  .brand{flex:none;padding:28px 22px 44px;gap:18px}
  .brand h1{font-size:30px}
  .brand .lead{font-size:14.5px;margin-top:10px}
  .tc-stage{margin-top:22px;display:flex;justify-content:center}
  .tc{--w:min(280px,76vw)}
  .tc__num{font-size:12px}.tc__visa{font-size:22px}
  .feats{display:none}
  .formside{flex:none;padding:30px 22px 44px;border-radius:26px 26px 0 0;margin-top:-22px;position:relative;z-index:2}
  .box .logo{display:none}
  .box h2{font-size:26px}
}

/* PC: la pantalla es fija, del alto exacto de la ventana. Nada se mueve al
   hacer scroll; el contenido se escala con el alto para que siempre quepa. */
@media(min-width:861px){
  html,body{height:100%;overflow:hidden}
  .wrap{height:100vh;height:100dvh;min-height:0}
  .brand{padding:clamp(22px,5vh,48px) 56px;gap:clamp(10px,2.6vh,28px);justify-content:space-between}
  .brand .top img{height:clamp(22px,3.4vh,30px)}
  .brand h1{font-size:clamp(30px,5.6vh,46px)}
  .brand .lead{font-size:clamp(13.5px,1.9vh,16px);margin-top:clamp(8px,1.6vh,16px)}
  .tc-stage{margin-top:clamp(12px,3.4vh,36px)}
  .tc{--w:clamp(220px,40vh,360px)}
  .tc__num{font-size:clamp(11px,1.7vh,15px)}.tc__visa{font-size:clamp(20px,3.1vh,28px)}
  .feats{gap:clamp(6px,1.3vh,12px)}
  .feats li{font-size:clamp(12.5px,1.7vh,14.5px)}
  .formside{height:100%;overflow-y:auto;padding:clamp(20px,4vh,40px) 28px}
  .box .logo{margin-bottom:clamp(16px,3.6vh,34px)}
  .box .sub{margin:8px 0 clamp(14px,2.8vh,28px)}
  label{margin:clamp(10px,1.9vh,18px) 0 8px}
  button{margin-top:clamp(16px,2.8vh,26px)}
}