/* ─── Container ─── */
.ct {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}

/* ─── Section padding ─── */
.sp {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* ─── Section anchor offset (sticky nav = 68px) ─── */
section[id] {
  scroll-margin-top: 68px;
}

/* ─── Section backgrounds ─── */
.bg-alt    { background: var(--c-bg-alt); }
.bg-forest { background: var(--c-forest); position: relative; overflow: hidden; }

/* ─── Section heading ─── */
.s-h2 {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-align: center;
}

.s-h2--light { color: #EFF1EA !important; }
.s-h2--lime { color: #7ed957; }

/* ─── Dot grid decoration ─── */
.dot-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.032;
  background-image: radial-gradient(circle, var(--c-ink) 1px, transparent 1px);
  background-size: 28px 28px;
}

.dot-grid--light {
  opacity: 0.035;
  background-image: radial-gradient(circle, #EFF1EA 1px, transparent 1px);
}

/* ─── Spine connector (between sections) ─── */
.spine-connector {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

.spine-connector__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spine-connector__line {
  width: 1px;
  height: 56px;
}

.spine-connector__line--top {
  background: linear-gradient(to bottom, rgba(79,163,107,0.12), rgba(79,163,107,0.35));
}

.spine-connector__line--bottom {
  background: linear-gradient(to bottom, rgba(79,163,107,0.35), rgba(79,163,107,0.12));
}

/* Variant: on alt background (emociones → programas) */
.spine-connector--on-alt .spine-connector__line--top {
  background: linear-gradient(to bottom, rgba(79,163,107,0.2), rgba(79,163,107,0.4));
}
.spine-connector--on-alt .spine-connector__line--bottom {
  background: linear-gradient(to bottom, rgba(79,163,107,0.4), rgba(79,163,107,0.12));
}

/* Variant: dark-to-light transition (metodo → beneficios) */
.spine-connector__line--top {
  background: linear-gradient(to bottom, rgba(79,163,107,0.4), rgba(79,163,107,0.2));
}
.spine-connector__line--bottom {
  background: linear-gradient(to bottom, rgba(79,163,107,0.2), rgba(79,163,107,0.1));
}

/* Variant: bg to alt (credibilidad → contacto) */
.spine-connector--to-alt {
  background: linear-gradient(to bottom, var(--c-bg), var(--c-bg-alt));
}

/* Variant: alt to bg (contacto → faq) */
.spine-connector--from-alt {
  background: linear-gradient(to bottom, var(--c-bg-alt), var(--c-bg));
}
.spine-connector--from-alt .spine-connector__line--top {
  background: linear-gradient(to bottom, rgba(79,163,107,0.2), rgba(79,163,107,0.35));
}

/* ─── Hero left spine (desktop only decoration) ─── */
.hero-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 0;
  pointer-events: none;
}

.hero-spine__line {
  flex: 1;
  width: 1px;
}

.hero-spine__line--top {
  background: linear-gradient(to bottom, transparent, rgba(79,163,107,0.22), rgba(79,163,107,0.22), transparent);
}

.hero-spine__line--bottom {
  background: linear-gradient(to bottom, rgba(79,163,107,0.22), transparent);
}

/* ─── Responsive ─── */
@media (max-width: 860px) {
  .dn-m { display: none !important; }
  .sp   { padding-top: 72px !important; padding-bottom: 72px !important; }
  .ct   { padding-left: 20px !important; padding-right: 20px !important; }
  .s-h2 { font-size: 26px !important; }
}

@media (min-width: 861px) {
  .dn-d { display: none !important; }
}