/* =========================================
   BASE — Reset, tipografías y layout global
   Depende de tokens.css
   ========================================= */

/* Reset mínimo */
* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Body global */
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

/* Titulares usan Orbitron */
h1, h2, h3, h4, h5, h6,
.brand,
.btn-sub {
  font-family: var(--font-heading);
  letter-spacing: .2px;
  font-weight: 700;
  margin: 0;
}

/* Escalas tipográficas */
h1 { font-size: var(--fs-xxl); line-height: 1.1; }
h2 { font-size: var(--fs-xl);  line-height: 1.2; }
h3 { font-size: var(--fs-lg);  line-height: 1.3; }
h4 { font-size: var(--fs-md);  line-height: 1.3; }

p { margin: 0 0 var(--gap-sm); }

/* Enlaces */
a {
  color: inherit;
  text-decoration: none;
  transition: color .2s var(--ease-smooth);
}
a:hover {
  text-decoration: underline;
}

/* Imágenes fluidas */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Contenedor central */
.container,
.inner {
  width: var(--container);
  margin: 0 auto;
}

/* Helpers de espaciado */
.mt-sm { margin-top: var(--gap-sm); }
.mt-md { margin-top: var(--gap-md); }
.mt-lg { margin-top: var(--gap-lg); }
.mt-xl { margin-top: var(--gap-xl); }
.mt-xxl{ margin-top: var(--gap-xxl); }

.text-center { text-align: center; }
.text-muted  { color: var(--muted); }

/* Responsivo básico */
@media (max-width: 768px) {
  body { font-size: 15px; }
  h1 { font-size: clamp(22px, 6vw, 36px); }
  h2 { font-size: clamp(18px, 5vw, 28px); }
}