:root{
  --bg:#0C0C0E; --panel:#17171B; --line:#2A2A30; --text:#EDEDEF; --muted:#9A9AA3; --red:#E63946;
  --font:'Inter',system-ui,-apple-system,sans-serif; --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.65 var(--font);cursor:crosshair;overflow-x:hidden}
a,button{cursor:pointer}a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}

/* Progreso y navegación */
.prog{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:2px;background:var(--red);transform:scaleX(var(--prog,0));transform-origin:left;z-index:30}
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);transition:transform .45s var(--ease)}
.nav.hide{transform:translateY(-100%)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:3.5rem}
.brand{font-weight:600;letter-spacing:-.03em;text-decoration:none}
.brand b,.mark b{color:var(--red);font-weight:inherit}
.links{display:flex;gap:2rem;list-style:none;margin:0;padding:0}
.links a{text-decoration:none;color:var(--muted);position:relative;transition:color .2s}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.links a:hover{color:var(--text)}.links a:hover::after{transform:scaleX(1)}
.burger{display:none;background:none;border:0;color:var(--text);font:500 1rem var(--font);padding:.5rem 0}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:7rem 0 clamp(2.5rem,7vw,5rem)}
.hero::before,.hero::after{content:"";position:absolute;background:var(--red);opacity:.4;pointer-events:none;z-index:1}
.hero::before{top:0;bottom:0;width:1px;left:var(--x,72%)}
.hero::after{left:0;right:0;height:1px;top:var(--y,38%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-media{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 70% 30%,rgba(230,57,70,.22),transparent 55%),linear-gradient(160deg,#1A1A20,#0C0C0E)}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.65) contrast(1.05)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,14,.92) 0,rgba(12,12,14,.4) 55%,rgba(12,12,14,.6) 100%)}
.mark{font-weight:600;font-size:clamp(3rem,13vw,11rem);line-height:.9;letter-spacing:-.06em;margin:0}
.mark span{display:inline-block;transition:font-weight .5s var(--ease),letter-spacing .5s var(--ease);animation:rise 1s var(--ease) both}
.mark span:nth-child(2){animation-delay:.1s}.mark span:nth-child(3){animation-delay:.2s}
.mark span:hover{font-weight:300;letter-spacing:-.02em}
@keyframes rise{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
.lead{max-width:30rem;margin:1.75rem 0 0;font-size:1.2rem;color:var(--muted)}
.lead strong{color:var(--text);font-weight:500}

/* Cinta de servicios */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.1rem 0}
.ticker div{display:flex;width:max-content;animation:run 55s linear infinite}
.ticker span{font-size:clamp(1.1rem,2.2vw,1.6rem);font-weight:500;letter-spacing:-.02em;white-space:nowrap;padding-right:2rem;color:var(--text)}
.ticker i{font-style:normal;color:var(--red);padding-right:2rem;font-size:clamp(1.1rem,2.2vw,1.6rem)}
@keyframes run{to{transform:translateX(-50%)}}
.ticker:hover div{animation-play-state:paused}

/* Secciones */
section{padding:clamp(4rem,9vw,7rem) 0}
section+section{border-top:1px solid var(--line)}
h2{font-weight:500;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.03em;line-height:1.2;margin:0 0 2.5rem;overflow:hidden}
h2 span{display:block}
html.js h2 span{transform:translateY(110%);transition:transform .9s var(--ease)}
html.js h2.in span{transform:none}

/* Arte de relleno: se reemplaza por tus imágenes con <img> dentro de .thumb */
.thumb{position:relative;aspect-ratio:4/3;background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:border-color .3s}
.work.main .thumb{aspect-ratio:21/9}
.img{position:absolute;inset:-8% 0;will-change:transform}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.a1{background:radial-gradient(circle at 72% 42%,var(--red) 0 17%,transparent 17.4%),radial-gradient(circle at 72% 42%,transparent 0 25%,#2A2A30 25.3% 25.8%,transparent 26%),linear-gradient(135deg,#1E1E24,#0F0F12)}
.a2{background:linear-gradient(var(--red) 0 0) 50% 50%/2px 70% no-repeat,linear-gradient(var(--red) 0 0) 50% 50%/70% 2px no-repeat,repeating-linear-gradient(90deg,#1F1F25 0 1px,transparent 1px 24px),#131317}
.a3{background:conic-gradient(from 210deg at 50% 62%,var(--red),#17171B 28%,#17171B 72%,var(--red))}
.a4{background:linear-gradient(115deg,#17171B 54%,var(--red) 54% 57%,#222228 57%),#17171B}
.a5{background:radial-gradient(circle at 50% 50%,#0C0C0E 0 12%,#2A2A30 12.5% 13.5%,#17171B 14% 30%,#2A2A30 30.5% 31.5%,#17171B 32%)}
.a6{background:linear-gradient(160deg,var(--red) 0 38%,#17171B 38.3%)}
.a7{background:repeating-conic-gradient(#17171B 0 12deg,#1F1F25 12deg 24deg)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.work{margin:0}.work.main{grid-column:1/-1}
html.js .thumb{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease),border-color .3s}
html.js .work.in .thumb,html.js .portrait.in .thumb{clip-path:inset(0)}
.work:hover .thumb{border-color:var(--red)}
.work:hover .img{filter:brightness(1.15)}
figcaption{display:flex;justify-content:space-between;gap:1rem;padding-top:.8rem}
figcaption span{color:var(--muted);transition:transform .4s var(--ease),color .3s}
.work:hover figcaption span{color:var(--red);transform:translateX(-6px)}
.work.main figcaption strong{font-size:1.25rem;font-weight:500;letter-spacing:-.02em}

/* Sobre mí */
.about{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.portrait{margin:0}
.portrait .thumb{aspect-ratio:4/5}
.portrait:hover .thumb{border-color:var(--red)}
.reticle{position:absolute;inset:0;pointer-events:none;z-index:1}
.reticle::before,.reticle::after{content:"";position:absolute;background:var(--red);opacity:.65;transition:left .35s var(--ease),top .35s var(--ease)}
.reticle::before{top:0;bottom:0;width:1px;left:var(--rx,62%)}
.reticle::after{left:0;right:0;height:1px;top:var(--ry,38%)}
.statement{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:500;letter-spacing:-.03em;line-height:1.2;margin:0 0 2rem}
.statement .w{color:#5A5A63;transition:color .3s}
.statement .w.on{color:var(--text)}
.bio p:not(.statement){margin:0 0 2rem;max-width:34rem;color:var(--muted)}
.skills{list-style:none;margin:0;padding:0;max-width:34rem}
.skills li{display:flex;gap:1.5rem;padding:1rem 0;border-top:1px solid var(--line);position:relative;transition:padding-left .4s var(--ease)}
.skills li:last-child{border-bottom:1px solid var(--line)}
.skills li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.skills li:hover{padding-left:.75rem}.skills li:hover::after{transform:scaleX(1)}
.skills b{color:var(--red);font-weight:500;font-variant-numeric:tabular-nums}
@media (max-width:760px){.portrait .thumb{aspect-ratio:4/3}}

/* Música */
.tracks{list-style:none;margin:0;padding:0}
.tracks li{display:grid;grid-template-columns:64px 2fr 1.5fr auto;gap:1.25rem;align-items:center;padding:.9rem 0;border-top:1px solid var(--line);position:relative}
.tracks li:last-child{border-bottom:1px solid var(--line)}
.tracks li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.tracks li:hover::after{transform:scaleX(1)}
.cover{width:64px;height:64px;border:1px solid var(--line);overflow:hidden;transition:transform .5s var(--ease)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.tracks li:hover .cover{transform:rotate(-6deg) scale(1.06)}
.tracks span{color:var(--muted)}
.tracks a{text-decoration:none;border-bottom:1px solid var(--red)}

/* Contacto */
.contact .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.contact{--bg:#E63946;--text:#0C0C0E;--muted:rgba(12,12,14,.8);--line:rgba(12,12,14,.35);--red:#0C0C0E;background:#E63946;color:var(--text)}
.contact .mail:hover{opacity:.7;color:var(--text)}
.contact .send::before{background:#fff}
.contact .send:hover{color:#0C0C0E}
.mail{display:inline-block;font-weight:500;font-size:clamp(1.3rem,3.6vw,2.4rem);letter-spacing:-.04em;line-height:1.1;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:.2rem;transition:color .2s;word-break:break-all}
.mail:hover{color:var(--red)}
.contact .note{color:var(--muted);margin:1.5rem 0 0}.contact .note a{color:var(--text)}
form{display:grid;gap:1.6rem}
.f{position:relative}
.f input,.f textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);font:inherit;padding:1.2rem 0 .5rem;border-radius:0;outline:none;resize:vertical}
.f label{position:absolute;left:0;top:1.2rem;color:var(--muted);pointer-events:none;transition:all .25s var(--ease)}
.f input:focus+label,.f input:not(:placeholder-shown)+label,.f textarea:focus+label,.f textarea:not(:placeholder-shown)+label{top:0;font-size:.8rem;color:var(--red)}
.f::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.f:focus-within::after{transform:scaleX(1)}
.send{justify-self:start;background:var(--text);color:var(--bg);border:0;font:500 1rem var(--font);padding:.9rem 1.8rem;position:relative;overflow:hidden;transition:color .35s}
.send::before{content:"";position:absolute;inset:0;background:var(--red);transform:translateY(101%);transition:transform .4s var(--ease);z-index:0}
.send:hover::before{transform:none}.send:hover{color:#fff}
.send span{position:relative;z-index:1}
.status{color:var(--muted);min-height:1.5em;margin:0}
footer{padding:2rem 0 3rem;color:var(--muted);font-size:.875rem;border-top:1px solid var(--line)}

@media (max-width:760px){
  .burger{display:block}
  .links{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:2rem;font-size:1.5rem;transform:translateY(-100%);transition:transform .4s var(--ease);visibility:hidden}
  .nav.open .links{transform:none;visibility:visible}
  .nav .brand,.nav .burger{position:relative;z-index:2}
  .grid,.about,.contact .cols{grid-template-columns:1fr}
  .work.main .thumb{aspect-ratio:4/3}
  .tracks li{grid-template-columns:64px 1fr auto}.tracks li span{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js h2 span{transform:none}html.js .thumb{clip-path:none}
}

.wl{display:block;text-decoration:none;color:inherit}
@view-transition{navigation:auto}
.proj-hero{padding:8rem 0 3rem}
.back{margin:0 0 1.5rem}.back a{color:var(--muted);text-decoration:none;transition:color .2s}.back a:hover{color:var(--red)}
.proj-hero h1{font-weight:600;font-size:clamp(2.4rem,8vw,6.5rem);letter-spacing:-.05em;line-height:.95;margin:0}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin:2.5rem 0 0;padding:1.25rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meta dt{color:var(--muted);font-size:.85rem}.meta dd{margin:.2rem 0 0}
.cover-wide{padding:0 0 clamp(3rem,7vw,5rem)}
.cover-wide .thumb{aspect-ratio:21/9}
.brief{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,5rem)}
.brief h2{margin:0}
.brief p{margin:0 0 1.2rem;max-width:36rem;color:var(--muted)}
.brief p.big{color:var(--text);font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.3;letter-spacing:-.02em;font-weight:500}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem)}
.gal .full{grid-column:1/-1}.gal .full .thumb{aspect-ratio:16/9}
.next{display:block;text-decoration:none;color:inherit;padding:clamp(3rem,8vw,6rem) 0;border-top:1px solid var(--line)}
.next span{color:var(--muted)}
.next strong{display:block;font-weight:600;font-size:clamp(2rem,7vw,5.5rem);letter-spacing:-.05em;line-height:1;margin-top:.5rem;transition:color .3s,letter-spacing .5s var(--ease)}
.next:hover strong{color:var(--red);letter-spacing:-.02em}
@media (max-width:760px){.meta{grid-template-columns:1fr 1fr}.brief,.gal{grid-template-columns:1fr}.cover-wide .thumb,.gal .full .thumb{aspect-ratio:4/3}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Fondo con parallax vertical: "edificios" de texto que suben y bajan al hacer scroll */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bgw{position:absolute;top:0;white-space:nowrap;line-height:1;will-change:transform;user-select:none;writing-mode:vertical-rl}
.bgw.up{text-orientation:upright}
.bgw.w1{left:36vw;font:700 clamp(8rem,22vw,24rem)/.9 var(--font);letter-spacing:-.06em;color:var(--text);opacity:.03}
.bgw.w2{left:6vw;font:300 clamp(3rem,7vw,8rem)/1 var(--font);letter-spacing:.08em;color:var(--text);opacity:.038}
.bgw.w3{left:62vw;font:italic 400 clamp(6rem,15vw,17rem)/.9 'Instrument Serif',Georgia,serif;color:var(--red);opacity:.055}
.bgw.w4{left:82vw;font:800 clamp(3rem,8vw,9rem)/1 var(--font);letter-spacing:.02em;color:var(--text);opacity:.034}
.bgw.w5{left:20vw;font:300 clamp(4rem,10vw,11rem)/.9 var(--font);letter-spacing:-.04em;color:var(--text);opacity:.034}
.bgw.w6{left:92vw;font:700 clamp(2rem,4.5vw,5rem)/1 'Space Mono',ui-monospace,monospace;letter-spacing:.1em;color:var(--text);opacity:.038}
/* El encargo: banda roja a ancho completo, con datos clave */
.encargo{--bg:#E63946;--text:#0C0C0E;--muted:rgba(12,12,14,.8);--line:rgba(12,12,14,.35);--red:#0C0C0E;background:#E63946;color:var(--text)}
.facts{list-style:none;margin:clamp(2.5rem,6vw,4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.facts li{border-top:1px solid var(--line);padding-top:.9rem}
.facts b{display:block;font-weight:500;margin-bottom:.3rem}
.facts span{color:var(--muted)}
@media (max-width:760px){.facts{grid-template-columns:1fr}}

.reach{list-style:none;margin:0;padding:0}
.reach li{border-top:1px solid var(--line)}
.reach li:last-child{border-bottom:1px solid var(--line)}
.reach a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.1rem 0;text-decoration:none;transition:padding-left .4s var(--ease)}
.reach a:hover{padding-left:.75rem}
.reach b{font-weight:500;font-size:1.25rem;letter-spacing:-.02em}
.reach span{color:var(--muted)}
.wa{position:fixed;right:max(1rem,env(safe-area-inset-right,0px));bottom:max(1rem,env(safe-area-inset-bottom,0px));z-index:15;display:flex;align-items:center;gap:.6rem;background:var(--text);color:var(--bg);padding:.8rem 1.1rem;border-radius:999px;text-decoration:none;font-weight:500;box-shadow:0 6px 24px rgba(0,0,0,.35);transition:background .3s,color .3s,transform .4s var(--ease)}
.wa:hover{background:var(--red);color:#fff;transform:translateY(-3px)}
.wa svg{flex:none}
@media (max-width:520px){.wa span{display:none}.wa{padding:.9rem}}

.cover-wide .video .thumb{aspect-ratio:16/9}
.play{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:.8rem;background:rgba(12,12,14,.35);border:0;color:#fff;font:inherit;transition:background .3s}
.play:hover{background:rgba(12,12,14,.15)}
.play span{width:5rem;height:5rem;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:1.4rem;padding-left:.25rem;transition:transform .4s var(--ease)}
.play:hover span{transform:scale(1.08)}
.play i{font-style:normal;font-weight:500}
.yt{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0}


.thumb video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}