/* Portrait and landscape are composed separately; neither crops the sheet. */
.arte{position:absolute;inset:0;overflow:hidden}
#escenario{height:var(--story-height,100dvh);bottom:auto}
.esc{will-change:auto;contain:layout style}
.esc[aria-hidden="true"]{display:none}
.vista,.capa-img,.txt,.titulo{will-change:auto}
.story-light .marco{perspective:none}
.story-light .vista{transform-style:flat}
.story-light .capa-img{transform-origin:center;-webkit-mask-image:none;mask-image:none;clip-path:inset(0 calc((1 - var(--r))*100%) 0 0)}
.story-light .capa-img.vineta{clip-path:none;box-shadow:none}
.story-light .txt.grande{text-shadow:none}
.story-compact{--story-top:calc(64px + env(safe-area-inset-top,0px));--story-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.story-compact header{padding:calc(10px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px));background:var(--papel);color:var(--tinta);mix-blend-mode:normal;min-height:64px}
.story-compact.en-oscura header{background:var(--tinta);color:var(--papel)}
.story-compact .marca{font-size:12px;flex-shrink:0}
.story-compact .marca small{font-size:9px}
.story-compact header nav{gap:0}
.story-compact header nav a:not(#btn-idioma){display:none}
.story-compact header nav button,.story-compact header nav a{font-size:10px;padding:8px;min-height:44px;white-space:nowrap}
.story-compact .arte{top:var(--story-top);bottom:calc(var(--story-bottom) + 250px);left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px))}
.story-compact .capa{top:auto;bottom:var(--story-bottom);left:max(18px,env(safe-area-inset-left,0px));right:max(18px,env(safe-area-inset-right,0px));height:240px}
.story-compact .txt,.story-compact.vertical .txt{left:0;right:0;top:0;bottom:auto;max-width:none;text-align:left;transform:none!important;font-size:15px;line-height:1.45}
.story-compact .txt.caja{padding:14px 0 0;border:0;border-top:1px solid currentColor;box-shadow:none;background:transparent}
.story-compact .txt.grande{font-size:clamp(25px,7vw,34px);font-weight:600;line-height:1.06;letter-spacing:-.025em;padding-top:14px;text-shadow:none}
.story-compact .txt[data-text-active="false"],.story-compact .titulo{visibility:hidden!important;opacity:0!important}
.story-compact .txt[data-text-active="true"]{visibility:visible!important;opacity:1!important}
.story-compact .bloque{position:fixed;top:var(--story-top);bottom:var(--story-bottom);left:0;right:0}
.story-compact .hero{left:20px;right:20px;top:42%;transform:translateY(-50%)}
.story-compact .hero h1{font-size:clamp(34px,10vw,52px)}
.story-compact .hero .sub{font-size:15px;max-width:28ch;line-height:1.45}
.story-compact .hero .desliza{margin-top:32px}
.story-rotate{display:none}
.story-compact.vertical .story-rotate{display:flex;align-items:center;gap:12px;position:fixed;left:20px;right:20px;bottom:calc(var(--story-bottom) + 16px);font-size:13px;line-height:1.4;max-width:32ch;padding-top:16px;border-top:1px solid var(--gris);color:var(--tinta-suave)}
.story-rotate svg{position:static;width:30px;height:30px;flex:none}
.story-compact #capitulos{flex-wrap:nowrap;align-items:center;padding:8px max(8px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));gap:3px;background:var(--papel)}
.story-compact.en-oscura #capitulos{background:var(--tinta)}
.story-compact #capitulos button{font-size:10px;padding:6px 10px;min-height:44px;min-width:44px}
.story-compact #capitulos button span{display:none}
.story-compact #capitulos button.activo span{display:inline}
.story-compact #creditos-abrir{position:static;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;border:0}
.story-compact #creditos-abrir .credito-icono{display:block}
.story-compact #creditos-abrir .credito-texto{display:none}
.story-compact .final{left:20px;right:20px;top:50%;transform:translateY(-50%)}
.story-compact .final .aviso{font-size:13px;margin-bottom:20px}
.story-compact .final h2{font-size:clamp(34px,9vw,50px)}
.story-compact .final .invita{margin-top:20px;font-size:18px}
.story-compact .final .acciones{margin-top:20px}
.story-compact .final .btn{font-size:13px;padding:12px 16px}

/* Landscape keeps the original sheet and overlaid desktop composition. */
.story-landscape{--story-top:calc(48px + env(safe-area-inset-top,0px));--story-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
.story-landscape header{min-height:48px;padding:2px max(16px,env(safe-area-inset-right,0px)) 2px max(16px,env(safe-area-inset-left,0px))}
.story-landscape header nav a:not(#btn-idioma){display:none}
.story-landscape header nav button,.story-landscape header nav a{font-size:10px;min-height:44px;padding:8px}
.story-landscape .marca{font-size:12px}
.story-landscape .arte,.story-landscape .capa{inset:0}
.story-landscape .txt.caja{font-size:12px;line-height:1.35;padding:9px 12px;max-width:30ch;box-shadow:none}
.story-landscape .txt.grande{font-size:clamp(24px,4.3vw,40px);max-width:10em}
.story-landscape .titulo{font-size:18px}
.story-landscape .p-tl,.story-landscape .p-tr2{top:calc(var(--story-top) + 8px);left:max(22px,env(safe-area-inset-left,0px));right:auto}
.story-landscape .p-tr2{left:auto;right:max(22px,env(safe-area-inset-right,0px))}
.story-landscape .p-tr{top:calc(var(--story-top) + 8px);right:max(22px,env(safe-area-inset-right,0px));left:auto}
.story-landscape .p-bl{bottom:calc(var(--story-bottom) + 8px);left:max(22px,env(safe-area-inset-left,0px));right:auto;top:auto}
.story-landscape .p-br{bottom:calc(var(--story-bottom) + 8px);right:max(22px,env(safe-area-inset-right,0px));left:auto;top:auto}
.story-landscape .p-cl{left:max(22px,env(safe-area-inset-left,0px));right:auto;top:43%;transform:translateY(-50%)}
.story-landscape .p-cr{right:max(22px,env(safe-area-inset-right,0px));left:auto;top:43%}
.story-landscape #capitulos{padding:3px max(12px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));flex-wrap:nowrap}
.story-landscape #capitulos button{font-size:10px;min-height:36px}
.story-landscape #capitulos button span{display:none}
.story-landscape #capitulos button.activo span{display:inline}
.story-landscape #creditos-abrir{position:static;width:36px;min-width:36px;padding:0;display:flex;justify-content:center;align-items:center}
.story-landscape #creditos-abrir .credito-icono{display:block}
.story-landscape #creditos-abrir .credito-texto{display:none}
.story-landscape .hero{left:max(24px,env(safe-area-inset-left,0px));top:46%;right:20px}
.story-landscape .hero h1{font-size:clamp(32px,5.5vw,52px);max-width:15em}
.story-landscape .hero .sub{font-size:15px;margin-top:16px}
.story-landscape .hero .desliza{margin-top:18px}
.story-landscape .final{left:max(24px,env(safe-area-inset-left,0px));right:max(24px,env(safe-area-inset-right,0px))}
.story-landscape .final .aviso{font-size:12px;margin-bottom:10px;max-width:60ch}
.story-landscape .final h2{font-size:34px}
.story-landscape .final .rol{font-size:12px;margin-top:5px}
.story-landscape .final .invita{font-size:15px;max-width:none;margin-top:10px}
.story-landscape .final .acciones{margin-top:12px}
.story-landscape .final .btn{font-size:12px;padding:10px 16px}
@media(max-height:660px) and (orientation:portrait){.story-compact .arte{bottom:calc(var(--story-bottom) + 178px)}.story-compact .capa{height:170px}.story-compact .txt.caja{font-size:13px}.story-compact .hero{top:36%}}