/* Timing v15: layout and hand-offs for #inicio, #transferir, #foh, #operar and #final.
   Pairs with timing-v15.js. Only these chapters are touched. */

/* Scroll length per chapter: "V15 pace" block at the end of handoff-v15.css. */

/* No kicker labels: the headline carries the chapter. */
#inicio .office-copy .eyebrow,#operar .ops-copy .eyebrow,#final .eyebrow{display:none}

/* ---------- #inicio ---------- */
/* Headline top-left, away from the monitor, which grows from the centre of the frame. */
#inicio .office-copy{top:clamp(112px,17vh,190px);bottom:auto;max-width:min(720px,54vw)}
#inicio .office-copy>p:last-child{max-width:min(480px,40vw)}
#inicio .office-shade{background:linear-gradient(165deg,#06070ae8 0%,#06070aa8 32%,#06070a00 62%)}
@media(max-width:700px){
  /* Above the scroll hint (bottom 14px + 26px line + word): never crossed by it. */
  #inicio .office-copy{top:auto;bottom:calc(max(26px,5vh) + 58px);max-width:none}
  #inicio .office-copy>p:last-child{max-width:340px}
  #inicio .office-shade{background:linear-gradient(0deg,#06070aeb 0%,#06070aa6 34%,#06070a00 56%)}
}

/* ---------- #transferir ---------- */
/* Position, size and headline size come from the measured layout in timing-v15.js,
   so the phone never covers the copy at any width. */
#transferir.t15-layout .phone-object{top:var(--t15-phone-top);right:var(--t15-phone-right);transform-origin:top right;
  transform:translateY(var(--phone-y,70px)) rotate(var(--phone-rotate,13deg)) scale(var(--t15-phone-scale,1))}
#transferir.t15-layout :is(.journey-extras,.journey-confirm,.transfer-copy){top:var(--t15-copy-top);left:var(--t15-copy-left);right:auto;max-width:var(--t15-copy-w);width:var(--t15-copy-w)}
#transferir.t15-layout :is(.journey-extras,.journey-confirm,.transfer-copy) h2{font-size:var(--t15-copy-fs);max-width:none;overflow-wrap:normal}
#transferir.t15-layout :is(.journey-extras,.journey-confirm,.transfer-copy)>p{max-width:min(470px,100%)}
#transferir .transfer-exit{will-change:clip-path,opacity}

/* ---------- #foh ---------- */
#foh .t15-foh-blend{opacity:0;transform-origin:50% 45%}
.t15-veil{position:absolute;inset:0;z-index:5;background:#07080c;opacity:0;pointer-events:none}
.t15-handoff-ui{position:absolute;left:0;top:0;z-index:6;width:960px;height:540px;transform-origin:0 0;opacity:0;pointer-events:none;background:#f4f3ee;will-change:transform,opacity}
#operar .t15-veil{z-index:1}
.t15-outro{position:absolute;inset:0;z-index:8;background:#0f1011;opacity:0;pointer-events:none}

/* ---------- #operar ---------- */
#opsScreen .ops-crm-panel{z-index:6}
#opsScreen .ops-command-wave i{transform-origin:50% 100%}
#operar.t15-layout .ops-copy{top:var(--t15-ops-top);bottom:auto;left:var(--t15-ops-left);max-width:var(--t15-ops-w);width:var(--t15-ops-w);transform:translateY(var(--t15-ops-copy-y,0px))}
#operar.t15-layout .ops-copy h2{font-size:var(--t15-ops-fs);margin-bottom:16px}
#operar.t15-layout .ops-copy>p:last-child{max-width:100%;margin:0}
#operar.t15-layout.t15-ops-below .ops-copy{top:auto;bottom:max(24px,4vh)}
#operar .ops-shade{background:linear-gradient(180deg,#06070ae6,#06070a99 30%,transparent 50%)}

/* ---------- #final ---------- */
#final>:not(.closing-office):not(.closing-back){transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
#final:not(.t15-final-in)>:not(.closing-office):not(.closing-back){opacity:0;transform:translateY(26px)}
#final.t15-final-in>p{transition-delay:.12s}
#final.t15-final-in>a{transition-delay:.22s}
@media(prefers-reduced-motion:reduce){
  #final>*{transition:none!important}
}

/* ---------- #inicio, narrow screens: flat store editor (timing-v15.js drawOffice) ---------- */
.office-mobile-surface{display:none}
@media(max-width:699px){
  #inicio .office-mobile-surface{display:block;position:absolute;inset:0;z-index:5;overflow:hidden;background:#f6f5f2;color:#17171a;opacity:0;pointer-events:none}
  .office-mobile-surface .oms-content{position:absolute;inset:0;opacity:var(--oms-content,0)}
  .office-mobile-surface header{position:absolute;left:0;right:0;top:72px;height:56px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;background:#17171a;color:#fff}
  .office-mobile-surface header>strong{font-size:22px;letter-spacing:-.08em}
  .office-mobile-surface header>strong span{color:#d7ff3a}
  .office-mobile-surface header>div{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.04em}
  .office-mobile-surface header small{font-size:11px;font-weight:600;color:#b5b6ba}
  .office-mobile-surface header b{display:grid;justify-items:end}
  .office-mobile-surface header b>span{grid-area:1/1}
  .office-mobile-surface .oms-state-preview{opacity:calc(1 - 2 * var(--wl-published,0))}
  .office-mobile-surface .oms-state-live{opacity:calc(2 * var(--wl-published,0) - 1);color:#d7ff3a}
  .office-mobile-surface .oms-body{position:absolute;left:0;right:0;top:128px;bottom:0;padding:clamp(16px,3vh,26px) 22px;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2.2vh,20px)}
  .office-mobile-surface h3{margin:0;font-size:clamp(32px,9vw,42px);line-height:.95;letter-spacing:-.06em}
  .office-mobile-surface .oms-store{position:relative;flex:none;height:clamp(120px,22vh,200px);overflow:hidden;padding:12px 14px;color:#fff;background:linear-gradient(90deg,#200d3cc9,#200d3c1a 68%),url('/assets/boxoffice/img/festival-1-hero.webp') center/cover}
  .office-mobile-surface .oms-store span{font-size:10px;font-weight:800;letter-spacing:.08em}
  .office-mobile-surface .oms-store strong{position:absolute;left:14px;bottom:24px;font-size:clamp(30px,9vw,40px);line-height:.84;letter-spacing:-.065em}
  .office-mobile-surface .oms-store i{position:absolute;left:14px;right:14px;bottom:11px;height:3px;background:linear-gradient(90deg,#f33391 0 28%,#ff8c5c 28% 53%,#27bde0 53% 76%,#d7ff3a 76%)}
  .office-mobile-surface .oms-slot{position:relative;flex:none;height:clamp(150px,21vh,176px)}
  .office-mobile-surface .oms-design,.office-mobile-surface .oms-brand{position:absolute;inset:0}
  .office-mobile-surface .oms-design{opacity:var(--oms-design,1);transform:translateY(var(--wl-design-y,0px))}
  .office-mobile-surface .oms-brand{opacity:var(--oms-brand,0);transform:translateY(var(--wl-brand-y,16px))}
  .office-mobile-surface label{display:block;margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.055em;color:#6d6a70}
  .office-mobile-surface .oms-templates{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;height:calc(100% - 28px)}
  .office-mobile-surface .oms-templates i{position:relative;display:block;background:#fff;border:1px solid #d0ccd1}
  .office-mobile-surface .oms-templates i::before{content:"";position:absolute;top:5px;left:5px;right:5px;height:52%;background:linear-gradient(#1f103d24,#1f103d24),url('/assets/boxoffice/img/festival-1-hero.webp') center/cover}
  .office-mobile-surface .oms-templates i::after{content:"";position:absolute;left:5px;right:5px;top:calc(52% + 14px);height:3px;background:#411743;box-shadow:0 10px 0 #d9cdd7,0 18px 0 #ece6eb}
  .office-mobile-surface .oms-templates i:nth-child(2)::before{background-position:70% center;filter:hue-rotate(24deg)}
  .office-mobile-surface .oms-templates i:nth-child(3)::before{background-position:25% center;filter:saturate(.6)}
  .office-mobile-surface .oms-templates i.is-selected{outline:3px solid #222;outline-offset:1px}
  .office-mobile-surface .oms-brand>strong{display:block;background:#fff;border:1px solid #ccc9cd;padding:12px;font-size:17px;letter-spacing:-.03em;margin-bottom:18px}
  .office-mobile-surface .oms-swatches{display:flex;gap:14px}
  .office-mobile-surface .oms-swatches i{display:block;width:30px;height:30px;background:#db3384;border:1px solid #0002}
  .office-mobile-surface .oms-swatches i:first-child{outline:2px solid #17171a;outline-offset:4px}
  .office-mobile-surface .oms-swatches i:nth-child(2){background:#24103d}
  .office-mobile-surface .oms-swatches i:nth-child(3){background:#f2a85e}
  .office-mobile-surface .oms-publish{position:relative;flex:none;height:48px;display:grid;place-items:center;background:#17171a;color:#fff;font-size:15px;font-weight:700;opacity:var(--oms-publish,0)}
  .office-mobile-surface .oms-publish>*{grid-area:1/1}
  .office-mobile-surface .oms-publish span{opacity:calc(1 - 2 * var(--wl-published,0))}
  .office-mobile-surface .oms-publish b{opacity:calc(2 * var(--wl-published,0) - 1);color:#d7ff3a}
  .office-mobile-surface .oms-storefront{position:absolute;inset:0;overflow:hidden;background:#f8f5f2;opacity:var(--oms-store,0)}
  .office-mobile-surface .oms-shead{position:absolute;z-index:2;left:0;right:0;top:72px;height:56px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#28123f;color:#fff}
  .office-mobile-surface .oms-shead strong{font-size:16px;letter-spacing:-.045em;white-space:nowrap}
  .office-mobile-surface .oms-shead nav{display:flex;gap:12px;font-size:10px;font-weight:700;white-space:nowrap}
  .office-mobile-surface .oms-shead nav span:last-child{color:#f888b2}
  .office-mobile-surface .oms-page{position:absolute;top:0;left:0;right:0;padding:128px 0 28px;transform:translateY(min(0px,calc((100vh - 100%) * var(--oms-scroll,0))))}
  .office-mobile-surface .oms-page .oms-store{height:clamp(220px,34vh,320px)}
  .office-mobile-surface .oms-exp,.office-mobile-surface .oms-tickets{padding:28px 22px}
  .office-mobile-surface .oms-exp{background:#f5dce7;color:#321b39}
  .office-mobile-surface .oms-tickets{background:#f8f5f2;color:#28192f}
  .office-mobile-surface .oms-exp p,.office-mobile-surface .oms-tickets p{margin:0 0 16px;font-size:10px;font-weight:800;letter-spacing:.075em}
  .office-mobile-surface .oms-exp h4,.office-mobile-surface .oms-tickets h4{margin:0;font-size:clamp(32px,10vw,44px);line-height:.94;letter-spacing:-.055em}
  .office-mobile-surface .oms-tickets h4{margin-bottom:24px}
  .office-mobile-surface .oms-offer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:84px;padding:16px;background:#fff;border:1px solid #d8d3d7}
  .office-mobile-surface .oms-offer>div{display:flex;flex-direction:column;gap:6px;min-width:0}
  .office-mobile-surface .oms-offer small{font-size:10px;font-weight:700;color:#716c73}
  .office-mobile-surface .oms-offer strong{font-size:18px;letter-spacing:-.035em}
  .office-mobile-surface .oms-offer>span{flex:none;padding:12px 13px;background:#28123f;color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
}

/* ---------- #transferir: the next sunset still dissolves in over the current one ---------- */
#transferir #transferBlend{opacity:calc(var(--sunset-image-opacity,1) * var(--sunset-blend,0))}

/* ---------- Reduced motion: stills per beat change with a short fade (mockup-completo.js showStill) ---------- */
@media(prefers-reduced-motion:reduce){
  .journey-shell,#skyVideo{transition:opacity .22s ease}
  .journey-shell.rm-swap,#skyVideo.rm-swap{opacity:0}
}