/* =========================================================
   Mockups con puntos interactivos sobre la fotografía.
   Los puntos los genera js/mockups.js desde data/mockups.json.
   ========================================================= */
.mockups {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--esp-5);
  align-items: stretch;
  /* Cascada suave: --t-pausada por elemento, curva gradual, apareciendo
     al frente (enfocar, base.css). */
  --animacion-reveal: enfocar;
  --duracion-cascada: var(--t-pausada);
  --curva-cascada: var(--curva-suave);
}

/* Los puntos brotan sobre la foto en vez de subir. */
.mockups__punto {
  --animacion-reveal: brotar;
}

@keyframes brotar {
  from {
    opacity: 0;
    scale: 0;
  }
}

.mockups__escena {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-alta);
}

/* Marca de agua: el logo negro superpuesto (las fotos del catálogo no se
   modifican), sobre las fotos y bajo los puntos interactivos. */
.mockups__marca-agua {
  position: absolute;
  left: 3%;
  top: 4%;
  z-index: 1;
  width: var(--marca-agua-ancho);
  height: auto;
  opacity: var(--marca-agua-opacidad);
  pointer-events: none;
}

.mockups__punto {
  z-index: 2;
}

/* Una foto por producto, apiladas: la primera fija el tamaño (todas miden
   igual, 1672 × 941) y la del producto elegido aparece en fundido. */
.mockups__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--t-lenta) var(--curva-suave);
}

.mockups__foto + .mockups__foto {
  position: absolute;
  inset: 0;
}

.mockups__foto--activa {
  opacity: 1;
}

/* Solo se ve el punto del producto de la foto activa. */
.mockups__punto[aria-pressed="false"] {
  opacity: 0;
  pointer-events: none;
}

.mockups__punto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--color-blanco);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  transition: transform var(--t-rapida), background var(--t-rapida);
}

.mockups__punto::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--color-acento);
}

.mockups__punto::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--color-blanco);
  animation: onda 2.4s var(--curva) infinite;
}

.mockups__punto:hover,
.mockups__punto[aria-pressed="true"] {
  transform: translate(-50%, -50%) scale(1.2);
}

.mockups__punto[aria-pressed="true"] {
  background: var(--color-acento);
}

.mockups__punto[aria-pressed="true"]::before {
  background: var(--color-blanco);
}

.mockups__ficha {
  display: flex;
  flex-direction: column;
  padding: var(--esp-6) var(--esp-5);
}

.mockups__formatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-5);
  padding: 0;
  list-style: none;
}

.mockups__formato {
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-pill);
  background: transparent;
  font-size: var(--texto-xs);
  color: var(--color-tenue);
  transition: all var(--t-rapida);
}

.mockups__formato[aria-pressed="true"] {
  border-color: var(--color-acento);
  background: var(--color-acento);
  color: var(--color-blanco);
}

/* Carrusel del detalle: las fichas se apilan en la misma celda y se cruzan
   deslizándose a la derecha (swipe right): la nueva entra desde la
   izquierda y la anterior sale por la derecha. */
.mockups__carrusel {
  display: grid;
  flex: 1;
  overflow-x: clip;
  overflow-clip-margin: var(--esp-2);
  --desplazamiento-carrusel: 64px;
}

.mockups__detalle {
  grid-area: 1 / 1;
  animation: carrusel-entrar var(--t-lenta) var(--curva-suave) backwards;
}

.mockups__detalle--sale {
  pointer-events: none;
  animation: carrusel-salir var(--t-lenta) var(--curva-suave) forwards;
}

@keyframes carrusel-entrar {
  from {
    opacity: 0;
    translate: calc(var(--desplazamiento-carrusel) * -1) 0;
  }
}

@keyframes carrusel-salir {
  to {
    opacity: 0;
    translate: var(--desplazamiento-carrusel) 0;
  }
}

.mockups__nombre {
  font-size: 1.35rem;
  font-weight: 800;
}

.mockups__ubicacion {
  margin-top: var(--esp-2);
}

.mockups__descripcion {
  margin: var(--esp-4) 0 var(--esp-5);
  color: var(--color-tenue);
}

@media (max-width: 900px) {
  .mockups {
    grid-template-columns: 1fr;
  }

  .mockups__escena {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 520px) {
  .mockups__punto {
    width: 24px;
    height: 24px;
  }

  .mockups__punto::before {
    inset: 7px;
  }
}