/* ═══════════ Black Space Studios · sistema ═══════════ */
:root{
  --bg:#08080A; --bg-2:#0D0D10; --bg-3:#131317;
  --fg:#EDEBE7; --fg-dim:#A3A099; --muted:#78756E;
  --line:rgba(237,235,231,.13); --line-hi:rgba(237,235,231,.28);
  --accent:#FF4A24;
  --sans:'Archivo',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --pad:clamp(1.25rem,5vw,5.5rem);
  --maxw:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:clamp(15px,.55vw + 13.4px,17px);
  line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:400}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--fg);color:var(--bg);padding:.75rem 1rem}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.h2{
  font-size:clamp(2.1rem,5.2vw,4.1rem);font-weight:800;line-height:.94;
  letter-spacing:-.038em;margin:0 0 1.25rem;
}
.lead{font-size:clamp(1rem,1.1vw + .7rem,1.2rem);color:var(--fg-dim);max-width:52ch;margin:0 0 1rem;line-height:1.5}
.section__kicker{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.4rem;display:flex;align-items:center;gap:.7rem;
}
.section__kicker::before{content:"";width:1.75rem;height:1px;background:var(--line-hi)}

/* ─────── marca ─────── */
/* El logo real reemplaza al lockup tipografico. Ancho y alto van en el HTML
   para reservar el espacio y evitar que el nav salte al cargar. */
.nav__brand{display:block;line-height:0}
.brand__logo{width:auto;height:clamp(30px,3.4vw,42px);display:block}
.brand__logo--foot{height:clamp(26px,3vw,34px);opacity:.9}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem var(--pad);
  transition:padding .4s var(--ease),border-color .4s;
  border-bottom:1px solid transparent;
}
/* El desenfoque va en un pseudo-elemento a proposito: puesto en .nav,
   backdrop-filter la convierte en bloque contenedor de sus descendientes
   position:fixed y el menu movil deja de medirse contra el viewport. */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:rgba(8,8,10,.82);backdrop-filter:blur(14px) saturate(1.4);
  transition:opacity .4s var(--ease);
}
.nav.is-stuck::before{opacity:1}
.nav.is-open::before{opacity:0}
.nav.is-stuck{border-bottom-color:var(--line);padding-block:.85rem}
.nav__links{display:flex;align-items:center;gap:2rem}
.nav__links a{font-size:.86rem;color:var(--fg);transition:color .25s;position:relative;padding-block:.2rem}
.nav__links a:not(.nav__cta)::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__links a:not(.nav__cta):hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{
  border:1px solid var(--line-hi);border-radius:100px;padding:.55rem 1.1rem!important;
  color:var(--fg)!important;transition:background .3s,border-color .3s,color .3s;
}
.nav__cta:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)!important}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:.5rem;margin-right:-.5rem;position:relative;z-index:2}
.nav__burger span{width:22px;height:1.5px;background:var(--fg);transition:transform .3s var(--ease),opacity .3s}
.nav.is-open .nav__burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav.is-open .nav__burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:7rem var(--pad) 3rem;overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-3}
/* sin filtro: el reel a color pleno. La legibilidad del titular la sostiene
   el degradado de la izquierda, no el apagado del video. */
/* Casi a color pleno: el brillo baja solo lo justo para que los blancos no
   revienten. La legibilidad la sostiene el degradado de la izquierda, no el
   apagado del video, así el producto conserva su color hacia la derecha. */
.hero__video{width:100%;height:100%;object-fit:cover;filter:saturate(.95) brightness(.68)}
.hero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(to bottom,rgba(8,8,10,.95) 0,rgba(8,8,10,.72) 60px,rgba(8,8,10,.3) 130px,rgba(8,8,10,0) 220px),
    linear-gradient(to right,rgba(8,8,10,.96) 0%,rgba(8,8,10,.9) 30%,rgba(8,8,10,.5) 52%,rgba(8,8,10,.14) 78%,rgba(8,8,10,.22) 100%),
    linear-gradient(to top,rgba(8,8,10,.96) 0%,rgba(8,8,10,.4) 34%,rgba(8,8,10,.28) 60%,rgba(8,8,10,.8) 100%);
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;opacity:.045;pointer-events:none;mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__inner{position:relative;max-width:var(--maxw);width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:1.9rem}
.eyebrow{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-dim);margin:0 0 1.2rem;display:flex;align-items:center;gap:.65rem;
}
.rec{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s infinite;flex:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.hero__h1{
  font-size:clamp(3rem,10.5vw,8.8rem);font-weight:800;line-height:.87;letter-spacing:-.048em;
  margin:0 0 1.5rem;max-width:14ch;
}
/* Titular largo: el tamaño de "Filmamos producto." lo partiria en cinco lineas */
.hero__h1--largo{font-size:clamp(2.4rem,6.4vw,5.4rem);max-width:19ch;line-height:.95}
.hero__lead{font-size:clamp(1.02rem,1.1vw + .72rem,1.26rem);line-height:1.45;max-width:46ch;color:var(--fg);margin:0 0 .9rem;font-weight:400}
/* La frase que diferencia queda a contraste pleno; lo que la rodea cede. */
.hero__lead .dim{color:var(--fg-dim)}
.hero__filter{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 1.9rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem}
/* Sombra suave sobre el texto del hero. Es preferible proteger las letras que
   apagar el video: así el reel conserva su color y la bajada se lee igual
   cuando pasa por encima una zona clara. */
.hero__inner .eyebrow,
.hero__lead,
.hero__filter,
.hero__panel .mono,
.panel__note{text-shadow:0 1px 3px rgba(8,8,10,.75),0 2px 14px rgba(8,8,10,.85)}
.hero__h1{text-shadow:0 2px 24px rgba(8,8,10,.5)}


/* botones */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;border-radius:100px;
  padding:.85rem 1.6rem;font-size:.9rem;font-weight:500;letter-spacing:-.01em;
  border:1px solid transparent;transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease);
}
.btn--primary{background:var(--fg);color:var(--bg)}
.btn--primary:hover{background:#fff;transform:translateY(-2px)}
.btn--ghost{border-color:var(--line-hi);color:var(--fg);background:rgba(255,255,255,.07)}
.btn--ghost:hover{border-color:var(--fg);background:rgba(255,255,255,.13)}
.btn--wide{width:100%;justify-content:center;padding-block:1rem;margin-top:.5rem}
.btn__play{width:0;height:0;border-left:8px solid currentColor;border-block:5px solid transparent;margin-left:2px}
.btn__meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--muted)}

/* ── capa de reencuadre ── */
.reframe{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  display:grid;align-items:center;justify-items:end;
  padding:0 clamp(2rem,7vw,7rem) 6rem 0;
}
.reframe__box{
  position:relative;border:1px solid rgba(237,235,231,.42);
  width:min(30vw,430px);aspect-ratio:16/9;
  transition:aspect-ratio .85s var(--ease),width .85s var(--ease);
  will-change:width;
}
.reframe__corner{position:absolute;width:13px;height:13px;border:1.5px solid var(--accent)}
.reframe__corner.tl{top:-1.5px;left:-1.5px;border-right:0;border-bottom:0}
.reframe__corner.tr{top:-1.5px;right:-1.5px;border-left:0;border-bottom:0}
.reframe__corner.bl{bottom:-1.5px;left:-1.5px;border-right:0;border-top:0}
.reframe__corner.br{bottom:-1.5px;right:-1.5px;border-left:0;border-top:0}
.reframe__tag{
  position:absolute;top:-1.9rem;left:0;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);white-space:nowrap;
}

/* ── panel del hero ── */
.hero__panel{
  position:relative;max-width:var(--maxw);width:100%;margin:0 auto;
  border-top:1px solid var(--line);padding-top:1.35rem;margin-top:.5rem;
  display:flex;align-items:center;gap:clamp(1rem,4vw,3.5rem);flex-wrap:wrap;
}
.panel__label{display:flex;align-items:center;gap:.8rem;color:var(--fg-dim)}
.mono--hi{color:var(--fg)}
.panel__arrow{width:2rem;height:1px;background:var(--line-hi);position:relative;flex:none}
.panel__arrow::after{content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;border-top:1px solid var(--line-hi);border-right:1px solid var(--line-hi);transform:rotate(45deg)}
.panel__pills{display:flex;gap:.4rem;flex-wrap:wrap}
.pill{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  padding:.5rem .95rem;border:1px solid var(--line-hi);border-radius:100px;color:var(--fg-dim);
  background:rgba(8,8,10,.55);
  transition:color .25s,border-color .25s,background .25s;
}
.pill:hover{color:var(--fg);border-color:var(--fg)}
.pill.is-active{color:var(--bg);background:var(--fg);border-color:var(--fg)}
.panel__note{font-size:.85rem;color:var(--fg-dim);margin:0;margin-left:auto;text-align:right}

.hero__sound{
  position:absolute;right:var(--pad);bottom:8.5rem;z-index:5;
  width:40px;height:40px;border:1px solid var(--line-hi);border-radius:50%;
  display:grid;place-items:center;background:rgba(8,8,10,.45);
  transition:border-color .3s,background .3s;
}
.hero__sound:hover{border-color:var(--fg);background:rgba(8,8,10,.75)}
.bars{display:flex;align-items:flex-end;gap:2px;height:13px}
.bars i{width:2px;background:var(--fg);height:100%;transform-origin:bottom;animation:eq 1.1s ease-in-out infinite}
.bars i:nth-child(2){animation-delay:.18s}.bars i:nth-child(3){animation-delay:.36s}.bars i:nth-child(4){animation-delay:.09s}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.hero__sound[data-state="paused"] .bars i{animation-play-state:paused;transform:scaleY(.32)}


/* ═══════════ MATERIA ═══════════ */
/* El negro plano se lee barato. Grano fino sobre todo el documento: no se
   percibe como textura, se percibe como que la pantalla tiene profundidad. */
/* Sin mix-blend-mode a proposito: una capa fija a pantalla completa que
   ademas mezcla obliga a recomponer la pagina entera en cada frame de scroll.
   Una superposicion plana de baja opacidad da la misma textura y no cuesta. */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}
/* Planos tonales: cada seccion se apoya en un valor distinto para que el
   scroll tenga relieve en vez de ser una sola superficie negra. */
.method{background:#0A0A0C;position:relative}
.work{background:var(--bg);position:relative}
.contact{background:#0A0A0C;position:relative}
/* Derrame calido: recoge los rojos y ambares del reel y evita que el fondo
   se lea como negro puro. Es un gradiente estatico, no cuesta nada pintar. */
.method::after,.contact::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at 78% 0%,rgba(255,74,36,.055) 0%,transparent 62%);
}

/* ═══════════ PRUEBA ═══════════ */
.proof{padding:clamp(3.5rem,7vw,6rem) var(--pad);max-width:var(--maxw);margin:0 auto;border-bottom:1px solid var(--line)}
/* Cinta continua. A sangre completa y con los bordes desvanecidos, para que
   los nombres no apareaczan ni desaparezcan de golpe. */
.marquee{
  position:relative;overflow:hidden;
  width:100vw;margin-inline:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.proof__row{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;
  gap:clamp(1.5rem,4.5vw,4rem);align-items:center;width:max-content;
  will-change:transform;
}
.marquee__track{animation:desfile var(--dur,40s) linear infinite}
@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.proof__row li{
  font-size:clamp(1rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.02em;
  color:var(--muted);transition:color .3s;white-space:nowrap;flex:none;
}
.proof__row li:hover{color:var(--fg)}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .marquee{-webkit-mask-image:none;mask-image:none;width:auto;margin-inline:0}
  .proof__row{flex-wrap:wrap;width:auto}
}

/* ═══════════ MÉTODO ═══════════ */
.method{padding:clamp(5rem,11vw,9rem) var(--pad);max-width:var(--maxw);margin:0 auto}
.method__head{max-width:64ch;margin-bottom:clamp(3rem,6vw,5rem)}
.method__head .h2{max-width:15ch}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1rem,3vw,3rem);align-items:start;
  padding:clamp(1.6rem,3vw,2.4rem) 0;border-bottom:1px solid var(--line);
  position:relative;
}
.step::before{content:"";position:absolute;inset:0 calc(var(--pad)*-1);background:linear-gradient(90deg,transparent,rgba(255,255,255,.028),transparent);opacity:0;transition:opacity .4s;pointer-events:none}
.step:hover::before{opacity:1}
.step__n{color:var(--muted);padding-top:.35rem}
.step h3{font-size:clamp(1.15rem,1.5vw + .75rem,1.65rem);font-weight:600;letter-spacing:-.025em;line-height:1.15;margin:0}
.step p{margin:0;color:var(--fg-dim);font-size:.97rem;line-height:1.55}
.step--wedge .step__n{color:var(--accent)}
.step--wedge h3{color:var(--fg)}
.step__flag{
  grid-column:2/-1;color:var(--accent);margin-top:.9rem;display:inline-flex;align-items:center;gap:.5rem;
}
.step__flag::before{content:"";width:1.1rem;height:1px;background:var(--accent)}

/* La palabra rota entre sinonimos: "creativo" es jerga de industria y un
   gerente puede no leerla como "video". Rotar ensena la equivalencia sin
   tener que explicarla. */
.rota{
  display:inline-block;color:var(--accent);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.rota.saliendo{opacity:0;transform:translateY(-.18em)}
@media (prefers-reduced-motion:reduce){.rota{transition:none}}

/* ═══════════ LA MULTIPLICACION ═══════════ */
/* "Decenas de piezas" era una manera de hablar: aca es aritmetica, y deja
   ver que la variacion ocurre en tres niveles y no solo en el tamaño. */
.mult{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line);
}
.mult__kicker{color:var(--muted);margin:0 0 1.5rem}
.mult__fila{
  display:flex;align-items:flex-start;gap:clamp(.75rem,2.2vw,2rem);
  flex-wrap:wrap;
}
.mult__nivel{display:grid;gap:.3rem;min-width:0}
.mult__n{
  font-size:clamp(2rem,4.2vw,3.4rem);font-weight:800;line-height:.9;
  letter-spacing:-.04em;color:var(--fg-dim);
}
.mult__et{color:var(--fg);letter-spacing:.12em}
.mult__sub{font-size:.8rem;color:var(--muted);line-height:1.35}
/* los dos niveles que se miden llevan el acento; el formato no */
.mult__nivel--mide .mult__n{color:var(--accent)}
.mult__nivel--total .mult__n{color:var(--fg)}
.mult__op{
  font-size:clamp(1rem,2vw,1.5rem);color:var(--muted);
  line-height:1;padding-top:.55rem;flex:none;
}
.mult__nota{
  margin:clamp(1.75rem,3vw,2.5rem) 0 0;color:var(--fg-dim);
  font-size:.98rem;max-width:56ch;line-height:1.55;
}
.mult__nota strong{color:var(--fg);font-weight:600}
@media (max-width:720px){
  .mult__fila{gap:.6rem 1rem}
  .mult__sub{display:none}
}

/* ═══════════ LA CUÑA: LA MEDICION ═══════════ */
/* Es el unico diferenciador que no es punto de paridad, y estaba como cuarto
   item de una lista. Sale a seccion propia con el mismo peso visual que
   "Un rodaje, decenas de piezas" y "Filmar producto es un oficio aparte". */
.wedge{
  position:relative;background:var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.wedge::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(80% 100% at 12% 50%,rgba(255,74,36,.09) 0%,transparent 62%);
}
.wedge__inner{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:clamp(5rem,11vw,9rem) var(--pad);
  border-left:2px solid var(--accent);
  margin-left:var(--pad);padding-left:clamp(1.25rem,3vw,2.5rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(1.5rem,5vw,4rem);
}
.wedge__texto{min-width:0}
/* Sigue la serie 01·02·03 del metodo, pero a otra escala: es el paso que
   importa. Contorneado en vez de relleno para que no compita con el titular. */
.wedge__n{
  font-size:clamp(5.5rem,13vw,13rem);font-weight:800;line-height:.78;
  letter-spacing:-.06em;color:transparent;
  -webkit-text-stroke:1.5px var(--accent);
  opacity:.9;user-select:none;justify-self:end;
}
.wedge__body{
  font-size:clamp(1.15rem,1.5vw + .78rem,1.6rem);line-height:1.4;
  letter-spacing:-.02em;color:var(--fg);max-width:34ch;margin:0 0 1.75rem;
}
.wedge__nota{font-size:.98rem;line-height:1.55;color:var(--fg-dim);max-width:52ch;margin:0}

/* ═══════════ TRABAJO ═══════════ */
.work{padding:clamp(4rem,9vw,7rem) var(--pad) clamp(5rem,10vw,8rem);max-width:var(--maxw);margin:0 auto}
.work__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.work__title{min-width:0}
.work__head .h2{margin:0}
/* La seleccion es una decision, no un catalogo filtrable: decirlo vale mas
   que dejar al visitante armar combinaciones. */
.work__nota{
  margin:0;color:var(--fg-dim);font-size:.95rem;line-height:1.5;
  text-align:right;max-width:34ch;
  border-right:2px solid var(--line-hi);padding-right:1rem;
}
/* ── carruseles del portafolio ──
   Horizontales y verticales en filas separadas: recortar un 9:16 dentro de una
   tarjeta apaisada desperdicia justo lo que distingue a ese formato. */
.rail{margin-bottom:clamp(2.25rem,4vw,3.5rem)}
.rail:last-child{margin-bottom:0}
.rail__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.85rem}
.rail__label{color:var(--muted);margin:0;display:flex;align-items:center;gap:.6rem}
.rail__ar{width:15px;height:9px;border:1px solid var(--line-hi);border-radius:1px;flex:none}
.rail__ar--v{width:9px;height:15px}
.rail__nav{display:flex;gap:.35rem}
.arrow{
  width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--fg-dim);font-size:1.05rem;line-height:1;
  transition:color .25s,border-color .25s,background .25s,opacity .25s;
}
.arrow:hover:not(:disabled){color:var(--bg);background:var(--fg);border-color:var(--fg)}
.arrow:disabled{opacity:.28;cursor:default}
.rail__track{
  display:flex;gap:clamp(.5rem,1.2vw,1rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  /* Sin scroll-snap: al pasar el scroll vertical por encima, el anclaje
     re-alineaba la pista y se sentia como que el scroll se trababa. Las
     flechas ya avanzan por tarjetas completas, asi que no hacia falta. */
  scrollbar-width:none;padding-bottom:2px;
  /* el gesto tactil vertical se lo queda la pagina, no el carrusel */
  touch-action:pan-x pinch-zoom;
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
}
.rail__track::-webkit-scrollbar{display:none}
.rail__track:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.card{
  position:relative;border:0;padding:0;text-align:left;overflow:hidden;background:var(--bg-2);
  border-radius:3px;cursor:pointer;display:block;flex:none;
  --h:clamp(158px,20vw,244px);
  height:var(--h);width:calc(var(--h) * 16 / 9);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.rail--v .card{--h:clamp(268px,34vw,420px);width:calc(var(--h) * 9 / 16)}
.card.is-hidden{display:none}
/* En reposo bajan un punto para que la grilla se lea como conjunto; al pasar
   el mouse recuperan el color tal cual se entregó la pieza. La transición de
   filtro vuelve a estar acá porque el hover ya está desactivado durante el
   scroll, que era lo que producía los tirones. */
.card__img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter .45s var(--ease);
  filter:saturate(.78) brightness(.84)}
.card:hover .card__img{transform:scale(1.045);filter:none}
/* durante el scroll, las tarjetas no reaccionan al puntero */
.scrolleando .card{pointer-events:none}
.card__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.92) 0%,rgba(8,8,10,.15) 55%,transparent 100%)}
.card__body{position:absolute;left:1rem;right:1rem;bottom:.9rem;display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem}
.card__cat{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.3rem}
.card__title{font-size:.97rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;display:block}
.card__client{font-size:.79rem;color:var(--fg-dim);display:block;margin-top:.15rem}
.card__dur{font-family:var(--mono);font-size:.61rem;color:var(--muted);flex:none;padding-bottom:.15rem}
.card__play{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  display:grid;place-items:center;opacity:0;scale:.85;transition:opacity .4s var(--ease),scale .4s var(--ease);
  background:rgba(8,8,10,.4);
}
.card:hover .card__play{opacity:1;scale:1}
.card__play::after{content:"";width:0;height:0;border-left:9px solid #fff;border-block:6px solid transparent;margin-left:3px}
.rail.is-empty{display:none}

@media (max-width:720px){
  .rail__nav{display:none}
  .work__nota{text-align:left;border-right:0;border-left:2px solid var(--line-hi);padding:0 0 0 1rem}
}

/* ═══════════ OFICIO ═══════════ */
/* El video queda fijo de fondo mientras el texto sube con el scroll normal.
   Solo la capa de video es pegajosa; el contenido corre por encima. El avance
   dentro de la seccion se mapea a currentTime: bajar avanza, subir retrocede. */
.craft{
  position:relative;background:var(--bg-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.craft__media{
  position:sticky;top:0;height:100svh;overflow:hidden;z-index:0;background:#000;
}
/* sin filtro: el color tal como salio del grading */
.craft__canvas{width:100%;height:100%;display:block}
.craft__scrim{
  position:absolute;inset:0;
  /* El degradado protege solo la columna del texto y muere rapido: de la
     mitad del cuadro hacia la derecha la imagen va limpia, sin nada encima. */
  background:
    linear-gradient(to right,rgba(8,8,10,.92) 0%,rgba(8,8,10,.7) 24%,rgba(8,8,10,.24) 42%,transparent 54%),
    linear-gradient(to bottom,rgba(8,8,10,.5) 0,transparent 13%,transparent 87%,rgba(8,8,10,.45) 100%);
}
/* El margen negativo sube el texto sobre el video pegajoso; el padding
   generoso es lo que da recorrido al scrub. */
.craft__inner{
  position:relative;z-index:1;margin-top:-100svh;
  max-width:var(--maxw);margin-inline:auto;width:100%;
  padding:80svh var(--pad);
}
.craft__credit{color:var(--muted);margin:2.5rem 0 0;display:flex;align-items:center;gap:.6rem}
.craft__credit::before{content:"";width:1.4rem;height:1px;background:var(--line-hi)}
.craft__body{font-size:clamp(1.05rem,1.3vw + .7rem,1.35rem);line-height:1.5;color:var(--fg-dim);max-width:58ch;margin:0 0 2.5rem}
.craft__renuncia{
  font-size:clamp(1.35rem,3.2vw,2.4rem);font-weight:600;letter-spacing:-.032em;line-height:1.2;
  margin:0;padding-left:clamp(1rem,2vw,1.75rem);border-left:2px solid var(--accent);max-width:30ch;
}
.craft__renuncia strong{font-weight:800}
@media (prefers-reduced-motion:reduce){
  .craft__media{position:static;height:60svh}
  .craft__inner{margin-top:0;padding-block:clamp(5rem,11vw,9rem)}
}
@media (max-width:720px){
  .craft__inner{padding-block:60svh}
  .craft__scrim{background:linear-gradient(to bottom,rgba(8,8,10,.9) 0,rgba(8,8,10,.72) 45%,rgba(8,8,10,.92) 100%)}
}

/* ═══════════ CONTACTO ═══════════ */
.contact{
  max-width:var(--maxw);margin:0 auto;padding:clamp(5rem,11vw,9rem) var(--pad);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(2.5rem,6vw,6rem);
}
.contact__meta{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:.6rem;color:var(--muted)}
.contact__meta a{border-bottom:1px solid var(--line-hi);padding-bottom:2px;transition:color .25s,border-color .25s}
.contact__meta a:hover{color:var(--fg);border-color:var(--fg)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.field{display:grid;gap:.5rem;min-width:0}
.field--full{grid-column:1/-1}
.field label,.field legend{font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding:0}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.6rem 0;color:var(--fg);font-family:inherit;font-size:.98rem;border-radius:0;
  transition:border-color .3s;
}
.field input::placeholder{color:#4A4844}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--fg)}
.field textarea{resize:vertical;border:1px solid var(--line);padding:.8rem;border-radius:3px}
.field textarea:focus{border-color:var(--fg)}
fieldset.field{border:0;margin:0;padding:0}
.opts{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.2rem}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{
  display:inline-block;font-size:.82rem;padding:.5rem .9rem;border:1px solid var(--line);
  border-radius:100px;color:var(--fg-dim);transition:color .25s,border-color .25s,background .25s;
}
.opt:hover span{border-color:var(--line-hi);color:var(--fg)}
.opt input:checked + span{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.opt input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.field.is-error input{border-bottom-color:var(--accent)}
.form__aviso{
  grid-column:1/-1;margin:.4rem 0 0;color:var(--muted);
  font-size:.84rem;line-height:1.5;max-width:52ch;
}
.form__status{grid-column:1/-1;margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-height:1rem}
.form__status.is-ok{color:var(--fg)}
.form__status.is-err{color:var(--accent)}

/* ═══════════ FOOTER ═══════════ */
.foot{
  border-top:1px solid var(--line);max-width:var(--maxw);margin:0 auto;
  padding:2.5rem var(--pad) 3rem;display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:center;
}
.foot p{margin:0;color:var(--muted)}
.foot__legal{margin-left:auto!important}

/* ═══════════ LIGHTBOX ═══════════ */
.lightbox{
  position:fixed;inset:0;z-index:120;background:rgba(4,4,6,.95);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:clamp(1rem,3vw,2.5rem);gap:1rem;grid-auto-rows:min-content;
  align-content:center;animation:fade .3s var(--ease);
}
.lightbox[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* Se dimensiona por el alto disponible en vez de un tope fijo de ancho: con
   un tope fijo, en pantallas grandes sobraba espacio y el video quedaba chico.
   --lb-ar lo fija JS con la proporcion real de cada pieza, para que un 9:16 no
   se muestre encajado dentro de un marco apaisado. */
.lightbox__frame{
  aspect-ratio:var(--lb-ar,16/9);
  height:min(84svh,1100px);width:auto;max-width:94vw;
  background:#000;border-radius:3px;overflow:hidden;
}
/* El iframe cuelga de #lbSlot, no del marco. Sin altura explicita en ese
   contenedor intermedio, el height:100% del iframe no resuelve y cae a los
   150px por defecto: el marco crecia y el video seguia enano. */
.lightbox__frame > div{width:100%;height:100%}
.lightbox__frame iframe{width:100%;height:100%;border:0;display:block}
.lightbox__caption{color:var(--fg-dim);margin:0;text-align:center}
.lightbox__close{position:fixed;top:1.4rem;right:1.6rem;font-size:2rem;line-height:1;color:var(--fg-dim);transition:color .25s;padding:.5rem}
.lightbox__close:hover{color:var(--fg)}

/* ═══════════ REVEAL ═══════════ */
/* Mejora progresiva: el contenido nace visible. Solo se esconde si JS
   confirmo que el observer existe y funciona (clase .js-reveal en <html>).
   Si el observer no responde, main.js quita la clase y todo queda visible. */
.js-reveal [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-reveal [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-reveal [data-reveal]{opacity:1;transform:none}}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:900px){
  .wedge__inner{grid-template-columns:1fr;gap:1.5rem}
  .wedge__n{justify-self:start;order:-1;font-size:clamp(4rem,16vw,7rem)}
  .step{grid-template-columns:3rem 1fr;gap:1rem 1.25rem}
  .step p{grid-column:2}
  .step__flag{grid-column:2}
  .reframe__box{width:min(40vw,320px)}
  .hero__sound{bottom:auto;top:5.5rem}
}
@media (max-width:720px){
  .nav__burger{display:flex}
  .nav__links{
    position:fixed;inset:0;flex-direction:column;justify-content:center;gap:1.75rem;
    background:rgba(8,8,10,.97);backdrop-filter:blur(20px);
    transform:translateY(-100%);transition:transform .5s var(--ease);
  }
  .nav.is-open .nav__links{transform:none}
  .nav__links a{font-size:1.5rem;font-weight:600;color:var(--fg)}
  .hero{padding-top:6rem;min-height:100svh}
  .hero__inner{padding-bottom:1.5rem}
  .hero__panel{gap:.9rem}
  .panel__note{margin-left:0;flex-basis:100%;text-align:left}
  /* el marco pasa a testigo de formato arriba a la izquierda: en movil
     chocaba con el titular ocupando el centro de la pantalla */
  .reframe{align-items:flex-start;justify-items:flex-start;padding:5.9rem 0 0 1.4rem;opacity:.85}
  .reframe__box{width:auto!important;height:58px}
  .reframe__tag{font-size:.58rem;top:-1.5rem}
  .form{grid-template-columns:1fr}
  .foot__legal{margin-left:0!important}
}