:root{--e:cubic-bezier(.2,.8,.2,1);--ph:#3d3d3d;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000}
body{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh;background:transparent;color:#fff;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow-x:hidden}
a,button{color:inherit;font:inherit;background:none;border:0;cursor:pointer;text-decoration:none}
img{-webkit-user-drag:none;pointer-events:none;display:block}
body.home{grid-template-columns:1fr}body.home #side{display:none}
#view{min-width:0;position:relative;padding:120px 48px 90px 40px}body.home #view,body.contact #view{padding:0}
#view.in{animation:fi .8s var(--e) both}@keyframes fi{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* imágenes y placeholders */
.pic{position:relative;overflow:hidden;background:var(--ph);width:100%}.pic img{width:100%;height:100%;object-fit:cover}
.ph{display:grid;place-items:center;font-size:12px}.ph:after{content:attr(data-l);opacity:.45}
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--e),transform 1s var(--e)}.rv.vis{opacity:1;transform:none}
/* sidebar */
#side{position:sticky;top:0;height:100vh;width:280px;display:flex;flex-direction:column;padding:130px 0 40px 48px;font-size:14px;line-height:1.5;z-index:5}
#side:after{content:'';position:absolute;right:0;top:110px;bottom:60px;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.16),transparent)}
#side nav{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.logo{font-size:22px;letter-spacing:-.02em;margin-bottom:52px;display:block;transition:opacity .4s}.logo:hover{opacity:.7}
.logo:after{content:'Brenda Garay';display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;opacity:.42;margin-top:7px}
#side a{position:relative;opacity:.5;padding:4px 0;transition:opacity .5s,transform .6s var(--e)}
#side a:hover{opacity:1;transform:translateX(5px)}
#side a:before{content:'';position:absolute;left:-24px;top:50%;width:0;height:1px;background:#fff;transition:width .6s var(--e)}
#side a:hover:before{width:8px}#side a.on{opacity:1}#side a.on:before{width:14px}
#side a.logo{opacity:1;padding:0}#side a.logo:before{display:none}#side a.logo:hover{transform:none;opacity:.7}
#side .grp{font-size:10px;letter-spacing:.26em;opacity:.38;margin-bottom:10px;text-transform:uppercase}#side .grp:hover{opacity:.9}
#side .sub{padding:2px 0 2px 16px;margin:2px 0 4px 1px;border-left:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column}
#side .sub a{font-size:13px}#side .sub a.cur{font-style:italic;opacity:1}
.gap{height:40px}.lg{margin-top:auto;align-self:flex-start;font-size:11px;letter-spacing:.22em}.lg span{opacity:.4;transition:opacity .4s}.lg span.on,.lg:hover span{opacity:1}
/* fondo del hub (Obra) */
#bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#000;opacity:0;transition:opacity 1.2s var(--e);pointer-events:none}body.hub #bg{opacity:1}
#bg:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,0) 50%)}
.bgi{position:absolute;inset:-14%;background:url(../assets/img/gradient-1.jpg) center/cover;mix-blend-mode:screen;opacity:.4;animation:bga 34s ease-in-out infinite alternate;will-change:transform}
.bgi.b2{background-image:url(../assets/img/gradient-2.jpg);opacity:.3;transform:scaleX(-1);animation:bgb 52s ease-in-out infinite alternate}
.bgn{position:absolute;inset:-10%;opacity:.12;mix-blend-mode:overlay;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:bgg 1s steps(5) infinite}
@keyframes bga{from{transform:scale(1.05) translate(-3%,-2%) rotate(-1deg)}to{transform:scale(1.25) translate(3%,3%) rotate(1.5deg)}}
@keyframes bgb{from{transform:scaleX(-1) scale(1.3) translate(3%,2%)}to{transform:scaleX(-1) scale(1.08) translate(-3%,-3%) rotate(-2deg)}}
@keyframes bgg{20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
/* tipografía */
h1{font-weight:400;letter-spacing:-.035em;line-height:.9;font-size:clamp(44px,6vw,92px);text-transform:uppercase}
.back{font-size:13px;opacity:.6;display:inline-block;margin-bottom:26px;transition:opacity .4s}.back:hover{opacity:1}
.ttl{font-size:30px;margin-bottom:40px;letter-spacing:-.02em;font-weight:400}.ttl small{font-size:.55em}
.txt{font-size:17px;line-height:1.42;text-align:justify;max-width:1100px}.txt p{margin-bottom:1.1em}
/* home */
.home{position:relative;height:100vh;min-height:560px}
.ss{position:absolute;inset:0;overflow:hidden;cursor:pointer;background:#1a1a1a}
.sl{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.07);transition:opacity 2.6s ease,transform 11s ease-out}.sl.on{opacity:1;transform:scale(1)}
.top{position:absolute;top:calc(44px + env(safe-area-inset-top,0px));right:48px;display:flex;gap:70px;font-size:19px;z-index:3;align-items:center}
.top a,.hl,.hr{color:#fff;text-shadow:0 0 30px rgba(0,0,0,.25)}.top a{opacity:.85;transition:opacity .4s}.top a:hover{opacity:1}
.top .lg{margin:0;font-size:12px}
.hl,.hr{position:absolute;top:50%;font-size:40px;letter-spacing:-.03em;z-index:3;pointer-events:none}.hl{left:48px}.hr{right:48px}
.dots{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}.dots i{width:5px;height:5px;border-radius:9px;background:#fff;opacity:.35;transition:all .8s var(--e)}.dots i.on{opacity:1;width:22px}
/* obra */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.card{display:block;font-size:22px;animation:fl 8s ease-in-out infinite;transition:opacity .6s}.card:nth-child(2){animation-delay:-2.7s}.card:nth-child(3){animation-delay:-5.3s}
@keyframes fl{50%{transform:translateY(-9px)}}
.card .pic{margin-bottom:8px;transition:transform 1.2s var(--e)}.card .n{display:block;font-size:11px;letter-spacing:.22em;opacity:.45;margin-bottom:6px}
.cards:hover .card{opacity:.45}.cards .card:hover{opacity:1;animation-play-state:paused}.card:hover .pic{transform:scale(1.025)}
/* listas y detalle */
.row{display:block;margin-bottom:56px;font-size:21px}.row .pic{margin-bottom:10px;transition:transform 1.2s var(--e)}.row:hover .pic{transform:scale(1.012)}.row small{font-size:.7em}
.fig{float:right;width:310px;margin:0 0 14px 28px;font-size:15px}.fig .pic{margin-bottom:6px}
.big{position:relative;margin-top:50px;max-width:1300px;clear:both}.stg{aspect-ratio:16/9;display:grid;place-items:center;background:#0b0b0b;overflow:hidden;cursor:pointer}.stg .pic{height:100%;width:auto;max-width:100%;animation:fi .6s var(--e) both}
.ar{position:absolute;top:50%;width:54px;height:54px;margin-top:-27px;display:grid;place-items:center;font-size:40px;cursor:pointer;opacity:.7;transition:opacity .3s,transform .5s var(--e);z-index:2;font-weight:400}.ar:hover{opacity:1}.ar.l{left:10px}.ar.r{right:10px}.ar.l:hover{transform:translateX(-4px)}.ar.r:hover{transform:translateX(4px)}
.ct{position:absolute;bottom:-26px;right:0;font-size:12px;opacity:.6}
.pn{display:flex;justify-content:space-between;margin-top:70px;font-size:14px;opacity:.7;clear:both}.pn a:hover{opacity:.6}
/* fotografía */
.fl{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 220px);min-height:520px;margin-left:clamp(0px,18vw,400px)}
.fi{flex:1;min-height:0;display:flex;align-items:flex-end;gap:12px;font-size:22px;transition:flex .9s var(--e)}.fi .pic{height:100%;width:auto}
.fl:hover .fi{flex:.75}.fl .fi:hover{flex:1.7}
.car{display:flex;gap:50px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:60px -48px 0 0;padding-right:48px;cursor:grab}.car::-webkit-scrollbar{display:none}.car.drag{scroll-snap-type:none;cursor:grabbing}
.cc{flex:0 0 min(530px,70vw);scroll-snap-align:start;font-size:36px;text-transform:uppercase;letter-spacing:-.02em;display:block}.cc .pic{margin-top:14px;transition:transform 1.2s var(--e)}.cc:hover .pic{transform:scale(1.02)}
.cn{position:fixed;top:58%}.cn.l{left:290px}.cn.r{right:14px}
.proj{display:grid;grid-template-columns:minmax(260px,1fr) 1.15fr;gap:60px;align-items:start}.proj h1{font-size:clamp(40px,5vw,72px);margin:50px 0 26px}
.pm{cursor:zoom-in;transition:transform 1.2s var(--e);animation:fi .6s var(--e) both}.pm:hover{transform:scale(1.01)}
.th{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;align-items:flex-end}.th .pic{height:66px;width:auto;cursor:pointer;opacity:.5;transition:opacity .4s,transform .5s var(--e)}.th .pic:hover,.th .pic.on{opacity:1;transform:translateY(-3px)}
.gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:64px 56px;align-items:start}.gr .pic{cursor:zoom-in;transition:transform 1s var(--e)}.gr .pic:hover{transform:scale(1.04)}
.ab{display:grid;grid-template-columns:490px 393px 1fr;margin:0 0 0 clamp(0px,10vw,187px);font-size:16px;line-height:1.5}
.abt{grid-area:1/1;padding-top:80px;position:relative;z-index:2;text-align:justify;text-shadow:0 0 16px rgba(0,0,0,.55)}.abt .p2{margin-top:2.6em;max-width:383px}
.abp{grid-area:1/2;margin-left:-90px;position:relative;z-index:1}
.sv{grid-area:1/3;margin-left:168px;font-size:13px;line-height:1.4;padding-top:2px}
.abq{grid-area:2/2/auto/4;margin-left:-86px;margin-top:22px;max-width:604px}.abq em{display:block;margin-bottom:1.4em;text-align:justify}
@media(max-width:1250px){.ab{display:block;margin:0}.abt{padding:0;text-shadow:none}.abt .p2{max-width:none}.abp{margin:30px 0;max-width:393px}.sv{margin:0 0 30px}.abq{margin:0;max-width:none}}
.ctc{display:grid;grid-template-columns:minmax(300px,1fr) 1fr;min-height:100vh}.ctc .info{padding:420px 40px 0 60px;font-size:28px;font-weight:500;line-height:1.2;letter-spacing:-.01em}.ctc .info p{margin-bottom:56px}
.ctc .info span{display:block;font-weight:400;font-size:.55em;opacity:.55;letter-spacing:.08em;text-transform:uppercase}
.ctc .info a{border-bottom:1px solid transparent;transition:border-color .4s;user-select:text;-webkit-user-select:text}.ctc .info a:hover{border-color:currentColor}.ctc .sd{position:relative}
/* lightbox */
#lb{position:fixed;inset:0;z-index:80;display:none;place-items:center;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}#lb.o{display:grid;animation:fi .5s var(--e)}
#lb .pic{height:min(84vh,1000px);width:auto;max-width:88vw}#lb .ar{position:absolute}.lbx{position:absolute;top:24px;right:30px;font-size:36px;opacity:.7;z-index:3}.lbx:hover{opacity:1}
@media(max-width:900px){body{grid-template-columns:1fr}#side{position:static;height:auto;width:auto;padding:90px 24px 0}#side:after{display:none}.lg{margin-top:24px}#view{padding:40px 24px}.cards,.proj,.ab,.ctc{grid-template-columns:1fr}.top{gap:22px;right:20px;font-size:15px}.hl,.hr{font-size:22px;top:46%}.hl{left:20px}.hr{right:20px;top:54%}.fig{float:none;width:100%;margin:0 0 20px}.ctc .info{padding:60px 24px}.ctc .sd{min-height:50vh}.fl{margin-left:0}.cn{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}}
@media print{body{display:none}}