@font-face{font-family:"Bricolage";src:url(bricolage.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
:root{
  --campo:#100f12; --campo-2:#17161a; --campo-3:#1f1d23; --tinta:#ede9e2; --gris:#a19ca6; --linea:rgba(237,233,226,.12);
  --acento:#ff4d36;
  --ez:cubic-bezier(.16,1,.3,1); --t-rapido:180ms; --t-medio:420ms; --t-lento:900ms;
  --borde:clamp(20px,4vw,56px); --cab:68px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--campo);scroll-padding-top:var(--cab)}
body{font-family:"Bricolage",system-ui,sans-serif;font-optical-sizing:auto;color:var(--tinta);background:var(--campo);line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,canvas{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.env{max-width:1440px;margin:0 auto;padding-left:var(--borde);padding-right:var(--borde)}
.tit{font-weight:780;font-stretch:78%;font-size:clamp(44px,7vw,104px);line-height:.92;letter-spacing:-.02em}
.sec{padding-top:clamp(96px,13vw,176px)}
.sec-cab{margin-bottom:clamp(36px,5vw,64px)}
.sec-cab p{color:var(--gris);font-size:clamp(17px,1.4vw,20px);max-width:52ch;margin-top:16px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* cabecera */
.cab{position:fixed;inset:0 0 auto 0;z-index:30;height:var(--cab);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--borde);transition:background var(--t-medio) var(--ez),border-color var(--t-medio);border-bottom:1px solid transparent}
.cab.solida{background:rgba(16,15,18,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--linea)}
.marca{display:flex;align-items:center;height:44px;color:var(--tinta)}
.marca svg{height:34px;width:auto}
.nav{display:flex;gap:28px;font-size:15px;font-weight:500;margin-left:auto}
.nav a{position:relative;opacity:.82;transition:opacity var(--t-rapido);padding:10px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-medio) var(--ez)}
.nav a:hover,.nav a[aria-current]{opacity:1}.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav .nav-cv{opacity:1;color:var(--acento)}
.idioma{display:flex;font-size:13px;font-weight:650;letter-spacing:.04em}
.idioma a{padding:12px 6px;opacity:.55}.idioma a[aria-current]{opacity:1;color:var(--acento)}

/* portada */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:#000}
.hero-fondo{position:absolute;inset:0;z-index:-1}
.hero-fondo video,.hero-fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero-fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 46%,rgba(16,15,18,.9) 86%,var(--campo) 100%)}
.hero-txt{width:100%;padding-bottom:clamp(40px,8vh,88px)}
.firma{width:clamp(150px,17vw,250px);color:var(--tinta);margin-bottom:clamp(8px,1.5vw,18px);opacity:.92}
.firma svg{width:100%;height:auto;overflow:visible}
.nombre{font-weight:800;font-stretch:75%;font-size:clamp(64px,13vw,196px);line-height:.84;letter-spacing:-.025em;text-transform:uppercase}
.nombre span{display:block;overflow:hidden;padding-bottom:.04em}
.nombre span i{display:block;font-style:normal;transform:translateY(105%);animation:subir 1.1s var(--ez) .25s forwards}
.nombre span:nth-child(2) i{animation-delay:.37s}
@keyframes subir{to{transform:none}}
.hero-pie{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:22px;opacity:0;animation:aparecer .9s var(--ez) .75s forwards}
@keyframes aparecer{to{opacity:1}}
.hero-pie p{max-width:34ch;font-size:clamp(17px,1.5vw,21px);color:#d8d3cc}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 24px;font-weight:650;font-size:16px;white-space:nowrap;transition:transform var(--t-rapido) var(--ez),background var(--t-rapido),border-color var(--t-rapido)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-1{background:var(--tinta);color:var(--campo)}
.btn-1:hover{background:#fff}
.btn-2{border:1px solid rgba(237,233,226,.4)}
.btn-2:hover{border-color:var(--tinta)}
.btn svg{width:18px;height:18px;flex:none}

/* tarjetas de proyecto */
.destacados{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(16px,2vw,28px);align-items:start}
.destacados .pj:nth-child(2){margin-top:clamp(40px,8vw,120px)}
.pj{position:relative;display:block}
.pj-media{position:relative;overflow:hidden;background:var(--campo-2);aspect-ratio:16/10}
.pj-media img,.pj-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ez),opacity var(--t-medio) var(--ez)}
.pj-media video{opacity:0}
.pj.vivo .pj-media video{opacity:1}
.pj:hover .pj-media img,.pj:hover .pj-media video{transform:scale(1.035)}
.pj-txt{padding-top:16px}
.pj-tipo{font-size:13px;font-weight:600;color:var(--gris)}
.pj h3{font-weight:720;font-stretch:85%;font-size:clamp(22px,2.1vw,30px);line-height:1.1;margin-top:4px}
.pj-grande h3{font-size:clamp(28px,3.2vw,46px)}
.pj-roles{color:var(--gris);font-size:15px;margin-top:6px;max-width:46ch}
.pj-premio{display:block;margin-top:12px;font-size:14px;font-weight:600;color:var(--acento)}
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,4vw,56px) clamp(16px,2vw,28px);margin-top:clamp(72px,9vw,120px)}

/* rough -> final (momento estrella) */
.rough{position:relative;height:260vh;margin-top:clamp(96px,13vw,176px)}
.rough-pin{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,32px);padding:calc(var(--cab) + 12px) 0 24px}
.rough-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px}
.rough-cab .tit{font-size:clamp(38px,5.4vw,80px)}
.rough-cab p{color:var(--gris);max-width:40ch}
.rough-lienzo{position:relative;width:min(100%,calc((100dvh - 290px) * 16 / 9));margin:0 auto;aspect-ratio:16/9;background:#7a7a7a}
.rough-lienzo canvas{width:100%;height:100%}
.rough-etq{position:absolute;left:16px;bottom:16px;display:flex;gap:8px}
.rough-etq button{height:30px;padding:0 12px;display:flex;align-items:center;font-size:13px;font-weight:650;background:rgba(16,15,18,.78);color:var(--gris);transition:color var(--t-medio),background var(--t-medio)}
.rough-etq button.on{color:var(--campo);background:var(--tinta)}
.rough-barra{height:2px;background:var(--linea);width:min(100%,calc((100dvh - 290px) * 16 / 9));margin:0 auto}
.rough-barra i{display:block;height:100%;background:var(--acento);transform-origin:left;transform:scaleX(var(--p,0))}

/* reels */
.reels{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.reels .env{display:grid;grid-template-columns:repeat(4,1fr)}
.reel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:30px 22px;min-height:44px;font-weight:650;font-stretch:88%;font-size:clamp(18px,1.7vw,24px);border-left:1px solid var(--linea);text-align:left;transition:background var(--t-medio) var(--ez)}
.reel:last-child{border-right:1px solid var(--linea)}
.reel svg{flex:none;width:22px;height:22px;transition:transform var(--t-medio) var(--ez)}
.reel:hover{background:var(--campo-2)}.reel:hover svg{transform:scale(1.15)}

/* galerias */
.galeria{display:grid;gap:clamp(12px,1.6vw,20px)}
.galeria>*{position:relative;display:block;overflow:hidden;background:var(--campo-2)}
.galeria button{cursor:zoom-in}
.galeria img,.galeria video{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ez)}
.galeria button:hover img{transform:scale(1.035)}
.galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;font-size:13px;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.story{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(110px,11vw,170px)}
.story>:nth-child(1){grid-column:1/4;grid-row:span 3}.story>:nth-child(2){grid-column:4/7;grid-row:span 3}
.story>:nth-child(3){grid-column:1/3;grid-row:span 4}.story>:nth-child(4){grid-column:3/5;grid-row:span 4}
.story>:nth-child(5){grid-column:5/7;grid-row:span 2}.story>:nth-child(6){grid-column:5/7;grid-row:span 2}
.story>:nth-child(7){grid-column:1/4;grid-row:span 2}.story>:nth-child(8){grid-column:4/7;grid-row:span 2}
.story>:nth-child(3) img,.story>:nth-child(4) img{object-position:top}
.pers{grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(90px,9vw,140px)}
.pers>:nth-child(1){grid-column:1/8;grid-row:span 4}.pers>:nth-child(2){grid-column:8/13;grid-row:span 3}
.pers>:nth-child(3){grid-column:8/13;grid-row:span 3}.pers>:nth-child(4){grid-column:1/5;grid-row:span 2}
.pers>:nth-child(5){grid-column:5/8;grid-row:span 2}.pers>:nth-child(6){grid-column:1/8;grid-row:span 2}
.pers>:nth-child(7){grid-column:8/13;grid-row:span 2}.pers>:nth-child(8){grid-column:1/13;grid-row:span 3}
.pers>:nth-child(2),.pers>:nth-child(6),.pers>:nth-child(7){background:#fff}
.pers>:nth-child(2) img,.pers>:nth-child(6) img,.pers>:nth-child(7) img{object-fit:contain}
.pers>:nth-child(3) img{object-position:center 20%}
.ilus{grid-template-columns:5fr 7fr}
.ilus>:nth-child(1){grid-row:span 2}.ilus>:nth-child(1) img{aspect-ratio:983/1390}
.ilus>:nth-child(2) img{aspect-ratio:16/10;object-position:center 25%}
.ilus>:nth-child(3) img{aspect-ratio:16/9}
.ilus>:nth-child(4){grid-column:1/-1}.ilus>:nth-child(4) img{aspect-ratio:21/9;object-position:center 40%}

/* sobre mi */
.yo{display:grid;grid-template-columns:4fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.yo-foto{overflow:hidden;aspect-ratio:4/5}
.yo-foto img{height:100%;object-fit:cover}
.lead{font-size:clamp(22px,2.3vw,32px);line-height:1.3;font-weight:500;font-stretch:92%;max-width:30ch;margin-top:28px}
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;padding-top:28px;border-top:1px solid var(--linea)}
.datos h3{font-size:14px;font-weight:650;color:var(--gris);margin-bottom:10px}
.datos li{list-style:none;font-size:16px;line-height:1.7}
.datos li span{color:var(--gris);display:block;font-size:14px;line-height:1.35;margin-bottom:8px}

/* pagina de proyecto */
.pp-cab{padding-top:calc(var(--cab) + clamp(48px,7vw,96px))}
.pp-tipo{color:var(--gris);font-weight:600}
.pp-cab .tit{margin-top:10px;max-width:16ch}
.pp-video{margin-top:clamp(32px,4vw,56px);background:#000}
.pp-video video{max-height:82vh;aspect-ratio:16/9;object-fit:contain}
.pp-ficha{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid var(--linea)}
.pp-ficha h2{font-size:14px;font-weight:650;color:var(--gris);margin-bottom:10px}
.pp-ficha p,.pp-ficha li{font-size:clamp(18px,1.6vw,22px);line-height:1.45;list-style:none}
.pp-ficha li+li{margin-top:8px}
.pp-ficha .ctas{margin-top:28px}
.pp-galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(56px,7vw,96px)}
.pp-galeria>:only-child{grid-column:1/-1}
.pp-galeria button{display:block;overflow:hidden;background:var(--campo-2);cursor:zoom-in}
.pp-galeria img{transition:transform 1.1s var(--ez)}.pp-galeria button:hover img{transform:scale(1.03)}
.pp-nav{display:flex;justify-content:space-between;gap:24px;margin-top:clamp(80px,10vw,140px);padding-top:28px;border-top:1px solid var(--linea)}
.pp-nav a{display:flex;flex-direction:column;gap:4px;min-height:44px}
.pp-nav small{color:var(--gris);font-size:14px;font-weight:600}
.pp-nav strong{font-weight:720;font-stretch:85%;font-size:clamp(22px,2.4vw,34px);line-height:1.1;transition:color var(--t-rapido)}
.pp-nav a:hover strong{color:var(--acento)}
.pp-nav a:last-child{text-align:right}
.pp-secuencia{margin-top:clamp(56px,7vw,96px)}

/* pagina para estudios */
.cv-reels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px)}
.cv-reels figure{background:#000}
.cv-reels figcaption{padding:12px 0 0;font-weight:650;font-stretch:88%;font-size:20px;background:var(--campo)}

/* pie */
.pie{margin-top:clamp(120px,15vw,200px);padding:clamp(56px,7vw,96px) 0 40px;background:var(--campo-2)}
.pie .tit{font-size:clamp(28px,5.4vw,80px);overflow-wrap:anywhere}
.pie .tit a{display:inline-block;border-bottom:3px solid var(--acento);padding-bottom:4px;transition:color var(--t-rapido)}
.pie .tit a:hover{color:#fff}
.pie-fila{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;margin-top:56px;color:var(--gris);font-size:15px}
.pie-fila nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.pie-fila a{display:inline-flex;align-items:center;min-height:44px}
.pie-fila a:hover{color:var(--tinta)}

/* visores */
dialog{margin:auto;max-width:94vw;max-height:94vh;background:transparent;border:0;color:var(--tinta);overflow:visible}
dialog::backdrop{background:rgba(8,8,10,.94)}
dialog[open]{animation:aparecer var(--t-medio) var(--ez)}
.visor-img{max-width:94vw;max-height:84vh;width:auto;object-fit:contain;margin:0 auto}
.visor-vid{width:min(94vw,calc(84vh * 16 / 9));max-height:84vh;background:#000}
.visor-pie{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;color:var(--gris);font-size:14px}
.visor-pie button{min-height:44px;padding:0 6px;font-weight:650;color:var(--tinta)}
.visor-pie div{display:flex;gap:10px}

/* revelado: lo oculta el JS, nunca el CSS solo */
.js .rev{opacity:0;transform:translateY(28px);transition:opacity var(--t-lento) var(--ez),transform var(--t-lento) var(--ez)}
.js .rev.ok{opacity:1;transform:none}

@media (hover:hover) and (pointer:fine){.pj:hover h3{color:#fff}}
@media (max-width:1000px){
  .nav a:not(.nav-cv){display:none}
  .rejilla{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .destacados{grid-template-columns:1fr}.destacados .pj:nth-child(2){margin-top:0}
  .reels .env{grid-template-columns:1fr 1fr;padding:0}
  .reel{border-left:0;border-bottom:1px solid var(--linea);padding:22px var(--borde)}
  .reel:nth-child(odd){border-right:1px solid var(--linea)}.reel:last-child{border-right:0}
  .story,.pers{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .story>*,.pers>*{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3}
  .story>:nth-child(3),.story>:nth-child(4){aspect-ratio:3/4}
  .pers>:nth-child(1),.pers>:nth-child(6),.pers>:nth-child(8){grid-column:1/-1!important;aspect-ratio:16/9}
  .ilus{grid-template-columns:1fr}.ilus>:nth-child(1){grid-row:auto}.ilus>:nth-child(4) img{aspect-ratio:16/9}
  .yo{grid-template-columns:1fr}.yo-foto{max-width:420px}
  .datos{grid-template-columns:1fr 1fr}
  .pp-ficha,.cv-reels{grid-template-columns:1fr}
  .rough{height:220vh}
  .rough-lienzo,.rough-barra{width:100%}
}
@media (max-width:560px){
  .hero-pie{flex-direction:column;align-items:flex-start}
  .ctas{width:100%}.ctas .btn{flex:1;padding:0 14px}
  .rejilla{grid-template-columns:1fr}
  .reels .env{grid-template-columns:1fr}.reel:nth-child(odd){border-right:0}
  .datos{grid-template-columns:1fr}
  .pie .tit{font-size:21px}
  .pp-galeria{grid-template-columns:1fr}
  .pp-nav{flex-direction:column}.pp-nav a:last-child{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
  .js .rev{opacity:1;transform:none}
  .rough{height:auto}.rough-pin{position:static;height:auto}
}