/* ============================================================================
   assets/vitrine.css — Vitrine de Mídias (lista → vitrine estilo Netflix, NEXO30)
   Porte fiel de Levantamento/NEXO30_vitrine_midias_maquete.html.
   Tudo escopado em .vit-scope (seção escura full-bleed); só classes .vit-*.
   Paleta NEXO30 navy/azul — ZERO vermelho. Não altera regra existente.
   ========================================================================== */

.vit-scope{
  --vit-abismo:#060D1C;
  --vit-navy:#0A1730;
  --vit-navy-2:#0F1F3D;
  --vit-royal:#0B236D;
  --vit-azul:#1F4E79;
  --vit-azul-vivo:#2E7DD1;
  --vit-gelo:#E8EDF5;
  --vit-gelo-mudo:#8A97AD;
  --vit-linha:rgba(232,237,245,.10);
  --vit-raio:10px;

  background:var(--vit-abismo);
  color:var(--vit-gelo);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:48px;
  min-height:70vh;
}
.vit-scope ::selection{background:var(--vit-azul-vivo);color:#fff}

/* ---------- trilha do módulo ---------- */
/* Largura/gutter vêm do .fiori-content pai (container canônico). A vitrine só
   define espaçamento vertical — nunca max-width/centro próprios (alinha com as
   outras páginas, como a /jornada faz). */
.vit-trilha{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 0 0;
  font-size:12.5px;color:var(--vit-gelo-mudo);
}
.vit-trilha b{color:var(--vit-gelo);font-weight:600}
.vit-trilha .vit-sep{opacity:.4}

/* ---------- HERO ---------- */
.vit-hero{margin:14px 0 0}
.vit-hero-card{
  position:relative;overflow:hidden;border-radius:16px;min-height:376px;
  display:flex;align-items:flex-end;
  background:
    radial-gradient(120% 140% at 82% 12%, rgba(46,125,209,.55) 0%, rgba(11,35,109,.30) 42%, transparent 68%),
    linear-gradient(105deg, #08122A 0%, #0B1E45 46%, #123A75 100%);
  border:1px solid rgba(255,255,255,.07);
}
.vit-hero-num{
  position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-size:230px;line-height:.75;font-weight:800;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:2px rgba(232,237,245,.14);
  user-select:none;pointer-events:none;
}
/* capa no hero: metade direita do card, ATRÁS do véu (scrim mantém o texto
   legível à esquerda). object-fit:cover -> não distorce, não estoura. */
.vit-hero-capa{
  position:absolute;top:0;right:0;bottom:0;width:56%;
  object-fit:cover;user-select:none;pointer-events:none;
}
.vit-hero-veu{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(6,13,28,.94) 0%, rgba(6,13,28,.72) 46%, rgba(6,13,28,0) 82%);
}
.vit-hero-txt{position:relative;padding:34px 36px;max-width:620px}
.vit-kicker{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--vit-azul-vivo);margin-bottom:12px}
.vit-hero-tit{font-size:38px;line-height:1.08;font-weight:700;letter-spacing:-.025em;margin-bottom:14px}
.vit-selos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.vit-selo{
  font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:5px;
  background:rgba(232,237,245,.08);border:1px solid rgba(232,237,245,.10);color:var(--vit-gelo);
}
.vit-selo--vivo{background:rgba(46,125,209,.18);border-color:rgba(46,125,209,.35);color:#9CC9F5}
.vit-hero-desc{font-size:14px;line-height:1.55;color:#B9C4D6;margin-bottom:22px}
.vit-acoes{display:flex;gap:10px;flex-wrap:wrap}
.vit-btn{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;
  border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid rgba(232,237,245,.14);
  transition:transform .12s ease, background .16s ease;
  background:rgba(232,237,245,.10);color:var(--vit-gelo);
  text-decoration:none;
}
.vit-btn:hover{transform:translateY(-1px);background:rgba(232,237,245,.16)}
.vit-btn--play{background:var(--vit-gelo);color:var(--vit-navy-2);border-color:transparent}
.vit-btn--play:hover{background:#fff}
.vit-btn:focus-visible{outline:2px solid var(--vit-azul-vivo);outline-offset:2px}
.vit-hero-prog{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:11.5px;color:var(--vit-gelo-mudo)}
.vit-rail{flex:1;max-width:260px;height:3px;border-radius:2px;background:rgba(232,237,245,.14);overflow:hidden}
.vit-rail i{display:block;height:100%;background:var(--vit-azul-vivo);border-radius:2px}

/* ---------- CABEÇALHO FUNDIDO (produção → escuro): topo, SUA JORNADA, KPIs, nav-mod
   Largura vem do .fiori-content pai — NUNCA max-width próprio (a maquete usava 1600,
   ignorado). ---------- */
.vit-topo{display:grid;grid-template-columns:1fr 340px;gap:14px;margin-top:12px}

/* SUA JORNADA (escuro) */
.vit-jor{
  background:linear-gradient(155deg,#0B1730 0%,#123A75 100%);
  border:1px solid rgba(255,255,255,.08);border-radius:14px;
  padding:22px;display:flex;flex-direction:column;
}
.vit-jor-tit{font-size:11px;font-weight:700;letter-spacing:.14em;color:#9CC9F5;margin-bottom:18px}
.vit-jor-item{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.vit-jor-item:last-of-type{border:0}
.vit-jor-v{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.vit-jor-l{font-size:10.5px;color:var(--vit-gelo-mudo);letter-spacing:.1em;font-weight:600;margin-top:3px}
.vit-jor-pe{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px}
.vit-donut{width:60px;height:60px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;position:relative}
.vit-donut::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#0B1730}
.vit-donut span{position:relative;z-index:1;font-size:12px;font-weight:700}
.vit-jor-msg{font-size:11.5px;color:#B9C4D6;line-height:1.5}
.vit-jor-msg b{color:var(--vit-gelo)}

/* KPIs (escuros — só os que não duplicam) */
.vit-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.vit-kpi{background:#0B1428;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:16px 18px}
.vit-kpi-l{font-size:12.5px;color:var(--vit-gelo-mudo);margin-bottom:6px}
.vit-kpi-v{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--vit-gelo)}
.vit-kpi-s{font-size:11.5px;color:var(--vit-gelo-mudo);margin-top:5px}
.vit-kpi-tag{font-size:9.5px;font-weight:700;letter-spacing:.09em;color:var(--vit-azul-vivo);margin-top:10px;display:block}

/* Navegar no Módulo — 4 CTAs (comportamento intacto; só links restilizados) */
.vit-navmod{
  margin-top:22px;background:#0B1428;border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.vit-navmod-l{padding-right:8px}
.vit-navmod-l b{font-size:14px;display:block;color:var(--vit-gelo)}
.vit-navmod-l span{font-size:11.5px;color:var(--vit-gelo-mudo)}
.vit-navcta{
  display:flex;align-items:center;gap:10px;background:rgba(232,237,245,.06);
  border:1px solid rgba(232,237,245,.10);border-radius:9px;padding:10px 14px;
  min-width:172px;cursor:pointer;text-decoration:none;min-height:44px;
}
.vit-navcta:hover{background:rgba(232,237,245,.12)}
.vit-navcta:focus-visible{outline:2px solid var(--vit-azul-vivo);outline-offset:2px}
.vit-navcta-i{width:30px;height:30px;border-radius:7px;background:rgba(46,125,209,.20);display:grid;place-items:center;font-size:13px;flex-shrink:0}
.vit-navcta-txt{display:flex;flex-direction:column}
.vit-navcta b{font-size:13px;color:#9CC9F5}
.vit-navcta span{font-size:11px;color:var(--vit-gelo-mudo)}
.vit-navcta-a{margin-left:auto;color:var(--vit-gelo-mudo)}

/* Rodapé de CTAs (restaurado de produção, no escuro) — reusa .vit-navcta.
   Largura do .fiori-content pai; grid que empilha no mobile. */
.vit-footer{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;
  margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
}
.vit-navcta--primary{background:rgba(46,125,209,.16);border-color:rgba(46,125,209,.40)}
.vit-navcta--primary b{color:#CFE6FF}

/* Topo empilha e KPIs viram 1 coluna quando aperta (SUA JORNADA sob o hero) */
@media (max-width:1100px){
  .vit-topo{grid-template-columns:1fr}
  .vit-kpis{grid-template-columns:1fr}
}
/* Mobile: CTAs em largura cheia, alvo >=44px, nada espremido */
@media (max-width:768px){
  .vit-navmod-l{flex:1 1 100%}
  .vit-navmod .vit-navcta{min-width:100%;flex:1 1 100%}
  .vit-footer{grid-template-columns:1fr}
  .vit-footer .vit-navcta{min-width:0}
}

/* ---------- FILEIRAS ---------- */
.vit-fileira{margin:38px 0 0}
.vit-fileira-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.vit-fileira-tit{font-size:17px;font-weight:600;letter-spacing:-.01em}
.vit-fileira-meta{font-size:12.5px;color:var(--vit-gelo-mudo)}
.vit-esteira{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:rgba(232,237,245,.18) transparent;
}
.vit-esteira::-webkit-scrollbar{height:6px}
.vit-esteira::-webkit-scrollbar-thumb{background:rgba(232,237,245,.18);border-radius:3px}
.vit-esteira::-webkit-scrollbar-track{background:transparent}

/* ---------- TILE ---------- */
.vit-tile{
  flex:0 0 246px;scroll-snap-align:start;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1);
  border:0;background:transparent;padding:0;text-align:left;font:inherit;color:inherit;
}
.vit-tile:hover{transform:translateY(-4px)}
.vit-tile:focus-visible{outline:2px solid var(--vit-azul-vivo);outline-offset:3px;border-radius:var(--vit-raio)}
.vit-capa{
  position:relative;overflow:hidden;height:140px;border-radius:var(--vit-raio);
  background:linear-gradient(140deg,#0C1A38 0%, #14315F 100%);
  border:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:flex-start;
}
.vit-tile:nth-child(4n+2) .vit-capa{background:linear-gradient(140deg,#0B1B3C 0%, #1B3F72 100%)}
.vit-tile:nth-child(4n+3) .vit-capa{background:linear-gradient(140deg,#0A1730 0%, #10294F 100%)}
.vit-tile:nth-child(4n+4) .vit-capa{background:linear-gradient(140deg,#0C1E44 0%, #1F4E79 100%)}
/* capa (thumbnail) do card: preenche o card recortando (16:9) — fica sob selo/play */
.vit-capa-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vit-capa-num{
  font-size:82px;line-height:1;font-weight:800;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.5px rgba(232,237,245,.20);
  margin-left:14px;user-select:none;
}
.vit-tile:hover .vit-capa-num{-webkit-text-stroke-color:rgba(232,237,245,.34)}
.vit-capa-glow{
  position:absolute;right:-30%;top:-40%;width:70%;height:180%;
  background:radial-gradient(circle, rgba(46,125,209,.30) 0%, transparent 62%);
  opacity:0;transition:opacity .22s ease;
}
.vit-tile:hover .vit-capa-glow{opacity:1}
.vit-capa-play{
  position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(6,13,28,.72);border:1px solid rgba(232,237,245,.22);
  display:grid;place-items:center;font-size:12px;
  opacity:0;transform:scale(.86);transition:opacity .2s ease, transform .2s ease;
}
.vit-tile:hover .vit-capa-play{opacity:1;transform:scale(1)}
/* concluído: badge de rever (↻) SEMPRE visível — afordância de reassistir/ouvir de novo */
.vit-capa-play--replay{opacity:1;transform:scale(1);cursor:pointer}
.vit-capa-selo{position:absolute;left:12px;top:12px;font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 7px;border-radius:4px}
.vit-selo-atual{background:var(--vit-azul-vivo);color:#fff}
.vit-selo-ok{background:rgba(232,237,245,.90);color:var(--vit-navy-2)}
.vit-selo-lock{background:rgba(6,13,28,.72);color:var(--vit-gelo-mudo);border:1px solid rgba(232,237,245,.18)}
.vit-capa-rail{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(6,13,28,.55)}
.vit-capa-rail i{display:block;height:100%;background:var(--vit-azul-vivo)}
.vit-tile-tit{font-size:13.5px;font-weight:600;line-height:1.35;margin:10px 2px 3px;color:var(--vit-gelo)}
.vit-tile-meta{font-size:11.5px;color:var(--vit-gelo-mudo);margin:0 2px}

/* tile bloqueado (mantém o gate de liberação — não é clicável) */
.vit-tile--locked{cursor:not-allowed}
.vit-tile--locked .vit-capa{filter:grayscale(.5) brightness(.7)}
.vit-tile--locked:hover{transform:none}

/* ---------- fileira de áudio (forma distinta) ---------- */
.vit-tile--audio{flex:0 0 268px}
.vit-tile--audio .vit-capa{
  height:76px;align-items:center;gap:12px;padding:0 14px;
  background:linear-gradient(100deg,#0B1731 0%, #142C55 100%);
}
.vit-tile--audio .vit-capa-num{font-size:44px;margin-left:0;-webkit-text-stroke-width:1.2px}
.vit-onda{display:flex;align-items:center;gap:3px;height:30px;margin-left:auto}
.vit-onda i{width:2.5px;border-radius:2px;background:rgba(46,125,209,.55);animation:vit-pulso 1.4s ease-in-out infinite}
.vit-tile--audio:nth-child(3n) .vit-onda i{background:rgba(232,237,245,.30)}
/* onda nos cards de áudio: canto inferior esquerdo, reduzida, com pílula
   semitransparente p/ contraste sobre qualquer capa (clara ou escura). */
.vit-onda--card{
  position:absolute;left:9px;bottom:9px;margin:0;
  padding:5px 7px;border-radius:6px;
  background:rgba(6,13,28,.45);box-shadow:0 1px 4px rgba(0,0,0,.35);
  transform:scale(.62);transform-origin:bottom left;   /* mesmo ícone, reduzido */
}
/* barras claras p/ legibilidade sobre imagem (vence a nth-child por ordem) */
.vit-tile--audio .vit-capa .vit-onda--card i{background:rgba(232,237,245,.92)}
@keyframes vit-pulso{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------- MODAL DO PLAYER ---------- */
.vit-modal{
  position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  background:rgba(3,7,16,.86);backdrop-filter:blur(6px);padding:24px;
}
.vit-modal.vit-aberto{display:flex}
.vit-modal-caixa{
  width:100%;max-width:1080px;background:var(--vit-navy);
  border:1px solid rgba(255,255,255,.09);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:vit-sobe .22s cubic-bezier(.2,.7,.3,1);
  /* caixa nunca passa da viewport; head/palco/desc/rodapé empilham em coluna
     -> o rodapé (.vit-modal-pe) fica sempre visível (fix do estouro) */
  display:flex;flex-direction:column;max-height:calc(100vh - 48px);
}
@keyframes vit-sobe{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.vit-modal-head{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.vit-modal-cap{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--vit-azul-vivo)}
.vit-modal-tit{font-size:15px;font-weight:600;letter-spacing:-.01em}
.vit-modal-x{
  margin-left:auto;width:34px;height:34px;border-radius:8px;
  background:rgba(232,237,245,.08);border:1px solid rgba(232,237,245,.12);
  color:var(--vit-gelo);font-size:16px;cursor:pointer;display:grid;place-items:center;
}
.vit-modal-x:hover{background:rgba(232,237,245,.16)}
.vit-modal-x:focus-visible{outline:2px solid var(--vit-azul-vivo);outline-offset:2px}

/* palco — 16:9 fixo, mas nunca mais alto que o espaço do modal (reserva ~170px
   p/ head+desc+rodapé). Quando a altura limita, o palco encolhe e o vídeo faz
   letterbox via object-fit:contain -> vê-se o vídeo inteiro, sem estouro. */
.vit-palco{position:relative;aspect-ratio:16/9;width:100%;min-height:0;
  max-height:calc(100vh - 48px - 170px);background:#050B18;display:grid;place-items:center}
.vit-palco-num{font-size:180px;font-weight:800;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px rgba(232,237,245,.10);user-select:none}
/* FIX do estouro: vídeo ABSOLUTE inset:0 -> o box fica travado no tamanho do
   palco (nunca a resolução nativa); object-fit:contain letterboxa o conteúdo. */
.vit-video{position:absolute;inset:0;width:100%;height:100%;background:#000;display:none;object-fit:contain}
/* capa no palco: fundo do player de ÁUDIO (estilo Spotify), object-fit:cover 16:9 */
.vit-palco-capa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;z-index:1}
/* player de áudio: barra nativa fixa no rodapé do palco, sobre a capa */
.vit-audio{position:absolute;left:0;right:0;bottom:0;width:100%;display:none;z-index:4}
/* overlay de PLAY central — aparece sobre a capa/número até o clique.
   z-index acima da capa(1)/watermark(3)/barra de áudio(4) p/ ser clicável. */
.vit-play-overlay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:5;width:84px;height:84px;border-radius:50%;
  background:rgba(6,13,28,.62);border:2px solid rgba(232,237,245,.85);
  color:#fff;font-size:32px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding-left:6px;   /* centra o ▶ óticamente */
  backdrop-filter:blur(2px);transition:transform .15s ease, background .15s ease;
}
.vit-play-overlay:hover{background:var(--vit-azul-vivo);transform:translate(-50%,-50%) scale(1.06)}
.vit-play-overlay:focus-visible{outline:2px solid var(--vit-azul-vivo);outline-offset:3px}
/* tela cheia: o palco vira o elemento fullscreen -> solta as travas de altura;
   vídeo/capa preenchem a tela (inset:0 já cobre), sem cortar */
.vit-palco:fullscreen{background:#000;max-height:none;aspect-ratio:auto}
.vit-palco:fullscreen .vit-video{object-fit:contain}
.vit-palco:fullscreen .vit-palco-num{font-size:26vw}
/* placeholder quando não há mídia (cloudfront_url vazio hoje) */
.vit-palco-holder{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:20px;
}
.vit-palco-holder .vit-palco-holder-msg{font-size:13px;color:var(--vit-gelo-mudo);letter-spacing:.02em}
.vit-palco-marca{position:absolute;font-size:11px;color:rgba(232,237,245,.30);right:18px;top:16px;letter-spacing:.04em;pointer-events:none;z-index:3}
.vit-palco:fullscreen .vit-palco-marca{color:rgba(232,237,245,.42)}

/* controles */
.vit-ctrl{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;background:linear-gradient(180deg,transparent,rgba(3,7,16,.92))}
.vit-ctrl-rail{height:4px;border-radius:2px;background:rgba(232,237,245,.20);margin-bottom:12px;position:relative}
.vit-ctrl-rail i{display:block;height:100%;width:0%;background:var(--vit-azul-vivo);border-radius:2px}
.vit-ctrl-linha{display:flex;align-items:center;gap:10px}
.vit-cbtn{
  height:34px;min-width:34px;padding:0 10px;border-radius:7px;
  background:rgba(232,237,245,.08);border:1px solid rgba(232,237,245,.12);
  color:var(--vit-gelo);font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.vit-cbtn:hover{background:rgba(232,237,245,.16)}
.vit-cbtn:focus-visible{outline:2px solid var(--vit-azul-vivo);outline-offset:2px}
.vit-ctrl-tempo{font-size:12px;color:var(--vit-gelo-mudo);margin-left:2px}
.vit-ctrl-dir{margin-left:auto;display:flex;gap:8px;align-items:center}
.vit-cbtn--full{background:var(--vit-gelo);color:var(--vit-navy-2);border-color:transparent}
.vit-cbtn--full:hover{background:#fff}

/* descrição clampada em 2 linhas -> reserva de altura do palco fica previsível
   e o rodapé nunca é empurrado para fora */
.vit-modal-desc{padding:0 18px 4px;font-size:13px;color:#B9C4D6;line-height:1.55;margin-top:14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vit-modal-desc:empty{display:none}
.vit-modal-pe{display:flex;gap:10px;padding:14px 18px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.07)}

/* ---------- responsivo ---------- */
@media (max-width:768px){
  .vit-hero-card{min-height:auto}
  .vit-hero-txt{padding:24px 20px;max-width:100%}
  .vit-hero-tit{font-size:26px}
  .vit-hero-num{font-size:130px;right:16px;opacity:.7}
  .vit-hero-capa{width:100%}   /* full-bleed sob o véu vertical no mobile */
  .vit-hero-veu{background:linear-gradient(180deg, rgba(6,13,28,.55) 0%, rgba(6,13,28,.92) 60%)}
  .vit-acoes{flex-direction:column}
  .vit-btn{width:100%;justify-content:center}
  .vit-rail{max-width:none}
  .vit-tile{flex:0 0 200px}
  .vit-capa{height:118px}
  .vit-capa-num{font-size:64px}
  .vit-tile--audio{flex:0 0 236px}
  .vit-fileira{margin-top:28px}

  .vit-modal{padding:0;align-items:stretch}
  .vit-modal-caixa{max-width:none;border-radius:0;border:0;display:flex;flex-direction:column;min-height:100%}
  .vit-palco-num{font-size:88px}
  .vit-ctrl-linha{flex-wrap:wrap}
  .vit-ctrl-dir{margin-left:0;width:100%;margin-top:8px}
  .vit-cbtn--full{flex:1;justify-content:center}
  .vit-modal-pe .vit-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .vit-scope *{animation:none!important;transition:none!important}
}