/* ============================================================
   KERUTO — FONDO GLOBAL DE CUADRÍCULA
   Se aplica a todas las páginas del sitio. En las páginas que
   usan la carcasa fija (ker-shell) queda detrás de su fondo
   blanco; en el resto se ve detrás del contenido.
   ============================================================ */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #ffffff url("fondo-web.png") center / cover no-repeat;
  box-shadow: inset 0 0 150px 72px #ffffff;
}

@media (max-width: 767px) {
  body::before {
    box-shadow: inset 0 0 80px 40px #ffffff;
  }
}

/* ============================================================
   MARCO NEGRO FIJO — por encima de todo (también de la cabecera).
   Lo inyecta functions.php (wp_body_open) en TODAS las páginas.
   Es un elemento propio (no el border de ker-shell) para poder
   estar por encima de la cabecera global (z-index:100). La
   geometría coincide con el borde de ker-shell (20u / 10px móvil).
   ============================================================ */

.ker-frame {
  --u: min(calc(100vw / 1480), calc(100vh / 1064));
  position: fixed;
  inset: 0;
  z-index: 400;
  box-sizing: border-box;
  border: calc(20 * var(--u)) solid var(--ker-black);
  pointer-events: none;
}

@media (max-width: 767px) {
  .ker-frame {
    border-width: 10px;
  }
}

/* ============================================================
   MINIATURA DIFUMINADA del grid de /portfolio/.
   Van con las variantes de assets/ker-blur/ (48 px): el efecto es
   que la imagen no se reconozca, no que se vea borrosa a propósito.
   Está aquí (y no en ker-bloqueo.css) porque ker-bloqueo.css solo
   se carga en las fichas bloqueadas y el grid lo necesita siempre.
   ============================================================ */

.ker-thumb-locked {
  filter: blur(7px) saturate(.7);
  transform: scale(1.08);
}

/* ============================================================
   BOCADILLO — variante móvil (bocadillo-mobile.svg).
   El <img> de la forma apunta a assets/bocadillo.svg (desktop);
   por debajo de 768px se sustituye el recurso con content:url().
   El SVG móvil lleva preserveAspectRatio="none" para que la forma
   se deforme con la caja: la altura la manda el texto de dentro.
   ============================================================ */

@media (max-width: 767px) {
  img.ker-bubble__shape,
  img.ker-sobre-bubble__shape {
    content: url("bocadillo-mobile.svg");
  }
}

/* ============================================================
   SIN SCROLL LATERAL: las palabras largas (URLs de proyectos,
   etc.) se parten solo cuando no caben en su línea. Además fija
   el ancho mínimo de los items flex: era lo que estiraba la
   columna de texto de las fichas más allá de la pantalla.
   ============================================================ */

body {
  overflow-wrap: anywhere;
}