/* Sticker y Pin: catalogo + coleccion (Template Global Dale Color) */

/* ===== Botonera de 5 tiles (Clasico/Vitral/Bordado/Sticker/Pin) =====
   Asimetrica estilo Windows: 4 columnas, Clasico ocupa un bloque grande
   2x2 (es el modo mas usado), los otros 4 son tiles anchos de 2 columnas
   x 1 fila -- mismo espiritu que el Start Screen de Windows 8/10. */
.dc-editor-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 84px);
  gap: 10px;
  margin: 2px 0 10px;
  grid-template-areas:
    "clasico clasico vitral   vitral"
    "clasico clasico bordado  bordado"
    "sticker sticker pin      pin";
}

/* La tarjeta usa el Template Global (superficie/borde/sombra del preset
   activo, igual que .opcion-tecnica-card) -- el color distintivo por tipo
   queda solo en el circulo del icono, mismo criterio que .icon-clasico/
   .icon-vitral/.icon-bordado en selector_tecnicas.css. Asi la botonera
   entera cambia con el tema en vez de tener 5 colores fijos. */
.dc-tile {
  border: 1px solid var(--t-tarjeta-borde);
  border-radius: 16px;
  cursor: pointer;
  background: var(--t-tarjeta-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  color: var(--t-texto);
  box-shadow: 0 6px 16px var(--t-sombra);
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.dc-tile:active { transform: scale(0.96); border-color: var(--acento); }

.dc-tile-icono {
  font-size: 20px; line-height: 1;
  width: 34px; height: 34px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.dc-tile-nombre { font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--t-texto); }

.dc-tile-clasico { grid-area: clasico; }
.dc-tile-clasico .dc-tile-icono { width: 46px; height: 46px; font-size: 26px; border-radius: 14px; }
.dc-tile-clasico .dc-tile-nombre { font-size: 14px; }

.dc-tile-vitral { grid-area: vitral; }
.dc-tile-bordado { grid-area: bordado; }
.dc-tile-sticker { grid-area: sticker; }
.dc-tile-pin { grid-area: pin; }

/* Identidad de color por tecnica -- pedido en vivo: "las 5 se ven todas
   iguales, se pierde la oportunidad de que Vitral se sienta vidrio (frio)
   y Bordado se sienta tela (calido) de un vistazo". El circulo del icono
   ya tenia un tono fijo por tecnica (bien, es la marca de cada una) pero
   en hex duro -- no se adaptaba a los 17 presets (ver DC_PRESETS en
   dalecolor.js), asi que en temas oscuros quedaba como un circulo pastel
   claro perdido sobre una tarjeta oscura. Ahora el HUE es fijo (mantiene
   la identidad: vitral siempre celeste, bordado siempre rosado...) pero
   el fondo/borde se mezclan con var(--t-tarjeta-bg) del preset activo via
   color-mix(), asi se ve bien en claros Y oscuros sin tocar los 17
   presets uno por uno. Un filo superior del mismo hue en la TARJETA (no
   solo el icono) suma identidad sin abandonar "la tarjeta usa el
   Template Global" del comentario de arriba -- sigue siendo la
   superficie/sombra del preset, solo con un borde de color propio. */
.dc-editor-tiles {
  --hue-clasico: 25; --hue-vitral: 199; --hue-bordado: 347; --hue-sticker: 38; --hue-pin: 262;
}
.dc-tile-clasico { border-top: 3px solid color-mix(in srgb, hsl(var(--hue-clasico) 85% 50%) 55%, var(--t-tarjeta-borde)); }
.dc-tile-vitral { border-top: 3px solid color-mix(in srgb, hsl(var(--hue-vitral) 85% 50%) 55%, var(--t-tarjeta-borde)); }
.dc-tile-bordado { border-top: 3px solid color-mix(in srgb, hsl(var(--hue-bordado) 85% 50%) 55%, var(--t-tarjeta-borde)); }
.dc-tile-sticker { border-top: 3px solid color-mix(in srgb, hsl(var(--hue-sticker) 85% 50%) 55%, var(--t-tarjeta-borde)); }
.dc-tile-pin { border-top: 3px solid color-mix(in srgb, hsl(var(--hue-pin) 85% 50%) 55%, var(--t-tarjeta-borde)); }

.dc-tile-clasico .dc-tile-icono { background: color-mix(in srgb, hsl(var(--hue-clasico) 85% 50%) 20%, var(--t-tarjeta-bg)); color: hsl(var(--hue-clasico) 80% 45%); border: 1px solid color-mix(in srgb, hsl(var(--hue-clasico) 85% 50%) 35%, var(--t-tarjeta-bg)); }
.dc-tile-vitral .dc-tile-icono { background: color-mix(in srgb, hsl(var(--hue-vitral) 85% 50%) 20%, var(--t-tarjeta-bg)); color: hsl(var(--hue-vitral) 80% 45%); border: 1px solid color-mix(in srgb, hsl(var(--hue-vitral) 85% 50%) 35%, var(--t-tarjeta-bg)); }
.dc-tile-bordado .dc-tile-icono { background: color-mix(in srgb, hsl(var(--hue-bordado) 85% 50%) 20%, var(--t-tarjeta-bg)); color: hsl(var(--hue-bordado) 80% 45%); border: 1px solid color-mix(in srgb, hsl(var(--hue-bordado) 85% 50%) 35%, var(--t-tarjeta-bg)); }
.dc-tile-sticker .dc-tile-icono { background: color-mix(in srgb, hsl(var(--hue-sticker) 85% 50%) 20%, var(--t-tarjeta-bg)); color: hsl(var(--hue-sticker) 80% 40%); border: 1px solid color-mix(in srgb, hsl(var(--hue-sticker) 85% 50%) 35%, var(--t-tarjeta-bg)); }
.dc-tile-pin .dc-tile-icono { background: color-mix(in srgb, hsl(var(--hue-pin) 85% 50%) 20%, var(--t-tarjeta-bg)); color: hsl(var(--hue-pin) 80% 55%); border: 1px solid color-mix(in srgb, hsl(var(--hue-pin) 85% 50%) 35%, var(--t-tarjeta-bg)); }

.coleccionables-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--t-bg);
  color: var(--t-texto);
  display: flex;
  flex-direction: column;
  animation: fadeInModal 0.2s ease-out forwards;
}

.coleccionables-header {
  flex: 0 0 auto;
  padding: 16px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.coleccionables-titulo {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 19px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--t-texto);
}

.coleccionables-cerrar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--t-tarjeta-borde);
  background: var(--t-tarjeta-bg);
  color: var(--t-texto-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}

.coleccionables-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 4px 18px 14px;
}

.coleccionables-tab {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--t-tarjeta-borde);
  background: var(--t-tarjeta-bg);
  color: var(--t-texto-sec);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.coleccionables-tab.activa {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.coleccionables-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 18px calc(24px + env(safe-area-inset-bottom));
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.coleccionables-cargando,
.coleccionables-vacio {
  text-align: center;
  color: var(--t-texto-sec);
  font-size: 13px;
  padding: 60px 20px;
  line-height: 1.6;
}

/* Clasico/Vitral/Bordado no tienen catalogo propio -- esta pantalla es solo
   un acceso directo hacia donde de verdad vive esa accion. */
.coleccionables-acceso-directo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 50px 20px;
}

.coleccionables-acceso-icono {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--t-tarjeta-bg);
  border: 1px solid var(--t-tarjeta-borde);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 6px 16px var(--t-sombra);
}

.coleccionables-acceso-texto {
  color: var(--t-texto-sec);
  font-size: 13px;
  line-height: 1.5;
  max-width: 260px;
}

.coleccionables-acceso-directo .coleccionables-btn-colorear {
  width: auto;
  margin: 0;
  padding: 11px 22px;
}

.coleccionables-buscador {
  margin: 4px 0 10px;
}

.coleccionables-buscador input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--t-tarjeta-borde);
  background: var(--t-tarjeta-bg);
  color: var(--t-texto);
  font-size: 13px;
}

.coleccionables-buscador input::placeholder {
  color: var(--t-texto-sec);
}

.coleccionables-filtros {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  overflow-x: auto;
}

.coleccionables-chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--t-tarjeta-borde);
  background: var(--t-tarjeta-bg);
  color: var(--t-texto-sec);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.coleccionables-chip.activa {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.coleccionables-fila-controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}
.coleccionables-fila-controles .coleccionables-filtros { margin: 0; }

.coleccionables-tamano-pagina {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--t-texto-sec);
  white-space: nowrap;
}
.coleccionables-tamano-pagina select {
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--t-tarjeta-borde);
  background: var(--t-tarjeta-bg);
  color: var(--t-texto);
  font-size: 12px;
  font-weight: 700;
}

/* Categorias colapsables (<details> nativo, sin JS extra para el toggle) --
   mismo criterio para los 5 editores (sticker/pin/vitral/bordado/clasico). */
.coleccionables-categoria {
  margin: 0 0 14px;
  border: 1px solid var(--t-tarjeta-borde);
  border-radius: 14px;
  padding: 4px 10px 10px;
  background: var(--t-tarjeta-bg);
}
.coleccionables-categoria summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--t-texto);
  display: flex;
  align-items: center;
  gap: 8px;
}
.coleccionables-categoria summary::-webkit-details-marker { display: none; }
.coleccionables-categoria summary::before {
  content: '▸';
  color: var(--t-texto-sec);
  transition: transform 0.15s;
  font-size: 11px;
}
.coleccionables-categoria[open] summary::before { transform: rotate(90deg); }
.coleccionables-categoria-cuenta {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--t-texto-sec);
  background: var(--t-bg-suave, rgba(0,0,0,0.15));
  border-radius: 20px;
  padding: 2px 8px;
}
.coleccionables-categoria .coleccionables-grid { margin-top: 4px; }
.coleccionables-categoria .coleccionables-btn-cargar-mas { margin: 4px 0 6px; }

.coleccionables-btn-cargar-mas {
  display: block;
  width: 100%;
  margin: 4px 0 14px;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid var(--t-tarjeta-borde);
  background: var(--t-tarjeta-bg);
  color: var(--t-texto);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.coleccionables-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.coleccionables-carta {
  background: var(--t-tarjeta-bg);
  border: 1px solid var(--t-tarjeta-borde);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 10px var(--t-sombra);
}

.coleccionables-img-wrap {
  aspect-ratio: 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coleccionables-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.coleccionables-nombre {
  padding: 8px 10px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--t-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coleccionables-btn-colorear {
  display: block;
  width: calc(100% - 16px);
  margin: 8px auto 10px;
  padding: 7px;
  border: none;
  border-radius: 8px;
  background: var(--acento);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

/* Paleta curada flotante del Estudio Sticker/Pin -- reemplaza el dock de 9
   herramientas del editor clasico: solo elegir color + tocar una region
   (balde), como Vitral/Bordado. */
.estudio-paleta {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--t-tarjeta-bg) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--t-tarjeta-borde);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  max-width: calc(100% - 24px);
  overflow-x: auto;
}

.estudio-swatch {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.estudio-swatch.active {
  border-color: var(--acento);
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--acento);
}

/* Visor de acabado en vivo (boton "Ver acabado" del editor) */
.acabado-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  animation: fadeInModal 0.2s ease-out forwards;
}

.acabado-overlay img {
  max-width: min(80vw, 380px);
  max-height: 55vh;
  border-radius: 20px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}

.acabado-overlay-cargando { color: #fff; font-size: 14px; }

.acabado-overlay-cerrar {
  padding: 10px 22px;
  border-radius: 20px;
  border: none;
  background: var(--acento);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

/* ===== Visor con superficies (Mochila/Chaqueta/Gorra/Corcho para pines,
   Cuaderno/Libro/Carpeta/Laptop para stickers) -- pegar y "clavar" lo ya
   coloreado, mecanica tipo plancha (mantener presionado). Los colores de
   cada objeto son fijos (representan el material real), no siguen el tema
   claro/oscuro -- mismo criterio que las texturas piedra/cemento del
   Editor Vitral. ===== */
.visor-superficies-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 2px 0 14px;
  padding-bottom: 2px;
}
.visor-superficie-chip { flex: 0 0 auto; }

.visor-superficie-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 10px;
  /* Zoom del fondo (pedido en vivo: "falta zoom para la imagen de fondo") --
     .visor-superficie crece via max-width inline por sobre este ancho, asi
     que hace falta poder desplazarse para ver las zonas que quedan fuera. */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Un unico cuadrado "tarjeta" para cualquier superficie -- el objeto
   ilustrado adentro maneja su propia silueta en coordenadas 0-100% propias,
   asi x/y de un pin/sticker colocado es la MISMA fraccion sin importar que
   pestana de superficie este activa. */
.visor-superficie {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  margin: 0 auto;
  background: var(--t-tarjeta-bg);
  border: 1px solid var(--t-tarjeta-borde);
  border-radius: 26px;
  box-shadow: 0 10px 26px var(--t-sombra);
  overflow: visible;
  flex-shrink: 0;
  transition: max-width 0.18s ease;
}

.visor-objeto { position: absolute; inset: 0; pointer-events: none; }

.visor-capa-items { position: absolute; inset: 0; }

.visor-hint {
  text-align: center;
  font-size: 11.5px;
  color: var(--t-texto-sec);
  margin: 0 0 12px;
  padding: 0 10px;
}

.visor-boton-icono {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--t-tarjeta-borde);
  background: var(--t-tarjeta-bg);
  color: var(--t-texto-sec);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
}
.visor-boton-icono:disabled { opacity: 0.35; cursor: default; }
.visor-boton-icono.activo { background: var(--acento); border-color: var(--acento); color: #fff; }

/* Pantalla completa (editable y "solo vista") -- pedido en vivo: "añade
   pantalla completa editable y solo vision... facil de contemplar".
   CSS-fija, mismo criterio ya probado en el resto de la app (Fullscreen
   API nativa falla en silencio en varios WebViews Android/Capacitor). */
.visor-panel-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10060;
  background: var(--t-bg);
  display: flex;
  flex-direction: column;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  padding-top: calc(14px + env(safe-area-inset-top));
}
.visor-panel-fullscreen .visor-superficie-wrap {
  flex: 1;
  min-height: 0;
  align-items: center;
}
.visor-panel-fullscreen .visor-superficie {
  max-width: min(90vw, 68vh);
}
.visor-fs-controles {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: 14px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.visor-fs-controles .visor-boton-icono {
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
  backdrop-filter: blur(8px);
}

/* Solo vista: oculta todo lo interactivo para contemplar la prenda armada
   sin distracciones, sin salir de pantalla completa. */
.visor-solo-vista .visor-superficies-tabs,
.visor-solo-vista .visor-hint,
.visor-solo-vista .visor-bandeja {
  display: none;
}
.visor-solo-vista .visor-item {
  pointer-events: none;
}
.visor-solo-vista .visor-item-borrar,
.visor-solo-vista .visor-item-resize,
.visor-solo-vista .visor-item-rotar {
  display: none;
}

.visor-bandeja {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 10px;
}
.visor-bandeja-item {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  border: 1px solid var(--t-tarjeta-borde);
  background: var(--t-tarjeta-bg);
  padding: 6px;
  cursor: pointer;
}
.visor-bandeja-item img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* --- Pin/sticker colocados sobre la superficie --- */
.visor-item {
  position: absolute;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  touch-action: none;
  cursor: grab;
}
.visor-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
.visor-item.presionando { animation: visorPulsoPresion 0.7s ease-in-out; box-shadow: 0 0 0 3px var(--acento); border-radius: 20%; }
.visor-item.clavado { cursor: default; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); border-radius: 20%; }
.visor-item.clavado .visor-item-borrar,
.visor-item.clavado .visor-item-resize,
.visor-item.clavado .visor-item-rotar { display: none; }

.visor-item-borrar {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  touch-action: none;
}
.visor-item-resize {
  position: absolute;
  bottom: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--acento);
  border: 2px solid #fff;
  cursor: nwse-resize;
  touch-action: none;
}
.visor-item-rotar {
  position: absolute;
  top: -8px; left: -8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  border: none;
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

@keyframes visorPulsoPresion {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(0.94); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes visorClavado {
  0% { transform: translate(-50%, -50%) scale(1); }
  35% { transform: translate(-50%, -50%) scale(0.8); }
  60% { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes visorDespegado {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  30% { transform: translate(-50%, -50%) scale(1.1) rotate(-4deg); }
  60% { transform: translate(-50%, -50%) scale(1.1) rotate(3deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
.visor-item.animar-clavado { animation: visorClavado 0.35s ease-out; }
.visor-item.animar-despegar { animation: visorDespegado 0.3s ease-out; }

@keyframes visorAparecer {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  70% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.visor-item.animar-aparecer { animation: visorAparecer 0.32s cubic-bezier(.34,1.56,.64,1); }

/* --- Mochila / Chaqueta / Gorra: fotos reales --- */
/* Pedido en vivo: "tenemos imagenes reales en el visor bordado, usalas" --
   reemplaza la ilustracion plana en CSS de antes por las mismas fotos de
   producto reales que ya usa el visor 3D de Bordado (CONFIG_PRODUCTOS_
   BORDADO en modos_pro.js, assets/mockups/*.jpg). */
.visor-objeto-foto {
  border-radius: 18px;
  overflow: hidden;
}
.visor-objeto-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Corcho --- */
.visor-objeto-corcho {
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.07) 0, transparent 3%),
    radial-gradient(circle at 62% 16%, rgba(0,0,0,0.09) 0, transparent 4%),
    radial-gradient(circle at 80% 62%, rgba(255,255,255,0.06) 0, transparent 3%),
    radial-gradient(circle at 35% 76%, rgba(0,0,0,0.08) 0, transparent 3%),
    radial-gradient(circle at 90% 86%, rgba(255,255,255,0.06) 0, transparent 3%),
    radial-gradient(circle at 12% 88%, rgba(0,0,0,0.07) 0, transparent 3%),
    linear-gradient(160deg, #cf9f66 0%, #b9884f 55%, #a6753e 100%);
  box-shadow: inset 0 0 0 10px #7a4e28, inset 0 0 22px rgba(0,0,0,0.3);
}

/* --- Cuaderno --- */
.vo-cuaderno-pagina {
  position: absolute; left: 16%; top: 4%; width: 80%; height: 92%;
  background: repeating-linear-gradient(180deg, transparent 0 30px, rgba(120,150,200,0.28) 30px 31px), #f6efe0;
  border-radius: 6px 16px 16px 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 8px 18px rgba(0,0,0,0.15);
}
.vo-cuaderno-margen { position: absolute; left: 16%; top: 0; bottom: 0; width: 2px; background: #e0908f; }
.vo-cuaderno-espiral {
  position: absolute; left: 6%; top: 8%; width: 8%; height: 84%;
  background: repeating-radial-gradient(circle, #c3c6cc 0 3px, transparent 3px 13px);
}

/* --- Libro --- */
.vo-libro-pagina {
  position: absolute; top: 8%; width: 44%; height: 84%;
  background: linear-gradient(180deg, #f7f1e3 0%, #efe6d0 100%);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}
.vo-libro-pagina-izq { left: 6%; border-radius: 8px 2px 2px 8px; }
.vo-libro-pagina-der { left: 50%; border-radius: 2px 8px 8px 2px; }
.vo-libro-lomo {
  position: absolute; left: 48.5%; top: 6%; width: 3%; height: 88%;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.28) 50%, rgba(0,0,0,0) 100%);
}

/* --- Carpeta --- */
.vo-carpeta-cuerpo {
  position: absolute; left: 8%; top: 14%; width: 84%; height: 76%;
  background: linear-gradient(155deg, #f0c976 0%, #e0b563 60%, #cd9f4d 100%);
  clip-path: polygon(0% 10%, 22% 10%, 28% 0%, 46% 0%, 52% 10%, 100% 10%, 100% 100%, 0% 100%);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.vo-carpeta-pliegue { position: absolute; left: 4%; right: 4%; top: 42%; height: 1px; background: rgba(0,0,0,0.14); }

/* --- Laptop --- */
.vo-laptop-tapa {
  position: absolute; left: 8%; top: 14%; width: 84%; height: 72%;
  background: linear-gradient(160deg, #d7dade 0%, #b7bbc2 55%, #9a9ea6 100%);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), inset 0 -14px 24px rgba(0,0,0,0.12), 0 8px 18px rgba(0,0,0,0.18);
}
.vo-laptop-camara {
  position: absolute; left: 50%; top: 6%; width: 5%; height: 5%;
  margin-left: -2.5%;
  background: #5a5f66;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}