/* Vizion Upscale — hoja UNICA del widget.
 *
 * Sale de ai-render-upscaler.html, que era la copia MAS COMPLETA: trae 7 reglas
 * .vzn-sc-* que el home no necesitaba porque las hereda de la seccion de Edit.
 * Sin ellas el comparador se queda sin manija para arrastrar — paso de verdad en
 * esta misma landing el 2026-08-31.
 *
 * Va en las DOS formas (con y sin #vizion-app), misma razon que la hoja de Render
 * Upgrade. ⚠️ No transformar selectores con regex: se pierden reglas en silencio.
 */
/* ── 1. para el home, dentro de #vizion-app ────────────────────────────── */
#vizion-app .vzn-usc { padding: 9rem 4rem; background: var(--bg); border-top: 1px solid var(--border); position: relative; }
      #vizion-app .vzn-usc-inner { max-width: 1280px; margin: 0 auto; }
      #vizion-app .vzn-usc-header { max-width: 760px; margin: 0 0 4.5rem; text-align: left; }
      #vizion-app .vzn-usc-tagline { font-size: 1rem; line-height: 1.7; color: var(--muted); font-weight: 300; margin: 1.5rem 0 0; max-width: 640px; }
      #vizion-app .vzn-usc-tagline em { color: var(--gold-lt); font-style: italic; }

      /* ── ejecutar Upscale desde el home ── */
      /* El panel de subida queda angosto (es un formulario), pero el resultado necesita
         todo el ancho disponible: si comparten el mismo max-width de 760px el comparador
         queda chico aunque sobre espacio a los costados. */
      #vizion-app .vzn-usc-run { margin: 0 auto; }
      #vizion-app .vzn-usc-panel {
        max-width: 760px; margin: 0 auto;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 16px; padding: 1.6rem;
      }
      #vizion-app .vzn-usc-label {
        display: block; font-size: .72rem; color: var(--muted);
        margin: 1rem 0 .4rem; letter-spacing: .04em;
      }
      #vizion-app .vzn-usc-label:first-child { margin-top: 0; }
      #vizion-app .vzn-usc-drop {
        border: 1.5px dashed var(--border); border-radius: 14px; padding: 2.2rem 1.5rem;
        text-align: center; cursor: pointer; transition: border-color .25s, background .25s;
      }
      #vizion-app .vzn-usc-drop:hover, #vizion-app .vzn-usc-drop.drag-over {
        border-color: var(--gold); background: rgba(202,130,98,.05);
      }
      #vizion-app .vzn-usc-drop .ic { font-size: 2rem; margin-bottom: .5rem; opacity: .6; }
      #vizion-app .vzn-usc-drop .t1 { font-size: .92rem; color: var(--fg); }
      #vizion-app .vzn-usc-drop .t2 { font-size: .72rem; color: var(--dim); margin-top: .35rem; }
      /* Preview de la imagen subida: se muestra GRANDE (antes era un thumbnail de 56px).
         El usuario acaba de elegir la foto que va a escalar — tiene que poder confirmar
         a ojo que subió la correcta, y el detalle es justamente de lo que va esta sección. */
      #vizion-app .vzn-usc-preview {
        display: none; flex-direction: column; gap: .7rem; padding: .7rem;
        border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
      }
      #vizion-app .vzn-usc-preview .shot {
        position: relative; display: flex; align-items: center; justify-content: center;
        background: #0d0c0a; border-radius: 10px; overflow: hidden;
      }
      /* max-height (no width) porque una foto vertical es el caso que más se rompe:
         con alto libre se comía la pantalla entera y tapaba el selector de resolución */
      #vizion-app .vzn-usc-preview img {
        display: block; max-width: 100%; max-height: min(62vh, 560px);
        width: auto; height: auto; object-fit: contain;
      }
      #vizion-app .vzn-usc-preview .info { min-width: 0; text-align: left; padding: 0 .2rem; }
      #vizion-app .vzn-usc-preview .name { font-size: .82rem; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      #vizion-app .vzn-usc-preview .dims { font-size: .7rem; color: var(--muted); font-family: ui-monospace, monospace; margin-top: .15rem; }
      #vizion-app .vzn-usc-preview .x {
        position: absolute; top: .55rem; right: .55rem; z-index: 2;
        width: 30px; height: 30px; border-radius: 50%; display: flex;
        align-items: center; justify-content: center; line-height: 1;
        color: #fff; font-size: .85rem; cursor: pointer;
        background: rgba(11,10,8,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,.22); transition: background .2s, border-color .2s;
      }
      #vizion-app .vzn-usc-preview .x:hover { background: rgba(231,111,111,.85); border-color: rgba(231,111,111,.9); }
      #vizion-app .vzn-usc-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
      #vizion-app .vzn-usc-tier {
        border: 1px solid var(--border); background: var(--bg); border-radius: 12px;
        padding: .9rem .5rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s;
      }
      #vizion-app .vzn-usc-tier .t { font-family: var(--serif); font-size: 1.2rem; color: var(--fg); display: block; }
      #vizion-app .vzn-usc-tier .c { display: block; font-size: .64rem; color: var(--muted); margin-top: .25rem; }
      #vizion-app .vzn-usc-tier.active { border-color: var(--gold); background: rgba(202,130,98,.12); }
      #vizion-app .vzn-usc-tier.active .t { color: var(--gold-lt); }
      #vizion-app .vzn-usc-tier:disabled { opacity: .38; cursor: not-allowed; }
      #vizion-app .vzn-usc-go {
        width: 100%; margin-top: 1.1rem; padding: .95rem; border: none; border-radius: 999px;
        background: var(--gold); color: #1a1206; font-weight: 600; font-size: .8rem;
        letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
        transition: background .25s, transform .2s;
      }
      #vizion-app .vzn-usc-go:hover:not(:disabled) { background: var(--gold-lt); transform: translateY(-2px); }
      #vizion-app .vzn-usc-go:disabled { background: rgba(202,130,98,.18); color: var(--muted); cursor: not-allowed; }
      #vizion-app .vzn-usc-hint { font-size: .72rem; color: var(--gold-lt); text-align: center; margin-top: .55rem; min-height: .9rem; }
      #vizion-app .vzn-usc-note { font-size: .68rem; color: var(--dim); text-align: center; margin-top: .5rem; line-height: 1.5; }
      #vizion-app .vzn-usc-bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 1rem; }
      #vizion-app .vzn-usc-bar .fill { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--gold-lt)); transition: width .6s ease; }
      #vizion-app .vzn-usc-progtxt { font-size: .72rem; color: var(--muted); text-align: center; margin-top: .5rem; }
      #vizion-app .vzn-usc-status { font-size: .8rem; text-align: center; margin-top: .7rem; min-height: 1rem; }
      #vizion-app .vzn-usc-status.err { color: #e76f6f; }
      #vizion-app .vzn-usc-status.ok { color: #7fcf9b; }

      /* resultado: comparador con zoom (ambas imágenes comparten transform) */
      /* El comparador se sale del contenedor de 1280px y ocupa casi toda la pantalla: es lo
         único de esta sección que gana de verdad con el ancho, y encajonado se veía chico. */
      #vizion-app .vzn-usc-result {
        display: none; margin-top: 2rem;
        width: min(1800px, 94vw); max-width: none;
        margin-left: 50%; transform: translateX(-50%);
      }
      #vizion-app .vzn-usc-cmp-stage {
        position: relative; margin: 0 auto; overflow: hidden; background: #000;
        border-radius: 14px; cursor: grab; user-select: none; touch-action: none;
      }
      #vizion-app .vzn-usc-cmp-stage.panning { cursor: grabbing; }
      #vizion-app .vzn-usc-cmp-imgc { position: absolute; inset: 0; overflow: hidden; }
      #vizion-app .vzn-usc-cmp-imgc img {
        position: absolute; top: 0; left: 0; transform-origin: 0 0;
        will-change: transform; display: block; max-width: none; -webkit-user-drag: none;
      }
      #vizion-app .vzn-usc-cmp-imgc.before { clip-path: inset(0 calc(100% - var(--sp,50%)) 0 0); }

      /* ── Divisor, manija y etiquetas del comparador ────────────────────────────
         🔴 FALTABAN EN ESTA PÁGINA (arreglado 2026-08-31). El comparador reusa las
         clases .vzn-sc-* del componente de Edit, que viven en index.html. Al separar
         esta landing solo se copió el CSS .vzn-usc-*, así que acá el divisor y la
         manija quedaban SIN ESTILO: no se posicionaban, la manija era invisible y no
         se podía arrastrar, y el <svg> y las etiquetas caían al flujo normal al pie
         del visor. Se veía la costura del clip-path (esa sí tiene CSS) pero no había
         comparador usable. Copiadas de index.html sin el prefijo #vizion-app. */
      #vizion-app .vzn-sc-divider { position: absolute; top: 0; bottom: 0; left: var(--sp, 50%); width: 2px; background: rgba(255,255,255,.85); transform: translateX(-1px); box-shadow: 0 0 12px rgba(0,0,0,.4); z-index: 6; pointer-events: none; }
      #vizion-app .vzn-sc-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(11,10,8,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.4); pointer-events: auto; cursor: ew-resize; z-index: 7; }
      #vizion-app .vzn-sc-handle svg { width: 22px; height: 22px; }
      #vizion-app .vzn-sc-cornertag { position: absolute; top: 1.1rem; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; padding: .35rem .75rem; border-radius: 100px; background: rgba(11,10,8,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); z-index: 6; pointer-events: none; }
      #vizion-app .vzn-sc-cornertag.b { left: 1.1rem; color: rgba(255,255,255,.8); }
      #vizion-app .vzn-sc-cornertag.a { right: 1.1rem; color: var(--gold-lt); }
      #vizion-app .vzn-usc-cmptools {
        display: flex; align-items: center; gap: .5rem; margin-top: .7rem;
        font-size: .7rem; color: var(--muted); justify-content: center;
      }
      #vizion-app .vzn-usc-cmptools button {
        padding: .34rem .65rem; border-radius: 999px; font-size: .66rem;
        background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--fg); cursor: pointer;
      }
      #vizion-app .vzn-usc-cmptools a { margin-left: .6rem; color: var(--gold-lt); text-decoration: none; font-size: .74rem; }

      /* ── Visor dual con paneo sincronizado (8K vs original) ──────────────────────
         Reemplazó al slider+lupa. NO hay línea central ni zoom: las dos imágenes
         arrancan ya encuadradas de cerca sobre los productos y el usuario arrastra
         una cualquiera — la otra se mueve sola sobre la MISMA región de la escena.
         El encuadre se calcula por fracción de la imagen visible, así que ambas
         muestran el mismo trozo aunque tengan resoluciones distintas. */
      #vizion-app .vzn-usc-duo { width: min(1500px, 94vw); margin: 1.5rem auto 0; }
      #vizion-app .vzn-usc-duo-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
        background: var(--border); border: 1px solid var(--border);
        border-radius: 14px; overflow: hidden;
      }
      #vizion-app .vzn-usc-pane {
        position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: #0d0c0a;
        cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
      }
      #vizion-app .vzn-usc-duo.panning .vzn-usc-pane { cursor: grabbing; }
      #vizion-app .vzn-usc-pane img {
        position: absolute; top: 0; left: 0; max-width: none; display: block;
        transform-origin: 0 0; will-change: transform; -webkit-user-drag: none; user-drag: none;
        opacity: 0; transition: opacity .5s ease;
      }
      #vizion-app .vzn-usc-duo.ready .vzn-usc-pane img { opacity: 1; }
      /* esqueleto mientras bajan las imágenes (la de 8K pesa ~1.8MB) */
      #vizion-app .vzn-usc-pane::before {
        content: ''; position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 70%);
        background-size: 220% 100%; animation: vznUscShimmer 1.5s linear infinite;
        transition: opacity .4s; pointer-events: none;
      }
      #vizion-app .vzn-usc-duo.ready .vzn-usc-pane::before { opacity: 0; }
      @keyframes vznUscShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
      #vizion-app .vzn-usc-pane-tag {
        position: absolute; top: .9rem; left: .9rem; z-index: 3;
        font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
        padding: .35rem .75rem; border-radius: 100px; background: rgba(11,10,8,.62);
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,.18); pointer-events: none;
      }
      #vizion-app .vzn-usc-pane-tag.a { color: var(--gold-lt); border-color: rgba(202,130,98,.45); }
      #vizion-app .vzn-usc-pane-tag.b { color: rgba(255,255,255,.72); }
      #vizion-app .vzn-usc-duo-hint {
        display: flex; align-items: center; justify-content: center; gap: .5rem;
        text-align: center; font-size: .72rem; letter-spacing: .05em; color: var(--dim);
        margin-top: 1rem; transition: opacity .4s;
      }
      #vizion-app .vzn-usc-duo-hint b { color: var(--gold-lt); font-weight: 500; }
      #vizion-app .vzn-usc-duo-hint svg { width: 15px; height: 15px; stroke: var(--gold-lt); flex-shrink: 0; }
      #vizion-app .vzn-usc-duo.dragged .vzn-usc-duo-hint { opacity: .35; }

      /* Aviso de zoom sobre el comparador de resultado. Se atenúa solo cuando el
         usuario ya se acercó al 100% nativo (ahí el aviso deja de aportar). */
      #vizion-app .vzn-usc-zoomtip {
        display: none; align-items: flex-start; gap: .6rem;
        margin: 0 0 .9rem; padding: .7rem .9rem;
        border: 1px solid rgba(201,169,110,.28);
        border-left: 2px solid var(--gold-lt);
        border-radius: 8px;
        background: rgba(201,169,110,.07);
        font-size: .78rem; line-height: 1.5; color: var(--dim);
        transition: opacity .4s;
      }
      #vizion-app .vzn-usc-zoomtip.dim { opacity: .35; }
      #vizion-app .vzn-usc-zoomtip b { color: var(--gold-lt); font-weight: 600; }
      #vizion-app .vzn-usc-zoomtip svg { width: 17px; height: 17px; stroke: var(--gold-lt); flex-shrink: 0; margin-top: .1rem; }
      #vizion-app .vzn-usc-cmptools #uscZoom11 { font-variant-numeric: tabular-nums; }

      @media (max-width: 900px) {
        #vizion-app .vzn-usc { padding: 5rem 1.5rem; }
        #vizion-app .vzn-usc-header { margin-bottom: 3rem; }
      }
      @media (max-width: 760px) {
        /* apilado: el arrastre horizontal panea, el vertical sigue scrolleando la página */
        #vizion-app .vzn-usc-duo-grid { grid-template-columns: 1fr; }
        #vizion-app .vzn-usc-pane { aspect-ratio: 4 / 3; touch-action: pan-y; }
      }
    
#vizion-app .vzn-usc-more {text-decoration:none;color:var(--gold-lt);border:1px solid rgba(202,130,98,.30);background:rgba(202,130,98,.10);border-radius:2px;padding:.5rem 1rem;font-size:.78rem;letter-spacing:.04em;white-space:nowrap;}

/* ── 2. la misma, para paginas sin ese contenedor ───────────────────────── */
.vzn-usc { padding: 9rem 4rem; background: var(--bg); border-top: 1px solid var(--border); position: relative; }
      .vzn-usc-inner { max-width: 1280px; margin: 0 auto; }
      .vzn-usc-header { max-width: 760px; margin: 0 0 4.5rem; text-align: left; }
      .vzn-usc-tagline { font-size: 1rem; line-height: 1.7; color: var(--muted); font-weight: 300; margin: 1.5rem 0 0; max-width: 640px; }
      .vzn-usc-tagline em { color: var(--gold-lt); font-style: italic; }

      /* ── ejecutar Upscale desde el home ── */
      /* El panel de subida queda angosto (es un formulario), pero el resultado necesita
         todo el ancho disponible: si comparten el mismo max-width de 760px el comparador
         queda chico aunque sobre espacio a los costados. */
      .vzn-usc-run { margin: 0 auto; }
      .vzn-usc-panel {
        max-width: 760px; margin: 0 auto;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 16px; padding: 1.6rem;
      }
      .vzn-usc-label {
        display: block; font-size: .72rem; color: var(--muted);
        margin: 1rem 0 .4rem; letter-spacing: .04em;
      }
      .vzn-usc-label:first-child { margin-top: 0; }
      .vzn-usc-drop {
        border: 1.5px dashed var(--border); border-radius: 14px; padding: 2.2rem 1.5rem;
        text-align: center; cursor: pointer; transition: border-color .25s, background .25s;
      }
      .vzn-usc-drop:hover, .vzn-usc-drop.drag-over {
        border-color: var(--gold); background: rgba(202,130,98,.05);
      }
      .vzn-usc-drop .ic { font-size: 2rem; margin-bottom: .5rem; opacity: .6; }
      .vzn-usc-drop .t1 { font-size: .92rem; color: var(--fg); }
      .vzn-usc-drop .t2 { font-size: .72rem; color: var(--dim); margin-top: .35rem; }
      /* Preview de la imagen subida: se muestra GRANDE (antes era un thumbnail de 56px).
         El usuario acaba de elegir la foto que va a escalar — tiene que poder confirmar
         a ojo que subió la correcta, y el detalle es justamente de lo que va esta sección. */
      .vzn-usc-preview {
        display: none; flex-direction: column; gap: .7rem; padding: .7rem;
        border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
      }
      .vzn-usc-preview .shot {
        position: relative; display: flex; align-items: center; justify-content: center;
        background: #0d0c0a; border-radius: 10px; overflow: hidden;
      }
      /* max-height (no width) porque una foto vertical es el caso que más se rompe:
         con alto libre se comía la pantalla entera y tapaba el selector de resolución */
      .vzn-usc-preview img {
        display: block; max-width: 100%; max-height: min(62vh, 560px);
        width: auto; height: auto; object-fit: contain;
      }
      .vzn-usc-preview .info { min-width: 0; text-align: left; padding: 0 .2rem; }
      .vzn-usc-preview .name { font-size: .82rem; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .vzn-usc-preview .dims { font-size: .7rem; color: var(--muted); font-family: ui-monospace, monospace; margin-top: .15rem; }
      .vzn-usc-preview .x {
        position: absolute; top: .55rem; right: .55rem; z-index: 2;
        width: 30px; height: 30px; border-radius: 50%; display: flex;
        align-items: center; justify-content: center; line-height: 1;
        color: #fff; font-size: .85rem; cursor: pointer;
        background: rgba(11,10,8,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,.22); transition: background .2s, border-color .2s;
      }
      .vzn-usc-preview .x:hover { background: rgba(231,111,111,.85); border-color: rgba(231,111,111,.9); }
      .vzn-usc-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
      .vzn-usc-tier {
        border: 1px solid var(--border); background: var(--bg); border-radius: 12px;
        padding: .9rem .5rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s;
      }
      .vzn-usc-tier .t { font-family: var(--serif); font-size: 1.2rem; color: var(--fg); display: block; }
      .vzn-usc-tier .c { display: block; font-size: .64rem; color: var(--muted); margin-top: .25rem; }
      .vzn-usc-tier.active { border-color: var(--gold); background: rgba(202,130,98,.12); }
      .vzn-usc-tier.active .t { color: var(--gold-lt); }
      .vzn-usc-tier:disabled { opacity: .38; cursor: not-allowed; }
      .vzn-usc-go {
        width: 100%; margin-top: 1.1rem; padding: .95rem; border: none; border-radius: 999px;
        background: var(--gold); color: #1a1206; font-weight: 600; font-size: .8rem;
        letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
        transition: background .25s, transform .2s;
      }
      .vzn-usc-go:hover:not(:disabled) { background: var(--gold-lt); transform: translateY(-2px); }
      .vzn-usc-go:disabled { background: rgba(202,130,98,.18); color: var(--muted); cursor: not-allowed; }
      .vzn-usc-hint { font-size: .72rem; color: var(--gold-lt); text-align: center; margin-top: .55rem; min-height: .9rem; }
      .vzn-usc-note { font-size: .68rem; color: var(--dim); text-align: center; margin-top: .5rem; line-height: 1.5; }
      .vzn-usc-bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 1rem; }
      .vzn-usc-bar .fill { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--gold-lt)); transition: width .6s ease; }
      .vzn-usc-progtxt { font-size: .72rem; color: var(--muted); text-align: center; margin-top: .5rem; }
      .vzn-usc-status { font-size: .8rem; text-align: center; margin-top: .7rem; min-height: 1rem; }
      .vzn-usc-status.err { color: #e76f6f; }
      .vzn-usc-status.ok { color: #7fcf9b; }

      /* resultado: comparador con zoom (ambas imágenes comparten transform) */
      /* El comparador se sale del contenedor de 1280px y ocupa casi toda la pantalla: es lo
         único de esta sección que gana de verdad con el ancho, y encajonado se veía chico. */
      .vzn-usc-result {
        display: none; margin-top: 2rem;
        width: min(1800px, 94vw); max-width: none;
        margin-left: 50%; transform: translateX(-50%);
      }
      .vzn-usc-cmp-stage {
        position: relative; margin: 0 auto; overflow: hidden; background: #000;
        border-radius: 14px; cursor: grab; user-select: none; touch-action: none;
      }
      .vzn-usc-cmp-stage.panning { cursor: grabbing; }
      .vzn-usc-cmp-imgc { position: absolute; inset: 0; overflow: hidden; }
      .vzn-usc-cmp-imgc img {
        position: absolute; top: 0; left: 0; transform-origin: 0 0;
        will-change: transform; display: block; max-width: none; -webkit-user-drag: none;
      }
      .vzn-usc-cmp-imgc.before { clip-path: inset(0 calc(100% - var(--sp,50%)) 0 0); }

      /* ── Divisor, manija y etiquetas del comparador ────────────────────────────
         🔴 FALTABAN EN ESTA PÁGINA (arreglado 2026-08-31). El comparador reusa las
         clases .vzn-sc-* del componente de Edit, que viven en index.html. Al separar
         esta landing solo se copió el CSS .vzn-usc-*, así que acá el divisor y la
         manija quedaban SIN ESTILO: no se posicionaban, la manija era invisible y no
         se podía arrastrar, y el <svg> y las etiquetas caían al flujo normal al pie
         del visor. Se veía la costura del clip-path (esa sí tiene CSS) pero no había
         comparador usable. Copiadas de index.html sin el prefijo #vizion-app. */
      .vzn-sc-divider { position: absolute; top: 0; bottom: 0; left: var(--sp, 50%); width: 2px; background: rgba(255,255,255,.85); transform: translateX(-1px); box-shadow: 0 0 12px rgba(0,0,0,.4); z-index: 6; pointer-events: none; }
      .vzn-sc-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(11,10,8,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.4); pointer-events: auto; cursor: ew-resize; z-index: 7; }
      .vzn-sc-handle svg { width: 22px; height: 22px; }
      .vzn-sc-cornertag { position: absolute; top: 1.1rem; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; padding: .35rem .75rem; border-radius: 100px; background: rgba(11,10,8,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); z-index: 6; pointer-events: none; }
      .vzn-sc-cornertag.b { left: 1.1rem; color: rgba(255,255,255,.8); }
      .vzn-sc-cornertag.a { right: 1.1rem; color: var(--gold-lt); }
      .vzn-usc-cmptools {
        display: flex; align-items: center; gap: .5rem; margin-top: .7rem;
        font-size: .7rem; color: var(--muted); justify-content: center;
      }
      .vzn-usc-cmptools button {
        padding: .34rem .65rem; border-radius: 999px; font-size: .66rem;
        background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--fg); cursor: pointer;
      }
      .vzn-usc-cmptools a { margin-left: .6rem; color: var(--gold-lt); text-decoration: none; font-size: .74rem; }

      /* ── Visor dual con paneo sincronizado (8K vs original) ──────────────────────
         Reemplazó al slider+lupa. NO hay línea central ni zoom: las dos imágenes
         arrancan ya encuadradas de cerca sobre los productos y el usuario arrastra
         una cualquiera — la otra se mueve sola sobre la MISMA región de la escena.
         El encuadre se calcula por fracción de la imagen visible, así que ambas
         muestran el mismo trozo aunque tengan resoluciones distintas. */
      .vzn-usc-duo { width: min(1500px, 94vw); margin: 1.5rem auto 0; }
      .vzn-usc-duo-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
        background: var(--border); border: 1px solid var(--border);
        border-radius: 14px; overflow: hidden;
      }
      .vzn-usc-pane {
        position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: #0d0c0a;
        cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
      }
      .vzn-usc-duo.panning .vzn-usc-pane { cursor: grabbing; }
      .vzn-usc-pane img {
        position: absolute; top: 0; left: 0; max-width: none; display: block;
        transform-origin: 0 0; will-change: transform; -webkit-user-drag: none; user-drag: none;
        opacity: 0; transition: opacity .5s ease;
      }
      .vzn-usc-duo.ready .vzn-usc-pane img { opacity: 1; }
      /* esqueleto mientras bajan las imágenes (la de 8K pesa ~1.8MB) */
      .vzn-usc-pane::before {
        content: ''; position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 70%);
        background-size: 220% 100%; animation: vznUscShimmer 1.5s linear infinite;
        transition: opacity .4s; pointer-events: none;
      }
      .vzn-usc-duo.ready .vzn-usc-pane::before { opacity: 0; }
      @keyframes vznUscShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
      .vzn-usc-pane-tag {
        position: absolute; top: .9rem; left: .9rem; z-index: 3;
        font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
        padding: .35rem .75rem; border-radius: 100px; background: rgba(11,10,8,.62);
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,.18); pointer-events: none;
      }
      .vzn-usc-pane-tag.a { color: var(--gold-lt); border-color: rgba(202,130,98,.45); }
      .vzn-usc-pane-tag.b { color: rgba(255,255,255,.72); }
      .vzn-usc-duo-hint {
        display: flex; align-items: center; justify-content: center; gap: .5rem;
        text-align: center; font-size: .72rem; letter-spacing: .05em; color: var(--dim);
        margin-top: 1rem; transition: opacity .4s;
      }
      .vzn-usc-duo-hint b { color: var(--gold-lt); font-weight: 500; }
      .vzn-usc-duo-hint svg { width: 15px; height: 15px; stroke: var(--gold-lt); flex-shrink: 0; }
      .vzn-usc-duo.dragged .vzn-usc-duo-hint { opacity: .35; }

      /* Aviso de zoom sobre el comparador de resultado. Se atenúa solo cuando el
         usuario ya se acercó al 100% nativo (ahí el aviso deja de aportar). */
      .vzn-usc-zoomtip {
        display: none; align-items: flex-start; gap: .6rem;
        margin: 0 0 .9rem; padding: .7rem .9rem;
        border: 1px solid rgba(201,169,110,.28);
        border-left: 2px solid var(--gold-lt);
        border-radius: 8px;
        background: rgba(201,169,110,.07);
        font-size: .78rem; line-height: 1.5; color: var(--dim);
        transition: opacity .4s;
      }
      .vzn-usc-zoomtip.dim { opacity: .35; }
      .vzn-usc-zoomtip b { color: var(--gold-lt); font-weight: 600; }
      .vzn-usc-zoomtip svg { width: 17px; height: 17px; stroke: var(--gold-lt); flex-shrink: 0; margin-top: .1rem; }
      .vzn-usc-cmptools #uscZoom11 { font-variant-numeric: tabular-nums; }

      @media (max-width: 900px) {
        .vzn-usc { padding: 5rem 1.5rem; }
        .vzn-usc-header { margin-bottom: 3rem; }
      }
      @media (max-width: 760px) {
        /* apilado: el arrastre horizontal panea, el vertical sigue scrolleando la página */
        .vzn-usc-duo-grid { grid-template-columns: 1fr; }
        .vzn-usc-pane { aspect-ratio: 4 / 3; touch-action: pan-y; }
      }
    
.vzn-usc-more{text-decoration:none;color:var(--gold-lt);border:1px solid rgba(202,130,98,.30);background:rgba(202,130,98,.10);border-radius:2px;padding:.5rem 1rem;font-size:.78rem;letter-spacing:.04em;white-space:nowrap;}