/* =========================================================
   UniSST V222 — TOPNAV PREMIUM + POSTER PUSH HORIZONTAL
   1) Menu superior: sombra/luz no ativo, hover branco, malha única.
   2) Poster vertical: ancora esquerda, mantém topo/base e expande apenas
      lateralmente, empurrando os itens seguintes no fluxo da fileira.
   ========================================================= */
:root{
  --v222-nav-h:42px;
  --v222-nav-radius:8px;
  --v222-nav-gap:4px;
  --v222-nav-pad:14px;
  --v222-nav-fg:#f4f5f6;
  --v222-nav-active-top:#4A4A4A;
  --v222-nav-active-bottom:#303030;
  --v222-nav-hover:#f4f5f6;
  --v222-nav-hover-fg:#171717;
}

/* ---------- Navegação superior: pública e autenticada ---------- */
html body :is(.prime-nav,.uv198-primary-nav,.public-nav){
  min-height:46px!important;
  height:46px!important;
  display:flex!important;
  align-items:center!important;
  gap:var(--v222-nav-gap)!important;
  margin-block:0!important;
  padding-block:0!important;
}
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  height:var(--v222-nav-h)!important;
  min-height:var(--v222-nav-h)!important;
  padding:0 var(--v222-nav-pad)!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:0!important;
  border-radius:var(--v222-nav-radius)!important;
  background:transparent!important;
  color:var(--v222-nav-fg)!important;
  box-shadow:none!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  line-height:1!important;
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:-.005em!important;
  transform:none!important;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:12%;right:12%;top:-16px;
  height:30px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.28) 0%,rgba(255,255,255,.10) 42%,transparent 74%);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease!important;
}
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a.active{
  background:linear-gradient(180deg,var(--v222-nav-active-top) 0%,var(--v222-nav-active-bottom) 100%)!important;
  color:#fff!important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.42),
    0 0 24px rgba(203,220,236,.08),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.24)!important;
  filter:none!important;
}
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a.active::before{opacity:1!important}
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a:hover,
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a:focus-visible,
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a.active:hover,
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a.active:focus-visible{
  background:var(--v222-nav-hover)!important;
  color:var(--v222-nav-hover-fg)!important;
  box-shadow:
    0 9px 24px rgba(0,0,0,.38),
    0 0 24px rgba(255,255,255,.09),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
  outline:none!important;
  transform:none!important;
}
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a:hover::before,
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a:focus-visible::before{opacity:.26!important}
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a :is(svg,path,rect,circle){transition:stroke .18s ease,fill .18s ease!important}
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a:hover svg,
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a:focus-visible svg{color:var(--v222-nav-hover-fg)!important}
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a:hover svg :is(path,rect,circle),
html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a:focus-visible svg :is(path,rect,circle){stroke:currentColor!important}

/* Mantém a navegação compacta antes de esconder no breakpoint existente. */
@media (max-width:1180px) and (min-width:761px){
  html body :is(.prime-nav,.uv198-primary-nav,.public-nav){gap:2px!important}
  html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a{padding-inline:10px!important;font-size:12.5px!important}
}

/* ---------- Poster vertical: crescimento somente para a direita ---------- */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  html body.streaming-system-v220 a[data-course-preview="1"].v220-reference-card.v220-poster-card.prime-poster-card{
    align-self:flex-start!important;
    transform:none!important;
    transform-origin:left center!important;
    margin-top:0!important;
    margin-bottom:0!important;
    transition:
      flex-basis .32s cubic-bezier(.22,.78,.2,1),
      width .32s cubic-bezier(.22,.78,.2,1),
      min-width .32s cubic-bezier(.22,.78,.2,1),
      max-width .32s cubic-bezier(.22,.78,.2,1),
      box-shadow .24s ease,
      filter .24s ease,
      border-radius .24s ease!important;
  }
  html body.streaming-system-v220 a[data-course-preview="1"].v220-reference-card.v220-poster-card.prime-poster-card:is(:hover,:focus-visible,.preview-pending){
    transform:none!important;
    filter:brightness(1.018)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.34)!important;
  }
  html body.streaming-system-v220 :is(.course-rail,.pv205-card-rail,.pv203-card-rail,.learning-course-rail)[data-rail]{
    align-items:flex-start!important;
  }
  html body.streaming-system-v220 :is(.course-rail,.pv205-card-rail,.pv203-card-rail,.learning-course-rail)[data-rail].pv-super-focus-open{
    scroll-snap-type:none!important;
  }
  html body.streaming-system-v220 a[data-course-preview="1"].v220-reference-card.v220-poster-card.prime-poster-card.pv-super-focus-active{
    /* A largura cresce no fluxo. A altura permanece exatamente a altura do poster. */
    --v222-focus-h:var(--v221-poster-h,var(--pv-poster-h));
    --v222-focus-w:min(calc(var(--v222-focus-h) * 1.60),calc(100vw - 56px));
    flex:0 0 var(--v222-focus-w)!important;
    flex-basis:var(--v222-focus-w)!important;
    width:var(--v222-focus-w)!important;
    min-width:var(--v222-focus-w)!important;
    max-width:var(--v222-focus-w)!important;
    height:var(--v222-focus-h)!important;
    min-height:var(--v222-focus-h)!important;
    max-height:var(--v222-focus-h)!important;
    aspect-ratio:auto!important;
    align-self:flex-start!important;
    transform:none!important;
    transform-origin:left center!important;
    margin:0!important;
    z-index:18!important;
    box-shadow:0 20px 48px rgba(0,0,0,.46)!important;
  }
  html body.streaming-system-v220 a[data-course-preview="1"].v220-reference-card.v220-poster-card.prime-poster-card.pv-super-focus-active .pv-super-focus-pane{
    animation:v222-pane-soft .28s cubic-bezier(.22,.78,.2,1) both!important;
  }
  @keyframes v222-pane-soft{
    from{opacity:.86}
    to{opacity:1}
  }
}

@media (prefers-reduced-motion:reduce){
  html body :is(.prime-nav,.uv198-primary-nav,.public-nav)>a,
  html body.streaming-system-v220 a.v220-reference-card.v220-poster-card{transition-duration:.001ms!important;animation-duration:.001ms!important}
}

/* V222.1 — especificidade final contra camadas históricas do cabeçalho/card. */
html body.prime-v086 .prime-header .prime-nav,
html body.prime-public-v086 .public-header :is(.uv198-primary-nav,.public-nav){
  min-height:46px!important;height:46px!important;display:flex!important;align-items:center!important;gap:var(--v222-nav-gap)!important;
}
html body.prime-v086 .prime-header .prime-nav>a,
html body.prime-public-v086 .public-header :is(.uv198-primary-nav,.public-nav)>a{
  position:relative!important;isolation:isolate!important;overflow:hidden!important;
  height:var(--v222-nav-h)!important;min-height:var(--v222-nav-h)!important;
  padding:0 var(--v222-nav-pad)!important;margin:0!important;border:0!important;border-radius:var(--v222-nav-radius)!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  background:transparent!important;color:var(--v222-nav-fg)!important;box-shadow:none!important;transform:none!important;
}
html body.prime-v086 .prime-header .prime-nav>a.active,
html body.prime-public-v086 .public-header :is(.uv198-primary-nav,.public-nav)>a.active{
  background:linear-gradient(180deg,var(--v222-nav-active-top),var(--v222-nav-active-bottom))!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(0,0,0,.42),0 0 24px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(0,0,0,.24)!important;
}
html body.prime-v086 .prime-header .prime-nav>a:hover,
html body.prime-v086 .prime-header .prime-nav>a:focus-visible,
html body.prime-v086 .prime-header .prime-nav>a.active:hover,
html body.prime-public-v086 .public-header :is(.uv198-primary-nav,.public-nav)>a:hover,
html body.prime-public-v086 .public-header :is(.uv198-primary-nav,.public-nav)>a:focus-visible,
html body.prime-public-v086 .public-header :is(.uv198-primary-nav,.public-nav)>a.active:hover{
  background:#f4f5f6!important;color:#171717!important;
  box-shadow:0 9px 24px rgba(0,0,0,.38),0 0 24px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.95)!important;
  transform:none!important;filter:none!important;outline:none!important;
}
html body.prime-v086 .prime-header .prime-nav>a svg,
html body.prime-public-v086 .public-header :is(.uv198-primary-nav,.public-nav)>a svg{color:currentColor!important}
html body.prime-v086 .prime-header .prime-nav>a svg :is(path,rect,circle),
html body.prime-public-v086 .public-header :is(.uv198-primary-nav,.public-nav)>a svg :is(path,rect,circle){stroke:currentColor!important}

@media (min-width:900px) and (hover:hover) and (pointer:fine){
  html body.streaming-system-v220:is(.prime-v086,.prime-public-v086) a[data-course-preview="1"].v220-reference-card.v220-poster-card.prime-poster-card{
    align-self:flex-start!important;transform:none!important;transform-origin:left center!important;margin:0!important;
  }
  html body.streaming-system-v220:is(.prime-v086,.prime-public-v086) a[data-course-preview="1"].v220-reference-card.v220-poster-card.prime-poster-card:is(:hover,:focus-visible,.preview-pending){
    transform:none!important;
  }
  html body.streaming-system-v220:is(.prime-v086,.prime-public-v086) a[data-course-preview="1"].v220-reference-card.v220-poster-card.prime-poster-card.pv-super-focus-active{
    --v222-focus-h:var(--v221-poster-h,var(--pv-poster-h));
    --v222-focus-w:min(calc(var(--v222-focus-h) * 1.60),calc(100vw - 56px));
    flex:0 0 var(--v222-focus-w)!important;flex-basis:var(--v222-focus-w)!important;
    width:var(--v222-focus-w)!important;min-width:var(--v222-focus-w)!important;max-width:var(--v222-focus-w)!important;
    height:var(--v222-focus-h)!important;min-height:var(--v222-focus-h)!important;max-height:var(--v222-focus-h)!important;
    aspect-ratio:auto!important;align-self:flex-start!important;transform:none!important;transform-origin:left center!important;margin:0!important;
  }
}