/* =========================================================
   MEDIA — figura de imagen con placeholder identificable
   Si la imagen no existe se muestra un bloque con su nombre de archivo.
   ========================================================= */
.media {
  --ph: var(--color-ph-2);
  --ph-ink: color-mix(in srgb, var(--color-white) 55%, transparent);
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, auto);
  background: var(--ph);
}

.media[data-tone="1"] { --ph: var(--color-ph-1); }
.media[data-tone="2"] { --ph: var(--color-ph-2); }
.media[data-tone="3"] { --ph: var(--color-ph-3); --ph-ink: color-mix(in srgb, var(--color-bg) 55%, transparent); }
.media[data-tone="4"] { --ph: var(--color-ph-4); }

.media--fill { position: absolute; inset: 0; aspect-ratio: auto; }

/* Placeholder: trama diagonal + cruz central + nombre de archivo */
.media__ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(12px, 1.4vw, 20px);
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, color-mix(in srgb, var(--ph-ink) 14%, transparent) 22px 23px),
    var(--ph);
  color: var(--ph-ink);
  font-family: var(--font-label);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.media__ph::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 28px; height: 28px;
  translate: -50% -50%;
  background:
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
  opacity: 0.6;
}

.media__ph-ratio { align-self: flex-end; }

.media--fill .media__ph {
  padding-top: calc(var(--header-h) + 3.5rem);
  align-items: flex-end;
  text-align: right;
}

.media__frame { position: absolute; inset: 0; }
.media__frame[data-parallax] { will-change: transform; }
.media--parallax .media__frame { inset: -12% 0; }

.media__frame > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease, transform var(--dur-slow) var(--ease-out);
}

.media__frame > img.is-loaded { opacity: 1; }
.media.is-missing .media__frame { display: none; }

@media (max-width: 767px) {
  .media { aspect-ratio: var(--ratio-m, var(--ratio, auto)); }
  .media--fill { aspect-ratio: auto; }
}