/* Revelaciones de los premios (v3, sobre chicle). Cada una es un objeto con su propia identidad (el Panel, el ticket de McBesitos,
   el prospecto de Morritocetamol, el Bando y el vale), como el WhatsApp: se respeta su diseño y solo se pasa al sistema lo que los
   rodea (marcos troquelados, cantos sólidos en vez de sombras, las letras de la app y el botón de avance). */

/* ---------- revelación · Panel de atención al pupi (el de la camiseta: blanco con su borde de tinta) ---------- */
.rvp{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-5)}
.rvp-card{
  padding:18px 16px 14px;border-radius:30px;background:#fff;color:var(--tinta);border:5px solid var(--tinta);
  box-shadow:0 8px 0 var(--chicle-d);
}
.rvp-title{margin:0;font:400 clamp(36px,11vw,46px)/.9 var(--display);text-transform:uppercase}
.rvp-head{display:flex;flex-direction:column;gap:6px}
.rvp-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.rvp-sub{margin:0;min-width:0;font:600 13px/1.25 var(--ui)}
.rvp-online{margin:0;flex:none;display:flex;align-items:center;gap:6px}
.rvp-online b{font:800 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase}
.rvp-led{display:block;width:22px;height:22px;border-radius:50%;background:var(--menta);box-shadow:0 0 0 5px rgba(74,219,156,.3)}
.rvp-rule{height:2.5px;margin:12px 0 4px;background:var(--tinta)}

.rvp-big{display:block;width:min(72%,240px);aspect-ratio:1;margin:8px auto 0;padding:0;border-radius:50%;transition:transform .1s}
.rvp-big:active{transform:scale(.96)}
.rvp-big svg{display:block;width:100%;height:100%}
.rvp-ring-text{font-family:var(--display)}
.rvp-big.is-on{box-shadow:0 0 0 6px var(--girasol)}
.rvp-big:focus-visible,.rvp-small:focus-visible{outline:3px solid var(--cobalto);outline-offset:3px}
.rvp-name{margin:6px 0 0;text-align:center;font:400 38px/1 var(--display);text-transform:uppercase}
.rvp-need{margin:3px 0 0;text-align:center;text-wrap:balance;font:600 14px/1.3 var(--ui)}

.rvp-smalls{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:16px}
.rvp-small{display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 0;text-align:center;border-radius:14px}
.rvp-dot-btn{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:5px solid var(--tinta);background:var(--c,#999);transition:transform .1s}
.rvp-dot-btn svg{width:62%;height:62%}
.rvp-small:active .rvp-dot-btn{transform:scale(.94)}
.rvp-small.is-on .rvp-dot-btn{box-shadow:0 0 0 4px var(--girasol)}
.rvp-hela{--c:var(--cobalto)}
.rvp-achicharra{--c:var(--tomate)}
.rvp-hamie{--c:var(--menta)}
.rvp-small b{max-width:100%;font:400 clamp(15px,4.6vw,18px)/.95 var(--display);text-transform:uppercase;text-wrap:balance}
.rvp-small small{font:600 12px/1.2 var(--ui)}

.rvp-answer{
  display:grid;place-items:center;min-height:64px;margin:14px 0 0;padding:10px 14px 8px;border-radius:var(--r-tesela);background:var(--tinta);
  color:var(--girasol);text-align:center;text-wrap:balance;font:400 26px/1.05 var(--display);
}
.rvp-answer:empty{visibility:hidden}
.rvp-answer.is-in{animation:rvp-in .3s ease-out}
@keyframes rvp-in{from{opacity:0;transform:translateY(6px)}}
.rvp-foot{margin:12px 0 0;text-align:center;text-wrap:balance;font:600 12px/1.3 var(--ui);color:#4B4470}

/* ---------- revelaciones · McBesitos y Morritocetamol (imagen del local + ticket / prospecto encima) ---------- */
.rv{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-5);-webkit-user-select:none;user-select:none}
/* el local: troquelado como una pegatina (borde blanco y canto) */
.rv-scene{
  position:relative;width:calc(100% - 8px);aspect-ratio:4/5;max-height:calc(100dvh - 160px);margin:4px auto 0;border-radius:28px;overflow:hidden;background:var(--tinta);
  box-shadow:0 0 0 4px #fff,0 10px 0 4px var(--chicle-d);
}
.rv-art,.rv-art svg,.rv-photo{position:absolute;inset:0;width:100%;height:100%}
.rv-art svg{display:block}
.rv-photo{object-fit:cover;opacity:0;transition:opacity .5s}
.rv-photo.is-on{opacity:1}

/* McBesitos: el ticket baja por una ranura, a saltos como una impresora de recibos */
.rvm-slot{
  position:absolute;z-index:3;left:50%;top:46%;width:70%;height:12px;transform:translateX(-50%);border-radius:7px;
  background:var(--tinta-d);box-shadow:0 0 0 3px var(--tinta-2);
}
.rvm-paper{
  position:absolute;z-index:2;left:50%;top:calc(46% + 6px);width:62%;transform:translateX(-50%);overflow:hidden;
  filter:drop-shadow(0 6px 0 rgba(10,6,36,.35));
}
.rvm-ticket{
  padding:10px 12px 20px;background:#FFFBEF;color:#1D1A14;
  font:600 clamp(11px,3.3vw,13px)/1.4 "Courier New",Courier,ui-monospace,Menlo,monospace;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;
  animation:rvm-print 2.8s steps(28) .35s both;
}
@keyframes rvm-print{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.rvm-head{display:flex;align-items:center;justify-content:center;gap:8px}
.rvm-lips{display:block;line-height:0}
.rvm-title{margin:0;font:800 1.45em/1 "Courier New",Courier,ui-monospace,Menlo,monospace;letter-spacing:.02em;text-transform:none}
.rvm-rule{margin:6px 0;border-top:2px dashed rgba(29,26,20,.5)}
.rvm-row{display:flex;justify-content:space-between;gap:10px;margin:0}
.rvm-row.is-plain{display:block}
.rvm-row span{flex:none}
.rvm-row b{min-width:0;text-align:right;font-weight:800}
.rvm-bars{
  height:24px;margin-top:8px;
  background:repeating-linear-gradient(90deg,#1D1A14 0 2px,transparent 2px 4px,#1D1A14 4px 5px,transparent 5px 8px,#1D1A14 8px 11px,transparent 11px 13px,#1D1A14 13px 14px,transparent 14px 17px);
}

/* Morritocetamol: la cruz de neón late y el prospecto se despliega tramo a tramo */
.rvf-cross{animation:rvf-pulse 2.4s ease-in-out infinite}
@keyframes rvf-pulse{50%{opacity:.72}}
.rvf-paper{
  position:absolute;z-index:2;left:50%;top:25%;width:84%;transform:translateX(-50%);
  filter:drop-shadow(0 6px 0 rgba(10,6,36,.35));
}
.rvf-leaflet{perspective:900px;color:#17201B}
.rvf-panel{
  padding:9px 14px 10px;background:#FBFBF4;transform-origin:50% 0;border-bottom:1.5px dashed rgba(11,122,71,.35);
  animation:rvf-unfold .8s cubic-bezier(.25,.8,.3,1) both;animation-delay:calc(.3s + var(--n,0) * .75s);
}
.rvf-panel:nth-child(even){background:#F1F3E8}
.rvf-panel:first-child{border-radius:10px 10px 0 0}
.rvf-panel:last-child{border-radius:0 0 10px 10px;border-bottom:0}
@keyframes rvf-unfold{
  from{transform:rotateX(-100deg);opacity:0}
  35%{opacity:1}
  to{transform:rotateX(0);opacity:1}
}
.rvf-head{display:flex;align-items:center;gap:12px;background:#0B7A47 !important;color:#fff}
.rvf-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#1FA66A;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.rvf-title{margin:0;font:400 clamp(26px,7.8vw,32px)/1 var(--display)}
.rvf-tag{margin:3px 0 0;font:800 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#BFFFE0}
.rvf-label{margin:0 0 3px;font:800 12px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#0B7A47}
.rvf-text{margin:0;font:600 clamp(14px,4vw,16px)/1.3 var(--ui);text-wrap:pretty}

@media (max-width:340px){
  .rvm-slot{top:43%}
  .rvm-paper{top:calc(43% + 6px)}
  .rvm-ticket{padding:8px 10px 16px;font-size:10.5px;line-height:1.35}
  .rvm-bars{height:18px;margin-top:6px}
  .rvf-panel{padding:7px 12px 8px}
  .rvf-text{font-size:13.5px}
  .rvf-ico{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .rvm-ticket,.rvf-panel,.rvf-cross{animation:none !important}
  .rv-photo{transition-duration:.01ms !important}
}

/* ---------- revelación · el Bando (pergamino con rodillos de tinta, el grito en rojo y el sello) ---------- */
.rvb{justify-content:center;gap:var(--sp-5);--paper:#F4ECD9;--ink-b:#17121A;--red-b:#C41E14}
.rvb-scroll{position:relative;padding-bottom:18px;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 8px 0 var(--chicle-d))}
.rvb-rod{position:relative;z-index:2;height:18px;margin:0 -6px;border-radius:9px;background:var(--tinta)}
.rvb-rod::before,.rvb-rod::after{content:"";position:absolute;top:-3px;bottom:-3px;width:14px;border-radius:7px;background:var(--red-b)}
.rvb-rod::before{left:-8px}
.rvb-rod::after{right:-8px}
/* el rodillo de abajo, dentro de una guía del alto de todo el pergamino que baja con transform (el rodillo acaba abajo del todo) */
.rvb-track{position:absolute;left:0;right:0;top:0;bottom:0;z-index:2;pointer-events:none;animation:rvb-track 1.6s cubic-bezier(.45,.05,.25,1) both}
.rvb-track .rvb-rod{position:absolute;left:0;right:0;bottom:0}
/* el papel: la ventana (.rvb-paper) baja desde arriba mientras el papel (.rvb-inner) sube lo mismo, así queda quieto y se destapa
   de arriba abajo, solo con transform */
.rvb-paper{overflow:hidden;color:var(--ink-b);animation:rvb-window 1.6s cubic-bezier(.45,.05,.25,1) both}
.rvb-inner{
  position:relative;padding:20px 22px 30px;text-align:center;
  background:
    radial-gradient(120% 40% at 50% 0%,rgba(120,80,30,.14),transparent 70%),
    radial-gradient(120% 40% at 50% 100%,rgba(120,80,30,.16),transparent 70%),
    linear-gradient(90deg,rgba(120,80,30,.16),transparent 9%,transparent 91%,rgba(120,80,30,.16)),
    var(--paper);
  animation:rvb-counter 1.6s cubic-bezier(.45,.05,.25,1) both;
}
.rvb-title{
  margin:0;font:800 clamp(52px,17vw,70px)/1 Rockwell,"Rockwell Nova",Georgia,"Times New Roman",serif;
  letter-spacing:.1em;text-indent:.1em;text-transform:uppercase;color:var(--ink-b);
}
.rvb-rule{height:7px;margin:10px 0 16px;border-top:3px solid var(--ink-b);border-bottom:1px solid var(--ink-b)}
.rvb-shout{margin:0 0 14px;display:flex;align-items:center;justify-content:center;gap:8px}
.rvb-shout-text{
  flex:1;min-width:0;text-wrap:balance;font:400 clamp(34px,10.6vw,46px)/.92 var(--display);text-transform:uppercase;color:var(--red-b);
}
.rvb-ch{opacity:0}
.rvb-ch.is-on{opacity:1}
.rvb-finger{flex:none;display:block;width:44px;text-align:center;font-size:40px;line-height:1;filter:grayscale(1) contrast(1.6)}
.rvb-finger.is-right{transform:scaleX(-1)}
.rvb-text{margin:0 0 12px;font:italic 500 clamp(17px,5vw,20px)/1.38 Georgia,"Times New Roman",serif;text-wrap:balance}
.rvb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.rvb-signed{flex:1;min-width:0;margin:0;text-align:left;text-wrap:balance;font:400 26px/1.05 var(--display);color:var(--ink-b)}
.rvb-text,.rvb-signed{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.rvb-text.is-on,.rvb-signed.is-on{opacity:1;transform:none}
.rvb-seal{position:relative;flex:none;display:block;width:88px;height:88px;margin:-8px -4px -14px 0;opacity:0;transform:rotate(-12deg)}
.rvb-seal svg{display:block;width:100%;height:100%}
.rvb-seal-ico{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;line-height:1;filter:grayscale(1) brightness(1.8) drop-shadow(0 1px 0 rgba(126,13,8,.95))}
.rvb-seal.is-on{opacity:1;animation:rvb-stamp .5s cubic-bezier(.2,.9,.3,1.2) .35s both}
.rvb-next{transition:opacity .4s,transform .08s ease,box-shadow .08s ease}
.rvb-next.is-hidden{opacity:0;pointer-events:none}

/* el papel se destapa de arriba abajo y el rodillo de abajo baja a su sitio (desde encima del de arriba: 18 px = un rodillo) */
@keyframes rvb-window{from{transform:translateY(-100%)}to{transform:none}}
@keyframes rvb-counter{from{transform:translateY(100%)}to{transform:none}}
@keyframes rvb-track{from{transform:translateY(calc(18px - 100%))}to{transform:none}}
@keyframes rvb-stamp{from{opacity:0;transform:scale(1.9) rotate(-34deg)}60%{opacity:1}to{opacity:1;transform:scale(1) rotate(-12deg)}}
.rvb.is-skipped .rvb-paper,.rvb.is-skipped .rvb-inner,.rvb.is-skipped .rvb-track,.rvb.is-skipped .rvb-seal.is-on{animation:none}
.rvb.is-skipped .rvb-text,.rvb.is-skipped .rvb-signed,.rvb.is-skipped .rvb-next{transition-duration:.01ms}
@media (max-width:340px){
  .rvb-finger{display:none}
  .rvb-inner{padding:16px 14px 28px}
  .rvb-seal{width:76px;height:76px}
}
@media (prefers-reduced-motion:reduce){
  .rvb-paper,.rvb-inner,.rvb-track,.rvb-seal.is-on{animation:none !important}
  .rvb-text,.rvb-signed,.rvb-next{transition-duration:.01ms !important}
}

/* ---------- el vale: el pase de tinta que se despliega frase a frase (final de la prueba 6 y revelación «vale») ----------
   Cabecera de tinta con «Vale» en girasol (como su pase en la Cartera) y las frases en tiras de leche y crema; troquelado con sus
   dos muescas. */
.vt{
  position:relative;perspective:900px;color:var(--tinta);overflow:hidden;border-radius:var(--r-tesela);
  -webkit-mask:radial-gradient(circle 12px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 12px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
}
.vt-panel{margin:0;opacity:0;transform-origin:50% 0}
.vt-head{opacity:1} /* la cabecera «Vale» ya está; se despliegan las frases */
.vt.is-open .vt-panel:not(.vt-head){
  animation:vt-unfold calc(var(--vt-step,.7s) * 1.2) cubic-bezier(.25,.8,.3,1) both;animation-delay:calc((var(--n,1) - 1) * var(--vt-step,.7s));
}
@keyframes vt-unfold{
  from{transform:rotateX(-100deg);opacity:0}
  35%{opacity:1}
  to{transform:rotateX(0);opacity:1}
}
.vt-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px 16px 28px;
  background:var(--tinta);color:#fff;border-bottom:2px dashed var(--tinta-3);
}
.vt-head small{display:block;font:700 13px/1 var(--ui);color:var(--lila)}
.vt-head b{display:block;margin-top:6px;font:400 clamp(58px,18vw,72px)/.86 var(--display);color:var(--girasol)}
.vt-star{flex:none;font:400 42px/1 var(--display);color:var(--girasol)}
.vt-line{
  padding:15px 28px 12px;background:var(--leche);border-bottom:2px dashed var(--leche-d);
  font:400 clamp(26px,8vw,31px)/1 var(--display);text-wrap:balance;
}
.vt-line:nth-child(odd){background:var(--crema)}
.vt-line:last-child{border-bottom:0}
@media (prefers-reduced-motion:reduce){
  .vt.is-open .vt-panel{animation:none !important;opacity:1;transform:none}
}

/* revelación «vale»: el gran premio, entre dos filas de bombillas girasol */
.rvv{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-5);-webkit-user-select:none;user-select:none}
.rvv-stage{filter:drop-shadow(0 8px 0 var(--chicle-d))}
.rvv-next{transition:opacity .4s,transform .08s ease,box-shadow .08s ease}
.rvv-next.is-hidden{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .rvv-next{transition-duration:.01ms !important}
}

/* el Bando del hotel, en pequeño: la tarjeta impresa con su delantera y su trasera; se toca para darle la vuelta */
.rvv-hotel{margin:6px 0 0;display:flex;flex-direction:column;align-items:center;gap:20px;transition:opacity .5s ease,transform .6s cubic-bezier(.2,1.2,.4,1)}
.rvv-hotel.is-hidden{opacity:0;transform:translateY(24px) rotate(-4deg);pointer-events:none}
.rvv-card{display:block;width:min(64vw,250px);aspect-ratio:1821/2550;padding:0;perspective:1100px;rotate:-2deg}
.rvv-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.rvv-card.is-flipped .rvv-flip{transform:rotateY(180deg)}
.rvv-face{position:absolute;inset:0;overflow:hidden;border-radius:6px;background:#F1EADC;box-shadow:0 0 0 3px #fff,0 8px 0 3px var(--chicle-d);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.rvv-face.is-back{transform:rotateY(180deg)}
.rvv-face img{display:block;width:100%;height:100%;object-fit:cover}
.rvv-card:focus-visible{outline:3px solid var(--tinta);outline-offset:8px}
.rvv-hotel figcaption{font:700 14px/1.2 var(--ui);color:var(--tinta)}
@media (prefers-reduced-motion:reduce){
  .rvv-hotel,.rvv-flip{transition-duration:.01ms !important}
}