/* =====================================================================
 * OmnIA · estilos propios de la página de Depósito (deposito.html)
 *
 * ⚠ TODO lo de acá sale de las variables de tokens.css. Ni un hex suelto:
 * es lo único que evita que en seis meses esta página tenga su propia
 * paleta paralela a la del resto del sitio.
 *
 * ⚠ Y va en un archivo, no en un <style>: la CSP de `_headers` es
 * `style-src 'self'` sin unsafe-inline. Un bloque inline no se aplica y la
 * página sale sin diseño. Lo mismo vale para los `style="..."` sueltos:
 * por eso acá hay clases hasta para el ancho de las barras del código.
 * ===================================================================== */

/* ---------- los dos colores que NO están en tokens.css, y por qué ----------
   No son una paleta paralela: son los dos casos que el kit no cubre porque no
   son superficies de marca. Van nombrados para que se lea que fue una decisión
   y no un descuido. Los ratios están MEDIDOS, no estimados.

   1. TINTA SOBRE LOS COLORES DE MARCA. El §4.2 del manual avisa que blanco
      sobre oro da ~3,4:1 y no pasa AA — medido acá: 1,54:1, peor todavía. Con
      tinta oscura, 10,25:1 sobre el oro y 8,67:1 sobre el verde.

   2. PAPEL. La etiqueta de picking del hero es una etiqueta IMPRESA: blanco
      con tinta negra. Si fuera navy no parecería una etiqueta, parecería otra
      tarjeta más del sitio. Medido: 18,50:1 la tinta principal y 6,16:1 la
      secundaria sobre el papel. */
:root{
  --sobre-oro:#2a220c;      /* 10,25:1 sobre --gold  */
  --sobre-ok:#04231a;       /*  8,67:1 sobre --ok    */
  --papel:#fff;
  --tinta:#101418;          /* 18,50:1 sobre --papel */
  --tinta-2:#5a626e;        /*  6,16:1 sobre --papel */
  --papel-linea:#c7ccd4;
}

/* ---------- hero ---------- */
.dep-hero{ padding-top:var(--sp-7) }
.dep-hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:var(--sp-8); align-items:center;
}
.dep-hero-txt{ display:flex; flex-direction:column; gap:var(--sp-4); align-items:flex-start }
.dep-oro{ color:var(--gold) }
.dep-bajada{ color:var(--muted); font-size:var(--fs-xl); max-width:46ch }
.dep-acciones{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; margin-top:var(--sp-2) }
.dep-intro{ color:var(--muted); margin-top:var(--sp-3) }
.seccion h2 + .dep-intro{ margin-top:var(--sp-3) }

/* ---------- la etiqueta de picking del hero ---------- */
.dep-hero-obj{ display:flex; flex-direction:column; align-items:center }
.dep-etiqueta{
  background:var(--papel); color:var(--tinta); border-radius:var(--r-sm);
  padding:var(--sp-4); width:100%; max-width:400px;
  display:flex; flex-direction:column; gap:var(--sp-3);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.75);
}
.dep-etq-arriba{ display:flex; gap:var(--sp-4); align-items:flex-start }
.dep-etq-qr{ width:100px; height:100px; flex:none }
.dep-etq-datos{ min-width:0 }
.dep-etq-sku{ font-weight:700; font-size:var(--fs-lg); letter-spacing:-.01em }
.dep-etq-desc{ font-size:var(--fs-sm); color:var(--tinta-2); line-height:1.35; margin-top:2px }
.dep-etq-cant{ font-family:var(--tit); font-weight:800; font-size:var(--fs-3xl); line-height:1; margin-top:var(--sp-2) }
.dep-etq-tira{ display:flex; gap:1px; height:26px; align-items:stretch }
.dep-etq-tira i{ background:var(--tinta); display:block }
/* Los anchos del código de barras, como clases: un `style=` inline lo bloquearía la CSP. */
.dep-etq-tira .b1{ width:1px } .dep-etq-tira .b2{ width:2px }
.dep-etq-tira .b3{ width:3px } .dep-etq-tira .b4{ width:4px }
.dep-etq-pie{
  border-top:1px dashed var(--papel-linea); padding-top:var(--sp-2);
  display:flex; justify-content:space-between; gap:var(--sp-4);
  font-size:var(--fs-xs); color:var(--tinta-2);
}
.dep-pie-obj{
  font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--subtle); margin-top:var(--sp-3); text-align:center;
}

/* ---------- el problema: tres columnas, sin tarjetas ---------- */
.dep-tres{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); margin-top:var(--sp-6) }
.dep-problema{ border-top:2px solid var(--gold); padding-top:var(--sp-4) }
.dep-problema h3{ margin-bottom:var(--sp-2) }
.dep-problema p{ color:var(--muted); font-size:var(--fs-md) }

/* ---------- demo jugable ---------- */
.dep-mesa{
  display:grid; grid-template-columns:minmax(280px,340px) 1fr;
  gap:var(--sp-5); align-items:start; margin-top:var(--sp-6);
}
.dep-col-rf{ position:sticky; top:88px }
.dep-col-info{ display:flex; flex-direction:column; gap:var(--sp-4); min-width:0 }

.dep-pistola{
  background:var(--navy); border:1px solid var(--line-2);
  border-radius:var(--r-md); overflow:hidden;
}
.dep-pistola-barra{
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--sp-3) var(--sp-4); background:var(--panel);
  border-bottom:1px solid var(--line);
  font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.14em; color:var(--subtle);
}
.dep-pantalla{ padding:var(--sp-4); min-height:392px; display:flex; flex-direction:column; gap:var(--sp-3) }

.dep-paso-rf{ font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--subtle) }
.dep-titulo-rf{ font-family:var(--tit); font-weight:800; font-size:var(--fs-xl); line-height:1.2 }
.dep-sub-rf{ font-size:var(--fs-sm); color:var(--muted) }
.dep-dato-rf{ font-family:var(--tit); font-weight:700; font-size:var(--fs-2xl); color:var(--ink) }
.dep-grande-rf{ font-family:var(--tit); font-weight:800; font-size:var(--fs-4xl); line-height:1; color:var(--ink) }
.dep-elastico{ flex:1 1 auto; min-height:var(--sp-2) }

.dep-caja-rf{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:2px;
}
.dep-caja-ok{ border-color:rgba(52,211,153,.5); background:rgba(52,211,153,.10) }
.dep-caja-mal{ border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.10) }
.dep-caja-fila{ flex-direction:row; gap:var(--sp-3); align-items:center }
.dep-tilde{ font-weight:700; color:var(--ok) }
.dep-tilde-off{ font-weight:700; color:var(--subtle) }
.dep-caja-txt{ font-size:var(--fs-sm) }

.dep-op{
  display:block; width:100%; text-align:left; font-family:var(--cuerpo);
  font-size:var(--fs-md); font-weight:600; padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--panel);
  color:var(--ink); cursor:pointer; min-height:44px;
  transition:border-color var(--ease), background var(--ease);
}
.dep-op:hover{ border-color:var(--muted); background:var(--panel-2) }
.dep-op + .dep-op{ margin-top:var(--sp-2) }
.dep-op small{ display:block; font-weight:400; font-size:var(--fs-sm); color:var(--subtle); margin-top:2px }
.dep-op-buena{ border-color:rgba(95,200,232,.45) }
.dep-op-buena:hover{ border-color:var(--cyan) }
.dep-op-mala{ border-color:rgba(248,113,113,.35) }
.dep-op-mala:hover{ border-color:var(--bad) }
.dep-op-ir{ background:var(--gold); border-color:var(--gold); color:var(--sobre-oro); text-align:center }
.dep-op-ir:hover{ background:var(--gold-1); border-color:var(--gold-1) }

/* ---------- paneles del demo ---------- */
.dep-panel{ padding:var(--sp-4) }
.dep-panel-cabeza{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-4) }
.dep-chip{
  font-size:var(--fs-xs); padding:2px var(--sp-2); border-radius:var(--r-sm);
  background:var(--panel-2); color:var(--muted); white-space:nowrap;
}
.dep-chip-ok{ background:rgba(230,207,139,.14); color:var(--gold) }

.dep-pasillos{ display:flex; gap:var(--sp-2); margin-bottom:var(--sp-4); overflow-x:auto; padding-bottom:4px }
.dep-pasillo{ flex:1 0 auto; min-width:76px; border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-2); text-align:center }
.dep-pasillo-n{ font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.12em; color:var(--subtle) }
.dep-celdas{ display:flex; gap:3px; justify-content:center; margin-top:var(--sp-1) }
.dep-celda{
  width:13px; height:20px; border-radius:2px; background:var(--panel-2);
  /* Sin font-size: las celdas son cuadros de color, no llevan texto. */
  display:grid; place-items:center; color:transparent;
}
.dep-celda-hay{ background:var(--cyan-2); color:var(--ink) }
.dep-celda-hecha{ background:var(--ok); color:var(--sobre-ok) }
.dep-celda-aqui{ background:var(--gold); color:var(--sobre-oro); animation:depLatir 1.4s ease-in-out infinite }
@keyframes depLatir{ 0%,100%{ opacity:1 } 50%{ opacity:.5 } }

.dep-ruta{ list-style:none; display:flex; flex-direction:column }
.dep-ruta li{
  display:grid; grid-template-columns:1.7rem 5.4rem 1fr auto; gap:var(--sp-3);
  align-items:baseline; padding:var(--sp-2) 0; border-top:1px solid var(--line); font-size:var(--fs-sm);
}
.dep-ruta li:first-child{ border-top:0 }
.dep-ruta-n{ font-size:var(--fs-xs); color:var(--subtle) }
.dep-ruta-loc{ font-weight:700 }
.dep-ruta-desc{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dep-ruta-qty{ color:var(--subtle) }
.dep-ruta li.dep-hecha .dep-ruta-loc,
.dep-ruta li.dep-hecha .dep-ruta-desc{ text-decoration:line-through; opacity:.45 }
.dep-ruta li.dep-aqui{ background:rgba(230,207,139,.09); margin-inline:calc(var(--sp-4) * -1); padding-inline:var(--sp-4) }

.dep-traza{ max-height:190px; overflow-y:auto; display:flex; flex-direction:column-reverse; gap:var(--sp-1); font-size:var(--fs-sm) }
.dep-traza-vacio{ color:var(--subtle); font-size:var(--fs-md) }
.dep-fila-traza{ display:grid; grid-template-columns:4.2rem 1fr; gap:var(--sp-2); padding-bottom:var(--sp-1); border-bottom:1px dotted var(--line) }
.dep-fila-traza span{ color:var(--subtle) }
.dep-fila-traza b{ font-weight:500; color:var(--muted) }
.dep-fila-traza.dep-t-mal b{ color:var(--warn) }

.dep-marcadores{ display:flex; gap:var(--sp-6); flex-wrap:wrap }
.dep-marca-n{ font-family:var(--tit); font-weight:800; font-size:var(--fs-2xl); display:block; color:var(--ink) }
.dep-marca-t{ font-size:var(--fs-sm); color:var(--subtle) }

/* ---------- recorrido de pantallas ---------- */
.dep-tour-cabeza{ display:flex; align-items:center; gap:var(--sp-5); margin:var(--sp-6) 0 var(--sp-4); flex-wrap:wrap }
.dep-modos{ display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; flex:none }
.dep-modo{
  font-family:var(--cuerpo); font-size:var(--fs-md); font-weight:700;
  padding:var(--sp-2) var(--sp-4); border:0; background:transparent; color:var(--muted);
  cursor:pointer; min-height:44px; transition:background var(--ease), color var(--ease);
}
.dep-modo + .dep-modo{ border-left:1px solid var(--line-2) }
.dep-modo:hover{ color:var(--ink) }
.dep-modo.activo{ background:var(--gold); color:var(--sobre-oro) }

.dep-barras{ display:flex; gap:5px; flex:1 1 220px; min-width:160px }
.dep-barra{ flex:1; height:3px; background:var(--line); border-radius:2px; overflow:hidden; cursor:pointer }
.dep-barra i{ display:block; height:100%; width:0; background:var(--gold) }
.dep-barra.hecha i{ width:100% }
.dep-barra.activa i{ width:100%; transition:width var(--tour-dur,5s) linear }
.dep-barra.activa.quieta i{ transition:none }

.dep-escena{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--panel) }
.dep-marco-barra{ display:flex; align-items:center; gap:var(--sp-1); padding:var(--sp-2) var(--sp-4); background:var(--panel-2); border-bottom:1px solid var(--line) }
.dep-marco-barra i{ width:8px; height:8px; border-radius:50%; background:var(--line-2); flex:none }
.dep-marco-barra span{ font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.1em; color:var(--subtle); margin-left:var(--sp-2) }
/* ⚠ El alto del marco: el número de acá decide si la captura se lee o no.

   Lo que había antes (`100vh - 560px`) partía de querer ver la sección
   ENTERA desde el ancla —eyebrow, h2, bajada, pestañas y marco— sin
   scrollear. Medido a 1512×860 eso dejaba el marco en 480×300 y la captura
   de 1440×900 se dibujaba al 33%: un texto de 12px salía a 4px. No se leía
   nada, que era el único motivo por el que la captura está ahí.

   El presupuesto correcto es más chico, porque el título no hace falta
   verlo al mismo tiempo que la imagen. Lo que SÍ tiene que entrar junto es
   el marco con sus mandos, para no tener que scrollear para pasar de
   pantalla. Medido en producción a 1512×860:
       73  cabecera pegajosa
     + 34  la barra del marco
     + 114 el pie con el texto y los mandos
     ─────
       221  → se redondea a 240 para dejar aire
   A 860px de ventana el marco pasa a 992×620 y la captura al 69%.

   Y aun así 69% no es 100%: para leer los datos de verdad está el botón
   Ampliar, que abre el visor a pantalla casi completa. Si se agrega o saca
   algo del pie o de la cabecera, este número hay que volver a MEDIRLO. */
.dep-marco{
  aspect-ratio:16/10;   /* el de las capturas: 1440x900 */
  max-height:clamp(300px, calc(100vh - 240px), 720px);
  background:var(--navy); display:grid; place-items:center;
  cursor:zoom-in;
}
.dep-marco img{ width:100%; height:100%; object-fit:contain; object-position:center }

.dep-tour-pie{ display:flex; gap:var(--sp-5); align-items:flex-start; justify-content:space-between; padding-top:var(--sp-4); flex-wrap:wrap }
.dep-tour-txt{ max-width:58ch }
.dep-paso{ font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--subtle); margin-bottom:var(--sp-1) }
.dep-tour-txt h3{ margin-bottom:var(--sp-1) }
.dep-tour-txt p{ color:var(--muted); font-size:var(--fs-md) }
.dep-mandos{ display:flex; gap:var(--sp-2); flex:none }
.dep-btn-mando{
  width:44px; height:44px; border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:var(--panel); color:var(--ink); cursor:pointer; font-size:var(--fs-lg);
  display:grid; place-items:center; transition:border-color var(--ease), background var(--ease);
}
.dep-btn-mando:hover{ border-color:var(--muted); background:var(--panel-2) }
.dep-btn-play{ background:var(--gold); border-color:var(--gold); color:var(--sobre-oro); font-size:var(--fs-sm) }
.dep-btn-play:hover{ background:var(--gold-1); border-color:var(--gold-1) }

/* ---------- grilla de pantallas ---------- */
.dep-grilla{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5) }
.dep-cap{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel); overflow:hidden }
/* La miniatura es un <button>, no un <a>: no navega a ningún lado, abre el
   visor. Se resetea el look de botón y se le pone la lupa del cursor. */
.dep-cap-btn{
  display:block; line-height:0; inline-size:100%;
  padding:0; border:0; background:transparent; cursor:zoom-in;
}
.dep-cap img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center }
/* La pantalla de la lectora ya viene compuesta sobre un lienzo de 1440x900,
   igual que el resto: no necesita su propio ratio. */
.dep-cap figcaption{ padding:var(--sp-3) var(--sp-4) var(--sp-4); font-size:var(--fs-sm); color:var(--muted) }
.dep-cap figcaption strong{ display:block; color:var(--ink); font-family:var(--tit); font-size:var(--fs-lg); margin-bottom:2px }

/* ---------- módulos ---------- */
.dep-modulos{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--sp-6); margin-top:var(--sp-6) }
.dep-modulo{ padding:var(--sp-4) 0; border-top:1px solid var(--line) }
.dep-modulo h3{ font-size:var(--fs-lg) }
.dep-modulo p{ font-size:var(--fs-md); color:var(--muted); margin-top:var(--sp-1) }

/* ---------- pasos ---------- */
.dep-pasos{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); margin-top:var(--sp-6) }
.dep-paso-caja p{ font-size:var(--fs-md); color:var(--muted) }
.dep-paso-cabeza{ display:flex; align-items:baseline; gap:var(--sp-2); border-bottom:2px solid var(--gold); padding-bottom:var(--sp-2); margin-bottom:var(--sp-3) }
.dep-paso-n{ font-family:var(--baj); font-weight:700; font-size:var(--fs-sm); color:var(--gold) }

/* ---------- preguntas ---------- */
.dep-faq{ margin-top:var(--sp-6); border-top:1px solid var(--line) }
.dep-faq details{ border-bottom:1px solid var(--line) }
.dep-faq summary{
  cursor:pointer; padding:var(--sp-4) 0; font-family:var(--tit); font-weight:700;
  font-size:var(--fs-lg); display:flex; justify-content:space-between; gap:var(--sp-5);
  align-items:center; list-style:none; min-height:44px;
}
.dep-faq summary::-webkit-details-marker{ display:none }
.dep-faq summary::after{ content:'+'; color:var(--gold); flex:none; font-size:var(--fs-xl); line-height:1 }
.dep-faq details[open] summary::after{ content:'–' }
.dep-faq details p{ padding-bottom:var(--sp-4); color:var(--muted); font-size:var(--fs-md) }

/* ---------- celular ---------- */
@media (max-width:900px){
  .dep-hero-grid{ grid-template-columns:1fr; gap:var(--sp-6) }
  .dep-mesa{ grid-template-columns:1fr }
  .dep-col-rf{ position:static }
  .dep-tres{ grid-template-columns:1fr; gap:var(--sp-5) }
  .dep-pasos{ grid-template-columns:repeat(2,1fr) }
  .dep-modulos{ grid-template-columns:1fr }
  .dep-grilla{ grid-template-columns:1fr }
}
@media (max-width:600px){
  .dep-bajada{ font-size:var(--fs-lg) }
  .dep-pasos{ grid-template-columns:1fr }
  .dep-marco{ aspect-ratio:16/10 }
  .dep-acciones .btn{ width:100%; justify-content:center }
}


/* ---------- el visor a pantalla casi completa ----------
 *
 * Por qué existe: en línea la captura entra al 69% y los rótulos de las
 * tablas se adivinan más que se leen. El visor la muestra a 1:1 cuando la
 * ventana da, y ahí sí se lee un SKU.
 *
 * Es un <dialog> de verdad, no un div con z-index: el navegador se ocupa
 * solo del foco, del Esc y de tapar el resto de la página. El ::backdrop
 * también es del navegador, así que no hay overlay propio que mantener.
 */

.dep-ampliar{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:var(--sp-1);
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--muted); cursor:pointer;
  font-family:var(--cuerpo); font-size:var(--fs-sm); font-weight:700;
  padding:2px var(--sp-2); min-height:28px;
  transition:color var(--ease), border-color var(--ease);
}
.dep-ampliar:hover{ color:var(--ink); border-color:var(--muted) }

.dep-visor{
  border:0; padding:0; background:transparent;
  max-width:100vw; max-height:100vh; width:100%; height:100%;
  color:var(--ink);
}
.dep-visor::backdrop{ background:rgba(5,8,15,.94) }
.dep-visor-caja{
  block-size:100%; display:flex; flex-direction:column;
  gap:var(--sp-3); padding:var(--sp-4);
}
/* El `min-height:0` no es decorativo: sin él el hijo flex no se deja achicar
   y la imagen se pasa del alto de la ventana con el pie afuera de pantalla. */
.dep-visor-marco{
  flex:1 1 auto; min-height:0; position:relative;
  background:var(--navy); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden;
}
/* ⚠ Absoluta, no `max-height:100%`.
   Con la imagen en flujo, ese porcentaje se resuelve contra un alto que el
   propio contenido está definiendo —referencia cíclica— y el navegador lo
   trata como `none`: medido, la imagen salía 1440×900 adentro de un marco de
   1465×771 y se comía 129px por abajo. Sacada del flujo, el marco manda.

   `scale-down` y no `contain`: la captura mide 1440×900 y en un monitor
   grande `contain` la estiraría a 1920 y saldría borrosa. Así llega hasta
   1:1 y ahí se planta. */
.dep-visor-marco img{
  position:absolute; inset:0;
  inline-size:100%; block-size:100%; object-fit:scale-down;
}
.dep-visor-pie{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-5); flex-wrap:wrap;
}
.dep-visor-txt{ font-size:var(--fs-md); color:var(--muted); max-width:72ch }
.dep-visor-txt b{ color:var(--ink); font-family:var(--tit); font-weight:700 }
.dep-visor-mandos{ display:flex; align-items:center; gap:var(--sp-2); flex:none }
.dep-visor-n{ font-family:var(--baj); font-size:var(--fs-sm); letter-spacing:.1em; color:var(--subtle); padding-inline:var(--sp-2) }

/* La pista solo aparece donde la imagen se arrastra (ver el @media de abajo).
   ⚠ Va ANTES del media query a proposito: declarada despues, la regla base
   `display:none` pisaba al `display:block` del media por venir mas tarde con
   la misma especificidad, y la pista no aparecia nunca. Medido. */
.dep-visor-pista{
  display:none; flex:1 1 100%; order:2;
  font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--subtle);
}

/* ---------- el visor en celular ----------
 *
 * Acá «ampliar» no alcanza. Una captura apaisada de 1440×900 adentro de una
 * pantalla de 390 de ancho entra al 26% —medido—, que es casi lo mismo que
 * en línea (24%): el visor no serviría para nada.
 *
 * Así que en pantallas angostas la imagen va a TAMAÑO REAL y la caja se
 * arrastra. Se lee un SKU de verdad, al precio de moverse por la pantalla,
 * que es exactamente como se mira una captura en un teléfono.
 *
 * El pie también se poda: el texto largo se esconde y quedan el nombre de la
 * pantalla y los mandos, que es lo único que se usa con el pulgar.
 */
@media (max-width:700px){
  .dep-visor-caja{ padding:var(--sp-2) }
  .dep-visor-txt span{ display:none }
  .dep-visor-marco{ overflow:auto; -webkit-overflow-scrolling:touch }
  .dep-visor-marco img{
    position:static; inline-size:auto; block-size:auto;
    max-inline-size:none; max-block-size:none; object-fit:none;
  }
  .dep-visor-pista{ display:block }
}