@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;0,9..144,900;1,9..144,300;1,9..144,500;1,9..144,700&family=Figtree:wght@300;400;500;600;700&display=swap');

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

:root {
  /* Fondos */
  --bg-page:      #eeecea;
  --bg-panel:     #ffffff;
  --bg-soft:      #f5f3f0;
  --bg-bark:      #122018;
  --bg-bark-2:    #1c3225;
  --bg-bark-3:    #284a35;

  /* Verdes */
  --green-1:  #2a6040;
  --green-2:  #3a7e54;
  --green-3:  #55a070;
  --green-4:  #82c49b;
  --green-5:  #b8dfc7;
  --green-6:  #e0f0e7;
  --green-7:  #f0f8f3;

  /* Dorado tierra */
  --gold-1:   #8a5c1a;
  --gold-2:   #bf8c2e;
  --gold-3:   #ddb554;
  --gold-4:   #f5e4b2;
  --gold-5:   #faf4e0;

  /* Neutros */
  --stone-1:  #1e2b23;
  --stone-2:  #354d3f;
  --stone-3:  #5e7a6a;
  --stone-4:  #9ab5a4;
  --stone-5:  #cdddd4;
  --stone-6:  #e8f0eb;

  /* Semánticos */
  --red:      #c03c3c;
  --red-bg:   #fce9e9;
  --blue:     #2e5fa3;
  --blue-bg:  #e8f0fb;

  /* Texto */
  --t1: #131f17;
  --t2: #2e4a38;
  --t3: #607a6a;
  --t4: #9ab5a4;
  --t-inv: #e8f4ec;

  /* Bordes */
  --b1: rgba(42,96,64,0.10);
  --b2: rgba(42,96,64,0.18);
  --b3: rgba(42,96,64,0.30);

  /* Shadows */
  --s1: 0 1px 3px rgba(18,32,24,0.06), 0 4px 12px rgba(18,32,24,0.04);
  --s2: 0 2px 8px rgba(18,32,24,0.08), 0 10px 30px rgba(18,32,24,0.08);
  --s3: 0 8px 32px rgba(18,32,24,0.14), 0 2px 8px rgba(18,32,24,0.08);

  /* Radios */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;

  /* Tipografía */
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui:      'Figtree', system-ui, sans-serif;
}

html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  color: var(--t1);
  background: var(--bg-page);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Utilidades compartidas ── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 20px;
}
.badge-green  { background: var(--green-7);  color: var(--green-1); border: 1px solid var(--green-5); }
.badge-gold   { background: var(--gold-5);   color: var(--gold-1);  border: 1px solid var(--gold-4); }
.badge-red    { background: var(--red-bg);   color: var(--red);     border: 1px solid #f5c5c5; }
.badge-stone  { background: var(--stone-6);  color: var(--stone-2); border: 1px solid var(--stone-5); }
.badge-blue   { background: var(--blue-bg);  color: var(--blue);    border: 1px solid #bed0f0; }

.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
  border: none;
  transition: all 0.18s;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn-primary {
  background: var(--bg-bark);
  color: var(--t-inv);
}
.btn-primary:hover {
  background: var(--bg-bark-2);
  box-shadow: var(--s2);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-panel);
  color: var(--t2);
  border: 1.5px solid var(--b2);
}
.btn-secondary:hover {
  background: var(--green-7);
  border-color: var(--green-4);
}

.btn-ghost {
  background: transparent;
  color: var(--t3);
  border: 1.5px solid var(--b2);
}
.btn-ghost:hover { background: var(--bg-soft); color: var(--t1); }

.divider {
  height: 1px;
  background: var(--b1);
  margin: 0;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--stone-5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--stone-4); }