@charset "utf-8";

.fractal-galeria {

  display: block;
  margin: 0 auto;

  overflow: hidden;

  transition: box-shadow 0.3s ease;

  transform-origin: center;

  will-change: transform;
}

.fractal-galeria:hover {
  box-shadow:
    0 0 12px rgba(255,180,80,0.4),
    0 0 25px rgba(255,140,60,0.25);
}

/* =========================
   CONTENEDOR
========================= */
.fractales-box {
  margin: 40px 0;
  text-align: center;
}

.fractales-box .fractales-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

/* =========================
   IMÁGENES (FIX REAL)
========================= */
.fractales-box img {

  display: block;
  margin: 0 auto;

  /* 🔴 CLAVE: MARCO FIJO */
  width: 280px;
  height: 200px;
  object-fit: cover;

  /* estética */
  background: #f9f6ee;
  border: 2px solid #6b5b2e;
  padding: 6px;

  border-radius: 2px;

  box-shadow: 
    0 0 14px rgba(0,0,0,0.35),
    inset 0 0 6px rgba(255,255,255,0.2);

  transition: all 0.25s ease;
}

/* =========================
   EFECTO VISIBLE (AHORA SÍ)
========================= */
.fractales-box img:hover {

  transform: scale(1.12) rotate(0.6deg);

  filter: brightness(1.1);

  box-shadow:
    0 0 18px rgba(255,180,80,0.6),
    0 0 35px rgba(255,140,60,0.35),
    inset 0 0 10px rgba(255,255,255,0.35);

}

/* =========================
   IMPACTO FRACTAL PRINCIPAL
========================= */
.fractal-galeria {
  transition: transform 0.08s ease-out, box-shadow 0.2s ease;
}

.fractal-galeria:hover {
  box-shadow:
    0 0 20px rgba(255,180,80,0.7),
    0 0 40px rgba(255,140,60,0.45),
    0 0 80px rgba(255,120,40,0.25);
}

/* =========================
   IMPACTO GALERÍA
========================= */
.fractales-box img:hover {

  transform: scale(1.16) rotate(1deg);

  filter: brightness(1.15) contrast(1.08);

  box-shadow:
    0 0 22px rgba(255,180,80,0.7),
    0 0 45px rgba(255,140,60,0.4),
    inset 0 0 12px rgba(255,255,255,0.4);
}