/* vitrina.css — /que-hacemos · «Trabajo en línea» como VITRINA (8-oct-2026; paco eligió T3 de _mock-trabajo/). v5.
   · Un solo formato: tres tarjetas 3:4 con las fotos de la home hechas como juego (pieza-*.webp) + una cuarta que cierra
     la fila y lleva a /trabajo. Mismo marco que las tomas de arriba (esquinas --r, borde casi invisible).
   · Se ve la FOTO; al dejar el cursor quieto sobre un caso, su clip vertical entra con un fundido (nunca durante el scroll).
   · La fila la desliza el scroll de la página; también se arrastra (ratón) o se desliza (dedo). Lógica en vitrina.js.
   Nada de difuminados (paco). */
.vt{ --r:clamp(14px,1.5vw,22px); --alto:clamp(17rem, 62svh, 36rem); --hueco:clamp(1rem,2.4vw,2rem);
  position:relative; overflow:hidden; padding-inline:var(--borde) !important }
.vt__cab{ display:flex; justify-content:space-between; align-items:end; gap:2rem; margin:0 0 clamp(1.4rem,3.5svh,2.4rem) }
.vt__cab .d2{ margin:0 }
.vt__pista{ margin:0; font-size:var(--t6,.875rem); color:var(--tx-2,rgba(237,239,243,.62)) }
.vt__pista .-dedo{ display:none }
@media (hover:none){ .vt__pista .-raton{ display:none } .vt__pista .-dedo{ display:inline } }

/* el riel: a sangre por los dos lados; scroll horizontal nativo, sin imán (la fila la mueve el scroll de la página) */
.vt__riel{ list-style:none; margin:0 calc(var(--borde) * -1); padding:0 var(--borde); display:flex; gap:var(--hueco);
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; cursor:grab; -webkit-user-select:none; user-select:none }
.vt__riel::-webkit-scrollbar{ display:none }
.vt__riel.-arrastra{ cursor:grabbing }
.vt__caso{ flex:none; width:calc(var(--alto) * .75) }
.vt__caso a{ display:block; text-decoration:none; color:inherit; -webkit-user-drag:none }
.vt__marco{ position:relative; height:var(--alto); border-radius:var(--r); overflow:hidden; isolation:isolate; background:#101216 }
.vt__marco::after{ content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(237,239,243,.08); pointer-events:none }
.vt__marco video, .vt__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none }
.vt__foto{ z-index:2; transition:opacity .45s cubic-bezier(.23,1,.32,1) }
.vt__caso.-mueve .vt__foto{ opacity:0 }   /* el clip ya está corriendo: la foto se funde y lo deja ver */
.vt__pie{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:.8rem; margin:.85rem 0 0 }
.vt__pie b{ font-weight:400; font-size:var(--t4,1.1875rem); letter-spacing:-.01em; line-height:1.2; color:var(--tx-1,#EDEFF3) }
.vt__pie span{ font-size:var(--t6,.875rem); color:var(--tx-2,rgba(237,239,243,.62)) }
.vt__pie i{ font-style:normal; font-size:var(--t6,.875rem); color:var(--tx-2,rgba(237,239,243,.62));
  transition:transform var(--rapido,.22s) var(--curva,cubic-bezier(.23,1,.32,1)), color var(--rapido,.22s) }
.vt__caso.-encima .vt__pie i{ transform:translate(3px,-3px); color:var(--tx-1,#EDEFF3) }
.vt__caso a:focus-visible{ outline:none } .vt__caso a:focus-visible .vt__marco{ box-shadow:0 0 0 2px var(--tx-1,#EDEFF3) }

/* la última: cierra la fila y lleva a todo el trabajo */
.vt__caso.-fin .vt__marco{ background:rgba(237,239,243,.03); display:flex; flex-direction:column; justify-content:space-between; padding:clamp(1.2rem,2.2vw,1.8rem) }
.vt__todo{ order:2; font-size:var(--t2,3rem); line-height:1.02; letter-spacing:-.03em; color:var(--tx-1,#EDEFF3); max-width:8ch }
.vt__flecha{ order:1; align-self:flex-end; font-style:normal; font-size:var(--t3,1.75rem); color:var(--tx-2,rgba(237,239,243,.62));
  transition:transform var(--base,.42s) var(--curva,cubic-bezier(.23,1,.32,1)), color var(--base,.42s) }
.vt__caso.-fin.-encima .vt__flecha{ transform:translate(5px,-5px); color:var(--tx-1,#EDEFF3) }
.vt__caso.-fin.-encima .vt__marco{ background:rgba(237,239,243,.06) }

/* la barra: cuánto del riel ya pasó (no dice cuántos casos hay) */
.vt__barra{ position:relative; height:1px; margin-top:clamp(1.4rem,3.5svh,2.2rem); background:rgba(237,239,243,.12) }
.vt__barra span{ position:absolute; left:0; top:-1px; height:3px; width:var(--ancho,30%); border-radius:2px; background:var(--tx-1,#EDEFF3);
  transform:translateX(var(--x,0px)); will-change:transform }

/* el círculo del cursor (v6): FIJO a la ventana y deslizándose detrás del puntero (vitrina.js lo persigue con inercia);
   la palabra dice lo que va a pasar: «Ver» sobre un caso, «Arrastra» en la fila, «← →» mientras arrastras.
   Mientras está, el cursor normal se esconde: dos cursores a la vez se leían rotos. */
.vt__cursor{ position:fixed; left:0; top:0; z-index:60; width:4.75rem; height:4.75rem; margin:-2.375rem 0 0 -2.375rem; border-radius:50%;
  display:grid; place-items:center; font-size:.8125rem; letter-spacing:.01em; color:#08090C; background:#EDEFF3; pointer-events:none;
  opacity:0; scale:.4; transform:translate3d(var(--cx,-200px),var(--cy,-200px),0); will-change:transform;
  transition:opacity .3s ease, scale .45s cubic-bezier(.23,1,.32,1), width .35s cubic-bezier(.23,1,.32,1), height .35s cubic-bezier(.23,1,.32,1), margin .35s cubic-bezier(.23,1,.32,1) }
.vt__cursor span{ display:block; transition:opacity .2s ease }
.vt.-cursor .vt__cursor{ opacity:1; scale:1 }
.vt.-cursor .vt__riel, .vt.-cursor .vt__riel a{ cursor:none }
.vt__cursor.-ver{ width:4rem; height:4rem; margin:-2rem 0 0 -2rem }
.vt__cursor.-presiona{ scale:.82 }
@media (hover:none){ .vt__cursor{ display:none } .vt__riel{ cursor:auto } }
@media (max-width:720px){ .vt{ --alto:clamp(15rem,78vw,24rem) } .vt__cab{ align-items:start; flex-direction:column; gap:.5rem } .vt__todo{ font-size:var(--t3,1.75rem) } }
@media (prefers-reduced-motion:reduce){ .vt__foto, .vt__cursor, .vt__pie i, .vt__flecha{ transition:none } }