/* Mini Boss Club — Viajes Game (capa de videojuego interactivo) v20261028 */
:root{
  --vg-teal:#03AC9D; --vg-teal-dark:#02796e; --vg-yellow:#FCC321; --vg-ink:#123a36;
  --vg-cream:#FFF7E6; --vg-card:#ffffff; --vg-sky1:#bfeef7; --vg-sky2:#eafaf3;
  --vg-st-done:#1D9E75; --vg-st-prog:#94A3B8; --vg-st-avail:#EF9F27; --vg-st-lock:#64748B;
  --vg-shadow:0 10px 24px rgba(2,64,58,.18); --vg-radius:22px;
}
#vg-root{position:fixed; inset:0; z-index:90; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,var(--vg-sky1) 0%,var(--vg-sky2) 55%,#fff3d6 100%);
  font-family:"Nunito","Baloo 2",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--vg-ink);}
#vg-root *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
#vg-root button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
#vg-root img{display:block; max-width:100%;}
.vg-wrap{max-width:1060px; margin:0 auto; padding:14px 14px 40px;}
/* ---------- header ---------- */
.vg-top{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:rgba(255,255,255,.82); backdrop-filter:blur(8px);
  border-bottom:3px solid rgba(3,172,157,.25);}
.vg-top .vg-title{font-weight:900; font-size:19px; letter-spacing:.2px; color:var(--vg-teal-dark); flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vg-iconbtn{width:44px; height:44px; border-radius:14px; background:#fff; box-shadow:var(--vg-shadow);
  display:grid; place-items:center; flex:none; transition:transform .15s ease;}
.vg-iconbtn:active{transform:scale(.92);}
.vg-iconbtn svg{width:22px; height:22px; stroke:var(--vg-teal-dark); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}
.vg-coin{display:flex; align-items:center; gap:7px; background:var(--vg-yellow); color:#5c4400; font-weight:900;
  padding:9px 14px; border-radius:999px; box-shadow:var(--vg-shadow); font-size:16px; flex:none;}
.vg-coin svg{width:19px; height:19px;}
.vg-coin.bump{animation:vgBump .6s ease;}
@keyframes vgBump{0%{transform:scale(1)}35%{transform:scale(1.18) rotate(-3deg)}100%{transform:scale(1)}}
/* ---------- generic ---------- */
.vg-h1{font-size:26px; font-weight:900; margin:14px 2px 4px; color:var(--vg-teal-dark);}
.vg-sub{font-size:15.5px; margin:0 2px 14px; color:#33655f; font-weight:600;}
.vg-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:900; font-size:17px;
  padding:14px 22px; border-radius:999px; background:var(--vg-teal); color:#fff; box-shadow:var(--vg-shadow);
  transition:transform .15s ease, box-shadow .15s ease; min-height:52px;}
.vg-btn:active{transform:scale(.96);}
.vg-btn.yellow{background:var(--vg-yellow); color:#5c4400;}
.vg-btn.ghost{background:#fff; color:var(--vg-teal-dark); border:2px solid rgba(3,172,157,.35);}
.vg-btn:disabled{opacity:.55; cursor:default;}
.vg-btn.small{padding:10px 16px; font-size:15px; min-height:44px;}
.vg-chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; padding:5px 11px;
  border-radius:999px; background:rgba(255,255,255,.9); color:var(--vg-teal-dark); box-shadow:0 3px 8px rgba(2,64,58,.12);}
.vg-chip.done{background:#0aa06e; color:#fff;}
.vg-chip.prog{background:var(--vg-yellow); color:#5c4400;}
.vg-chip.lock{background:#eef3f2; color:#7a8f8b;}
.vg-loading{padding:70px 20px; text-align:center; font-weight:800; color:var(--vg-teal-dark); font-size:17px;}
.vg-spinner{width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
  border:6px solid rgba(3,172,157,.2); border-top-color:var(--vg-teal); animation:vgSpin 0.9s linear infinite;}
@keyframes vgSpin{to{transform:rotate(360deg)}}
.vg-error{background:#fff; border-radius:var(--vg-radius); box-shadow:var(--vg-shadow); padding:22px; text-align:center; font-weight:700;}
/* ---------- mapa ---------- */
.vg-mapwrap{border-radius:26px; overflow:hidden; box-shadow:var(--vg-shadow); background:#8fd3e8; border:4px solid #fff;}
.vg-mapview{position:relative; width:100%; aspect-ratio:2/1; overflow:hidden; touch-action:none; cursor:grab; background:#8fd3e8;}
.vg-mapview:active{cursor:grabbing;}
.vg-mapsurface{position:absolute; left:0; top:0; width:100%; height:100%; transform-origin:0 0; will-change:transform;}
.vg-mapsurface.anim{transition:transform .55s cubic-bezier(.3,.7,.25,1);}
.vg-mapsurface img.vg-mapimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.vg-pins{position:absolute; inset:0;}
.vg-pin{position:absolute; transform:translate(-50%,-88%) scale(var(--inv,1)); transform-origin:50% 88%; width:64px; text-align:center; z-index:3;
  animation:vgFloat 3.2s ease-in-out infinite;}
.vg-pin:active{transform:translate(-50%,-88%) scale(calc(var(--inv,1)*.94));}
.vg-pin .vg-pinimg{width:56px; height:56px; border-radius:50%; object-fit:cover; margin:0 auto;
  border:3.5px solid #fff; box-shadow:0 6px 14px rgba(2,64,58,.35); background:var(--vg-cream);}
.vg-pin .vg-pinname{margin-top:3px; font-size:11.5px; font-weight:900; color:#fff; text-shadow:0 1.5px 4px rgba(0,40,36,.65);
  white-space:nowrap;}
.vg-pin .vg-pindot{width:11px; height:11px; border-radius:50%; background:var(--vg-yellow); margin:2px auto 0;
  border:2.5px solid #fff; box-shadow:0 2px 6px rgba(0,40,36,.4);}
.vg-pin.locked .vg-pinimg{filter:grayscale(.85); opacity:.85;}
/* anillo de las miniaturas y punto guía: el color del estado (leyenda del mapa) */
.vg-pin.done .vg-pinimg{border-color:var(--vg-st-done);}
.vg-pin.avail .vg-pinimg{border-color:var(--vg-st-avail);}
.vg-pin.prog .vg-pinimg{border-color:var(--vg-st-prog);}
.vg-pin.locked .vg-pinimg{border-color:var(--vg-st-lock);}
.vg-pin.done .vg-pindot{background:var(--vg-st-done);}
.vg-pin.avail .vg-pindot{background:var(--vg-st-avail);}
.vg-pin.prog .vg-pindot{background:var(--vg-st-prog);}
.vg-pin.locked .vg-pindot{background:var(--vg-st-lock);}
.vg-pin.sel{z-index:6;}
.vg-pin.sel .vg-pinimg{border-color:var(--vg-teal); box-shadow:0 0 0 3px var(--vg-yellow), 0 6px 14px rgba(2,64,58,.35);}
/* pin-punto (zoom mundial): ligero, sin fotos ni animación */
.vg-pin.dot{width:34px; height:34px; padding:0; border-radius:50%; background:#fff; border:3px solid #fff;
  box-shadow:0 3px 9px rgba(2,64,58,.35); display:grid; place-items:center; animation:none;
  transform:translate(-50%,-50%) scale(var(--inv,1)); transform-origin:50% 50%;}
.vg-pin.dot:active{transform:translate(-50%,-50%) scale(calc(var(--inv,1)*.92));}
.vg-pin.dot .vg-doticon{font-size:17px; line-height:1; pointer-events:none;}
.vg-pin.dot .vg-pinname{position:absolute; top:calc(100% + 3px); left:50%; transform:translateX(-50%); margin-top:0;}
.vg-pin.dot.locked{opacity:.85; border-color:var(--vg-st-lock);}
.vg-pin.dot.locked .vg-doticon{filter:grayscale(.9);}
.vg-pin.dot.done{background:#e3f4ec; border-color:var(--vg-st-done);}
.vg-pin.dot.avail{border-color:var(--vg-st-avail);}
.vg-pin.dot.prog{border-color:var(--vg-st-prog); box-shadow:0 0 0 3px rgba(148,163,184,.45), 0 3px 9px rgba(2,64,58,.35);}
.vg-pin.dot.sel{box-shadow:0 0 0 3.5px var(--vg-yellow), 0 3px 9px rgba(2,64,58,.4);}
/* leyenda de estados del mapa (textos y colores del dueño) */
.vg-legend{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; background:#fff; border:2px solid #e2efe9;
  border-radius:14px; padding:9px 14px; box-shadow:0 4px 12px rgba(2,64,58,.08);}
.vg-leg{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--vg-teal-dark);}
.vg-leg i{width:13px; height:13px; border-radius:50%; display:inline-block; border:2px solid #fff;
  box-shadow:0 1.5px 5px rgba(0,40,36,.35);}
/* grupo de destinos cercanos */
.vg-cluster{position:absolute; transform:translate(-50%,-50%) scale(var(--inv,1)); transform-origin:50% 50%; z-index:5;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--vg-teal),var(--vg-teal-dark)); color:#fff; font-weight:900; font-size:16.5px;
  border:3px solid #fff; box-shadow:0 6px 14px rgba(2,64,58,.4); transition:transform .15s;}
.vg-cluster:active{transform:translate(-50%,-50%) scale(calc(var(--inv,1)*.92));}
/* controles de zoom */
.vg-zoomctl{position:absolute; right:10px; top:10px; z-index:8; display:flex; flex-direction:column; gap:8px;}
.vg-zoomctl button{width:44px; height:44px; border-radius:50%; background:#fff; color:var(--vg-teal-dark);
  font-size:24px; font-weight:900; line-height:1; display:grid; place-items:center; box-shadow:0 6px 14px rgba(2,64,58,.3);
  transition:transform .15s;}
.vg-zoomctl button:active{transform:scale(.92);}
.vg-zoomctl button img{width:25px; height:25px; border-radius:7px;}
.vg-maphint{position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:8; pointer-events:none;
  background:rgba(1,45,40,.74); color:#fff; font-weight:800; font-size:12.5px; padding:7px 14px; border-radius:999px; white-space:nowrap;
  max-width:94%; overflow:hidden; text-overflow:ellipsis;}
@keyframes vgFloat{0%,100%{margin-top:0}50%{margin-top:-6px}}
/* ---------- tarjetas de destino ---------- */
.vg-cards{display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px;}
@media (min-width:640px){ .vg-cards{grid-template-columns:1fr 1fr;} }
.vg-card{background:var(--vg-card); border-radius:var(--vg-radius); overflow:hidden; box-shadow:var(--vg-shadow);
  text-align:left; width:100%; padding:0; transition:transform .16s ease; animation:vgRise .5s ease both;}
.vg-card:active{transform:scale(.985);}
@keyframes vgRise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.vg-card .vg-cardimg{height:158px; width:100%; object-fit:cover; background:linear-gradient(120deg,#bfeef7,#ffe9a8);}
.vg-card.locked .vg-cardimg{filter:grayscale(.75);}
.vg-cardbody{padding:13px 16px 16px;}
.vg-cardbody h3{margin:0 0 2px; font-size:20px; font-weight:900; color:var(--vg-ink);}
.vg-cardbody .vg-country{font-weight:800; color:var(--vg-teal); font-size:13.5px; text-transform:uppercase; letter-spacing:.6px;}
.vg-cardbody p{margin:7px 0 11px; font-size:14.5px; line-height:1.45; color:#3c5a55; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.vg-cardrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.vg-price{margin-left:auto; font-weight:900; color:#8a6100; display:inline-flex; gap:5px; align-items:center; font-size:15px;}
.vg-price svg{width:16px; height:16px;}
/* ---------- despegue ---------- */
.vg-fly{position:relative; border-radius:26px; overflow:hidden; box-shadow:var(--vg-shadow); border:4px solid #fff;
  background:#8fd3e8; margin-top:16px;}
.vg-fly .vg-flymap{width:100%; aspect-ratio:2/1; object-fit:cover; display:block;}
.vg-fly svg.vg-route{position:absolute; inset:0; width:100%; height:100%;}
.vg-fly .vg-route path{stroke:#fff; stroke-width:3.5; stroke-dasharray:10 8; stroke-linecap:round; fill:none; opacity:.95;
  filter:drop-shadow(0 2px 3px rgba(0,40,36,.35)); animation:vgDash 1.1s linear infinite;}
@keyframes vgDash{to{stroke-dashoffset:-18;}}
.vg-plane{position:absolute; width:60px; height:60px; left:0; top:0; z-index:4; box-sizing:border-box;
  background:#fff; border:3px solid var(--vg-teal); border-radius:50%; padding:8px;
  box-shadow:0 10px 20px rgba(0,40,36,.35);}
.vg-plane svg{width:100%; height:100%; display:block;}
.vg-flydot{position:absolute; width:14px; height:14px; border-radius:50%; background:var(--vg-teal);
  border:3px solid #fff; transform:translate(-50%,-50%); box-shadow:0 3px 8px rgba(0,40,36,.4); z-index:3;}
.vg-flypin{position:absolute; width:20px; height:20px; border-radius:50%; background:var(--vg-yellow);
  border:3.5px solid #fff; transform:translate(-50%,-50%); box-shadow:0 3px 10px rgba(0,40,36,.45); z-index:3;
  animation:vgPinPulse 1s ease-in-out infinite alternate;}
@keyframes vgPinPulse{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.22)}}
.vg-flymsg{text-align:center; font-weight:900; font-size:21px; color:var(--vg-teal-dark); margin:16px 8px 4px; animation:vgRise .5s ease both;}
.vg-flysub{text-align:center; font-weight:700; color:#33655f; margin:0 8px 10px;}
/* ---------- escena ---------- */
.vg-hero{border-radius:26px; overflow:hidden; box-shadow:var(--vg-shadow); border:4px solid #fff; position:relative;}
.vg-hero img{width:100%; height:230px; object-fit:cover;}
@media (min-width:640px){ .vg-hero img{height:300px;} }
.vg-hero .vg-herotitle{position:absolute; left:0; right:0; bottom:0; padding:34px 18px 13px; color:#fff;
  background:linear-gradient(180deg,transparent, rgba(1,45,40,.72));}
.vg-hero .vg-herotitle h2{margin:0; font-size:26px; font-weight:900; text-shadow:0 2px 8px rgba(0,30,27,.5);}
.vg-hero .vg-herotitle span{font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.7px; opacity:.92;}
.vg-step{background:#fff; border-radius:var(--vg-radius); box-shadow:var(--vg-shadow); padding:20px 18px; margin-top:16px;
  font-size:16.5px; line-height:1.62; font-weight:600; color:#24423d; animation:vgRise .45s ease both; min-height:120px;}
.vg-step p{margin:0 0 10px;} .vg-step p:last-child{margin-bottom:0;}
.vg-stepdots{display:flex; gap:7px; justify-content:center; margin:16px 0 4px;}
.vg-stepdots i{width:10px; height:10px; border-radius:50%; background:rgba(3,172,157,.28); transition:all .25s;}
.vg-stepdots i.on{background:var(--vg-teal); transform:scale(1.3);}
.vg-stepnav{display:flex; gap:10px; justify-content:space-between; margin-top:14px;}
.vg-wisdom{margin-top:16px; background:linear-gradient(120deg,#fff7dd,#ffedb3); border:2.5px dashed rgba(190,140,0,.45);
  border-radius:var(--vg-radius); padding:16px 18px; font-weight:700; color:#6d5100; font-size:15.5px; line-height:1.55;}
.vg-wisdom b{color:#8a6100;}
/* ---------- tarjetas descubrimiento (flip) ---------- */
.vg-discover{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px;}
@media (min-width:760px){ .vg-discover{grid-template-columns:repeat(3,1fr);} }
.vg-flip{perspective:900px; height:158px; cursor:pointer;}
.vg-flipinner{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.3,1.4,.5,1);}
.vg-flip.flipped .vg-flipinner{transform:rotateY(180deg);}
.vg-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:19px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:12px; text-align:center;
  box-shadow:var(--vg-shadow);}
.vg-face.front{background:linear-gradient(140deg,var(--vg-teal),var(--vg-teal-dark)); color:#fff;}
.vg-face.front .vg-ficon{width:52px; height:52px; border-radius:14px; object-fit:cover; background:rgba(255,255,255,.15);}
.vg-face.front span{font-weight:900; font-size:15.5px; line-height:1.2;}
.vg-face.front small{font-weight:700; opacity:.85; font-size:12px;}
.vg-face.back{background:#fff; transform:rotateY(180deg); color:var(--vg-ink); border:2.5px solid rgba(3,172,157,.3);}
.vg-face.back b{font-size:16.5px; line-height:1.3; color:var(--vg-teal-dark);}
.vg-face.back span{font-size:13.5px; font-weight:700; color:#4a6a64; line-height:1.4;}
.vg-face.back .vg-pron{font-style:italic; color:#8a6100; font-weight:800;}
/* ---------- misiones / juegos ---------- */
.vg-mission{background:#fff; border-radius:var(--vg-radius); box-shadow:var(--vg-shadow); padding:15px; display:flex; gap:13px;
  align-items:center; width:100%; text-align:left; margin-top:12px; transition:transform .15s; animation:vgRise .5s ease both;}
.vg-mission:active{transform:scale(.98);}
.vg-mission img{width:66px; height:66px; border-radius:16px; object-fit:cover; flex:none; background:var(--vg-cream);}
.vg-mission .vg-mmeta{flex:1; min-width:0;}
.vg-mission h4{margin:0 0 3px; font-size:17px; font-weight:900;}
.vg-mission p{margin:0; font-size:13.5px; font-weight:700; color:#52706a; line-height:1.4;}
.vg-mission .vg-reward{flex:none; text-align:center; font-weight:900; color:#8a6100; font-size:14px;}
.vg-mission .vg-reward svg{width:21px; height:21px; margin:0 auto 2px;}
.vg-quiz{background:#fff; border-radius:26px; box-shadow:var(--vg-shadow); padding:20px 17px; margin-top:16px; animation:vgRise .4s ease both;}
.vg-quizbar{height:11px; border-radius:99px; background:#e7f2f0; overflow:hidden; margin-bottom:16px;}
.vg-quizbar i{display:block; height:100%; background:linear-gradient(90deg,var(--vg-teal),var(--vg-yellow)); border-radius:99px; transition:width .4s ease;}
.vg-q{font-size:19px; font-weight:900; line-height:1.4; margin:0 0 15px;}
.vg-opts{display:grid; gap:11px;}
.vg-opt{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--vg-cream);
  border:3px solid rgba(3,172,157,.18); border-radius:17px; padding:13px 14px; font-size:16.5px; font-weight:800; color:var(--vg-ink);
  transition:all .15s; min-height:56px;}
.vg-opt img{width:46px; height:46px; border-radius:12px; object-fit:cover; flex:none;}
.vg-opt:active{transform:scale(.98);}
.vg-opt.sel{border-color:var(--vg-teal); background:#dff7f3; box-shadow:0 6px 14px rgba(3,172,157,.25);}
.vg-score{text-align:center; padding:8px 0 2px;}
.vg-score .vg-bignum{font-size:52px; font-weight:900; color:var(--vg-teal-dark); line-height:1;}
.vg-review{margin-top:14px; display:grid; gap:10px;}
.vg-review .vg-ritem{background:var(--vg-cream); border-radius:15px; padding:12px 14px; font-size:14.5px; font-weight:700; line-height:1.5;}
.vg-review .vg-ritem b{color:var(--vg-teal-dark);}
.vg-review .vg-ritem .bad{color:#c0392b;} .vg-review .vg-ritem .good{color:#0aa06e;}
/* ---------- maleta (práctica) ---------- */
.vg-packgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:14px;}
@media (min-width:640px){ .vg-packgrid{grid-template-columns:repeat(4,1fr);} }
.vg-item{background:#fff; border:3px solid rgba(3,172,157,.15); border-radius:18px; padding:9px 6px 8px; text-align:center;
  font-weight:800; font-size:13.5px; transition:all .18s; box-shadow:0 4px 10px rgba(2,64,58,.08); position:relative;}
.vg-item img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; margin-bottom:6px;}
.vg-item:active{transform:scale(.96);}
.vg-item.on{border-color:var(--vg-teal); background:#dcf5ef; transform:translateY(-3px); box-shadow:0 12px 22px rgba(2,121,110,.3);}
.vg-item.on::after{content:"✓"; position:absolute; top:-11px; right:-9px; width:29px; height:29px; border-radius:50%;
  background:var(--vg-teal); color:#fff; font-size:18px; font-weight:900; line-height:1; display:flex; align-items:center; justify-content:center;
  border:3px solid #fff; box-shadow:0 4px 10px rgba(2,64,58,.35); z-index:2;}
.vg-suitcase{display:flex; align-items:center; gap:12px; background:#fff; border-radius:19px; box-shadow:var(--vg-shadow);
  padding:12px 15px; margin-top:16px; font-weight:900; font-size:16px;
  position:sticky; top:72px; z-index:15;}
.vg-suitcase img{width:54px; height:54px; border-radius:13px; object-fit:cover;}
/* Resultado de la maleta: marcas por tarjeta y panel que entra con un «pop» */
.vg-item.good{border-color:#0aa06e; background:#e4f8ee;}
.vg-item.wrong{border-color:#d66a5e; background:#fdeeed;}
.vg-item.missed{border:3px dashed #dfa400; background:#fff8e0;}
.vg-item.good::after,.vg-item.wrong::after,.vg-item.missed::after{position:absolute; top:-11px; right:-9px; width:29px; height:29px; border-radius:50%;
  color:#fff; font-size:17px; font-weight:900; line-height:1; display:flex; align-items:center; justify-content:center;
  border:3px solid #fff; box-shadow:0 4px 10px rgba(2,64,58,.35); z-index:2;}
.vg-item.good::after{content:"✓"; background:#0aa06e;}
.vg-item.wrong::after{content:"✗"; background:#cf4b4b;}
.vg-item.missed::after{content:"!"; background:#dfa400;}
#vg-packresult{scroll-margin-top:160px;}
@keyframes vgPop{from{transform:scale(.95); opacity:.3}to{transform:scale(1); opacity:1}}
.vg-resultpop{animation:vgPop .35s ease;}
/* ---------- pasaporte ---------- */
.vg-passgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px;}
@media (min-width:700px){ .vg-passgrid{grid-template-columns:repeat(3,1fr);} }
.vg-stamp{border-radius:18px; padding:10px; background:#fff; box-shadow:var(--vg-shadow); text-align:center; position:relative;
  border:3px dashed rgba(3,172,157,.4); transform:rotate(-2deg);}
.vg-stamp img{width:100%; height:104px; object-fit:cover; border-radius:11px;}
.vg-stamp h5{margin:8px 0 1px; font-size:16px; font-weight:900;}
.vg-stamp span{font-size:12.5px; font-weight:800; color:var(--vg-teal); text-transform:uppercase; letter-spacing:.5px;}
.vg-stamp .vg-date{font-size:12px; color:#7a8f8b; font-weight:700; margin-top:3px;}
.vg-stamp.empty{border-color:rgba(90,110,106,.25); transform:none;}
.vg-stamp.empty img{filter:grayscale(1); opacity:.45;}
.vg-stamp.empty h5{color:#82948f;}
.vg-stamp.new{animation:vgStampIn .8s cubic-bezier(.2,2.2,.4,1) both;}
@keyframes vgStampIn{0%{transform:scale(2.1) rotate(9deg); opacity:0}55%{opacity:1}100%{transform:scale(1) rotate(-2deg);}}
.vg-newflag{position:absolute; top:-9px; right:-7px; background:var(--vg-yellow); color:#5c4400; font-size:11px; font-weight:900;
  padding:4px 9px; border-radius:99px; box-shadow:var(--vg-shadow); transform:rotate(6deg);}
/* ---------- recompensa / confeti ---------- */
.vg-rewardpop{position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(1,45,40,.45); padding:18px;}
.vg-rewardcard{background:#fff; border-radius:28px; padding:28px 24px; text-align:center; max-width:360px; width:100%;
  box-shadow:0 24px 50px rgba(0,30,27,.4); animation:vgPop .55s cubic-bezier(.2,1.8,.4,1) both; position:relative; overflow:hidden;}
@keyframes vgPop{from{transform:scale(.6); opacity:0}to{transform:scale(1); opacity:1}}
.vg-rewardcard .vg-amount{font-size:46px; font-weight:900; color:#8a6100; line-height:1.05;}
.vg-rewardcard h3{margin:4px 0 6px; font-size:22px; font-weight:900; color:var(--vg-teal-dark);}
.vg-rewardcard p{margin:0 0 16px; font-weight:700; color:#52706a;}
.vg-confetti{position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.vg-confetti i{position:absolute; top:-14px; width:10px; height:16px; border-radius:3px; opacity:.95; animation:vgFall linear forwards;}
@keyframes vgFall{to{transform:translateY(340px) rotate(560deg); opacity:.4;}}
/* ---------- video del destino ---------- */
.vg-videopop{position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:16px;}
.vg-videobg{position:absolute; inset:0; background:rgba(1,45,40,.55);}
.vg-videocard{position:relative; background:#fff; border-radius:20px; padding:12px; width:100%; max-width:720px;
  box-shadow:0 24px 50px rgba(0,30,27,.45); animation:vgPop .4s ease both;}
.vg-videocard iframe,.vg-videocard video{width:100%; aspect-ratio:16/9; border:0; border-radius:12px; background:#000; display:block;}
.vg-videotop{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 4px 10px;
  font-size:16px; color:var(--vg-teal-dark);}