/* ==========================================================================
   VALLE STUDIO — A1.2 Balance
   utilities.css — Helpers, containers, reveal system, spacing
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reveal system (activado por IntersectionObserver en animations.js)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Delays (staggered load/reveal) */
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.4s; }

/* Elementos que se revelan en la carga inicial del hero */
.hero-load {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft);
  will-change: opacity, transform;
}
.hero-load.is-loaded {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.container-narrow {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) {
  .container-narrow { padding-inline: var(--gutter-desktop); }
}

.mt-1 { margin-top: var(--space-4); }
.mt-2 { margin-top: var(--space-8); }
.mt-3 { margin-top: var(--space-12); }
.mt-4 { margin-top: var(--space-16); }
.mb-1 { margin-bottom: var(--space-4); }
.mb-2 { margin-bottom: var(--space-8); }
.mb-3 { margin-bottom: var(--space-12); }

/* Lede + CTA helpers (QA Fase 4 — reemplazo de style= inline) */
.section-pad-top { padding-top: calc(var(--nav-h) + var(--space-16)); }
.lede { max-width: 56ch; color: var(--text-secondary); }
.lede-46 { max-width: 46ch; color: var(--text-secondary); margin-top: var(--space-4); }
.lede-mt-4 { margin-top: var(--space-4); }
.lede-mt-6 { margin-top: var(--space-6); }
.lede-mt-8 { margin-top: var(--space-8); }
.system-intro-wide { max-width: 56ch; }
.eyebrow.eyebrow-dark { color: var(--vs-jet); }
.cta-lede { max-width: 56ch; color: rgba(10, 10, 10, 0.7); }
.cta-lede-48 { max-width: 48ch; color: rgba(10, 10, 10, 0.7); }
.cta-lede-mt { margin-top: var(--space-6); }
.cta-link { text-decoration: none; display: inline-flex; }

/* Reducir movimiento: no animar si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-load {
    opacity: 1;
    transform: none;
    transition: none;
  }
}