/* Reset + tipografía base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-soft);
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Guard: nada debe empujar el ancho de la página (las grillas anchas scrollean dentro de su wrap). */
body { overflow-x: hidden; }

button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

.mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; }
.tabular { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 { letter-spacing: -0.035em; font-weight: 700; line-height: 1.15; }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 1px solid var(--bg-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* Utilidades */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Animaciones globales */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ripple {
  0% { box-shadow: 0 0 0 0 rgba(214,59,48,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(214,59,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(214,59,48,0); }
}
@keyframes pulseMostaza {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,163,23,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(232,163,23,0); }
}
@keyframes pulseSoft { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }