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

/* La portada arranca detrás del menú: así ocupa la pantalla completa desde el primer momento */
.hs { --hh: 88px; position: relative; height: 420vh; margin-top: calc(-1 * var(--hh)); }
.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: var(--white);
}
.hs .hs-stage::before { opacity: calc(1 - var(--hs-p, 0) * 4); }

.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(255, 255, 255, .94); }

.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: 22%; margin: 0; transform: translateX(-50%);
  color: #687166; font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  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: ilustraciones 2D animadas */
.technology-grid .tech-symbol.is-art { display: block; width: 100%; height: clamp(170px, 15vw, 230px); margin-bottom: 8px; }
.technology-grid article .tech-symbol.is-art svg { display: block; width: 100%; height: 100%; stroke: none !important; }
.technology-grid article:hover .tech-symbol.is-art { transform: none; }
.tech-art * { transform-box: fill-box; }
.ta-flow { animation: ta-travel 4.2s cubic-bezier(.44,0,.2,1) infinite; }
.ta-card-min { animation: ta-card-float 3.6s ease-in-out infinite; }
.ta-waves-min path { animation: ta-wave-soft 3.6s ease-in-out infinite; }
.ta-waves-min path:nth-child(2) { animation-delay: .16s; }
.ta-waves-min path:nth-child(3) { animation-delay: .32s; }
.ta-confirm { transform-origin: center; animation: ta-confirm-soft 3.6s ease-in-out infinite; }
.ta-pulse { transform-origin: center; animation: ta-pulse-soft 2.8s ease-in-out infinite; }
.ta-link { animation: ta-link-shift 2s linear infinite; }
.ta-bars-min rect { transform-origin: bottom; animation: ta-bar-soft 2.5s ease-in-out infinite alternate; }
.ta-bars-min rect:nth-child(2) { animation-delay: -.6s; }
.ta-bars-min rect:nth-child(3) { animation-delay: -1.2s; }
.ta-bars-min rect:nth-child(4) { animation-delay: -1.8s; }
@keyframes ta-travel { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateX(246px); opacity: 0; } }
@keyframes ta-card-float { 50% { transform: translateY(-5px); } }
@keyframes ta-wave-soft { 0%, 18%, 76%, 100% { opacity: .22; } 35%, 55% { opacity: 1; } }
@keyframes ta-confirm-soft { 0%, 20%, 76%, 100% { opacity: .55; } 35%, 58% { opacity: 1; } }
@keyframes ta-pulse-soft { 50% { opacity: .4; transform: scale(.78); } }
@keyframes ta-link-shift { to { stroke-dashoffset: -22; } }
@keyframes ta-bar-soft { from { transform: scaleY(.78); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .tech-art * { animation: none !important; }
  .ta-waves-min path, .ta-confirm { opacity: 1; }
}

@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: 320vh; }
  .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) + 9px); bottom: auto; left: 50%; }
  /* al principio la máquina baja un poco (sin cambiar de tamaño) para dejarle lugar al aviso */
  .hs .hs-stage, .hs .hs-stage[data-theme] { transform: translateY(30px); transition: transform .45s ease; }
  .hs.is-scrolled .hs-stage { transform: none; }
  .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-art) { grid-template-columns: 1fr; }
  .technology-grid .tech-symbol.is-art { grid-row: auto; width: 100%; height: 190px; }
}