/* welcome.css: pantalla de bienvenida y acceso con codigo */

.welcome-page { display: flex; flex-direction: column; min-height: 100vh; }

.wl-header {
  display: flex; align-items: center; gap: 12px;
  width: min(1180px, 100%); margin: 0 auto; padding: 22px 16px 0;
}

.wl-main {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start;
  width: min(1180px, 100%); margin: 0 auto; padding: 48px 16px 40px;
}

.wl-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px;
  font: 500 12.5px/1 var(--if-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--if-brand-primary);
}
.wl-hero h1 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.035em; max-width: 15ch; }
.wl-lead { margin: 20px 0 32px; max-width: 58ch; font-size: 17px; color: var(--if-text); }

.wl-steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; max-width: 640px; }
.wl-steps li { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 16px 52px 16px 16px; }
.wl-steps h3 { font-size: 16px; margin-bottom: 3px; }
.wl-steps p { margin: 0; font-size: 14px; color: var(--if-text-muted); }
.wl-step-num {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font: 600 14px/1 var(--if-mono); color: var(--if-brand-primary);
  border: 1px solid color-mix(in srgb, var(--if-brand-primary) 40%, transparent); background: var(--if-soft-primary);
}
.wl-step-icon { position: absolute; right: 18px; top: 18px; font-size: 20px; color: var(--if-text-faint); }

.wl-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.wl-benefits li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--if-text); }
.wl-benefits i { color: var(--if-brand-primary); }

/* ------------------------------------------------------------ Acceso */
.wl-access {
  position: sticky; top: 24px; padding: 30px 26px 24px; text-align: center;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--if-panel), var(--if-panel)) padding-box,
    linear-gradient(160deg, color-mix(in srgb, var(--if-brand-primary) 55%, transparent), rgba(255,255,255,.06) 40%, color-mix(in srgb, var(--if-brand-secondary) 50%, transparent)) border-box;
  box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--if-brand-primary) 40%, transparent);
}
.wl-access-icon {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--if-brand-primary) 40%, transparent); background: var(--if-soft-primary);
}
.wl-access-icon i { font-size: 23px; color: var(--if-brand-primary); }
.wl-access h2 { font-size: 22px; }
.wl-access-sub { margin: 6px 0 22px; font-size: 14px; color: var(--if-text-muted); }

.wl-form { display: flex; flex-direction: column; gap: 14px; }
.wl-code { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wl-digit {
  width: 100%; height: 64px; border-radius: 12px; text-align: center;
  border: 1px solid var(--if-border-strong); background: rgba(255, 255, 255, 0.03);
  color: var(--if-text-strong); font: 600 28px/1 var(--if-mono); caret-color: var(--if-brand-primary);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wl-digit:focus { outline: none; border-color: var(--if-brand-primary); box-shadow: var(--if-focus-ring); background: color-mix(in srgb, var(--if-brand-primary) 6%, transparent); }
.wl-digit.is-filled { border-color: color-mix(in srgb, var(--if-brand-primary) 45%, transparent); }
.wl-code.is-error .wl-digit { border-color: color-mix(in srgb, var(--if-danger) 60%, transparent); }
.wl-code.is-shake { animation: wl-shake .35s ease; }
@keyframes wl-shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.wl-form .notice { text-align: left; }

.wl-continue { display: flex; flex-direction: column; gap: 12px; text-align: left; }

.wl-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--if-text-faint); font-size: 13px; }
.wl-divider::before, .wl-divider::after { content: ""; flex: 1; height: 1px; background: var(--if-border); }
.wl-fine { margin: 14px 0 0; font-size: 12.5px; color: var(--if-text-faint); }

.wl-footer { padding: 24px 16px 30px; text-align: center; font-size: 12.5px; color: var(--if-text-faint); }

@media (max-width: 960px) {
  .wl-main { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
  .wl-access { position: static; order: -1; }
  .wl-hero h1 { max-width: none; }
}
@media (max-width: 520px) {
  .wl-access { padding: 24px 18px 20px; }
  .wl-digit { height: 58px; font-size: 26px; }
  .wl-steps li { padding-right: 16px; }
  .wl-step-icon { display: none; }
}