/*
 * Viumbi Account · ingreso (Mi cuenta, panel y SSO de las marcas).
 * Opcion A aprobada por el dueño: carbon a pantalla completa, una columna
 * centrada. Canon: tonos planos (sin degradados, sombras, bordes ni
 * separadores), Jost + Poppins sin tracking positivo, boton en pildora y
 * movimiento calmado sin rebote. Sin recursos externos.
 */
@font-face{font-family:"Jost";src:url("fonts/Jost-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/Jost-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --charcoal-950:#161616;--charcoal-900:#202020;--charcoal-800:#2B2A28;--charcoal-700:#3A3834;--charcoal-600:#55524C;--charcoal-500:#6B665E;--charcoal-400:#8E887E;
  --bronze-600:#846946;--bronze-500:#997C55;--bronze-400:#B39873;--bronze-300:#CDB899;
  --cream-0:#FFFDFA;--cream-100:#F1E8DD;--cream-200:#E6DACB;
  --red-500:#A8432F;--red-100:#F4DDD5;--green-500:#4F7A4A;--green-100:#E3ECDD;

  --page:var(--charcoal-900);
  --watermark:#262523;
  --field:var(--charcoal-800);
  --field-hover:#312F2C;
  --field-focus:#34322F;

  --font-display:"Jost","Futura","Century Gothic",sans-serif;
  --font-body:"Poppins",system-ui,sans-serif;

  --radius-md:12px;--radius-pill:999px;
  --control-h:52px;
  --focus-ring:0 0 0 3px rgba(153,124,85,.35);
  --danger-ring:0 0 0 1px rgba(168,67,47,.95);

  --ease-standard:cubic-bezier(.2,.7,.2,1);
  --ease-enter:cubic-bezier(0,0,.2,1);
  --ease-emphasized:cubic-bezier(.2,0,0,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-instant:80ms;--dur-fast:120ms;--dur-base:200ms;--dur-moderate:260ms;--dur-slow:320ms;--dur-slower:480ms;--dur-deliberate:640ms;
  --stagger:60ms;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--page)}
body{
  margin:0;min-height:100vh;min-height:100dvh;background:var(--page);color:var(--cream-200);
  font-family:var(--font-body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
::selection{background:rgba(153,124,85,.45);color:var(--cream-0)}
svg.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Escena ────────────────────────────────────────────────────────── */
.stage{
  position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:88px 24px 120px;
}

/* Logotipo abajo, centrado (pedido del dueño). */
.brandbar{position:absolute;bottom:36px;left:0;right:0;z-index:1;display:flex;justify-content:center;pointer-events:none}
.brandmark{display:block;width:176px;height:auto;pointer-events:auto}

/* Marca de agua: el chevron de la marca, tono sobre tono (sin degradados). */
.watermark{
  position:absolute;right:-14vw;bottom:-9vh;width:min(56vw,720px);aspect-ratio:1843/1024;
  background:var(--watermark);
  -webkit-mask:url("img/chevron-triple.png") no-repeat center/contain;
  mask:url("img/chevron-triple.png") no-repeat center/contain;
  pointer-events:none;
  animation:watermark-in 1200ms var(--ease-enter) 120ms both;
}
@keyframes watermark-in{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}

.back{
  position:absolute;top:24px;left:24px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px 0 10px;
  border-radius:var(--radius-pill);background:var(--charcoal-800);color:var(--cream-200);
  font-size:13px;font-weight:500;text-decoration:none;
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.back svg{width:17px;height:17px;flex:none;transition:transform var(--dur-base) var(--ease-standard)}
.back:hover{background:var(--charcoal-700);color:var(--cream-0)}
.back:hover svg{transform:translateX(-3px)}
.back:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ── Columna ───────────────────────────────────────────────────────── */
.column{position:relative;z-index:1;width:100%;max-width:368px;display:flex;flex-direction:column;align-items:center;text-align:center}

/* Icono: el chevron de la marca en tres piezas que se encienden en secuencia. */
.tile{
  width:68px;height:68px;border-radius:20px;background:var(--charcoal-800);
  display:flex;align-items:center;justify-content:center;margin-bottom:28px;
}
.chevron{display:flex;width:40px;height:22px}
.chevron i{
  flex:1;height:100%;background:url("img/chevron-triple.png") no-repeat;background-size:300% 100%;
  opacity:.12;transform:translateX(-4px);
  animation:chev-in var(--dur-slow) var(--ease-enter) forwards,chev-glow 6s var(--ease-inout) 2.2s infinite;
}
.chevron i:nth-child(1){background-position:0 0;animation-delay:.34s,2.2s}
.chevron i:nth-child(2){background-position:50% 0;animation-delay:.42s,2.32s}
.chevron i:nth-child(3){background-position:100% 0;animation-delay:.50s,2.44s}
@keyframes chev-in{to{opacity:1;transform:none}}
@keyframes chev-glow{0%,84%,100%{opacity:1}91%{opacity:.3}}

.title{margin:0;font-family:var(--font-display);font-weight:600;font-size:34px;line-height:1.15;letter-spacing:-.015em;color:var(--cream-100)}
.lead{margin:10px 0 0;color:var(--charcoal-400);font-size:15px}
.lead b{color:var(--cream-200);font-weight:500}

/* ── Avisos (tonos planos sobre el carbon) ─────────────────────────── */
.alert{
  width:100%;display:flex;gap:10px;align-items:flex-start;text-align:left;margin-top:24px;
  padding:13px 14px;border-radius:var(--radius-md);font-size:14px;line-height:1.5;
  animation:rise var(--dur-slow) var(--ease-enter) both;
}
.alert svg{width:19px;height:19px;margin-top:1px}
.alert--danger{background:rgba(168,67,47,.18);color:var(--red-100)}
.alert--danger svg{color:#E08A77}
.alert--success{background:rgba(79,122,74,.2);color:var(--green-100)}
.alert--success svg{color:#9CC291}

/* ── Formulario ────────────────────────────────────────────────────── */
form{width:100%;display:flex;flex-direction:column;gap:12px;margin:32px 0 0}
.field{display:flex;flex-direction:column;gap:8px;text-align:left}
.control{
  display:flex;align-items:center;gap:12px;height:var(--control-h);padding:0 16px;
  background:var(--field);border-radius:var(--radius-md);
  transition:background var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
.control:hover{background:var(--field-hover)}
.control > svg{color:var(--charcoal-400);transition:color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.control input{
  flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;
  font:inherit;font-size:15px;color:var(--cream-100);caret-color:var(--bronze-400);
}
.control input::placeholder{color:var(--charcoal-400);opacity:1}
.control:focus-within{background:var(--field-focus);box-shadow:var(--focus-ring)}
.control:focus-within > svg{color:var(--bronze-400);transform:scale(1.06)}
.control.is-invalid{box-shadow:var(--danger-ring)}
.control.is-invalid:focus-within{box-shadow:var(--danger-ring),0 0 0 4px rgba(168,67,47,.22)}
.control input:-webkit-autofill,
.control input:-webkit-autofill:hover,
.control input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--cream-100);caret-color:var(--bronze-400);
  -webkit-box-shadow:0 0 0 60px var(--field-focus) inset;box-shadow:0 0 0 60px var(--field-focus) inset;
  transition:background-color 9999s;
}

.reveal{
  position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:-8px;
  border:0;border-radius:var(--radius-pill);background:transparent;color:var(--charcoal-400);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.reveal:hover{background:var(--charcoal-700);color:var(--cream-100)}
.reveal:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.reveal svg{position:absolute;width:19px;height:19px;transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.reveal .ic-hide{opacity:0;transform:rotate(-20deg) scale(.8)}
.reveal[aria-pressed="true"] .ic-show{opacity:0;transform:rotate(20deg) scale(.8)}
.reveal[aria-pressed="true"] .ic-hide{opacity:1;transform:none}

.caps{
  display:flex;align-items:center;gap:6px;height:0;overflow:hidden;opacity:0;padding-left:4px;
  font-size:12px;font-weight:500;color:var(--bronze-300);
  transition:height var(--dur-base) var(--ease-standard),opacity var(--dur-base) var(--ease-standard);
}
.caps svg{width:14px;height:14px}
.caps.is-on{height:18px;opacity:1}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:var(--control-h);padding:0 26px;margin-top:8px;
  border:0;border-radius:var(--radius-pill);background:var(--cream-100);color:var(--charcoal-900);
  font:500 16px/1 var(--font-body);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard);
}
.btn:hover{background:var(--cream-0)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn__arrow{transition:transform var(--dur-base) var(--ease-standard)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn__spin{display:none;width:19px;height:19px;animation:spin 900ms linear infinite}
.btn.is-loading{pointer-events:none;background:var(--cream-200)}
.btn.is-loading .btn__arrow{display:none}
.btn.is-loading .btn__spin{display:block}

/* «¿Olvidaste tu clave?»: se despliega la explicacion, sin salir de la pagina. */
.help{width:100%;margin-top:22px;display:flex;flex-direction:column;align-items:center}
.help__toggle{
  border:0;background:transparent;padding:6px 10px;border-radius:var(--radius-pill);
  color:var(--cream-200);font:500 14px/1.4 var(--font-body);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.help__toggle:hover{background:var(--charcoal-800);color:var(--cream-0)}
.help__toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.help__note{
  display:grid;grid-template-rows:0fr;opacity:0;width:100%;
  transition:grid-template-rows var(--dur-moderate) var(--ease-emphasized),opacity var(--dur-base) var(--ease-standard);
}
.help__note > p{overflow:hidden;margin:0;color:var(--charcoal-400);font-size:13px;line-height:1.6}
.help__note > p span{display:block;padding-top:8px}
.help.is-open .help__note{grid-template-rows:1fr;opacity:1}

.fine{display:flex;align-items:center;justify-content:center;gap:8px;margin:28px 0 0;color:var(--charcoal-500);font-size:12px}
.fine svg{width:15px;height:15px;color:var(--bronze-500)}

/* ── Entrada escalonada ────────────────────────────────────────────── */
.rise{animation:rise var(--dur-slower) var(--ease-enter) both;animation-delay:calc(var(--i,0) * var(--stagger) + 120ms)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:480px){
  .stage{padding:80px 20px 112px;align-items:flex-start}
  .brandbar{bottom:32px}
  .brandmark{width:152px}
  .title{font-size:30px}
  .watermark{width:120vw;right:-40vw;bottom:-4vh}
  .back{top:18px;left:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:1ms!important}
  .chevron i{opacity:1;transform:none}
}