/* Secuencia audiovisual del estudio: scroll nativo, sin saltos de imagen. */
.tecnologia-secuencia {
  position: relative;
  height: 300svh;
  background: #090a0c;
  color: #fff;
  isolation: isolate;
}
.tecnologia-sticky {
  position: sticky;
  top: 84px;
  height: calc(100svh - 84px);
  min-height: 510px;
  overflow: hidden;
  background: #090a0c url('../img/tecnologia-frames/tecnologia-001.webp') center / cover no-repeat;
}
.tecnologia-fotograma,
.tecnologia-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tecnologia-canvas { opacity: 0; pointer-events: none; }
.tecnologia-canvas.lista { opacity: 1; }
.tecnologia-sombra {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,8,10,.97) 0%, rgba(7,8,10,.86) 20%, rgba(7,8,10,.38) 38%, transparent 65%), linear-gradient(0deg, rgba(7,8,10,.32), transparent 28%);
  pointer-events: none;
}
.tecnologia-contenido {
  position: absolute;
  z-index: 2;
  left: max(5.5vw, calc((100vw - 1420px) / 2));
  top: 50%;
  width: min(490px, 36vw);
  transform: translateY(-50%);
  text-shadow: 0 2px 20px rgba(0,0,0,.32);
}
.tecnologia-kicker {
  margin: 0 0 20px;
  color: #ffb251;
  font: 800 12px/1.4 var(--fuente-cuerpo);
  letter-spacing: .2em;
}
.tecnologia-contenido h2 {
  margin: 0;
  font: 800 clamp(43px, 4.35vw, 76px)/1.06 var(--fuente-display);
  letter-spacing: -.055em;
  text-wrap: balance;
}
.tecnologia-contenido h2 span { display: block; color: #ffad43; }
.tecnologia-contenido > p:last-child {
  max-width: 33ch;
  margin: 22px 0 0;
  color: #e6e3de;
  font: 500 clamp(14px, 1.15vw, 18px)/1.5 var(--fuente-cuerpo);
}
.tecnologia-progreso {
  position: absolute;
  z-index: 2;
  left: max(5.5vw, calc((100vw - 1420px) / 2));
  bottom: 90px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #e8ddd1;
  font: 800 10px var(--fuente-cuerpo);
  letter-spacing: .13em;
}
.tecnologia-progreso span { width: 7px; height: 7px; border-radius: 50%; background: #ff9e35; }
.tecnologia-progreso i { display: block; width: 68px; height: 2px; background: linear-gradient(90deg, #ff9e35 var(--tecnologia-progress, 0%), rgba(255,255,255,.25) var(--tecnologia-progress, 0%)); }
@media (max-width: 720px) {
  .tecnologia-secuencia { height: 265svh; }
  .tecnologia-sticky { top: 72px; height: calc(100svh - 72px); background: #090a0c; }
  .tecnologia-fotograma,
  .tecnologia-canvas { object-fit: contain; transform: translateY(70px) scale(2.5); }
  .tecnologia-sombra { background: linear-gradient(180deg, #090a0c 0%, rgba(9,10,12,.94) 15%, rgba(9,10,12,.22) 40%, transparent 70%, rgba(9,10,12,.55) 100%); }
  .tecnologia-contenido { left: 7vw; top: 34px; width: 86vw; transform: none; }
  .tecnologia-kicker { margin-bottom: 12px; font-size: 10px; }
  .tecnologia-contenido h2 { max-width: 10ch; font-size: clamp(36px, 9.6vw, 54px); }
  .tecnologia-contenido > p:last-child { max-width: 22ch; margin-top: 12px; font-size: 13px; }
  .tecnologia-progreso { left: 7vw; bottom: 85px; font-size: 9px; }
}
@media (max-height: 690px) and (max-width: 720px) {
  .tecnologia-contenido { top: 22px; }
  .tecnologia-contenido h2 { font-size: 35px; }
  .tecnologia-contenido > p:last-child { display: none; }
  .tecnologia-fotograma,
  .tecnologia-canvas { transform: translateY(90px) scale(2.3); }
}
@media (prefers-reduced-motion: reduce) {
  .tecnologia-secuencia { height: auto; }
  .tecnologia-sticky { position: relative; top: auto; min-height: 700px; }
}