.cinema{height:360svh;--scene-progress:0;color:#202020;background:var(--cream)}
.cinema-sticky{background:var(--cream);color:#202020;transition:background .7s}
.cinema[data-scene="2"] .cinema-sticky{background:#f4f5f1;color:#153754}
.brand-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .6s}
.brand-stage>span{position:absolute;right:-2%;top:17%;font-size:20vw;font-weight:900;letter-spacing:-.08em;color:#dedad1}
.brand-stage svg{position:absolute;width:43%;height:auto;right:3%;top:32%;color:#d32632;transform:rotate(-10deg) translateY(calc(var(--scene-progress) * -20px));stroke-width:2}
.cinema[data-scene="0"] .brand-stage{opacity:1}
.cinema-content{z-index:3;pointer-events:none;padding-bottom:155px}.cinema-content .hero-copy{width:44%}.cinema-content .hero-copy a{pointer-events:auto}
.cinema-content h1{font-size:clamp(45px,5.2vw,78px);letter-spacing:-3px}.cinema-content h1 span{color:#685d52}.cinema-content .hero-description,.cinema-content .hero-copy .eyebrow{color:#625a51}
.cinema[data-scene="0"] h1{font-size:clamp(48px,6vw,88px)}.cinema[data-scene="0"] h1 span{color:#d32632}
.cinema[data-scene="1"] h1 span{color:#9c496b}.cinema[data-scene="2"] h1 span{color:#3c719b}.cinema[data-scene="3"] h1 span{color:#8b5b20}
.spotlight-backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none}.spotlight-backdrop>span{position:absolute;right:-2%;top:13%;font-size:clamp(110px,16vw,240px);font-weight:900;line-height:.85;letter-spacing:-.07em;color:#20202008;max-width:65%;overflow-wrap:anywhere}
.cinema[data-scene="2"] .spotlight-backdrop>span{color:#315e8610}.cinema[data-scene="0"] .spotlight-backdrop{display:none}
.spotlight-shoe{position:absolute;z-index:2;right:3%;top:23%;width:60%;height:53%;mix-blend-mode:multiply;transform:rotate(-3deg) translateY(calc(var(--scene-progress) * -18px));transition:transform .3s ease}
.spotlight-shoe img{width:100%;height:100%;object-fit:contain;display:block}
.cinema[data-scene="0"] .spotlight-shoe{display:none}
.cinema[data-scene="1"] .spotlight-shoe img{object-fit:contain;object-position:center}
.cinema[data-scene="2"] .spotlight-shoe{width:64%;right:1%;height:57%}.cinema[data-scene="2"] .spotlight-shoe img{object-fit:contain;object-position:center}
.spotlight-caption{display:block;text-align:center;font-size:14px;font-weight:700;letter-spacing:2px;margin-top:8px;color:#49423c}
.spotlight-buy{display:flex;align-items:center;gap:30px;min-height:48px;width:max-content;padding:0 23px;background:#202020;color:white;font-size:14px;font-weight:700;margin-bottom:10px}.spotlight-buy span{font-size:22px}.cinema[data-scene="2"] .spotlight-buy{background:#224d74}.cinema[data-scene="0"] .spotlight-buy{display:none}
.cinema:not([data-scene="0"]) #cinema-skip{padding:0;min-height:35px;color:inherit;background:transparent;font-size:14px}
.cinema-play{position:absolute;z-index:5;right:5%;top:105px;font-size:14px;letter-spacing:.5px;padding:10px 16px;border:1px solid currentColor;border-radius:30px;min-height:40px}
.scene-nav{position:absolute;z-index:5;bottom:100px;left:5%;display:flex;gap:9px}.scene-nav button{font-size:14px;border:1px solid #b7b0a5;min-height:40px;padding:8px 17px;border-radius:25px}.scene-nav button[aria-pressed=true]{background:#222;color:#fff;border-color:#222}
.cinema-footer,.cinema-footer .cinema-scroll,.cinema-footer .cinema-timeline,.cinema-footer .cinema-product>div>span,.cinema-phase{color:#625a51}.cinema-footer span{color:inherit}.cinema-timeline input{accent-color:#333}.phase-line{background:#20202025}.phase-line i{background:#555}
.header.over-cinema{color:#202020;border-bottom:1px solid #20202022}.header.over-cinema .nav-link.active:after{background:#d32632}.header.over-cinema .mobile-menu{background:var(--cream);color:#202020}.header.over-cinema .icon-btn:hover{background:#ddd8ce}
.product-image.born-image,.detail-image-panel img.born-image{object-fit:cover;object-position:center bottom;padding:0}.product-image{mix-blend-mode:multiply}.product-name-price{align-items:flex-start;gap:8px}.product-name-price h3{line-height:1.4}.product-price{white-space:nowrap}.category-tabs{flex-wrap:wrap;overflow:visible}.category{padding:10px 15px}.category span{margin-left:5px}
.wireframe .brand-stage,.wireframe .spotlight-shoe,.wireframe .spotlight-backdrop{display:none}.wireframe .cinema{height:100svh}.wireframe .cinema-sticky{position:relative}.wireframe .cinema-footer{display:none}
@media(max-width:1000px){.cinema-content h1{font-size:54px}.cinema-content .hero-copy{width:47%}.scene-nav{left:36px}.spotlight-shoe{width:55%;right:0%;height:48%;top:30%}.cinema[data-scene="2"] .spotlight-shoe{width:59%;right:0%;height:49%;top:30%}}
@media(max-width:850px){.cinema-sticky{min-height:760px}.cinema-content{align-items:flex-start;padding-top:145px}.cinema-content .hero-copy{width:100%}.cinema-content h1,.cinema[data-scene="0"] h1{font-size:51px;line-height:1;letter-spacing:-2px;margin-bottom:14px}.cinema-content .hero-description{font-size:14px;line-height:1.5;margin-bottom:14px}.cinema-content .hero-copy .eyebrow{font-size:14px;margin-bottom:14px}.spotlight-shoe,.cinema[data-scene="2"] .spotlight-shoe{width:75%;right:3%;height:31%;top:49%}.spotlight-backdrop>span{top:45%;font-size:22vw;max-width:95%}.brand-stage>span{top:47%;font-size:26vw}.brand-stage svg{top:49%;width:58%;right:12%}.scene-nav{bottom:104px}.cinema-phase{display:none}.cinema-play{top:94px;right:30px}}
@media(max-width:640px){.cinema-sticky{min-height:760px}.cinema-content{padding-top:137px}.cinema-content h1,.cinema[data-scene="0"] h1{font-size:40px}.cinema-content .hero-description{font-size:14px;margin-bottom:11px}.cinema-content .hero-copy .eyebrow{font-size:14px;letter-spacing:1px}.spotlight-buy{min-height:40px;padding:0 15px;font-size:14px;margin-bottom:4px}.cinema-play{top:86px;right:22px;font-size:14px;padding:7px 12px;min-height:34px}.spotlight-shoe,.cinema[data-scene="2"] .spotlight-shoe{top:53%;height:25%;width:92%;right:2%}.spotlight-caption{font-size:14px;margin-top:0;letter-spacing:1px}.spotlight-backdrop>span{top:51%;font-size:25vw}.scene-nav{left:22px;right:22px;bottom:99px;gap:5px;justify-content:space-between}.scene-nav button{font-size:14px;padding:7px 10px;min-height:35px}.cinema-footer{bottom:24px;gap:10px}.cinema-product .cross{display:none}.cinema-product strong{font-size:14px}.cinema-product>div>span{font-size:14px;max-width:150px}.cinema-timeline{font-size:14px;width:115px}.category{font-size:14px;min-height:38px;padding:8px 11px}.product-name-price{display:block}.product-type{flex-wrap:wrap;gap:4px}.brand-stage svg{top:51%;width:75%;right:10%}}
@media(prefers-reduced-motion:reduce){.cinema{height:100svh}.cinema-sticky{position:relative}.cinema *{animation:none!important;transition:none!important}.cinema-play{display:none}}
@media(max-width:850px) and (max-height:740px){.cinema-sticky{min-height:100svh}.cinema-content{padding-top:119px}.cinema-content h1,.cinema[data-scene="0"] h1{font-size:32px}.cinema-content .hero-copy .eyebrow{margin-bottom:9px;font-size:14px}.cinema-content .hero-description{font-size:14px;margin-bottom:8px}.spotlight-buy{min-height:34px;font-size:14px}.cinema:not([data-scene="0"]) #cinema-skip{font-size:14px;min-height:28px}.cinema-play{top:80px;font-size:14px;min-height:30px}.spotlight-shoe,.cinema[data-scene="2"] .spotlight-shoe{top:56%;height:23%;width:78%;right:3%}.spotlight-caption{font-size:14px}.scene-nav{bottom:68px;left:15px;right:15px}.scene-nav button{font-size:14px;min-height:31px;padding:5px 9px}.cinema-footer{bottom:12px;padding-left:15px;padding-right:15px}.cinema-product strong{font-size:14px}.cinema-product>div>span{font-size:14px}.cinema-timeline{width:90px}.brand-stage svg{top:52%;width:62%}.brand-stage>span{top:50%}}
@media(min-width:851px) and (max-height:760px){.cinema-content{padding-top:90px;padding-bottom:140px}.cinema-content h1,.cinema[data-scene="0"] h1{font-size:50px;margin-bottom:18px}.cinema-content .hero-description{font-size:14px;margin-bottom:18px}.cinema-content .hero-copy .eyebrow{margin-bottom:14px}.spotlight-shoe{top:25%;height:50%;width:55%}.cinema[data-scene="2"] .spotlight-shoe{height:52%;width:58%}.cinema-play{top:95px}.scene-nav{bottom:86px}.cinema-footer{bottom:20px}}
.cinema[data-scene="3"] .spotlight-shoe img{transform:scale(1.4)}
.cinema[data-scene="3"] .spotlight-backdrop>span{font-size:12vw;overflow-wrap:normal;max-width:none;right:-5%;top:17%}
@media(max-width:850px){.cinema[data-scene="3"] .spotlight-backdrop>span{font-size:18vw;top:49%}.wireframe .cinema-sticky:before{top:58%;height:23%;left:22px;right:22px;width:auto}}

/* Encuadres completos, manteniendo los archivos originales sin recomprimir. */
.cinema[data-scene="1"] .spotlight-shoe img,.cinema[data-scene="2"] .spotlight-shoe img{object-fit:contain;transform:scale(.90)}
.cinema[data-scene="3"] .spotlight-shoe img{transform:scale(1.50)}

/* Responsive presentation: separate content, product and controls into real rows. */
@media(max-width:1000px){
 .cinema-sticky{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(110px,1fr) auto auto;gap:8px;height:100svh;min-height:560px;padding:90px 24px 14px;overflow:hidden}
 .cinema-play{position:relative;grid-row:1;grid-column:1;top:auto;right:auto;justify-self:end;min-height:34px;padding:6px 12px;margin:0}
 .cinema-content{grid-row:2;grid-column:1;position:relative;height:auto;min-height:0;display:block;padding:0;margin:0;width:100%;align-self:start}
 .cinema-content .hero-copy{width:100%}.cinema-content h1,.cinema[data-scene="0"] h1{font-size:clamp(30px,5.3vw,48px);line-height:1;letter-spacing:-1.5px;margin:0 0 10px}
 .cinema-content .hero-copy .eyebrow{font-size:14px;margin:0 0 10px;letter-spacing:1px}.cinema-content .hero-description{font-size:14px;line-height:1.45;margin:0 0 10px;max-width:none}
 .spotlight-buy{min-height:38px;margin-bottom:2px;padding:7px 15px;font-size:14px}.cinema:not([data-scene="0"]) #cinema-skip{min-height:30px;font-size:14px}
 .spotlight-shoe,.cinema[data-scene="2"] .spotlight-shoe{position:relative;grid-row:3;grid-column:1;top:auto;right:auto;width:100%;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 16px;transform:none;align-self:stretch}
 .spotlight-shoe img{min-height:0;max-height:100%;width:100%;height:100%}.spotlight-caption{font-size:14px;margin:0;line-height:16px}
 .cinema[data-scene="3"] .spotlight-shoe img{transform:scale(1.3)}
 .brand-stage{position:relative;grid-row:3;grid-column:1;inset:auto;min-height:0;width:100%;height:100%}.brand-stage>span{top:0;right:0;font-size:22vw}.brand-stage svg{height:85%;width:75%;top:5%;right:12%;transform:rotate(-8deg)}
 .scene-nav{position:relative;grid-row:4;grid-column:1;inset:auto;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0}.scene-nav button{min-height:40px;padding:7px 12px;font-size:14px;flex:1}
 .cinema-footer{position:relative;grid-row:5;grid-column:1;inset:auto;padding:0;gap:12px;min-width:0}.cinema-product{min-width:0}.cinema-product strong{font-size:14px;letter-spacing:.6px}.cinema-product>div>span{font-size:14px;max-width:none}.cinema-product .cross{display:none}.cinema-timeline{width:125px;flex-shrink:0;font-size:14px;gap:0}.cinema-scroll,.cinema-phase{display:none}
 .spotlight-backdrop>span,.cinema[data-scene="3"] .spotlight-backdrop>span{top:52%;font-size:19vw}
}
@media(max-width:640px){.cinema-sticky{padding:78px 16px 12px;gap:6px}.cinema-content h1,.cinema[data-scene="0"] h1{font-size:clamp(30px,8.3vw,40px)}.scene-nav button{padding:7px 5px;font-size:14px}.cinema-product strong{font-size:14px}.cinema-product>div>span{font-size:14px}.cinema-timeline{width:112px}}
@media(max-width:1000px) and (max-height:650px){
 .cinema-sticky{min-height:530px;grid-template-rows:auto auto minmax(85px,1fr) auto auto;gap:4px}
 .cinema-content h1,.cinema[data-scene="0"] h1{font-size:29px;margin-bottom:6px}.cinema-content .hero-copy .eyebrow{font-size:14px;margin-bottom:6px}.cinema-content .hero-description{font-size:14px;margin-bottom:6px}.cinema-play{min-height:30px}.spotlight-buy{min-height:34px}.cinema:not([data-scene="0"]) #cinema-skip{min-height:28px}.cinema-product>div>span{display:none}.cinema-footer{min-height:30px}
}
@media(max-width:1000px) and (orientation:landscape) and (max-height:650px){
 .cinema-sticky{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(180px,1fr) auto auto;min-height:430px;padding-top:82px;column-gap:18px}
 .cinema-play{grid-column:2;grid-row:1}.cinema-content{grid-column:1;grid-row:1 / 3;align-self:center}.spotlight-shoe,.cinema[data-scene="2"] .spotlight-shoe,.brand-stage{grid-column:2;grid-row:2}.scene-nav{grid-column:1 / -1;grid-row:3}.cinema-footer{grid-column:1 / -1;grid-row:4}.cinema-content h1,.cinema[data-scene="0"] h1{font-size:28px}.brand-stage>span{font-size:12vw}
}

/* Use the same bounded canvas for text and imagery when browser zoom expands the viewport. */
@media(min-width:1001px){
 .cinema-sticky{--stage-width:1424px;--stage-edge:max(64px,calc((100% - var(--stage-width)) / 2 + 64px));}
 .cinema-content{max-width:var(--stage-width);margin-inline:auto}.cinema-content .hero-copy{width:40%}
 .spotlight-shoe,.cinema[data-scene="2"] .spotlight-shoe{width:min(51%,720px);height:min(53svh,530px);right:var(--stage-edge);top:50%;transform:translateY(-50%) rotate(-3deg)}
 .cinema[data-scene="2"] .spotlight-shoe{width:min(52%,740px);height:min(57svh,570px)}
 .brand-stage,.spotlight-backdrop{width:min(100%,var(--stage-width));left:50%;right:auto;transform:translateX(-50%)}
 .brand-stage>span{font-size:clamp(110px,18vw,256px);top:24%;right:2%}.brand-stage svg{width:520px;max-width:43%;top:50%;right:5%;transform:translateY(-50%) rotate(-10deg)}
 .spotlight-backdrop>span{font-size:clamp(110px,16vw,228px);top:22%;right:0}.cinema[data-scene="3"] .spotlight-backdrop>span{font-size:clamp(100px,12vw,170px);top:22%;right:0}
 .scene-nav{left:var(--stage-edge)}.cinema-play{right:var(--stage-edge)}.cinema-phase{right:max(24px,calc((100% - var(--stage-width)) / 2 + 24px))}
}
/* Zooming in may leave a very short viewport. Let the presentation scroll naturally. */
@media(max-height:530px){
 .cinema{height:auto;min-height:100svh}.cinema-sticky{position:relative;height:auto;min-height:560px;overflow:visible}
 .cinema-sticky{overflow:hidden}
}

@media(max-height:530px){.header.over-cinema{background:var(--cream)}}

/* Normal document flow: no pinned stage or extra scroll distance. */
.cinema{height:auto;min-height:0}.cinema-sticky{position:relative;top:auto}

/* Bound the stage to its content canvas when zooming out expands the viewport. */
@media(min-width:1001px){
 .cinema-sticky{height:min(100svh,900px)}
 .spotlight-shoe{height:min(53%,530px)}
 .cinema[data-scene="2"] .spotlight-shoe{height:min(57%,570px)}
}