/* ============================================================
   BASE – Reset, tipografía y estilos globales
============================================================ */

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

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

body {
  font-family: var(--font-body);
  background: var(--color-cream);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }

ul { list-style: none; }

/* ── Clases utilitarias de tipografía ── */
.font-display { font-family: var(--font-display); }

.text-muted    { color: var(--color-text-muted); }
.text-caramel  { color: var(--color-caramel); }
.text-white    { color: #fff; }

.tag-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  color: var(--color-caramel);
  display: block;
  margin-bottom: var(--space-xs);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--color-cacao);
  margin-bottom: var(--space-md);
}

/* ── Animaciones de entrada ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bounceY {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

.animate-fadeup {
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}

/* IntersectionObserver agrega esta clase al hacer scroll */
.in-view { animation: fadeUp 0.55s ease forwards; }

/* ── Scrollbar personalizada ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-cream-dark); }
::-webkit-scrollbar-thumb { background: var(--color-caramel); border-radius: var(--radius-pill); }