/* Elemento libre: HTML propio dentro del marco. «overflow:hidden» porque el lienzo
   de una presentación es FIJO — si el contenido se derrama, pisa la diapositiva y
   deja de ser una presentación. Si algo no cabe, se agranda el marco. */
.tn-el.tn-libre { overflow: hidden; }
.tn-libre-caja { width: 100%; height: 100%; overflow: hidden; }
.tn-libre-caja img, .tn-libre-caja svg, .tn-libre-caja video { max-width: 100%; }
: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;scrollbar-width:none;}
.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 —
   imprescindible en formato vertical (un lienzo 9:16 escalado para llenar el ANCHO de una pantalla
   de escritorio normal queda mucho más alto que el viewport; sin poder scrollear, la mayor parte de
   la diapositiva simplemente no se vería nunca). Se ancla arriba/izquierda para que el scroll parta
   desde el principio del contenido, no desde un punto medio ya recortado.
   OJO — bug real ya corregido dos veces aquí, no repetirlo: transform:scale() en Chrome NO reduce
   scrollWidth/scrollHeight en proporción al tamaño ya escalado — el navegador sigue midiendo el
   scroll sobre el tamaño SIN escalar del lienzo (1920x1080 fijos), dejando scroll "fantasma" que
   expone el fondo negro del wrap al llegar al final. Por eso el scale ya NO se aplica directo sobre
   .tn-canvas dentro de un wrap de tamaño fijo — se aplica sobre .tn-canvas (transform-origin:top
   left) DENTRO de .tn-scale-box, una caja intermedia cuyo width/height se fija en PX REALES ya
   escalados (ver fitCanvas en VIEWER_ENGINE_JS) — .tn-scale-box es lo que hace scroll, y como su
   tamaño es un valor real (no un artefacto de transform), scrollWidth/scrollHeight lo miden bien. */
.tn-slide-wrap.tn-fit-cover{overflow:auto;align-items:flex-start;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tn-slide-wrap.tn-fit-cover::-webkit-scrollbar{display:none;}
.tn-scale-box{position:relative;flex-shrink:0;}
.tn-canvas{position:relative;width:1920px;height:1080px;transform-origin:top left;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;} }