/* ============================================
   TIKIGAMES - BASE
   Variables, Reset, Tipografía, Scrollbar
   ============================================ */

/* La misma letra que la app TikiGames (Inter), guardada en la web: sin depender de Google */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fuentes/inter-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../assets/fuentes/inter-italic.woff2') format('woff2'); }

/* ─── Variables ─────────────────────────────── */
:root {
  /* Colores de la app TikiGames (css/base.css de la app). Si cambian allí, se cambian aquí. */
  --bg:          #0a0a0f;
  --bg-2:        #0c0c13;
  --barra:       #0e0e16;
  --surface:     #101018;
  --surface-2:   #171722;
  --surface-3:   #1b1b27;
  --line:        #22222f;
  --line-soft:   #1b1b26;
  --line-2:      #3a3a55;
  --ink:         #eef0f6;
  --ink-dim:     #8b8ca3;
  --ink-faint:   #5c5d73;
  --red:         #ff0050;
  --red-rgb:     255,0,80;
  --red-soft:    rgba(255,0,80,.13);
  --cyan:        #00f0ff;
  --cyan-rgb:    0,240,255;
  --cyan-soft:   rgba(0,240,255,.12);
  --warn:        #ffc13b;
  --r:           10px;
  --suave:       cubic-bezier(.4,0,.2,1);
  --muelle:      cubic-bezier(.2,.9,.25,1.06);
  --display:     'Inter', system-ui, sans-serif;

  /* Los nombres de siempre de la web, apuntando a los colores de la app */
  --bg-primary:      var(--bg);
  --bg-secondary:    var(--surface);
  --bg-card:         var(--surface-2);
  --bg-overlay:      rgba(10,10,15,0.85);
  --red-dark:        #e00047;
  --cyan-dark:       #00c8d6;
  --purple:          #a78bfa;
  --gold:            var(--warn);
  --text-white:      var(--ink);
  --text-gray:       var(--ink-dim);
  --text-dim:        var(--ink-faint);
  --border:          var(--line);
  --border-glow:     rgba(0,240,255,0.3);
  --radius-sm:       8px;
  --radius-md:       10px;
  --radius-lg:       16px;
  --shadow-red:      0 0 16px rgba(255,0,80,.25);
  --shadow-cyan:     0 0 16px rgba(0,240,255,.2);
  --shadow-card:     0 14px 34px rgba(0,0,0,.45);
  --transition:      .15s var(--suave);
  --transition-slow: .35s var(--suave);
}

/* ─── Reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--display);
  background: var(--bg-primary);
  color: var(--text-white);
  overflow-x: hidden;
  line-height: 1.6;
}

a       { text-decoration: none; color: inherit; }
ul      { list-style: none; }
img     { max-width: 100%; display: block; }
button  { cursor: pointer; border: none; outline: none; background: none; }

/* ─── Scrollbar ─────────────────────────────── */
::-webkit-scrollbar       { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9px; }

/* ─── Tipografía ─────────────────────────────── */
.font-display, .font-title { font-family: var(--display); }

/* Títulos como en la app: Inter gruesa y apretadita */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* El fondo de puntitos no existe en la app: fuera */
#particles-canvas { display: none; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

/* ─── Utilidades de layout ───────────────────── */
.section {
  padding: 80px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 0 40px;
}

.stars {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 1px;
}

/* ─── Responsive base ────────────────────────── */
@media (max-width: 768px) {
  .section { padding: 60px 20px; }
}