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

html {
  scroll-behavior: smooth;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  /* Evita el salto horizontal al abrir modales (reserva espacio de scrollbar) */
  scrollbar-gutter: stable;
}

body {
  background-color: #f8fafc;
  color: #1e293b;
}

/* Bloqueo de scroll sin desplazar el layout */
body.modal-scroll-lock {
  overflow: hidden;
  touch-action: none;
}

body.modal-scroll-lock #app-header {
  padding-right: var(--scrollbar-compensation, 0);
}

.font-display {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

::selection {
  background-color: #f3a946;
  color: #fff;
}

/* Tab transitions */
.tab-panel {
  display: none;
  animation: fadeInUp 0.35s ease-in-out;
}

.tab-panel.active {
  display: block;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Soporte para scrollbar en modales */
.modal-scroll-lock {
  padding-right: var(--scrollbar-compensation, 0px);
}

/* Parallax images */
.parallax-img {
  position: absolute;
  left: 0;
  right: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}