@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap');

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--clr-text);
  background-color: var(--clr-bg);
  line-height: 1.65;
  overflow-x: hidden;
  transition: background-color var(--dur-slow) ease, color var(--dur-slow) ease;
}
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea { font-family: inherit; }

/* ── CONTENEDOR ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── SECCIÓN ── */
.section { padding-block: var(--section-py); position: relative; overflow: hidden; }
.section--dark { background: var(--clr-bg-dark); color: var(--clr-white); }
.section--alt  { background: var(--clr-bg-alt); }

/* ── SECTION HEADER ── */
.section-header { text-align: center; margin-bottom: var(--sp-16); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--clr-yellow-light);
  color: var(--clr-navy);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  margin-bottom: var(--sp-4);
}
[data-theme="dark"] .badge {
  background: rgba(252,185,35,0.15);
  color: var(--clr-yellow);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge {
    background: rgba(252,185,35,0.15);
    color: var(--clr-yellow);
  }
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--clr-text);
  line-height: 1.12;
  margin-bottom: var(--sp-4);
  letter-spacing: -0.5px;
}
.section-title em { color: var(--clr-yellow); font-style: normal; }
.section-title--white { color: var(--clr-white); }

.section-sub {
  font-size: var(--fs-md);
  color: var(--clr-text-muted);
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.75;
}

/* ── REVEAL ANIMATIONS ── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-scale { transform: scale(0.93); }
.reveal-left.in, .reveal-right.in, .reveal-scale.in { transform: none; opacity: 1; }

.d1 { transition-delay: 100ms; }
.d2 { transition-delay: 200ms; }
.d3 { transition-delay: 300ms; }
.d4 { transition-delay: 400ms; }
.d5 { transition-delay: 500ms; }

/* ── UTILITIES ── */
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }
.text-center { text-align: center; }

/* ── BLOB DECORATIVOS ── */
.blob {
  position: absolute; pointer-events: none;
  border-radius: 50%; filter: blur(70px);
  opacity: 0.1; z-index: var(--z-below);
}
.blob-blue   { background: var(--clr-blue); }
.blob-yellow { background: var(--clr-yellow); }
.blob-sm  { width: 220px; height: 220px; }
.blob-md  { width: 380px; height: 380px; }
.blob-lg  { width: 560px; height: 560px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}