:root {
  --bg: #000;
  --fg: #fff;
  --mute: rgba(255, 255, 255, .55);
  --line: rgba(255, 255, 255, .16);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Helvetica Neue", "Neue Haas Grotesk Text Pro", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
body.lock { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video { display: block; }
::selection { background: var(--fg); color: var(--bg); }

/* ---------- grain ---------- */
.grain { position: fixed; inset: -10%; z-index: 50; pointer-events: none; opacity: .11;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ---------- brand + centered mini menu (like the reference) ---------- */
.brand { position: fixed; z-index: 40; top: 18px; left: 22px; font-size: 11px; mix-blend-mode: difference; color: #fff; }
.nav { position: fixed; z-index: 40; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 1.4rem; align-items: center; white-space: nowrap; font-size: 11px; letter-spacing: .02em; color: #fff; padding: 9px 18px; border-radius: 99px; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav a, .nav button { position: relative; padding: 4px 0; }
.nav a::after, .nav button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover::after, .nav button:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- split screen: 3 panels sliding to the left ---------- */
:root { --cols: 3; }
#split { position: fixed; inset: 0; z-index: 1; overflow: hidden; }
.track { position: absolute; top: 0; left: 0; height: 100%; display: flex; }
.cell { position: relative; flex: 0 0 calc(100vw / var(--cols)); height: 100vh; height: 100dvh; overflow: hidden; cursor: pointer; background: #0b0b0b; border-right: 1px solid rgba(255,255,255,.1); background-size: cover; background-position: center; }
.cell .m { position: absolute; top: 0; left: -6%; width: 112%; height: 100%; object-fit: cover; }
.cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 30%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.cell:hover::after { opacity: 1; }
.cell .cap { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 64px; display: flex; justify-content: space-between; font-size: 12px; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease); pointer-events: none; }
.cell:hover .cap { opacity: 1; transform: none; }
.cell .cap span:last-child { opacity: .7; }
#spacer { position: relative; z-index: 0; width: 1px; pointer-events: none; }

.hud { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 11px; mix-blend-mode: difference; color: #fff; pointer-events: none; }
.hud .scroll i { font-style: normal; display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.hud .prog { flex: 1; max-width: 220px; height: 1px; background: rgba(255,255,255,.3); position: relative; }
.hud .prog b { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }

/* ---------- panels (services / contact) ---------- */
.panel { position: fixed; inset: 0; z-index: 45; background: #050505; overflow-y: auto; overscroll-behavior: contain; clip-path: inset(100% 0 0 0); visibility: hidden; transition: clip-path .9s var(--ease), visibility 0s .9s; }
.panel.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .9s var(--ease), visibility 0s; }
.panel .x { position: fixed; z-index: 3; top: 18px; right: 22px; font-size: 11px; mix-blend-mode: difference; color: #fff; }
.panel-in { padding: 78px 22px 40px; max-width: 1500px; margin: 0 auto; }
.p-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 7vh; }
.p-head h2, .lead { font-weight: 400; letter-spacing: -.06em; line-height: .88; }
.p-head h2 { font-size: clamp(56px, 11vw, 200px); }
.p-head > span { font-size: 11px; color: var(--mute); }

/* services rows */
.svc { display: grid; grid-template-columns: 5fr 7fr; column-gap: 4vw; align-items: center; padding: 8vh 0; border-top: 1px solid var(--line); }
.svc:nth-child(even) { grid-template-columns: 7fr 5fr; }
.svc:nth-child(even) .svc-txt { order: 2; }
.svc .n { font-size: 11px; color: var(--mute); }
.svc h3 { font-weight: 400; font-size: clamp(30px, 3.8vw, 64px); letter-spacing: -.06em; line-height: .92; margin: 10px 0 22px; }
.svc p { font-size: 14px; line-height: 1.55; max-width: 40ch; color: rgba(255,255,255,.78); }
.svc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.svc li { font-size: 11px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 99px; }
.svc-mock { background: #101010; min-height: clamp(360px, 62vh, 640px); display: grid; place-items: center; overflow: hidden; border-radius: 4px; padding: 4vh 2vw; }
.mk { display: flex; align-items: center; justify-content: center; gap: 2.4vw; width: 100%; }

/* contact */
.lead { font-size: clamp(38px, 8vw, 150px); margin: 4vh 0 9vh; }
.line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.line > span { display: block; transform: translateY(112%); transition: transform 1.3s var(--ease); }
.panel.open .line > span { transform: none; }
.panel.open .line:nth-child(2) > span { transition-delay: .12s; }
.c-grid { display: grid; grid-template-columns: 5fr 6fr; column-gap: 5vw; align-items: start; }
.about { display: grid; gap: 16px; font-size: 14px; line-height: 1.55; max-width: 44ch; color: rgba(255,255,255,.85); margin-bottom: 40px; }
.mail { display: inline-block; font-size: clamp(22px, 2.6vw, 42px); letter-spacing: -.045em; border-bottom: 2px solid currentColor; line-height: 1.1; transition: opacity .3s; }
.mail:hover { opacity: .5; }
.links { display: flex; gap: 1.4rem; font-size: 12px; margin-top: 26px; }
.links a { border-bottom: 1px solid var(--line); transition: border-color .3s; } .links a:hover { border-color: #fff; }
form { display: grid; }
.hp { position: absolute; left: -9999px; }
.f { position: relative; border-bottom: 1px solid var(--line); padding: 22px 0 8px; transition: border-color .4s; }
.f:focus-within { border-color: #fff; }
.f label { position: absolute; left: 0; top: 24px; font-size: 12px; color: var(--mute); pointer-events: none; transition: transform .5s var(--ease); transform-origin: left; }
.f:focus-within label, .f.has label { transform: translateY(-20px) scale(.85); }
.f input, .f textarea { width: 100%; background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: 18px; padding: 4px 0; resize: none; }
.send { margin-top: 30px; justify-self: start; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; padding: 14px 26px; border: 1px solid #fff; border-radius: 99px; position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--ease); }
.send::before { content: ""; position: absolute; inset: 0; background: #fff; transform: translateY(101%); transition: transform .6s var(--ease); z-index: -1; border-radius: inherit; }
.send:hover { color: #000; } .send:hover::before { transform: none; }
.send[disabled] { opacity: .5; pointer-events: none; }
.status { font-size: 12px; min-height: 1.2em; margin-top: 14px; color: rgba(255,255,255,.85); }
.panel footer { display: flex; justify-content: space-between; font-size: 11px; color: var(--mute); margin-top: 14vh; }

/* ---------- detail ---------- */
#detail { position: fixed; inset: 0; z-index: 60; background: #000; display: grid; grid-template-columns: 1fr 340px; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
#detail.open { opacity: 1; visibility: visible; }
.d-stage { position: relative; overflow: hidden; }
.d-stage > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.d-info { padding: 84px 26px 26px; display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; border-left: 1px solid var(--line); }
.d-info h2 { font-weight: 400; font-size: clamp(32px, 3.4vw, 56px); letter-spacing: -.05em; line-height: .95; }
.d-info p { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.75); }
.d-info dl { display: grid; grid-template-columns: 70px 1fr; gap: 6px 0; font-size: 11px; border-top: 1px solid var(--line); padding-top: 12px; }
.d-info dt { color: var(--mute); }
#detail .ctl { position: absolute; z-index: 2; top: 18px; right: 22px; display: flex; gap: 18px; font-size: 11px; }
.d-info > * { transform: translateY(20px); opacity: 0; transition: transform .9s var(--ease), opacity .9s var(--ease); }
#detail.open .d-info > * { transform: none; opacity: 1; }
#detail.open .d-info > *:nth-child(2) { transition-delay: .08s; } #detail.open .d-info > *:nth-child(3) { transition-delay: .16s; }

/* ---------- mockups ---------- */
.float { animation: floaty 7s ease-in-out infinite alternate; animation-delay: var(--fd, 0s); }
@keyframes floaty { from { transform: translateY(-9px) rotate(var(--rot, 0deg)); } to { transform: translateY(11px) rotate(calc(var(--rot, 0deg) + 1.4deg)); } }
.phone { position: relative; width: clamp(130px, 15vw, 250px); aspect-ratio: 9 / 19; border-radius: 15% / 7%; background: #0d0d0d; padding: 2.6%; box-shadow: 0 40px 60px -28px rgba(0,0,0,.8), inset 0 0 0 1.5px #4a4a4a, inset 0 0 0 3px #111; }
.phone .scr { position: relative; width: 100%; height: 100%; border-radius: 12.5% / 5.8%; overflow: hidden; background: #1a1a1a; }
.phone .isl { position: absolute; z-index: 3; top: 2.8%; left: 50%; width: 26%; height: 2.4%; background: #000; border-radius: 99px; transform: translateX(-50%); }
.mk .m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reelui { position: absolute; inset: 0; z-index: 2; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 32%); font-size: clamp(8px, .8vw, 12px); }
.reelui .ri { position: absolute; right: 7%; bottom: 14%; display: grid; gap: 1.2em; text-align: center; font-size: 1.9em; line-height: 1; }
.reelui .ri i { font-style: normal; }
.reelui .rc { position: absolute; left: 7%; right: 22%; bottom: 6%; display: grid; gap: 3px; }
.reelui .rc span { opacity: .8; font-size: .9em; }

.poster { position: relative; width: clamp(120px, 15vw, 250px); aspect-ratio: 3 / 4; background: #f2f2f2; padding: 5%; box-shadow: 0 34px 50px -26px rgba(0,0,0,.9); }
.poster::before { content: ""; position: absolute; inset: 5%; background: #ddd; }
.poster .m { inset: 5%; width: 90%; height: 90%; }
.poster-wrap .par:last-child { margin-top: 9vh; }

.browser { width: min(100%, 600px); background: #fff; color: #111; border-radius: 10px; box-shadow: 0 40px 60px -30px rgba(0,0,0,.8); overflow: hidden; }
.browser .bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #f2f2f2; border-bottom: 1px solid #e5e5e5; }
.browser .bar i { width: 9px; height: 9px; border-radius: 50%; background: #ccc; }
.browser .bar span { margin-left: 10px; flex: 1; text-align: center; font-size: 10px; color: #777; background: #fff; border-radius: 99px; padding: 4px 0; }
.shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.card small { display: block; margin-top: 6px; font-size: 10px; color: #666; }
.ph3 { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #eee; }

.story { width: min(100%, 620px); }
.story .head { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .12em; padding-bottom: 10px; border-bottom: 1px solid #fff; }
.strip { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 12px; }
.strip .fr small { display: block; margin-top: 5px; font-size: 10px; color: var(--mute); font-variant-numeric: tabular-nums; }
.strip .fr .ph3 { animation: dim 6s linear infinite; animation-delay: calc(var(--i) * 1.5s); opacity: .35; }
@keyframes dim { 0%, 25% { opacity: 1; } 30%, 100% { opacity: .35; } }
.playhead { position: absolute; top: 0; bottom: 18px; width: 2px; background: #ff2a1f; animation: sweep 6s linear infinite; left: 0; }
@keyframes sweep { from { left: 0; } to { left: 100%; } }

.cinema { position: relative; width: min(100%, 620px); aspect-ratio: 2.39 / 1; background: #000; overflow: hidden; border-radius: 3px; box-shadow: 0 40px 60px -30px rgba(0,0,0,.9); }
.cinema .hud2 { position: absolute; z-index: 2; left: 4%; right: 4%; top: 8%; display: flex; justify-content: space-between; color: #fff; font-size: 9px; letter-spacing: .14em; }
.cinema .pg { position: absolute; z-index: 2; left: 4%; right: 4%; bottom: 8%; height: 2px; background: rgba(255,255,255,.3); }
.cinema .pg b { display: block; height: 100%; background: #fff; animation: prog 5s linear infinite; }
@keyframes prog { from { width: 0; } to { width: 100%; } }
.browser-wrap > .par, .story-wrap > .par, .cinema-wrap > .par, .browser-wrap .float, .cinema-wrap .float { width: 100%; display: flex; justify-content: center; }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  :root { --cols: 2; }
  .cell .cap { display: none; }
  .hud .prog { display: none; }
  .svc, .svc:nth-child(even) { grid-template-columns: 1fr; row-gap: 24px; padding: 6vh 0; }
  .svc:nth-child(even) .svc-txt { order: 0; }
  .c-grid { grid-template-columns: 1fr; row-gap: 44px; }
  #detail { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .d-info { border-left: 0; border-top: 1px solid var(--line); padding: 18px 20px 24px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .grain, .float, .playhead, .pg b, .hud .scroll i, .strip .fr .ph3 { animation: none; }  .cell .m { scale: 1; } }

/* filter chip + service link */
.chip { position: fixed; z-index: 41; left: 50%; bottom: 14px; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; font-size: 11px; padding: 8px 14px; border-radius: 99px; background: rgba(0,0,0,.6); backdrop-filter: blur(10px); transition: opacity .5s, transform .6s var(--ease); }
.chip.on { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.svc .see { display: inline-block; margin-top: 26px; font-size: 12px; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .3s; }
.svc .see:hover { border-color: #fff; }

/* music player mockup */
.playerui { position: absolute; inset: 0; z-index: 2; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.78), transparent 44%); font-size: clamp(8px, .8vw, 12px); }
.playerui .pt { position: absolute; left: 8%; right: 8%; bottom: 20%; display: grid; gap: 3px; }
.playerui .pt b { font-size: 1.5em; font-weight: 500; letter-spacing: -.02em; }
.playerui .pt span { opacity: .7; }
.playerui .bar2 { position: absolute; left: 8%; right: 8%; bottom: 15%; height: 3px; background: rgba(255,255,255,.3); border-radius: 9px; }
.playerui .bar2 b { display: block; height: 100%; background: #fff; border-radius: 9px; animation: prog 8s linear infinite; }
.playerui .ctrl { position: absolute; left: 8%; right: 8%; bottom: 6%; display: flex; justify-content: space-between; align-items: center; font-size: 1.7em; }
.playerui .ctrl i { font-style: normal; }
.playerui .ctrl .pl { width: 2.6em; height: 2.6em; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-size: .8em; }

/* vinyl + sleeve mockup */
.vinyl-wrap .par { width: 100%; display: flex; justify-content: center; }
.vinyl { position: relative; width: clamp(180px, 22vw, 340px); aspect-ratio: 1; margin-right: 22%; }
.vinyl .disc { position: absolute; top: 4%; left: 34%; width: 92%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 20deg, rgba(255,255,255,.14), transparent 25%, rgba(255,255,255,.1) 50%, transparent 75%, rgba(255,255,255,.14)), repeating-radial-gradient(circle at center, #1a1a1a 0 2px, #2c2c2c 2px 3px); box-shadow: 0 30px 50px -20px rgba(0,0,0,.9); animation: spin 9s linear infinite; }
.vinyl .disc::before { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: #e9e4dc; box-shadow: 0 0 0 5px #111; }
.vinyl .disc::after { content: ""; position: absolute; inset: 47.5%; border-radius: 50%; background: #0a0a0a; }
.vinyl .sleeve { position: absolute; inset: 0; z-index: 2; box-shadow: 0 34px 50px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); background: #111; overflow: hidden; }
.vinyl .sleeve .m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vinyl .sleeve small { position: absolute; z-index: 3; left: 6%; bottom: 5%; font-size: 9px; letter-spacing: .14em; color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vinyl .disc, .playerui .bar2 b { animation: none; } }

/* ---------- v4: Fashion & Music structure ---------- */
.hud .role { letter-spacing: .01em; }
.avail { position: fixed; z-index: 40; top: 18px; right: 22px; font-size: 11px; mix-blend-mode: difference; color: #fff; }
.avail:empty { display: none; }
.avail::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 8px; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .2; } }
.p-head { align-items: flex-end; gap: 30px; }
.p-head h2 { font-size: clamp(56px, 12vw, 220px); }
.p-head p { font-size: 13px; line-height: 1.5; color: var(--mute); max-width: 26ch; text-align: right; padding-bottom: .6em; }
.p-head .line > span { transform: translateY(112%); transition: transform 1.3s var(--ease); }
.panel.open .p-head .line > span { transform: none; }
.panel.open .p-head .line:nth-child(2) > span { transition-delay: .12s; }
.svc { padding: 10vh 0; }
.svc .lead2 { font-size: clamp(18px, 1.7vw, 26px); letter-spacing: -.03em; line-height: 1.1; color: #fff; margin-bottom: 16px; max-width: 22ch; }
.svc ul { flex-direction: column; gap: 0; margin-top: 26px; max-width: 34ch; }
.svc li { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 11px 0; font-size: 13px; }
.svc li:last-child { border-bottom: 1px solid var(--line); }
.svc-mock { min-height: clamp(420px, 74vh, 760px); }
.duo { gap: 4vw; align-items: center; }
.duo .poster { width: clamp(150px, 17vw, 300px); }
.duo .phone { width: clamp(150px, 15vw, 270px); }
.duo .vinyl { width: clamp(170px, 19vw, 320px); margin-right: 12%; }
.pick { border: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.pick legend { float: left; font-size: 12px; color: var(--mute); margin-right: 14px; padding: 8px 0; }
.pick label { cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-block; font-size: 12px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 99px; transition: background .3s, color .3s, border-color .3s; }
.pick input:checked + span { background: #fff; color: #000; border-color: #fff; }
.pick input:focus-visible + span { outline: 1px solid #fff; outline-offset: 2px; }
.d-act { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.d-act #d-req { font-size: 13px; padding: 12px 20px; border-radius: 99px; background: #fff; color: #000; transition: transform .4s var(--ease), opacity .3s; }
.d-act #d-req:hover { transform: translateX(3px); }
.d-act #d-share { font-size: 12px; color: var(--mute); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.d-act #d-share:hover { color: #fff; }
@media (max-width: 860px) { .p-head { flex-direction: column; align-items: flex-start; } .p-head p { text-align: left; } .duo { flex-wrap: wrap; } }

/* tablet + móvil: la pantalla se divide en 2 */
@media (max-width: 1099px) { :root { --cols: 2; } }

/* ---------- WORK panel ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 5vh; }
.tabs button { font-size: 12px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 99px; transition: background .3s, color .3s, border-color .3s; }
.tabs button sup { font-size: 9px; opacity: .6; margin-left: 2px; }
.tabs button:hover { border-color: #fff; }
.tabs button.on { background: #fff; color: #000; border-color: #fff; }
.w-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 14px; }
.wcard { display: block; }
.wimg { aspect-ratio: 3 / 4; overflow: hidden; background: #111; }
.wimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.wcard:hover .wimg img { transform: scale(1.06); }
.wcap { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; }
.wcap span:last-child { color: var(--mute); font-size: 11px; text-align: right; }
.back { font-size: 12px; margin-bottom: 4vh; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.back:hover { border-color: #fff; }
.wp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 6vh; }
.wp-head h2 { font-weight: 400; font-size: clamp(48px, 9vw, 170px); letter-spacing: -.06em; line-height: .88; }
.wp-head p { font-size: 12px; color: var(--mute); padding-bottom: .8em; text-align: right; }
.gal { columns: 3; column-gap: 12px; }
.gi { margin: 0 0 12px; break-inside: avoid; cursor: pointer; background: #0d0d0d; overflow: hidden; }
.gi img, .gi video { width: 100%; height: auto; display: block; transition: transform 1s var(--ease); min-height: 120px; }
.gi:hover img, .gi:hover video { transform: scale(1.03); }
@media (max-width: 1100px) { .w-grid { grid-template-columns: repeat(3, 1fr); } .gal { columns: 2; } }
@media (max-width: 700px) { .w-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; } .gal { columns: 1; } .wp-head { flex-direction: column; align-items: flex-start; } .wp-head p { text-align: left; } }

/* ---------- services v2: en qué consiste + ejemplos ---------- */
.svc-block { border-top: 1px solid var(--line); padding: 8vh 0 6vh; }
.svc-block .svc { border-top: 0; padding: 0 0 6vh; }
.svc h4, .exh { font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 30px 0 12px; }
.exh { margin: 0 0 16px; }
.steps { list-style: none; counter-reset: s; display: grid; gap: 0; max-width: 38ch; }
.steps li { counter-increment: s; font-size: 13px; padding: 11px 0; border-top: 1px solid var(--line); display: flex; gap: 14px; }
.steps li::before { content: "0" counter(s); color: var(--mute); font-variant-numeric: tabular-nums; font-size: 11px; padding-top: 2px; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.ex { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.exc { border: 1px solid var(--line); padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 170px; transition: border-color .4s, background .4s; }
.exc:hover { border-color: #fff; background: rgba(255,255,255,.03); }
.exc b { font-weight: 400; font-size: 17px; letter-spacing: -.03em; line-height: 1.1; }
.exc p { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.7); flex: 1; }
.exc span { font-size: 10px; letter-spacing: .06em; color: var(--mute); border-top: 1px solid var(--line); padding-top: 10px; }
.svc-foot { font-size: 13px; padding: 6vh 0 4vh; border-top: 1px solid var(--line); }
.svc-foot a { border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .3s; }
.svc-foot a:hover { border-color: #fff; }
/* mockups neutros */
.art { background: #1a1a1a; }
.art.a1 { background: radial-gradient(120% 80% at 70% 15%, #f2f2f2 0, #9a9a9a 38%, #1c1c1c 78%); }
.art.a2 { background: radial-gradient(circle at 50% 38%, #fff 0, #6f7885 34%, #0a0d12 74%); }
.art.a3 { background: linear-gradient(200deg, #0b0b0b 0, #3b4350 52%, #d9dde2 100%); }
.art.a4 { background: radial-gradient(ellipse at 28% 72%, #a6a6a6 0, #2a2a2a 52%, #000 100%); }
.mk .art { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 1100px) { .ex { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ex { grid-template-columns: 1fr; } .exc { min-height: 0; } }

/* v5: imágenes enteras, sin recortar */
.cell { background: #000; display: grid; place-items: center; }
.cell .m { position: static; left: auto; top: auto; width: 100%; height: 100%; object-fit: contain; transform: none !important; }
.wimg img { object-fit: contain; background: #0b0b0b; }
.wimg { background: #0b0b0b; }
.gi img, .gi video { height: auto; }

/* proyecto: menú del centro solo con AWRA Studios® y Work */
body.in-project .nav [data-open=services], body.in-project .nav [data-open=contact] { display: none; }
body.in-project .hud .role { max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v6: todos los marcos del mismo tamaño; el hueco se rellena con la misma imagen difuminada */
.cell { position: relative; overflow: hidden; }
.cell::before { content: ""; position: absolute; inset: -8%; background: var(--bg, #000) center / cover no-repeat; filter: blur(30px) brightness(.45); z-index: 0; }
.cell .m { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.cell::after { z-index: 2; } .cell .cap { z-index: 3; }
.wimg { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: #0b0b0b; }
.wimg::before { content: ""; position: absolute; inset: -10%; background: var(--bg) center / cover no-repeat; filter: blur(22px) brightness(.45); }
.wimg img { position: relative; width: 100%; height: 100%; object-fit: contain; }

/* v7: sin títulos sobre las piezas; el detalle solo muestra las acciones */
.cell .cap{display:none!important}
.d-info h2,.d-info p,.d-info dl{display:none}

/* v8: dentro de un proyecto, una foto por pantalla completa (sin huecos arriba/abajo) */
body.in-project .cell{border-right:0}
body.in-project .cell .m{width:auto;max-width:100%;height:100%;margin:0 auto}

/* v10: todas las fotos en 3:4. Ordenador: rellenan su mitad de pantalla; móvil/tablet vertical: enteras sobre fondo difuminado */
@media (min-aspect-ratio: 3/5) { .cell .m { object-fit: cover; width: 100%; height: 100%; } .cell::before { display: none; } }

/* v11: fondo blanco en la home y en las series de proyecto (los paneles Work/Services/Contact siguen oscuros) */
html, body, #split, .track, .cell { background: #fff; }
.cell::before { display: none; }
.cell { border-right-color: rgba(0,0,0,.08); }

/* logo como al principio: texto simple, sin cápsula ni negrita */
.brand { font-weight: 400; letter-spacing: normal; background: none; padding: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav a[data-go=top] { font-weight: 400; }

/* Music: una pieza por pantalla, fondo oscuro, mismo scroll horizontal que el resto */
body.in-music, body.in-music html, body.in-music #split, body.in-music .track, body.in-music .cell { background: #000; }
body.in-music .cell .m { object-fit: contain; width: 100%; height: 100%; }
html:has(body.in-music) { background: #000; }

/* v14: paneles a pantalla completa, sin huecos ni bordes; foto y vídeo llenan cada panel (formato 9:16) */
.cell { border-right: 0 !important; }
.cell::before { display: none !important; }
.cell .m, body.in-music .cell .m { object-fit: cover !important; width: 100% !important; height: 100% !important; }

/* miniaturas inferiores: giran con el scroll (bucle infinito) */
#thumbs { position: fixed; left: 0; right: 0; bottom: 42px; height: 64px; z-index: 35; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
#tstrip { display: flex; gap: 6px; will-change: transform; height: 100%; }
#tstrip .t { flex: 0 0 auto; width: 36px; height: 64px; padding: 0; border: 0; background: #222; cursor: pointer; pointer-events: auto; opacity: .5; transition: opacity .3s, transform .3s; overflow: hidden; }
#tstrip .t img { width: 100%; height: 100%; object-fit: cover; display: block; }
#tstrip .t.on { opacity: 1; transform: translateY(-4px); outline: 1px solid rgba(255,255,255,.9); }
body.in-music #thumbs { display: none; }
@media (max-width: 899px) { #thumbs { bottom: 40px; height: 54px; } #tstrip .t { width: 30px; height: 54px; } }

#thumbs { display: none !important; }

/* Work: tarjeta "← Work" al entrar en una marca */
.wcard.wback { display: flex; align-items: center; justify-content: center; min-height: 160px; border: 1px solid var(--line); }
.wcard.wback .wcap { flex-direction: column; align-items: center; gap: 6px; margin: 0; font-size: 16px; }

/* Film: muro de reels (tarjetas verticales que se reproducen solas; al pulsar, visor con sonido) */
#w-grid:has(.reel) { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px 16px; }
.wcard.reel .wimg { aspect-ratio: 9 / 16; position: relative; background: #000; overflow: hidden; border-radius: 3px; }
.wcard.reel .wimg video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.wcard.reel:hover .wimg video { transform: scale(1.04); }
.wcard.reel .pl { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; font-style: normal; font-size: 10px; opacity: 0; transition: opacity .4s; }
.wcard.reel:hover .pl { opacity: 1; }
.wcard.reel .wcap { opacity: .7; letter-spacing: .08em; font-size: 10px; text-transform: uppercase; }
#d-stage video { max-width: 100%; max-height: 100%; }

/* Music: mockups de Spotify (portada) y Canvas (vídeo) */
.mm { min-height: 78vh; display: grid; place-items: center; padding: 30px 0 60px; }
.mm-row { display: flex; gap: clamp(28px, 6vw, 90px); align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.mm-item { margin: 0; text-align: center; } .mm-item figcaption { margin-top: 16px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.mm .ph { position: relative; width: min(290px, 74vw); aspect-ratio: 9 / 19; border-radius: 38px; border: 7px solid #1b1b1b; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
.mm .sb { position: absolute; z-index: 3; top: 10px; left: 22px; right: 22px; display: flex; justify-content: space-between; font-size: 11px; }
.mm .sp { background: linear-gradient(#232323, #0b0b0b 55%); padding: 46px 16px 16px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.mm .cov { position: relative; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.mm .cov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; } .mm .cov img.on { opacity: 1; }
.mm .tt { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .mm .tt b { font-size: 17px; letter-spacing: -.02em; } .mm .tt span { font-size: 12px; color: var(--mute); }
.mm .pr { height: 3px; background: rgba(255,255,255,.2); border-radius: 2px; } .mm .pr i { display: block; height: 100%; width: 38%; background: #fff; border-radius: 2px; animation: mmpr 14s linear infinite; }
@keyframes mmpr { from { width: 4%; } to { width: 96%; } }
.mm .ct { display: flex; justify-content: space-between; align-items: center; font-size: 15px; margin-top: 4px; } .mm .ct .pp { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-size: 15px; }
.mm .cv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm .tt2 { position: absolute; left: 18px; right: 18px; bottom: 26px; z-index: 2; text-align: left; text-shadow: 0 2px 14px rgba(0,0,0,.7); display: flex; flex-direction: column; gap: 2px; } .mm .tt2 b { font-size: 16px; } .mm .tt2 span { font-size: 11px; opacity: .8; }

/* v15: mockups de Services con imágenes/vídeos reales que rotan */
.cyc > .m { opacity: 0; transition: opacity .9s var(--ease); }
.cyc > .m.on { opacity: 1; }
.phone .scr .m { object-fit: cover; }
.strip .fr .ph3 .m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.poster.cyc > .m { position: absolute; }
/* proyecto: 2 imágenes por pantalla, cada una entera y a la altura de la ventana */
.gal { columns: 2; column-gap: 12px; max-width: calc(2 * (100vh - 150px) * 9 / 16 + 12px); margin: 0 auto; }
@media (max-width: 700px) { .gal { columns: 1; max-width: none; } }

/* v16: fluidez — cada panel se pinta por separado y el resto no se recalcula */
.cell { contain: layout paint style; }

/* v17: flecha "← Work" a la izquierda de las pestañas; film grain más visible; reels de 6 en 6 */
.tabback { font-size: 13px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 99px; margin-right: 8px; }
.tabback:hover { background: rgba(255,255,255,.08); }
.tabs { align-items: center; }
.grain { opacity: .2 !important; }
.wcard.more { display: flex; align-items: center; justify-content: center; min-height: 160px; border: 1px solid var(--line); }