/* Película del oficio: un solo video con capítulos sincronizados al tiempo de reproducción. */
.oficio-film{position:relative;margin-top:50px;aspect-ratio:16/9;max-height:86svh;width:100%;overflow:hidden;border-radius:4px;background:#1c1811;color:#F1E8DD;isolation:isolate}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.film-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,#1c1811d9,#1c181100 45%),linear-gradient(90deg,#1c181180,transparent 55%)}
.film-chapter{position:absolute;z-index:2;left:clamp(20px,4vw,56px);bottom:clamp(74px,9vw,120px);max-width:min(720px,80%)}
.film-chapter .eyebrow{font-size:9px;letter-spacing:.17em;display:flex;align-items:center;gap:14px;opacity:.85}
.film-chapter .eyebrow:before{content:'';width:28px;height:1px;background:currentColor;opacity:.7}
.film-chapter h3{margin-top:16px;font:300 clamp(40px,5.6vw,92px)/1 var(--display);letter-spacing:-.04em;text-transform:none}
.film-chapter p{margin-top:12px;font-size:14px;opacity:.8;max-width:420px}
.film-chapter.swap h3,.film-chapter.swap p{animation:film-in .7s cubic-bezier(.2,.8,.2,1)}
@keyframes film-in{from{opacity:0;transform:translateY(16px)}}
.film-steps{position:absolute;z-index:2;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);bottom:clamp(22px,3vw,40px);display:grid;grid-template-columns:repeat(var(--steps,5),1fr);gap:10px;margin:0;padding:0;list-style:none}
.film-steps li{display:grid;gap:9px;font:500 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.55;transition:opacity .3s}
.film-steps li.on,.film-steps li.done{opacity:1}
.film-steps button{all:unset;cursor:pointer;display:grid;gap:9px}
.film-steps button:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.film-steps i{display:block;height:2px;background:#f1e8dd40;overflow:hidden;border-radius:2px}
.film-steps i b{display:block;height:100%;background:#F1E8DD;transform-origin:left;transform:scaleX(var(--p,0))}
.film-toggle{position:absolute;z-index:2;top:clamp(16px,2.4vw,28px);right:clamp(16px,2.4vw,28px);width:44px;height:44px;border-radius:50%;border:1px solid #f1e8dd66;background:#1c181140;color:#F1E8DD;backdrop-filter:blur(6px);display:grid;place-items:center;font-size:13px}
.film-toggle:hover{background:#1c181180}
@media(max-width:700px){
 .oficio-film{aspect-ratio:4/5;max-height:none;margin-top:30px}
 .film-steps{gap:6px}.film-steps li span{display:none}
 .film-chapter h3{font-size:11vw}
}
@media(prefers-reduced-motion:reduce){.film-chapter.swap h3,.film-chapter.swap p{animation:none}}