/* ════════════════════════════════════════════════
   KYSHA · GATE + AUTH + PERSONAL
   Landing (2 botones), login por código, personal.
   Estética: mono negro + acento púrpura (#a855f7)
   ════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  --black:      #080808;
  --black-2:    #0f0f0f;
  --black-3:    #151515;
  --black-4:    #1c1c1c;
  --white:      #f5f5f5;
  --white-dim:  rgba(245,245,245,0.6);
  --white-faint:rgba(245,245,245,0.08);
  --purple:     #a855f7;
  --purple-2:   #7e22ce;
  --purple-dim: rgba(168,85,247,0.22);
  --purple-glow:rgba(168,85,247,0.12);
  --green:      #4ade80;
  --green-2:    #16a34a;
  --green-dim:  rgba(74,222,128,0.22);
  --green-glow: rgba(74,222,128,0.12);
  --mono:       'DM Mono', monospace;
  --sans:       'Syne', sans-serif;
  --radius:     16px;
  --radius-sm:  10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  overflow-x: hidden;
  min-height: 100vh;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* ─── Fondo ─── */
.bg-grid {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(168,85,247,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none; z-index: 0;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
.bg-orb {
  position: fixed; border-radius: 50%;
  filter: blur(110px);
  pointer-events: none; z-index: 0;
  animation: orbFloat 9s ease-in-out infinite;
}
.orb-1 { width: 520px; height: 520px; background: rgba(168,85,247,0.12); top: -180px; right: -120px; }
.orb-2 { width: 420px; height: 420px; background: rgba(168,85,247,0.05); bottom: -120px; left: -120px; animation-delay: -3s; }
.orb-3 { width: 300px; height: 300px; background: rgba(255,255,255,0.03); top: 40%; left: 40%; animation-delay: -5s; }

@keyframes orbFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(30px,-20px) scale(1.06); }
}

.gate-kanji {
  position: fixed; right: -40px; bottom: -60px;
  font-family: var(--sans); font-weight: 800;
  font-size: 28rem; color: rgba(168,85,247,0.04);
  pointer-events: none; z-index: 0; user-select: none;
}

/* ════════════════════════════
   GATE (landing con 2 botones)
   ════════════════════════════ */
.gate {
  position: relative; z-index: 1;
  min-height: 100vh;
  padding: 32px 24px 80px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
}

.gate-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 4px;
  color: var(--purple);
}
.eyebrow-line {
  width: 28px; height: 1px; background: var(--purple-dim);
}
.eyebrow-text { opacity: 0.9; }

.gate-title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(4rem, 12vw, 9rem);
  line-height: 0.9; letter-spacing: -0.04em;
  text-align: center;
}
.gate-title .t-main {
  display: block; position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #9b9b9b 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gate-title .t-dot {
  display: block;
  font-size: 0.32em; letter-spacing: 0.2em;
  font-weight: 400; font-family: var(--mono);
  color: var(--purple); margin-top: 8px;
}

.gate-sub {
  font-family: var(--mono);
  color: var(--white-dim);
  font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase;
}

.gate-buttons {
  width: 100%;
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

/* ░ Botón Kysha (compacto, privado) ░ */
.btn-kysha {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 360px; min-width: 0;
  padding: 36px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at top right, rgba(168,85,247,0.28), transparent 60%),
    linear-gradient(135deg, #1a0f2a 0%, #0f0a1a 60%, #080808 100%);
  border: 1px solid rgba(168,85,247,0.35);
  box-shadow:
    0 0 0 1px rgba(168,85,247,0.08) inset,
    0 20px 60px -20px rgba(168,85,247,0.45),
    0 0 80px -20px rgba(168,85,247,0.35);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.btn-kysha:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(168,85,247,0.6);
  box-shadow:
    0 0 0 1px rgba(168,85,247,0.18) inset,
    0 30px 80px -20px rgba(168,85,247,0.6),
    0 0 120px -20px rgba(168,85,247,0.55);
}
.btn-kysha .bk-shine {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .9s ease;
  pointer-events: none;
}
.btn-kysha:hover .bk-shine { transform: translateX(100%); }

.btn-kysha .bk-kanji {
  position: absolute;
  right: 14px; bottom: -20px;
  font-size: 9rem; font-weight: 800;
  color: rgba(168,85,247,0.1);
  pointer-events: none; line-height: 1;
  transition: color .35s ease, transform .35s ease;
}
.btn-kysha:hover .bk-kanji {
  color: rgba(168,85,247,0.16);
  transform: translateY(-6px);
}

.bk-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 10px;
}
.bk-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 6px; color: var(--purple);
}
.bk-title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--white);
}
.bk-sub {
  font-family: var(--mono); font-size: 12px;
  color: var(--white-dim); letter-spacing: 1px;
}

.bk-arrow {
  position: relative; z-index: 2;
  align-self: flex-end;
  font-family: var(--sans); font-size: 26px;
  color: var(--purple);
  transition: transform .3s ease;
}
.btn-kysha:hover .bk-arrow { transform: translateX(6px); }

/* ░ Botón Servidor (grande, verde) ░ */
.btn-servidor {
  position: relative; overflow: hidden;
  display: flex; align-items: stretch; justify-content: space-between;
  min-height: 360px; min-width: 0;
  padding: 36px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at top right, rgba(74,222,128,0.28), transparent 60%),
    linear-gradient(135deg, #0a1f10 0%, #081508 60%, #080808 100%);
  border: 1px solid rgba(74,222,128,0.35);
  box-shadow:
    0 0 0 1px rgba(74,222,128,0.08) inset,
    0 20px 60px -20px rgba(74,222,128,0.45),
    0 0 80px -20px rgba(74,222,128,0.35);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.btn-servidor::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .9s ease;
  pointer-events: none;
}
.btn-servidor:hover::before { transform: translateX(100%); }
.btn-servidor::after {
  content: '#';
  position: absolute;
  right: 8px; bottom: -40px;
  font-size: 16rem; font-weight: 800;
  font-family: var(--sans);
  color: rgba(74,222,128,0.07);
  pointer-events: none; line-height: 1;
  transition: color .35s ease, transform .35s ease;
}
.btn-servidor:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(74,222,128,0.6);
  box-shadow:
    0 0 0 1px rgba(74,222,128,0.18) inset,
    0 30px 80px -20px rgba(74,222,128,0.6),
    0 0 120px -20px rgba(74,222,128,0.55);
}
.btn-servidor:hover::after {
  color: rgba(74,222,128,0.13);
  transform: translateY(-6px);
}
.bs-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 10px;
  align-self: flex-end;
  min-width: 0;
}
.bs-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 6px; color: var(--green);
}
.bs-title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--white);
}
.bs-sub {
  font-family: var(--mono); font-size: 12px;
  color: var(--white-dim); letter-spacing: 1px;
}
.bs-arrow {
  position: relative; z-index: 2;
  align-self: flex-end;
  font-family: var(--sans); font-size: 40px;
  color: var(--green);
  transition: transform .3s ease;
}
.btn-servidor:hover .bs-arrow { transform: translateX(6px); }

.gate-footer {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 2px; color: var(--white-dim);
  display: flex; gap: 10px;
}
.footer-link { transition: color .2s ease; }
.footer-link:hover { color: var(--purple); }

.gate-bottom {
  position: relative; z-index: 1;
  text-align: center;
  padding: 24px;
  font-family: var(--mono); font-size: 11px;
  color: var(--white-dim); letter-spacing: 2px;
}
.gate-symbol {
  color: var(--purple); margin-right: 10px;
}

/* ════════════════════════════
   AUTH (pantalla de código)
   ════════════════════════════ */
.auth {
  position: relative; z-index: 1;
  min-height: 100vh;
  padding: 40px 24px;
  display: flex; align-items: center; justify-content: center;
}
.auth-back {
  position: absolute; top: 24px; left: 24px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 2px; color: var(--white-dim);
  transition: color .2s ease;
}
.auth-back:hover { color: var(--purple); }

.auth-card {
  width: 100%; max-width: 480px;
  padding: 40px 36px;
  background: linear-gradient(180deg, rgba(21,21,21,0.95) 0%, rgba(15,15,15,0.95) 100%);
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  box-shadow: 0 40px 80px -20px rgba(168,85,247,0.25);
}

.auth-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 4px;
  color: var(--purple); margin-bottom: 18px;
}
.auth-eyebrow .eyebrow-line {
  flex: 1; height: 1px; background: var(--purple-dim);
}
.auth-title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1; letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.auth-title em {
  color: var(--purple); font-style: normal;
}
.auth-sub {
  font-family: var(--mono); font-size: 12px;
  color: var(--white-dim); line-height: 1.7;
  margin-bottom: 28px;
}

.auth-primary {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 20px;
  border: 1px solid var(--purple);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--purple) 0%, var(--purple-2) 100%);
  color: #fff; font-family: var(--sans); font-weight: 700;
  font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.auth-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -10px rgba(168,85,247,0.6);
}
.auth-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-primary .ap-arrow { transition: transform .2s ease; }
.auth-primary:hover:not(:disabled) .ap-arrow { transform: translateX(4px); }

.code-area { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.code-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 3px; color: var(--white-dim);
  text-transform: uppercase;
}
.code-input {
  width: 100%;
  padding: 18px 20px;
  background: var(--black);
  border: 1px solid var(--white-faint);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--mono); font-size: 28px;
  letter-spacing: 12px; text-align: center;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.code-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-glow);
}
.code-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 11px;
  color: var(--white-dim); letter-spacing: 1px;
}
.code-timer { color: var(--purple); }
.code-resend {
  background: none; border: none;
  color: var(--white-dim);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 1px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
  transition: color .2s ease, opacity .2s ease;
}
.code-resend:hover:not(:disabled) { color: var(--purple); }
.code-resend:disabled { opacity: 0.4; cursor: not-allowed; }

.auth-verify { margin-top: 6px; }

.auth-status {
  margin-top: 16px;
  font-family: var(--mono); font-size: 12px;
  min-height: 1.4em; letter-spacing: 1px;
}
.auth-status.ok    { color: #34d399; }
.auth-status.err   { color: #f87171; }
.auth-status.info  { color: var(--white-dim); }

/* ════════════════════════════
   PERSONAL
   ════════════════════════════ */
.p-nav {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--white-faint);
  backdrop-filter: blur(8px);
}
.p-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 800;
  letter-spacing: 2px;
}
.p-logo-sym { color: var(--purple); }
.p-logout {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--white-faint);
  color: var(--white);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.p-logout:hover { border-color: var(--purple); color: var(--purple); }

.personal {
  position: relative; z-index: 1;
  padding: 80px 24px;
  display: flex; align-items: center; justify-content: center;
}
.personal-card {
  width: 100%; max-width: 640px;
  padding: 48px 40px;
  background: linear-gradient(180deg, rgba(21,21,21,0.95) 0%, rgba(15,15,15,0.95) 100%);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: var(--radius);
  box-shadow: 0 40px 80px -20px rgba(168,85,247,0.3);
}
.personal-title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1; letter-spacing: -0.03em;
  margin: 16px 0 14px;
}
.personal-title em { color: var(--purple); font-style: normal; }
.personal-sub {
  font-family: var(--mono); font-size: 13px;
  color: var(--white-dim); line-height: 1.7;
  margin-bottom: 28px;
}

.personal-links { display: flex; flex-direction: column; gap: 12px; }
.p-link {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center; gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--white-faint);
  border-radius: var(--radius-sm);
  background: var(--black-3);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.p-link:hover {
  border-color: var(--purple);
  background: var(--black-4);
  transform: translateX(4px);
}
.p-link-title {
  font-family: var(--sans); font-weight: 600;
  font-size: 15px;
}
.p-link-sub {
  font-family: var(--mono); font-size: 11px;
  color: var(--white-dim); letter-spacing: 1px;
}
.p-link-arrow { color: var(--purple); font-size: 20px; }

.personal-hint {
  margin-top: 24px;
  font-family: var(--mono); font-size: 11px;
  color: var(--white-dim); letter-spacing: 1px;
}

/* ════════════════════════════
   RESPONSIVE
   ════════════════════════════ */
@media (max-width: 720px) {
  .gate-buttons { grid-template-columns: 1fr; }
  .btn-kysha, .btn-servidor { min-height: 240px; }
  .btn-kysha .bk-kanji { font-size: 7rem; }
  .btn-servidor::after { font-size: 10rem; }
  .auth-card { padding: 32px 24px; }
  .personal-card { padding: 36px 24px; }
}