/* ==========================================================================
   Vitrine animada dos profissionais (vitrine.js): mini apresentacao no
   padrao das apresentacoes do Guia Lupa. Palco escuro com fotos em
   movimento, montagens, etiqueta flutuante e progresso; abaixo, a identidade
   (logotipo com aneis, nome, nota), destaques, servicos e o botao de agendar.
   ========================================================================== */

.vt-card {
  --v1: #38BDF8; --v2: #1EA7FF; --v3: #2563EB;
  --vgrad: linear-gradient(100deg, var(--v1), var(--v2) 55%, var(--v3));
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--r-xl); overflow: hidden; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-sm); isolation: isolate;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.vt-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--v2) 70%, transparent), var(--shadow-sm); text-decoration: none; }
.vt-card:focus-visible { outline: 3px solid var(--v2); outline-offset: 3px; }
.vt-card.unavailable { opacity: .6; }

/* ------------------------------------------------------------------ palco */
.vt-stage { position: relative; z-index: 0; display: block; aspect-ratio: 10 / 9; overflow: hidden; background: #05080F; color: #fff; }
.vt-scenes { position: absolute; inset: 0; }
.vt-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.vt-scene.on { opacity: 1; z-index: 1; }
.vt-scene.out { opacity: 0; z-index: 0; }
.vt-ph { position: absolute; inset: -5%; background: center / cover no-repeat; transform: scale(1.1); will-change: transform; }
.vt-scene.on .vt-ph { animation: vtKb 9s ease-out forwards; }
.vt-scene.vt-alt.on .vt-ph { animation-name: vtKb2; }
@keyframes vtKb { from { transform: scale(1.16) translate3d(2%, 1.5%, 0); } to { transform: scale(1.02) translate3d(-1.5%, -1%, 0); } }
@keyframes vtKb2 { from { transform: scale(1.03) translate3d(-2%, 1%, 0); } to { transform: scale(1.15) translate3d(1.5%, -1.5%, 0); } }
.vt-still .vt-scene.on .vt-ph { animation: none; transform: scale(1.04); transition: transform 6s ease-out; }
.vt-still:hover .vt-scene.on .vt-ph { transform: scale(1.12); }
.vt-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.vt-scene.vt-vid-on .vt-video { opacity: 1; }

/* Animacao da imagem (por cena). Vale para a foto da cena, o fundo da
   apresentacao/agenda e as fotos dentro das molduras da dupla e do trio. */
.vt-scene.on.vt-mo-zoomin .vt-ph, .vt-scene.on.vt-mo-zoomin .vt-frame .vt-img { animation: vtZoomIn 7s ease-out forwards; }
.vt-scene.on.vt-mo-zoomout .vt-ph, .vt-scene.on.vt-mo-zoomout .vt-frame .vt-img { animation: vtZoomOut 7s cubic-bezier(.2, .7, .3, 1) forwards; }
.vt-scene.on.vt-mo-pan .vt-ph, .vt-scene.on.vt-mo-pan .vt-frame .vt-img { animation: vtPan 8s ease-in-out forwards; }
.vt-scene.on.vt-alt.vt-mo-pan .vt-ph { animation-direction: reverse; }
.vt-scene.on.vt-mo-rise .vt-ph, .vt-scene.on.vt-mo-rise .vt-frame .vt-img { animation: vtRise 8s ease-out forwards; }
.vt-scene.on.vt-mo-pulse .vt-ph, .vt-scene.on.vt-mo-pulse .vt-frame .vt-img { animation: vtBreath 4.2s ease-in-out infinite; }
.vt-scene.on.vt-mo-tilt .vt-ph, .vt-scene.on.vt-mo-tilt .vt-frame .vt-img { animation: vtTilt 8s ease-out forwards; }
.vt-scene.on.vt-mo-focus .vt-ph:not(.vt-blur):not(.vt-dim), .vt-scene.on.vt-mo-focus .vt-frame .vt-img { animation: vtFocus 7s cubic-bezier(.2, .7, .3, 1) forwards; }
.vt-scene.on.vt-mo-focus .vt-ph.vt-dim { animation: vtFocusDim 7s cubic-bezier(.2, .7, .3, 1) forwards; }
.vt-scene.on.vt-mo-drift .vt-ph, .vt-scene.on.vt-mo-drift .vt-frame .vt-img { animation: vtDrift 8s ease-out forwards; }
.vt-scene.on.vt-mo-swing .vt-ph, .vt-scene.on.vt-mo-swing .vt-frame .vt-img { animation: vtSwing 5s ease-in-out infinite; }
.vt-scene.on.vt-mo-dolly .vt-ph, .vt-scene.on.vt-mo-dolly .vt-frame .vt-img { animation: vtDolly 6s cubic-bezier(.15, .7, .25, 1) forwards; }
@keyframes vtDrift { from { transform: scale(1.18) translate3d(-4%, 3%, 0); } to { transform: scale(1.18) translate3d(4%, -3%, 0); } }
@keyframes vtSwing { 0%, 100% { transform: scale(1.12) rotate(-2deg); } 50% { transform: scale(1.12) rotate(2deg); } }
@keyframes vtDolly { from { transform: scale(1.4) translate3d(0, 4%, 0); } to { transform: scale(1.04) translate3d(0, 0, 0); } }
@keyframes vtZoomIn { from { transform: scale(1.02); } to { transform: scale(1.2); } }
@keyframes vtZoomOut { from { transform: scale(1.32); } to { transform: scale(1.03); } }
@keyframes vtPan { from { transform: scale(1.16) translate3d(-4.5%, 0, 0); } to { transform: scale(1.16) translate3d(4.5%, 0, 0); } }
@keyframes vtRise { from { transform: scale(1.16) translate3d(0, 5%, 0); } to { transform: scale(1.1) translate3d(0, -3.5%, 0); } }
@keyframes vtBreath { 0%, 100% { transform: scale(1.04); } 50% { transform: scale(1.13); } }
@keyframes vtTilt { from { transform: scale(1.22) rotate(-3deg); } to { transform: scale(1.06) rotate(1.5deg); } }
@keyframes vtFocus { 0% { transform: scale(1.22); filter: blur(12px) brightness(.7); } 30% { filter: blur(0) brightness(1); } 100% { transform: scale(1.04); filter: blur(0) brightness(1); } }
@keyframes vtFocusDim { 0% { transform: scale(1.22); filter: blur(12px) brightness(.3); } 30% { filter: blur(0) brightness(.45); } 100% { transform: scale(1.04); filter: blur(0) brightness(.45) saturate(1.1); } }

/* Montagens: fundo desfocado + molduras inclinadas que entram em cena */
.vt-blur { filter: blur(18px) saturate(1.2) brightness(.55); inset: -12%; }
.vt-frame { position: absolute; z-index: 2; border-radius: 16px; overflow: hidden; background: #111827; box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .18); opacity: 0; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.vt-img { position: absolute; inset: 0; background: center / cover no-repeat; }
.vt-scene.on .vt-frame { opacity: 1; }
.vt-f-duo1 { left: 7%; top: 15%; width: 47%; height: 62%; transform: translate(-26px, 18px) rotate(-12deg); }
.vt-f-duo2 { right: 7%; top: 21%; width: 47%; height: 62%; transform: translate(26px, 24px) rotate(12deg); }
.vt-scene.on .vt-f-duo1 { transform: rotate(-5deg); transition-delay: .15s; }
.vt-scene.on .vt-f-duo2 { transform: rotate(4deg); transition-delay: .35s; }
.vt-f-tri1 { left: 6%; top: 15%; width: 56%; height: 64%; transform: translateX(-30px) rotate(-8deg); }
.vt-f-tri2 { right: 6%; top: 14%; width: 34%; height: 31%; transform: translate(30px, -10px) rotate(9deg); }
.vt-f-tri3 { right: 9%; top: 48%; width: 34%; height: 31%; transform: translate(30px, 16px) rotate(-6deg); }
.vt-scene.on .vt-f-tri1 { transform: rotate(-3deg); transition-delay: .1s; }
.vt-scene.on .vt-f-tri2 { transform: rotate(4deg); transition-delay: .3s; }
.vt-scene.on .vt-f-tri3 { transform: rotate(-2deg); transition-delay: .5s; }
.vt-scene.on .vt-frame .vt-img { animation: vtZoom 8s ease-out forwards; }
@keyframes vtZoom { from { transform: scale(1.12); } to { transform: scale(1); } }

/* Sem foto: arte da categoria sobre o gradiente do tema */
.vt-art { background: radial-gradient(70% 70% at 30% 30%, color-mix(in srgb, var(--v1) 55%, transparent), transparent 70%), radial-gradient(60% 60% at 80% 80%, color-mix(in srgb, var(--v3) 70%, transparent), transparent 70%), #0A1120; display: grid; place-items: center; }
.vt-art-ic { width: 38%; aspect-ratio: 1; border-radius: 30%; display: grid; place-items: center; font-size: clamp(42px, 7vw, 64px); color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: vtBob 5s ease-in-out infinite; }

/* Camadas de cinema */
/* So o alto escurece (categoria legivel); embaixo a cena fica com o tom original. */
.vt-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(5, 8, 15, .55) 0%, transparent 26%); }
.vt-glow { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: .5; background: radial-gradient(45% 50% at 0% 100%, color-mix(in srgb, var(--v1) 45%, transparent), transparent 70%), radial-gradient(45% 50% at 100% 0%, color-mix(in srgb, var(--v3) 40%, transparent), transparent 70%); }
.vt-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.vt-top { position: absolute; z-index: 5; left: 12px; right: 60px; top: 12px; display: flex; gap: 6px; }
.vt-cat { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 12px 5px 5px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .01em; color: #fff; background: rgba(10, 16, 30, .55); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.vt-cat ion-icon { flex-shrink: 0; width: 22px; height: 22px; padding: 4px; box-sizing: border-box; border-radius: 50%; color: #fff; background: var(--c, var(--v2)); }
.vt-cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-fav { position: absolute; top: 10px; right: 10px; z-index: 6; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); display: grid; place-items: center; background: rgba(10, 16, 30, .45); color: #fff; font-size: 19px; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .15s ease, background .2s; }
.vt-fav:hover { background: rgba(10, 16, 30, .7); }
.vt-fav.on { color: #fb7185; background: rgba(255, 255, 255, .95); border-color: transparent; }
.vt-fav:active { transform: scale(.88); }
.vt-fav.on ion-icon { animation: heart .35s ease; }
.vt-badge { position: absolute; z-index: 5; left: 14px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #0B1A2C; background: rgba(255, 255, 255, .94); }

/* Etiqueta flutuante (tooltip da cena). .vt-tag so posiciona (e some na
   troca de cena); o desenho e a animacao ficam em .vt-tag-in, para a entrada
   nao brigar com a posicao livre. */
.vt-tag { position: absolute; z-index: 5; left: 12px; top: 52px; max-width: calc(100% - 24px); display: inline-flex; transition: opacity .4s, scale .4s cubic-bezier(.2, .8, .2, 1), left .4s, right .4s, top .4s; }
.vt-tag-in { position: relative; display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; padding: 7px 13px 7px 7px; border-radius: 16px; color: #0B1A2C; background: rgba(255, 255, 255, .96); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .75); }
.vt-tag-in::after { content: ''; position: absolute; left: 22px; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.vt-tag.vt-right { left: auto; right: 12px; top: 58px; }
.vt-tag.vt-right .vt-tag-in::after { left: auto; right: 22px; }
.vt-tag.swap, .vt-tag.vt-hide { opacity: 0; scale: .94; }
.vt-tag.vt-free { right: auto; width: max-content; max-width: 78%; transform: translate(var(--tx, 0), var(--ty, 0)); transition: opacity .4s, scale .4s; }
.vt-tag.vt-free .vt-tag-in::after { display: none; }
.vt-tag-sh { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.vt-tag-sh::before { content: ''; position: absolute; top: -40%; bottom: -40%; left: -70%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent); transform: skewX(-18deg); opacity: 0; }
.vt-tag-ic { position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; color: #fff; background: var(--vgrad); }
.vt-tag-tx { position: relative; min-width: 0; display: grid; }
.vt-tag b { font-size: 13px; line-height: 1.2; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-tag small { font-size: 11px; line-height: 1.25; color: #4A5E75; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes vtBob { 50% { translate: 0 -6px; } }

/* Animacoes da etiqueta (por cena): entrada + movimento continuo. A entrada
   roda mesmo com o cartao parado; o movimento continuo so com ele tocando. */
.vt-tin.vt-ta-float .vt-tag-in { animation: vtTagRise .65s cubic-bezier(.2, .8, .2, 1) both, vtBob 4.6s ease-in-out .65s infinite; }
.vt-tin.vt-ta-pop .vt-tag-in { animation: vtTagPop .75s cubic-bezier(.2, 1.4, .4, 1) both, vtBob 5s ease-in-out .75s infinite; }
.vt-tin.vt-ta-slide .vt-tag-in { animation: vtTagSlideL .7s cubic-bezier(.2, .8, .2, 1) both, vtSway 5.2s ease-in-out .7s infinite; }
.vt-tin.vt-ta-slide.vt-right .vt-tag-in { animation-name: vtTagSlideR, vtSway; }
.vt-tin.vt-ta-pulse .vt-tag-in { animation: vtTagRise .55s cubic-bezier(.2, .8, .2, 1) both, vtTagPulse 2s ease-out .55s infinite; }
.vt-tin.vt-ta-pulse .vt-tag-ic { animation: vtBeat 2s ease-in-out .55s infinite; }
.vt-tin.vt-ta-shine .vt-tag-in { animation: vtTagRise .6s cubic-bezier(.2, .8, .2, 1) both; }
.vt-tin.vt-ta-shine .vt-tag-sh::before { animation: vtShine 2.8s ease-in-out .5s infinite; }
.vt-tag { perspective: 420px; }
.vt-tin.vt-ta-drop .vt-tag-in { animation: vtTagDrop .75s cubic-bezier(.3, 1.5, .5, 1) both, vtBob 4.6s ease-in-out .75s infinite; }
.vt-tin.vt-ta-flip .vt-tag-in { animation: vtTagFlip .7s cubic-bezier(.2, .8, .2, 1) both, vtBob 4.6s ease-in-out .7s infinite; }
.vt-tin.vt-ta-zoom .vt-tag-in { animation: vtTagZoom .6s cubic-bezier(.2, .8, .2, 1) both, vtBob 4.6s ease-in-out .6s infinite; }
.vt-tin.vt-ta-wiggle .vt-tag-in { animation: vtTagRise .6s cubic-bezier(.2, .8, .2, 1) both, vtWiggle 2.4s ease-in-out .6s infinite; }
.vt-tin.vt-ta-glow .vt-tag-in { animation: vtTagRise .6s cubic-bezier(.2, .8, .2, 1) both, vtGlow 2.4s ease-in-out .6s infinite; }
@keyframes vtTagDrop { 0% { opacity: 0; translate: 0 -40px; } 40% { opacity: 1; } 100% { translate: 0 0; } }
@keyframes vtTagFlip { from { opacity: 0; rotate: x 90deg; } }
@keyframes vtTagZoom { from { opacity: 0; scale: 1.6; } }
@keyframes vtWiggle { 0%, 30%, 100% { rotate: 0deg; } 6% { rotate: -4deg; } 12% { rotate: 4deg; } 18% { rotate: -3deg; } 24% { rotate: 2deg; } }
@keyframes vtGlow { 0%, 100% { box-shadow: 0 0 0 0 transparent, 0 20px 40px -14px rgba(0, 0, 0, .75); } 50% { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--v1) 75%, transparent), 0 20px 40px -14px rgba(0, 0, 0, .75); } }
@keyframes vtTagRise { from { opacity: 0; translate: 0 16px; } }
@keyframes vtTagPop { 0% { opacity: 0; scale: .45; } 60% { opacity: 1; scale: 1.08; } 100% { scale: 1; } }
@keyframes vtTagSlideL { from { opacity: 0; translate: -46px 0; } }
@keyframes vtTagSlideR { from { opacity: 0; translate: 46px 0; } }
@keyframes vtSway { 50% { translate: 5px -4px; } }
@keyframes vtTagPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--v2) 70%, transparent), 0 20px 40px -14px rgba(0, 0, 0, .75); }
  70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--v2) 0%, transparent), 0 20px 40px -14px rgba(0, 0, 0, .75); }
  100% { box-shadow: 0 0 0 0 transparent, 0 20px 40px -14px rgba(0, 0, 0, .75); }
}
@keyframes vtBeat { 0%, 60%, 100% { scale: 1; } 15% { scale: 1.18; } 30% { scale: .96; } 45% { scale: 1.1; } }
@keyframes vtShine { 0% { left: -70%; opacity: 1; } 45%, 100% { left: 130%; opacity: 1; } }

/* Formatos da etiqueta (o profissional escolhe) */
.vt-ts-dark .vt-tag-in { color: #fff; background: rgba(8, 12, 22, .9); border: 1px solid rgba(255, 255, 255, .14); }
.vt-ts-dark .vt-tag small { color: #A9B6C9; }
.vt-ts-glass .vt-tag-in { color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .6); }
.vt-ts-glass .vt-tag small { color: rgba(255, 255, 255, .78); }
.vt-ts-glass .vt-tag-in::after { display: none; }
.vt-ts-color .vt-tag-in { color: #fff; background: var(--vgrad); }
.vt-ts-color .vt-tag small { color: rgba(255, 255, 255, .85); }
.vt-ts-color .vt-tag-ic { background: rgba(255, 255, 255, .22); }
.vt-ts-color .vt-tag-in::after { background: var(--v2); }
.vt-th-grafite.vt-ts-color .vt-tag-in, .vt-th-grafite.vt-ts-color .vt-tag small { color: #0B1220; }
.vt-ts-pill .vt-tag-in { padding: 4px 12px 4px 4px; border-radius: 999px; gap: 7px; }
.vt-ts-pill .vt-tag-ic { width: 24px; height: 24px; border-radius: 50%; font-size: 13px; }
/* Emoji no lugar do icone: o do sistema, colorido, sem o quadrado do tema. */
.vt-tag-ic.vt-tag-emo, .vt-ts-color .vt-tag-ic.vt-tag-emo, .vt-ts-neon .vt-tag-ic.vt-tag-emo { background: none; border: 0; box-shadow: none; color: inherit; font-size: 23px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.vt-ts-pill .vt-tag-ic.vt-tag-emo { font-size: 17px; }
.vt-ts-pill .vt-tag small { display: none; }
.vt-ts-pill .vt-tag-in::after { display: none; }
.vt-ts-outline .vt-tag-in { color: #fff; background: rgba(5, 8, 15, .3); border: 2px solid var(--v1); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .7); }
.vt-ts-outline .vt-tag small { color: rgba(255, 255, 255, .82); }
.vt-ts-outline .vt-tag-in::after { display: none; }
.vt-ts-neon .vt-tag-in { color: #fff; background: rgba(8, 12, 22, .88); border: 1.5px solid var(--v1); box-shadow: 0 0 16px color-mix(in srgb, var(--v1) 60%, transparent), 0 16px 34px -18px rgba(0, 0, 0, .7); }
.vt-ts-neon .vt-tag small { color: color-mix(in srgb, var(--v1) 70%, #fff); }
.vt-ts-neon .vt-tag-ic { background: transparent; color: var(--v1); border: 1.5px solid var(--v1); }
.vt-ts-neon .vt-tag-in::after { display: none; }
.vt-ts-stripe .vt-tag-in { border-radius: 10px; padding-left: 12px; background: #fff; }
.vt-ts-stripe .vt-tag-in::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 10px 0 0 10px; background: var(--vgrad); }
.vt-ts-stripe .vt-tag-in::after { display: none; }

/* Fundo da apresentacao e da agenda sem foto (o profissional escolhe) */
.vt-dim { filter: brightness(.45) saturate(1.1); }
.vt-art-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(70% 70% at 25% 25%, color-mix(in srgb, var(--v1) 50%, transparent), transparent 70%), radial-gradient(60% 60% at 85% 85%, color-mix(in srgb, var(--v3) 65%, transparent), transparent 70%), #0A1120; }
.vt-art-bg i { display: none; }
.vt-bg-aurora { background: #070B16; }
.vt-bg-aurora i { display: block; position: absolute; width: 75%; aspect-ratio: 1; border-radius: 50%; filter: blur(34px); opacity: .7; mix-blend-mode: screen; }
.vt-bg-aurora i:nth-child(1) { left: -18%; top: -24%; background: var(--v1); animation: vtAur1 9s ease-in-out infinite alternate; }
.vt-bg-aurora i:nth-child(2) { right: -22%; top: 18%; background: var(--v2); animation: vtAur2 11s ease-in-out infinite alternate; }
.vt-bg-aurora i:nth-child(3) { left: 14%; bottom: -40%; background: var(--v3); animation: vtAur3 10s ease-in-out infinite alternate; }
@keyframes vtAur1 { to { transform: translate(34%, 26%) scale(1.15); } }
@keyframes vtAur2 { to { transform: translate(-30%, 20%) scale(.85); } }
@keyframes vtAur3 { to { transform: translate(18%, -34%) scale(1.2); } }
.vt-bg-solid { background: radial-gradient(120% 90% at 50% 0%, #141d33, #070B16 70%); }
.vt-bg-solid::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.5px); background-size: 16px 16px; -webkit-mask: linear-gradient(transparent, #000 40%, transparent); mask: linear-gradient(transparent, #000 40%, transparent); }

/* Cena de apresentacao do profissional: modelo (centralizado, lado a lado,
   cartao de vidro ou cartaz), animacao do texto e o que aparece. */
.vt-stage { container-type: inline-size; }
.vt-intro { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 44px 18px 30px; }
.vt-intro-box { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; min-width: 0; text-align: center; }
.vt-intro-copy { display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 100%; min-width: 0; }
.vt-intro-logo { position: relative; flex-shrink: 0; width: min(39.1cqw, 161px); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 8px; opacity: 0; transform: scale(.7); transition: opacity .7s, transform .9s cubic-bezier(.2, .9, .2, 1.2); }
.vt-intro-logo img, .vt-intro-logo b { position: relative; z-index: 2; width: 84%; height: 84%; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 20px 50px -14px color-mix(in srgb, var(--v2) 80%, transparent); }
.vt-intro-logo b { display: grid; place-items: center; font-size: clamp(22px, 11cqw, 40px); font-weight: 900; color: #fff; background: var(--vgrad); }
.vt-intro-logo .vt-ring { inset: 1%; }
.vt-orb { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); pointer-events: none; }
.vt-orb.o1 { width: 190%; height: 190%; margin: -95% 0 0 -95%; animation: vtSpin 30s linear infinite; }
.vt-orb.o2 { width: 145%; height: 145%; margin: -72.5% 0 0 -72.5%; border-color: color-mix(in srgb, var(--v1) 45%, transparent); animation: vtSpin 20s linear infinite reverse; }
.vt-orb::before { content: ''; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--v1); box-shadow: 0 0 14px var(--v1); }
.vt-orb.o2::before { top: auto; bottom: -5px; background: var(--v3); box-shadow: 0 0 14px var(--v3); }
@keyframes vtSpin { to { transform: rotate(360deg); } }
.vt-intro-name { max-width: 100%; font-size: clamp(20px, 8cqw, 34px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; color: #fff; text-wrap: balance; overflow-wrap: anywhere; }
.vt-intro-cat { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--v1); }
.vt-intro-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 12px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .88); }
.vt-intro-meta span { display: inline-flex; align-items: center; gap: 4px; }
.vt-intro-meta ion-icon { color: var(--v1); }
.vt-intro-text { max-width: 92%; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .82); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vt-iv-side .vt-intro-box { flex-direction: row; gap: 16px; text-align: left; }
.vt-iv-side .vt-intro-copy { align-items: flex-start; }
.vt-iv-side .vt-intro-logo { width: min(34.5cqw, 172px); margin: 0; }
.vt-iv-side .vt-intro-meta { justify-content: flex-start; }
.vt-iv-side .vt-intro-text { max-width: 100%; }
.vt-iv-card .vt-intro-box { max-width: 88%; padding: 18px 18px 16px; border-radius: 24px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85); }
.vt-iv-card .vt-intro-logo { width: min(25.3cqw, 126px); margin-bottom: 2px; }
.vt-iv-card .vt-orb { display: none; }
.vt-iv-poster { align-items: flex-end; align-items: safe flex-end; justify-content: flex-start; padding-bottom: 30px; }
/* Se o conteudo nao couber, alinha pelo topo (nunca corta o logotipo) e, em
   cartoes estreitos, o texto fica em ate 2 linhas. */
.vt-intro { align-items: safe center; }
.vt-intro.vt-iv-poster { align-items: safe flex-end; }
@container (max-width: 340px) { .vt-intro-text, .vt-intro-name { -webkit-line-clamp: 2; } .vt-intro-name { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .vt-intro { padding-top: 40px; } .vt-intro.vt-iv-poster { padding-top: 50px; } }
.vt-iv-poster .vt-intro-box, .vt-iv-poster .vt-intro-copy { align-items: flex-start; text-align: left; }
.vt-iv-poster .vt-intro-logo { width: min(21.85cqw, 97px); margin-bottom: 4px; }
.vt-iv-poster .vt-orb { display: none; }
.vt-iv-poster .vt-intro-name { font-size: clamp(26px, 11cqw, 54px); line-height: .98; }
.vt-iv-poster .vt-intro-meta { justify-content: flex-start; }
.vt-iv-poster .vt-intro-text { max-width: 100%; }
.vt-iv-top { align-items: flex-start; }
.vt-iv-top .vt-intro-logo { width: min(27cqw, 110px); margin-bottom: 4px; }
/* Lado a lado com o logotipo a direita, coluna ou linha com texto a esquerda */
.vt-iv-mirror .vt-intro-box, .vt-iv-band .vt-intro-box, .vt-iv-solid .vt-intro-box, .vt-iv-corner .vt-intro-box { flex-direction: row; gap: 14px; text-align: left; }
.vt-iv-mirror .vt-intro-box { flex-direction: row-reverse; gap: 16px; }
.vt-iv-mirror .vt-intro-copy, .vt-iv-band .vt-intro-copy, .vt-iv-solid .vt-intro-copy, .vt-iv-corner .vt-intro-copy { align-items: flex-start; }
.vt-iv-mirror .vt-intro-meta, .vt-iv-band .vt-intro-meta, .vt-iv-solid .vt-intro-meta, .vt-iv-corner .vt-intro-meta { justify-content: flex-start; }
.vt-iv-mirror .vt-intro-text, .vt-iv-band .vt-intro-text, .vt-iv-solid .vt-intro-text, .vt-iv-corner .vt-intro-text { max-width: 100%; }
.vt-iv-mirror .vt-intro-logo { width: min(32cqw, 150px); margin: 0; }
.vt-iv-band .vt-intro-logo, .vt-iv-corner .vt-intro-logo { width: min(17cqw, 64px); margin: 0; }
.vt-iv-solid .vt-intro-logo { width: min(20cqw, 76px); margin: 0; }
.vt-iv-band .vt-intro-name, .vt-iv-solid .vt-intro-name, .vt-iv-corner .vt-intro-name { font-size: clamp(17px, 6cqw, 26px); }
.vt-iv-band .vt-orb, .vt-iv-frame .vt-orb, .vt-iv-solid .vt-orb, .vt-iv-corner .vt-orb { display: none; }
/* Faixa inferior: tarja escura de ponta a ponta */
.vt-iv-band { align-items: flex-end; align-items: safe flex-end; padding: 44px 0 30px; }
.vt-iv-band .vt-intro-box { flex: 1; max-width: none; padding: 12px 18px; background: rgba(5, 8, 15, .72); }
/* Moldura: contorno fino, sem fundo */
.vt-iv-frame .vt-intro-box { max-width: 88%; padding: 18px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 6px; }
.vt-iv-frame .vt-intro-logo { width: min(26cqw, 110px); margin-bottom: 4px; }
/* Cartao escuro: fundo solido, logotipo ao lado */
.vt-iv-solid .vt-intro-box { max-width: 92%; padding: 14px 16px; border-radius: 18px; background: rgba(5, 8, 15, .78); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9); }
/* Canto superior: pequeno, no alto a esquerda */
.vt-iv-corner { align-items: flex-start; justify-content: flex-start; }
/* Animacao do texto (entrada escalonada) */
.vt-scene.on .vt-intro-logo { opacity: 1; transform: none; }
.vt-intro-copy > * { opacity: 0; transition: opacity .6s, transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s; }
.vt-txa-rise .vt-intro-copy > * { transform: translateY(14px); }
.vt-txa-zoom .vt-intro-copy > * { transform: scale(.78); }
.vt-txa-focus .vt-intro-copy > * { filter: blur(10px); transform: scale(1.08); }
.vt-txa-type .vt-intro-copy > * { transform: translateY(8px); }
.vt-txa-slide .vt-intro-copy > * { transform: translateX(-28px); }
.vt-txa-drop .vt-intro-copy > * { transform: translateY(-22px); transition-timing-function: ease, cubic-bezier(.3, 1.6, .5, 1), ease; }
.vt-txa-flip .vt-intro-copy > * { transform: perspective(500px) rotateX(90deg); }
.vt-txa-glow .vt-intro-copy > * { transform: scale(.96); }
.vt-txa-stretch .vt-intro-copy > * { transform: scaleX(1.35); }
.vt-txa-wave .vt-intro-copy > .vt-intro-name { opacity: 1; transform: none; }
.vt-txa-wave .vt-wv { display: inline-block; opacity: 0; transform: translateY(16px); }
.vt-scene.on .vt-txa-wave .vt-wv { animation: vtWord .55s cubic-bezier(.2, 1.3, .4, 1) calc(.25s + var(--i) * 90ms) forwards; }
@keyframes vtWord { to { opacity: 1; transform: none; } }
.vt-scene.on .vt-txa-wave .vt-intro-copy > :nth-child(n+2) { transition-delay: .9s; }
.vt-scene.on .vt-txa-glow .vt-intro-name { animation: vtNameGlow 2.4s ease-in-out .8s infinite; }
@keyframes vtNameGlow { 50% { text-shadow: 0 0 18px color-mix(in srgb, var(--v1) 85%, transparent), 0 0 4px color-mix(in srgb, var(--v1) 60%, transparent); } }
.vt-scene.on .vt-intro-copy > * { opacity: 1; transform: none; filter: none; }
.vt-scene.on .vt-intro-copy > :nth-child(1) { transition-delay: .2s; }
.vt-scene.on .vt-intro-copy > :nth-child(2) { transition-delay: .38s; }
.vt-scene.on .vt-intro-copy > :nth-child(3) { transition-delay: .52s; }
.vt-scene.on .vt-intro-copy > :nth-child(4) { transition-delay: .66s; }
.vt-scene.on .vt-txa-type .vt-intro-copy > :nth-child(n+2) { transition-delay: 1.15s; }
.vt-txa-type .vt-intro-copy > .vt-intro-name { opacity: 1; transform: none; }
.vt-txa-type .vt-w { display: inline-block; white-space: nowrap; }
.vt-txa-type .vt-w > span { display: inline-block; opacity: 0; }
.vt-scene.on .vt-txa-type .vt-w > span { animation: vtType .01s linear calc(.25s + var(--i) * 55ms) forwards; }
.vt-txa-type .vt-intro-name::after { content: ''; display: inline-block; width: 3px; height: .86em; margin-left: 4px; vertical-align: -.06em; border-radius: 2px; background: var(--v1); animation: vtCaret .8s steps(1) infinite; }
@keyframes vtType { to { opacity: 1; } }
@keyframes vtCaret { 50% { opacity: 0; } }
.vt-l-intro.on .vt-ph, .vt-l-agenda.on .vt-ph { animation-duration: 12s; }

/* Cena de agenda: horarios livres de verdade em 9 animacoes. Cada caixa
   .vt-fit mostra o que cabe; o resto vira "+N" (vitrine.js, fitAgenda). */
.vt-ag { position: absolute; inset: 54px 14px 26px; z-index: 2; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.vt-ag-head { display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(-10px); transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.vt-scene.on .vt-ag-head { opacity: 1; transform: none; }
.vt-ag-ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; color: #fff; background: var(--vgrad); box-shadow: 0 12px 26px -10px var(--v2); }
.vt-ag-ph { border-radius: 50%; padding: 2px; overflow: hidden; }
.vt-ag-ph img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; }
.vt-th-grafite .vt-ag-ic { color: #0B1220; }
.vt-ag-ht { flex: 1; min-width: 0; display: grid; }
.vt-ag-ht small { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--v1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-ag-ht b { font-size: clamp(17px, 6.4cqw, 28px); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-ag-n { flex-shrink: 0; font-style: normal; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); }
.vt-ag-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.vt-ag-foot { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .88); opacity: 0; transition: opacity .6s 1s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vt-ag-foot ion-icon { flex-shrink: 0; color: var(--v1); }
.vt-scene.on .vt-ag-foot { opacity: 1; }
.vt-ag-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; }
.vt-ag-empty ion-icon { font-size: 34px; color: var(--v1); }
.vt-ag-empty b { font-size: 16px; font-weight: 900; color: #fff; }
.vt-ag-empty small { font-size: 12px; color: rgba(255, 255, 255, .78); font-weight: 600; }
.vt-fit { position: relative; overflow: hidden; }
.vt-off { display: none !important; }
/* Horario (base: ficha branca) e o "+N" */
.vt-ag-it { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 24px; padding: 0 7px; border-radius: 8px; font-style: normal; color: #0B1A2C; background: rgba(255, 255, 255, .95); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7); white-space: nowrap; }
.vt-ag-it b { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vt-ag-it small { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #5b6b80; }
.vt-ag-body .vt-more.vt-ag-it { font-size: 12px; font-weight: 900; color: #fff; background: var(--vgrad); border: 0; box-shadow: 0 6px 16px -8px var(--v2); }
.vt-th-grafite .vt-ag-body .vt-more.vt-ag-it { color: #0B1220; }
@keyframes vtChip { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
.vt-scene.on .vt-ag-it { animation: vtChip .45s cubic-bezier(.2, 1.4, .4, 1) calc(.4s + var(--i, 0) * 55ms) both; }
/* 1. Cascata: um dia por linha, entrando da esquerda */
.vt-ag-casc { height: 100%; display: flex; flex-direction: column; gap: 6px; }
.vt-ag-casc.one { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 5px; }
.vt-ag-row { display: grid; gap: 3px; opacity: 0; transform: translateX(-26px); transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.vt-scene.on .vt-ag-row { opacity: 1; transform: none; transition-delay: calc(.25s + var(--r) * .16s); }
.vt-ag-row em { font-style: normal; font-size: 10px; line-height: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.vt-ag-line { display: flex; gap: 5px; height: 24px; }
.vt-ag-moreline { font-size: 11.5px; font-weight: 800; color: var(--v1); }
/* 2. Grade: blocos de vidro e uma luz percorrendo */
.vt-ag-grid { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 5px; align-content: start; perspective: 600px; }
.vt-ag-grid .vt-ag-it, .vt-ag-board .vt-ag-it { height: auto; min-height: 32px; padding: 3px 2px; display: grid; place-items: center; gap: 0; line-height: 1.1; border-radius: 12px; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); box-shadow: none; }
.vt-ag-grid .vt-ag-it b, .vt-ag-board .vt-ag-it b { font-size: clamp(12px, 4.2cqw, 16px); font-weight: 900; color: #fff; }
.vt-ag-grid .vt-ag-it small, .vt-ag-board .vt-ag-it small { color: rgba(255, 255, 255, .7); }
.vt-scene.on .vt-ag-grid .vt-ag-it { animation: vtTileIn .6s cubic-bezier(.2, 1.2, .4, 1) calc(.3s + var(--i) * 55ms) both, vtTileGlow 3.6s ease-in-out calc(1.4s + var(--i) * .3s) infinite; }
@keyframes vtTileIn { from { opacity: 0; transform: translateY(16px) rotateX(75deg); } }
@keyframes vtTileGlow { 0%, 18%, 100% { background: rgba(255, 255, 255, .1); box-shadow: none; } 7% { background: color-mix(in srgb, var(--v2) 85%, transparent); box-shadow: 0 0 24px -4px var(--v2); } }
/* 3. Calendario: colunas por dia (ate 5) */
.vt-ag-cal { height: 100%; display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 5px; }
.vt-ag-col { min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 4px 3px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); }
.vt-ag-col em { display: grid; padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, .14); font-style: normal; text-align: center; font-size: 10px; font-weight: 900; line-height: 1.1; color: #fff; }
.vt-ag-col em small { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--v1); }
.vt-ag-col > i { font-style: normal; text-align: center; color: rgba(255, 255, 255, .4); }
.vt-ag-colt { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3px; }
.vt-ag-colt .vt-ag-it { height: 20px; padding: 0 2px; border-radius: 6px; }
.vt-ag-colt .vt-ag-it b { font-size: clamp(10px, 3.4cqw, 13px); }
.vt-ag-cal.one .vt-ag-colt { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.vt-ag-cal.one .vt-ag-colt .vt-ag-it { width: calc(25% - 4.5px); height: 24px; }
.vt-scene.on .vt-ag-col { animation: vtColIn .6s cubic-bezier(.2, .8, .2, 1) calc(.2s + var(--c) * 90ms) both; }
@keyframes vtColIn { from { opacity: 0; transform: translateY(-20px); } }
/* 4. Letreiro: lista rolando sem parar */
.vt-ag-tick { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .6s .3s; -webkit-mask: linear-gradient(transparent, #000 12%, #000 86%, transparent); mask: linear-gradient(transparent, #000 12%, #000 86%, transparent); }
.vt-scene.on .vt-ag-tick { opacity: 1; }
.vt-ag-roll { display: grid; gap: 6px; padding-top: 6px; }
.vt-ag-roll.move { animation: vtRoll var(--d, 8s) linear infinite; }
@keyframes vtRoll { to { transform: translateY(calc(-50% - 3px)); } }
.vt-ag-tk { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); }
.vt-ag-tk b { font-size: 16px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.vt-ag-tk span { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-ag-tk i { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--v1); }
/* 5. Placar: plaquinhas que viram como num painel de aeroporto */
.vt-ag-board { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 5px; align-content: start; perspective: 500px; }
.vt-ag-board .vt-ag-it { position: relative; background: linear-gradient(#141c2e 50%, #0c1322 50%); border-color: rgba(255, 255, 255, .12); border-radius: 8px; }
.vt-ag-board .vt-ag-it::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.vt-scene.on .vt-ag-board .vt-ag-it { animation: vtFlap .7s cubic-bezier(.3, 1.3, .5, 1) calc(.3s + var(--i) * 90ms) both; }
@keyframes vtFlap { from { opacity: 0; transform: rotateX(-100deg); } 60% { opacity: 1; } }
/* 6. Onda: fichas que sobem e descem em onda */
.vt-ag-wave { height: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px 5px; padding-top: 4px; }
.vt-scene.on .vt-ag-wave .vt-ag-it { animation: vtChip .45s cubic-bezier(.2, 1.4, .4, 1) calc(.4s + var(--i) * 55ms) both, vtWave 1.8s ease-in-out calc(1s + var(--i) * -.15s) infinite; }
@keyframes vtWave { 50% { translate: 0 -4px; } }
/* 7. Cartoes: um cartao por dia, entrando da direita */
.vt-ag-cards { height: 100%; display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 8px; }
.vt-ag-card { min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 7px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
.vt-ag-card em { font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.vt-ag-cardt { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 22px; gap: 4px; align-content: start; }
.vt-ag-cards.one .vt-ag-cardt { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vt-ag-cardt .vt-ag-it { height: 22px; padding: 0 2px; }
.vt-scene.on .vt-ag-card { animation: vtCardIn .7s cubic-bezier(.2, .8, .2, 1) calc(.25s + var(--c) * 140ms) both; }
@keyframes vtCardIn { from { opacity: 0; transform: translateX(40px) rotate(4deg); } }
/* 8. Linha do tempo: pontos ligados, em ate duas colunas */
.vt-ag-tl { height: 100%; }
.vt-ag-tll { height: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 4px 12px; }
.vt-ag-tll .vt-ag-it { width: calc(50% - 6px); height: 26px; justify-content: flex-start; gap: 8px; padding: 0 0 0 4px; background: none; box-shadow: none; color: #fff; }
.vt-ag-tll .vt-ag-it > i { position: relative; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--v1); box-shadow: 0 0 10px var(--v1); }
.vt-ag-tll .vt-ag-it > i::before { content: ''; position: absolute; left: 4px; top: -22px; width: 2px; height: 22px; background: color-mix(in srgb, var(--v1) 45%, transparent); }
.vt-ag-tll .vt-ag-it b { font-size: 15px; color: #fff; }
.vt-ag-tll .vt-ag-it small { color: rgba(255, 255, 255, .7); overflow: hidden; text-overflow: ellipsis; }
.vt-ag-tll .vt-more.vt-ag-it { width: auto; padding: 0 8px; }
.vt-scene.on .vt-ag-tll .vt-ag-it { animation: vtTlIn .5s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i) * 70ms) both; }
@keyframes vtTlIn { from { opacity: 0; transform: translateX(-18px); } }
/* 9. Bolhas: horarios em circulos que flutuam */
.vt-ag-bub { height: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding-top: 3px; }
.vt-ag-bub .vt-ag-it { width: 48px; height: 48px; padding: 0; border-radius: 50%; display: grid; place-content: center; gap: 0; line-height: 1.1; text-align: center; color: #fff; background: rgba(255, 255, 255, .12); border: 1.5px solid color-mix(in srgb, var(--v1) 75%, transparent); box-shadow: 0 10px 24px -14px var(--v2); }
.vt-ag-bub .vt-ag-it b { font-size: 12px; color: #fff; }
.vt-ag-bub .vt-ag-it small { color: rgba(255, 255, 255, .75); }
.vt-scene.on .vt-ag-bub .vt-ag-it { animation: vtChip .5s cubic-bezier(.2, 1.5, .4, 1) calc(.3s + var(--i) * 70ms) both, vtBubble 3s ease-in-out calc(1s + var(--i) * -.4s) infinite; }
@keyframes vtBubble { 50% { translate: 0 -3px; } }

/* Titulo da cena */
.vt-cap { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 22px; display: grid; gap: 4px; }
.vt-cap small { text-shadow: 0 1px 8px rgba(0, 0, 0, .6); display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--v1); }
.vt-cap strong { font-size: clamp(18px, 1.6vw, 22px); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; color: #fff; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-cap > * { transition: opacity .4s, transform .4s; }
.vt-cap.swap > *, .vt-cap.vt-hide > * { opacity: 0; transform: translateY(10px); }

/* Progresso das cenas. Classes proprias (vt-sd = concluida, vt-so = andando):
   "done" e "on" sozinhas colidiam com estilos de outras paginas (a pagina do
   profissional carrega agendar/app.css, onde .done tem padding e grade) e a
   barra concluida ficava mais alta. A altura tambem fica travada. */
/* Pagina da marca: tocar nas animacoes pausa e continua; so um sinal discreto de pausa. */
.vt-full .vt-stage { cursor: pointer; }
.vt-paused { position: absolute; z-index: 6; right: 12px; bottom: 18px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; font-size: 11px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.vt-card.vt-user-paused .vt-paused { opacity: .8; }
.vt-card.vt-user-paused .vt-stage *, .vt-card.vt-user-paused .vt-stage *::before, .vt-card.vt-user-paused .vt-stage *::after { animation-play-state: paused !important; }
.vt-segs { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 10px; display: flex; align-items: center; gap: 4px; height: 3px; }
.vt-segs i { position: relative; flex: 1; display: block; height: 3px; min-height: 0; max-height: 3px; margin: 0; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.vt-segs i::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--vgrad); }
.vt-segs i.vt-sd::after { transform: scaleX(1); }
.vt-segs i.vt-so::after { animation: vtSeg var(--d, 4200ms) linear forwards; }
@keyframes vtSeg { to { transform: scaleX(1); } }
/* O logotipo (76px) sobe sobre o palco: no cartao as barras comecam depois dele. */
.vt-card .vt-segs { left: 104px; }
.vt-card .vt-cap { bottom: 34px; }
.vt-card .vt-ag { bottom: 32px; }
.vt-card .vt-iv-poster { padding-bottom: 36px; }
/* Parado (fora da tela ou editando): a entrada da etiqueta roda; o movimento continuo para */
.vt-card:not(.vt-playing):not(.vt-full) .vt-tag-in { animation-play-state: running, paused; }
.vt-card:not(.vt-playing):not(.vt-full) .vt-tag-ic, .vt-card:not(.vt-playing):not(.vt-full) .vt-tag-sh::before { animation-play-state: paused; }

/* ------------------------------------------------------------------ corpo */
/* Parte de baixo sempre clara ou sempre escura (o profissional escolhe; sem
   escolha, segue o tema de quem ve). As mesmas cores dos temas do site. */
.vt-card.vt-bs-light {
  --surface: #FFFFFF; --raised: #FFFFFF; --soft: #e9fbfd; --strong: #e4e8ee;
  --text: #0D1520; --muted: #5f6772; --line: #dce0e7; --line-strong: #ccd0d8;
  color-scheme: light;
}
.vt-card.vt-bs-dark {
  --surface: #121B2C; --raised: #172238; --soft: #16284a; --strong: #1d2a40;
  --text: #EEF3FB; --muted: #a3adbd; --line: #22314b; --line-strong: #2d3f5e;
  color-scheme: dark;
}
.vt-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 0 16px 16px; }
.vt-id { display: flex; align-items: flex-start; gap: 12px; margin-top: -20px; }
/* O logotipo flutua devagar, meio sobre a foto (sobe so 20px sobre o palco). */
.vt-logo { animation: vtLogoFloat 4.6s ease-in-out infinite; box-shadow: 0 14px 26px -16px rgba(5, 8, 15, .55); }
@keyframes vtLogoFloat { 50% { translate: 0 -4px; } }
.vt-logo { position: relative; flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); padding: 4px; }
.vt-logo img, .vt-logo b { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--surface); }
.vt-logo b { display: grid; place-items: center; font-size: 24px; font-weight: 900; color: #fff; background: var(--vgrad); }
/* Anel do logotipo (assinatura do Guia Lupa nas cores do tema): o circulo
   fica parado e so as cores do gradiente giram e se misturam (duas camadas
   em velocidades e sentidos diferentes). */
@property --vt-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --vt-b { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.vt-ring {
  position: absolute; inset: -1px; border-radius: 50%;
  background:
    conic-gradient(from var(--vt-b), color-mix(in srgb, var(--v1) 80%, transparent), transparent 24%, color-mix(in srgb, var(--v3) 80%, transparent) 50%, transparent 76%, color-mix(in srgb, var(--v1) 80%, transparent)),
    conic-gradient(from var(--vt-a), var(--v1), var(--v2), var(--v3), var(--v2), var(--v1));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.vt-playing .vt-ring, .vt-card:hover .vt-ring, .vt-intro-logo .vt-ring { animation: vtFlowA 4s linear infinite, vtFlowB 6.5s linear infinite; }
@keyframes vtFlowA { to { --vt-a: 360deg; } }
@keyframes vtFlowB { from { --vt-b: 360deg; } to { --vt-b: 0deg; } }
.vt-name { min-width: 0; flex: 1; padding-top: 24px; }
.vt-name h3 { margin: 0; font-size: 16.5px; line-height: 1.25; font-weight: 900; letter-spacing: -.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.vt-meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.vt-rate { color: var(--text); font-weight: 800; }
.vt-rate ion-icon { color: var(--star); }
.vt-rate em { font-style: normal; color: var(--muted); font-weight: 600; }
.vt-new ion-icon { color: var(--v2); }
.vt-tagline { font-size: 13.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-hl { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-hl span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--v2) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--v2) 24%, transparent); }
.vt-hl ion-icon { color: var(--v2); font-size: 15px; }
.vt-svc { display: grid; gap: 6px; padding: 10px 12px; border-radius: 16px; background: var(--strong); }
.vt-svc > span { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13px; }
.vt-svc b { flex: 0 1 auto; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 42%; }
.vt-svc i { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-3px); }
.vt-svc em { font-style: normal; font-weight: 800; color: var(--text); white-space: nowrap; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.vt-svc em small { font-size: 11px; font-weight: 600; color: var(--muted); }
.vt-svc .vt-pp { display: none; }
.vt-body { container-type: inline-size; }
@container (max-width: 300px) {
  .vt-svc .vt-pf { display: none; }
  .vt-svc .vt-pp { display: inline; color: var(--text); font-weight: 800; font-size: 12.5px; }
}
.vt-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-modes span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--strong); }
.vt-foot { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 2px; }
.vt-cta { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: 13.5px; color: #fff; background: var(--vgrad); box-shadow: 0 12px 26px -14px var(--v2); transition: gap .2s, filter .2s; }
.vt-card:hover .vt-cta { gap: 11px; filter: brightness(1.06); }
.vt-th-grafite .vt-cta, .vt-th-grafite .vt-tag-ic { color: #0B1220; }

/* Pagina inicial da marca: o mesmo desenho da previa do editor (logotipo
   sobre a foto), sem borda nem sombra e com cantos levemente arredondados. */
.vt-card.vt-full { width: 100%; max-width: 520px; margin-inline: auto; border-radius: 12px; box-shadow: none; }
.vt-card.vt-full:hover { transform: none; box-shadow: none; }
.vt-full .vt-cta { text-decoration: none; }

/* Vitrines (pagina inicial) e grade da busca com os cartoes da vitrine */
.rail.vt-rail { grid-auto-columns: minmax(290px, 330px); }
.pro-grid.vt-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
@media (max-width: 719px) { .rail.vt-rail { grid-auto-columns: 84%; } .pro-grid.vt-grid { grid-template-columns: 1fr; } }
.sk-card.vt-sk { height: 520px; }

@media (prefers-reduced-motion: reduce) {
  .vt-logo, .vt-scene.on .vt-ph, .vt-scene.on .vt-frame .vt-img, .vt-tag-in, .vt-tag-ic, .vt-tag-sh::before, .vt-art-ic, .vt-ring, .vt-orb, .vt-art-bg i, .vt-ag-roll, .vt-ag-grid span { animation: none !important; }
  .vt-scene.on .vt-ag-it, .vt-scene.on .vt-ag-col, .vt-scene.on .vt-ag-card, .vt-scene.on .vt-txa-type .vt-w > span, .vt-scene.on .vt-txa-wave .vt-wv { animation: none !important; opacity: 1; }
  .vt-frame { transition: none; }
}

/* Vitrine Destaque: logotipo de quem tem story em destaque. Anel mais grosso,
   girando sempre e mais rapido, com um brilho pulsando em volta (como nos
   stories das redes sociais); clicar abre os stories (stories.js). */
.vt-logo.vt-story { cursor: pointer; padding: 6px; }
.vt-logo.vt-story .vt-ring { inset: -2px; animation: vtFlowA 1.8s linear infinite, vtFlowB 3s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); }
.vt-story-halo { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--v2); animation: vtStoryHalo 2.2s ease-out infinite; pointer-events: none; }
@keyframes vtStoryHalo { 0% { opacity: .75; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.28); } }
.vt-logo.vt-story:hover { transform: scale(1.05); }
.vt-logo.vt-story:focus-visible { outline: 3px solid var(--v2); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vt-story-halo { animation: none; opacity: 0; } }