:root{--bg:#05090d;--card:#0c1218;--ink:#f2f5f7;--mute:#93a3af;--blue:#034488;--deep:#1D5EAB;--line:rgba(255,255,255,.12);
--display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;--text:"Figtree","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--text);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
p{text-wrap:pretty}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 4vw;transition:background .3s,backdrop-filter .3s,padding .3s}
.nav.solid{background:rgba(5,9,13,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:8px 4vw}
.brand img{height:64px;width:auto;transition:height .3s,transform .3s}
.nav.solid .brand img{height:48px}
.brand:hover img{transform:rotate(-6deg) scale(1.06)}
.links{display:flex;gap:clamp(18px,3vw,44px);list-style:none}
.links a{text-decoration:none;font-weight:600;font-size:16px;position:relative;padding:6px 0}
.links a:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.links a:hover:after,.links a:focus-visible:after{transform:scaleX(1)}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.burger span{display:block;width:26px;height:2px;background:#fff;margin:6px auto;transition:transform .3s}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* hero */
.hero{position:relative;height:100vh;height:100dvh;min-height:520px;overflow:hidden;display:grid;place-items:center;text-align:center}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(5,9,13,.35) 50%,var(--bg))}
.hero-copy{position:relative;z-index:2;padding:0 5vw}
.hero h1{font-size:clamp(2.4rem,7.4vw,6.6rem);line-height:1.02;letter-spacing:-.04em}
.ln{display:block;overflow:hidden;padding:.06em 0}
.ln>span{display:inline-block;transform:translateY(110%);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.ln:nth-child(2)>span{animation-delay:.18s}
.mark{background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 100% no-repeat;padding:0 .18em;margin:0 -.18em;animation:rise .9s .18s cubic-bezier(.2,.8,.2,1) forwards,wipe .8s .9s ease-out forwards!important}
.sub{margin-top:1.4rem;font-size:clamp(1.1rem,2.2vw,1.7rem);opacity:0;animation:fade .8s 1.3s forwards}
.cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;display:block;width:30px;height:60px}
.cue span{position:absolute;left:5px;width:18px;height:18px;border:solid var(--blue);border-width:0 4px 4px 0;transform:rotate(45deg);opacity:0;animation:cue 2s infinite}
.cue span:nth-child(2){animation-delay:.2s;top:14px}.cue span:nth-child(3){animation-delay:.4s;top:28px}
@keyframes rise{to{transform:none}}
@keyframes wipe{to{background-size:100% 100%}}
@keyframes fade{to{opacity:1}}
@keyframes cue{0%{opacity:0;margin-top:-10px}50%{opacity:1}100%{opacity:0;margin-top:10px}}

/* sections */
section{padding:clamp(72px,10vw,140px) 0}
.wrap{width:min(1180px,92vw);margin:0 auto}
.sec-title{font-size:clamp(2.6rem,7vw,5.6rem);text-align:left;margin-bottom:clamp(32px,5vw,64px)}
.sec-title:after{content:"";display:block;width:84px;height:6px;border-radius:6px;background:var(--blue);margin:20px 0 0}
.sub-title{margin-top:clamp(72px,10vw,130px)}

.about{display:grid;grid-template-columns:5fr 6fr;align-items:center;gap:clamp(24px,5vw,80px);width:min(1180px,92vw);margin:0 auto}
.about-photo img{position:relative;width:100%;border-radius:28px;filter:grayscale(1) contrast(1.05);transition:filter .6s,transform .6s}
.about-photo:hover img{filter:none;transform:scale(1.015)}
.about-text h2{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:1.2rem}
.about-text p{color:#d5dde3;margin-bottom:1rem;max-width:34em}
.about-text p:first-of-type{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.4;color:var(--ink)}

/* work */
.group{margin-bottom:clamp(48px,7vw,88px)}
.group h3{font-weight:500;font-size:clamp(1.3rem,2.6vw,2rem);margin-bottom:18px;display:flex;align-items:center;gap:14px}
.group h3:before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--blue)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,2vw,24px)}
.grid.one{grid-template-columns:1fr}
.item{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--line),0 32px 60px -34px rgba(29,94,171,.55);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.item:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(92,162,201,.45),0 40px 70px -30px rgba(29,94,171,.7)}
.item.audio{aspect-ratio:auto;height:450px}
.item iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ylink{display:block;width:fit-content;margin:12px auto 0;padding:10px 22px;border:2px solid var(--blue);border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;transition:background .3s,color .3s}.ylink:hover{background:var(--blue);color:#000}
.yt{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:#000;cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.yt:hover img{transform:scale(1.06);filter:brightness(.7)}
.play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--blue);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s}
.play:after{content:"";position:absolute;left:31px;top:23px;border:15px solid transparent;border-left:24px solid #fff;border-right:0}
.yt:hover .play{transform:scale(1.18);background:var(--deep)}

/* marquee */
.trusted{padding-left:0;padding-right:0;overflow:hidden}
.marquee{display:flex;overflow:hidden;margin-bottom:28px;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{flex:none;display:flex;align-items:center;gap:clamp(44px,6vw,90px);padding-right:clamp(44px,6vw,90px);list-style:none;min-width:100%;justify-content:space-around;animation:slide 70s linear infinite}
.marquee.rev .track{animation-direction:reverse;animation-duration:85s}
.marquee:hover .track{animation-play-state:paused}
.track img{height:clamp(44px,5vw,64px);width:auto;max-width:150px;object-fit:contain;opacity:.7;transition:opacity .3s,transform .3s}
.track img:hover{opacity:1;transform:scale(1.12)}
@keyframes slide{to{transform:translateX(-100%)}}

/* contact */
.contact{text-align:center;width:min(1180px,92vw);margin:0 auto}
.mail:after{content:" \2197";color:var(--blue)}
.mail{display:block;width:fit-content;margin:0 auto 14px;font:800 clamp(1.3rem,4.2vw,3rem)/1.2 var(--display);text-decoration:none;background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 4px no-repeat;transition:background-size .4s,color .3s;overflow-wrap:anywhere}
.mail:hover,.mail:focus-visible{background-size:100% 4px;color:var(--blue)}
footer{display:flex;align-items:center;justify-content:center;gap:14px;padding:36px 4vw;border-top:1px solid var(--line);color:var(--mute);font-size:15px}
footer img{height:40px;width:auto}
footer .top{margin-left:auto;text-decoration:none;font-weight:600;transition:color .3s}footer .top:hover{color:var(--blue)}

/* evolución */
body:before{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.06;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.about-photo{position:relative}
.about-photo:before{content:"";position:absolute;inset:6% -5% -6% 5%;border-radius:28px;background:linear-gradient(135deg,var(--deep),transparent 70%);opacity:.55;transition:transform .6s}
.about-photo:hover:before{transform:translate(8px,8px)}
.about,.work{position:relative}
.work{background:radial-gradient(60% 35% at 12% 0,rgba(92,162,201,.09),transparent 70%)}
.grid:not(.one):not(:has(.audio))>.item:first-child:nth-last-child(odd):not(:last-child){grid-column:1/-1}
.item.audio{grid-column:1/-1}
.links a[aria-current=true]{color:var(--blue)}.links a[aria-current=true]:after{transform:scaleX(1)}
.skip{position:fixed;left:12px;top:-60px;z-index:70;padding:10px 18px;border-radius:999px;background:var(--blue);color:#000;font-weight:600;text-decoration:none;transition:top .2s}.skip:focus{top:12px}
.ylink:active,.mail:active{transform:scale(.97)}
.yt:active .play{transform:scale(1.05)}
.js .group.in .item{animation:up .8s cubic-bezier(.2,.8,.2,1) backwards}
.js .group.in .item:nth-child(2){animation-delay:.12s}.js .group.in .item:nth-child(n+3){animation-delay:.22s}
@keyframes up{from{opacity:0;transform:translateY(26px)}}

/* scroll reveal */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media(max-width:820px){
  .burger{display:block}
  .links{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;align-items:center;gap:6px;background:rgba(5,9,13,.96);padding:90px 0 28px;transform:translateY(-100%);transition:transform .35s}
  .links.open{transform:none}
  .burger{position:relative;z-index:60}
  .links a{font-size:22px}
  .about,.grid{grid-template-columns:1fr}
  .item.audio{height:380px}
}
@media(prefers-reduced-motion:reduce){
  body:before{display:none}
  *{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .track{animation:none}.marquee{overflow-x:auto}
}

/* ===== variante GSAP (gpt-tasteskill) ===== */
:root{--display:"Outfit","Helvetica Neue",Arial,sans-serif;--text:"Outfit","Helvetica Neue",Arial,sans-serif}
section{padding:clamp(96px,14vw,200px) 0}
/* hero */
.shade{background:radial-gradient(ellipse at 50% 45%,rgba(5,9,13,.25),rgba(5,9,13,.82) 80%),linear-gradient(to bottom,transparent 60%,var(--bg))}
.hero h1{font-weight:800;letter-spacing:-.045em}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:2rem;opacity:0;animation:fade .8s 1.6s forwards}
.btn{display:inline-block;padding:15px 30px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;background:var(--blue);color:#05090d;border:2px solid var(--blue);transition:background .3s,color .3s,transform .3s}
.btn:hover{background:#fff;border-color:#fff;transform:translateY(-2px)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.ghost:hover{background:#fff;color:#05090d}
.btn:active{transform:scale(.97)}
/* about: frase de entrada con scrub */
.about-text p.lead{font-size:clamp(1.35rem,2.1vw,1.75rem);line-height:1.35;font-weight:400;letter-spacing:-.005em;max-width:28em;margin-bottom:1.5rem;color:var(--ink)}
.gs .lead .w{opacity:.12}
/* trabajos: grilla densa + fisica de hover */
.grid{grid-auto-flow:dense}
.yt img{transition:transform .7s ease-out,filter .4s}
.yt:hover img{transform:scale(1.05)}
/* stacking: el contacto se desliza sobre Trusted By */
.contact{width:auto;margin:0;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-inline:calc((100% - min(1180px,92vw))/2);position:relative;z-index:2;background:radial-gradient(60% 50% at 50% 0,rgba(29,94,171,.22),transparent 70%),var(--bg);border-radius:36px 36px 0 0;border-top:1px solid var(--line)}
.mail{font-size:clamp(1.5rem,5.6vw,4.6rem);letter-spacing:-.04em}
@media(min-width:821px) and (min-height:760px){.trusted{position:sticky;top:0;z-index:1}}
.grid:has(.audio)>.item:first-child:nth-last-child(even){grid-column:1/-1}
.trusted .sec-title{width:min(1180px,92vw);margin-inline:auto;text-align:center}
.trusted .sec-title:after{margin-inline:auto}

/* ===== Our Work: pares en 2 columnas (desktop) ===== */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,44px);row-gap:0;margin-bottom:clamp(48px,7vw,88px)}
.pair>.group{display:grid;grid-template-rows:subgrid;grid-row:span 2;min-width:0;margin-bottom:0}
.pair h3{font-size:clamp(1.1rem,1.9vw,1.55rem);align-self:end}
@media(min-width:821px){.pair:has(.yt) .item.audio{height:auto;aspect-ratio:16/9}}
@media(max-width:820px){.pair{grid-template-columns:1fr}.pair>.group{display:block;margin-bottom:clamp(48px,7vw,88px)}.pair>.group:last-child{margin-bottom:0}}