/* SHOP IMPO · V78 IMMERSIVE ROUTE
   Capa aislada sobre v77. No reemplaza carrito, catálogo ni checkout. */

:root{
  --si78-violet:#9b5de5;
  --si78-violet-2:#c794ff;
  --si78-ink:#07050a;
  --si78-line:rgba(203,159,255,.22);
  --si78-glow:rgba(155,93,229,.34);
}

/* La marca queda explícita desde el primer frame */
.si-exp-intro-v60 .si-exp-intro-kicker-v60{letter-spacing:.18em!important}
.si-exp-intro-v60 h1 span:first-child{
  color:#fff!important;
  text-shadow:0 0 34px rgba(183,126,255,.24);
}
.si-exp-intro-v60 h1 span:last-child{
  color:transparent!important;
  -webkit-text-stroke:1px rgba(223,198,255,.82);
  text-shadow:0 0 46px rgba(137,50,232,.18);
}
.si78-intro-runtime{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:13px;color:#91889a;font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;text-transform:uppercase
}
.si78-intro-runtime i{display:block;width:28px;height:1px;background:linear-gradient(90deg,transparent,#9b5de5)}

/* -------- Portal posterior a la película -------- */
.si78-portal[hidden]{display:none!important}
.si78-portal{
  position:fixed;z-index:2147483646;inset:0;display:grid;place-items:center;overflow:hidden;
  background:#050308;color:#fff;isolation:isolate;opacity:0;visibility:hidden;
  transition:opacity .48s ease,visibility .48s ease
}
.si78-portal.is-live{opacity:1;visibility:visible}
.si78-portal::before{
  content:"";position:absolute;z-index:-4;inset:-4%;
  background:
    linear-gradient(180deg,rgba(3,2,5,.3),rgba(3,2,5,.86)),
    url("video/shop-impo-historia-v74-poster.webp") center/cover no-repeat;
  filter:saturate(.65) contrast(1.15) brightness(.56);transform:scale(1.04)
}
.si78-portal::after{
  content:"";position:absolute;z-index:-2;inset:0;
  background:
    radial-gradient(circle at 18% 18%,rgba(139,57,239,.32),transparent 32%),
    radial-gradient(circle at 82% 72%,rgba(85,28,160,.25),transparent 34%),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:auto,auto,54px 54px,54px 54px;
  mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%)
}
.si78-portal-beam{
  position:absolute;z-index:-1;left:50%;top:-18vh;width:52vw;height:125vh;translate:-50% 0;
  background:linear-gradient(180deg,rgba(198,145,255,.13),rgba(126,45,224,.02) 62%,transparent);
  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);filter:blur(5px);opacity:.75;
  animation:si78Beam 5.5s ease-in-out infinite alternate
}
.si78-portal-shell{width:min(1120px,calc(100% - 42px));padding:40px 0;position:relative}
.si78-portal-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:34px}
.si78-portal-brand{display:flex;align-items:center;gap:13px;min-width:0}
.si78-portal-brand img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 0 24px rgba(157,84,242,.22))}
.si78-portal-brand span{display:grid;gap:4px}
.si78-portal-brand small,.si78-portal-status{
  color:#9d91a7;font:850 8px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase
}
.si78-portal-brand strong{font:950 clamp(1rem,2vw,1.25rem)/1 sans-serif;letter-spacing:.05em}
.si78-portal-status{display:flex;align-items:center;gap:8px;white-space:nowrap}
.si78-portal-status i{width:7px;height:7px;border-radius:50%;background:#ad73ff;box-shadow:0 0 0 5px rgba(173,115,255,.11),0 0 22px rgba(173,115,255,.65);animation:si78Pulse 1.45s ease-in-out infinite}
.si78-portal-copy{max-width:780px;margin-bottom:26px}
.si78-portal-copy>span{display:inline-flex;align-items:center;gap:9px;color:#b888ff;font:900 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase}
.si78-portal-copy>span::before{content:"";width:38px;height:1px;background:#9b5de5}
.si78-portal-copy h2{margin:13px 0 10px;font:950 clamp(3rem,8vw,7rem)/.82 Anton,Impact,sans-serif;letter-spacing:-.025em;text-transform:uppercase}
.si78-portal-copy h2 em{display:block;color:transparent;font-style:normal;-webkit-text-stroke:1px rgba(218,188,255,.68)}
.si78-portal-copy p{max-width:650px;margin:0;color:#b6adbd;font-size:clamp(.88rem,1.6vw,1rem);line-height:1.65}
.si78-route-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.si78-route{
  position:relative;min-height:188px;padding:18px;border:1px solid rgba(205,164,255,.18);border-radius:18px;
  background:linear-gradient(160deg,rgba(25,17,34,.75),rgba(8,5,12,.86));color:#fff;text-align:left;cursor:pointer;
  overflow:hidden;isolation:isolate;transition:transform .32s cubic-bezier(.16,1,.3,1),border-color .32s ease,box-shadow .32s ease,background .32s ease
}
.si78-route::before{content:"";position:absolute;z-index:-1;inset:auto -35% -60% 15%;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(153,74,246,.27),transparent 65%);transition:.32s ease}
.si78-route:hover,.si78-route:focus-visible{transform:translateY(-6px);border-color:rgba(204,157,255,.58);box-shadow:0 22px 56px rgba(0,0,0,.38),0 0 30px rgba(143,59,238,.13);outline:none;background:linear-gradient(160deg,rgba(42,25,60,.86),rgba(10,6,15,.92))}
.si78-route:hover::before,.si78-route:focus-visible::before{transform:scale(1.25);opacity:1}
.si78-route-no{display:flex;align-items:center;justify-content:space-between;color:#817789;font:900 8px/1 ui-monospace,monospace;letter-spacing:.14em}
.si78-route-no b{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(199,148,255,.26);border-radius:50%;color:#cda5ff;font-size:13px}
.si78-route strong{display:block;margin:38px 0 7px;font:950 clamp(1.4rem,2.6vw,2.15rem)/.95 Anton,Impact,sans-serif;letter-spacing:.01em;text-transform:uppercase}
.si78-route em{display:block;color:#a79eae;font:700 .73rem/1.45 sans-serif;font-style:normal}
.si78-route-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;color:#c49cff;font:850 8px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.si78-route-foot i{font-style:normal;font-size:16px;transition:transform .25s ease}.si78-route:hover .si78-route-foot i{transform:translateX(4px)}
.si78-portal-skip{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:10px 0;border:0;background:transparent;color:#8f8598;font:800 8px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.si78-portal-skip:hover{color:#fff}

/* -------- HUD de recorrido -------- */
.si78-page-progress{position:fixed;z-index:2147483000;left:0;top:0;width:100%;height:2px;pointer-events:none;background:rgba(255,255,255,.03)}
.si78-page-progress i{display:block;width:var(--si78-progress,0%);height:100%;background:linear-gradient(90deg,#6f26c9,#be83ff,#fff);box-shadow:0 0 16px rgba(178,116,255,.55);transition:width .08s linear}
.si78-hud{position:fixed;z-index:1200;right:18px;top:92px;display:flex;align-items:center;gap:9px;min-height:34px;padding:8px 11px;border:1px solid rgba(196,146,255,.18);border-radius:999px;background:rgba(8,5,12,.72);backdrop-filter:blur(12px);pointer-events:none;opacity:.76;transition:.3s ease}
.si78-hud i{width:6px;height:6px;border-radius:50%;background:#aa6eff;box-shadow:0 0 13px rgba(170,110,255,.75)}
.si78-hud span{color:#a99fb0;font:850 7px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}.si78-hud b{color:#efe8f5;font-weight:900}
body.si-exp-locked-v60 .si78-hud,body.si-exp-locked-v60 .si78-page-progress{opacity:0}

/* -------- Ambiente reactivo y revelado -------- */
.si78-ambient{position:fixed;z-index:0;inset:0;pointer-events:none;background:radial-gradient(circle 420px at var(--si78-x,50vw) var(--si78-y,42vh),rgba(139,60,230,.055),transparent 72%);mix-blend-mode:screen;opacity:.85}
.si78-reveal{opacity:0;transform:translateY(22px);filter:blur(7px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease}
.si78-reveal.si78-in{opacity:1;transform:none;filter:none}
.si78-route-target{animation:si78Target 1.8s cubic-bezier(.16,1,.3,1) both}

/* El hero se siente más “escenario”, sin interferir con sus transformaciones previas */
.hero.si-exp-hero-v60{isolation:isolate}
.hero.si-exp-hero-v60::after{background-position:calc(50% + var(--si78-hero-x,0px)) calc(50% + var(--si78-hero-y,0px))!important;transition:background-position .25s ease-out}
.si-exp-hero-copy-v60::after{
  content:"SHOP IMPO / IMMERSIVE STORE";display:block;margin-top:18px;color:rgba(203,180,217,.5);
  font:800 7px/1 ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase
}

/* Accesibilidad */
.si78-route:focus-visible,.si78-portal-skip:focus-visible{outline:2px solid #c997ff;outline-offset:3px}

@keyframes si78Beam{to{transform:translateX(2.5%) scaleX(1.08);opacity:.94}}
@keyframes si78Pulse{50%{opacity:.45;transform:scale(.72)}}
@keyframes si78Target{0%{box-shadow:0 0 0 0 rgba(188,126,255,.0)}25%{box-shadow:0 0 0 2px rgba(188,126,255,.7),0 0 45px rgba(139,55,234,.28)}100%{box-shadow:0 0 0 0 rgba(188,126,255,0)}}

@media(max-width:900px){
  .si78-route-grid{grid-template-columns:1fr 1fr}
  .si78-route{min-height:156px}.si78-route strong{margin-top:22px}
  .si78-portal-shell{width:min(720px,calc(100% - 28px));padding:26px 0}
  .si78-portal-top{margin-bottom:22px}.si78-portal-brand img{width:58px;height:58px}
  .si78-portal-copy h2{font-size:clamp(2.7rem,11vw,5.4rem)}
}
@media(max-width:600px){
  .si78-portal{place-items:start center;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .si78-portal-shell{width:calc(100% - 24px);padding:calc(18px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom))}
  .si78-portal-top{margin-bottom:20px}.si78-portal-brand img{width:46px;height:46px}.si78-portal-status{font-size:6px}
  .si78-portal-copy{margin-bottom:18px}.si78-portal-copy>span{font-size:7px}.si78-portal-copy h2{margin-top:10px;font-size:clamp(2.65rem,14vw,4.4rem)}.si78-portal-copy p{font-size:.8rem;line-height:1.55}
  .si78-route-grid{grid-template-columns:1fr;gap:8px}.si78-route{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px;min-height:86px;padding:13px 14px;border-radius:14px}.si78-route-no{display:block}.si78-route-no>span{display:none}.si78-route-no b{width:31px;height:31px}.si78-route strong{margin:0;font-size:1.3rem}.si78-route em{font-size:.66rem}.si78-route-foot{margin:0}.si78-route-foot span{display:none}.si78-route-foot i{font-size:20px}
  .si78-portal-skip{margin-top:14px}
  .si78-hud{top:calc(70px + env(safe-area-inset-top));right:10px;max-width:55vw;padding:7px 9px}.si78-hud span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:6px}
  .si78-ambient{display:none}
  .si78-intro-runtime{font-size:6px;letter-spacing:.09em}
}
@media(max-height:620px) and (orientation:landscape){
  .si78-portal-shell{padding:14px 0}.si78-portal-top{margin-bottom:10px}.si78-portal-copy{margin-bottom:12px}.si78-portal-copy h2{font-size:clamp(2.3rem,7vw,4rem);margin:6px 0}.si78-portal-copy p{display:none}.si78-route{min-height:118px}.si78-route strong{margin-top:18px}.si78-portal-skip{margin-top:9px}
}
@media(prefers-reduced-motion:reduce){
  .si78-portal-beam,.si78-portal-status i,.si78-route-target{animation:none!important}
  .si78-route,.si78-reveal,.si78-page-progress i{transition:none!important}
  .si78-reveal{opacity:1;transform:none;filter:none}
}

/* V78 · entrada más clara: la marca aparece rápido, pero el usuario conserva tiempo para leer. */
.si-exp-intro-v60:not(.is-hidden) .si-exp-intro-logo-v60{animation-duration:.72s!important;animation-delay:.08s!important}
.si-exp-intro-v60:not(.is-hidden) .si-exp-intro-kicker-v60{animation-duration:.68s!important;animation-delay:.16s!important}
.si-exp-intro-v60:not(.is-hidden) .si-exp-intro-center-v60 h1 span:first-child{animation-duration:.78s!important;animation-delay:.22s!important}
.si-exp-intro-v60:not(.is-hidden) .si-exp-intro-center-v60 h1 span:last-child{animation-duration:.82s!important;animation-delay:.34s!important}
.si-exp-intro-v60:not(.is-hidden) .si-exp-intro-center-v60>p{animation-duration:.72s!important;animation-delay:.58s!important}
.si-exp-intro-v60:not(.is-hidden) .si-exp-intro-actions-v60{animation-duration:.68s!important;animation-delay:.78s!important}
.si-exp-intro-v60:not(.is-hidden) .si-v61-volume-hint{animation-duration:.62s!important;animation-delay:.94s!important}
.si-exp-intro-v60:not(.is-hidden) .si-exp-skip-v60{animation-duration:.62s!important;animation-delay:1.02s!important}
.si-v72-narrator.is-muted{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* ============================================================
   V83 HOTFIX — el HUD de capítulo no debe superponerse con
   la barra "Tu recorrido" en móvil ni en anchos intermedios.
   ============================================================ */
@media(max-width:980px){
  .si78-hud{
    display:none !important;
  }
}

@media(min-width:981px){
  .si79-route-context.is-visible ~ .si78-hud,
  body .si78-hud{
    top:120px;
  }
}