/* MEJORAS-01 — capa decorativa (hover-reveal, marco de figura, plóter).
   Cargado sin bloquear el render (ver index.html): nada aquí es visible antes
   de interacción o de idle, así que no compite con el primer pintado. */

/* ── §1: hover-reveal "la vista del instrumento" ──────────────────────── */
.lamina--instrumento { position: relative; }
.figura__media { position: relative; overflow: hidden; }
.fotografia--hover-pic {
  position: absolute; inset: 0; z-index: 2;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 220ms linear;
  pointer-events: none;
}
.fotografia--hover-pic .fotografia--hover { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .lamina--instrumento:hover .fotografia--hover-pic,
  .lamina--instrumento:focus-visible .fotografia--hover-pic { clip-path: inset(0); }
}
.instrumento__label {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  display: none;
  font-size: 10px; letter-spacing: 0.1em; color: var(--blanco);
  background: color-mix(in srgb, var(--negro) 72%, transparent);
  padding: 4px 8px;
  pointer-events: none;
}
.instrumento__label::before { content: attr(data-foto); }
@media (hover: hover) and (pointer: fine) {
  .instrumento__label { display: block; }
  .lamina--instrumento:hover .instrumento__label::before,
  .lamina--instrumento:focus-visible .instrumento__label::before { content: attr(data-hover); }
}

/* "el registro cobra vida" — transición de color al hover, sin generación */
@media (hover: hover) and (pointer: fine) {
  .registro-card__img--bn:hover .fotografia,
  .registro-card__img--bn:focus-within .fotografia { filter: saturate(1) contrast(1.18) brightness(0.96); }
}

/* ── §3: marco de figura técnica (nave-elevador, nave-dyno) ──────────── */
.lamina--figura { display: flex; flex-direction: column; }
.figura__marco { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.figura__marco::after {
  /* grid pasando por encima de la foto, muy tenue — la foto deja de ser una pegatina */
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to right, var(--linea) 0 1px, transparent 1px calc((100% - 24px) / 6));
  opacity: 0.04;
}
.figura__tick { position: absolute; width: 14px; height: 14px; }
.figura__tick::before, .figura__tick::after { content: ''; position: absolute; background: var(--ambar); }
.figura__tick::before { width: 100%; height: 1px; top: 50%; }
.figura__tick::after { width: 1px; height: 100%; left: 50%; }
.figura__tick--tl { top: 10px; left: 10px; }
.figura__tick--tr { top: 10px; right: 10px; }
.figura__tick--bl { bottom: 10px; left: 10px; }
.figura__tick--br { bottom: 10px; right: 10px; }
.figura__cota { margin-top: 8px; font-size: 10px; letter-spacing: 0.1em; color: var(--apagado); }

/* ── §2: fondo vivo "el plóter" ────────────────────────────────────────── */
.plotter {
  /* z-index:1, igual que .grid-lines — textura por encima de fotos (z-index:0),
     por debajo del contenido real (z-index:2+). Con z-index:0 quedaba empatado
     con .sec__bleed y el orden del DOM lo escondía detrás de las fotos siempre. */
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  pointer-events: none; contain: layout style;
}
.plotter__piece {
  position: absolute; width: clamp(140px, 18vw, 260px);
  opacity: 0; color: var(--linea);
}
.plotter__piece svg { width: 100%; height: auto; overflow: visible; }
.plotter__piece svg [pathLength] {
  fill: none; stroke: currentColor; stroke-width: 1;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}
/* toque ámbar ocasional (JS decide el color por ciclo, ver main.js) */
.plotter__piece--ambar { color: var(--ambar); }
.plotter__piece.is-drawing { animation: plotter-fade var(--total-dur, 30s) linear forwards; }
.plotter__piece--ambar.is-drawing { animation-name: plotter-fade-ambar; }
.plotter__piece.is-drawing svg [pathLength] { animation: plotter-draw var(--draw-dur, 22s) linear forwards; }
.plotter__piece.is-static { opacity: 0.05; }
.plotter__piece.is-static svg [pathLength] { stroke-dashoffset: 0; }
@keyframes plotter-draw { to { stroke-dashoffset: 0; } }
@keyframes plotter-fade {
  0% { opacity: 0; }
  8% { opacity: 0.08; }
  70% { opacity: 0.08; }
  85% { opacity: 0.08; }
  100% { opacity: 0; }
}
@keyframes plotter-fade-ambar {
  0% { opacity: 0; }
  8% { opacity: 0.12; }
  70% { opacity: 0.12; }
  85% { opacity: 0.12; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fotografia--hover-pic { transition: none !important; }
  .registro-card__img--bn .fotografia { transition: none !important; }
}