/* ==========================================================================
   BASE — reset + tipografía + layout general
   ========================================================================== */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.pt-header {
  padding-top: var(--header-h);
}

.page-content {
  padding-top: var(--header-h);
  padding-bottom: calc(var(--bottomnav-h) + var(--space-5));
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  font-weight: 600;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: opacity .15s ease, transform .1s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { opacity: .92; }

.btn-gold {
  background: var(--color-accent-gold);
  color: #241705;
}

.btn-whatsapp {
  background: var(--color-whatsapp);
  color: #fff;
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: var(--fs-sm); }

/* Chips / tags */
.chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* Utilidades */
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.section { padding: var(--space-6) 0 var(--space-4); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}