/* ============================================================
   Candado de la Parte 2 y la Parte 3 (lo que se paga)
   ------------------------------------------------------------
   Mismo sistema que Formula Flip: pantalla completa hasta que
   el comprador pega su clave. La clave la genera n8n cuando
   Hotmart avisa la compra (ver assets/js/candado.js).
   Solo usa los tokens de sistema.css. Desde el 20/10/2026 va como
   la landing de Alvaro: fondo negro y tarjeta blanca.
   ============================================================ */

#gate-licencia{
  display:none;position:fixed;inset:0;z-index:9999;overflow-y:auto;
  background:var(--ink-900);
  padding:24px 16px;
  align-items:center;justify-content:center;
}
html.mif-locked #gate-licencia{display:flex}
html.mif-locked body > *:not(#gate-licencia){display:none !important}

.gate-caja{
  width:100%;max-width:440px;margin:auto;
  background:var(--paper);border:1px solid rgba(203,167,126,.45);border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  padding:32px 28px 24px;
  font-family:var(--f-sans);color:var(--tx);
}

.gate-marca{
  margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tan-deep);
}
.gate-caja h2{
  margin:0 0 8px;font-family:var(--f-display);font-weight:600;
  font-size:28px;line-height:1.18;letter-spacing:-.01em;color:var(--tx);
}
.gate-sub{margin:0 0 22px;font-size:15px;line-height:1.5;color:var(--tx-soft)}

.gate-form{display:flex;flex-direction:column;gap:10px}
.gate-etiqueta{font-size:13px;font-weight:600;color:var(--tx-soft)}
.gate-campo{
  min-height:52px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line-strong);background:var(--paper);color:var(--tx);
  font-family:var(--f-sans);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:.08em;text-align:center;
}
.gate-campo::placeholder{color:var(--tx-faint);letter-spacing:.06em}
.gate-campo:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
.gate-form .boton{width:100%;min-width:0;min-height:56px}
.gate-form .boton:disabled{opacity:.6;cursor:default;transform:none}

.gate-aviso{min-height:20px;margin:10px 0 0;font-size:14px;line-height:1.45}
.gate-aviso:empty{margin:0;min-height:0}
.gate-aviso.error{color:var(--no);font-weight:600}
.gate-aviso.ok{color:var(--ok);font-weight:600}

.gate-ayuda{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--tx-soft)}

/* "¿Perdiste tu clave?": un boton que se ve como enlace, porque
   abre algo en la misma pantalla y no lleva a otra pagina */
.gate-enlace{
  display:inline-block;min-height:36px;padding:8px 0;margin-top:6px;
  background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:600;
  color:var(--tan-deep);text-decoration:underline;text-underline-offset:3px;
}
.gate-enlace:hover{color:var(--tx)}
.gate-enlace:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}

.gate-recuperar{
  margin-top:8px;padding:16px;border-radius:10px;
  background:var(--paper-2);border:1px solid var(--line);
}
.gate-recuperar[hidden]{display:none}
.gate-recuperar .gate-campo{font-family:var(--f-sans);font-size:16px;letter-spacing:0;text-align:left}
.gate-recuperar .boton{background:var(--paper);color:var(--tx);border:1px solid var(--line-strong);box-shadow:none}
.gate-recuperar .boton:hover{background:var(--paper-3);color:var(--tx)}

.gate-pie{
  margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.5;color:var(--tx-soft);
}
.gate-pie a{color:var(--tan-deep);font-weight:600}
.gate-firmas{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--tx-faint)}

@media (max-width:560px){
  .gate-caja{padding:24px 18px 18px}
  .gate-caja h2{font-size:25px}
}