/* Product showcases use untouched Gwako screenshots and reusable frames. */
.product-showcase{padding:90px 0 40px;display:grid;gap:24px}
.product-showcase-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:12px}
.product-showcase-head h2{font-size:clamp(36px,5vw,64px);line-height:1.04;letter-spacing:-.055em;margin:13px 0 0}
.product-showcase-head p{max-width:325px;color:var(--muted);font-size:15px;line-height:1.55;margin:0}
.proof-stage{--proof-border:#753044;position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:clamp(20px,3.4vw,42px);border:1px solid var(--proof-border);border-radius:24px;background:radial-gradient(ellipse at 82% -30%,#8b183327,transparent 56%),#1b151b;box-shadow:inset 0 1px #f2e8e012,0 22px 48px #0004;scroll-margin-top:100px;transition:border-color .35s ease,box-shadow .35s ease}
.proof-stage.is-current{border-color:#b6465c;box-shadow:inset 0 1px #f2e8e026,0 22px 58px #0008,0 0 42px #9d1d3622}
.proof-stage::before{content:"";position:absolute;inset:10px;border:1px solid #f2e8e012;border-radius:17px;pointer-events:none;z-index:2}
.proof-stage::after{content:"";position:absolute;right:30px;top:0;width:130px;height:3px;background:linear-gradient(90deg,transparent,#d74662,transparent);box-shadow:0 0 20px #b72443}
.proof-stage-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px}
.proof-kicker{display:inline-flex;align-items:center;gap:10px;color:#eacfd0;font-size:11px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
.proof-kicker-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid #bb5268;border-radius:9px;background:#9b20383d;color:#f2e8e0;font-size:11px;letter-spacing:0;box-shadow:inset 0 1px #fff2}
.proof-status{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid #f2e8e02b;border-radius:999px;background:#100e14ad;color:#d8c9c9;font-size:11px;font-weight:700;white-space:nowrap}
.proof-status i{width:6px;height:6px;border-radius:50%;background:#d54461;box-shadow:0 0 10px #d54461}
.proof-stage-heading{position:relative;z-index:2;margin:24px 0 28px}
.proof-stage-heading h3{font-size:clamp(26px,3.6vw,44px);line-height:1.08;letter-spacing:-.045em;margin:0 0 8px}
.proof-stage-heading p{color:#c8b8bc;font-size:15px;line-height:1.5;margin:0}
.product-cutout-display{position:relative;z-index:1;padding:clamp(11px,2vw,24px);overflow:hidden;border:1px solid #7a3449;border-radius:16px;background:radial-gradient(ellipse at 50% 120%,#82223b4d,transparent 62%),#101014;box-shadow:inset 0 1px #f2e8e014,0 24px 55px #0007}
.product-cutout{position:relative;overflow:hidden;background-image:url('/assets/capturas/captura-ver-juntos.webp');background-repeat:no-repeat;box-shadow:0 12px 25px #0009}
.product-cutout--room{width:100%;aspect-ratio:2089 / 203;border-radius:15px;background-size:142.75% auto;background-position:50.3% 12.22%}
.product-cutout-mobile{display:none}
.proof-mascot{position:absolute;z-index:4;pointer-events:none;filter:drop-shadow(0 14px 15px #000b);animation:proof-float 5s ease-in-out infinite}
.proof-mascot--invite{width:120px;right:32px;top:78px}
.proof-stage--arcade{--proof-border:#663044}
.proof-stage--arcade .proof-stage-heading{padding-right:120px}
.proof-mascot--arcade{width:125px;right:38px;top:83px}
.proof-arcade-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.proof-arcade-card{aspect-ratio:525 / 568;min-width:0;border:1px solid #884354;border-radius:16px;background-image:url('/assets/capturas/captura-arcade.webp');background-repeat:no-repeat;background-size:537.9% auto;background-position-y:85%;box-shadow:0 17px 30px #0007;transition:transform .25s ease,border-color .25s ease}
.proof-arcade-card:hover{transform:translateY(-5px);border-color:#d1667b}
.proof-arcade-card--guess{background-position-x:1.7%}
.proof-arcade-card--time{background-position-x:25.9%}
.proof-arcade-card--music{background-position-x:50.15%}
.proof-stage--progress{--proof-border:#74364b}
.proof-progress-layout{position:relative;z-index:1;display:grid;gap:14px}
.proof-progress-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.proof-progress-crop{min-width:0;border:1px solid #884354;border-radius:15px;background-image:url('/assets/capturas/captura-progreso.webp');background-repeat:no-repeat;box-shadow:0 17px 30px #0007}
.proof-progress-crop--rank{aspect-ratio:1920 / 458;background-size:146.46% auto;background-position:3.36% 4.63%}
.proof-progress-crop--missions{aspect-ratio:1080 / 750;background-size:260.37% auto;background-position:1.73% 56.64%}
.proof-progress-crop--checklist{aspect-ratio:1450 / 1000;background-size:193.93% auto;background-position:88.1% 82.34%}
.proof-mascot--victory{width:122px;right:32px;top:78px}
.proof-stage-footer{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.proof-chip{display:inline-flex;align-items:center;min-height:29px;padding:5px 12px;border:1px solid #c26375;border-radius:999px;background:#581a2a5e;color:#e9cdd0;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.showcase-nav{position:sticky;top:10px;z-index:20;display:flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin:-4px 0 0;padding:5px;border:1px solid #8e3c50;border-radius:12px;background:#181116;box-shadow:0 12px 25px #0009}
.showcase-nav>span{padding:0 14px;color:#bcaeb1;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.showcase-nav a{display:inline-flex;align-items:center;gap:8px;min-height:35px;padding:6px 11px;border-radius:8px;color:#d8c8c9;font-size:12px;font-weight:750;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.showcase-nav a b{font-size:10px;color:#ce8594}
.showcase-nav a:hover,.showcase-nav a.active{background:#9b213e;color:#fff}
.showcase-nav a.active b{color:#f4dce0}
.showcase-nav a:focus-visible,.hero-scroll-cue:focus-visible{outline:2px solid #f2e8e0;outline-offset:2px}
.page-scroll-progress{position:fixed;z-index:1000;top:0;left:0;width:100%;height:3px;transform:scaleX(var(--page-progress,0));transform-origin:left;background:linear-gradient(90deg,#7d1831,#dc4a62,#f2e8e0);box-shadow:0 0 14px #c7304a80;pointer-events:none}
.hero-scroll-cue{display:inline-flex;align-items:center;gap:10px;margin-top:30px;color:#d8bfc4;font-size:11px;font-weight:800;letter-spacing:.12em;text-decoration:none;text-transform:uppercase;transition:color .2s}
.hero-scroll-cue span{display:grid;place-items:center;width:25px;height:25px;border:1px solid #ae475f;border-radius:50%;color:#f2e8e0;font-size:16px;line-height:1;animation:scroll-nudge 2.6s ease-in-out infinite}
.hero-scroll-cue:hover{color:#fff}
.download-choices{display:flex;flex-wrap:wrap;gap:7px;max-width:500px;margin-top:12px}
.download-choices[hidden]{display:none}
.download-choice{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 10px;border:1px solid #704151;border-radius:8px;background:#24191f;color:#e9dadd;font-size:11px;font-weight:750;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.download-choice small{color:#bfaeb3;font-size:10px;font-weight:600}
.download-choice--suggested{border-color:#c64c63;background:#4f1b2a}
.download-choice:hover{background:#7d1d37;border-color:#de6177;transform:translateY(-2px)}
.download-choice:focus-visible{outline:2px solid #f2e8e0;outline-offset:2px}
.tour-panel .tour-media{touch-action:pan-y}
.tour-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:30px;padding-top:18px;border-top:1px solid #f2e8e026}
.tour-controls>span{color:#d7b1b9;font-size:11px;font-weight:850;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.tour-controls>div{display:flex;gap:7px}
.tour-controls button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #ae5268;border-radius:9px;background:#7e2038;color:#f2e8e0;cursor:pointer;transition:background .2s,transform .2s}
.tour-controls button:hover{background:#b32c4a;transform:translateY(-2px)}
.tour-controls button:focus-visible{outline:2px solid #f2e8e0;outline-offset:2px}
.tour-controls svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.motion-ready .proof-stage .proof-stage-heading,.motion-ready .proof-stage .product-cutout-display,.motion-ready .proof-stage .proof-arcade-grid,.motion-ready .proof-stage .proof-progress-layout{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.motion-ready .proof-stage.visible .proof-stage-heading,.motion-ready .proof-stage.visible .product-cutout-display,.motion-ready .proof-stage.visible .proof-arcade-grid,.motion-ready .proof-stage.visible .proof-progress-layout{opacity:1;transform:none}
.motion-ready .proof-stage .product-cutout-display,.motion-ready .proof-stage .proof-arcade-grid,.motion-ready .proof-stage .proof-progress-layout{transition-delay:.12s}
@keyframes scroll-nudge{50%{transform:translateY(5px)}}
@keyframes proof-float{50%{transform:translateY(-7px)}}
@media(max-width:900px){
  .product-showcase{padding:65px 0 30px}
  .product-showcase-head{display:block}
  .product-showcase-head p{max-width:500px;margin-top:14px}
  .showcase-nav{top:5px}
  .showcase-nav>span{display:none}
  .product-cutout--room{display:none}
  .product-cutout-mobile{display:grid;gap:10px}
  .product-cutout--identity{width:100%;aspect-ratio:800 / 203;border-radius:12px;background-size:372.75% auto;background-position:20.62% 12.22%}
  .product-cutout--actions{width:100%;aspect-ratio:978 / 203;border-radius:12px;background-size:304.91% auto;background-position:77.84% 12.22%}
  .proof-mascot--invite{width:90px;right:26px;top:95px}
  .proof-mascot--victory{width:90px;right:26px;top:95px}
  .proof-arcade-grid{gap:8px}
  .proof-progress-layout,.proof-progress-grid{gap:8px}
}
@media(max-width:600px){
  .product-showcase{gap:15px;padding-top:50px}
  .product-hero-copy{order:0;padding-top:30px}
  .product-hero-art{order:1;margin:5px 0 0}
  .product-hero-copy .actions>img{display:none}
  .hero-scroll-cue{margin-top:19px}
  .download-choices{gap:6px}
  .download-choice{font-size:10px}
  .tour-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tour-tabs::-webkit-scrollbar{display:none}
  .tour-tab{flex:0 0 auto;min-width:100px;scroll-snap-align:start}
  .showcase-nav{width:100%;justify-content:space-between}
  .showcase-nav a{flex:1;justify-content:center;gap:4px;padding:5px;font-size:10px}
  .showcase-nav a b{display:none}
  .proof-stage{padding:20px 14px;border-radius:17px}
  .proof-stage::before{inset:5px;border-radius:12px}
  .proof-stage-top{align-items:flex-start}
  .proof-status{font-size:0;width:30px;height:30px;padding:0;justify-content:center}
  .proof-stage-heading{margin:20px 0}
  .proof-stage-heading h3{font-size:28px;max-width:330px}
  .proof-stage-heading p{font-size:13px}
  .proof-mascot--invite{width:65px;right:18px;top:82px}
  .proof-mascot--arcade{width:69px;right:18px;top:87px}
  .proof-mascot--victory{width:67px;right:18px;top:87px}
  .proof-stage--arcade .proof-stage-heading{padding-right:63px}
  .proof-arcade-grid{grid-template-columns:1fr;max-width:380px;margin:auto}
  .proof-progress-grid{grid-template-columns:1fr}
  .proof-progress-crop--rank{aspect-ratio:1920 / 600;background-size:146.46% auto;background-position:3.36% 2%}
  .proof-progress-crop--missions,.proof-progress-crop--checklist{max-width:430px;width:100%;margin:auto}
  .product-cutout-display{padding:9px}
  .product-cutout-mobile{gap:7px}
}
@media(prefers-reduced-motion:reduce){.proof-mascot,.hero-scroll-cue span{animation:none}.proof-arcade-card,.proof-stage,.showcase-nav a,.download-choice,.tour-controls button,.motion-ready .proof-stage .proof-stage-heading,.motion-ready .proof-stage .product-cutout-display,.motion-ready .proof-stage .proof-arcade-grid,.motion-ready .proof-stage .proof-progress-layout{transition:none;transform:none;opacity:1}}