/* ==========================================================================
   MP360 · Jacarandá — Galería de imágenes (marco del anfitrión)

   El componente es el aprobado de Nuevo Alisos y resuelve su propio layout
   dentro del iframe. Este archivo sólo define el encuadre: velo, card, radio,
   sombra y cierre, con los tokens de Jacarandá.

   El encuadre es el mismo que ya está aprobado en Nuevo Alisos —card centrada,
   la foto ocupando el marco completo, sin paneles interiores, sin scroll y con
   la cruz fuera del área útil de la fotografía—; lo que cambia es la paleta.
   ========================================================================== */

.mp360-galeria {
  --white: #FFFFFF;
  --neutral-200: #E8E8E8;
  --neutral-950: #151515;
  --primary-50: #F3F4FF;
  --primary-700: #4742A1;

  --radius-control: 8px;
  --radius-prominent: 16px;

  --gl-cierre: 2.75rem;        /* 44px · target mínimo */
  --gl-aire: 4.75rem;          /* cierre + su aire: es lo que mantiene la cruz
                                  fuera de la card en cualquier viewport */
  --gl-borde: rgba(21, 21, 21, 0.10);

  position: absolute;
  inset: 0;
  z-index: 50;                 /* mismo plano que Servicios: nunca coexisten */
  display: grid;
  place-items: center;
  padding: clamp(1rem, 6vh, 4rem) clamp(1rem, 4vw, 3rem);
  padding-top: max(var(--gl-aire), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(1rem, 6vh, 4rem), env(safe-area-inset-bottom, 0px));
  font-family: "Manrope", system-ui, sans-serif;
}

.mp360-galeria[hidden] { display: none !important; }

.mp360-galeria *,
.mp360-galeria *::before,
.mp360-galeria *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Velo
   -------------------------------------------------------------------------- */
.mp360-galeria__scrim {
  position: absolute;
  inset: 0;
  background: rgba(21, 21, 21, 0.68);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Cierre

   Vive fuera de la card, en el aire que reserva el padding del velo: nunca
   queda encima de la fotografía ni de las flechas del componente.
   -------------------------------------------------------------------------- */
.mp360-galeria__close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  z-index: 2;
  width: var(--gl-cierre);
  height: var(--gl-cierre);
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--gl-borde);
  border-radius: var(--radius-control);   /* cuadrado redondeado, no círculo */
  color: var(--neutral-950);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mp360-galeria__close:hover {
  background: var(--primary-50);
  border-color: var(--primary-700);
}

.mp360-galeria__close:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.mp360-galeria__close-icon { width: 1.125rem; height: 1.125rem; display: block; }
.mp360-galeria__close-icon svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Card

   El slider mide su alto contra el marco —su CSS declara `height: 100vh`—, así
   que la card ES el propio iframe: dentro del componente no hay ninguna
   superficie intermedia y su layout queda exactamente como fue entregado.
   -------------------------------------------------------------------------- */
.mp360-galeria__frame {
  position: relative;
  display: block;
  width: min(1180px, 86vw);
  height: min(720px, 76vh);
  /* Nunca por encima del área que deja el padding: es lo que mantiene la cruz
     de cierre fuera de la card en cualquier viewport. */
  max-width: 100%;
  max-height: 100%;
  border: 0;
  border-radius: var(--radius-prominent);
  /* La foto llega al borde de la card: se recorta con su curva en vez de
     asomar en las esquinas. */
  overflow: hidden;
  background: var(--neutral-950);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
}

/* El estado de reposo del CSS es el VISIBLE: velo opaco y card en su sitio.
   La entrada y la salida las anima mp360-galeria.js desde y hacia el estado
   oculto. Si el motion no corre, la superficie aparece igual. */

/* --------------------------------------------------------------------------
   Apaisado corto

   El alto es el recurso escaso: la card se queda con casi todo, sin dejar de
   respetar el ancho que necesita la cruz de cierre.
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 520px) {
  .mp360-galeria {
    padding: 0.5rem var(--gl-aire);
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(var(--gl-aire), env(safe-area-inset-right, 0px));
  }

  .mp360-galeria__frame { height: min(720px, 92vh); }
  .mp360-galeria__close { top: max(0.5rem, env(safe-area-inset-top, 0px)); }
}

/* Vertical estrecho: la card se acerca a los bordes y la cruz conserva su
   banda superior. */
@media (orientation: portrait) and (max-width: 560px) {
  .mp360-galeria { padding-inline: 0.75rem; padding-bottom: 0.75rem; }
  .mp360-galeria__frame { width: 100%; height: min(720px, 68vh); }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-galeria__close { transition: none !important; }
}

/* Ver mp360-superficie.css: al abrir, el foco entra al diálogo, y el diálogo
   no lleva anillo. El anillo es del botón de cierre cuando se llega con Tab. */
.mp360-galeria:focus,
.mp360-galeria:focus-visible { outline: none; }