/* ============================================================================
   motion.css — Dinamismo de marca (sobrio). Todo se desactiva con
   prefers-reduced-motion: reduce.
   ============================================================================ */

/* ----------------------- Barra de progreso de scroll ----------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--verde), #4ADE80);
  z-index: calc(var(--z-header) + 5); transition: width .1s linear; pointer-events: none;
}

/* ----------------------------- Volver arriba ------------------------------- */
.back-to-top {
  /* Estaba a 5.5rem para librar la barra pegajosa; esa barra ya no existe, asi
     que quedaba flotando a media pantalla. */
  /* Cuando en la página hay burbuja de presupuesto, `presupuesto.js` sube este
     botón por encima de ella escribiendo su `bottom` (comparten esquina y el
     botón quedaba tapado). Aquí solo vive la posición de reposo. */
  position: fixed; right: clamp(1rem, 2vw, 1.5rem); bottom: 1.5rem; z-index: var(--z-sticky);
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--azul-900); color: #fff; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--sombra-md); opacity: 0; visibility: hidden; transform: translateY(12px);
  /* `bottom` NO se anima a propósito: el botón se aparta de la burbuja del
     presupuesto cambiando su `bottom`, y con transición pasaba un cuarto de
     segundo tapado por ella. Colocarse es instantáneo; lo que se anima es la
     aparición. */
  transition: opacity var(--dur) var(--ease-suave), transform var(--dur) var(--ease-suave), visibility var(--dur), background var(--dur-rapida);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--verde); border-color: var(--verde); }
.back-to-top svg { width: 20px; height: 20px; }

/* --------------------- Franja de credenciales (marquee) -------------------- */
.marquee { overflow: hidden; background: var(--azul-900); border-block: 1px solid rgba(255,255,255,.08); padding-block: .9rem; }
.marquee__track { display: flex; gap: 3rem; width: max-content; will-change: transform; animation: marquee 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap;
  color: #9FB0D2; font-family: var(--font-display); font-weight: var(--peso-medio);
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
}
.marquee__item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verde); flex: 0 0 auto; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------ Hero: dinamismo ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__bg img { animation: kenburns 24s ease-in-out infinite alternate; transform-origin: 60% 40%; }
  @keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.16) translateY(-1.5%); } }

  .hero__inner > * { opacity: 0; animation: heroUp .85s var(--ease-entrada) forwards; }
  .hero__inner > .eyebrow   { animation-delay: .05s; }
  .hero__inner > .hero__title { animation-delay: .16s; }
  .hero__inner > .hero__sub   { animation-delay: .30s; }
  .hero__inner > .hero__cta   { animation-delay: .44s; }
  .hero__inner > .hero__badges{ animation-delay: .58s; }
  @keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
}

/* CTA primario: hover SIMPLE (sin barrido brilloso, por preferencia del cliente).
   El realce vive en components.css (elevación sutil + cambio de color). */

/* -------------------------- Reduced motion (apagar) ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
  .back-to-top { transition: opacity .01ms; }
}
