/* OJO CON EL NOMBRE DE LAS CLASES: son primo-mosaico*, no primo-muro*.
   En este sitio hay un snippet de Angie (angie-snippets/prod/snippet-2271)
   que carga SOLO dentro del editor y le aplica a .primo-muro esto:
       position:absolute; inset:0; overflow:hidden; pointer-events:none;
   Es decir, convertia el contenedor del usuario en una capa absoluta que no
   recibia clics. Eso, y no el plugin, es lo que impedia meter elementos
   dentro del contenedor en el editor. Con el prefijo propio ya no colisiona. */

/* Muro de fotos Primo — capas de fondo
   ------------------------------------------------------------------
   REGLA QUE NO SE TOCA: el recorte (overflow:hidden) vive en
   .primo-mosaico__fondo, NUNCA en el contenedor. Si se pone en el
   contenedor, Elementor dibuja fuera de la caja los tiradores de
   redimensionado, el boton de anadir y el overlay de seleccion, y el
   contenedor deja de poder editarse. Eso fue el fallo de 1.0.x.

   Todo lo configurable entra por variables CSS que escribe Elementor
   con los "selectors" de cada control. Asi el editor actualiza la
   vista previa en vivo sin volver a pintar nada.                    */

.primo-mosaico{
  --mosaico-giro:-6deg;
  --mosaico-hueco:22px;
  --mosaico-ratio:2/3;
  --mosaico-velo:.86;
  --mosaico-ancho:1;   /* 1 = a sangre, todo el ancho de la pantalla */
  --mosaico-color:#0C0908;
}

/* isolation crea un contexto de apilamiento propio: los z-index de
   dentro no se pelean con el resto de la pagina */
.primo-mosaico[data-mosaico-listo="si"]{ position:relative; isolation:isolate; }

.primo-mosaico__fondo{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;              /* <-- aqui, y solo aqui */
  pointer-events:none;
  border-radius:inherit;
}

/* la capa girada se sale por los cuatro lados para que al inclinarse
   no asomen las esquinas vacias */
.primo-mosaico__giro{
  position:absolute; inset:-16% -10%;
  transform:rotate(var(--mosaico-giro));
  transform-origin:center;
  display:flex; gap:var(--mosaico-hueco);
}

/* flex:1 1 0 => las columnas se reparten el ancho. Cambiar el numero
   de columnas nunca deja huecos ni desborda, en ningun ancho */
.primo-mosaico__col{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; gap:var(--mosaico-hueco);
  will-change:transform;
}
.primo-mosaico__col img{
  width:100%; aspect-ratio:var(--mosaico-ratio);
  object-fit:cover; display:block; background:#161110;
}

.primo-mosaico__velo{
  position:absolute; inset:0; z-index:1;
  pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(60% 55% at 50% 50%,
      color-mix(in srgb, var(--mosaico-color) calc(var(--mosaico-velo) * 100%), transparent) 0%,
      color-mix(in srgb, var(--mosaico-color) calc(var(--mosaico-velo) * 72%),  transparent) 55%,
      color-mix(in srgb, var(--mosaico-color) calc(var(--mosaico-velo) * 48%),  transparent) 100%),
    linear-gradient(var(--mosaico-color), transparent 22%, transparent 78%, var(--mosaico-color));
}

/* el contenido del usuario, por encima de las dos capas */
.primo-mosaico[data-mosaico-listo="si"] > *:not(.primo-mosaico__fondo):not(.primo-mosaico__velo),
.primo-mosaico[data-mosaico-listo="si"] > .e-con-inner{ position:relative; z-index:2; }

@media (max-width:820px){ .primo-mosaico{ --mosaico-hueco:14px } }
@media (prefers-reduced-motion:reduce){ .primo-mosaico__col{ transform:none !important } }