/* base.css — reset, fuente, escenario y chrome de navegación */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
}

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

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* Fondo ambiental con halos sutiles */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(10, 132, 255, 0.16), transparent 60%),
    radial-gradient(900px 700px at 8% 108%, rgba(191, 90, 242, 0.10), transparent 60%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0) 70%);
  z-index: 0;
}

/* Viewport que centra el escenario y aplica letterboxing */
#viewport {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
}

/* Escenario de tamaño fijo (1280x720); engine.js lo escala con transform */
#stage {
  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: center center;
  font-size: 16px;
}

/* ---- Chrome de navegación ------------------------------------------------- */

/* Barra de progreso (arriba) */
#progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
  box-shadow: 0 0 12px rgba(10, 132, 255, 0.6);
  z-index: 50;
  transition: width 0.45s var(--ease);
}

/* Botones prev/next en esquinas inferiores */
.nav-btn {
  position: fixed;
  bottom: 26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--stroke-2);
  background: rgba(20, 20, 30, 0.55);
  backdrop-filter: blur(12px);
  color: var(--fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 50;
  display: grid;
  place-items: center;
  transition: transform 0.2s var(--ease), background 0.2s, opacity 0.2s, border-color 0.2s;
}
.nav-btn:hover:not(:disabled) { background: rgba(10, 132, 255, 0.28); border-color: var(--blue); transform: scale(1.08); }
.nav-btn:active:not(:disabled) { transform: scale(0.96); }
.nav-btn:disabled { opacity: 0.25; cursor: default; }
#prev { left: 26px; }
#next { right: 26px; }

/* Contador / índice de diapositiva */
#counter {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  background: rgba(20, 20, 30, 0.5);
  backdrop-filter: blur(12px);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
#counter b { color: var(--fg); font-weight: 600; }