/* Franja de transición: video del depósito de fondo, bien oscurecido, con
   una frase corta encima. Más alta que un divisor angosto para que el video
   (fuente vertical, recortado a 16:9 en el propio archivo) se vea con
   presencia real y no como una tira recortada. */
.video-transition {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.video-transition__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Cada toma vertical usa un foco propio al expandirse en pantallas anchas. */
.video-transition__media--panel { object-position: 50% 46%; }
.video-transition__media--gauge { object-position: 50% 44%; }
.video-transition__media--valve { object-position: 50% 48%; }
.video-transition__overlay {
  position: absolute; inset: 0;
  background: rgba(27, 36, 48, 0.72);
  transition: background-color 1s ease-in-out;
}
.video-transition--switching .video-transition__overlay { background: rgb(27, 36, 48); }
.video-transition__media { opacity: 0; }
.video-transition__media.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .video-transition__overlay { transition: none; }
  .video-transition__media:not(.is-active) { display: none; }
}
.video-transition__text {
  position: relative;
  color: var(--blanco);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-align: center;
  max-width: 20ch;
  padding: 0 var(--space-3);
}

/* Texto institucional original, con ancho suficiente para lectura natural. */
.video-transition { min-height: max(720px, 95svh); }
.video-transition__content {
  position: relative;
  color: white;
  text-align: center;
  max-width: 1050px;
  padding: 72px 28px;
}
.video-transition__text { max-width: none; padding: 0; font-size: clamp(2.1rem, 3.4vw, 3.25rem); line-height: 1.15; }
.video-transition__content p { max-width: 72ch; margin: 28px auto 0; font-size: clamp(1.075rem, 1.55vw, 1.25rem); line-height: 1.65; color: #e1e9ef; }
@media (max-width: 767px) { .video-transition { min-height: max(620px, 90svh); } }
@media (max-width: 767px) {
  .video-transition__media { object-position: center; }
}
@media (prefers-reduced-motion: reduce) {
  .video-transition__content,
  .video-transition__quick-link { transition: none; }
}