@charset "utf-8";

/* ======================================================
   ALBUM.CSS — CYBERFRACTAL / SEMIOSIS ICONOCLASTA
   Versión limpia y estable (sin redundancias)
====================================================== */

/* ======================================================
   CONTENEDOR
====================================================== */

.album-contenedor-423 {
  width:423px;
  max-width:423px;
  margin:18px auto 0 auto;
  padding:10px 8px 14px 8px;
  box-sizing:border-box;

  text-align:center;
  background:#2f2f2f;

  overflow:visible;
  position:relative;
  z-index:5;
}

/* ======================================================
   TÍTULO
====================================================== */

.album-titulo-423 {
  width:100%;
  margin:0 auto 12px auto;
  padding:8px;

  text-align:center;
  color:#d6b85c;
  font-size:16px;
  line-height:1.3;
  letter-spacing:0.8px;

  border-top:1px solid rgba(214,184,92,0.45);
  border-bottom:1px solid rgba(214,184,92,0.45);

  background:rgba(0,0,0,0.18);

  text-shadow:
    0 0 6px rgba(214,184,92,0.65),
    0 0 12px rgba(214,184,92,0.25);
}

.album-subtitulo-423 {
  font-size:11px;
  color:#f0d98a;
  letter-spacing:1.2px;
}

/* ======================================================
   INTRO Y PIE
====================================================== */

.album-intro-423 {
  width:92%;
  margin:0 auto 12px auto;

  color:#e6e6e6;
  font-size:12px;
  line-height:1.45;
  text-align:justify;
}

.album-pie-423 {
  width:90%;
  margin:14px auto 0 auto;
  padding-top:8px;

  border-top:1px solid rgba(214,184,92,0.35);

  color:#d6b85c;
  font-size:11px;
  text-align:center;
}

/* ======================================================
   TABLA
====================================================== */

.album-fractal-423 {
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;

  margin:0 auto;
}

.album-fractal-423 td {
  width:33%;
  padding:4px;

  text-align:center;
  vertical-align:top;

  overflow:visible;
  position:relative;
}

/* ======================================================
   IMÁGENES BASE (OBJETO SEMIÓTICO)
====================================================== */

.album-fractal-423 img {
  width:100px;
  height:100px;

  object-fit:contain;

  display:block;
  margin:0 auto;

  background:#111;
  border:1px solid rgba(214,184,92,0.45);

  box-shadow:0 0 7px rgba(214,184,92,0.22);

  cursor:zoom-in;

  transition:transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;

  transform-origin:center;
  position:relative;
  z-index:1;

  will-change: transform;
}

/* ======================================================
   HOVER (PERCEPCIÓN)
====================================================== */

.album-fractal-423 td:hover img {
  transform:scale(1.6);
  z-index:999;

  box-shadow:
    0 0 12px rgba(214,184,92,0.45),
    0 0 20px rgba(0,0,0,0.6);
}

/* ======================================================
   ESTADO CLICK (JS: fractal-ampliada)
====================================================== */

.album-fractal-423 img.fractal-ampliada {
  transform:scale(1.9);
  z-index:9999;

  filter:brightness(1.15) contrast(1.05);

  box-shadow:
    0 0 14px rgba(214,184,92,0.85),
    0 0 30px rgba(214,184,92,0.4),
    0 0 40px rgba(0,0,0,0.9);

  cursor:zoom-out;
}

/* Bloqueo de interferencia hover sobre estado activo */
.album-fractal-423 img.fractal-ampliada:hover {
  transform:scale(1.9);
}

/* ======================================================
   DIRECCIÓN DE EXPANSIÓN
====================================================== */

.album-fractal-423 td:nth-child(1) img { transform-origin:left center; }
.album-fractal-423 td:nth-child(2) img { transform-origin:center center; }
.album-fractal-423 td:nth-child(3) img { transform-origin:right center; }

/* ======================================================
   CAPTIONS
====================================================== */

.album-caption {
  width:100px;
  margin:4px auto 0 auto;

  font-size:11px;
  color:#ff8a1c;
  text-align:center;
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media screen and (max-width:480px) {

  .album-contenedor-423 {
    width:100%;
    padding:6px;
  }

  .album-fractal-423 img {
    width:110px;
    height:110px;
  }

  .album-fractal-423 img.fractal-ampliada {
    transform:scale(1.45);
  }
}