:root {
  --motion: 1;
}

/* ---------------------------------------------------------- hero con slides */
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.02);
  transition: opacity 1.4s ease;
}
.hero-slide.is-on { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero-slide.is-on img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1.02); }
  to { transform: scale(1.12); }
}

/* ---------------------------------------------------------- titular por líneas */
.display .line { display: block; overflow: hidden; }
.display .line > span { display: block; transform: translateY(110%); animation: lineUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.display .line:nth-child(1) > span { animation-delay: 0.15s; }
.display .line:nth-child(2) > span { animation-delay: 0.35s; }
@keyframes lineUp { to { transform: translateY(0); } }

.hero .eyebrow, .hero .hero-lead, .hero .hero-cta, .hero .hero-facts {
  opacity: 0; transform: translateY(18px);
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero .eyebrow { animation-delay: 0.05s; }
.hero .hero-lead { animation-delay: 0.55s; }
.hero .hero-cta { animation-delay: 0.7s; }
.hero .hero-facts { animation-delay: 0.85s; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- reveal escalonado */
.stagger > * { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: 0.02s; }
.stagger.in > *:nth-child(2) { transition-delay: 0.1s; }
.stagger.in > *:nth-child(3) { transition-delay: 0.18s; }
.stagger.in > *:nth-child(4) { transition-delay: 0.26s; }
.stagger.in > *:nth-child(5) { transition-delay: 0.34s; }
.stagger.in > *:nth-child(6) { transition-delay: 0.42s; }

/* ---------------------------------------------------------- marquee más vivo */
.marquee-track { animation-duration: 26s; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------------------------------------------------------- pista de proyectos en móvil */
.swipe-hint { display: none; }
.proj-dots { display: none; }

@media (max-width: 860px) {
  .swipe-hint {
    display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
    font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-2);
  }
  .swipe-hint span { animation: nudge 1.6s infinite; display: inline-block; }
  @keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

  .grid-proj {
    display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .grid-proj::-webkit-scrollbar { display: none; }
  .grid-proj .proj {
    flex: 0 0 82%; scroll-snap-align: center; aspect-ratio: 4 / 3;
    grid-column: auto !important; grid-row: auto !important;
    transition: transform 0.4s var(--ease), opacity 0.4s;
  }
  .grid-proj .proj:not(.is-active) { opacity: 0.55; transform: scale(0.95); }
  .grid-proj .proj.is-active { opacity: 1; transform: scale(1); }
  .proj-dots { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
  .proj-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.22); transition: all 0.3s; }
  .proj-dots i.is-on { width: 20px; border-radius: 3px; background: var(--sand); }

  /* barra fija de acciones */
  .sticky-bar {
    display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 95;
    transform: translateY(140%); transition: transform 0.45s var(--ease);
  }
  .sticky-bar.is-on { transform: none; }
  .sticky-bar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 52px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  }
  .sticky-bar svg { width: 18px; height: 18px; }
  .sb-wa { background: var(--wa); color: #04220f; }
  .sb-wa svg { fill: #04220f; }
  .sb-tel { background: var(--sand); color: #1a1400; border: 1px solid var(--sand); }
  .sb-tel svg { fill: #1a1400; }

  .fab { display: none; }
  .toast { bottom: 84px; }
}

@media (min-width: 861px) {
  .sticky-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-on img { animation: none; }
  .display .line > span { transform: none; animation: none; }
  .hero .eyebrow, .hero .hero-lead, .hero .hero-cta, .hero .hero-facts { opacity: 1; transform: none; animation: none; }
  .stagger > * { opacity: 1; transform: none; }
}