/* ═══════════════════════════════════════════════════════════════
   CSS específico de Inicio (index.html): intro de marca (#vs-intro) — debe cargar antes del primer pintado, por eso va en <head>.
   Se carga después de css/style.css.
   ═══════════════════════════════════════════════════════════════ */

#vs-intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0B1220;             /* --ink; el canvas toma el relevo en el primer frame */
  overflow: hidden;
  contain: layout paint;
}
#vs-intro-c { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#vs-intro-mark {
  position: relative;
  width: clamp(190px, 33vw, 368px);
  opacity: 0;
  transform: scale(.94);
  will-change: opacity, transform;
}
#vs-intro-mark-y { display: block; width: 100%; height: auto; }   /* el amarillo nativo del PNG */
#vs-intro-mark-d {                                                /* misma silueta, tintada en --ink */
  display: none;
  position: absolute;
  inset: 0;
  background: #0B1220;
  opacity: 0;
  transition: opacity .13s linear;
  -webkit-mask: url(../img/logo.png) center / 100% 100% no-repeat;
          mask: url(../img/logo.png) center / 100% 100% no-repeat;
}
@supports ((-webkit-mask-image: url(../img/logo.png)) or (mask-image: url(../img/logo.png))) {
  #vs-intro-mark-d { display: block; }
}

html.vs-intro-on { overflow: hidden; }
html.vs-intro-on .hero-corp-line-path,
html.vs-intro-on .reveal.in,
html.vs-intro-on .rubros-ticker-track,
html.vs-intro-on .campaigns-track { animation-play-state: paused; }