#trabajos.editorial-works{position:relative;isolation:isolate;overflow:hidden;padding:62px 4% 70px;color:#f5f1e8;background:radial-gradient(ellipse at 32% 78%,#92729b45,transparent 52%),radial-gradient(ellipse at 78% 20%,#6c477440,transparent 57%),linear-gradient(120deg,#312034,#241729 65%,#302033)}
#trabajos *{box-sizing:border-box}#trabajos button,#trabajos input{font:inherit}#trabajos button{cursor:pointer;color:inherit}#trabajos button:focus-visible,#trabajos a:focus-visible,#trabajos .project-screen:focus-visible,#trabajos input:focus-visible{outline:2px solid #dff279;outline-offset:6px}#trabajos a{color:inherit;text-decoration:none}#trabajos img{display:block}#trabajos .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
#trabajos .works-head{display:flex;align-items:center;gap:3%;margin:0 0 40px;position:relative;z-index:3}#trabajos .works-head h2{font:700 clamp(72px,8.7vw,154px)/.94 'Times New Roman',Georgia,serif;letter-spacing:-.065em;margin:0;padding-right:.06em}#trabajos .works-signature{font-size:10px;letter-spacing:.18em;color:#d0bbdb;display:flex;align-items:center;gap:25px;flex:1}#trabajos .works-signature:before{content:'';height:1px;width:6vw;background:#b09aba88}#trabajos .works-nav{display:flex;align-items:center;gap:14px}#trabajos .works-nav>span{font-size:11px;letter-spacing:.15em;margin-right:18px}#trabajos .works-nav button{width:48px;height:48px;border:1px solid #bfa4c540;border-radius:50%;background:transparent;font-size:32px;line-height:1;transition:background .3s,transform .3s}#trabajos .works-nav #work-next{color:#302033;background:#dff279;border-color:#dff279}#trabajos .works-nav button:hover{transform:translateX(3px);background:#987ca050}#trabajos .work-composition{display:grid;grid-template-columns:minmax(0,63fr) minmax(0,34fr);gap:3%;align-items:start}#trabajos .work-feature{min-width:0;position:relative;z-index:2}#trabajos .work-stage{position:relative;aspect-ratio:1.48;perspective:1800px;padding:0 8% 0 0}#trabajos .desktop-frame{position:relative;width:100%;padding:9px;border:1px solid #b298bd;background:linear-gradient(130deg,#5b3e63aa,#342439);border-radius:13px;box-shadow:0 2px 2px #dcc8e62a inset,0 30px 40px #130c2060,0 2px 10px #190b2288;transform-origin:right center}#trabajos .window-chrome{height:21px;display:flex;gap:5px;align-items:center;padding:0 8px 7px;color:#c8b6d3;font-size:9px}#trabajos .window-chrome i{width:5px;height:5px;background:#9c77ac;border-radius:100%}#trabajos .window-chrome span{margin:auto;opacity:.65}#trabajos .project-screen{position:relative;overflow:hidden;background:#151119;touch-action:pan-y}#trabajos #desktop-screen{aspect-ratio:var(--desktop-ratio,1.5833);border-radius:5px}#trabajos .project-reel{position:absolute;top:0;left:0;width:100%;will-change:transform}#trabajos .project-reel>img{width:100%;height:auto;max-width:none}#trabajos #desktop-cover{position:absolute;top:0;left:0}#trabajos #desktop-cover[hidden]{display:none}
#trabajos .phone-frame{position:absolute;right:0;bottom:0;width:23%;padding:7px 5px 8px;background:linear-gradient(110deg,#bca6c7,#2b1b32 6%,#100e13 92%,#9c79af);border-radius:clamp(18px,2vw,34px);box-shadow:0 0 0 1px #b599c6,7px 14px 25px #11081690,0 3px 3px #dec9e6 inset;transform:rotate(2deg);z-index:3}#trabajos #mobile-screen{aspect-ratio:375/844;border-radius:clamp(14px,1.7vw,29px)}#trabajos .phone-camera{position:absolute;top:11px;left:33%;width:34%;height:10px;border-radius:20px;background:#08070b;z-index:4;box-shadow:0 0 0 2px #18131b}#trabajos .phone-home{position:absolute;bottom:13px;left:32%;height:3px;width:36%;background:#fff8;border-radius:10px;z-index:4}
#trabajos .work-explore{display:flex;align-items:center;gap:18px;margin:22px 9% 25px 0;font-size:10px;color:#c2aace}#trabajos .work-explore button{background:none;border:0;padding:8px 0;color:#f5f1e8;white-space:nowrap}#trabajos .work-explore button span{margin-left:8px;color:#dff279}#trabajos .work-explore label{flex:1;min-width:60px;display:flex}#trabajos .work-explore input{width:100%;height:2px;accent-color:#dff279;cursor:pointer}#trabajos .work-caption{display:grid;grid-template-columns:auto 1fr;gap:25px;align-items:center;padding-right:5%}#trabajos .work-caption h3{font:700 clamp(35px,4vw,70px)/1 'Times New Roman',Georgia,serif;letter-spacing:-.045em;margin:0 0 9px}#trabajos #project-type{font-size:10px;letter-spacing:.12em;color:#cbb9d5;margin:0}#trabajos .work-caption-detail{border-left:1px solid #ad8fba77;padding-left:25px}#trabajos #project-description{font-size:13px;color:#d6c7de;line-height:1.5;margin:0 0 14px;max-width:300px}#trabajos #visit{display:inline-flex;align-items:center;gap:24px;border-radius:30px;padding:12px 22px;background:#dff279;color:#291b2e;font-size:12px;transition:transform .3s,background .3s}#trabajos #visit:hover{transform:translateY(-3px);background:#eafb9e}
#trabajos .work-index{min-width:0;padding:0 0 0 1%;position:relative;z-index:1}#trabajos .folios{display:flex;align-items:start;perspective:1100px;gap:2%;padding:16px 4% 30px 0;min-height:37vw}#trabajos .folio{position:relative;display:block;width:34%;flex:0 0 34%;padding:0;border:0;background:none;text-align:left;transform:rotateY(-24deg) rotateZ(-1deg) translateY(28px);transform-origin:left center;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .5s;filter:brightness(.78)}#trabajos .folio:nth-child(3){transform:rotateY(-24deg) rotateZ(-1deg) translateY(10px)}#trabajos .folio[aria-pressed=true]{transform:rotateY(-17deg) translateY(0);filter:brightness(1);z-index:2}#trabajos .folio:hover,#trabajos .folio:focus-visible{transform:rotateY(-9deg) translateY(-10px);filter:brightness(1);z-index:3}#trabajos .folio-label{display:block;height:83px;padding:0 8px 13px 10px;color:#f6eff9}#trabajos .folio-label small{font-size:12px;display:block;margin-bottom:7px;color:#c4abcf}#trabajos .folio-label strong{font:700 clamp(16px,1.5vw,25px)/1.05 'Times New Roman',Georgia,serif;display:block;letter-spacing:-.04em;margin-bottom:7px}#trabajos .folio-label em{font-size:7px;letter-spacing:.12em;text-transform:uppercase;font-style:normal;line-height:1.7;display:block;color:#d0b8db}#trabajos .folio-window{display:block;position:relative;overflow:hidden;height:31vw;max-height:570px;border:1px solid #ad8cbd88;border-radius:5px;background:#251a2c;box-shadow:12px 18px 25px #10091775}#trabajos .folio-window img{width:100%;height:auto;max-width:none}#trabajos .folio-edge{position:absolute;top:0;left:-2px;bottom:0;width:3px;background:#dff279;box-shadow:0 0 10px #dff27944;opacity:0;transition:opacity .4s}#trabajos .folio[aria-pressed=true] .folio-edge{opacity:1}#trabajos .index-footer{display:flex;align-items:center;gap:18px;color:#bfa5c9;font-size:8px;letter-spacing:.13em;margin:20px 0 0}#trabajos .index-footer span{height:1px;background:#a186ae70;flex:1}
#trabajos.has-entrance .desktop-frame,#trabajos.has-entrance .phone-frame,#trabajos.has-entrance .folio{opacity:0;translate:0 45px;transition:opacity .9s,translate 1s cubic-bezier(.2,.8,.2,1),transform .65s,filter .5s}#trabajos.works-in .desktop-frame,#trabajos.works-in .phone-frame,#trabajos.works-in .folio{opacity:1;translate:0 0}#trabajos .phone-frame{transition-delay:.16s}#trabajos .folio:nth-child(1){transition-delay:.12s}#trabajos .folio:nth-child(2){transition-delay:.22s}#trabajos .folio:nth-child(3){transition-delay:.32s}#trabajos .work-feature.is-changing .desktop-frame,#trabajos .work-feature.is-changing .phone-frame{opacity:.35}
@media(min-width:1800px){#trabajos.editorial-works{padding-left:max(4%,calc((100vw - 1700px)/2));padding-right:max(4%,calc((100vw - 1700px)/2))}#trabajos .folios{min-height:660px}#trabajos .folio-window{height:540px}}
@media(max-width:1100px){#trabajos .works-signature{font-size:8px}#trabajos .works-signature:before{display:none}#trabajos .works-nav{gap:8px}#trabajos .works-nav button{width:38px;height:38px}#trabajos .work-caption{gap:15px}#trabajos .work-caption-detail{padding-left:15px}#trabajos .explore-hint{display:none}#trabajos .folio-label{height:90px}#trabajos .folio-label em{font-size:6px}}
@media(max-width:760px){#trabajos.editorial-works{padding:40px 6% 45px}#trabajos .works-head{flex-wrap:wrap;margin-bottom:30px;gap:18px}#trabajos .works-head h2{font-size:clamp(65px,13vw,98px)}#trabajos .works-signature{display:none}#trabajos .works-nav{margin-left:auto}#trabajos .works-nav>span{display:none}#trabajos .work-composition{display:flex;flex-direction:column;gap:32px}#trabajos .work-feature{width:100%}#trabajos .work-stage{aspect-ratio:1.3;padding-right:8%}#trabajos .phone-frame{width:28%;right:0;bottom:0;padding:5px 3px 6px;border-radius:18px}#trabajos #mobile-screen{border-radius:14px}#trabajos .phone-camera{top:8px;height:6px}#trabajos .phone-home{bottom:10px;height:2px}#trabajos .desktop-frame{padding:5px;border-radius:8px}#trabajos .window-chrome{height:16px;font-size:6px;gap:3px;padding:0 4px 5px}#trabajos .window-chrome i{width:3px;height:3px}#trabajos .work-explore{margin:18px 0;font-size:11px}#trabajos .work-caption{grid-template-columns:1fr;gap:15px;padding:0}#trabajos .work-caption h3{font-size:42px}#trabajos .work-caption-detail{padding:0;border:0;display:flex;align-items:center;gap:16px;justify-content:space-between}#trabajos #project-description{font-size:12px;margin:0;max-width:190px}#trabajos #visit{padding:11px 15px;gap:12px;white-space:nowrap;font-size:11px}#trabajos .work-index{width:100%;padding:0}#trabajos .folios{min-height:0;gap:3%;padding:0 3% 16px 0;perspective:900px}#trabajos .folio{width:32%;flex-basis:32%;transform:rotateY(-19deg) translateY(15px)}#trabajos .folio:nth-child(3){transform:rotateY(-19deg) translateY(8px)}#trabajos .folio-label{height:73px;padding:0 4px 8px 7px}#trabajos .folio-label strong{font-size:18px}#trabajos .folio-label small{font-size:10px;margin-bottom:4px}#trabajos .folio-label em{font-size:6px;letter-spacing:.05em}#trabajos .folio-window{height:235px}#trabajos .index-footer{font-size:7px;margin-top:10px}}
@media(prefers-reduced-motion:reduce){#trabajos *,#trabajos *:before{animation:none!important;transition:none!important}#trabajos.has-entrance .desktop-frame,#trabajos.has-entrance .phone-frame,#trabajos.has-entrance .folio{opacity:1;translate:none}}body.no-motion #trabajos .desktop-frame,body.no-motion #trabajos .phone-frame,body.no-motion #trabajos .folio{opacity:1;translate:none;transition:none}


/* Lit studio floor; reflections move with the interactive objects. */
#trabajos.editorial-works::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#20152633,transparent 60%,#24172944),url("assets/works-studio-background.png") center 65%/cover no-repeat;opacity:1}
#trabajos .work-stage{margin-bottom:40px}
#trabajos .desktop-frame{-webkit-box-reflect:below 8px linear-gradient(transparent 83%,#fff3);box-shadow:0 2px 2px #dcc8e62a inset,0 24px 25px -10px #12091dbb,0 48px 38px -22px #100717aa}
#trabajos .phone-frame{-webkit-box-reflect:below 7px linear-gradient(transparent 82%,#fff4);box-shadow:0 0 0 1px #b599c6,8px 24px 22px -10px #100818dd,0 3px 3px #dec9e6 inset}
#trabajos .work-explore{position:relative;z-index:4}
#trabajos .folios{display:block;position:relative;height:clamp(405px,38vw,660px);min-height:0;padding:0;perspective:1300px;perspective-origin:50% 60%;touch-action:pan-y}
#trabajos .folio,#trabajos .folio:nth-child(3){position:absolute;left:33.5%;top:0;width:32%;transform-origin:center center;transform:translate3d(0,0,40px) rotateY(-20deg);filter:brightness(1);transition:transform .85s cubic-bezier(.22,.8,.2,1),opacity .55s,filter .55s;transition-delay:0s;z-index:3}
#trabajos .folio[data-slot="-1"]{transform:translate3d(-104%,25px,-35px) rotateY(-27deg);filter:brightness(.86);z-index:2}
#trabajos .folio[data-slot="1"]{transform:translate3d(104%,12px,-35px) rotateY(-27deg);filter:brightness(.86);z-index:1}
#trabajos .folio[data-slot="2"]{transform:translate3d(160%,15px,-220px) rotateY(-40deg);opacity:0!important;pointer-events:none}
#trabajos .folio:hover,#trabajos .folio:focus-visible{filter:brightness(1.12)}
#trabajos .folio-label{height:90px;padding-left:7px}
#trabajos .folio-window{height:clamp(260px,28vw,500px);max-height:none;overflow:hidden;box-shadow:9px 23px 23px -9px #110919dd,inset 0 0 0 1px #dbbce355;-webkit-box-reflect:below 7px linear-gradient(transparent 78%,#fff4)}
#trabajos .folio-window img{width:100%;height:auto;object-fit:initial;object-position:initial}
#trabajos .folio-edge{left:0}
#trabajos .index-footer{position:relative;z-index:4;margin-top:18px}
#trabajos.has-entrance .folio{transition:transform .85s cubic-bezier(.22,.8,.2,1),opacity .7s,translate .9s,filter .55s;transition-delay:0s}
@media(min-width:1800px){#trabajos .folios{height:660px}}
@media(max-width:760px){#trabajos.editorial-works::before{background-position:48% center}#trabajos .work-stage{margin-bottom:24px}#trabajos .folios{height:395px;perspective:950px}#trabajos .folio-label{height:78px}#trabajos .folio-window{height:245px}#trabajos .folio,#trabajos .folio:nth-child(3){width:32%;left:33.5%}#trabajos .work-index{margin-top:8px}#trabajos .desktop-frame{-webkit-box-reflect:below 6px linear-gradient(transparent 86%,#fff2)}#trabajos .phone-frame{-webkit-box-reflect:below 6px linear-gradient(transparent 86%,#fff3)}}
@media(prefers-reduced-motion:reduce){#trabajos .folio{transition:none!important}}
body.no-motion #trabajos .folio{transition:none!important}

/* Reference refinement: wider glass panels and a detached selection spine. */
#trabajos .work-composition{grid-template-columns:minmax(0,61fr) minmax(0,36fr)}
#trabajos .folios{perspective:800px;perspective-origin:50% 54%}
#trabajos .folio,#trabajos .folio:nth-child(3){left:31%;width:38%;transform:translate3d(0,0,34px) rotateY(-34deg)}
#trabajos .folio[data-slot="-1"]{transform:translate3d(-94%,25px,-30px) rotateY(-40deg)}
#trabajos .folio[data-slot="1"]{transform:translate3d(94%,12px,-30px) rotateY(-40deg)}
#trabajos .folio[data-slot="2"]{transform:translate3d(160%,15px,-220px) rotateY(-45deg)}
#trabajos .folio-label{height:104px;padding:6px 3px 20px 12px;display:flex;flex-direction:column;justify-content:flex-end}
#trabajos .folio-label small{margin-bottom:9px;line-height:1.1}
#trabajos .folio-label strong{font-size:clamp(18px,1.6vw,28px);line-height:1.08;margin-bottom:9px}
#trabajos .folio-label em{font-size:clamp(6px,.48vw,8px);line-height:1.5;letter-spacing:.12em}
#trabajos .folio-window{border:2px solid #bb98d1;border-radius:7px;background:#201627;box-shadow:1px 0 0 1px #e5c9f0aa,5px 1px 0 #78588c,6px 1px 1px #b092c3,0 0 13px #c99ceb20,9px 23px 23px -9px #110919dd}
#trabajos .folio-window::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:4px;box-shadow:inset 0 2px 3px #f5e5ff99,inset -2px 0 3px #d9b9f077;background:linear-gradient(125deg,#e9d2ff16,transparent 24%,transparent 82%,#b286d011)}
#trabajos .folio-edge{left:-11px;top:8px;bottom:0;width:4px;border-radius:4px;background:linear-gradient(90deg,#c7e563,#f2ffae 55%,#dff279);box-shadow:0 0 7px #dff279aa,0 0 19px #dff27944;pointer-events:none;-webkit-box-reflect:below 7px linear-gradient(transparent 85%,#fff3)}
@media(max-width:1100px){#trabajos .folio-label{height:100px;padding-left:9px}#trabajos .folio-label strong{font-size:20px}}
@media(max-width:760px){#trabajos .folios{perspective:650px;height:415px}#trabajos .folio,#trabajos .folio:nth-child(3){left:31%;width:38%}#trabajos .folio-label{height:94px;padding:4px 2px 16px 6px}#trabajos .folio-label strong{font-size:19px;margin-bottom:7px}#trabajos .folio-label small{margin-bottom:7px}#trabajos .folio-label em{font-size:6px;letter-spacing:.04em}#trabajos .folio-edge{left:-8px;width:3px}#trabajos .folio-window{border-width:1px;box-shadow:1px 0 0 1px #e5c9f080,3px 1px 0 #78588c,4px 1px 1px #b092c3,0 0 10px #c99ceb20,9px 23px 23px -9px #110919dd}}

/* Each panel has its own vanishing point, so all three share the same orientation. */
#trabajos .folios{perspective:none;height:clamp(465px,43vw,730px)}
#trabajos .folio[data-slot="0"]{transform:translate3d(0,0,0) perspective(1050px) rotateY(-35deg)}
#trabajos .folio[data-slot="-1"]{transform:translate3d(-91%,25px,0) perspective(1050px) rotateY(-35deg)}
#trabajos .folio[data-slot="1"]{transform:translate3d(91%,12px,0) perspective(1050px) rotateY(-35deg)}
#trabajos .folio[data-slot="2"]{transform:translate3d(160%,15px,-220px) perspective(1050px) rotateY(-35deg)}
#trabajos .folio-panel{display:block;position:relative;transform-style:preserve-3d;-webkit-box-reflect:below 7px linear-gradient(transparent 78%,#fff4)}
#trabajos .folio-panel::after{content:"";position:absolute;top:1px;bottom:1px;right:-4px;width:8px;transform:rotateY(90deg);background:linear-gradient(90deg,#25172e,#684973 24%,#ddbfeb 48%,#9971ad 70%,#382640);border-radius:2px;pointer-events:none}
#trabajos .folio-window{height:clamp(305px,32vw,565px);border:1px solid #c3a4d4;border-radius:6px;transform:translateZ(4px);-webkit-box-reflect:unset;box-shadow:0 0 0 1px #715581,0 0 11px #c99ceb20,9px 23px 23px -9px #110919dd}
#trabajos .folio-window::after{border-radius:5px;box-shadow:inset 0 1px 2px #fff2ff99,inset -1px 0 2px #e7c7fb77,inset 1px 0 1px #b59ac14d;background:linear-gradient(125deg,#e9d2ff12,transparent 24%,transparent 82%,#b286d00b)}
@media(max-width:760px){#trabajos .folios{perspective:none;height:460px}#trabajos .folio-window{height:285px}#trabajos .folio-panel::after{width:6px;right:-3px}#trabajos .folio-window{transform:translateZ(3px)}}
#trabajos .folio-panel::after{right:-5px;width:5px;transform:skewY(32deg);transform-origin:left top;z-index:-1;background:linear-gradient(90deg,#d8bfe6,#9373a5 32%,#4a315b 75%,#b79aca);box-shadow:1px 0 1px #cfafe377}
#trabajos .folio-window{transform:none}
@media(max-width:760px){#trabajos .folio-panel::after{right:-4px;width:4px}#trabajos .folio-window{transform:none}}
#trabajos .folios{height:clamp(490px,45vw,770px)}
@media(max-width:760px){#trabajos .folios{height:480px}}
/* Enlarge width with height: preserve the approved panel proportions. */
#trabajos .folio,#trabajos .folio:nth-child(3){left:28.3%;width:43.4%}
#trabajos .folio[data-slot="-1"]{transform:translate3d(-89%,25px,0) perspective(1050px) rotateY(-35deg)}
#trabajos .folio[data-slot="1"]{transform:translate3d(89%,12px,0) perspective(1050px) rotateY(-35deg)}
/* Selection grows as a complete object, including its frame and reflection. */
#trabajos .folio[data-slot="0"]{transform:translate3d(0,-8px,0) perspective(1050px) rotateY(-27deg) scale(1.045);z-index:5}
@media(max-width:760px){#trabajos .folio[data-slot="0"]{transform:translate3d(0,-6px,0) perspective(1050px) rotateY(-27deg) scale(1.035)}}
@media(max-width:760px){#trabajos .folio,#trabajos .folio:nth-child(3){left:29.5%;width:41%}#trabajos .folio-window{height:265px}#trabajos .folios{height:460px}}
/* Keep the gallery size; reserve breathing room beside the phone. */
@media(min-width:761px){#trabajos .work-composition{--gallery-breath:clamp(24px,2.5vw,48px);grid-template-columns:minmax(0,calc(61% - var(--gallery-breath))) minmax(0,36%);column-gap:calc(3% + var(--gallery-breath))}}

/* Floor reflections cannot paint over neighbouring cards. */
#trabajos .folio-panel,#trabajos .folio-edge{-webkit-box-reflect:none}
#trabajos .folio-reflections{position:absolute;inset:0;z-index:0;pointer-events:none}
#trabajos .folio-reflection{pointer-events:none!important}
#trabajos .folio-reflection .folio-label{visibility:hidden}
#trabajos .folio-reflection .folio-panel{transform:translateY(calc(100% + 7px)) scaleY(-1);transform-style:flat;mask-image:linear-gradient(to bottom,transparent 78%,#ffffff44);-webkit-mask-image:linear-gradient(to bottom,transparent 78%,#ffffff44)}

/* The selection accent belongs to the project heading, never the screen or floor. */
#trabajos .folio-label{position:relative}
#trabajos .folio-label .folio-edge{top:6px;bottom:20px;box-shadow:0 0 6px #dff27988,0 0 12px #dff27926;-webkit-box-reflect:none}
@media(max-width:760px){#trabajos .folio-label .folio-edge{top:4px;bottom:16px}}
/* On phones, focusing a card must scroll the page, never the section itself. */
@media(max-width:760px){
 #trabajos.editorial-works{overflow:clip}
 #trabajos .works-head{gap:12px}
 #trabajos .works-nav button{width:44px;height:44px}
 #trabajos .work-explore input{height:24px}
}