/* ============================================================
   HOK NEXUS — tokens.css
   Fuente única de color, tipografía, spacing y estados accesibles.
   Conserva la marca (navy/cian/dorado, Cinzel/Inter); solo corrige
   contraste (WCAG AA), foco visible, botones y objetivos táctiles.
   ============================================================ */
:root{
  --bg:#06091a; --surface:#0c1430; --surface-2:#0a1126;
  --accent:#00CFFF; --accent-hover:#33D8FF; --gold:#D4AF37;
  --text:#E6E9F2;        /* cuerpo  ~14:1 AAA */
  --text-muted:#8A93A8;  /* secundario 6.4:1 AA — sustituye al blanco rgba que fallaba */
  --on-accent:#02060F;
  --danger:#FF6B6B; --success:#4ADE80;
  --line:rgba(255,255,255,.08);
  --font-display:'Cinzel','Times New Roman',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;
  --radius:10px; --focus-ring:0 0 0 3px rgba(0,207,255,.40);
}

/* ---- Foco visible accesible (WCAG 2.4.7) en todo lo interactivo ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible,
[role="button"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ---- Sistema de botones reutilizable (2 variantes) ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:12px 24px;            /* objetivo táctil >=44px */
  font-family:var(--font-body); font-size:.875rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; text-decoration:none;
  cursor:pointer; border:none; border-radius:0;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition:background .2s, transform .15s;
}
.btn--primary{ background:var(--accent); color:var(--on-accent); }
.btn--primary:hover{ background:var(--accent-hover); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--accent);
  border:1px solid var(--accent); clip-path:none; }
.btn--ghost:hover{ background:rgba(0,207,255,.12); }

/* ---- Fila de CTAs del hero ---- */
.hero-cta{ display:flex; gap:var(--sp-4); justify-content:center; flex-wrap:wrap;
  margin-top:var(--sp-5); }
.hero-cta .btn{ font-size:1.05rem; padding:18px 40px; min-height:58px; letter-spacing:1.5px; }
@media (max-width:640px){
  .hero-cta{ flex-direction:column; width:min(340px,100%); margin-inline:auto; }
  .hero-cta .btn{ font-size:1rem; padding:16px 28px; }
}
/* Índice de secciones del hero: separado y debajo de las CTAs */
.hero-index{ margin-top:42px; }

@media (prefers-reduced-motion:reduce){
  .btn{ transition:none; }
}

/* ── Ocultar "Explora Creadores" del menú (sección en construcción) ── */
.nav-soon { display: none !important; }

/* ── Footer global ── */
.site-footer { margin-top: 64px; border-top: 1px solid rgba(0,207,255,0.14); background: rgba(4,6,16,0.92); padding: 40px 24px 26px; position: relative; z-index: 2; }
.sf-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 30px 48px; justify-content: space-between; align-items: flex-start; }
.sf-col-title { font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: #00CFFF; margin: 0 0 12px; }
.sf-logo { font-family: 'Cinzel', serif; font-size: 1.15rem; color: #eaf6ff; letter-spacing: 1px; }
.sf-logo span { color: #00CFFF; }
.sf-tagline { color: #8398a6; font-size: 0.82rem; margin-top: 8px; max-width: 300px; line-height: 1.6; }
.sf-links, .sf-social { display: flex; flex-direction: column; gap: 9px; }
.sf-links a, .sf-social a { color: #b9c9d6; text-decoration: none; font-size: 0.85rem; transition: color .15s; }
.sf-links a:hover, .sf-social a:hover { color: #00CFFF; }
.sf-legal { max-width: 1180px; margin: 28px auto 0; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 18px; }
.sf-legal p { color: #6f8391; font-size: 0.72rem; line-height: 1.65; margin: 0 0 8px; }
@media (max-width: 640px){ .sf-inner { flex-direction: column; gap: 24px; } }

/* ── Páginas legales / de texto ── */
.legal-wrap { max-width: 820px; margin: 0 auto; padding: 120px 24px 40px; }
.legal-wrap h1 { font-family: 'Cinzel', serif; font-size: 2rem; color: #eaf6ff; margin: 0 0 6px; }
.legal-wrap .legal-meta { color: #6f8391; font-size: 0.8rem; margin-bottom: 34px; }
.legal-wrap h2 { font-family: 'Cinzel', serif; font-size: 1.15rem; color: #00CFFF; margin: 34px 0 12px; }
.legal-wrap h3 { font-size: 1rem; color: #d4af37; margin: 22px 0 8px; }
.legal-wrap p, .legal-wrap li { color: #c4d2dc; font-size: 0.94rem; line-height: 1.75; }
.legal-wrap ul { padding-left: 22px; margin: 10px 0; }
.legal-wrap li { margin-bottom: 7px; }
.legal-wrap a { color: #00CFFF; }
.legal-card { background: rgba(10,14,32,0.6); border: 1px solid rgba(0,207,255,0.16); border-radius: 10px; padding: 22px 26px; margin: 18px 0; }