/* ==========================================================================
   mutwall · muro de columnas — hoja de estilos

   SUMARIO
   1 · Tokens del bloque. Todo sale de :root del tema; aqui solo se derivan.
   2 · Lienzo. Recorta a los LADOS y nada mas. overflow-x:clip, no
       overflow:hidden (recortaria arriba y abajo) ni clip-path (no quita la
       barra de scroll horizontal). Es la unica de las tres que hace las dos
       cosas: recortar en X y dejar el eje Y libre.
   3 · Fondo. Capa quieta detras de las columnas; la profundidad sale de que
       ellas se mueven y el no.
   4 · Tira y columnas. La tira es mas ancha que la ventana y va centrada;
       las columnas se escalonan con margin-top.
   5 · Piezas. Enlaces, no divs: cada una lleva a su proyecto.
   6 · Antes de barajar. La tira nace oculta para que no se vea el orden
       guardado un instante antes del real.
   7 · Movil (<=768px). Sin paneo: las columnas caben enteras.
   8 · Panel de auditoria.
   ========================================================================== */

/* --- 1 · tokens ---------------------------------------------------------- */
.mut-wall{
  --cols: 5;
  --hueco: 10px;
  --desborde: 31;
  --ratio: 1.3333;
  --paso: .67;
  --fondo-color: var(--ink, #1a1814);
  --fondo-tam: 70%;
  --fondo-op: 100%;

  padding: 80px 0 var(--sobra-abajo, 80px);
  overflow-x: clip;              /* segundo cerrojo contra el scroll lateral */
}

/* --- 2 · lienzo ---------------------------------------------------------- */
.mut-wall-lienzo{
  position: relative;
  height: var(--alto-lienzo, auto);
  overflow-x: clip;              /* recorta la tira a los lados...           */
  overflow-y: visible;           /* ...y deja las columnas enteras en vertical */
}

/* --- 3 · fondo quieto ---------------------------------------------------- */
.mut-wall-fondo{
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  pointer-events: none; user-select: none;
  opacity: var(--fondo-op);
}
.mut-wall-fondo-texto{
  font-size: var(--fondo-tam);
  font-size: clamp(48px, var(--fondo-tam), 100vw);
  line-height: .85; letter-spacing: -.03em; text-align: center;
  color: var(--fondo-color);
  font-family: var(--mono, ui-monospace, monospace);
  text-transform: uppercase;
}
.mut-wall-fondo-img{ width: var(--fondo-tam); height: auto; display: block }

/* --- 4 · tira y columnas ------------------------------------------------- */
.mut-wall-tira{
  --ancho-tira: calc(100% + (100% * var(--desborde) / 100));
  position: relative; z-index: 1;
  width: var(--ancho-tira);
  margin-left: calc((100% - var(--ancho-tira)) / 2);   /* recorta igual por los dos lados */
  display: flex; gap: var(--hueco); padding: 0 var(--hueco);
  will-change: transform;
}
.mut-wall-col{
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--hueco);
  margin-top: calc(var(--salto, 0) * var(--paso) * (100vw / var(--cols) * var(--ratio)));
  will-change: transform;
}

/* --- 5 · piezas ---------------------------------------------------------- */
.mut-wall-pieza{
  position: relative; display: block; overflow: hidden;
  /* Sin color de fondo por defecto: lo que se ve mientras carga la imagen lo
     decide el campo "Fondo de la pieza". Vacio = transparente, y entonces se
     ve el fondo de la seccion, que casi siempre es lo que se quiere. */
  background: var(--pieza-fondo, transparent);
  text-decoration: none; color: inherit;
}
.mut-wall-pieza::before{ content: ""; display: block; padding-top: calc(var(--ratio) * 100%) }
.mut-wall-pieza img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  -webkit-user-drag: none; user-select: none;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.mut-wall-pieza:hover img{ transform: scale(1.03) }
/* El rotulo: titulo y subtitulo del proyecto, a la altura de la PRIMERA foto
   de la columna. Va fuera de las piezas —se barajan ellas, no el— asi que
   siempre cae sobre la primera, salga la que salga. Las demas piezas no
   llevan rotulo; su descripcion vive en el alt de cada imagen. */
.mut-wall-rotulo{
  position: absolute; z-index: 3; left: 12px; right: 12px; top: 14px;
  display: flex; flex-direction: column; gap: 2px;
  pointer-events: none;
  color: var(--rotulo-color, #fff);
  font-family: var(--mono, ui-monospace, monospace);
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.mut-wall-titulo{ font-size: 13px; letter-spacing: .04em; text-transform: uppercase }
.mut-wall-subtitulo{ font-size: 11px; opacity: .78 }
.mut-wall-col{ position: relative }   /* ancla del rotulo */

.mut-wall-pieza:focus-visible{ outline: 2px solid var(--accent, #e78745); outline-offset: 2px }

/* --- 6 · antes de barajar ------------------------------------------------ */
.mut-wall-tira{ visibility: hidden }
.mut-wall--listo .mut-wall-tira{ visibility: visible }
/* si el JS no llega a arrancar, que el muro se vea igualmente */
.mut-wall--sinjs .mut-wall-tira{ visibility: visible }

/* --- 7 · movil ----------------------------------------------------------- */
@media (max-width: 768px){
  .mut-wall{ --desborde: 0; --paso: .4; padding: 48px 0 var(--sobra-abajo, 48px) }
  .mut-wall-fondo-texto{ font-size: clamp(36px, var(--fondo-tam), 92vw) }
}

/* respeto a quien pide menos movimiento: el muro se queda quieto */
@media (prefers-reduced-motion: reduce){
  .mut-wall-tira, .mut-wall-col{ transform: none !important }
  .mut-wall-pieza img{ transition: none }
}

/* --- 8 · panel de auditoria ---------------------------------------------- */
.mut-wall-audit{
  position: fixed; right: 12px; bottom: 12px; z-index: 9999; max-width: 330px;
  background: rgba(16,14,12,.94); color: #f3efe7;
  font: 11px/1.45 var(--mono, ui-monospace, monospace);
  padding: 10px 12px; border-radius: 6px; white-space: pre-wrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.mut-wall-audit b{ color: #ffd9a8; font-weight: 600 }
.mut-wall-audit .ok{ color: #8ddc9a }
.mut-wall-audit .mal{ color: #ff9b8a }

/* --- 9 · piezas de video ------------------------------------------------- */
/* El video se comporta igual que la imagen: cubre la pieza y no se arrastra.
   Sin sonido, en bucle y en linea (sin pantalla completa en iOS). */
.mut-wall-video{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.mut-wall-pieza:hover .mut-wall-video{ transform: scale(1.03) }

/* --- 10 · el icono que abre la auditoria --------------------------------- */
/* Minimo y sin texto: un boton redondo abajo a la derecha. El glifo va en
   ::before porque el saneador de Joomla elimina las etiquetas vacias. */
.mut-wall-audit-abrir{
  position: fixed; right: 12px; bottom: 12px; z-index: 10000;
  width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(16,14,12,.86); color: #f3efe7;
  display: grid; place-items: center;
  transition: background-color .2s ease, transform .2s ease;
}
.mut-wall-audit-abrir::before{ content: "\0025A6"; font-size: 15px; line-height: 1 }
.mut-wall-audit-abrir:hover{ background: rgba(16,14,12,1); transform: scale(1.06) }
.mut-wall-audit-abrir--activo{ background: var(--accent, #e78745); color: #1a1814 }
.mut-wall-audit{ bottom: 56px }