/* ==========================================================================
   Galería 3D (marquee) — port a vanilla del "3D Marquee" de Aceternity UI
   (Manu Arora). El original es React + Tailwind + motion/react; esta web es
   HTML plano, así que se reescribió con CSS puro conservando la geometría
   exacta: escenario de 1720px, rejilla de 4 columnas con 32px de separación,
   girada rotateX(55deg) rotateZ(-45deg) desde su esquina superior izquierda.
   Las columnas pares suben y las impares bajan, 10s y 15s, en bucle alternado.

   Sin JavaScript a propósito: es decoración y no debe costar ni un byte de JS
   ni romperse si el script falla.
   ========================================================================== */

.marquee-3d-section {
  padding: 90px 0 30px 0;
  /* La rejilla girada se sale por los costados; sin esto aparece scroll
     horizontal en toda la página. */
  overflow: hidden;
}

.marquee-3d-viewport {
  position: relative;
  margin: 0 auto;
  height: 600px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--border-subtle);
  background: rgba(7, 18, 10, 0.45);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-cinematic), transform 0.9s var(--ease-cinematic);
}

.marquee-3d-viewport.revealed {
  opacity: 1;
  transform: translateY(0);
}

.marquee-3d-center {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* El escenario es siempre de 1720px y se encoge con `scale`, no cambiando las
   medidas: así el ángulo del giro se ve igual en un teléfono que en un monitor.
   Si se redimensionara la rejilla, la perspectiva se deformaría. */
.marquee-3d-stage {
  width: 1720px;
  height: 1720px;
  flex-shrink: 0;
  transform: scale(0.5);
}

.marquee-3d-grid {
  position: relative;
  top: 384px;
  right: 50%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: top left;
  transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg);
}

.marquee-3d-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  will-change: transform;
}

.marquee-3d-col:nth-child(odd) {
  animation: marquee-3d-down 10s ease-in-out infinite alternate;
}

.marquee-3d-col:nth-child(even) {
  animation: marquee-3d-up 15s ease-in-out infinite alternate;
}

@keyframes marquee-3d-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100px); }
}

@keyframes marquee-3d-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-100px); }
}

.marquee-3d-col img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* Cada pieza conserva su forma (9:16, 1:1, 16:9). Recortarlas todas a un
     mismo rectángulo destruiría composiciones que ya están diseñadas. */
  object-fit: cover;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  outline: 1px solid rgba(255, 255, 255, 0.06);
  outline-offset: -1px;
}

/* Difuminado en los bordes para que las piezas no aparezcan cortadas de golpe
   contra el marco. */
.marquee-3d-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg-dark) 0%, transparent 22%, transparent 78%, var(--bg-dark) 100%),
    linear-gradient(to right, var(--bg-dark) 0%, transparent 18%, transparent 82%, var(--bg-dark) 100%);
}

@media (min-width: 640px) {
  .marquee-3d-stage { transform: scale(0.75); }
}

@media (min-width: 1024px) {
  .marquee-3d-stage { transform: scale(1); }
}

@media (max-width: 820px) {
  .marquee-3d-section { padding: 60px 0 20px 0; }
  .marquee-3d-viewport { height: 400px; border-radius: 18px; }
}

/* Movimiento constante y en bucle: es exactamente lo que esta preferencia pide
   desactivar. Queda la composición quieta, que es lo que aporta. */
@media (prefers-reduced-motion: reduce) {
  .marquee-3d-col { animation: none; }
  .marquee-3d-viewport {
    transition: opacity 0.3s linear;
    transform: none;
  }
}

.marquee-3d-caption {
  margin: 28px auto 0 auto;
  max-width: 720px;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}