/* Portafolio de edicion (trabajos.html). Un solo modo (oscuro). Cabinet Grotesk (titulos) + Satoshi (texto), en fuentes/. */
@font-face{font-family:'Cabinet Grotesk';src:url('fuentes/CabinetGrotesk-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('fuentes/CabinetGrotesk-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('fuentes/CabinetGrotesk-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fuentes/Satoshi-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fuentes/Satoshi-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fuentes/Satoshi-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --fondo:#0b0c0e; --sup:#131518; --sup2:#1b1e22; --linea:rgba(255,255,255,.09); --linea2:rgba(255,255,255,.16);
  --texto:#eef0f2; --suave:#a4aab2; --acento:#c9f24b; --sobre-acento:#0b0c0e;
  --r:10px; --pad:clamp(16px,3.2vw,48px); --gap:clamp(12px,1.1vw,16px); --max:1440px;
  --t-tit:'Cabinet Grotesk',ui-sans-serif,system-ui,sans-serif; --t-txt:'Satoshi',ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--fondo);color:var(--texto);font:400 16px/1.5 var(--t-txt);-webkit-font-smoothing:antialiased;min-height:100dvh}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
svg.i{width:1em;height:1em;fill:currentColor;flex:none}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:4px}
.envase{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:clamp(28px,4vw,64px);align-items:center;padding-block:clamp(28px,5vw,72px) clamp(28px,4vw,48px)}
.hero.sin-reel{grid-template-columns:1fr}
.hero h1{font:800 clamp(2.4rem,4.4vw,4.2rem)/1.02 var(--t-tit);letter-spacing:-.03em;text-wrap:balance}
.total{margin-top:24px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.total strong{font:800 clamp(3.2rem,6.2vw,5.8rem)/.9 var(--t-tit);letter-spacing:-.04em;color:var(--acento);font-variant-numeric:tabular-nums}
.total span{font:700 clamp(1rem,1.4vw,1.25rem)/1.1 var(--t-tit)}
.bajada{margin-top:16px;color:var(--suave);font-size:clamp(1rem,1.15vw,1.0625rem);line-height:1.55;max-width:46ch}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px;border-radius:var(--r);font:700 15px/1 var(--t-txt);text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease),background .2s}
.btn:active{transform:scale(.97)}
.btn-prim{background:var(--acento);color:var(--sobre-acento)}
.btn-prim:hover{background:#d8fa6a}
.btn-prim .dur{font-weight:500;opacity:.7;font-variant-numeric:tabular-nums}
.btn-sec{border:1px solid var(--linea2)}
.btn-sec:hover{background:var(--sup2)}
.hero-reel{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--sup2);box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.hero-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,9,11,.55));pointer-events:none}
.reel-pie{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;display:flex;align-items:center;gap:12px;color:#fff;font:700 15px/1.2 var(--t-txt)}
.reel-pie .redondo{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--acento);color:var(--sobre-acento);font-size:19px;transition:transform .35s var(--ease)}
.hero-reel:hover .redondo{transform:scale(1.08)}
.reel-pie small{display:block;font-weight:500;opacity:.8;font-size:13px}

/* navegacion por secciones */
.filtros-barra{position:sticky;top:0;z-index:20;margin:0 calc(var(--pad) * -1);padding:12px var(--pad);background:rgba(11,12,14,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.filtros{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:28px;overscroll-behavior-x:contain}
.filtros.corre-der{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.filtros.corre-izq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.filtros.corre-izq.corre-der{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
@media (min-width:1100px){.filtros{flex-wrap:wrap;overflow:visible}.chip{height:34px;padding:0 12px;font-size:13.5px}}
.seccion,.bloque{scroll-margin-top:16px}
.filtros::-webkit-scrollbar{display:none}
.chip{flex:none;text-decoration:none;height:38px;padding:0 14px;border-radius:var(--r);border:1px solid var(--linea2);font:700 14px/1 var(--t-txt);display:inline-flex;align-items:center;transition:background .2s,color .2s}
.chip:hover{background:var(--sup2)}
.chip[aria-current="true"]{background:var(--texto);color:var(--fondo);border-color:var(--texto)}

/* secciones y bloques */
.trabajos{padding-bottom:96px}
.seccion{padding-top:clamp(40px,5vw,72px)}
.seccion + .seccion{margin-top:clamp(12px,2vw,24px);border-top:1px solid var(--linea)}
.seccion-cab{margin-bottom:clamp(20px,2vw,28px);max-width:64ch}
.seccion-cab h2{font:800 clamp(2.4rem,4.4vw,3.8rem)/1 var(--t-tit);letter-spacing:-.03em}
.seccion-cab p{margin-top:10px;color:var(--suave);font-size:clamp(1rem,1.1vw,1.0625rem)}
.bloque + .bloque{margin-top:clamp(52px,5vw,80px)}
.bloque-cab{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.bloque-cab h3{font:800 clamp(1.7rem,2.6vw,2.4rem)/1.05 var(--t-tit);letter-spacing:-.025em}
.bloque-cab p{color:var(--suave);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}

/* tamanos parejos: misma altura para todas las tarjetas (compu); en el celular verticales de a 2 y horizontales a lo ancho */
.just{--H:250px;display:flex;flex-wrap:wrap;gap:clamp(22px,2vw,30px) var(--gap);align-items:flex-start}
@media (max-width:1099px){.just{--H:220px}}
.just > .obra.v{width:calc(var(--H) * 9 / 16)}
.just > .obra.h{width:calc(var(--H) * 16 / 9)}
@media (max-width:699px){
  .just{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .just > .obra.v,.just > .obra.h{width:auto}
  .just > .obra.h{grid-column:1/-1}
}
.just > .obra.oculta{display:none}
.bloque.abierto .just > .obra.oculta{display:block}
.ver-mas{margin-top:18px;height:42px;padding:0 18px;border-radius:var(--r);border:1px solid var(--linea2);font:700 14px/1 var(--t-txt);display:inline-flex;align-items:center;gap:8px;transition:background .2s}
.ver-mas:hover{background:var(--sup2)}
.ver-mas span{color:var(--suave);font-weight:500}

/* tarjeta: toda clickeable */
.obra{min-width:0;cursor:pointer}
.obra-media{position:relative;display:block;width:100%;border-radius:var(--r);overflow:hidden;background:var(--sup2);isolation:isolate}
.obra.v .obra-media{aspect-ratio:9/16}
.obra.h .obra-media{aspect-ratio:16/9}
.obra-media img,.obra-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),opacity .35s}
.obra-media video{opacity:0}
.obra.andando .obra-media video{opacity:1}
.obra:hover .obra-media img,.obra:hover .obra-media video{transform:scale(1.035)}
.obra:not(.min) .obra-media::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(180deg,transparent,rgba(8,9,11,.45));pointer-events:none;z-index:1}
.obra-play{position:absolute;left:50%;top:50%;z-index:2;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#fff;background:rgba(10,11,13,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);transition:transform .35s var(--ease),background .25s,color .25s,opacity .25s}
.obra-play svg{margin-left:3px}
.obra:hover .obra-play,.obra-media:focus-visible .obra-play{background:var(--acento);color:var(--sobre-acento);border-color:transparent;transform:scale(1.08)}
.obra.andando .obra-play,.obra.andando .obra-dur{opacity:0}
.obra-dur{position:absolute;right:8px;bottom:8px;z-index:2;padding:4px 7px;border-radius:6px;background:rgba(10,11,13,.72);color:#fff;font:700 12px/1 var(--t-txt);font-variant-numeric:tabular-nums}
.obra-pie{padding-top:10px}
.obra-pie h3{font:700 15px/1.28 var(--t-tit);letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.obra-dato{display:flex;align-items:center;gap:6px;margin-top:5px;color:var(--suave);font-size:13.5px;font-weight:500}
.obra-dato span{color:var(--texto);font-weight:700;font-variant-numeric:tabular-nums}
.obra-dato svg{font-size:15px}
@media (max-width:699px){.obra-play{width:42px;height:42px;margin:-21px 0 0 -21px;font-size:15px}.obra-pie h3{font-size:14.5px}}

/* entrada */
@media (prefers-reduced-motion:no-preference){
  .entra{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--d,0) * 50ms)}
  .entra.visible{opacity:1;transform:none}
  .hero > *{animation:sube .9s var(--ease) both}
  .hero > *:nth-child(2){animation-delay:.12s}
  @keyframes sube{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
}

/* visor */
.visor{position:fixed;inset:0;z-index:100;display:grid;place-items:center;color:#eef0f2}
.visor-fondo{position:absolute;inset:0;background:rgba(8,9,11,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.visor-caja{position:relative;display:grid;grid-template-columns:auto 300px;gap:32px;align-items:center;max-width:calc(100vw - 180px);max-height:calc(100dvh - 48px)}
.visor-media{position:relative;border-radius:var(--r);overflow:hidden;background:#000;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.visor-media iframe,.visor-media video,.visor-media img{display:block;width:100%;height:100%;border:0;background:#000}
.visor-media img{object-fit:contain}
.visor-media.v{height:min(84dvh,800px);aspect-ratio:9/16}
.visor-media.h{width:min(calc(100vw - 180px - 332px),1060px,calc(80dvh * 16 / 9));aspect-ratio:16/9}
.visor-media.ig iframe{position:absolute;max-width:none}
.v-tit{font:800 clamp(1.25rem,1.7vw,1.6rem)/1.15 var(--t-tit);letter-spacing:-.015em;text-wrap:balance}
.v-cifras{display:flex;gap:26px;margin-top:16px}
.v-cifras strong{display:block;font:800 26px/1 var(--t-tit);font-variant-numeric:tabular-nums}
.v-cifras span{display:block;margin-top:6px;color:#a4aab2;font-size:13px;font-weight:500}
.v-acciones{margin-top:22px}
.v-pub{display:block;margin-top:22px;max-width:300px;border-radius:var(--r);overflow:hidden;background:#1b1e22;text-decoration:none;border:1px solid rgba(255,255,255,.1);transition:border-color .2s}
.v-pub:hover{border-color:var(--acento)}
.v-pub img{width:100%;aspect-ratio:16/9;object-fit:cover}
.v-pub span{display:flex;align-items:center;gap:8px;padding:11px 13px;font:700 14px/1.25 var(--t-txt)}
.v-pub span svg:first-child{color:#ff4b4b;font-size:17px}
.v-nota{margin-top:12px;color:#a4aab2;font-size:13px}
.v-link{color:#eef0f2;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.v-btn{position:absolute;z-index:3;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;transition:background .2s,transform .2s var(--ease)}
.v-btn:hover{background:rgba(255,255,255,.18)}
.v-btn:active{transform:scale(.94)}
.v-cerrar{top:20px;right:20px}
.v-ant{left:24px;top:50%;margin-top:-24px}
.v-sig{right:24px;top:50%;margin-top:-24px}
.v-cargando{position:absolute;inset:0;display:grid;place-items:center;color:#a4aab2;font-size:14px;background:#0b0c0e;pointer-events:none;transition:opacity .3s}
.v-cargando.listo{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .visor:not([hidden]) .visor-caja{animation:abre .45s var(--ease) both}
  .visor:not([hidden]) .visor-fondo{animation:funde .3s ease both}
  @keyframes abre{from{opacity:0;transform:scale(.97) translateY(10px)}to{opacity:1;transform:none}}
  @keyframes funde{from{opacity:0}to{opacity:1}}
}
@media (max-width:899px){
  .hero{grid-template-columns:1fr}
  .visor{place-items:stretch}
  .visor-fondo{background:#0b0c0e}
  .visor-caja{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:0;max-width:none;max-height:none;height:100dvh;overflow-y:auto;align-items:start;padding-top:60px}
  .visor-media{border-radius:0;box-shadow:none;margin:0 auto}
  .visor-media.v{height:min(calc(100dvh - 250px),calc(100vw * 16 / 9));width:auto}
  .visor-media.h{width:100vw}
  .visor-info{padding:18px 20px 40px}
  .v-btn{position:fixed;top:6px;width:46px;height:46px}
  .v-cerrar{right:10px}
  .v-ant{left:10px;margin:0}
  .v-sig{left:64px;right:auto;margin:0}
}
@media (max-width:639px){.acciones .btn{flex:1 1 auto;justify-content:center}}
.obra-handle{margin-top:3px;color:var(--suave);font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-handle{margin-top:18px;color:#a4aab2;font:500 14px/1.2 var(--t-txt)}
.v-handle + .v-pub,.v-handle + .v-acciones{margin-top:10px}
.total-trabajos{margin-top:10px;font:800 clamp(1.25rem,1.9vw,1.7rem)/1.1 var(--t-tit);letter-spacing:-.015em}
.fila-dest .sub{font:800 clamp(1.7rem,2.6vw,2.4rem)/1.05 var(--t-tit);letter-spacing:-.025em;color:var(--texto);margin-bottom:20px}
.fila-dest + .fila-dest{margin-top:clamp(44px,5vw,72px)}