/* Animaciones 3D: portada que se mueve con el scroll + objetos 3D en Tecnología */

.hs { --hh: 88px; position: relative; height: 420vh; }
.hs-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.hs-visual { position: absolute; top: var(--hh); right: 0; bottom: 0; width: 56%; }
.hs .hs-stage, .hs .hs-stage[data-theme] {
  position: absolute; inset: 0; height: auto; border: 0;
  background: radial-gradient(circle at 50% 46%, #e9eddc 0%, rgba(246, 246, 242, 0) 64%);
}
.hs .hs-stage::before { opacity: calc(1 - var(--hs-p, 0) * 4); }
.hs .machine-viewport canvas { cursor: default !important; }

.hs-copy { position: absolute; top: var(--hh); right: 0; bottom: 0; left: 0; pointer-events: none; }
.hs-step {
  position: absolute; top: 50%; left: 0; width: min(46%, 580px);
  opacity: 0; visibility: hidden; pointer-events: auto;
  transform: translateY(calc(-50% + 34px));
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .6s;
}
.hs-step.is-active { opacity: 1; visibility: visible; transform: translateY(-50%); transition-delay: .08s, .08s, 0s; }
.hs-step .eyebrow, .hs-step .section-label { margin-bottom: 30px; }
.hs-step h1 { margin: 0; font-size: clamp(58px, 6.8vw, 110px); font-weight: 680; letter-spacing: -.085em; line-height: .91; }
.hs-step h1 span { white-space: nowrap; }
.hs-step h2 { margin: 0; font-size: clamp(44px, 5.55vw, 82px); font-weight: 630; letter-spacing: -.075em; line-height: 1.01; }
.hs-step h2 em { color: #7a8a17; }
.hs-text { max-width: 440px; margin: 28px 0 0; color: #4c524c; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.48; letter-spacing: -.025em; }
.hs-themes { position: absolute; z-index: 3; right: 0; bottom: 28px; width: 56%; justify-content: center; }
.hs-themes button { background: rgba(246, 246, 242, .92); }

.hs-rail { position: absolute; top: 50%; right: 28px; display: grid; gap: 22px; padding-left: 16px; transform: translateY(-50%); }
.hs-rail::before, .hs-rail i { position: absolute; top: 0; left: 0; width: 1px; content: ""; }
.hs-rail::before { bottom: 0; background: #cfd4cb; }
.hs-rail i { height: calc(var(--hs-p, 0) * 100%); background: var(--ink); }
.hs-rail span { color: #a3a99f; font-size: 11px; font-weight: 750; transition: color .3s ease; }
.hs[data-step="0"] .hs-rail span:nth-of-type(1), .hs[data-step="1"] .hs-rail span:nth-of-type(2),
.hs[data-step="2"] .hs-rail span:nth-of-type(3), .hs[data-step="3"] .hs-rail span:nth-of-type(4) { color: var(--ink); }

.hs-hint {
  position: absolute; bottom: 26px; left: 50%; margin: 0; transform: translateX(-50%);
  color: #687166; font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase;
  opacity: calc(1 - var(--hs-p, 0) * 14); pointer-events: none;
}
.hs-hint span { display: inline-block; margin-left: 6px; animation: hs-nudge 1.4s ease-in-out infinite; }
@keyframes hs-nudge { 50% { transform: translateY(4px); } }

/* Tecnología con objetos 3D */
.technology-grid .tech-symbol.is-3d { display: block; width: 100%; height: clamp(170px, 15vw, 230px); margin-bottom: 8px; }
.tech-symbol.is-3d svg { display: none; }
.tech-symbol.is-3d canvas { display: block; width: 100%; height: 100%; }
.technology-grid article:hover .tech-symbol.is-3d { transform: none; }

@media (max-width: 760px) {
  /* En el celular: máquina arriba, texto debajo y los acabados siempre fijos abajo */
  .hs { --hh: 70px; --themes-h: 84px; height: 400vh; }
  .hs-visual { bottom: auto; left: 0; width: 100%; height: max(260px, min(54svh, calc(100svh - var(--hh) - 330px))); }
  .hs-copy { top: calc(var(--hh) + max(260px, min(54svh, calc(100svh - var(--hh) - 330px)))); bottom: var(--themes-h); }
  .hs-step { top: 6px; right: 0; width: auto; transform: translateY(18px); }
  .hs-step.is-active { transform: none; }
  .hs-hint { top: calc(var(--hh) + 14px); bottom: auto; }
  .hs-themes { right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); left: 20px; width: auto; flex-wrap: nowrap; gap: 6px; }
  .hs-themes button { flex: 1; min-height: 44px; padding-inline: 5px; }
  .hs-step .eyebrow { display: none; }
  .hs-step .section-label { margin-bottom: 12px; }
  .hs-step h1 { font-size: 10.6vw; }
  .hs-step h2 { font-size: 9.6vw; }
  .hs-text { margin-top: 12px; font-size: 15px; }
  .hs-rail { display: none; }

  .technology-grid article:has(.is-3d) { grid-template-columns: 1fr; }
  .technology-grid .tech-symbol.is-3d { grid-row: auto; width: 100%; height: 190px; }
}