/* Heavy Upgrade · Portafolio */
.pf-hero{padding-top:calc(clamp(110px,12vw,140px) + env(safe-area-inset-top,0px));padding-bottom:clamp(20px,3vw,32px)}
.pf-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 48px}
.pf-top h1{font-size:clamp(2.8rem,7vw,6rem);font-weight:800;letter-spacing:-.045em;line-height:.92;margin-top:16px}
.pf-top h1 em{font-style:normal;color:var(--green)}
.pf-top p{max-width:28em;color:var(--soft)}

/* Filtros: texto con contador, la categoría activa lleva subrayado verde */
.filters{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));z-index:30;margin-top:clamp(28px,4vw,44px);border-block:1px solid var(--line);background:rgba(19,22,28,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.filters .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.filters .wrap::-webkit-scrollbar{display:none}
.filters button{appearance:none;border:0;background:none;color:var(--muted);cursor:pointer;position:relative;flex:none;padding:18px 14px;font:600 15px/1 var(--body);display:inline-flex;align-items:baseline;gap:7px;transition:color .25s}
.filters button sup{font:500 11px/1 "JetBrains Mono",monospace;color:var(--muted);top:0}
.filters button:hover{color:var(--fg)}
.filters button[aria-pressed="true"]{color:var(--fg)}
.filters button[aria-pressed="true"] sup{color:var(--green)}
.filters button::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--green);transform:scaleX(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.filters button[aria-pressed="true"]::after{transform:scaleX(1)}
.filters button:first-child{padding-left:0}.filters button:first-child::after{left:0}

/* Rejilla de trabajos */
.works-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(92px,9.5vw,128px);gap:16px;padding-block:clamp(24px,3vw,36px) clamp(56px,7vw,96px)}
.w{position:relative;grid-column:span 4;grid-row:span 3;border-radius:var(--r-md);overflow:hidden;background:#0b0d11;border:1px solid var(--line);cursor:pointer;display:block;text-align:left;padding:0;color:inherit;font:inherit;isolation:isolate;transition:opacity .45s,transform .45s cubic-bezier(.16,1,.3,1),border-color .3s}
.w:hover{border-color:rgba(11,211,126,.5)}
.w.hide{display:none}
.c8{grid-column:span 8}.c6{grid-column:span 6}.c4{grid-column:span 4}.c3{grid-column:span 3}
.r3{grid-row:span 3}.r4{grid-row:span 4}
.works-grid.filtered .w{grid-column:span 4;grid-row:span 4}
.w-media{position:absolute;inset:0}
.w-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.w:hover .w-media img{transform:scale(1.045)}
.w::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,12,16,.92));z-index:1;pointer-events:none}
.w-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.w-cap small{display:block;font:600 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.w-cap b{display:block;font:700 clamp(1.05rem,1.5vw,1.3rem)/1.2 var(--display);letter-spacing:-.015em;text-wrap:balance}
.w-cap span{display:block;margin-top:5px;font-size:13px;color:var(--soft)}
.w-cap i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-hi);color:var(--fg);transition:background .25s,color .25s,border-color .25s,transform .45s cubic-bezier(.16,1,.3,1)}
.w-cap i svg{width:16px;height:16px}
.w:hover .w-cap i{background:var(--green);color:var(--ink);border-color:var(--green);transform:rotate(-45deg)}
.w:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* Variantes de formato según el servicio */
.w-web .w-media{inset:16px 16px auto;height:calc(100% - 92px);border-radius:12px;overflow:hidden;border:1px solid var(--line-hi);background:#0d1015}
.w-web .w-media::before{content:"";display:block;height:24px;background:#11151b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='8'%3E%3Ccircle cx='4' cy='4' r='3.5' fill='%232a303a'/%3E%3Ccircle cx='17' cy='4' r='3.5' fill='%232a303a'/%3E%3Ccircle cx='30' cy='4' r='3.5' fill='%232a303a'/%3E%3C/svg%3E") 10px 8px no-repeat;border-bottom:1px solid var(--line)}
.w-web .w-media img{height:calc(100% - 24px)}
.w-web{background:radial-gradient(120% 90% at 50% 0%,#153a2c,#0b0d11 70%)}
.w-reel .w-media{left:50%;top:16px;bottom:96px;right:auto;width:auto;max-width:calc(100% - 32px);aspect-ratio:9/16;transform:translateX(-50%);border-radius:22px;overflow:hidden;border:1px solid var(--line-hi);box-shadow:0 30px 60px -24px rgba(0,0,0,.9)}
.w-reel .w-media::before{content:"";position:absolute;left:10px;right:10px;top:9px;height:3px;border-radius:3px;background:linear-gradient(90deg,#fff 0 33%,rgba(255,255,255,.35) 33%);z-index:1}
.w-reel{background:radial-gradient(120% 90% at 50% 0%,#12383a,#0b0d11 70%)}
.w-reel .w-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.45);transform:scale(1.2)}
.w-360 .w-media img{width:auto;max-width:none;height:100%;animation:panw 40s linear infinite}
@keyframes panw{from{transform:translateX(0)}to{transform:translateX(calc(-100% + 100cqw))}}
.w-360{container-type:inline-size}
.w-360 .w-tag,.w-av .w-tag{position:absolute;left:16px;top:16px;z-index:2;font:500 11px/1 "JetBrains Mono",monospace;letter-spacing:.08em;color:#fff;background:rgba(10,12,16,.72);padding:7px 10px;border-radius:6px;display:inline-flex;align-items:center;gap:8px}
.w-av .w-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff3b3b}
.w-av .w-play{position:absolute;left:50%;top:42%;z-index:2;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;display:grid;place-items:center;background:rgba(10,12,16,.55);border:1px solid rgba(255,255,255,.4);transition:transform .45s cubic-bezier(.16,1,.3,1),background .3s}
.w-av .w-play svg{width:22px;height:22px;margin-left:3px}
.w-av:hover .w-play{transform:scale(1.1);background:var(--green);color:var(--ink);border-color:var(--green)}
@media (max-width:960px){.w.c6,.w.c4,.w.c3,.works-grid.filtered .w{grid-column:span 6;grid-row:span 4}.w.c8{grid-column:span 12;grid-row:span 4}}
@media (max-width:600px){.works-grid{grid-template-columns:1fr;grid-auto-rows:auto}.works-grid .w,.works-grid.filtered .w{grid-column:auto;grid-row:auto;aspect-ratio:4/5}.works-grid .w.c8,.works-grid .w.c6{aspect-ratio:4/3}.works-grid .w-reel{aspect-ratio:3/4}}

.pf-note{font-size:13px;color:var(--muted);padding-bottom:clamp(40px,5vw,64px)}

/* Caso abierto: panel a pantalla completa */
.case{position:fixed;inset:0;z-index:200;overflow-y:auto;overscroll-behavior:contain;background:var(--ink);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.case.open{opacity:1;visibility:visible;transition:opacity .35s}
body.case-on{overflow:hidden}
.case-bar{position:sticky;top:0;z-index:5;height:calc(64px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:clamp(16px,4vw,40px);background:rgba(10,12,16,.75);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.case-bar .crumb{font:500 13px/1.3 var(--body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.case-bar .crumb b{color:var(--fg);font-weight:600}
.case-ctrl{display:flex;gap:8px;flex:none}
.case-ctrl button{appearance:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-hi);background:rgba(255,255,255,.05);color:var(--fg);display:grid;place-items:center;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.case-ctrl button:hover{background:var(--green);border-color:var(--green);color:var(--ink)}
.case-ctrl svg{width:18px;height:18px}
.case-cover{position:relative;height:min(72svh,720px);min-height:360px;overflow:hidden;background:#0b0d11}
.case-cover img{width:100%;height:100%;object-fit:cover;animation:push 14s cubic-bezier(.2,.6,.2,1) forwards}
.case-cover canvas,.case-cover .flat{position:absolute;inset:0;width:100%;height:100%}
.case-cover.is360{cursor:grab;touch-action:pan-y}
.case-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(19,22,28,1));pointer-events:none}
.case-cover .drag-hint{z-index:2}
.case-cover.used .drag-hint{opacity:0}
.case-head{position:relative;margin-top:-120px;z-index:2}
.case-head small{font:600 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.case-head h2{font-size:clamp(2.3rem,5.6vw,4.6rem);font-weight:800;letter-spacing:-.04em;line-height:.98;margin-top:14px;max-width:18ch}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(28px,4vw,40px);border-block:1px solid var(--line)}
.facts div{padding:18px 20px 18px 0}
.facts dt{font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:8px 0 0;font:600 15px/1.35 var(--body)}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.case-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);padding-block:clamp(40px,6vw,72px)}
.case-body h3{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.case-body p{color:var(--soft);max-width:52ch}
.case-body ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.case-body li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--soft)}
.case-body li svg{width:18px;height:18px;color:var(--green);margin-top:3px}
@media (max-width:860px){.case-body{grid-template-columns:1fr}}
.case-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.case-gal figure{margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:#0b0d11}
.case-gal figure:first-child{grid-column:span 2;aspect-ratio:auto}
.case-gal img{width:100%;height:100%;object-fit:cover}
@media (max-width:600px){.case-gal{grid-template-columns:1fr 1fr}.case-gal figure:first-child{grid-column:span 2;aspect-ratio:16/10}}
.case-end{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-block:clamp(40px,6vw,72px);margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line)}
.case-end h3{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.03em;max-width:18ch}
.case-next{display:flex;align-items:center;gap:16px;padding:12px 12px 12px 0;cursor:pointer;background:none;border:0;color:var(--fg);text-align:left;font:inherit}
.case-next small{display:block;font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.case-next b{font:700 1.1rem/1.2 var(--display)}
.case-next img{width:96px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.case-next:hover b{color:var(--green)}
.ref-note{font-size:12px;color:var(--muted);margin-top:10px}
@media (prefers-reduced-motion:reduce){.w-360 .w-media img,.case-cover img{animation:none}}
.others:has(> a:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:960px){.others:has(> a:nth-child(4)){grid-template-columns:1fr 1fr}}@media (max-width:600px){.others:has(> a:nth-child(4)){grid-template-columns:1fr}}

/* ===== Celulares: tamaños más contenidos ===== */
@media (max-width:600px){
  .pf-hero{padding-top:100px}
  .pf-top h1{font-size:2.4rem}
  .pf-top p{font-size:.95rem}
  .filters{margin-top:22px}
  .filters button{padding:14px 10px;font-size:14px}
  .works-grid{gap:12px;padding-block:18px 40px}
  .works-grid .w,.works-grid.filtered .w{aspect-ratio:4/3}
  .works-grid .w-reel{aspect-ratio:4/3}
  .w-reel .w-media{bottom:84px}
  .w-cap{padding:14px 16px}
  .w-cap b{font-size:1rem}
  .w-cap i{width:34px;height:34px}
  .w-av .w-play{width:48px;height:48px;margin:-24px 0 0 -24px}
  .case-cover{height:300px;min-height:0}
  .case-head{margin-top:-70px}
  .case-head h2{font-size:1.9rem}
  .facts dd{font-size:14px}
  .case-body{padding-block:32px;gap:28px}
  .case-body h3{font-size:1.15rem}
  .case-body p,.case-body li{font-size:.93rem}
  .case-end h3{font-size:1.4rem}
}