/* Visor 3D compartido por las tres propuestas: toma los colores de la paleta activa. */
.viewer {
  --v-font: var(--texto, "Onest", system-ui, sans-serif);
  width: min(1240px, calc(100vw - 48px)); height: min(820px, calc(100dvh - 48px)); max-width: none; max-height: none;
  padding: 0; border: 0; border-radius: 24px; background: var(--superficie); color: var(--tinta); overflow: hidden;
  font: 400 17px/1.55 var(--v-font);
  display: none; grid-template-columns: minmax(0, 1fr) 400px;
  opacity: 0; transform: scale(0.97);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete;
}
.viewer[open] { display: grid; opacity: 1; transform: none; }
@starting-style { .viewer[open] { opacity: 0; transform: scale(0.97); } }
.viewer::backdrop { background: rgb(27 21 20 / 0); transition: background-color 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; }
.viewer[open]::backdrop { background: rgb(27 21 20 / 0.55); }
@starting-style { .viewer[open]::backdrop { background: rgb(27 21 20 / 0); } }
.viewer h2 { margin: 0; font: 600 clamp(32px, 3vw, 44px)/1.05 var(--display, var(--v-font)); letter-spacing: -0.02em; text-wrap: balance; }
.viewer p { margin: 0; }
.viewer button { font: inherit; color: inherit; }

.v-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--fondo); color: var(--tinta); cursor: pointer;
  font: 600 15px/1 var(--v-font); text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.v-btn:active { transform: scale(0.97); }
.v-btn-rojo { min-height: 52px; padding: 0 28px; font-size: 16px; background: var(--rojo); color: var(--sobre-rojo); }
@media (hover: hover) and (pointer: fine) {
  .v-btn:hover { background: var(--linea); }
  .v-btn-rojo:hover { background: var(--rojo-hondo); }
}
.viewer :focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }

.v-stage-wrap { position: relative; background: var(--fondo); min-height: 0; }
.v-stage { position: absolute; inset: 48px 0 84px; }
.v-stage canvas { display: block; }
.v-controls {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 999px; background: var(--superficie);
  box-shadow: 0 10px 26px -12px rgb(0 0 0 / 0.28);
}
.v-controls[hidden], .v-controls [hidden] { display: none; }
#v-page { min-width: 9ch; white-space: nowrap; text-align: center; font-weight: 600; font-size: 15px; }
.v-hint { position: absolute; left: 24px; top: 20px; right: 24px; font-size: 14px; color: var(--tenue); pointer-events: none; }
/* tira de fotos: a la derecha del 3D, hacia abajo */
.v-fotos {
  position: absolute; top: 14px; right: 14px; bottom: 14px; width: 88px; padding: 6px;
  display: flex; flex-direction: column; gap: 10px; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
}
.v-fotos[hidden] { display: none; }
.v-fotos::-webkit-scrollbar { display: none; }
.v-mini {
  flex: none; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--superficie); box-shadow: 0 0 0 1px var(--linea);
  transition: box-shadow 150ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.v-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v-mini[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--tinta); }
.v-mini:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .v-mini[aria-pressed="false"]:hover { box-shadow: 0 0 0 1px var(--tenue); } }
.v-mini-3d { display: grid; place-items: center; align-content: center; gap: 4px; font: 600 14px/1 var(--v-font); color: var(--tinta); }
.v-mini-3d svg { width: 24px; height: 24px; }
.con-fotos .v-stage { right: 108px; }
.con-fotos .v-controls { left: calc(50% - 54px); }
.con-fotos .v-hint { right: 124px; }
/* foto grande en lugar del 3D */
.v-foto {
  position: absolute; inset: 24px 116px 24px 24px; width: calc(100% - 140px); height: calc(100% - 48px);
  object-fit: contain; opacity: 0; visibility: hidden;
  transition: opacity 200ms var(--ease-out), visibility 200ms;
}
.v-stage, .v-controls, .v-hint { transition: opacity 200ms var(--ease-out), visibility 200ms; }
.viendo-foto .v-foto { opacity: 1; visibility: visible; }
.viendo-foto .v-stage, .viendo-foto .v-controls, .viendo-foto .v-hint { opacity: 0; visibility: hidden; }

.v-info { position: relative; padding: 76px 40px 40px; overflow-y: auto; display: flex; flex-direction: column; align-items: flex-start; }
.v-close { position: absolute; top: 20px; right: 20px; }
.v-meta { margin-top: 12px !important; font-weight: 600; color: var(--rojo); }
#v-blurb { margin-top: 16px; color: var(--tenue); }
.v-specs { margin: 28px 0 32px; width: 100%; display: grid; gap: 2px; }
.v-specs div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 16px; background: var(--fondo); }
.v-specs div:first-child { border-radius: 14px 14px 0 0; }
.v-specs div:last-child { border-radius: 0 0 14px 14px; }
.v-specs dt { font-weight: 600; }
.v-specs dd { margin: 0; color: var(--tenue); }
.v-note { margin-top: 16px !important; font-size: 15px; color: var(--tenue); }

@media (max-width: 900px) {
  .viewer { width: 100vw; height: 100dvh; border-radius: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: 58dvh auto; overflow-y: auto; }
  .v-info { padding: 28px 20px 96px; overflow: visible; }
  .v-close { position: fixed; top: 14px; right: 14px; z-index: 2; background: var(--superficie); box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.3); }
  .v-hint { left: 16px; top: 18px; right: 110px; }
  .viewer:has(.con-fotos) { grid-template-rows: 66dvh auto; }
  .v-fotos { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 84px; padding: 8px 16px; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .v-mini { width: 66px; height: 66px; }
  .con-fotos .v-stage { right: 0; bottom: 164px; }
  .con-fotos .v-controls { left: 50%; bottom: 96px; }
  .con-fotos .v-hint { right: 110px; }
  .v-foto { inset: 56px 16px 92px; width: calc(100% - 32px); height: calc(100% - 148px); }
}
@media (max-width: 520px) {
  .v-controls { gap: 2px; padding: 4px; width: max-content; max-width: calc(100% - 16px); }
  .v-controls .v-btn { padding: 0 12px; font-size: 14px; }
  #v-page { min-width: 0; white-space: normal; font-size: 14px; line-height: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer, .viewer::backdrop, .v-foto, .v-stage, .v-controls, .v-hint { transition: none; }
}