/* Vitrine "Veja funcionando" (/altyfood-novo): vídeos reais em sequência + cartões de vidro.
   Dados em core/institucional/vitrine.js; lógica em novo.js (bloco "Vitrine"). */
.vitrine{position:relative}
.vitrine::before{content:"";position:absolute;left:50%;top:180px;width:900px;height:600px;transform:translateX(-50%);background:radial-gradient(ellipse,#6c5cff2e,transparent 65%);pointer-events:none;filter:blur(20px)}
.vt{position:relative;display:grid;grid-template-columns:290px 1fr;gap:34px;margin-top:46px;align-items:start}

/* Lista de capítulos */
.vt-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vt-grupo{font:700 12px/1 var(--texto);letter-spacing:1.6px;text-transform:uppercase;color:var(--roxo2);margin:14px 4px 4px}
.vt-grupo:first-child{margin-top:0}
.vt-cap{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:16px;border:1px solid transparent;background:transparent;color:var(--muted);font:600 15px/1.25 var(--texto);text-align:left;cursor:pointer;overflow:hidden;transition:background .25s,border-color .25s,color .25s}
.vt-cap:hover{background:#ffffff08;color:var(--txt)}
.vt-cap:focus-visible{outline:3px solid var(--roxo2);outline-offset:2px}
.vt-cap.ativo{background:linear-gradient(135deg,#6c5cff26,#d65cff14);border-color:var(--line2);color:var(--txt)}
.vt-ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:#ffffff0d;font-size:19px}
.vt-cap.ativo .vt-ico{background:linear-gradient(135deg,var(--roxo),var(--azul));box-shadow:0 6px 20px #6c5cff66}
.vt-prog{position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;background:#ffffff12;opacity:0;transition:opacity .25s}
.vt-cap.ativo .vt-prog{opacity:1}
.vt-prog i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--roxo2),var(--rosa),var(--laranja))}

/* Palco */
.vt-palco{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.vt-palco.vertical{min-height:690px}
.vt-palco.deitado{padding-top:40px}
.vt-aparelho{position:relative;z-index:1;background:#000;overflow:hidden;box-shadow:0 40px 90px #000000a0,0 0 0 1px #ffffff1f;transition:opacity .35s}
.vt-aparelho video{display:block;width:100%;height:100%;object-fit:cover;background:#0b0920}
.vt-aparelho.trocando{opacity:0}
.vt-palco.vertical .vt-aparelho{width:300px;aspect-ratio:592/1280;border-radius:42px;border:10px solid #17142e;box-shadow:0 40px 90px #000000a0,0 0 0 1px #ffffff26,0 0 80px #6c5cff33}
.vt-palco.vertical .vt-aparelho video{border-radius:32px}
.vt-palco.deitado .vt-aparelho{width:100%;border-radius:14px;padding-top:30px;background:#17142e}
.vt-palco.deitado .vt-aparelho::before{content:"";position:absolute;left:14px;top:11px;width:9px;height:9px;border-radius:50%;background:#ff5f57;box-shadow:15px 0 #febc2e,30px 0 #28c840}
.vt-aparelho .real{position:absolute;right:12px;top:40px;z-index:2;padding:5px 10px;border-radius:20px;background:#000000b3;color:#fff;font:700 11px/1 var(--texto);letter-spacing:.4px}
.vt-palco.vertical .vt-aparelho .real{top:14px;right:50%;transform:translateX(50%)}
.vt-aparelho .real::first-letter{color:#ff4d4d}
.vt-nota{display:block;margin-top:14px;min-height:20px;font-size:13px;color:var(--muted);text-align:center}
.vt-nota:empty{visibility:hidden}

/* Rodapé do palco */
.vt-rodape{display:flex;align-items:center;gap:14px;width:100%;max-width:760px;margin-top:6px}
.vt-resumo{flex:1;margin:0;color:var(--muted);font-size:15px}
.vt-pausa{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:#ffffff0d;color:var(--txt);font-size:13px;cursor:pointer}
.vt-pausa:hover{background:#ffffff1a}

/* Cartões de vidro */
.vt-cartoes{position:absolute;inset:0;pointer-events:none;z-index:2}
.vt-cartao{position:absolute;display:flex;align-items:center;gap:12px;max-width:270px;padding:13px 16px 13px 13px;border-radius:18px;
  background:linear-gradient(135deg,#221c52e6,#0f0b2bcc);border:1px solid #ffffff38;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 18px 50px #00000066,inset 0 1px 0 #ffffff2e;color:#fff;font:700 16px/1.3 var(--texto);
  opacity:0;transform:translateY(16px) scale(.96);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.3,1.2)}
.vt-cartao.on{opacity:1;transform:none}
.vt-cartao.velho{opacity:.7}
.vt-cartao b{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#6c5cffcc,#d65cffaa);font-size:19px;box-shadow:0 6px 18px #6c5cff55}
.vt-cartao .l{display:inline-block;opacity:0;transform:translateY(6px);filter:blur(4px);transition:opacity .3s,transform .3s,filter .3s}
.vt-cartao.on .l{opacity:1;transform:none;filter:none}
.vt-cartao .pal{white-space:nowrap}
.vt-cartao::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,transparent 30%,#ffffffaa 50%,transparent 70%) 200% 0/250% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0}
.vt-cartao.on::after{animation:vt-brilho 1.4s .2s ease-out;opacity:1}
@keyframes vt-brilho{from{background-position:200% 0}to{background-position:-60% 0}}

/* Celular em pé: cartões dos dois lados, acumulando (lado/topo vêm do JS) */
.vt-palco.vertical .vt-cartao.esq{right:calc(50% + 168px)}
.vt-palco.vertical .vt-cartao.dir{left:calc(50% + 168px)}
/* Tela deitada: cartões por cima do vídeo, embaixo à esquerda, só os 2 mais novos */
.vt-palco.deitado .vt-cartoes{inset:auto auto 96px 18px;display:flex;flex-direction:column-reverse;gap:10px}
.vt-palco.deitado .vt-cartao{position:relative;top:auto!important}
.vt-palco.deitado.cartoes-dir .vt-cartoes{left:auto;right:18px;top:96px;bottom:auto;flex-direction:column}
.vt-palco.deitado .vt-cartao.velho2{display:none}

@media (max-width:1100px){
  .vt-palco.vertical .vt-cartao{max-width:210px;font-size:14px}
  .vt-palco.vertical .vt-cartao.esq{right:calc(50% + 160px)}
  .vt-palco.vertical .vt-cartao.dir{left:calc(50% + 160px)}
}
@media (max-width:900px){
  .vt{grid-template-columns:1fr;gap:20px}
  .vt-lista{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 85%,transparent)}
  .vt-lista::-webkit-scrollbar{display:none}
  .vt-grupo{display:none}
  .vt-cap{flex:none;width:auto;padding:9px 14px 12px 9px;border-color:var(--line)}
  .vt-ico{width:30px;height:30px;font-size:16px}
  .vt-palco{min-height:0}
  .vt-palco.vertical .vt-aparelho{width:min(270px,72vw)}
  /* no celular os cartões ficam por cima do vídeo, como na tela deitada */
  .vt-palco .vt-cartoes{inset:auto auto 74px 50%!important;transform:translateX(-50%);width:min(300px,86vw);display:flex;flex-direction:column-reverse;gap:8px}
  .vt-palco.deitado .vt-cartoes{bottom:84px!important}
  .vt-palco .vt-cartao{position:relative;top:auto!important;left:auto!important;right:auto!important;max-width:none;font-size:14px;padding:10px 12px 10px 10px}
  .vt-palco .vt-cartao b{width:32px;height:32px;font-size:16px}
  .vt-palco .vt-cartao.velho2{display:none}
  .vt-palco.deitado .vt-cartao.velho{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vt-cartao,.vt-cartao .l{transition:none}
  .vt-cartao.on::after{animation:none}
}