/* =====================================================================
   MECÁNICA INTELIGENTE — Movimiento
   Reveals por scroll, entradas en carga, micro-interacciones y
   la ruta de movimiento reducido (prefers-reduced-motion).
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* Entrada en carga (hero)                                            */
/* ------------------------------------------------------------------ */
@keyframes mi-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mi-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mi-scan {
  0%   { transform: translateY(-10%); opacity: 0; }
  35%  { opacity: .55; }
  100% { transform: translateY(110%); opacity: 0; }
}
@keyframes mi-pulse-ring {
  0%   { transform: scale(1); opacity: .55; }
  70%  { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}
@keyframes mi-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes mi-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@keyframes mi-spin {
  to { transform: rotate(360deg); }
}

/* Elementos de la cabecera del hero.
   Se ocultan sólo cuando hay JS (clase .js), para que sin
   JavaScript el contenido siga siendo visible. */
.js [data-hero] {
  opacity: 0;
  animation: mi-rise .72s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: var(--d, 0ms);
}

/* Barrido de luz sobre la foto del hero */
.hero__scan {
  position: absolute;
  left: 0; right: 0;
  height: 42%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(92,224,127,.16), transparent);
  animation: mi-scan 7.5s cubic-bezier(.5, 0, .5, 1) infinite;
}

/* ------------------------------------------------------------------ */
/* Revelado por scroll                                                */
/* ------------------------------------------------------------------ */
[data-reveal] {
  opacity: 1;
}
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
    transform .7s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translateX(-34px); }
.js [data-reveal="right"] { transform: translateX(34px); }
.js [data-reveal="scale"] { transform: scale(.94); }

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ------------------------------------------------------------------ */
/* Micro-interacciones                                                 */
/* ------------------------------------------------------------------ */
/* Icono de flecha que rota dentro de un círculo */
.icon-disc {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-accent);
  color: var(--accent);
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .3s ease, color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .icon-disc:hover { transform: rotate(45deg); background: var(--accent); color: #06130a; }
}

/* Enlace con subrayado que crece */
.underline-grow {
  position: relative;
  display: inline-block;
}
.underline-grow::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .32s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) and (pointer: fine) {
  .underline-grow:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
}

/* Etiqueta conCursor */
.tag-follow { cursor: default; }

/* Punto de estado "en línea" */
.live-dot {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: mi-pulse-ring 2.4s ease-out infinite;
}

/* ------------------------------------------------------------------ */
/* Marquee de marcas                                                   */
/* ------------------------------------------------------------------ */
.marquee__track {
  animation: mi-marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ------------------------------------------------------------------ */
/* Botón flotante de WhatsApp                                          */
/* ------------------------------------------------------------------ */
.wa-fab__ring {
  animation: mi-pulse-ring 2.8s cubic-bezier(.22,1,.36,1) infinite;
  animation-delay: .4s;
}

/* ------------------------------------------------------------------ */
/* Contadores numéricos                                                */
/* ------------------------------------------------------------------ */
[data-counter] { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/* Barra de progreso de lectura                                        */
/* ------------------------------------------------------------------ */
.scroll-progress { transition: transform .1s linear, opacity .25s ease; }

/* ------------------------------------------------------------------ */
/* Ruta de movimiento reducido                                         */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-hero],
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__scan,
  .wa-fab__ring,
  .live-dot::after {
    display: none !important;
  }

  .marquee__track {
    animation: none !important;
    transform: none !important;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    gap: 1.5rem 2rem;
  }
  .marquee__item:nth-child(n+11) { display: none; }
}