/* ══════════════════════════════════════════════
   RESONAR — CSS Principal
   Variables · Reset · Layout base
   ══════════════════════════════════════════════ */

:root {
  /* Paleta crema / nogal / grafito / azul técnico */
  --cr:    #f7f4ec;
  --ink:   #1a1714;
  --gr1:   #3a3632;
  --gr2:   #6b6660;
  --gr3:   #a8a49e;
  --gr4:   #dedad4;
  --gr5:   #f0ede6;

  --bl1:   #1b3d5c;
  --bl2:   #2e5f8a;
  --bl3:   #5a8db5;
  --bl4:   #d4e6f4;
  --bl5:   #eaf3fb;

  --wd1:   #4a3018;
  --wd2:   #7a5228;
  --wd3:   #b8864a;
  --wd4:   #e8d4b0;
  --wd5:   #f5ecd8;

  --gold:  #8c6820;
  --goldl: #c49a3c;
  --goldk: #5a4010;

  --gn:    #2a6635;
  --gn-lt: #e8f4ec;
  --rd:    #7a2020;
  --rd-lt: #fce8e8;
  --yl:    #7a5800;
  --yl-lt: #fef3d8;

  /* Tipografía */
  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Espaciado */
  --rad:    8px;
  --rad-lg: 14px;
  --rad-xl: 20px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,.10);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--cr);
  color: var(--ink);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Tipografía base ── */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.3; }
p { line-height: 1.6; }
button { font-family: var(--font); cursor: pointer; }
input, select { font-family: var(--font); }

/* ── Layout principal ── */
.main-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 22px 18px 40px;
}

/* ── Páginas ── */
.page { display: none; }
.page.active { display: block; }

/* ── Utilidades ── */
.text-muted   { color: var(--gr2); }
.text-gold    { color: var(--goldl); }
.text-blue    { color: var(--bl2); }
.text-small   { font-size: 11px; }
.text-xs      { font-size: 10px; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.font-bold    { font-weight: 700; }
.uppercase    { text-transform: uppercase; letter-spacing: .7px; }

.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

@media (max-width: 520px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .main-content { padding: 14px 12px 30px; }
}