/* One scroll-directed brand sequence; all key effects also run on touch. */
body{font-family:Arial,Helvetica,sans-serif}.intro{display:none}.noise{opacity:.023}
.brand-story{height:410svh;position:relative;background:#050505}
.brand-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;perspective:1400px;display:grid;place-items:center;color:#f3f0e9}
.story-light{position:absolute;width:90vw;height:90svh;left:5%;top:8%;z-index:-1;background:radial-gradient(ellipse at 50% 60%,#e768282c,transparent 58%);pointer-events:none}
.story-horizon{position:absolute;left:10%;right:10%;height:1px;bottom:12%;background:linear-gradient(90deg,transparent,#ff7f473a,transparent);box-shadow:0 0 45px 5px #ff7f4710}
.brand-volume,.story-echo{position:absolute;width:min(46vw,660px);aspect-ratio:749/422;pointer-events:none}
.brand-volume{transform-style:preserve-3d;will-change:transform;z-index:3;transform:translate3d(0,24svh,0) rotateX(-8deg) rotateY(-22deg) rotateZ(-7deg) scale(.85)}
.brand-volume i{display:block;position:absolute;inset:0;mask:url('./assets/logo-canal7.png') center/contain no-repeat;-webkit-mask:url('./assets/logo-canal7.png') center/contain no-repeat;background:linear-gradient(110deg,#ec8550,#4d1a0b 35%,#d66026 58%,#853012 80%,#ffb17b);transform:translateZ(var(--z));backface-visibility:visible}
.brand-volume i:last-child{background:linear-gradient(120deg,#f8d6b5 4%,#8d3a18 22%,#ff661e 37%,#ffe9c7 var(--shine,46%),#fff9eb 52%,#ce4b18 65%,#ff9b55 90%)}
.story-echo{opacity:0;mask:url('./assets/logo-canal7.png') center/contain no-repeat;-webkit-mask:url('./assets/logo-canal7.png') center/contain no-repeat;pointer-events:none;background:linear-gradient(140deg,#ff5414,#f4c8a8);z-index:1}
.story-opening{position:absolute;top:17%;left:var(--pad);right:var(--pad);text-align:center;z-index:5;will-change:transform,opacity}
.story-byline{font-size:.875rem;letter-spacing:.2em;font-weight:700;margin:0 0 1.8rem}.story-byline span{font:italic 1rem Georgia,serif;letter-spacing:0;text-transform:none;color:#b7ada2;margin-left:.7rem}
.story-opening h1{font-size:clamp(3.2rem,6.8vw,7.7rem);font-weight:500;line-height:1.02;letter-spacing:-.065em;margin:0}
.story-opening h1 em{font:inherit;color:#ff7b3a}.story-ending{display:block;font-size:clamp(1rem,1.5vw,1.5rem);letter-spacing:-.02em;margin-top:1.2rem;color:#bdb6ad}
.story-copy{position:absolute;z-index:5;opacity:0;pointer-events:none;text-shadow:0 2px 40px #0008}
.story-copy>span{display:block;font-size:.875rem;letter-spacing:.15em;text-transform:uppercase;color:#c1b9af;margin-bottom:1.4rem}
.story-copy h2{margin:0;font-size:clamp(3rem,7vw,7.5rem);line-height:1.03;letter-spacing:-.065em;font-weight:500}.story-copy h2 em{font:inherit;color:#ff7b3a}
.copy-form{left:7%;top:35%}.copy-motion{right:10%;top:35%}.copy-screen{text-align:center;left:5%;right:5%;top:33%}.copy-screen h2{font-size:clamp(3.4rem,8vw,9rem)}
.story-stills{position:absolute;inset:0;pointer-events:none;z-index:2}
.story-still{position:absolute;width:27vw;aspect-ratio:16/9;overflow:hidden;opacity:0;border:1px solid #ffffff30;box-shadow:0 20px 80px #000b;background:#080808}
.story-still img{width:100%;height:100%;object-fit:cover;filter:brightness(.65) saturate(.55)}
.still-a{left:-6%;top:22%}.still-b{right:-6%;top:12%;width:28vw}.still-c{right:10%;bottom:9%;width:22vw}
.story-portal{position:absolute;inset:0;opacity:0;transform:scale(.38);z-index:0;overflow:hidden;background:#050505}
.story-portal img{width:100%;height:100%;object-fit:cover;filter:brightness(.4) saturate(.45)}
.story-portal:after{content:"";position:absolute;inset:0;background:linear-gradient(#0006,transparent 40%,#050505)}
.story-bottom{position:absolute;bottom:2.3rem;left:var(--pad);right:var(--pad);display:grid;grid-template-columns:1fr minmax(60px,180px) 1fr;align-items:center;gap:1.5rem;z-index:8;font-size:.875rem;color:#b8b2aa}
.story-bottom a{justify-self:end;text-decoration:none;color:#f3f0e9;border:1px solid #ffffff40;border-radius:99px;padding:.85rem 1.2rem;background:#08080850;backdrop-filter:blur(12px)}
.story-cue i{font-style:normal;margin-left:.8rem;color:#ff7b3a}
.story-track{height:2px;background:#ffffff24;overflow:hidden}.story-track i{height:100%;width:100%;display:block;background:var(--orange);transform:scaleX(0);transform-origin:left}
.story-ending-scene .story-cue{opacity:.4}
.nav{padding-top:1.1rem;background:linear-gradient(#050505da,transparent);backdrop-filter:none}.nav a{font-size:.875rem;letter-spacing:.01em;text-transform:none}.nav-logo{width:4.2rem}.nav-cta{border:1px solid #ffffff40!important;border-radius:100px;padding:.65rem 1rem!important}.nav-links a{color:#ded9d0}.wa-float{font-size:.75rem;background:#f3f0e9ed}
.work{padding-top:2rem;background:#050505;scroll-margin-top:4rem}
.work-title{padding-top:3rem;padding-bottom:2.5rem}.work-title .display{font-size:clamp(4rem,8vw,8.5rem);letter-spacing:-.07em}.work-title .section-id{font-size:.875rem;text-transform:none;letter-spacing:.04em}.reel-total{font-size:.875rem}
.theater{max-width:1450px}.cinema-screen{border-radius:10px;box-shadow:0 0 0 1px #ffffff0a,0 32px 100px #000;border-color:#ffffff28}
.screen-poster{filter:brightness(.75)}.screen-halo{opacity:.3}.screen-play{background:linear-gradient(transparent 60%,#000a)}
.screen-caption{padding:1.3rem .1rem;border:0;letter-spacing:.025em;text-transform:none;font-size:.875rem}
.screen-name{color:#e7e0d5}.screen-count{font-variant-numeric:tabular-nums}
.reel-toolbar{padding-top:1rem}.film-reel{padding-top:1.5rem;padding-bottom:2.5rem;gap:1.6rem;perspective:1000px;scrollbar-color:#514236 #0c0907}
.reel-card{border-radius:6px;transform:perspective(800px) rotateY(var(--shelf-angle,0deg)) translateY(var(--shelf-y,0px));transition:border-color .3s;background:linear-gradient(#151311,#080808);border-color:#ffffff1c;flex-basis:29%;overflow:hidden}
.reel-card:hover{transform:perspective(800px) rotateY(var(--shelf-angle,0deg)) translateY(var(--shelf-y,0px))}.reel-card[aria-pressed=true]{border-color:#ff7d43}
.reel-card[aria-pressed=true]:before{height:2px}.reel-label{font-size:.875rem;letter-spacing:0;padding:1.05rem}.reel-card img{filter:brightness(.6) saturate(.65)}
.vision{border-radius:32px 32px 0 0;position:relative;background:#f3f0e9;padding-block:7rem}.vision-text{font-size:clamp(3rem,7vw,7.5rem);letter-spacing:-.065em;line-height:1.06}.vision-note{margin-top:3rem}.vision::after{display:none}
.services{padding-top:3rem;padding-bottom:7rem}.services-head p,.team-intro p{font-size:1rem}.service h3{font-weight:500}.service-list{margin-top:3rem}
.clients{padding-block:7rem}.client-grid{background:none;gap:0;border-bottom:1px solid #ffffff18;border-top:1px solid #ffffff18}.client{background:none}.client:hover{background:#ffffff03}.clients .display,.team .display{font-size:clamp(3rem,6vw,6.5rem)}
.team{padding-block:7rem}.portrait-grid{margin-top:3rem;gap:2rem}.person{border-radius:8px}.person-copy{bottom:1.7rem;left:1.7rem}.person-copy h3{font-size:clamp(1.8rem,3vw,3rem)}.person-copy p{font-size:1rem;line-height:1.5}
.signature{margin-top:4rem}.signature h3{font-size:clamp(2.8rem,6vw,6.5rem)}.signature p{font-size:1.5rem}.finale h2{font-size:clamp(3.5rem,8vw,8.5rem)}
.narrative-reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .85s var(--ease),transform 1s var(--ease)}.narrative-reveal.narrative-in{opacity:1;transform:none}
@media(max-width:700px){
 .brand-story{height:350svh}.brand-stage{perspective:900px}.brand-volume,.story-echo{width:79vw}.brand-volume{transform:translate3d(0,19svh,0) rotateX(-8deg) rotateY(-18deg) rotateZ(-7deg) scale(.86)}
 .story-opening{top:20%;left:1rem;right:1rem}.story-byline{font-size:.75rem;margin-bottom:1.5rem;letter-spacing:.15em}.story-byline span{font-size:.875rem;margin-left:.4rem}.story-opening h1{font-size:clamp(2.6rem,11.5vw,4.8rem);line-height:1.02}.story-ending{font-size:1.05rem;margin-top:1rem}
 .story-copy h2{font-size:clamp(2.9rem,12vw,5rem)}.story-copy>span{font-size:.75rem;margin-bottom:.9rem}.copy-form,.copy-motion{left:7%;right:7%;top:auto;bottom:17%;text-align:left}.copy-motion{text-align:right}.copy-screen{top:35%}
 .story-still{width:45vw}.still-a{left:-13%;top:16%}.still-b{right:-15%;top:25%;width:48vw}.still-c{right:-6%;bottom:19%;width:33vw}.story-still img{filter:brightness(.5) saturate(.5)}
 .story-bottom{bottom:1.5rem;left:1.2rem;right:1.2rem;gap:.8rem;grid-template-columns:1fr 40px auto;font-size:.75rem}.story-bottom a{padding:.8rem 1rem;min-height:44px}.story-cue i{margin-left:.3rem}.story-horizon{bottom:12%}
 .nav a{font-size:.8rem}.nav-logo{width:3.5rem}.nav-cta{padding:.6rem .9rem!important}.wa-float{padding:.7rem .85rem}.brand-story~.work{padding-top:0}
 .work-title{padding-top:3rem}.work-title .display{font-size:4.5rem}.work-title .section-id,.reel-total{font-size:.75rem}.cinema-screen{border-radius:6px}.screen-caption{font-size:.875rem}.film-reel{gap:.6rem}.reel-card{flex-basis:74%;min-width:220px}.reel-label{font-size:.875rem}.reel-toolbar{font-size:.875rem}
 .vision{padding-block:5rem;border-radius:22px 22px 0 0}.vision-text{font-size:clamp(2.9rem,10vw,4.7rem)}.vision-note{margin-top:2.5rem}.services{padding-top:1rem;padding-bottom:5rem}.clients,.team{padding-block:5rem}.service{grid-template-columns:2.5rem 1fr auto}.person-copy{left:1.2rem;bottom:1.3rem}.portrait-grid{gap:1.3rem}
}
@media(max-height:600px) and (orientation:landscape){
 .story-opening{top:24%}.story-opening h1{font-size:clamp(2.4rem,7vh,4rem)}.story-byline{margin-bottom:.7rem}.story-ending{margin-top:.6rem;font-size:1rem}.brand-volume,.story-echo{width:36vw}.story-copy h2{font-size:clamp(2.3rem,9vh,4rem)}.story-copy>span{font-size:.75rem}.story-bottom{bottom:1rem}.story-copy{top:32%;bottom:auto}
}
@media(prefers-reduced-motion:reduce){
 .narrative-reveal{opacity:1;transform:none;transition:none}
 .brand-story{height:auto}.brand-stage{position:relative;min-height:720px;height:100svh}.brand-volume{will-change:auto}.story-copy,.story-stills,.story-echo,.story-portal,.story-track{display:none}.story-opening{opacity:1!important;transform:none!important}.brand-volume{opacity:1!important}.story-light{transform:none!important}.story-bottom{grid-template-columns:1fr auto}.story-cue{font-size:0}.story-cue:before{content:'Canal 7 · Desde 2012';font-size:.875rem}.story-cue i{display:none}.reel-card,.reel-card:hover{transform:none!important}.ink-split{animation:none;text-shadow:none}
}
