/* De mockups/proyecto.html (mismo CSS). */
.ph{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 12s linear forwards}
@keyframes kb{from{transform:scale(1.1)}to{transform:scale(1)}}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,7,.55),rgba(7,7,7,0) 30%,rgba(7,7,7,.2) 55%,rgba(7,7,7,.95))}
.ph .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(40px,6vh,80px)}
.ph h1{font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(48px,min(10vw,17vh),190px);line-height:.85;letter-spacing:-.05em;margin-top:18px}
.ph .row{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-top:30px}
.ph .row p{max-width:46ch;color:var(--paper-2)}
.bigplay{display:inline-flex;align-items:center;gap:18px}
.bigplay span{width:84px;height:84px;border-radius:50%;background:var(--red);display:grid;place-items:center;transition:transform .5s var(--e);box-shadow:0 20px 60px -20px rgba(218,56,50,.9)}
.bigplay:hover span{transform:scale(1.08)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.facts div{padding:26px var(--g);border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts .lbl{color:var(--dim);display:block;margin-bottom:10px}
.facts b{font-family:var(--wide);font-stretch:118%;font-weight:600;font-size:clamp(16px,1.4vw,22px)}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(30px,6vw,110px)}
.story .big{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,44px);line-height:1.2;letter-spacing:-.01em;color:var(--paper);max-width:28ch}
.story .big::before{content:"“";display:block;color:var(--red);font-size:1.6em;line-height:.5;margin-bottom:14px}
.story h2{font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.4vw,58px);line-height:.9;letter-spacing:-.04em;margin-top:18px}
.story h2 .it{font-weight:400;color:var(--paper-2)}
.kstats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.kstats div{padding:30px 24px 0 0;border-right:1px solid var(--line)}
.kstats div+div{padding-left:24px}.kstats div:last-child{border-right:0}
.kstats b{display:block;font-family:var(--wide);font-stretch:125%;font-weight:200;font-size:clamp(56px,6vw,110px);line-height:.85;color:var(--red)}
.kstats .lbl{display:block;margin-top:14px;color:var(--paper-2)}
@media (max-width:860px){.kstats{grid-template-columns:1fr 1fr}.kstats div{padding:24px 0;border-right:0}.kstats div+div{padding-left:0}}
.ph h1{max-width:16ch}
.ph h1.long{font-size:clamp(38px,min(6.2vw,11vh),118px);max-width:20ch}
@media (max-width:860px){.ph h1.long{font-size:8.4vw}}
.credits{margin-top:40px;border-top:1px solid var(--line)}
.credits div{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.credits .lbl{color:var(--dim)}
.player{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;cursor:none}
.player img{width:100%;height:100%;object-fit:cover;filter:brightness(.6);transition:transform 1.6s var(--e),filter .6s}
.player:hover img{transform:scale(1.04);filter:brightness(.75)}
.player .c{position:absolute;inset:0;display:grid;place-items:center}
.player .c span{width:110px;height:110px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.player .hud{position:absolute;inset:18px 22px auto;display:flex;justify-content:space-between;color:var(--paper-2)}
.stills{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(180px,22vw,360px);gap:clamp(10px,1.2vw,18px)}
.stills button{display:block;overflow:hidden;cursor:none}
.stills button:first-child{grid-column:span 2;grid-row:span 2}
.stills img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e),filter .6s;filter:brightness(.9)}
.stills button:hover img{transform:scale(1.04);filter:none}
.svc-cta{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;padding:28px 32px;border:1px solid var(--line-2);border-radius:999px;transition:background .4s,border-color .4s}
.svc-cta:hover{background:var(--ink);border-color:var(--paper)}
.svc-cta img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.svc-cta b{font-family:var(--wide);font-stretch:125%;font-weight:700;text-transform:uppercase;font-size:clamp(16px,1.5vw,24px);display:block}
.svc-cta span.s{color:var(--dim);font-size:14px}
.next{position:relative;display:block;height:min(80vh,720px);overflow:hidden;cursor:none}
.next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.35);transition:filter 1s,transform 1.6s var(--e)}
.next:hover img{filter:grayscale(0) brightness(.55);transform:scale(1.04)}
.next .in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--g)}
.next .lbl{color:var(--paper-2)}
.next h2{font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(46px,9vw,170px);line-height:.85;letter-spacing:-.05em;margin-top:18px}
@media (max-width:860px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(2){border-right:0}.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}.story{grid-template-columns:1fr}.stills{grid-template-columns:1fr 1fr;grid-auto-rows:40vw}.svc-cta{grid-template-columns:auto 1fr;border-radius:28px}.svc-cta .btn{grid-column:1/-1}}
@media (max-width:520px){.stills{grid-template-columns:1fr;grid-auto-rows:62vw}.stills button:first-child{grid-column:auto;grid-row:auto}}

/* Descripción larga de la pieza (0280). */
.story .desc{color:var(--paper-2);font-size:clamp(15px,1.1vw,17px);line-height:1.7;max-width:62ch;margin-top:18px}
.story .big+.desc{margin-top:30px}