/* Visor de fotos (prueba, rama visor-fotos). Ver visor.js. Ambientación: opción 3. */

/* Lupa: mismo anillo dorado que el «+», arriba a la izquierda, fuera de la capa del giro. Área táctil de 44 px. */
.lupa {
  position: absolute; z-index: 4; top: 3px; left: 3px; width: 44px; height: 44px; padding: 0; margin: 0;
  display: grid; place-items: center; border: 0; background: none; color: var(--lp-gold-light); cursor: zoom-in;
  -webkit-tap-highlight-color: transparent; transition: opacity .2s linear, visibility 0s linear 0s;
}
.lupa::before {
  content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(17, 16, 15, .5); box-shadow: inset 0 0 0 1px rgba(207, 165, 80, .7);
}
.lupa svg { position: relative; width: 15px; height: 15px; }
.card.full .lupa, .card.tall .lupa { top: 7px; left: 7px; }
.lupa:focus-visible { outline: none; }
.lupa:focus-visible::before { box-shadow: inset 0 0 0 1px var(--lp-gold), 0 0 0 2px var(--lp-gold); }
/* Con la tarjeta girada la lupa desaparece: la foto ya no está a la vista. */
.card.girada .lupa { opacity: 0; visibility: hidden; transition: opacity .15s linear, visibility 0s linear .15s; }

/* ---------- Visor a pantalla completa ---------- */
.visor {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: var(--lp-black); color: var(--lp-ivory); overflow: hidden; overscroll-behavior: contain;
  /* Variables del marco de las tarjetas (.frame, carta.css) */
  --r: 10px; --gap-in: 4px; --line: rgba(207, 165, 80, .88); --line-in: rgba(207, 165, 80, .3);
  --g: clamp(12px, 4vw, 24px);   /* margen lateral: lo primero que se reduce en pantallas chicas */
}
.visor::backdrop { background: transparent; }

/* Atmósfera: resplandor cálido muy tenue detrás de la foto y viñeta suave. Solo degradés (sin blur: liviano en Safari). */
.visor-ambiente {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 42% at 50% 42%, rgba(207, 165, 80, .11), rgba(207, 165, 80, .035) 55%, rgba(207, 165, 80, 0) 100%),
    radial-gradient(130% 95% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%);
}

.visor-escena {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; touch-action: none; cursor: zoom-in;
  padding: max(60px, calc(env(safe-area-inset-top) + 52px)) max(var(--g), env(safe-area-inset-right))
           max(16px, calc(env(safe-area-inset-bottom) + 10px)) max(var(--g), env(safe-area-inset-left));
}
/* Zona de la foto: todo el alto que deja el texto. visor.js calcula el tamaño exacto con la proporción real. */
.visor-zona { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
.visor-foto { position: relative; --margen-marco: 9px; }
.visor-img {
  display: block; width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1;
  transform-origin: 50% 50%; will-change: transform; user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.visor-foto .frame { inset: calc(-1 * var(--margen-marco)); z-index: 0; }
.visor-suave { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }

/* Información del plato: separador, nombre (Cormorant, dorado) y descripción real (DM Sans), a lo sumo 3 líneas. */
.visor-info { flex: none; padding-top: 18px; text-align: center; }
.visor-sep {
  display: block; width: min(150px, 46%); height: 5px; margin: 0 auto 12px;
  background:
    radial-gradient(circle, var(--lp-gold) 1.6px, #0000 2px) center / 5px 5px no-repeat,
    linear-gradient(to right, #0000, rgba(207, 165, 80, .7)) left center / calc(50% - 7px) 1px no-repeat,
    linear-gradient(to left, #0000, rgba(207, 165, 80, .7)) right center / calc(50% - 7px) 1px no-repeat;
}
.visor-nombre {
  margin: 0 auto; max-width: 22em; font: 500 clamp(1.5rem, 6.4vw, 1.875rem)/1.08 var(--display);
  color: var(--lp-gold-light); text-wrap: balance;
}
.visor-desc {
  margin: 8px auto 0; max-width: 34em; font: 400 .9375rem/1.45 var(--ui); color: rgba(244, 239, 230, .86);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  text-wrap: pretty;
}

/* Teléfono apaisado: foto a la izquierda y texto a la derecha, para no achicar la foto. */
@media (orientation: landscape) and (max-height: 560px) {
  .visor-escena {
    flex-direction: row; align-items: center; gap: clamp(20px, 4vw, 40px);
    padding: max(14px, env(safe-area-inset-top)) max(64px, calc(env(safe-area-inset-right) + 56px))
             max(14px, env(safe-area-inset-bottom)) max(var(--g), env(safe-area-inset-left));
  }
  .visor-zona { align-self: stretch; }
  .visor-info { flex: 0 1 36%; padding-top: 0; text-align: left; }
  .visor-sep { margin-left: 0; background:
    radial-gradient(circle, var(--lp-gold) 1.6px, #0000 2px) left center / 5px 5px no-repeat,
    linear-gradient(to right, rgba(207, 165, 80, .7), #0000) right center / calc(100% - 11px) 1px no-repeat; }
  .visor-nombre, .visor-desc { margin-left: 0; }
}

/* Cierre: discreto, siempre accesible (también con zoom). */
.visor-cerrar {
  position: absolute; z-index: 3; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  color: var(--lp-gold-light); background: rgba(17, 16, 15, .6); box-shadow: inset 0 0 0 1px rgba(207, 165, 80, .7);
  cursor: pointer; transition: opacity .2s linear;
}
.visor-cerrar svg { width: 20px; height: 20px; }
.visor-cerrar:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; }

/* Estados: la ambientación entra después de la expansión de la foto, sale al cerrar y se aparta con zoom. */
.visor-ambiente, .visor-foto .frame, .visor-deco { opacity: 0; transition: opacity .18s linear; }
.visor.abierto .visor-ambiente, .visor.abierto .visor-foto .frame, .visor.abierto .visor-deco {
  opacity: 1; transition: opacity .35s ease-out .2s;
}
.visor.abierto.visor--zoom .visor-foto .frame, .visor.abierto.visor--zoom .visor-deco { opacity: 0; transition: opacity .2s linear; }
.visor--zoom .visor-foto { z-index: 2; }
.visor:not(.abierto) .visor-cerrar { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .visor-suave { transition: none; }
  .visor-ambiente, .visor-foto .frame, .visor-deco,
  .visor.abierto .visor-ambiente, .visor.abierto .visor-foto .frame, .visor.abierto .visor-deco { transition: opacity .15s linear; }
}