/* ==========================================================================
   deck.css · pantalla de carga + motor de diapositivas a pantalla completa
   Solo se usa en index.html
   ========================================================================== */

/* ---------- Pantalla de carga ---------- */
.loader{
  position:fixed;inset:0;z-index:1000;
  background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;padding:24px;
  animation:loaderOut .5s cubic-bezier(.6,0,.3,1) 2.28s forwards;
}
@keyframes loaderOut{to{opacity:0;transform:translateY(-14px);visibility:hidden;}}

.loader.fast{animation:loaderOut .26s ease .22s forwards;}
.loader.fast .lo-route,.loader.fast .lo-word,.loader.fast .lo-mark,
.loader.fast .lo-pin,.loader.fast .lo-bar i{animation-duration:.24s;animation-delay:0s;}
.loader.fast .lo-progress{opacity:0;}

.lo-stage{width:min(300px,78vw);}
.lo-svg{width:100%;height:auto;overflow:visible;}

/* marca */
.lo-mark{opacity:0;transform-origin:center;animation:markIn .6s cubic-bezier(.22,1,.36,1) .05s forwards;}
@keyframes markIn{from{opacity:0;transform:scale(.82);}to{opacity:1;transform:scale(1);}}

/* la ruta China → México se dibuja sola */
.lo-route{
  fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:240;stroke-dashoffset:240;
  animation:drawRoute 1.25s cubic-bezier(.5,0,.2,1) .28s forwards;
}
@keyframes drawRoute{to{stroke-dashoffset:0;}}

.lo-pin{opacity:0;transform-origin:center;}
.lo-pin-a{animation:pinIn .42s cubic-bezier(.22,1,.36,1) .3s forwards;}
.lo-pin-b{animation:pinIn .42s cubic-bezier(.22,1,.36,1) 1.42s forwards;}
@keyframes pinIn{from{opacity:0;transform:scale(.3);}to{opacity:1;transform:scale(1);}}

.lo-word{
  text-align:center;opacity:0;
  animation:wordIn .7s cubic-bezier(.22,1,.36,1) .95s forwards;
}
@keyframes wordIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.lo-word .n{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.15rem,5.2vw,1.5rem);letter-spacing:-.025em;color:var(--ink);
  line-height:1.15;
}
.lo-word .s{
  font-family:var(--display);font-weight:600;
  font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);margin-top:7px;
}

.lo-progress{width:min(180px,52vw);height:2px;background:var(--line);border-radius:2px;overflow:hidden;}
.lo-bar i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--red));
  transform:translateX(-100%);
  animation:barFill 1.5s cubic-bezier(.5,0,.25,1) .75s forwards;
}
@keyframes barFill{to{transform:translateX(0);}}

body.is-loading{overflow:hidden;}
body.is-loading .deck,body.is-loading .topbar,body.is-loading .botnav,body.is-loading .dots{
  opacity:0;
}
.deck,.topbar,.botnav,.dots{transition:opacity .5s ease .1s;}

/* ---------- Fondo animado (canvas de rutas) ---------- */
#bg{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;
}

/* ---------- Motor de diapositivas ---------- */
.deck{
  position:fixed;inset:0;z-index:1;
  overflow:hidden;
  /* pan-y, NO none: touch-action se intersecta con los ancestros, y con
     'none' el navegador bloqueaba el desplazamiento nativo de los paneles
     internos. El gesto del deck se arbitra en JS con preventDefault. */
  touch-action:pan-y;
}
.deck-track{
  will-change:transform;
  transform:translate3d(0,0,0);
}
.slide{
  height:var(--slide-h,100%);
  position:relative;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* zona segura entre las barras fijas */
.slide-inner{
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--topbar-h) + 16px) var(--gutter) calc(var(--botnav-h) + 18px);
  width:100%;max-width:640px;margin:0 auto;
}

/* variante con desplazamiento interno */
.slide-scroll{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:calc(var(--topbar-h) + 16px) var(--gutter) calc(var(--botnav-h) + 18px);
  width:100%;max-width:640px;margin:0 auto;
  scrollbar-width:none;
}
.slide-scroll::-webkit-scrollbar{display:none;}
/* margin auto centra el bloque cuando cabe, sin recortarlo cuando desborda */
.slide-scroll > .sc-in{margin:auto 0;width:100%;}

/* pista visual de que hay más contenido dentro del panel */
.slide.has-more::after{
  content:"";position:absolute;left:0;right:0;
  bottom:calc(var(--botnav-h) - 2px);height:52px;
  background:linear-gradient(to top,var(--paper) 12%,rgba(255,255,255,0));
  pointer-events:none;opacity:0;transition:opacity .3s ease;
}
.slide.has-more.showing-more::after{opacity:1;}

/* animación de entrada de contenido por diapositiva */
.slide .sl-anim{opacity:0;transform:translateY(20px);}
.slide.is-active .sl-anim{
  animation:slideItemIn .68s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes slideItemIn{to{opacity:1;transform:none;}}
.slide.is-active .sl-anim:nth-child(1){animation-delay:.05s;}
.slide.is-active .sl-anim:nth-child(2){animation-delay:.12s;}
.slide.is-active .sl-anim:nth-child(3){animation-delay:.19s;}
.slide.is-active .sl-anim:nth-child(4){animation-delay:.26s;}
.slide.is-active .sl-anim:nth-child(5){animation-delay:.33s;}
.slide.is-active .sl-anim:nth-child(6){animation-delay:.40s;}
.slide.is-active .sl-anim:nth-child(7){animation-delay:.47s;}

/* ---------- Indicador de diapositivas ---------- */
.dots{
  position:fixed;z-index:70;
  right:6px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:5px;
  padding:8px 4px;border-radius:100px;
  background:none;                     /* sin recuadro: solo los puntos */
}
.dots button{
  width:22px;height:16px;display:flex;align-items:center;justify-content:center;
  position:relative;
}
.dots button::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ink-3);opacity:.34;
  transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1),background-color .25s ease;
}
.dots button:hover::before{opacity:.7;}
.dots button.is-active::before{
  background:var(--red);opacity:1;transform:scale(1.1);
  box-shadow:0 0 0 4px var(--red-soft);
}

@media (min-width:768px){
  .dots{right:20px;gap:8px;padding:12px 7px;}
  .dots button{width:28px;height:20px;}
  .dots button::before{width:7px;height:7px;}
  .dots button::after{
    content:attr(data-label);
    position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);
    font-family:var(--display);font-weight:600;font-size:.68rem;letter-spacing:.02em;
    color:var(--ink);background:var(--paper);
    padding:5px 11px;border-radius:8px;white-space:nowrap;
    box-shadow:var(--shadow-md);
    opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  }
  .dots button:hover::after{opacity:1;transform:translateY(-50%) translateX(0);}
}

/* ---------- Indicador de "desliza" ---------- */
.scrollcue{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--botnav-h) + 14px);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  z-index:5;pointer-events:none;
}
.scrollcue .txt{
  font-family:var(--display);font-weight:600;
  font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;
}
.scrollcue .mouse{
  width:23px;height:36px;border:1.8px solid var(--ink-3);border-radius:100px;
  position:relative;opacity:.7;
}
.scrollcue .mouse::after{
  content:"";position:absolute;left:50%;top:7px;
  width:3px;height:7px;border-radius:3px;background:var(--red);
  transform:translateX(-50%);
  animation:wheel 1.9s cubic-bezier(.5,0,.35,1) infinite;
}
@keyframes wheel{
  0%{opacity:0;transform:translateX(-50%) translateY(0);}
  22%{opacity:1;}
  70%{opacity:0;transform:translateX(-50%) translateY(11px);}
  100%{opacity:0;}
}
.deck.moved .scrollcue{opacity:0;transition:opacity .4s ease;}

/* En tableta la pastilla flotante ocupa el centro: el indicador sube encima. */
@media (min-width:768px){
  .scrollcue{bottom:98px;}
}
/* Con ancho de sobra ya cabe a la izquierda, sin chocar con la pastilla. */
@media (min-width:1100px){
  .scrollcue{
    left:var(--gutter);transform:none;bottom:30px;
    flex-direction:row;align-items:center;gap:12px;
  }
  .scrollcue .txt{text-align:left;}
}

/* ---------- Diapositiva de cierre (oscura) ---------- */
.slide-dark{background:var(--ink);}
.slide-dark::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 65% at 50% 0%,rgba(193,18,31,.22),transparent 62%),
    radial-gradient(70% 50% at 82% 100%,rgba(176,136,41,.16),transparent 65%);
  pointer-events:none;
}
.slide-dark h2,.slide-dark h3{color:#fff;}
.slide-dark .lede,.slide-dark p{color:rgba(255,255,255,.74);}
.slide-dark .fine{color:rgba(255,255,255,.5);}
.slide-dark .eyebrow{color:#fff;}
.slide-dark .btn-ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.24);box-shadow:none;}
.slide-dark .btn-ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.4);}
.slide-dark .kc-static{color:rgba(255,255,255,.42);}
.slide-dark .prep-list li{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.12);}
.slide-dark .prep-list li::before{color:var(--gold);}