/* ============================================================
   TICO PLUNGE · UTILITIES & LAYOUT PRIMITIVES
   Reusable layout building blocks shared by every page.
   ============================================================ */

/* ---- Containers ---- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-text); }

/* ---- Section rhythm ---- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

/* Inner wrapper used throughout existing page markup (.section .section-inner).
   Aliased to .container so the horizontal rhythm is identical everywhere. */
.section-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Shared "section header" classes referenced by index, catalogo,
   sesiones, calculadora markup. Canonical definitions live here. */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ice);
  margin-bottom: var(--space-5);
}
.section-eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
}
.section-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-base);
  color: var(--ink-soft);
  max-width: 56ch;
  margin-top: var(--space-5);
}

/* ---- Section header (eyebrow + title + lead) ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ice);
  margin-bottom: var(--space-5);
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
}
.eyebrow--center { justify-content: center; }

.section-title { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h2); max-width: 18ch; margin-bottom: var(--space-5); }
.section-title em { font-style: italic; font-weight: 400; color: var(--ice); }
.section-title--center { margin-inline: auto; text-align: center; max-width: 22ch; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-base);
  color: var(--ink-soft);
  max-width: 52ch;
  margin-top: var(--space-5);
}
.lead--center { margin-inline: auto; text-align: center; }

/* ---- Generic helpers ---- */
.text-center { text-align: center; }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.stack-center { display: flex; flex-direction: column; align-items: center; }

/* ============================================================
   SCROLL REVEAL
   Gentle entrance for content as it enters the viewport.
   Driven by lib/reveal.js (IntersectionObserver + failsafe).
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-reveal) var(--ease-soft),
    transform var(--dur-reveal) var(--ease-soft);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children when the parent carries .reveal-stagger */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-reveal) var(--ease-soft),
    transform var(--dur-reveal) var(--ease-soft);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}