.vellox-institucional {
  --home-text: #141414;
  --home-muted: #525252;
  --home-border: #e4e4e4;
  --paper: #fff;
  background: var(--paper);
}

.vellox-institucional .site-header {
  position: fixed;
  z-index: 4;
  inset: .75rem 0 auto;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.vellox-institucional .nav-row {
  min-height: 4.25rem;
  padding: .25rem 1rem;
  border: 1px solid var(--home-border);
  border-radius: 2.5rem;
  background: #fff;
  box-shadow: 0 .4rem 1.65rem rgb(0 0 0 / .12);
  pointer-events: auto;
}

.vellox-institucional .site-footer { background: var(--paper); }
.vellox-institucional .brand img { width: clamp(7rem, 34vw, 10.625rem); filter: none; }
.vellox-institucional .nav-brand-mark { display: none; }
.vellox-institucional .site-header[data-compact] .nav-row {
  display: flex;
  gap: clamp(.35rem, 2vw, 1rem);
  min-height: 3.25rem;
  padding: .15rem clamp(.45rem, 2vw, 1rem);
  border-radius: 2.5rem;
}
.vellox-institucional .site-header[data-compact] .brand {
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
}
.vellox-institucional .site-header[data-compact] .nav-brand-full { display: none; }
.vellox-institucional .site-header[data-compact] .nav-brand-mark { display: block; width: 2rem; }
.vellox-institucional .site-header[data-compact] .site-nav { gap: clamp(.35rem, 1.5vw, 1.5rem); }
.vellox-institucional .site-header[data-compact] .nav-next { display: inline-flex; white-space: nowrap; }
.vellox-institucional .skip-link { position: fixed; }
.vellox-institucional :is(.hub-catalog, .hub-upcoming) { scroll-margin-top: 5rem; }
.vellox-institucional :focus-visible { outline-color: #333; }
.vellox-institucional .skip-link,
.vellox-institucional .button-primary { background: var(--home-text); color: #fff; }
.vellox-institucional .button-primary:hover { background: #333; }

.vellox-film {
  padding-bottom: clamp(3.2rem, 7vw, 6.1rem);
}

.vellox-institucional .vellox-film-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  grid-template-areas: "intro filme";
  align-items: center;
}

.vellox-film-intro {
  grid-area: intro;
  min-width: 0;
}

.vellox-film-intro h1 {
  max-width: 11ch;
  font: 780 clamp(2.75rem, 5.7vw, 6.5rem)/.97 var(--display);
  letter-spacing: -.052em;
  word-spacing: .025em;
  text-wrap: balance;
}

.vellox-film-intro .vellox-film-lead {
  max-width: 33ch;
  margin-top: clamp(.8rem, 2vw, 1.25rem);
  color: var(--home-muted);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.5;
}

.vellox-film-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1.45rem;
  margin-top: clamp(1.4rem, 3vw, 2.1rem);
}

.vellox-film-scroll {
  display: inline-flex;
  align-items: center;
  gap: .44rem;
  min-height: 2.75rem;
  font-size: .93rem;
  font-weight: 720;
  text-decoration: none;
}
.vellox-film-scroll:hover { text-decoration: underline; }

.vellox-film-media {
  grid-area: filme;
  min-width: 0;
}

.vellox-film-frame {
  margin: 0 auto;
  scroll-margin-top: 6.5rem;
}

.vellox-film-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 0 0 .9rem .9rem;
  background: #222;
  box-shadow: 0 .75rem 2.4rem rgb(0 0 0 / .12);
}

.vellox-film-image,
.vellox-film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: contrast(1.06) saturate(.9);
}
.vellox-film-video { opacity: 0; pointer-events: none; }
.vellox-film-frame[data-has-video] .vellox-film-video { opacity: 1; }

.vellox-film-frame:not(:target) .vellox-film-screen::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(132deg, transparent 12%, rgb(255 255 255 / .46) 12.2%, transparent 12.7%),
    linear-gradient(132deg, transparent 17%, rgb(255 255 255 / .23) 17.15%, transparent 17.6%),
    linear-gradient(132deg, transparent 86%, rgb(255 255 255 / .38) 86.2%, transparent 86.8%);
  mask-image: linear-gradient(#000 0%, #000 14%, transparent 36%, transparent 65%, #000 94%);
}

.vellox-film-toggle,
.vellox-film-close {
  position: absolute;
  z-index: 2;
  bottom: .75rem;
  right: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .4rem .85rem;
  border: 1px solid #fff;
  border-radius: 999px;
  background: var(--home-text);
  color: #fff;
  font-size: .78rem;
  font-weight: 720;
}
.vellox-film-toggle[hidden],
.vellox-film-close { display: none; }
.vellox-film-close { left: .75rem; right: auto; text-decoration: none; }
.vellox-film-frame:target .vellox-film-close { display: inline-flex; }
.vellox-film-toggle:hover,
.vellox-film-close:hover { background: #333; }
.vellox-institucional .vellox-film-toggle:focus-visible,
.vellox-institucional .vellox-film-close:focus-visible {
  outline-color: #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--home-text);
}

.vellox-film-toggle-icon {
  display: block;
  width: .54rem;
  height: .62rem;
  border: .31rem solid transparent;
  border-right: 0;
  border-left: .54rem solid currentColor;
}
.vellox-film-frame[data-playing] .vellox-film-toggle-icon {
  border: 0;
  border-inline: 2px solid currentColor;
}

.vellox-institucional .hub-section-head h2 { letter-spacing: -.045em; }
.vellox-institucional .hub-card { border-radius: 1rem; }
.vellox-institucional .hub-upcoming-card {
  display: block;
  padding-block: 1.4rem;
  background: #fff;
  border-radius: 1rem;
}
.vellox-institucional .hub-upcoming-brand { margin-bottom: .65rem; }
.hub-upcoming-brand img {
  width: auto;
  height: 1.65rem;
  object-fit: contain;
  object-position: left;
}
.vellox-institucional .hub-try { border-radius: 1rem; }

@media (min-width: 48rem) {
  .vellox-institucional .vellox-film-grid {
    width: min(100% - 2.25rem, 74rem);
    padding-top: 5.5rem;
  }
  .vellox-film-intro { padding-inline-end: clamp(1rem, 3vw, 3.4rem); }
  .vellox-film-frame {
    width: min(100%, 27rem, max(13rem, 44vh));
    width: min(100%, 27rem, max(13rem, 44svh));
  }
  .vellox-film-screen { border-radius: .9rem; }
}

@media (max-width: 47.99rem) {
  .vellox-institucional .vellox-film-grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "filme" "intro";
    row-gap: 1.65rem;
  }
  .vellox-film-intro { margin-inline: clamp(.8rem, 4vw, 1.125rem); }
  .vellox-film-intro h1 { font-size: clamp(2.8rem, 11vw, 5.5rem); }
  .vellox-film-frame {
    width: min(100%, 49.5vh);
    width: min(100%, 49.5svh);
  }
}

@media (max-width: 26rem) {
  .vellox-institucional .nav-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    gap: .15rem .5rem;
    padding: .35rem .7rem .1rem;
    border-radius: 1rem;
  }
  .vellox-institucional .nav-row .brand {
    grid-column: 1 / -1;
    justify-self: center;
    min-height: 2.3rem;
  }
  .vellox-institucional .nav-row .site-nav {
    grid-column: 1;
    grid-row: 2;
    gap: 0;
  }
  .vellox-institucional .site-nav a { flex: 1; justify-content: center; }
  .vellox-institucional .site-nav .nav-next { display: inline-flex; }
}