/* «Así nace cada una»: vídeo del taller con capítulos sincronizados. Lo usan la portada y /allways. */
.taller{padding-block:64px;border-top:1px solid var(--rule)}
.tl-grid{display:grid;gap:30px;align-items:center}
@media (min-width:860px){.tl-grid{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:64px}}
.tl-film{margin:0;justify-self:center;width:100%;max-width:440px;min-width:0}
.tl-frame{position:relative;aspect-ratio:4/5;background:#1a1713 center/cover no-repeat;overflow:hidden;box-shadow:0 2px 4px rgba(23,20,15,.12),0 40px 70px -34px rgba(23,20,15,.65)}
.tl-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tl-frame::after{content:"";position:absolute;inset:0 0 auto;height:90px;background:linear-gradient(rgba(10,9,8,.42),transparent);pointer-events:none}
.tl-bars{position:absolute;z-index:2;left:12px;right:12px;top:12px;display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:4px}
.tl-bars i{height:2px;background:rgba(255,255,255,.35);overflow:hidden}
.tl-bars b{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.tl-tag{position:absolute;z-index:2;left:12px;top:24px;color:#fff;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.tl-play{position:absolute;z-index:2;right:10px;bottom:10px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(15,13,10,.72);color:#fff;cursor:pointer;transition:transform 160ms var(--ease-out,ease)}
.tl-play:active{transform:scale(.94)}
.tl-play svg{width:18px;height:18px;fill:currentColor}
.tl-play .i-play{display:none}
.tl-frame.paused .tl-play .i-play{display:block}
.tl-frame.paused .tl-play .i-pause{display:none}
.tl-cap{position:absolute;z-index:2;left:0;right:0;bottom:0;margin:0;padding:44px 64px 16px 16px;background:linear-gradient(transparent,rgba(10,9,8,.6));color:#fff;font:italic 400 1.35rem/1.1 var(--f-display);pointer-events:none}
@media (min-width:860px){.tl-cap{display:none}}

.tl-kick{margin:0 0 10px;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.tl-txt h2{margin:0;font:400 clamp(2.3rem,6vw,3.4rem)/1 var(--f-display);letter-spacing:-.01em}
.tl-lead{margin:14px 0 0;max-width:44ch;color:var(--graphite)}
.tl-ch{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--ink)}
.tl-ch li{border-bottom:1px solid var(--rule)}
.tl-ch button{position:relative;display:grid;grid-template-columns:38px 1fr;gap:4px 12px;width:100%;padding:15px 0 16px;border:0;background:none;color:var(--graphite);text-align:left;font:inherit;cursor:pointer;transition:color 240ms ease}
.tl-ch .n{font:400 .9rem/1.9 var(--f-body);letter-spacing:.06em}
.tl-ch b{display:block;font:italic 400 1.45rem/1.15 var(--f-display);color:inherit}
.tl-ch em{display:block;font-style:normal;font-size:.95rem;line-height:1.5;margin-top:4px}
.tl-ch .bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.tl-ch li.on button{color:var(--ink)}
.tl-ch li.on .n{color:var(--red)}
@media (hover:hover) and (pointer:fine){.tl-ch button:hover{color:var(--ink)}}
@media (max-width:859px){.tl-ch li:not(.on) em{display:none}}
.tl-foot{margin:20px 0 0;font-size:.92rem;color:var(--graphite)}
.tl-foot a{color:var(--ink)}

/* vídeo suelto que se reproduce solo cuando se ve (presentación de la tanda) */
.vauto{position:relative;margin:0 auto;width:min(72vw,330px);aspect-ratio:9/16;background:#0a0908;overflow:hidden;box-shadow:0 30px 60px -25px rgba(23,20,15,.7)}
.vauto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@media (prefers-reduced-motion:reduce){.tl-ch button,.tl-play{transition:none}}