:root{
  --tn-navy:#1A2633; --tn-teal-deep:#005565; --tn-teal:#006D82; --tn-sage:#7D9B5B; --tn-cream:#EADFCE;
}
/* .tn-deck-root es el contrato BASE: se puede incrustar dentro de otra página (el editor app8.html,
   en el stage del canvas o en una miniatura pequeña) sin pisar su body/tema — llena al 100% a su
   contenedor, sin quedarse fijo a la ventana. Solo el visor público (modo no editable, muchos slides)
   agrega el modificador .tn-deck-fullpage para fijarse a toda la ventana con scroll-snap entre slides. */
.tn-deck-root{position:relative;width:100%;height:100%;overflow:hidden;background:var(--tn-navy);color:var(--tn-cream);font-family:'Jost',sans-serif;}
.tn-deck-root *{box-sizing:border-box;}
.tn-deck-root.tn-deck-fullpage{position:fixed;inset:0;overflow-y:scroll;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;}
.tn-deck-root::-webkit-scrollbar{display:none;}
.tn-slide-wrap{position:relative;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;}
.tn-deck-fullpage .tn-slide-wrap{min-height:100vh;}
/* Modo 'cover' (llenar pantalla): si el lienzo escalado excede el contenedor, se permite scroll en
   vez de recortarlo en silencio — inevitable en formato vertical dentro de una ventana más ancha
   que alta. Se alinea arriba/izquierda (no al centro) para que el scroll parta desde el principio. */
.tn-slide-wrap.tn-fit-cover{overflow:auto;align-items:flex-start;justify-content:flex-start;-webkit-overflow-scrolling:touch;}
.tn-canvas{position:relative;width:1920px;height:1080px;flex-shrink:0;transform-origin:center center;overflow:hidden;box-shadow:0 0 80px rgba(0,0,0,.5);}
.tn-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
.tn-bg-kenburns{animation:tnKenBurns 22s ease-in-out infinite alternate;}
@keyframes tnKenBurns{from{transform:scale(1);}to{transform:scale(1.12);}}
.tn-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(26,38,51,0) 40%, rgba(26,38,51,.6) 100%);pointer-events:none;}

.tn-el{position:absolute;}
.tn-el.tn-anim{opacity:0;transition:opacity .9s cubic-bezier(.22,.68,0,1.01), transform .9s cubic-bezier(.22,.68,0,1.01);}
.tn-el.tn-anim.tn-anim-fade-up{transform:translateY(48px);}
.tn-el.tn-anim.tn-anim-fade-in{transform:none;}
.tn-el.tn-anim.tn-anim-zoom-in{transform:scale(.85);}
.tn-el.tn-anim.tn-anim-slide-left{transform:translateX(72px);}
.tn-el.tn-anim.tn-anim-slide-right{transform:translateX(-72px);}
.tn-el.tn-anim.tn-in{opacity:1;transform:none;}

.tn-text{line-height:1.25;font-family:'Jost',sans-serif;}
.tn-image{width:100%;height:100%;object-fit:cover;display:block;border:0;}
.tn-image.tn-fit-contain{object-fit:contain;}
.tn-icon-wrap{display:flex;align-items:center;justify-content:center;overflow:hidden;}
.tn-icon{line-height:1;}
.tn-shape{width:100%;height:100%;}
.tn-ornament{width:100%;height:100%;display:flex;}
.tn-ornament svg{width:100%;height:100%;overflow:visible;}
.tn-linked{cursor:pointer;transition:opacity .2s ease, filter .2s ease;}
.tn-linked:hover{opacity:.85;}
.tn-image-placeholder{border:2px dashed rgba(234,223,206,.35);background:rgba(234,223,206,.04);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;}
.tn-image-placeholder:hover{border-color:rgba(125,155,91,.7);background:rgba(125,155,91,.08);}
.tn-placeholder-inner{display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(234,223,206,.5);font-family:'Jost',sans-serif;pointer-events:none;}
.tn-placeholder-icon{font-size:28px;line-height:1;font-weight:300;}
.tn-placeholder-text{font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
.tn-image-wrap{position:absolute;overflow:hidden;}

.tn-nav-dots{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:14px;}
.tn-dot{width:9px;height:9px;border-radius:999px;background:rgba(234,223,206,.35);cursor:pointer;transition:all .3s ease;border:1px solid rgba(234,223,206,.5);}
.tn-dot.active{background:var(--tn-cream);transform:scale(1.35);box-shadow:0 0 12px rgba(234,223,206,.6);}
.tn-nav-numbers{position:fixed;right:28px;bottom:28px;z-index:50;color:var(--tn-cream);font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.15em;background:rgba(0,0,0,.35);padding:6px 14px;border-radius:999px;}
.tn-nav-progress{position:fixed;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.12);z-index:50;}
.tn-nav-progress-bar{height:100%;width:0;background:var(--tn-cream);transition:width .1s linear;}
.tn-nav-arrows{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:10px;}
.tn-nav-arrow-btn{width:34px;height:34px;border-radius:999px;background:rgba(0,0,0,.35);color:var(--tn-cream);border:1px solid rgba(234,223,206,.3);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0;}
.tn-nav-arrow-btn:hover{background:rgba(0,0,0,.55);}

/* Esquina superior izquierda — deliberadamente lejos de dots/numbers/arrows/progress (derecha y
   abajo) para no superponerse con ningún estilo de navegación. */
.tn-fit-toggle{position:fixed;left:16px;top:16px;z-index:55;width:34px;height:34px;border-radius:999px;background:rgba(0,0,0,.35);color:var(--tn-cream);border:1px solid rgba(234,223,206,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.tn-fit-toggle:hover{background:rgba(0,0,0,.55);}
.tn-fit-toggle .material-icons-outlined{font-size:18px;}

.tn-scroll-hint{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:50;color:var(--tn-cream);opacity:.75;font-size:11px;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:6px;transition:opacity .4s ease;animation:tnBounce 2.4s ease-in-out infinite;}
@keyframes tnBounce{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

.tn-map-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.tn-map-route-line{fill:none;stroke:var(--tn-cream);stroke-width:2;stroke-dasharray:7 9;stroke-linecap:round;opacity:.85;}
.tn-map-pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;z-index:2;}
.tn-map-pin-dot{width:14px;height:14px;border-radius:50%;background:var(--tn-cream);border:2px solid var(--tn-navy);box-shadow:0 0 0 4px rgba(234,223,206,.25);}
.tn-map-pin-label{margin-top:6px;background:rgba(26,38,51,.85);color:var(--tn-cream);padding:3px 10px;border-radius:999px;font-size:13px;white-space:nowrap;font-weight:500;}

@media (max-width:900px){ .tn-nav-dots{right:14px;} .tn-dot{width:7px;height:7px;} }