/* Virtus — hero. Escopado em .vtx-scope / --vtx-
   --vtx-art precisa ser a MESMA arte do <img> do hero: a varredura de luz a usa. */
/* ═══════════════════════════════════════════════════════════════════════
   VIRTUS — HERO
   Todo o CSS está escopado no prefixo .vtx / --vtx- e não vaza para o
   restante do site. Para integrar, cole o bloco <style> no <head> e o
   bloco .vtx-scope logo após a abertura do <body>.

   ►►► ÚNICA LINHA A TROCAR: --vtx-art (caminho da fotografia)
   ═══════════════════════════════════════════════════════════════════════ */

.vtx-scope{
  /* ---- ARTE DE FUNDO (a MESMA fotografia; não substituir) ---- */
  --vtx-art: url('/assets/img/hero-estudantes.jpg');  /* o hero.php sobrescreve com $VTX_IMG */

  /* ---- cor ---- */
  --vtx-ink:      #05060F;
  --vtx-navy:     #0B0E24;
  --vtx-blue:     #2E6BFF;
  --vtx-blue-lt:  #5B8CFF;
  --vtx-violet:   #A855F7;
  --vtx-violet-d: #7C3AED;
  --vtx-cyan:     #22D3EE;
  --vtx-magenta:  #E879F9;
  --vtx-green:    #34D399;

  --vtx-txt:      #FFFFFF;
  --vtx-txt-2:    rgba(255,255,255,.70);
  --vtx-txt-3:    rgba(255,255,255,.52);

  --vtx-line:     rgba(140,140,255,.14);
  --vtx-glass:    rgba(10,8,35,.62);

  /* ---- tipografia ---- */
  --vtx-display: 'Sora', 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vtx-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- métrica ---- */
  --vtx-cw:  1400px;  /* container */
  --vtx-gut: 40px;    /* respiro lateral */
  --vtx-hh:  76px;    /* altura do header */
  --vtx-tb:  46px;    /* altura da topbar */

  --vtx-ease: cubic-bezier(.22,.61,.36,1);

  font-family: var(--vtx-body);
  color: var(--vtx-txt);
  background: var(--vtx-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vtx-scope *,
.vtx-scope *::before,
.vtx-scope *::after{ box-sizing: border-box; }
.vtx-scope img{ display:block; max-width:100%; }
.vtx-scope a{ text-decoration:none; color:inherit; }
.vtx-scope button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.vtx-scope :focus-visible{
  outline: 2px solid var(--vtx-blue-lt);
  outline-offset: 3px;
  border-radius: 8px;
}

.vtx-container{
  width:100%; max-width: var(--vtx-cw);
  margin-inline:auto; padding-inline: var(--vtx-gut);
}

/* ══════════════════════════ 1. TOPBAR ══════════════════════════ */
.vtx-topbar{
  position: relative; z-index: 60;
  height: var(--vtx-tb);
  display:flex; align-items:center; justify-content:center;
  background: #04050D;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 13px; color: var(--vtx-txt-3);
}
.vtx-topbar-in{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.vtx-topbar svg{ width:15px; height:15px; color: var(--vtx-violet); flex:none; }
.vtx-topbar b{ color:#fff; font-weight:700; letter-spacing:.01em; }
.vtx-dot-sep{ width:3px; height:3px; border-radius:50%; background: rgba(255,255,255,.28); }
.vtx-live{
  display:inline-flex; align-items:center; gap:7px;
  padding: 4px 11px 4px 9px; border-radius:999px;
  background: rgba(52,211,153,.10);
  border: 1px solid rgba(52,211,153,.28);
  color: var(--vtx-green);
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.vtx-live i{
  width:6px; height:6px; border-radius:50%; background: var(--vtx-green);
  box-shadow: 0 0 0 0 rgba(52,211,153,.6);
  animation: vtx-pulse 2.4s ease-out infinite;
}
@keyframes vtx-pulse{
  0%{ box-shadow:0 0 0 0 rgba(52,211,153,.55); }
  70%{ box-shadow:0 0 0 7px rgba(52,211,153,0); }
  100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); }
}

/* ══════════════════════════ 2. HEADER ══════════════════════════ */
.vtx-header{
  position: sticky; top:0; z-index: 50;
  height: var(--vtx-hh);
  background: linear-gradient(180deg, rgba(11,14,36,.88) 0%, rgba(7,9,26,.76) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(120,110,220,.16);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.vtx-header-in{
  height:100%; display:flex; align-items:center; gap:22px;
}
.vtx-logo{ display:flex; align-items:center; gap:10px; flex:none; }
.vtx-logo-mark{ width:34px; height:34px; filter: drop-shadow(0 0 10px rgba(124,58,237,.55)); }
.vtx-logo-word{
  font-family: var(--vtx-display); font-weight:800; font-size:22px;
  letter-spacing:-.02em; color:#fff;
}

.vtx-nav{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  gap:2px; min-width:0;
}
.vtx-nav a{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 12px; border-radius:9px;
  font-size:14px; font-weight:500; color: rgba(226,232,255,.82);
  white-space:nowrap;
  transition: color .2s var(--vtx-ease), background .2s var(--vtx-ease);
}
.vtx-nav a:hover{ color:#fff; background: rgba(255,255,255,.055); }
.vtx-nav a.is-active{
  color:#fff; font-weight:600;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.vtx-tag{
  font-size:8.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding: 2.5px 6px; border-radius:5px; line-height:1;
  background: rgba(96,140,255,.13); color:#A8C2FF;
  border:1px solid rgba(96,140,255,.24);
}
/* aba nova — Virtus Jogos */
.vtx-nav a.vtx-nav-games{ color: rgba(255,255,255,.82); }
.vtx-nav a.vtx-nav-games svg{ width:16px; height:16px; color: var(--vtx-cyan); flex:none; }
.vtx-nav a.vtx-nav-games:hover{
  background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(168,85,247,.12));
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.28);
  color:#fff;
}
.vtx-tag-games{
  background: rgba(34,211,238,.14); color:#7FE9F6; border-color: rgba(34,211,238,.28);
}

.vtx-header-cta{ display:flex; align-items:center; gap:10px; flex:none; }

.vtx-enter{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 24px; border-radius:11px;
  font-size:14.5px; font-weight:700; color:#fff;
  background: linear-gradient(100deg, var(--vtx-blue) 0%, var(--vtx-violet-d) 55%, var(--vtx-violet) 100%);
  box-shadow: 0 6px 22px -6px rgba(88,60,255,.75), inset 0 1px 0 rgba(255,255,255,.18);
  transition: filter .22s var(--vtx-ease), transform .22s var(--vtx-ease), box-shadow .22s var(--vtx-ease);
}
.vtx-enter:hover{
  filter: brightness(1.14);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -6px rgba(88,60,255,.9), inset 0 1px 0 rgba(255,255,255,.24);
}

.vtx-burger{ display:none; width:42px; height:42px; border-radius:10px; align-items:center; justify-content:center; border:1px solid var(--vtx-line); }
.vtx-burger svg{ width:20px; height:20px; }

/* ── menu mobile ── */
.vtx-mobnav{
  position:absolute; top:100%; left:0; right:0;
  display:none; flex-direction:column;
  padding: 14px var(--vtx-gut) 22px;
  background: rgba(6,8,24,.95);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom:1px solid var(--vtx-line);
  box-shadow: 0 34px 64px -22px rgba(0,0,0,.92);
  max-height: calc(100vh - var(--vtx-hh)); overflow-y:auto;
}
.vtx-mobnav.is-open{ display:flex; animation: vtx-mobnav-in .26s var(--vtx-ease); }
@keyframes vtx-mobnav-in{ from{ opacity:0; transform: translateY(-10px); } to{ opacity:1; transform:none; } }
.vtx-mobnav a{
  display:flex; align-items:center; gap:10px;
  padding: 13px 12px; border-radius:10px;
  font-size:15px; font-weight:500; color: rgba(255,255,255,.80);
  transition: background .18s var(--vtx-ease), color .18s var(--vtx-ease);
}
.vtx-mobnav a:hover{ background: rgba(255,255,255,.06); color:#fff; }
.vtx-mobnav a.is-active{ color:#fff; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.vtx-mobnav .vtx-nav-games{ color:#fff; background: linear-gradient(90deg, rgba(34,211,238,.10), rgba(168,85,247,.10)); box-shadow: inset 0 0 0 1px rgba(34,211,238,.24); }
.vtx-mobnav .vtx-nav-games svg{ width:18px; height:18px; color: var(--vtx-cyan); flex:none; }
.vtx-mobnav-sep{ height:1px; background: var(--vtx-line); margin: 12px 2px; }
.vtx-mobnav-cta{ display:flex; gap:10px; }
.vtx-mobnav-cta .vtx-enter{ flex:1; height:48px; justify-content:center; }
@media (min-width: 1181px){ .vtx-mobnav{ display:none !important; } }

/* ══════════════════════════ 3. HERO ══════════════════════════ */
.vtx-hero{
  position: relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  /* Piso proporcional à arte. 52vw deixa ~23px de folga acima da primeira aluna.
     Baixar para 50vw aproxima a barra inferior da dobra, mas volta a cortar a cabeça. */
  min-height: max(calc(100vh - var(--vtx-hh) - var(--vtx-tb)), 52vw);
  padding-block: 0 34px;
  background: var(--vtx-ink);
}

/* — camada da arte: a fotografia (não substituída) + overlay SVG alinhado — */
.vtx-art{ position:absolute; inset:-10px; z-index:0; overflow:hidden; }
/* caixa na proporção nativa da arte (1672x941), colada na base do hero.
   Tudo que precisa ficar alinhado à fotografia mora aqui dentro. */
.vtx-art-fit{
  position:absolute; left:10px; bottom:10px;
  width: calc(100% - 20px); aspect-ratio: 1672 / 941;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 7%);
}
.vtx-art-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center bottom;
  opacity:0; transform: scale(1.045);
  animation: vtx-art-in 1.15s var(--vtx-ease) .05s forwards;
  will-change: transform, opacity;
}
@keyframes vtx-art-in{ to{ opacity:1; transform: scale(1); } }

/* véu escuro à esquerda — funde a foto ao fundo e protege a leitura */
.vtx-art::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(96deg, var(--vtx-ink) 0%, rgba(5,6,15,.94) 22%, rgba(6,8,26,.62) 42%, rgba(6,8,26,.14) 58%, transparent 72%),
    radial-gradient(120% 90% at 8% 40%, rgba(5,6,15,.72), transparent 62%),
    linear-gradient(to bottom, rgba(5,6,15,.55) 0%, transparent 18%);
}

/* halo violeta que respira atrás dos estudantes */
.vtx-halo{
  position:absolute; z-index:1; pointer-events:none;
  right:-6%; top:-14%; width:62%; aspect-ratio:1/1;
  background: radial-gradient(circle, rgba(124,58,237,.30) 0%, rgba(46,107,255,.14) 42%, transparent 68%);
  filter: blur(58px);
  animation: vtx-breathe 16s ease-in-out infinite;
}
@keyframes vtx-breathe{
  0%,100%{ opacity:.75; transform: scale(1); }
  50%    { opacity:1;   transform: scale(1.09); }
}

/* — varredura de luz (elemento-assinatura) — */
.vtx-sweep-clip{
  position:absolute; left:0; right:0; top:34%; bottom:0;
  overflow:hidden; pointer-events:none; z-index:2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
}
.vtx-sweep{
  position:absolute; left:0; right:0; bottom:0; height:151.52%;
  background-image: var(--vtx-art);
  background-size:100% 100%; background-repeat:no-repeat;
  mix-blend-mode: screen; opacity:.42;
  filter: saturate(1.7) brightness(1.2);
  -webkit-mask-image: linear-gradient(100deg, transparent 34%, #000 44%, #000 52%, transparent 63%);
          mask-image: linear-gradient(100deg, transparent 34%, #000 44%, #000 52%, transparent 63%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: vtx-sweep 9s linear infinite;
}
@keyframes vtx-sweep{
  from{ -webkit-mask-position: -110% 0; mask-position: -110% 0; }
  to  { -webkit-mask-position:  210% 0; mask-position:  210% 0; }
}

/* — ondas neon: traçados remapeados a partir das coordenadas da referência,
     no mesmo viewBox da arte, portanto sempre no mesmo lugar da fotografia — */
.vtx-neon{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none; mix-blend-mode: screen;
}
.vtx-neon-halo{ fill:none; stroke-width:10; stroke-linecap:round; opacity:.34;
  animation: vtx-neon-breathe 6.5s ease-in-out infinite; }
.vtx-neon-core{ fill:none; stroke-width:2.6; stroke-linecap:round; }
.vtx-neon-halo.b{ stroke-width:6.5; opacity:.25; animation-duration:8.5s; animation-delay:-3s; }
@keyframes vtx-neon-breathe{ 50%{ opacity:.60; } }
.vtx-neon-halo.b{ animation-name: vtx-neon-breathe-b; }
@keyframes vtx-neon-breathe-b{ 50%{ opacity:.44; } }
.vtx-neon-dot{ animation: vtx-dot-pulse 3.2s ease-in-out infinite; }
.vtx-neon-dot.d2{ animation-delay:-1.4s; }
@keyframes vtx-dot-pulse{ 50%{ opacity:.62; } }

/* partículas */
.vtx-particles{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.vtx-particles i{
  position:absolute; border-radius:50%;
  background: #BFDBFE;
  box-shadow: 0 0 10px 2px rgba(147,197,253,.55);
  opacity:0;
  animation: vtx-float linear infinite;
}
@keyframes vtx-float{
  0%  { opacity:0; transform: translate3d(0,14px,0) scale(.6); }
  22% { opacity:.85; }
  70% { opacity:.5; }
  100%{ opacity:0; transform: translate3d(-14px,-72px,0) scale(1.05); }
}

/* — conteúdo — */
.vtx-hero-in{
  position:relative; z-index:10;
  flex:1 1 auto; display:flex; align-items:center;
  padding-block: 92px 40px;
}
.vtx-copy{ max-width: 560px; }

.vtx-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  height:36px; padding: 0 17px; border-radius:999px;
  font-size:13.5px; font-weight:500; color: rgba(255,255,255,.90);
  background: rgba(124,58,237,.13);
  border: 1px solid rgba(168,85,247,.36);
  box-shadow: 0 0 26px -6px rgba(168,85,247,.55), inset 0 1px 0 rgba(255,255,255,.07);
}
.vtx-eyebrow svg{ width:14px; height:14px; color: var(--vtx-violet); flex:none; }

.vtx-h1{
  margin: 26px 0 0;
  font-family: var(--vtx-display);
  font-weight: 800;
  font-size: clamp(40px, 4.45vw, 64px);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 540px;
}
.vtx-h1 .vtx-ln{ display:block; }
.vtx-grad-violet{
  background: linear-gradient(96deg, #C084FC 0%, #A855F7 46%, #8B5CF6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vtx-grad-blue{
  background: linear-gradient(96deg, #3B82F6 0%, #2E6BFF 50%, #60A5FA 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.vtx-sub{
  margin: 26px 0 0; max-width: 470px;
  font-size: 16.5px; line-height: 1.62; color: var(--vtx-txt-2);
}

.vtx-actions{ display:flex; align-items:center; gap:16px; margin-top: 34px; flex-wrap:wrap; }
.vtx-btn-1{
  display:inline-flex; align-items:center; gap:11px;
  height:54px; padding: 0 26px; border-radius:12px;
  font-size:15.5px; font-weight:700; color:#fff;
  background: linear-gradient(100deg, var(--vtx-blue) 0%, #5B47E8 52%, var(--vtx-violet) 100%);
  box-shadow: 0 14px 38px -12px rgba(88,60,255,.95), 0 0 0 1px rgba(255,255,255,.07) inset;
  transition: transform .24s var(--vtx-ease), box-shadow .24s var(--vtx-ease), filter .24s var(--vtx-ease);
}
.vtx-btn-1 svg{ width:17px; height:17px; transition: transform .24s var(--vtx-ease); }
.vtx-btn-1:hover{
  transform: translateY(-2px); filter: brightness(1.1);
  box-shadow: 0 20px 46px -12px rgba(102,70,255,1), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.vtx-btn-1:hover svg{ transform: translateX(4px); }

.vtx-btn-2{
  display:inline-flex; align-items:center; justify-content:center;
  height:54px; padding: 0 26px; border-radius:12px;
  font-size:15.5px; font-weight:600; color: rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.17);
  background: rgba(255,255,255,.025);
  transition: background .22s var(--vtx-ease), border-color .22s var(--vtx-ease), transform .22s var(--vtx-ease);
}
.vtx-btn-2:hover{ background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.34); transform: translateY(-2px); }

/* prova social */
.vtx-proof{ display:flex; align-items:center; gap:18px; margin-top: 40px; }
.vtx-avatars{ display:flex; align-items:center; }
.vtx-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path: inset(50%); white-space:nowrap; }
.vtx-avatars .vtx-av{
  position:relative;
  width:44px; height:44px; border-radius:50%; margin-right:-13px;
  border:2px solid rgba(120,120,220,.55);
  box-shadow: 0 0 18px -4px rgba(124,58,237,.75), 0 4px 12px rgba(0,0,0,.5);
  background-size:cover; background-position:center;
  display:grid; place-items:center;
  font-size:12.5px; font-weight:700; color:#fff;
}
.vtx-avatars .vtx-av[data-foto]{ background-size:cover; background-position:center 22%; }
.vtx-avatars .vtx-av[data-foto] b{ display:none; }
.vtx-avatars .vtx-av-more{
  margin-right:0; width:46px; height:46px;
  background: linear-gradient(140deg, var(--vtx-blue), var(--vtx-violet));
  border-color: rgba(180,160,255,.65);
  font-size:12px; letter-spacing:-.02em;
}
.vtx-proof-txt strong{ display:block; font-size:14.5px; font-weight:600; color:#fff; letter-spacing:-.005em; }
.vtx-proof-txt strong b{ color:#fff; font-weight:700; }
.vtx-proof-txt span{ display:block; margin-top:4px; font-size:14px; color: var(--vtx-txt-3); }

/* ══════════════════════════ 4. CARDS DE VIDRO ══════════════════════════ */
.vtx-cards{
  position:absolute; z-index:11; left:50%; transform: translateX(-50%);
  top:0; bottom:0; width:100%; max-width: var(--vtx-cw);
  padding-inline: var(--vtx-gut);
  display:flex; flex-direction:column; justify-content:center;
  pointer-events:none;
}
.vtx-cards-col{
  margin-left: 46.5%; width: min(452px, 100%);
  display:flex; flex-direction:column; gap:20px;
  margin-top: -18px; pointer-events:auto;
}
.vtx-card{
  position:relative; display:flex; align-items:center; gap:16px;
  min-height:86px; padding: 17px 20px;
  border-radius:16px;
  background: linear-gradient(102deg, rgba(34,22,78,.74) 0%, rgba(12,10,38,.58) 62%, rgba(10,8,32,.5) 100%);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border:1px solid rgba(140,80,255,.30);
  box-shadow: 0 26px 60px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .3s var(--vtx-ease), border-color .3s var(--vtx-ease),
              box-shadow .3s var(--vtx-ease), background .3s var(--vtx-ease);
}

.vtx-card-ico{
  flex:none; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(circle at 35% 30%, rgba(168,85,247,.34), rgba(46,107,255,.14) 70%);
  border:1px solid rgba(168,85,247,.42);
  box-shadow: 0 0 20px -4px rgba(168,85,247,.6);
  transition: box-shadow .3s var(--vtx-ease), border-color .3s var(--vtx-ease);
}
.vtx-card-ico svg{ width:21px; height:21px; color:#C9AEFF; transition: color .3s var(--vtx-ease); }
.vtx-card-tx strong{ display:block; font-size:16px; font-weight:700; letter-spacing:-.01em; color:#fff; }
.vtx-card-tx span{ display:block; margin-top:4px; font-size:13.5px; color: var(--vtx-txt-3); }
.vtx-card-mark{
  position:absolute; right:16px; top:50%; transform: translateY(-50%);
  width:15px; height:15px; color: rgba(168,85,247,.55);
  transition: color .3s var(--vtx-ease), transform .3s var(--vtx-ease);
}
.vtx-card:hover{
  transform: translateY(-3px);
  background: rgba(16,13,48,.72);
  border-color: rgba(180,120,255,.62);
  box-shadow: 0 30px 70px -22px rgba(0,0,0,.9), 0 0 34px -8px rgba(168,85,247,.5), inset 0 1px 0 rgba(255,255,255,.12);
}
.vtx-card:hover .vtx-card-ico{ box-shadow: 0 0 30px -3px rgba(168,85,247,.95); border-color: rgba(200,150,255,.75); }
.vtx-card:hover .vtx-card-ico svg{ color:#EDE0FF; }
.vtx-card:hover .vtx-card-mark{ color: rgba(200,150,255,.9); transform: translateY(-50%) rotate(90deg); }

/* flutuação quase imperceptível */
.vtx-card{ animation: vtx-drift 7.5s ease-in-out infinite; }
.vtx-card:nth-child(2){ animation-duration: 8.5s; animation-delay: -2.4s; }
.vtx-card:nth-child(3){ animation-duration: 9.5s; animation-delay: -4.8s; }
@keyframes vtx-drift{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-4px); }
}
.vtx-scope.is-ready .vtx-card:hover{ animation: none; transform: translateY(-3px); }

/* ══════════════════════════ 5. BARRA INFERIOR ══════════════════════════ */
.vtx-strip-wrap{ position:relative; z-index:12; }
.vtx-strip{
  display:grid; grid-template-columns: repeat(5, 1fr);
  border-radius:16px;
  background: rgba(10,12,35,.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border:1px solid rgba(100,100,255,.15);
  box-shadow: 0 24px 60px -26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}
.vtx-strip-i{
  display:flex; align-items:center; justify-content:center; gap:13px;
  padding: 25px 14px; min-width:0;
  font-size:15px; font-weight:500; color: rgba(255,255,255,.88);
  position:relative;
}
.vtx-strip-i + .vtx-strip-i::before{
  content:''; position:absolute; left:0; top:26%; height:48%;
  width:1px; background: rgba(255,255,255,.09);
}
.vtx-strip-i svg{
  width:25px; height:25px; flex:none; color: var(--vtx-blue-lt);
  filter: drop-shadow(0 0 7px rgba(91,140,255,.55));
  animation: vtx-sheen 14s ease-in-out infinite;
}
.vtx-strip-i:nth-child(1) svg{ animation-delay: 0s; }
.vtx-strip-i:nth-child(2) svg{ animation-delay: 2.2s; }
.vtx-strip-i:nth-child(3) svg{ animation-delay: 4.4s; }
.vtx-strip-i:nth-child(4) svg{ animation-delay: 6.6s; }
.vtx-strip-i:nth-child(5) svg{ animation-delay: 8.8s; }
@keyframes vtx-sheen{
  0%,86%,100%{ color: var(--vtx-blue-lt); filter: drop-shadow(0 0 7px rgba(91,140,255,.55)); }
  93%        { color:#CFE0FF;             filter: drop-shadow(0 0 16px rgba(140,180,255,1)); }
}
.vtx-strip-i span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── acesso administrativo: discreto, no fim da página ── */
.vtx-adminbar{
  display:flex; align-items:center; justify-content:center;
  padding: 20px var(--vtx-gut) 24px;
  background: #04050D;
  border-top: 1px solid rgba(255,255,255,.05);
}
.vtx-adminbar a{
  display:inline-flex; align-items:center; gap:7px;
  padding: 7px 12px; border-radius:8px;
  font-size:12px; font-weight:500; letter-spacing:.015em;
  color: rgba(255,255,255,.22);
  transition: color .22s var(--vtx-ease), background .22s var(--vtx-ease);
}
.vtx-adminbar a:hover{ color: rgba(200,170,255,.92); background: rgba(168,85,247,.08); }
.vtx-adminbar svg{ width:13px; height:13px; flex:none; }

/* ══════════════════════════ 6. WHATSAPP ══════════════════════════ */
.vtx-wa{
  position:fixed; right:26px; bottom:26px; z-index:70;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(145deg, #2ED66B, #16A34A);
  box-shadow: 0 12px 30px -8px rgba(22,163,74,.85), 0 0 0 0 rgba(45,212,120,.5);
  animation: vtx-wa-pulse 4.5s ease-out infinite;
  transition: transform .25s var(--vtx-ease);
}
.vtx-wa svg{ width:29px; height:29px; color:#fff; }
.vtx-wa:hover{ transform: scale(1.07); }
@keyframes vtx-wa-pulse{
  0%,72%,100%{ box-shadow: 0 12px 30px -8px rgba(22,163,74,.85), 0 0 0 0 rgba(45,212,120,.45); }
  86%        { box-shadow: 0 12px 30px -8px rgba(22,163,74,.85), 0 0 0 16px rgba(45,212,120,0); }
}

/* ══════════════════════════ 7. ENTRADA ══════════════════════════ */
.vtx-rise{ opacity:0; transform: translateY(22px); filter: blur(8px); }
/* se o JS falhar, o conteúdo aparece nítido em 1,4s em vez de ficar borrado */
@keyframes vtx-failsafe{ to{ opacity:1; transform:none; filter:none; } }
.vtx-scope:not(.is-ready) .vtx-rise{ animation: vtx-failsafe .4s linear 1.4s forwards; }
.vtx-scope.is-ready .vtx-rise{
  animation: vtx-rise .62s var(--vtx-ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes vtx-rise{
  to{ opacity:1; transform: translateY(0); filter: blur(0); }
}
/* cards entram com fade + translateY, sem brigar com a flutuação */
.vtx-card{ opacity:0; }
.vtx-scope.is-ready .vtx-card{
  animation: vtx-card-in .62s var(--vtx-ease) forwards, vtx-drift 7.5s ease-in-out infinite;
  animation-delay: var(--d, 0ms), calc(var(--d, 0ms) + .62s);
}
.vtx-scope.is-ready .vtx-card:nth-child(2){ animation-duration: .62s, 8.5s; animation-delay: var(--d), calc(var(--d) + 2.1s); }
.vtx-scope.is-ready .vtx-card:nth-child(3){ animation-duration: .62s, 9.5s; animation-delay: var(--d), calc(var(--d) + 4.3s); }
@keyframes vtx-card-in{
  from{ opacity:0; transform: translateY(15px); filter: blur(6px); }
  to  { opacity:1; transform: translateY(0);    filter: blur(0);  }
}

/* ══════════════════════════ 8. RESPONSIVO ══════════════════════════ */
@media (max-width: 1400px){
  .vtx-scope{ --vtx-gut: 32px; }
  .vtx-nav a{ padding: 8px 9px; font-size:13.5px; }
}
@media (max-width: 1180px){
  .vtx-nav{ display:none; }
  .vtx-burger{ display:flex; }
  .vtx-header-in{ justify-content:space-between; }
  .vtx-cards-col{ margin-left: 44%; width: min(400px, 52%); }
  .vtx-card-tx span{ font-size:12.5px; }
  .vtx-h1{ font-size: clamp(38px, 5.2vw, 54px); }
  .vtx-strip-i{ font-size:13.5px; gap:10px; padding: 22px 10px; }
  .vtx-strip-i svg{ width:22px; height:22px; }
}
@media (max-width: 900px){
  .vtx-strip{ grid-template-columns: repeat(2, 1fr); }
  .vtx-strip-i + .vtx-strip-i::before{ display:none; }
  .vtx-strip-i{ justify-content:flex-start; padding: 17px 18px; border-top:1px solid rgba(255,255,255,.055); }
  .vtx-strip-i:nth-child(1), .vtx-strip-i:nth-child(2){ border-top:0; }
  .vtx-strip-i:nth-child(odd)::after{
    content:''; position:absolute; right:0; top:22%; height:56%; width:1px; background: rgba(255,255,255,.07);
  }
  .vtx-strip-i:last-child{ grid-column: 1 / -1; }
}
@media (max-width: 760px){
  .vtx-scope{ --vtx-gut: 20px; --vtx-tb: auto; }
  .vtx-topbar{ height:auto; padding: 9px 16px; font-size:12px; line-height:1.5; text-align:center; }
  .vtx-hero{ min-height:0; padding-block: 0 26px; }

  /* ordem no mobile: eyebrow › headline › subtítulo › CTA › prova › foto › benefícios */
  .vtx-hero{ display:flex; }
  .vtx-art{
    position: relative; inset: auto; order:2;
    height: 300px; margin-top: 6px; transform: none !important;
  }
  .vtx-art-fit{ position:absolute; inset:0; left:0; width:100%; height:100%; aspect-ratio:auto; -webkit-mask-image:none; mask-image:none; }
  .vtx-art-img{ object-position: 72% 50%; }
  .vtx-art::after{
    background:
      linear-gradient(to bottom, rgba(5,6,15,.9) 0%, transparent 26%, transparent 62%, var(--vtx-ink) 100%),
      linear-gradient(96deg, rgba(5,6,15,.55), transparent 46%);
  }
  .vtx-halo{ display:none; }
  .vtx-sweep-clip, .vtx-neon{ display:none; }
  .vtx-particles{ display:none; }

  .vtx-hero-in{ order:1; padding-block: 46px 8px; }
  .vtx-copy{ max-width:100%; }
  .vtx-h1{ font-size: clamp(33px, 9.2vw, 44px); letter-spacing:-.03em; max-width:100%; }
  .vtx-sub{ font-size:15.5px; margin-top:20px; }
  .vtx-actions{ margin-top:28px; gap:12px; }
  .vtx-btn-1, .vtx-btn-2{ flex:1 1 100%; height:52px; justify-content:center; }
  .vtx-proof{ margin-top:30px; gap:14px; }
  .vtx-avatars .vtx-av{ width:38px; height:38px; margin-right:-12px; }
  .vtx-avatars .vtx-av-more{ width:40px; height:40px; font-size:11px; }
  .vtx-proof-txt strong{ font-size:13.5px; }
  .vtx-proof-txt span{ font-size:13px; }

  .vtx-cards{
    position: static; order:3; transform:none;
    width:100%; max-width:100%; margin-top: 26px;
  }
  .vtx-cards-col{ margin-left:0; width:100%; margin-top:0; gap:12px; }
  .vtx-card{ animation:none !important; opacity:1 !important; }
  .vtx-scope.is-ready .vtx-card{ animation: vtx-card-in .55s var(--vtx-ease) var(--d,0ms) forwards !important; }

  .vtx-strip-wrap{ order:4; margin-top: 26px; }
  .vtx-header-cta .vtx-enter{ display:none; }
  .vtx-wa{ right:16px; bottom:16px; width:52px; height:52px; }
  .vtx-wa svg{ width:26px; height:26px; }
}

/* ══════════════════════════ 9. MOVIMENTO REDUZIDO ══════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .vtx-scope *{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .vtx-rise, .vtx-card{ opacity:1 !important; transform:none !important; filter:none !important; }
  .vtx-art-img{ opacity:1 !important; transform:none !important; }
}