/* ============================================================
   laOra · FICHA DE PRODUCTO 2026 (patrón Hamilton)
   ------------------------------------------------------------
   Encargo de Óscar (15/08/2026): calcar la estructura de la ficha
   de hamiltonwatch.com — galería a la izquierda, columna pegajosa
   de compra a la derecha, ficha técnica desplegable debajo—.
   Comparte lenguaje con coleccion-v2.css: se carga DESPUÉS y da
   por hechos sus tokens (.cv2). Todo lo nuevo va con prefijo pv-.
   Suelo de legibilidad: 13px; la ficha desplegada, 14px.
   ============================================================ */

.pv-cuerpo{
  max-width:1440px;margin:0 auto;padding:40px 64px 24px;
  display:grid;grid-template-columns:7fr 5fr;gap:48px;
}

/* ---------- LA GALERÍA ---------- */
.pv-galeria{display:flex;flex-direction:column;gap:24px;min-width:0}
/* EL GRIS ÚNICO (19/08/2026). La foto va «contain» dentro del marco, así
   que el fondo del marco hace de continuación del fondo de estudio: si no
   son el mismo gris se ven dos. Las 15 fotos de estudio se reexportaron
   igualadas a este valor —venían repartidas entre el 226 y el 237— y el
   marco lleva exactamente el gris que dan ellas ya comprimidas. */
.pv-hero{
  position:relative;background:#e9e9e7;border:1px solid var(--cv2-linea);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
}
.pv-hero img{width:82%;height:92%;object-fit:contain;display:block}
/* Y LA FOTO, LO MISMO (23/08/2026). El `display:block` de la línea de arriba
   le ganaba al atributo `hidden`, así que cuando una combinación se quedaba
   sin foto el <img> seguía pintado y el cartel de «Fotografía en preparación»
   le caía encima, ilegible. Es la misma trampa que ya tenían el forro, las
   miniaturas, las capas y el propio cartel. */
.pv-hero img[hidden]{display:none}
/* Fotos «tal cual» (régimen del 15/08): la foto llena el marco y su
   propio fondo de estudio hace de fondo, con la sombra natural. */
.pv-hero-llena{background:none}
.pv-hero-llena img{width:100%;height:100%;object-fit:cover}
.pv-aviso{
  position:absolute;right:10px;bottom:8px;margin:0;
  font-size:10px;color:#6b6664;
}
.pv-nota{
  position:absolute;left:12px;top:12px;margin:0;
  font-family:var(--cv2-mono);font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cv2-gris);
  background:#fff;border:1px solid var(--cv2-linea);padding:4px 8px;
}
.pv-extras{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pv-extras figure{
  margin:0;background:var(--cv2-crema);border:1px solid var(--cv2-linea);
  aspect-ratio:1/1;overflow:hidden;
}
.pv-extras img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .2s;opacity:.92;
}
.pv-extras figure:hover img{opacity:1}

/* ---------- LA COLUMNA DE COMPRA ---------- */
.pv-info{position:relative;min-width:0;display:flex;flex-direction:column}
.pv-info>div{display:flex;flex-direction:column;gap:18px}
.pv-chips{display:flex;gap:8px}
.pv-chips .cv2-chip{margin:0}
.pv-chip-oro{background:var(--cv2-oro);color:var(--cv2-negro)}
.pv-info h1{
  font-family:var(--cv2-mono);font-weight:700;
  font-size:clamp(28px,3.4vw,42px);letter-spacing:-.01em;
  margin:0;text-transform:uppercase;
}
.pv-precio{
  font-family:var(--cv2-mono);font-size:26px;font-weight:700;margin:0;
}
.pv-imp{font-size:13px;color:var(--cv2-gris);margin:-12px 0 0}
.pv-desc{
  font-size:15px;line-height:1.55;color:rgba(18,20,20,.8);margin:0;
  border-top:1px solid var(--cv2-linea);padding-top:14px;
}
.pv-desc b{color:var(--cv2-oro)}

/* ---------- LOS SELECTORES ---------- */
.pv-grupo{display:flex;flex-direction:column;gap:8px}
.pv-rotulo{
  font-family:var(--cv2-mono);font-size:13px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--cv2-gris);
  margin:0;display:flex;justify-content:space-between;
}
.pv-rotulo b{color:var(--cv2-negro);font-weight:700}
.pv-opciones{display:flex;flex-wrap:wrap;gap:8px}
.pv-opciones button{
  font-family:var(--cv2-mono);font-size:13px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  border:1px solid rgba(74,74,74,.3);background:transparent;
  color:var(--cv2-gris);padding:11px 14px;cursor:pointer;
  position:relative;border-radius:0;
}
.pv-opciones button:hover{border-color:var(--cv2-negro);color:var(--cv2-negro)}
.pv-opciones button[aria-pressed="true"]{
  border-color:var(--cv2-negro);background:var(--cv2-crema);
  color:var(--cv2-negro);
}
.pv-opciones button[aria-pressed="true"]::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--cv2-oro);
}
.pv-opciones button[disabled]{
  opacity:.35;cursor:not-allowed;text-decoration:line-through;
}
.pv-opciones button[disabled]:hover{
  border-color:rgba(74,74,74,.3);color:var(--cv2-gris);
}
/* Los cuadrados de color del nato con forro (Óscar, 16/08/2026) */
.pv-colores button{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 10px;text-transform:none;letter-spacing:0;
}
.pv-colores button i{
  display:block;width:34px;height:34px;border:1px solid rgba(0,0,0,.18);
}
.pv-colores button small{
  font-family:var(--cv2-mono);font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
/* La miniatura del forro de piel, abajo a la derecha de la foto.
   OJO: va con «.pv-hero img.» delante porque tiene que GANARLE a
   «.pv-hero img{width:82%;height:92%}» — sin eso hereda el tamaño
   de la foto principal y sale a pantalla completa (bug del 16/08). */
.pv-hero img.pv-forro{
  display:block;position:absolute;right:10px;bottom:30px;
  width:24%;height:auto;
  border:1px solid var(--cv2-linea);box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.pv-hero img.pv-forro[hidden]{display:none}
.pv-fijo{
  font-size:13px;color:var(--cv2-gris);margin:0;
  border:1px dashed rgba(74,74,74,.3);padding:10px 14px;
}

/* ---------- COMPRA Y CONFIANZA ---------- */
.pv-comprar{margin-top:4px}
.pv-confianza{
  display:flex;justify-content:space-between;gap:12px;
  font-size:13px;color:var(--cv2-gris);
}
.pv-confianza span{display:flex;align-items:center;gap:8px}
.pv-confianza svg{width:20px;height:20px;stroke:var(--cv2-oro);flex:0 0 auto}

/* El asterisco de la garantía, explicado donde se lee. La ley da 3
   años a cualquiera; los 5 son del Club. Decir «5 años» a secas y que
   luego resulte que no, es de las cosas que hunden una marca. */
.pv-nota-garantia{
  margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--cv2-gris);
}
.pv-nota-garantia a{color:inherit;text-decoration:underline}

/* ---------- LA FICHA TÉCNICA ---------- */
.pv-tecnica{
  max-width:1440px;margin:0 auto;padding:40px 64px 80px;
}
.pv-tecnica h2{
  font-family:var(--cv2-mono);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,30px);letter-spacing:-.01em;margin:0 0 18px;
}
.pv-tecnica details{border-top:1px solid var(--cv2-linea)}
.pv-tecnica details:last-of-type{border-bottom:1px solid var(--cv2-linea)}
.pv-tecnica summary{
  font-family:var(--cv2-mono);font-size:14px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--cv2-negro);
  padding:18px 2px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
}
.pv-tecnica summary::-webkit-details-marker{display:none}
.pv-tecnica summary::after{
  content:'';width:8px;height:8px;flex:0 0 auto;margin-left:12px;
  border-right:1.5px solid var(--cv2-gris);
  border-bottom:1.5px solid var(--cv2-gris);
  transform:rotate(45deg);transition:transform .18s;
}
.pv-tecnica details[open] summary::after{transform:rotate(225deg)}
.pv-tecnica details p{
  font-size:14px;line-height:1.6;color:var(--cv2-gris);
  margin:0;padding:0 2px 18px;max-width:820px;
}

/* ---------- TELÉFONO ---------- */
@media (max-width:900px){
  .pv-cuerpo{grid-template-columns:1fr;padding:24px 20px;gap:24px}
  .pv-info>div{position:static}
  .pv-tecnica{padding:24px 20px 56px}
  .pv-extras{gap:12px}
}

/* ============================================================
   EL PIE FIJO DE LA COMPRA (Óscar, 17/08/2026)
   Vive en la COLUMNA IZQUIERDA, debajo de las fotos, y se queda
   pegado abajo mientras el resto de la ficha sube. Como es el
   último hijo de .pv-galeria, se despega solo al terminar esa
   columna, o sea justo cuando empieza la Ficha Técnica: a partir
   de ahí el scroll vuelve a ser normal y queda todo arriba.
   ============================================================ */
.pv-pie{
  position:sticky;bottom:0;z-index:6;margin-top:auto;padding-top:16px;
  display:flex;flex-direction:column;gap:10px;
  background:#fff;border-top:1px solid var(--cv2-linea);
  padding:16px 0 18px;
}
.pv-pie .pv-precio{margin:0}
.pv-pie .pv-imp{margin:0}
.pv-pie .pv-comprar{margin-top:2px}

@media (max-width:900px){
  /* Sin dos columnas, el pie se ancla al borde inferior de la
     pantalla; al llegar a la Ficha Técnica vuelve a su sitio. */
  .pv-pie{
    position:fixed;left:0;right:0;bottom:0;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(18,20,20,.10);
    border-top:1px solid var(--cv2-linea);
  }
  .pv-pie.pv-pie-quieto{
    position:static;box-shadow:none;padding:16px 0 0;
  }
  .pv-galeria{padding-bottom:150px}
  .pv-galeria.pv-galeria-suelta{padding-bottom:0}
}

/* El `main { overflow:hidden }` global (laora.css) anula cualquier
   position:sticky de dentro. En las fichas se cambia por `clip` en el
   eje X, que sigue conteniendo el desbordamiento lateral pero deja
   funcionar al pie fijo y a la columna derecha. */
main.cv2{ overflow:visible; overflow-x:clip }

/* `.pv-grupo{display:flex}` le ganaba a `[hidden]` y dejaba el rótulo
   «Color del nato» colgado sin paleta debajo. */
.pv-grupo[hidden], .pv-opciones[hidden]{display:none}

/* ============================================================
   LAS ELECCIONES, NUMERADAS (Óscar, 17/08/2026)
   Cada grupo lleva su número por orden dentro de un círculo de oro.
   Va con contador de CSS: si un grupo se oculta (p. ej. el color del
   nato cuando no toca), no gasta número y la cuenta sigue seguida.
   ============================================================ */
.pv-info>div{counter-reset:paso}
.pv-grupo>.pv-rotulo{align-items:center;gap:10px;justify-content:flex-start}
.pv-grupo>.pv-rotulo::before{
  counter-increment:paso;content:counter(paso);
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  background:var(--cv2-oro);color:var(--cv2-negro);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;letter-spacing:0;
}
/* el rótulo tiene el nombre a la izquierda y el dato a la derecha:
   el número entra delante sin romper ese reparto */
.pv-grupo>.pv-rotulo>b{margin-left:auto}

/* ============================================================
   LA IMAGEN NO SE MUEVE HASTA LA ÚLTIMA ELECCIÓN (Óscar, 18/08/2026)
   El visor se queda pegado bajo la cabecera mientras el cliente
   recorre las elecciones, para que vea cada cambio en pantalla. Se
   suelta solo, sin JS: la galería ya no lleva dentro las fotos de
   apoyo, así que su altura es la de la columna de compra y el sticky
   muere justo donde acaban las opciones. A partir de ahí entran las
   fotos de apoyo y el scroll vuelve a ser normal.
   ============================================================ */
.pv-visor-fijo .pv-galeria{align-self:stretch}
.pv-visor-fijo .pv-hero{
  position:sticky;top:92px;                 /* 76px de cabecera + aire */
  max-height:calc(100vh - 108px);           /* en pantallas bajas, que quepa entero */
}
.pv-visor-fijo>.pv-extras{grid-column:1;margin-top:24px}

/* ---------- LOS PASOS APAGADOS (Óscar: apagados, no invisibles) ----------
   El pespunte y el cierre solo tienen sentido con la piel italiana.
   Con cualquier otra correa el paso se sigue viendo —y sigue contando
   en la numeración— pero queda deslucido y no admite clic. */
.pv-grupo.pv-apagado{opacity:.42}
.pv-grupo.pv-apagado .pv-rotulo::before{background:var(--cv2-linea);color:var(--cv2-gris)}
.pv-grupo.pv-apagado .pv-opciones{pointer-events:none}

@media (max-width:900px){
  /* En una sola columna el visor ocupa la pantalla entera: pegarlo
     dejaría las elecciones fuera de cuadro. RELATIVE, no STATIC
     (21/08/2026): con static el marco deja de ser el ancla de lo que
     lleva dentro y todo lo colocado en sus esquinas se escapaba al pie
     de la página — el aviso de «puede contener errores de diseño» se
     leía encima del paso «Estilo», y con él se iban la miniatura de la
     tapa, la del forro y el botón de ampliar. Relative despega igual y
     mantiene el ancla. */
  /* OJO al `top:auto`: relative SÍ obedece al `top:92px` del sticky —
     static lo ignoraba— y sin esto la foto bajaba 92 px, dejando un
     hueco blanco entre la cabecera y el reloj. */
  .pv-visor-fijo .pv-hero{position:relative;top:auto}
  .pv-visor-fijo>.pv-extras{margin-top:0}
}

/* ---------- LA TAPA, DE MINIATURA (Óscar, 18/08/2026) ----------
   De salida no hay ninguna tapa elegida y el visor va limpio. En
   cuanto el cliente toca una, asoma en la esquina de abajo a la
   derecha, sin quitarle el sitio al reloj. El aviso de la esquina se
   muda a la izquierda para dejarle su rincón.
   OJO: va con «.pv-hero img.» delante para ganarle al 82%/92% de
   «.pv-hero img», igual que el forro. */
.pv-minis{
  position:absolute;right:12px;bottom:12px;z-index:3;
  display:flex;gap:8px;align-items:flex-end;
}
.pv-hero .pv-minis img.pv-mini{
  position:static;width:140px;max-width:23vw;height:auto;
  aspect-ratio:1/1;object-fit:cover;
  background:#fff;border:1px solid var(--cv2-linea);
}
.pv-hero img.pv-mini[hidden]{display:none}
.pv-aviso{right:auto;left:12px}

/* ---------- ROTULOS EN DOS LÍNEAS (Óscar, 18/08/2026) ----------
   Las cajas se leen mejor con el material arriba y el bisel debajo.
   El botón pasa a alinear su contenido en el centro para que el punto
   de color quede a media altura de las dos líneas. */
.pv-opciones button:has(.pv-lineas){display:inline-flex;align-items:center;gap:8px}
.pv-lineas{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.35}

/* ---------- LA MACRO A TODO LO ANCHO (Óscar, 18/08/2026) ----------
   Foto de estudio en blanco y negro, entre el configurador y la ficha
   técnica. Va a sangre completa y con altura acotada: la original es
   vertical (1440×1800) y a pantalla completa se comería el scroll. */
.pv-macro{
  margin:0;background:#0b0b0b;
  max-height:78vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.pv-macro img{
  width:100%;height:78vh;object-fit:cover;object-position:center 42%;
  display:block;
}
@media (max-width:900px){
  .pv-macro, .pv-macro img{height:62vh;max-height:62vh}
}

/* Cuando la foto madre ya trae la cabeza elegida, su capa se retira */
.pv-hero img.pv-capa[hidden]{display:none}

/* ---------- LA ZONA DE COMPRA, AL MODO HAMILTON (Óscar, 19/08/2026)
   Precio y disponibilidad en la misma línea; debajo el botón; y bajo
   el botón, la caja de Klarna con su marco. ---------- */
.pv-precio-fila{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.pv-precio-fila .pv-precio{margin:0}

.pv-stock{
  margin:0;display:flex;align-items:center;gap:8px;
  font-size:14px;color:var(--cv2-gris);
}
.pv-stock i{
  width:9px;height:9px;border-radius:50%;background:#2FA84F;
  box-shadow:0 0 0 3px rgba(47,168,79,.18);
}

.pv-klarna{
  margin:0;display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:6px;
  border:1px solid var(--cv2-linea);padding:10px 12px;
  font-size:12.5px;line-height:1.35;color:var(--cv2-gris);text-align:center;
}
.pv-klarna img{display:block;flex:none;height:18px;width:auto;
  background:#FFA8CD;border-radius:4px;padding:3px 5px}
.pv-klarna b{font-weight:700;color:var(--cv2-negro)}
.pv-klarna a{color:var(--cv2-negro);text-decoration:underline}

/* El selector de miniaturas se retiró el 19/08/2026: las elecciones viven
   en el configurador y debajo del visor solo quedan las dos de catálogo. */

/* Las dos fotos de catálogo del Murph (19/08/2026) van debajo del selector,
   con la misma retícula de dos columnas y algo de aire por encima para que
   se lean como otra cosa: aquellas se pulsan, estas se miran. */

/* ---------- FICHAS QUE AÚN NO SE VENDEN ----------
   Tortuga, Cóctel y Diver tienen las piezas elegidas pero no el coste,
   y sin coste no hay precio: el motor de la casa lo saca de ahí. Se
   dice y no se vende, en vez de inventar una cifra o dejar un botón
   que llevaría a un carrito que el servidor va a rechazar. */
.pv-precio-pendiente{ color:var(--cv2-gris); font-weight:600 }
.pv-aviso-pendiente{
  margin-top:10px; padding:12px 14px; border-left:2px solid var(--cv2-oro);
  background:var(--cv2-crema); font-size:13.5px; line-height:1.55;
}
.pv-comprar[disabled]{ opacity:.45; cursor:default }
/* El visor sin foto no puede comerse la pantalla: el `aspect-ratio:1/1`
   del hero lo estiraba tanto que los pasos se iban debajo del pliegue y
   la ficha parecía vacía. Mientras no haya foto, un marco corto. */
.pv-hero-vacio{ aspect-ratio:auto; min-height:0 }
.pv-foto-pendiente{
  display:flex; align-items:center; justify-content:center;
  min-height:200px; padding:70px 20px; margin:0;
  background:var(--cv2-crema); color:var(--cv2-gris);
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; text-align:center;
}
.pv-grupo .pv-rotulo small{ font-weight:400; color:var(--cv2-gris); text-transform:none; letter-spacing:0 }

/* La nota de un paso va debajo de sus botones. No confundir con
   `.pv-nota`, que es la etiqueta que flota SOBRE la foto. */
.pv-nota-paso{
  margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--cv2-gris);
}

/* EL VISOR SIN FOTO (19/08/2026). Óscar retiró todas las imágenes del
   Trinchera para rehacerlas: en vez de dejar un marco vacío o una foto que
   no corresponde, el visor lo dice. Mismo tamaño y mismo gris que cuando
   lleva foto, para que la página no dé un salto cuando vuelvan. */
.pv-sinfoto{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:0 12%;text-align:center;
}
.pv-sinfoto p{
  margin:0;font-family:var(--cv2-mono);font-size:13px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cv2-negro);
}
.pv-sinfoto span{max-width:34ch;font-size:14px;line-height:1.45;color:var(--cv2-gris)}
/* `hidden` no basta contra un `display:flex` propio: la regla de la clase
   gana al atributo. Sin esta línea el cartel se quedaba encima de la foto. */
.pv-sinfoto[hidden]{display:none}

/* ---------- AMPLIAR LA FOTO (21/08/2026) ----------
   Cuatrocientos euros de reloj y no se podía acercar la nariz al dial.
   La lupa la lleva SOLO el Trinchera de momento, y por eso el cursor va
   con la clase .pv-ampliable: si se pusiera en «.pv-hero img» a secas,
   las otras seis fichas enseñarían un cursor de lupa que no amplía
   nada, que es peor que no tenerlo. */
.pv-hero img.pv-ampliable{cursor:zoom-in}
/* Arriba a la derecha: abajo a la izquierda se le echaba encima el
   «La imagen puede contener errores de diseño», que va anclado a la
   derecha y crece hacia el otro lado. Arriba a la izquierda está la nota
   del segundero, y abajo a la derecha, la miniatura del forro. */
.pv-ampliar{
  position:absolute;right:10px;top:10px;
  display:inline-flex;align-items:center;gap:6px;
  min-height:36px;padding:0 12px;
  background:#fff;border:1px solid var(--cv2-linea);
  font-family:var(--cv2-mono);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cv2-gris);
  cursor:zoom-in;
}
@media (hover:hover) and (pointer:fine){
  .pv-ampliar:hover{color:var(--cv2-negro);border-color:var(--cv2-negro)}
}
.pv-ampliar[hidden]{display:none}

.pv-lupa{
  position:fixed;inset:0;z-index:200;
  background:rgba(20,19,18,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px;
}
.pv-lupa[hidden]{display:none}
/* El alto descuenta el pie y los márgenes: con 92vh a secas, la frase de
   abajo se montaba encima de la correa. */
.pv-lupa img{
  max-width:min(92vw,80vh);max-height:80vh;
  width:auto;height:auto;display:block;background:#e9e9e7;
}
.pv-lupa-cerrar{
  position:absolute;top:14px;right:14px;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(255,255,255,.5);color:#fff;
  font-size:20px;line-height:1;cursor:pointer;
}
.pv-lupa-cerrar:hover{border-color:#fff}
.pv-lupa-pie{
  margin:0;max-width:min(92vw,640px);text-align:center;
  font-family:var(--cv2-mono);font-size:12px;line-height:1.5;
  letter-spacing:.04em;color:rgba(255,255,255,.8);
}

/* ---------- LA GALERÍA DICE DE QUÉ RELOJ ES (21/08/2026) ----------
   Las dos fotos grandes de la columna son SIEMPRE el Murph de acero con
   piel negra. Mientras el cliente esté configurando ese mismo reloj no
   hace falta decir nada; en cuanto elige otro, hay que avisarle de que
   esas dos no son el suyo. La norma de la casa es no enseñar nunca un
   reloj que no sea el elegido sin decirlo. */
.pv-galeria-nota{
  grid-column:1/-1;margin:0;
  font-size:12px;line-height:1.5;color:var(--cv2-gris);
}
.pv-galeria-nota[hidden]{display:none}

/* ---------- LA LUPA DEL LUNAR (21/08/2026) ----------
   Su foto no es una imagen: son dos capas superpuestas y la de arriba
   puede llevar la máscara del disco. La lupa clona el visor entero y lo
   agranda, así que aquí solo hace falta darle tamaño al clon. */
.pv-lupa-marco{width:min(92vw,80vh);aspect-ratio:1/1}
.pv-lupa-visor{width:100%;height:100%;border:0}