/* =====================================================
   VARIABLES — EXACTAMENTE LAS DE ANTICAOS™
   ===================================================== */
:root {
  --black: #040404;
  --dark: #0e0e0e;
  --card: #161616;
  --red: #f53d03;
  --lime: #cefb84;
  --cream: #fbfed9;
  --purple: #7189ff;
  --muted: #888; /* mínimo AA: 5.76:1 sobre --black, 5.09:1 sobre --card */
  --border: rgba(251, 254, 217, 0.08);
  --border2: rgba(113, 137, 255, 0.2);

  /* Colores con alfa */
  --cream-60: rgba(251, 254, 217, 0.60);
  --cream-70: rgba(251, 254, 217, 0.70);
  --cream-75: rgba(251, 254, 217, 0.75);
  --cream-78: rgba(251, 254, 217, 0.78);
  --cream-85: rgba(251, 254, 217, 0.85);

  /* Espaciado de secciones */
  --space-compact:  80px;
  --space-section: 120px;
  --space-hero:    140px;

  /* Tipografía base */
  --fs-label:    11px;
  --fs-body:     18px;
  --fs-h1:       clamp(58px, 8.1vw, 106px);
  --fs-h1-large: clamp(65px, 9.9vw, 144px);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  background: var(--black);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-top: 42px; /* offset para la .proposal-bar fija */
}

/* Foco accesible global */
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* =====================================================
   CONTENEDOR
   ===================================================== */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.wrap-narrow {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px;
}

/* =====================================================
   TIPOGRAFÍA (siguiendo la landing)
   ===================================================== */
.eyebrow {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lime);
  display: inline-block;
  margin-bottom: 28px;
}
.eyebrow::before {
  content: '◆';
  margin-right: 10px;
  color: var(--red);
}

h1.hero-title {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--cream);
}
h1.hero-title em {
  font-style: italic;
  font-weight: 900;
  color: var(--lime);
}

h2.section-title {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--cream);
  margin-bottom: 24px;
}
h2.section-title em {
  font-style: italic;
  color: var(--lime);
  font-weight: 900;
}
h2.section-title .red { color: var(--red); }
h2.section-title .purple { color: var(--purple); }

h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: 14px;
}

.lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--cream-78);
  max-width: 640px;
}
.lead.lead--spaced { margin-bottom: 32px; }

.module-tag {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--red);
}

/* =====================================================
   BOTONES (replicando los de ANTICAOS)
   ===================================================== */
.btn {
  display: inline-block;
  background: var(--lime);
  color: var(--black);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 17px 42px;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s, background 0.2s;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
}
.btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--lime);
  color: var(--lime);
  opacity: 1;
}

/* =====================================================
   SECCIONES BASE
   ===================================================== */
section {
  padding: var(--space-section) 0;
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}
.section-dark { background: var(--dark); }
.section-card-bg { background: var(--card); }

/* Separador grueso */
.divider {
  height: 1px;
  background: var(--border);
  width: 100%;
}

/* =====================================================
   ACCESIBILIDAD: respetar reduce-motion
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}