/* ============================================================
   PARANOIA FILMS — "UN SOLO PLANO"
   Negro base + secciones invertidas. Jost (Futura) + DM Mono.
   ============================================================ */

/* ------------------------------------------------------------
   Tipografías alojadas aquí, no en Google.
   Así el sitio no envía la IP de cada visitante a un tercero,
   y se ahorra dos conexiones externas al abrir.
   font-display:swap → el texto se ve desde el primer instante.
   ------------------------------------------------------------ */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;
  src:url('../media/fonts/jost-v20-latin-300.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url('../media/fonts/jost-v20-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;
  src:url('../media/fonts/jost-v20-latin-600.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;
  src:url('../media/fonts/jost-v20-latin-700.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../media/fonts/dm-mono-v16-latin-regular.woff2') format('woff2')}

:root{
  --black:#0A0A0A; --black-deep:#050505; --white:#F4F2ED;
  --grey:#8E8B84;  --grey-dim:#4A4843;   --rec:#FF2A17;
  --line:rgba(244,242,237,.14); --line-2:rgba(244,242,237,.42);
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(1.25rem,5vw,5rem);
  --ui:clamp(1rem,2.2vw,1.75rem);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:var(--black);-webkit-text-size-adjust:100%}
body{
  background:var(--black);color:var(--white);
  font-family:'Jost',system-ui,-apple-system,sans-serif;font-weight:400;
  font-size:16px;line-height:1.5;overflow-x:hidden;overscroll-behavior-y:none;
}
/* El visor no es una capa flotante con scroll propio: sustituye a la página
   y la que se desplaza es la ventana. Los contenedores con scroll anidado
   dentro de un position:fixed fallaban en Safari. */

/* ------------------------------------------------------------
   Safari dibuja el recorte de overflow:hidden como esquina
   redondeada cuando dentro hay un vídeo con transform animado.
   clip-path:inset(0) fuerza un recorte rectangular exacto.
   ------------------------------------------------------------ */
.tile,.reel,.strip,.view__p,.stills figure,.open__media,.belts{
  border-radius:0 !important;
  -webkit-clip-path:inset(0);
          clip-path:inset(0);
}
video,img,
.tile img,.tile video,.reel img,.reel video,
.strip video,.view__p img,.view__p video,.stills img{
  border-radius:0 !important;
  -webkit-mask-image:none;
  -webkit-clip-path:none;
          clip-path:none;
}
/* Safari a veces redondea el recorte cuando el hijo va escalado.
   Sin escalado no hay nada que recortar, así que no hay nada que redondear.
   pointer-events:none evita además que el cursor toque el <video>: si hay
   una extensión que inyecta su propio reproductor, no encuentra a quién. */
.tile img,.tile video,.reel img,.reel video{
  transform:none !important;
  pointer-events:none;
}
.tile video::-webkit-media-controls,.reel video::-webkit-media-controls,
.tile video::-webkit-media-controls-enclosure,.reel video::-webkit-media-controls-enclosure{
  display:none !important;-webkit-appearance:none;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--white);color:var(--black)}

.mono{font-family:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;font-weight:400;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.big{font-weight:700;letter-spacing:-.045em;line-height:.86;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- capas fijas ---------- */
.grain{position:fixed;inset:-60px;z-index:9000;pointer-events:none;opacity:.055;
  mix-blend-mode:overlay;animation:grain .9s steps(5) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}40%{transform:translate(1%,-2%)}
  60%{transform:translate(-1%,2%)}80%{transform:translate(2%,1%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:8990;pointer-events:none;box-shadow:inset 0 0 22vw rgba(0,0,0,.55)}
.cut{position:fixed;inset:0;z-index:9200;pointer-events:none;background:var(--white);opacity:0}
.cut.fire{animation:cut .16s steps(2) 1}
@keyframes cut{0%{opacity:.8}100%{opacity:0}}
#stage{transition:filter .9s var(--ease)}
body.is-idle #stage{filter:blur(3px) saturate(.7)}

/* ---------- preloader ---------- */
.pre{position:fixed;inset:0;z-index:9500;background:var(--black);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.5rem;transition:opacity .7s var(--ease),visibility .7s}
.pre.done{opacity:0;visibility:hidden}
.pre img{width:60px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
.pre__bar{width:min(240px,50vw);height:1px;background:var(--line);position:relative}
.pre__bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--white)}
.pre__tc{color:var(--grey)}

/* ---------- HUD ---------- */
.hud{position:fixed;z-index:600;pointer-events:none}
.hud>*{pointer-events:auto}
.hud--brand{top:var(--ui);left:var(--ui);display:flex;align-items:center;gap:.7rem}
.hud--brand img{width:20px}
.hud--brand .n{display:block;font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.hud--brand .r{display:block;color:var(--grey);font-size:.6rem}
.hud--tc{top:var(--ui);right:var(--ui);display:flex;align-items:center;gap:.9rem}
.hud--tc .g{display:flex;align-items:center;gap:.5rem}
.hud--tc .dot{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:rec 1.4s steps(2) infinite}
@keyframes rec{0%,49%{opacity:1}50%,100%{opacity:.15}}
.hud--tc .val{font-variant-numeric:tabular-nums}
.snd{display:flex;align-items:center;gap:.45rem;border:1px solid var(--line);border-radius:100px;
  padding:.3rem .6rem;transition:border-color .3s,background .3s,color .3s}
.snd:hover{border-color:var(--line-2)}
.snd.on{background:var(--white);color:var(--black);border-color:var(--white)}
.snd i{display:flex;gap:2px;align-items:flex-end;height:9px}
.snd i b{width:2px;background:currentColor;height:3px;border-radius:1px}
.snd.on i b{animation:eq .7s ease-in-out infinite alternate}
.snd.on i b:nth-child(2){animation-delay:.15s}.snd.on i b:nth-child(3){animation-delay:.3s}
@keyframes eq{from{height:3px}to{height:9px}}

/* ---------- scrubber ---------- */
.scrub{position:fixed;z-index:600;left:0;right:0;bottom:0;padding:0 var(--ui) calc(var(--ui)*.7);
  background:linear-gradient(to top,rgba(10,10,10,.92) 30%,transparent)}
.scrub__track{position:relative;height:32px;cursor:ew-resize}
.scrub__rail,.scrub__fill{position:absolute;left:0;bottom:0;height:1px}
.scrub__rail{right:0;background:var(--line)}
.scrub__fill{background:var(--white);width:0}
.scrub__head{position:absolute;bottom:-3px;left:0;width:1px;height:7px;background:var(--white)}
.scrub__marks{position:absolute;inset:0}
.scrub__mark{position:absolute;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:.35rem;color:var(--grey-dim);white-space:nowrap;padding-bottom:.35rem;transition:color .3s}
.scrub__mark::after{content:'';width:1px;height:5px;background:currentColor}
.scrub__mark:hover,.scrub__mark.on{color:var(--white)}
.scrub__mark:first-child{transform:none;align-items:flex-start}
.scrub__mark:last-child{transform:translateX(-100%);align-items:flex-end}
.scrub__mob{display:none}

/* inversión de la UI en secciones claras */
body.inv{--line:rgba(10,10,10,.16);--line-2:rgba(10,10,10,.45)}
body.inv .hud--brand img{filter:invert(1)}
body.inv .hud--brand .n,body.inv .hud--tc .val,body.inv .snd{color:var(--black)}
body.inv .hud--brand .r,body.inv .scrub__mark{color:rgba(10,10,10,.45)}
body.inv .scrub{background:linear-gradient(to top,rgba(244,242,237,.92) 30%,transparent)}
body.inv .scrub__fill,body.inv .scrub__head{background:var(--black)}
body.inv .scrub__mark:hover,body.inv .scrub__mark.on{color:var(--black)}
body.inv .snd.on{background:var(--black);color:var(--white);border-color:var(--black)}
body.inv .cur__dot{background:var(--black)}
body.inv .cur__f span{border-color:var(--black)}

/* ---------- cursor visor ---------- */
.cur{position:fixed;top:0;left:0;z-index:9100;pointer-events:none}
.cur__dot{position:fixed;width:5px;height:5px;border-radius:50%;background:var(--white);transform:translate(-50%,-50%)}
.cur__f{position:fixed;width:44px;height:44px;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease)}
.cur__f span{position:absolute;width:11px;height:11px;border:1px solid var(--line-2);transition:border-color .3s}
.cur__f span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.cur__f span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.cur__f span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.cur__f span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.cur__l{position:fixed;transform:translate(-50%,-50%);opacity:0;transition:opacity .25s;mix-blend-mode:difference;color:#fff}
body.lock .cur__f{width:104px;height:104px}
body.lock .cur__f span{border-color:var(--rec)}
body.lock .cur__l{opacity:1}
body.is-touch .cur{display:none}

/* ---------- secciones ---------- */
.sec{position:relative;padding:clamp(5rem,13vh,9rem) var(--pad)}
.sec--light{background:var(--white);color:var(--black)}
.sec--light ::selection{background:var(--black);color:var(--white)}
.head{display:flex;align-items:baseline;gap:1.4rem;padding-bottom:1.1rem;
  margin-bottom:clamp(2.5rem,6vh,4.5rem);border-bottom:1px solid var(--line)}
.sec--light .head{border-color:rgba(10,10,10,.2)}
.head h2{font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.head .idx{color:var(--grey)}
.head .meta{margin-left:auto;color:var(--grey);text-align:right}
.sec--light .head .idx,.sec--light .head .meta{color:rgba(10,10,10,.45)}

.rise{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise[data-d="1"]{transition-delay:.08s}.rise[data-d="2"]{transition-delay:.16s}
.rise[data-d="3"]{transition-delay:.24s}.rise[data-d="4"]{transition-delay:.32s}
.rise[data-d="5"]{transition-delay:.4s}

/* ============================================================
   APERTURA — el plano que se contrae con el scroll
   ============================================================ */
section.open{height:260vh;position:relative}
.open__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.open__media{position:absolute;inset:0;background:var(--black-deep);
  clip-path:inset(0% 0%);will-change:clip-path}
.open__media video{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.14) brightness(.6);will-change:transform}
.open__frame{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;opacity:0;
  border:1px solid rgba(244,242,237,.35)}
.bars{position:absolute;inset:0;pointer-events:none;z-index:3}
.bars::before,.bars::after{content:'';position:absolute;left:0;right:0;height:7vh;background:var(--black)}
.bars::before{top:0}.bars::after{bottom:0}

.open__wm{position:absolute;z-index:2;left:50%;top:47%;transform:translate(-50%,-50%);
  width:min(82vw,1040px);mix-blend-mode:difference;will-change:transform,opacity}

/* sandwich SOMA: el texto abraza la ventana encogida */
.sand{position:absolute;z-index:2;left:0;right:0;text-align:center;opacity:0;
  font-size:clamp(2.2rem,9vw,8rem);font-weight:700;letter-spacing:-.05em;line-height:.85;
  text-transform:uppercase;pointer-events:none;will-change:transform,opacity}
.sand--t{top:8vh}
.sand--b{bottom:8vh}

.open__foot{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) + 3rem);
  display:flex;align-items:flex-end;gap:2rem;flex-wrap:wrap;will-change:opacity}
.claim{font-size:clamp(1.1rem,2.2vw,1.75rem);font-weight:300;line-height:1.25;letter-spacing:-.02em;max-width:20ch}
.claim b{font-weight:600}
.open__side{margin-left:auto;text-align:right;color:var(--grey);line-height:1.9}
.play{display:inline-flex;align-items:center;gap:.65rem;margin-top:1.3rem;padding:.6rem 1.1rem .6rem .95rem;
  border:1px solid var(--line-2);border-radius:100px;transition:background .35s,color .35s,border-color .35s}
.play:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.play .tri{width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}

/* ============================================================
   TRABAJOS — mosaico irregular
   ============================================================ */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.5rem,1.4vw,1.1rem)}
.tile{position:relative;overflow:hidden;background:#111;align-self:start;cursor:pointer;display:block}
.tile__m{position:absolute;inset:0}
.tile__m img,.tile__m video{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.76);transform:scale(1.03);
  transition:filter .6s var(--ease),transform 1.1s var(--ease)}
.tile__m video{position:absolute;inset:0;opacity:0;transition:opacity .5s,filter .6s,transform 1.1s}
.tile:hover .tile__m img,.tile:hover .tile__m video{filter:none;transform:scale(1.07)}
.tile.play .tile__m video{opacity:1}
.tile__s{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,.85) 0,rgba(5,5,5,.08) 46%,transparent 72%)}
.tile__b{position:absolute;inset:auto 0 0 0;padding:clamp(1rem,2vw,1.7rem)}
.tile__n{color:var(--grey)}
.tile__t{font-size:clamp(1.3rem,2.6vw,2.2rem);font-weight:600;text-transform:uppercase;
  letter-spacing:-.035em;line-height:1;margin:.35rem 0 .5rem}
.tile__meta{color:var(--grey);display:flex;gap:1rem;flex-wrap:wrap}
.tile__r{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--white);transition:width .6s var(--ease)}
.tile:hover .tile__r{width:100%}
/* Retícula uniforme: dos columnas, mismo formato, filas alineadas.
   El escalonado anterior dejaba huecos y se leía como desorden. */
.t1,.t2,.t3,.t4,.t5,.t6,.t7,.t8{grid-column:span 6;aspect-ratio:3/2;margin-top:0}

/* ---------- franja de archivo ---------- */
.strip{position:relative;height:62vh;min-height:340px;overflow:hidden;background:#000}
.strip video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.5)}
.strip__o{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 var(--pad);text-align:center}
.strip__o p{font-size:clamp(1.5rem,5vw,4rem);font-weight:600;text-transform:uppercase;
  letter-spacing:-.04em;line-height:.95;max-width:17ch;mix-blend-mode:difference}

/* ============================================================
   VERTICAL — contenido para redes
   ============================================================ */
.reels__wrap{position:relative;margin:0 calc(var(--pad)*-1);padding:0 var(--pad)}
.reels__nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:clamp(44px,3.4vw,54px);height:clamp(44px,3.4vw,54px);border-radius:50%;
  display:grid;place-items:center;font-size:1.8rem;line-height:0;padding-bottom:.16em;
  border:1px solid var(--line-2);background:rgba(10,10,10,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--white);
  transition:background .3s,color .3s,opacity .3s,transform .3s,border-color .3s}
.reels__nav:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.reels__nav--p{left:calc(var(--pad) - clamp(14px,1.5vw,22px))}
.reels__nav--n{right:calc(var(--pad) - clamp(14px,1.5vw,22px))}
.reels__nav.off{opacity:0;pointer-events:none}
.reels{display:flex;gap:clamp(.6rem,1.4vw,1.1rem);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;padding-bottom:1.2rem;scroll-padding-left:0;
  scrollbar-width:thin;scrollbar-color:var(--grey-dim) transparent;cursor:grab}
.reels.drag{cursor:grabbing;scroll-snap-type:none}
.reels::-webkit-scrollbar{height:2px}
.reels::-webkit-scrollbar-track{background:var(--line)}
.reels::-webkit-scrollbar-thumb{background:var(--grey)}
.reel{position:relative;flex:0 0 clamp(200px,21vw,300px);aspect-ratio:9/16;overflow:hidden;
  background:#111;scroll-snap-align:start;cursor:pointer}
.reel img,.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.8);transition:filter .55s var(--ease),transform 1s var(--ease)}
.reel video{opacity:0;transition:opacity .45s,filter .55s,transform 1s}
.reel:hover img,.reel:hover video{filter:none;transform:scale(1.05)}
.reel.play video{opacity:1}
.reel__s{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,.88) 0,transparent 52%)}
.reel__b{position:absolute;inset:auto 0 0 0;padding:1rem}
.reel__t{font-size:1.05rem;font-weight:600;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05}
.reel__c{color:var(--grey);margin-top:.3rem}
.viral{position:absolute;top:.75rem;left:.75rem;z-index:2;display:flex;align-items:center;gap:.35rem;
  background:var(--rec);color:#fff;padding:.22rem .5rem;border-radius:2px}
.reels__hint{display:flex;justify-content:space-between;color:var(--grey);margin-top:.4rem}

/* ============================================================
   MANIFIESTO (invertido)
   ============================================================ */
.manif__lead{font-size:clamp(2rem,7.4vw,6.2rem);font-weight:700;text-transform:uppercase;
  letter-spacing:-.05em;line-height:.88;max-width:15ch}
.manif__body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);
  margin-top:clamp(2.5rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid rgba(10,10,10,.2)}
.manif__body p{font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.5;letter-spacing:-.01em}
.punch{font-size:clamp(1.4rem,3.4vw,2.9rem);font-weight:600;text-transform:uppercase;
  letter-spacing:-.04em;line-height:1;align-self:end}
.punch em{font-style:normal;color:var(--rec)}

/* ============================================================
   SERVICIOS — tipografía que se desborda
   ============================================================ */
.svc{border-top:1px solid var(--line)}
.row{position:relative;display:flex;align-items:center;gap:clamp(.8rem,3vw,3rem);
  padding:clamp(.9rem,2.4vw,1.8rem) 0;border-bottom:1px solid var(--line);cursor:pointer;overflow:hidden}
.row__bg{position:absolute;inset:0;background:var(--white);transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s var(--ease)}
.row:hover .row__bg{transform:scaleY(1)}
.row>*:not(.row__bg){position:relative;z-index:1;transition:color .3s var(--ease)}
.row:hover .n,.row:hover .t,.row:hover .d{color:var(--black)}
.row .n{color:var(--grey);flex:0 0 auto;width:2.4rem}
.row .t{font-size:clamp(1.6rem,6.6vw,5.4rem);font-weight:700;text-transform:uppercase;
  letter-spacing:-.05em;line-height:.88;white-space:nowrap;transition:transform .5s var(--ease),color .3s}
.row:hover .t{transform:translateX(clamp(.5rem,2vw,2.5rem))}
.row .d{margin-left:auto;width:min(30ch,32%);flex:0 0 auto;color:var(--grey);
  font-size:.88rem;line-height:1.5;opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),color .3s}
.row:hover .d{opacity:1;transform:none}
/* contador + signo que indica que el servicio se abre */
.row__c{flex:0 0 auto;margin-left:1.2rem;color:var(--grey);display:flex;align-items:center;gap:.5rem}
.row__c i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;
  border:1px solid var(--line);border-radius:50%;font-size:1rem;line-height:0;padding-bottom:.1em;
  transition:transform .45s var(--ease),border-color .3s,background .3s,color .3s}
.row:hover .row__c i{border-color:var(--black);background:var(--black);color:var(--white)}
.svc__item.on .row__c i{transform:rotate(135deg)}

/* panel de trabajo que despliega cada servicio */
.svc__panel{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.svc__strip{display:flex;gap:clamp(.5rem,1.2vw,.9rem);overflow-x:auto;overflow-y:hidden;
  padding:1.1rem 0 1.4rem;scrollbar-width:thin;scrollbar-color:var(--grey-dim) transparent}
.svc__strip::-webkit-scrollbar{height:2px}
.svc__strip::-webkit-scrollbar-thumb{background:var(--grey)}
.svc__empty{padding:1.2rem 0 1.6rem;color:var(--grey-dim)}

.card{position:relative;flex:0 0 clamp(190px,17vw,250px);aspect-ratio:4/5;overflow:hidden;
  background:#111;cursor:pointer;border-radius:0 !important;
  -webkit-clip-path:inset(0);clip-path:inset(0)}
.card__m{position:absolute;inset:0}
.card__m img,.card__m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.78);transition:filter .55s var(--ease);
  transform:none !important;pointer-events:none;border-radius:0 !important}
.card__m video{opacity:0;transition:opacity .45s,filter .55s}
.card:hover .card__m img,.card:hover .card__m video{filter:none}
.card.play .card__m video{opacity:1}
.card__s{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,.88) 0,transparent 55%)}
.card__b{position:absolute;inset:auto 0 0 0;padding:.85rem}
.card__t{font-size:.95rem;font-weight:600;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;color:var(--white)}
.card__c{color:var(--grey);margin-top:.25rem}

/* ============================================================
   CREW (invertido) — solo tipografía, sin retratos
   ============================================================ */
.crew__row{position:relative;padding:clamp(1.3rem,3vw,2.4rem) 0;overflow:hidden;
  border-bottom:1px solid rgba(10,10,10,.16);display:flex;flex-direction:column;align-items:center;text-align:center}
.crew__row:first-child{border-top:1px solid rgba(10,10,10,.16)}
.crew__n{font-size:clamp(1.8rem,6.4vw,5.2rem);font-weight:700;text-transform:uppercase;
  letter-spacing:-.055em;line-height:.9;transition:letter-spacing .6s var(--ease)}
.crew__row:hover .crew__n{letter-spacing:.005em}
/* filete que se abre entre nombre y apellido */
.crew__rule{width:0;height:1px;background:var(--black);margin:.4rem 0;
  transition:width .6s var(--ease)}
.crew__row:hover .crew__rule{width:min(60vw,420px)}
.crew__r{margin-top:.5rem;color:rgba(10,10,10,.45);transition:color .35s var(--ease),letter-spacing .5s var(--ease)}
.crew__row:hover .crew__r{color:var(--black);letter-spacing:.22em}

/* ============================================================
   CLIENTES — dos tiras en direcciones opuestas
   ============================================================ */
.belts{margin:0 calc(var(--pad)*-1);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.belt{display:flex;overflow:hidden;padding:1.4rem 0}
.belt__t{display:flex;flex:0 0 auto;align-items:center;gap:clamp(2.5rem,6vw,6rem);padding-right:clamp(2.5rem,6vw,6rem)}
.belt--l .belt__t{animation:beltL 42s linear infinite}
.belt--r .belt__t{animation:beltR 38s linear infinite}
@keyframes beltL{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes beltR{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.belt:hover .belt__t{animation-play-state:paused}
.belt img{height:clamp(26px,3.4vw,44px);width:auto;opacity:.5;flex:0 0 auto;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.belt img:hover{opacity:1;transform:scale(1.06)}
.belt--tall img{height:clamp(34px,4.4vw,58px)}

/* ============================================================
   CONTACTO
   ============================================================ */
.contact{position:relative;overflow:hidden}
.contact__bg{position:absolute;inset:0;z-index:0;opacity:.1}
.contact__bg video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.6)}
.contact>*{position:relative;z-index:1}
.mail{display:block;font-size:clamp(2rem,8.4vw,7rem);font-weight:700;
  letter-spacing:-.05em;line-height:.9;word-break:break-word;transition:opacity .35s}
.mail:hover{opacity:.55}
/* El titular va muy apretado (-.05em). En un guion entre cifras eso lo pega
   a los números y se lee mal: aquí se le devuelve el aire. */
.mail .sep{display:inline-block;letter-spacing:0;padding:0 .20em;transform:translateY(-.03em)}
/* etiqueta bajo el teléfono: deja claro que el clic abre WhatsApp */
.mail__wa{display:flex;align-items:center;gap:.5rem;margin-top:1rem;color:var(--grey);
  letter-spacing:.14em;transition:color .35s var(--ease)}
.mail:hover .mail__wa{color:var(--white)}
.wa{width:15px;height:15px;flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--wa) center/contain no-repeat;mask:var(--wa) center/contain no-repeat}
:root{--wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2zm5.8 14.17c-.24.68-1.42 1.31-1.96 1.35-.5.04-.97.22-3.27-.68-2.76-1.09-4.5-3.91-4.64-4.09-.13-.18-1.1-1.46-1.1-2.79s.7-1.98.95-2.25c.25-.27.54-.34.72-.34.18 0 .36 0 .52.01.17.01.39-.06.61.47.23.54.77 1.87.84 2.01.07.14.11.3.02.48-.09.18-.14.29-.27.45-.14.16-.29.35-.41.47-.14.14-.28.28-.12.55.16.27.71 1.17 1.52 1.9 1.05.93 1.93 1.22 2.2 1.36.27.14.43.11.59-.07.16-.18.68-.79.86-1.07.18-.27.36-.22.61-.13.25.09 1.57.74 1.84.88.27.13.45.2.51.31.07.11.07.64-.17 1.32z'/%3E%3C/svg%3E")}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:2rem clamp(1.5rem,4vw,4rem);margin-top:clamp(2.5rem,6vw,4.5rem);padding-top:1.6rem;border-top:1px solid var(--line)}
.cgrid h3{color:var(--grey);font-weight:400;margin-bottom:.7rem}
.cgrid p,.cgrid a{font-size:1rem;line-height:1.75;display:block}
.cgrid a{width:fit-content;border-bottom:1px solid transparent;transition:border-color .3s}
.cgrid a:hover{border-color:var(--line-2)}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.4rem var(--pad) calc(var(--pad) + 3.2rem);color:var(--grey-dim);border-top:1px solid var(--line)}

/* ============================================================
   VISOR
   ============================================================ */
/* El visor NO es una capa con scroll propio: es una página normal.
   La que se desplaza es la ventana, igual que el resto del sitio.
   Cualquier contenedor con scroll anidado daba problemas en Safari. */
.view{display:none;background:var(--black);min-height:100svh;opacity:0;
  transition:opacity .4s var(--ease)}
.view.is-open{display:block}
.view.shown{opacity:1}
body.viewing #stage{display:none}
body.viewing .scrub,body.viewing .hud--tc{display:none}
.view__x{position:fixed;top:var(--ui);right:var(--ui);z-index:8995;width:46px;height:46px;
  border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;
  background:rgba(10,10,10,.6);backdrop-filter:blur(6px);transition:background .3s,color .3s}
.view__x:hover{background:var(--white);color:var(--black)}
.view__in{padding:clamp(4.5rem,10vh,7rem) var(--pad) 6rem}
.view__cat{color:var(--grey)}
.view__t{font-size:clamp(1.9rem,7.4vw,6rem);font-weight:700;text-transform:uppercase;
  letter-spacing:-.05em;line-height:1;margin:1.4rem 0 clamp(1.6rem,4vw,2.6rem);padding-top:.1em}
.view__t span{display:block;font-weight:400;opacity:.45;font-size:.6em;line-height:1.05}
.view__p{position:relative;background:#000;margin-bottom:clamp(2rem,5vw,3.5rem)}
.view__p video,.view__p img{width:100%;max-height:80vh;object-fit:contain;margin:0 auto}
.view__p.vert video{max-height:84vh}
.view__cols{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,5vw,5rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.view__cols h4{color:var(--grey);font-weight:400;margin-bottom:.9rem}
.about{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.6}
.cred li{display:flex;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--line)}
.cred li span:first-child{color:var(--grey);flex:0 0 44%}
.stills{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:clamp(.6rem,1.5vw,1.1rem);margin-top:clamp(2.5rem,6vw,4rem)}
.stills figure{overflow:hidden}
.stills img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s var(--ease)}
.stills figure:hover img{transform:scale(1.04)}
/* Sin rotaciones: una foto torcida resta profesionalidad aunque sea a propósito. */

/* ============================================================
   LIGHTBOX — pasar de una foto a otra
   ============================================================ */
/* z-index por encima de grano, viñeta y flash: si no, el lightbox quedaba
   enterrado y parecía que la página se había congelado. */
.lb{position:fixed;inset:0;z-index:9300;background:rgba(4,4,4,.93);
  -webkit-backdrop-filter:blur(18px) saturate(.6);backdrop-filter:blur(18px) saturate(.6);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(4rem,9vh,6rem) clamp(4.5rem,9vw,8rem);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.lb.is-open{opacity:1;visibility:visible}
body.lightbox .view__x{display:none}          /* un solo botón de cerrar a la vez */
.lb__f{position:relative;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;
  outline:1px solid rgba(244,242,237,.28);outline-offset:14px}
.lb__f img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;
  transition:opacity .2s var(--ease)}
.lb__x,.lb__p,.lb__n{position:absolute;z-index:2;display:grid;place-items:center;
  border:1px solid rgba(244,242,237,.55);border-radius:50%;background:rgba(10,10,10,.75);
  color:var(--white);transition:background .3s,color .3s,transform .3s,border-color .3s}
.lb__x:hover,.lb__p:hover,.lb__n:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.lb__x{top:var(--ui);right:var(--ui);width:48px;height:48px;font-size:1rem}
.lb__p,.lb__n{top:50%;width:clamp(48px,5vw,60px);height:clamp(48px,5vw,60px);
  transform:translateY(-50%);font-size:2rem;line-height:0;padding-bottom:.18em}
.lb__p{left:clamp(.7rem,2.2vw,2.2rem)}
.lb__n{right:clamp(.7rem,2.2vw,2.2rem)}
.lb__p:hover{transform:translateY(-50%) translateX(-3px)}
.lb__n:hover{transform:translateY(-50%) translateX(3px)}
.lb__c{position:absolute;bottom:calc(var(--ui) + .2rem);left:50%;transform:translateX(-50%);
  color:var(--white);font-variant-numeric:tabular-nums;
  border:1px solid rgba(244,242,237,.25);border-radius:100px;padding:.4rem .9rem;
  background:rgba(10,10,10,.7);display:flex;gap:.9rem;align-items:center}
.lb__c b{font-weight:400;color:var(--grey)}
.stills img{cursor:zoom-in}
.stills figure{position:relative}
.stills figure::after{content:'Ampliar';position:absolute;bottom:.7rem;left:.7rem;
  font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--white);background:rgba(10,10,10,.72);border:1px solid rgba(244,242,237,.22);
  padding:.28rem .55rem;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.stills figure:hover::after{opacity:1}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .manif__body,.view__cols{grid-template-columns:1fr}
  .row .d,.open__side{display:none}
  .t1,.t2,.t3,.t4,.t5,.t6,.t7,.t8{grid-column:span 12;aspect-ratio:16/10}
    .crew__row:hover .crew__rule{width:min(70vw,300px)}
}
@media (max-width:640px){
  .open{height:200vh}
  .scrub__track{display:none}
  .scrub__mob{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0 .2rem}
  .scrub__mob select{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
    background:transparent;color:inherit;border:1px solid var(--line-2);padding:.45rem .7rem;border-radius:2px;appearance:none}
  .scrub__mob option{background:#111;color:#fff}
  .bars::before,.bars::after{height:4vh}
  .open__foot{bottom:calc(var(--pad) + 4rem)}
  .hud--brand .r{display:none}
  .hud--tc .val{display:none}
  .head{flex-wrap:wrap}
  .head .meta{width:100%;margin:.4rem 0 0;text-align:left}
  .reel{flex:0 0 62vw}
  .mosaic{gap:.5rem}
  .cred li span:first-child{flex:0 0 50%}
  .lb{padding:3.5rem .6rem 4rem}
  .lb__p,.lb__n{top:auto;bottom:.6rem;transform:none}
  .lb__p{left:22%}.lb__n{right:22%}
  .lb__p:hover,.lb__n:hover{transform:none}
  .lb__c{bottom:1.6rem}
  .sand{font-size:clamp(1.8rem,11vw,4rem)}
  .sand--t{top:11vh}.sand--b{bottom:11vh}
}
@media (hover:none){
  .tile__m img,.tile__m video,.reel img,.reel video{filter:grayscale(.2) brightness(.9)}
  .crew__rule{width:min(70vw,300px) !important}
  .crew__r{color:var(--black) !important}
  .row .d{display:none}
  .row .t{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .grain,.belt__t{animation:none}
  .rise{opacity:1;transform:none}
  *{transition-duration:.01ms !important}
}

/* ---------- servicios y carrusel en móvil ---------- */
@media (max-width:900px){
  .row__c{margin-left:auto}
  .card{flex:0 0 clamp(150px,44vw,200px)}
}
@media (max-width:640px){
  .reels__nav{display:none}
  .card{flex:0 0 46vw}
  .row__c i{width:26px;height:26px;font-size:.9rem}
}
@media (hover:none){
  .card__m img,.card__m video{filter:grayscale(.2) brightness(.9)}
}

/* pie con enlace legal */
.foot a{border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.foot a:hover{color:var(--white);border-color:var(--line-2)}
@media (max-width:640px){ .foot{flex-direction:column;gap:.5rem} }