/* La ficha del anuncio, copiada del panel.

   Esto NO se escribió acá: son las reglas .visor/.vn-/.v- de
   backend/admin/panel.css extraídas tal cual, para que la muestra del home sea
   el producto y no una maqueta que se le parece. Si el panel cambia, esto se
   vuelve a extraer; no se edita a mano, salvo el bloque del final.

   Faltaban doce variables que el panel define en su propio :root y el sitio no
   tiene. Van acá abajo con los mismos valores, claro y oscuro.

   Las ocho de abajo de todo estaban escritas en .dm-visor, que era el envoltorio
   de la maqueta vieja. Al pasar la muestra al markup del panel ese envoltorio
   desapareció y se las llevó puestas, así que la ficha salió al aire sin ellas:
   --ok indefinida deja el fill de la medialuna en negro (el verde del puntaje
   se perdía), --tinte-2 y --tinte-3 dejan los carriles de las barras y las
   rayas en transparente, y --rs deja el video y las tarjetas con las puntas
   cuadradas. Se ve en la captura que marcó Richard. Van al :root porque el
   markup del panel no tiene un contenedor propio del que colgarlas. */
:root {
  --line-fuerte: rgba(23,23,23,.26);
  --sobre-acento: #fff;
  --velo: rgba(20,18,15,.42);
  --velo-vidrio: rgba(190,195,203,.85);
  --ok: #1c7a4a;
  --ok-suave: #e8f5ee;
  --ok-borde: rgba(28,122,74,.25);
  --alerta: #c2410c;
  --oro: #b98b2e;
  --tinte-2: rgba(23,23,23,.08);
  --tinte-3: rgba(23,23,23,.13);
  --rs: 10px;
}
:root[data-theme="dark"] {
  --line-fuerte: rgba(255,255,255,.3);
  --sobre-acento: #0c0c0d;
  --velo: rgba(0,0,0,.62);
  --velo-vidrio: rgba(10,10,12,.84);
  --ok: #57c07c;
  --ok-suave: rgba(87,192,124,.14);
  --ok-borde: rgba(87,192,124,.3);
  --alerta: #ff8a4c;
  --oro: #e0b455;
  --tinte-2: rgba(255,255,255,.09);
  --tinte-3: rgba(255,255,255,.14);
}



.vp-cupo { margin: .5rem 0 0; font-size: .8rem; color: var(--ink-3); }

.vp-cupo b { color: var(--ink-2); }

.vp-estado { margin: .8rem 0 0; font-size: .84rem; color: var(--ink-2); line-height: 1.5; }

.vp-estado.mal { color: var(--alerta); }


.vp-nota {
  margin: .6rem 0 0; padding: .6rem .8rem;
  font-size: .82rem; line-height: 1.5; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--alerta); border-radius: var(--rs);
}



.v-acc:not([open]) .v-copiar { display: none; }

.v-copiar {
  border: 0; background: none; cursor: pointer; padding: .25rem;
  margin: -.25rem 0 -.25rem 0;
  display: inline-flex; color: var(--ink-3); border-radius: 8px;
  animation: copiar-entra .22s cubic-bezier(.32,.72,0,1);
  transition: color .18s ease-out, background-color .18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
 .v-copiar { animation: none; }
}

.v-copiar svg { width: .95rem; height: .95rem; }

.v-copiar:hover { color: var(--ink); background: var(--surface-2); }

.v-copiar:active { transform: scale(.92); transition: none; }


.v-copiar.ok { color: #1D8A4E; }


.vp-vacio { display: flex; flex-direction: column; gap: .55rem; align-items: stretch; margin: 0; padding: 0; }

.vp-vacio .btn { justify-content: center; padding: .85rem 1rem; border-radius: 100px; font-size: .92rem; }

.vp-vacio p { margin: 0; text-align: center; }



.visor { position: fixed; inset: 0; z-index: 200; background: rgba(10,10,12,.72);
  display: flex; align-items: center; justify-content: center; padding: 1.4rem; backdrop-filter: blur(16px); }

.visor-caja {
  --v-card: var(--surface); --v-sombra: 0 2px 4px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.09);
  position: relative; width: min(1100px, 96vw); height: min(880px, 92vh);
  border-radius: 32px; overflow: hidden; background: var(--surface-2); color: var(--ink);
  box-shadow: 0 40px 120px rgba(0,0,0,.5);
  animation: visor-entra .34s cubic-bezier(.2,.9,.3,1);
}



.v-ambi {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  
  filter: blur(64px) contrast(.34) brightness(2) saturate(5);
  opacity: .88; z-index: 0; pointer-events: none;
  
  -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 0 34%, rgba(0,0,0,.5) 74%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at center, #000 0 34%, rgba(0,0,0,.5) 74%, transparent 100%);
}


.v-cine, .v-panel { min-height: 0; }


.v-cine { position: relative; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 3.3rem 2.9rem; }




.v-marco {
  position: relative; z-index: 1; display: block; margin: auto;
  width: 100%; height: 100%;
}

.v-cine #vVideo,
.v-cine #vImagen {
  display: block; width: 100%; height: 100%; object-fit: contain;
  border-radius: 28px; background: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.1), 0 18px 50px rgba(0,0,0,.22);
}


img.v-ambi { object-fit: cover; }

.v-chips { position: absolute; top: .85rem; left: .85rem; display: flex; gap: .35rem; pointer-events: none; }

/* la píldora de cada dato del archivo. Se había quedado afuera de la
   extracción y los tres chips salían como una línea de texto negro encima
   del video, que fue lo primero que se ve mal en la captura de Richard */
.v-chip {
  background: rgba(12,12,14,.55); backdrop-filter: blur(14px); color: #fff;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .08em;
  padding: .25rem .55rem; border-radius: 100px;
}


.v-truco-pill {
  position: absolute; left: .8rem; right: .8rem; bottom: .8rem;
  display: flex; gap: .65rem; align-items: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(22px) saturate(1.5);
  border-radius: 100px; padding: .6rem 1.35rem .6rem .6rem;
  box-shadow: 0 6px 26px rgba(0,0,0,.2);
  font-size: .76rem; line-height: 1.4; color: var(--ink); cursor: pointer;
  
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.9,.3,1);
}

.v-truco-pill.entro { opacity: 1; transform: translateY(0); }

.v-truco-pill.fue { opacity: 0; transform: translateY(10px); pointer-events: none; }

.v-truco-pill b { display: block; font-family: var(--mono); font-size: .54rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-3); margin-bottom: .12rem; font-weight: 500; }

.v-truco-pill span:last-child { min-width: 0; }

.v-truco-ico { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 100px; background: var(--ink); color: var(--sobre-acento); display: grid; place-items: center; }

.v-truco-ico svg { width: 1rem; height: 1rem; }

.v-truco p { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--ink-2); }


.visor-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 210;
  width: 2.6rem; height: 2.6rem; border-radius: 100px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(10px);
  display: grid; place-items: center; transition: background .15s, transform .15s;
}

.visor-nav:hover { background: rgba(255,255,255,.28); }

.visor-nav svg { width: 1.2rem; height: 1.2rem; }


.visor-nav.izq { left: calc(50% - min(550px, 48vw) - 3.6rem); }

.visor-nav.der { right: calc(50% - min(550px, 48vw) - 3.6rem); }

.visor-nav.der svg { transform: rotate(180deg); }
@media (max-width: 1260px) {

  .visor-nav.izq { left: 1rem; }

  .visor-nav.der { right: 1rem; }

  .visor-nav { background: var(--velo); }
}

.visor-x { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 3; width: 2.2rem; height: 2.2rem;
  border-radius: 100px; border: 0; cursor: pointer; color: var(--ink);
  background: var(--surface); box-shadow: var(--v-sombra); transition: transform .15s; }

.visor-x:hover { transform: scale(1.08); }
@media (max-width: 900px) {

  .v-cine { padding: 1rem 1rem 0; }
}


.visor-caja .vp, .visor-caja .vp-armar {
  border: 0; margin: 0; padding: .95rem 1.05rem;
  background: var(--v-card); border-radius: 20px; box-shadow: var(--v-sombra);
}

.visor-caja .vp-vacio { border: 0; }

.visor-caja .vp-cab h4 { font-size: .78rem; font-weight: 700; letter-spacing: .04em; }

.visor-caja .vp-texto { background: var(--surface-2); border: 0; border-radius: 14px; max-height: 15rem; }

.visor-caja .vp-ref { border-radius: 14px; }

.visor-caja .vp-acciones .btn { border-radius: 100px; }

.visor-caja ::-webkit-scrollbar { width: 8px; }

.visor-caja ::-webkit-scrollbar-thumb { background: var(--tinte-3); border-radius: 100px; }

.visor-caja ::-webkit-scrollbar-track { background: transparent; }



.visor-caja.con-prompt { max-width: 62rem; }

.visor-caja.con-prompt .visor-info { max-height: 78vh; overflow-y: auto; }


.vp { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

.vp-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }

.vp-cab h4 { margin: 0; font-size: .86rem; font-weight: 650; }

.vp-texto {
  margin: 0; padding: .85rem 1rem; max-height: 17rem; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rs);
  font-family: var(--mono); font-size: .74rem; line-height: 1.6; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}

.vp-vars { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }

.vp-vars span {
  padding: .2rem .5rem; border-radius: 100px; background: var(--surface-2);
  border: 1px solid var(--line); font-family: var(--mono); font-size: .64rem; color: var(--ink-2);
}

.vp-nota { margin: .6rem 0 0; font-size: .78rem; color: var(--ink-2); line-height: 1.5; }

.vp-vacio { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-3); }


.vp-armar { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }

.vp-dur { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

.vp-dur label { font-size: .8rem; font-weight: 550; }

.vp-dur input[type="range"] { flex: 1; min-width: 9rem; accent-color: var(--ink); }

.vp-dur output { font-family: var(--mono); font-size: .8rem; min-width: 2.4rem; }

.vp-nativa { font-size: .72rem; color: var(--ink-3); }



.vp-refs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .5rem; margin-top: .8rem;
}

.vp-refs-t { grid-column: 1 / -1; font-size: .76rem; color: var(--ink-2); }


.vp-ref {
  display: flex; flex-direction: column; gap: .12rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: var(--rs);
  background: var(--surface-2);
}

.vp-ref b { font-size: .76rem; font-weight: 600; }

.vp-ref b code {
  font-family: var(--mono); font-size: .68rem; color: var(--oro);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: .02rem .25rem; margin-right: .15rem;
}

.vp-ref em { font-size: .68rem; color: var(--ink-3); font-style: normal; line-height: 1.4; }


.vp-acciones { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }

.vp-estado { margin: .6rem 0 0; font-size: .76rem; color: var(--ink-2); min-height: 1rem; }

.vp-estado.mal { color: var(--alerta); }

.vp-costo { align-self: center; font-size: .74rem; color: var(--ink-3); font-family: var(--mono); }



.visor.vn { background: var(--velo-vidrio); backdrop-filter: blur(18px); }

.vn .vn-caja { width: min(1320px, 97vw); height: min(880px, 94vh);
  display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; gap: 1rem;
  align-items: start;
  background: transparent; overflow: visible; box-shadow: none; animation: none; }

.vn .vn-main { min-width: 0; align-self: stretch; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 26px; overflow: hidden; }

.vn .vn-lateral { display: flex; flex-direction: column; gap: .25rem;
  background: var(--surface); border-radius: 26px; padding: 1.1rem 1rem; align-self: start; }



.vn-cab { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  padding: 1.5rem var(--cab-x, 1.9rem) 1.3rem; position: relative; flex: none; }


.vn-cab::after { content: ''; position: absolute; bottom: 0;
  left: var(--cab-x, 1.9rem); right: var(--cab-x, 1.9rem);
  border-bottom: 1px solid var(--line); }

.vn-aro { width: 5.1rem; height: 5.1rem; flex: none; border-radius: 50%; padding: 3px;
  background: var(--line); }

.vn-aro.con-ig { background: conic-gradient(from 210deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34); }

.vn-aro img, .vn-aro .vn-inicial { width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; display: block; border: 3px solid var(--surface); }

.vn-aro .vn-inicial { display: grid; place-items: center; background: var(--surface-2);
  color: var(--ink-2); font-weight: 700; font-size: 1.7rem; font-style: normal; }

.vn-quien { flex: 1; min-width: 0; margin-right: 1rem; }

.vn-handle { display: flex; align-items: center; gap: .4rem; font-weight: 700;
  font-size: 1.3rem; letter-spacing: -.02em; color: inherit; text-decoration: none; }

a.vn-handle:hover { text-decoration: underline; text-underline-offset: 3px; }

.vn-vfd { width: 1rem; height: 1rem; flex: none; }

.vn-sub { display: block; margin-top: .25rem; color: var(--ink-2); font-size: .84rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.vn-stats { display: flex; align-items: center; flex: none; }

.vn-stat { padding: 0 1.6rem; border: 0; border-left: 1px solid var(--line);
  background: none; text-align: left; font: inherit; color: inherit; }

.vn-stat:first-child { border-left: 0; }


.vn-stat b { display: block; font-size: clamp(1.15rem, 1.6vw, 1.6rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }

.vn-stat i { display: block; margin-top: .2rem; font-style: normal; font-family: var(--mono, ui-monospace, monospace);
  font-size: .56rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

.vn-stat-btn { cursor: pointer; border-radius: .6rem; transition: background .25s; }

.vn-stat-btn:hover { background: var(--surface-2); }

.vn-stat-btn i { color: var(--ok); }

.vn-landing { margin-left: 1.4rem; text-align: center; flex: none; }

.vn-btn-landing { display: inline-flex; align-items: center; gap: .45rem; background: var(--ink);
  color: var(--sobre-acento); border-radius: 999px; padding: .75rem 1.25rem; font-weight: 600; font-size: .84rem;
  text-decoration: none; white-space: nowrap; transition: transform .25s, box-shadow .25s; }

.vn-btn-landing:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(0,0,0,.4); }

.vn-btn-landing svg { width: .75rem; height: .75rem; }

.vn-dominio { display: block; margin-top: .4rem; color: var(--ink-3); font-size: .72rem; }


.vn-red {
  
  flex: 0 0 100%; margin: .9rem 0 0; padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: .8rem; line-height: 1.45;
}

.vn-red b { color: var(--ink); font-weight: 650; }


.vn-detective .vn-red-l { display: flex; align-items: center; gap: .65rem; }

.vn-det-icono { width: 1.6rem; height: 1.6rem; flex: none; color: var(--ink); }

.vn-red p { margin: 0; }

.vn-red p + p { margin-top: .35rem; }


.vn-detras { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }

.vn-detras a { color: inherit; font-weight: 600; text-decoration: none; }

.vn-detras a:hover { text-decoration: underline; text-underline-offset: 3px; }

.vn-detras-n { white-space: nowrap; color: var(--ink-3); }

.vn-detras-p { color: var(--ink-3); }



.vn-red-mas {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 1.35rem; height: 1.35rem; margin-left: .35rem; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}


.vn-red-mas svg { width: .8rem; height: .8rem; display: block; }

.vn-red-mas:hover { background: var(--surface-2); color: var(--ink); }


.vn-pop-detras {
  flex-direction: row; align-items: center; gap: 1rem;
  padding: 1rem 1.35rem;
  
  width: max-content; max-width: min(32rem, calc(100vw - 2rem));
}

.vn-pop-detras:popover-open { display: flex; }

.vn-pop-detras .vn-aro-op { width: 2.9rem; height: 2.9rem; padding: 2px; flex: none;
  border-radius: 50%; }

.vn-pop-detras .vn-aro-op img, .vn-pop-detras .vn-aro-op .vn-inicial {
  width: 100%; height: 100%; border-radius: 50%; }

.vn-pop-detras .vn-aro-op .vn-inicial { display: grid; place-items: center;
  background: var(--surface-2); font-size: 1.05rem; }

.vn-pop-detras .vn-quien { min-width: 0; }

.vn-pop-detras .vn-handle-op { font-size: 1rem; font-weight: 650; color: inherit;
  text-decoration: none; }

.vn-pop-detras .vn-handle-op:hover { text-decoration: underline; text-underline-offset: 3px; }

.vn-pop-detras .vn-sub { display: block; font-size: .72rem; color: var(--ink-3);
  
  white-space: normal; overflow: visible; text-overflow: clip; }

.vn-pop-detras .vn-stat { margin-left: .5rem; border-left: 1px solid var(--line);
  padding-left: 1rem; }

.vn-pop-detras .vn-stat b { font-size: 1.25rem; }




.vn-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  flex: 1; min-height: 0; }

.vn-cine { padding: 1.6rem 0 1.6rem 1.9rem; }


.vn .v-ambi { display: none; }

.vn .v-marco, .vn .v-cine #vVideo, .vn .v-cine #vImagen { box-shadow: none; }



.vn .v-cine { align-items: flex-start; padding-top: 1.7rem; }


.vn .v-marco { margin: 0 auto; max-width: 100%; max-height: 100%; }

.vn-zona { position: relative; min-width: 0; overflow-y: auto; padding: 1.7rem 1.9rem; }

.vn-panel { display: none; }

.vn-panel.activo { display: block; }

.vn-panel > * { opacity: 0; transform: translateY(12px); }

.vn-panel.entra > * { opacity: 1; transform: none;
  transition: opacity .4s cubic-bezier(.22,.68,.24,1), transform .4s cubic-bezier(.22,.68,.24,1); }

.vn-panel.entra > *:nth-child(1) { transition-delay: .03s; }

.vn-panel.entra > *:nth-child(2) { transition-delay: .09s; }

.vn-panel.entra > *:nth-child(3) { transition-delay: .15s; }

.vn-panel.entra > *:nth-child(4) { transition-delay: .21s; }

.vn-panel.entra > *:nth-child(5) { transition-delay: .27s; }



.vn-k { display: block; font-family: var(--mono, ui-monospace, monospace); font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .9rem; }

.vn-k-fila { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }

.vn-k-fila .vn-k { margin-bottom: 0; }

.vn-h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 1rem; }


.vn-titulo { font-size: 2rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.1;
  margin: .1rem 0 1.5rem; }

.vn-k-fila + .vn-titulo { margin-top: 0; }


.vn-vered { margin-top: 1.7rem; }

.vn-prosa { font-size: 1rem; line-height: 1.75; color: var(--ink); max-width: 36rem; margin: 0; }

.vn-marca { font-weight: 700; background: linear-gradient(transparent 64%, var(--ok-borde) 64%); }


.vn-momentos { max-width: 38rem; }

.vn-mom { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1.1rem;
  padding: .95rem 0; border-bottom: 1px solid var(--line); }

.vn-mom:last-child { border-bottom: 0; }

.vn-mom-h { font-family: var(--mono, ui-monospace, monospace); font-size: .78rem;
  color: var(--ink-3); padding-top: .15rem; }

.vn-mom p { font-size: .95rem; line-height: 1.6; color: var(--ink); margin: 0; }

.vn-mom p.vn-mom-nota { font-style: italic; color: var(--ink-2); }

.vn-mom-t { display: block; font-size: .95rem; font-weight: 700; margin: 1.2rem 0 .2rem; }

.vn-mom-t:first-child { margin-top: 0; }


.vn-armado { margin-top: 0; }

.vn-arma-fila { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--tinte-2); }

.vn-arma-fila:last-child { border-bottom: 0; padding-bottom: .2rem; }

.vn-arma-fila span { font-family: var(--mono, ui-monospace, monospace); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); padding-top: .25rem; }

.vn-arma-fila p { font-size: .9rem; line-height: 1.6; color: var(--ink); margin: 0; }

.vn-angulo { display: inline-block; font-family: var(--mono, ui-monospace, monospace);
  font-size: .66rem; font-weight: 600; font-style: normal; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ok); background: var(--ok-suave);
  padding: .2rem .55rem; border-radius: .35rem; margin-right: .55rem; }


.vn-prod { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem;
  align-items: center; }

.vn-prod-txt h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; margin: 0; }

.vn-prod-txt p { font-size: .9rem; color: var(--ink-2); margin: .35rem 0 0; }



.vn-pl-foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: .8rem; background: var(--surface); }

.vn-pl-datos { min-width: 0; margin-top: .9rem; }

.vn-pl-nombre { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.35;
  color: var(--ink); overflow-wrap: anywhere; }

.vn-pl-pie { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-top: .7rem; }

.vn-pl-precio { display: flex; align-items: baseline; gap: .4rem; }

.vn-pl-precio b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }

.vn-pl-precio i { font-family: var(--mono); font-size: .66rem; font-style: normal;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }


.vn-pl-datos .vn-pl-oculto { margin-top: .25rem; }

.vn-pl-desc { margin: .45rem 0 0; color: var(--ink-2); font-size: .84rem; line-height: 1.55;
  
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.vn-pl-vars { display: inline-block; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: .5rem; }

.vn-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }


.vn-tile { border-radius: 1.125rem; padding: 1.6rem .9rem 1.35rem; text-align: center;
  background: var(--surface-2); display: flex; flex-direction: column; }


.vn-tile.chica { padding: 1.1rem 1rem .9rem; }


.vn-luna { display: block; width: 100%; max-width: 10.75rem; margin: 0 auto .1rem; overflow: visible; }

.vn-tile.chica .vn-luna { max-width: 8.5rem; }

.vn-luna.bajo { --luz: var(--alerta); }

.vn-luna.medio { --luz: var(--oro); }

.vn-luna.alto { --luz: var(--ok); }

.vn-luna-p { fill: var(--tinte-3); transform-box: fill-box; transform-origin: center;
  opacity: 0; transform: scale(.35); }


.vn-luna-p.on { fill: var(--luz);
  filter: drop-shadow(0 0 3.5px color-mix(in srgb, var(--luz) 65%, transparent)); }


.vn-luna.late .vn-luna-p { opacity: 1; transform: none;
  transition: opacity .3s ease, transform .45s cubic-bezier(.22,.68,.24,1);
  transition-delay: calc(var(--i) * 24ms); }

.vn-luna-n { font-size: 40px; font-weight: 800; letter-spacing: -.035em; fill: var(--ink); }

.vn-luna-de { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  fill: var(--ink-3); font-family: var(--mono, ui-monospace, monospace); }

.vn-tile.chica .vn-luna-n { font-size: 42px; }


.vn-dimbar { position: relative; display: block; height: .5rem; border-radius: 999px;
  background: var(--tinte-2); --tono: var(--ink); }

.vn-dimbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 999px; background: var(--tono);
  transition: width .7s cubic-bezier(.22,.68,.24,1) .15s; }

.vn-dimbar u { position: absolute; top: 50%; left: 0; width: 1.05rem; height: 1.05rem;
  border-radius: 50%; background: var(--surface); display: grid; place-items: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05);
  transition: left .7s cubic-bezier(.22,.68,.24,1) .15s; }

.vn-dimbar u::before { content: ""; width: .46rem; height: .46rem; border-radius: 50%;
  background: var(--tono); }

.vn-dimbar.late i { width: var(--w); }

.vn-dimbar.late u { left: var(--w); }

.vn-tile span { display: block; margin-top: auto; padding-top: .55rem; font-size: .69rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

.vn-tile em { display: block; margin-top: .35rem; font-style: normal; font-size: .66rem; color: var(--ink-3); }

.vn-tile-pie { font-size: .8rem; line-height: 1.55; color: var(--ink-2); margin: 0; }

.vn-subs { display: flex; flex-direction: column; gap: 1.06rem; margin-top: 1.6rem;
  max-width: 34rem; }

.vn-ss { display: grid; grid-template-columns: 5.9rem 1fr 1.5rem; align-items: center; gap: 1rem; }

.vn-ss .vn-segs { min-width: 0; }

.vn-ss-n { font-size: .84rem; font-weight: 500; color: var(--ink); }

.vn-ss-v { font-family: var(--mono, ui-monospace, monospace); font-size: .81rem; font-weight: 600; text-align: right; }

.vn-via { position: relative; height: 1.5px; background: var(--line); }

.vn-via i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--line-fuerte);
  transition: width .7s cubic-bezier(.22,.68,.24,1) .15s; }

.vn-via u { position: absolute; top: 50%; left: 0; width: .44rem; height: .44rem; border-radius: 50%;
  background: var(--ink); transform: translate(-50%, -50%);
  transition: left .7s cubic-bezier(.22,.68,.24,1) .15s; }

.vn-panel.entra .vn-via i { width: var(--w); }

.vn-panel.entra .vn-via u { left: var(--w); }

.vn-cardg { background: var(--surface-2); border-radius: 1.125rem; padding: 1.375rem 1.5rem; margin-top: 1.6rem; }

.vn-cardg-t { display: flex; align-items: center; gap: .6rem; font-size: .97rem; margin-bottom: .75rem; }

.vn-cardg-t svg { width: 1.05rem; height: 1.05rem; color: var(--ink-2); }

.vn-cardg p { font-size: .84rem; line-height: 1.7; color: var(--ink-2); margin: 0; }

.vn-cardg p + p { margin-top: .5rem; }

.vn-cita { border-left: 3px solid var(--ink); padding: .35rem 0 .35rem 1.25rem; margin: .2rem 0 1.25rem; }

.vn-cita p { font-size: 1.06rem; line-height: 1.6; font-weight: 600; margin: 0; }

.vn-cita span { display: block; margin-top: .5rem; font-family: var(--mono, ui-monospace, monospace);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.vn-tira { margin: 0 0 1.1rem; }

.vn-tira img { width: 100%; border-radius: .7rem; display: block; }

.vn-tira-pie { display: block; margin-top: .5rem; text-align: center;
  font-family: var(--mono, ui-monospace, monospace); font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

.vn .v-trans { max-height: none; }


.vn .v-tres { box-shadow: none; border: 1px solid var(--line); }



.vn-memb { display: flex; align-items: center; gap: .5rem; padding: .3rem .6rem 1rem; }

.vn-memb svg { width: 1.25rem; height: 1.25rem; color: var(--ink); }

.vn-memb b { font-size: .9rem; letter-spacing: -.02em; }

.vn-memb span { font-family: var(--mono, ui-monospace, monospace); font-size: .52rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-left: .1rem; }

.vn-item { position: relative; display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .69rem .75rem; border: 0; border-radius: .9rem; background: none; cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--ink); text-align: left;
  transition: background .3s, color .3s; }

.vn-item:hover { background: var(--surface-2); }

.vn-item.activo { background: var(--ok-suave); }

.vn-ic { width: 2.125rem; height: 2.125rem; flex: none; border-radius: .69rem; background: var(--surface-2);
  display: grid; place-items: center; color: var(--ink-2); transition: background .3s, color .3s; }

.vn-ic svg { width: 1rem; height: 1rem; }

.vn-item.activo .vn-ic { background: var(--ok-borde); color: var(--ok); }

.vn-punto { position: absolute; right: .875rem; width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--ok); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s; }

.vn-item.activo .vn-punto { opacity: 1; transform: scale(1); }

.vn-lateral-pie { display: flex; flex-direction: column; gap: .55rem; padding-top: 1rem; }

.vn-cta { border-radius: 999px; padding-top: .85rem; padding-bottom: .85rem; }

.vn-md { font-size: .78rem; }



.vn .vn-panel .vp { margin-top: 0; }




.vn-cuerpo.vn-apaisado { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); }

.vn-cuerpo.vn-apaisado .vn-cine { padding: 1.6rem .6rem 1.6rem 1.9rem; }
@media (max-height: 760px) {

  .vn-cab { --cab-x: 1.4rem; padding: 1rem 1.4rem .9rem; }

  .vn-cine { padding: 1rem 0 1rem 1.4rem; }
}
@media (max-width: 900px) {

  .visor.vn-movil {
    position: fixed; inset: 0; padding: 0; display: block;
    background: transparent; backdrop-filter: none;
  }

  .visor.vn-movil.arrastrando { background: rgba(20,18,15,calc(.45 * var(--velo, 1))); }

  
  .visor.vn-movil .vn-caja {
    width: 100%; height: 100dvh; max-height: none; display: block;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: var(--surface); border-radius: 0; box-shadow: none; animation: none;
    transform: translateX(100%); transition: transform .28s cubic-bezier(.22,.68,.24,1);
  }

  
  .visor.vn-movil.arrastrando .vn-caja { box-shadow: -12px 0 40px -18px rgba(0,0,0,.5); }

  .visor.vn-movil .vn-main, .visor.vn-movil .vn-lateral, .visor.vn-movil .vn-cab { border-radius: 0; }

  .visor.vn-movil.entra .vn-caja { transform: none; }

  .visor.vn-movil.se-va .vn-caja { transform: translateX(100%); }

  .visor.vn-movil.se-va { background: transparent; transition: background .24s; }

  .vn-movil .vn-main { display: block; background: none; border-radius: 0; }

  .vn-movil .visor-x { display: none; }


  
  .vn-movil .vn-cab {
    position: sticky; top: 0; z-index: 12; gap: .7rem;
    padding: .55rem .8rem .55rem .3rem;
    background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(18px) saturate(160%);
  }

  .vn-atras {
    flex: none; width: 2.5rem; height: 2.5rem; border: 0; background: none;
    color: var(--ink); display: grid; place-items: center; border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
  }

  .vn-atras svg { width: 1.45rem; height: 1.45rem; }

  .vn-atras:active { background: var(--surface-2); }

  .vn-movil .vn-aro { width: 2.4rem; height: 2.4rem; padding: 2px; }

  .vn-movil .vn-aro img, .vn-movil .vn-aro .vn-inicial { border-width: 2px; }

  .vn-movil .vn-aro .vn-inicial { font-size: .9rem; }

  .vn-movil .vn-handle { font-size: .98rem; }

  .vn-movil .vn-sub { font-size: .72rem; }

  .vn-movil .vn-quien { margin-right: 0; }

  
  .vn-movil .vn-cab .vn-stats, .vn-movil .vn-cab .vn-landing,
  .vn-movil .vn-cab .vn-red { display: none; }


  
  .vn-movil .vn-cuerpo { display: block; }

  .vn-movil .vn-cine {
    position: relative; padding: 0; height: 58dvh; background: #0c0c0d;
    align-items: center; overflow: hidden;
  }

  .vn-movil .v-ambi {
    display: block; filter: blur(38px) saturate(2.2) brightness(.85);
    opacity: .75; -webkit-mask-image: none; mask-image: none;
  }

  
  .vn-movil .v-marco { border-radius: 0; }

  .vn-movil .v-cine #vVideo, .vn-movil .v-cine #vImagen { border-radius: 0; }

  
  .vn-movil .v-truco-pill { display: none; }

  .vn-movil .v-chip { font-size: .58rem; }

  
  .vn-datos {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
    margin: 0 -.95rem 1.4rem; padding: .9rem .95rem 1rem;
    border-bottom: 1px solid var(--line);
  }

  .vn-datos .vn-stat { flex: 1; min-width: 0; padding: 0 .9rem 0 .55rem; text-align: left; }

  .vn-datos .vn-stat b { font-size: 1.02rem; }

  .vn-datos .vn-stat i { font-size: .48rem; letter-spacing: .07em; }

  
  .vn-datos .vn-stat { flex: 0 1 auto; }

  .vn-datos .vn-landing { flex: none; margin: 0 0 0 auto; padding-left: .6rem; text-align: right; }

  .vn-datos .vn-btn-landing { padding: .5rem .8rem; font-size: .74rem; gap: .3rem; }

  .vn-datos .vn-btn-landing svg { width: .62rem; height: .62rem; }

  
  .vn-datos .vn-dominio { display: none; }

  
  .vn-datos .vn-red { flex: 0 0 100%; margin: .8rem 0 0; padding-top: .7rem; font-size: .76rem; }

  
  .vn-datos .vn-detras { display: block; }

  .vn-datos .vn-detras > span { display: block; }

  .vn-datos .vn-detras > span.vn-detras-p { display: none; }

  .vn-movil .vn-zona { overflow: visible; padding: 1.1rem .95rem 6.5rem; }

  .vn-movil .vn-panel { display: block; }

  .vn-movil .vn-panel:empty { display: none; }

  
  .vn-movil .vn-panel + .vn-panel { margin-top: 1.9rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

  .vn-movil .vn-panel::before {
    content: attr(data-titulo); display: block; margin-bottom: .9rem;
    font-family: var(--mono, ui-monospace, monospace); font-size: .62rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  }

  .vn-movil .vn-panel[data-panel="prompt"]::before { content: none; }

  .vn-movil .vn-k { display: none; }

  
  .vn-movil .vn-panel { position: relative; }

  .vn-movil .vn-k-fila { position: absolute; top: -.2rem; right: 0; margin: 0; }

  
  .vn-movil .vn-arma-fila { grid-template-columns: 1fr; gap: .2rem; }

  .vn-movil .vn-cardg { padding: 1.1rem 1.15rem; }

  .vn-movil .vn-tiles { gap: .65rem; }

  .vn-movil .vn-prod { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; }

  .vn-movil .vn-prosa { font-size: .95rem; }

  .vn-movil .vn-titulo { font-size: 1.25rem; }


  
  .vn-movil .vn-lateral {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 14;
    display: block; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--line); border-radius: 0;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  }

  .vn-movil .vn-memb, .vn-movil .vn-item { display: none; }

  .vn-movil .vn-lateral-pie { display: flex; flex-direction: row; gap: .5rem; margin: 0; }

  .vn-movil .vn-lateral-pie .btn { flex: 1; padding: .8rem 1rem; font-size: .92rem; }

  
  .vn-movil .vn-lateral-pie .vn-md { flex: 0 0 auto; padding: .8rem 1rem; font-size: .82rem; }
}
@media (max-width: 900px) and (orientation: landscape) {

  .vn-movil .vn-cine { height: 76dvh; }

  .vn-movil .vn-cab { padding: .35rem .8rem .35rem .3rem; }

  
  .vn-movil .vn-cab::after { left: .3rem; right: .8rem; }
}

@keyframes visor-entra { from { opacity: 0; transform: scale(.965) translateY(12px); } }
@keyframes copiar-entra { from { opacity: 0; transform: scale(.86); } }

/* ---------------------------------------------------------------
   Lo único que se cambia del panel: adentro la ficha es una capa que
   tapa la pantalla, y acá va incrustada en la página. Se le saca el
   fixed, el velo y el alto de ventana, y nada más.
   --------------------------------------------------------------- */
.visor.h-visor {
  position: relative; inset: auto;
  display: block;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  /* el aire de arriba lo tenía la maqueta vieja y se perdió con ella: la ficha
     quedaba pegada contra el pie del texto de la sección */
  padding: 0; margin-top: 4.5rem; z-index: auto; overflow: visible;
  animation: none;
}
/* Adentro la caja es una ventana: 1320 píxeles de ancho fijos y 880 de alto,
   con encajarMarco() midiendo el video contra ese alto. Acá no es una ventana,
   es un bloque de la página, y esos dos números la rompían. El ancho fijo se
   pasaba 51 píxeles del wrap (el lateral quedaba colgando del borde derecho) y
   el alto, al pasar a auto, dejaba al video sin tope: con solo el ancho de su
   columna como límite se iba a 870 píxeles de alto y arrastraba a la ficha
   entera, que terminaba con media columna de datos vacía al costado.

   Así que el ancho lo pone la página y el tope del video se escribe, que es lo
   que adentro hace el javascript. El máximo son 66rem porque la ficha tiene que
   leerse más angosta que la barra de arriba: apoyada contra el ancho del wrap
   parecía que se había salido de la página. */
.h-visor .visor-caja {
  width: 100%; max-width: 66rem; margin-inline: auto;
  max-height: none; height: auto;
  animation: none;
}
/* El creativo entra con aire a los dos lados de su columna, como deja el encaje
   de adentro, y el tope está buscado para que su pie cierre a la altura del pie
   de la columna de datos. El marco ya viene con margin auto del panel.

   El alto va a auto: el panel se lo deja en 100% porque adentro el JS le pasa
   los píxeles exactos y el marco tiene que llenar lo que le tocó. Sin JS, ese
   100% le daba el alto entero de la columna y abajo del video quedaba una
   franja del marco vacía. Y el redondeo, que adentro lo pone el video por su
   id (#vVideo, que acá no existe), lo pone el marco con overflow: así entran
   en la curva los chips y el botón de play, que van encima. */
.h-visor .v-marco {
  width: min(100%, 21rem); height: auto;
  border-radius: 22px; overflow: hidden;
}
/* Adentro el video va con los controles del navegador porque la agencia lo
   estudia: se adelanta, se vuelve, se pausa. Acá va limpio, con el botón
   grande y nada más, y el botón se apaga mientras corre. La regla vieja
   colgaba de .dm-pieza, el envoltorio de la maqueta anterior, y como el
   markup pasó a ser el del panel el play quedaba tapando el video entero. */
.h-visor .v-marco.corriendo .dm-play { opacity: 0; pointer-events: none; }

/* El copy de Meta tiene viñetas y renglones sueltos, y así se lee. Adentro del
   panel la cita sale de un textarea y llega con los saltos hechos; acá el texto
   va escrito en el html y sin esto se aplasta todo en un párrafo corrido. */
.h-visor .vn-cita p { white-space: pre-line; }

/* La raya que separa las variantes de los días.

   El de variantes es el único stat que es un botón, y lleva las puntas
   redondeadas para el fondo del hover. El separador es un border-left, y un
   borde sobre una caja redondeada sale curvo: quedaba un paréntesis al lado de
   una raya recta. La raya pasa a dibujarse aparte, derecha de punta a punta, y
   el botón se queda con su redondeo para el hover. */
.h-visor .vn-stat-btn { position: relative; border-left: 0; }
.h-visor .vn-stat-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}

/* El esqueleto, con el icono de cada paso arriba de su etiqueta.

   Adentro del panel alcanza con la palabra en mono al costado, porque la
   agencia vive en esa pantalla y ya sabe qué es un hook. Acá cada fila arrancaba
   con tres palabras en gris chiquito que no le dicen nada a quien mira una ficha
   por primera vez, y son justo los tres pasos que hay que aprenderse. */
.h-visor .vn-arma-fila { grid-template-columns: 4.7rem minmax(0, 1fr); align-items: start; }
.h-visor .vn-arma-fila > span {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding-top: 0; text-align: center; line-height: 1.2;
}
.h-visor .vn-arma-ic {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: .9rem;
  background: var(--surface);
  color: var(--ink);
  font-style: normal;
}
.h-visor .vn-arma-ic svg { width: 1.55rem; height: 1.55rem; }

/* El tope de la zona es lo que adentro sale gratis: allá la caja mide 880 de
   alto y la zona scrollea contra ese alto. Acá la caja crece con lo que tenga
   adentro, y las dos transcripciones son largas de verdad (la visual son 27
   momentos): al tocar esa pestaña la ficha pasaba de 900 píxeles a 5.000 y la
   sección del home se estiraba sola. Con el tope, la ficha mide siempre lo
   mismo y la transcripción se lee scrolleando, igual que adentro. Va cerca del
   alto del video para que el pie de la columna de datos cierre con el pie del
   creativo y no quede una escalera. */
.h-visor .vn-zona { max-height: 40rem; }

/* De noche, la barra de cada dimensión se pinta con el tono que segmentosPuntaje()
   le escribe en el style, y esa cuenta interpola entre el gris del riel y la tinta
   con dos números fijos: para un 9 da rgb(35,35,34), o sea casi negro. Sobre el
   panel claro es lo que se busca, sobre el oscuro es negro sobre negro y las cinco
   dimensiones desaparecen. El tono se calcula en el javascript del panel y no mira
   el tema, así que adentro pasa lo mismo: acá se arregla el lado del sitio, que es
   lo que se publica. */
:root[data-theme="dark"] .h-visor .vn-dimbar i { background: var(--ink-2); }
:root[data-theme="dark"] .h-visor .vn-dimbar u::before { background: var(--ink-2); }
.h-visor .visor-x { display: none; }
/* adentro el video arranca solo y sin sonido; en una página no se hace eso */
.h-visor .v-ambi { display: none; }

/* La cabecera del panel se arma sobre una ventana entera; acá la ficha entra
   en el ancho de la página y el bloque del nombre se comprimía hasta los 20
   píxeles, con "Marca tapada" partido en dos y el producto en "L...". Con un
   mínimo, los stats bajan de línea antes de aplastarlo, que es para lo que el
   panel le puso flex-wrap. */
.h-visor .vn-quien { min-width: 13rem; }

/* Sin el botón de la landing, la cabecera tiene aire de sobra y no hay ninguna
   razón para que siga partida en dos filas, con los tres datos abajo y medio
   renglón vacío al costado. Lo que la partía es la base `auto` del bloque del
   nombre: para decidir si envuelve, el navegador lo mide por su contenido (el
   nombre entero más la línea del producto, medio millar de píxeles) y recién
   después lo encoge, así que los datos ya se habían ido a la segunda fila. Con
   la base en el mínimo entran todos en una línea, y el grow deja los datos
   contra el borde derecho, como adentro. */
.h-visor .vn-quien { flex: 1 1 13rem; margin-right: 0; }
/* y con un poco menos de aire entre los tres datos entran los tres al lado del
   nombre: con el del panel se pasaban por once píxeles y volvían a bajar */
.h-visor .vn-stat { padding: 0 1.35rem; }
/* En una fila, al bloque del nombre le quedan unos 300 píxeles y la línea del
   producto no entra: el panel la corta con puntos suspensivos porque adentro es
   un dato de apoyo. Acá es la única vez que se dice qué se vende, así que se
   lee entera, en dos renglones si hace falta. */
.h-visor .vn-sub { white-space: normal; }

/* El teléfono.

   Adentro, el layout de mobile no lo hace solo el css: prepararFichaMovil()
   reordena el dom, mete gestos y una marca en el historial para que el atrás
   cierre la ficha. Nada de eso tiene sentido en una página, así que acá el
   apilado se escribe, sobre el mismo markup del panel: una sola columna, el
   lateral convertido en la botonera de secciones y el video a lo ancho.

   La botonera va adentro de la tarjeta, entre el creativo y el texto. Estuvo
   arriba de la ficha, suelta sobre el fondo de la página, y ahí no se leía como
   parte del panel: parecía un filtro de la sección. Mudar el nodo lo hace
   content.js, porque el lateral es hermano de .vn-main y esto es lo único que
   el css no puede resolver solo. */
@media (max-width: 900px) {
  .h-visor .visor-caja { grid-template-columns: minmax(0, 1fr); }
  .h-visor .vn-main { min-width: 0; }
  .h-visor .vn-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* el separador de la cabecera lo dibuja .vn-cab::after contra --cab-x, que
     adentro es más ancho que el padding porque ahí abajo va la red de cuentas.
     Acá no hay red: los dos valores iguales y la raya cae donde arranca el
     texto, que es lo único que se lee como alineado */
  .h-visor .vn-cab { --cab-x: 1.15rem; padding: 1.15rem 1.15rem 1rem; gap: .8rem; }
  .h-visor .vn-quien { min-width: 8rem; }
  .h-visor .vn-aro { width: 3rem; height: 3rem; }
  .h-visor .vn-handle { font-size: 1.05rem; }
  /* Los tres datos no entran en 390 píxeles con el aire que les da el panel y
     el de las variantes se caía a una tercera fila, con la tarjeta abierta como
     un acordeón antes de empezar. Sin el hueco entre ellos y con menos aire a
     los costados entran los tres en una línea: la raya y el padding de cada uno
     ya los separan. Igual queda el wrap de red para una pantalla más angosta.

     Van centrados y con su propia raya arriba, la misma que ya cierra la
     cabecera abajo: sueltos contra el borde izquierdo, debajo de un nombre que
     ocupa dos renglones, se leían como un pie de página del nombre y no como la
     fila de datos que son. Con el padding parejo en los tres (nada de sacarle
     el de la izquierda al primero) el centrado es de verdad. */
  .h-visor .vn-stats {
    width: 100%; gap: 0; flex-wrap: wrap;
    justify-content: center;
    border-top: 1px solid var(--line);
    padding-top: .85rem;
    margin-top: .15rem;
  }
  /* el número va centrado sobre su rótulo: alineados a la izquierda, con la
     fila centrada en la tarjeta, cada número quedaba corrido respecto a la
     palabra que lo explica */
  .h-visor .vn-stat { padding: 0 .7rem; text-align: center; }
  .h-visor .v-cine { padding: 1.1rem 1.15rem 0; }
  .h-visor .v-marco { width: 100%; max-width: 15rem; margin-inline: auto; }
  /* en el teléfono la ficha se lee apilada y de corrido: el tope de arriba
     dejaría la transcripción adentro de una cajita con scroll propio */
  .h-visor .vn-zona { padding: 0 1.15rem 1.3rem; overflow: visible; max-height: none; }

  /* la botonera de secciones, con la de adentro adelante del dedo */
  .h-visor .vn-lateral {
    display: flex; flex-direction: row; gap: .45rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1.15rem 1.15rem 1.25rem; margin: 0;
    border: 0; border-radius: 0; box-shadow: none; background: none;
    width: auto; position: static;
    /* el dedo empuja la fila y cada píldora se acomoda sola */
    scroll-snap-type: x proximity;
  }
  .h-visor .vn-lateral::-webkit-scrollbar { display: none; }
  /* Los dos extremos se desvanecen. La fila se arrastra y las píldoras llegaban
     hasta el borde de la tarjeta y se cortaban ahí, a filo, como si estuvieran
     rotas. Con el fade se lee que la fila sigue. El ancho del degradado es el
     mismo padding que tiene la fila, así la primera píldora nace entera. */
  .h-visor .vn-lateral {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.15rem, #000 calc(100% - 1.15rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 1.15rem, #000 calc(100% - 1.15rem), transparent 100%);
  }
  .h-visor .vn-memb, .h-visor .vn-lateral-pie { display: none; }
  .h-visor .vn-item {
    flex: none; width: auto; white-space: nowrap;
    gap: .5rem; padding: .42rem .95rem .42rem .42rem; font-size: .84rem;
    border: 1px solid var(--line); border-radius: 999px;
    scroll-snap-align: center;
  }
  .h-visor .vn-item .vn-punto { display: none; }
  /* el icono entra: es lo que hace que la fila se lea de un vistazo, y es el
     mismo de la sección adentro del panel */
  .h-visor .vn-item .vn-ic { width: 1.7rem; height: 1.7rem; border-radius: .58rem; }
  .h-visor .vn-item .vn-ic svg { width: .88rem; height: .88rem; }
  /* la activa en verde, como adentro: el negro la hacía leer como un botón de
     acción y no como la sección donde uno está parado */
  .h-visor .vn-item.activo { background: var(--ok-suave); border-color: var(--ok-borde); color: var(--ok); }
  .h-visor .vn-item.activo .vn-ic { background: var(--ok-borde); color: var(--ok); }
}