/* ═══════════════════════════════════════════════════════════════════
   VURA CAJAS · fondo de cajas que se pintan al pasar el mouse
   (Background Boxes de Aceternity). Se usa en la cabecera del Blog.
   vura-cajas.js arma la grilla dentro de [data-fx-cajas].
   ═══════════════════════════════════════════════════════════════════ */
.page-hero.fx-cajas-on { overflow: hidden; }
.fx-cajas { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fx-cajas-plano {
  position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column;
  transform: translate(-50%, -50%) skewX(-48deg) skewY(14deg) scale(.675);
}
.fx-caja-fila { display: flex; }
.fx-caja {
  position: relative; width: 64px; height: 32px; flex-shrink: 0;
  border-right: 1px solid var(--border); border-top: 1px solid var(--border);
  transition: background-color 1.6s ease;
}
.fx-caja:hover { background-color: var(--c, #818cf8); transition-duration: 0s; }
.fx-caja.fx-mas::after {
  content: ''; position: absolute; left: -6px; top: -6px; width: 11px; height: 11px; pointer-events: none; opacity: .55;
  background:
    linear-gradient(var(--text-3), var(--text-3)) center / 1px 100% no-repeat,
    linear-gradient(var(--text-3), var(--text-3)) center / 100% 1px no-repeat;
}
/* Velo: desvanece las cajas hacia los bordes para que la cabecera no se vea cortada. */
.fx-cajas-velo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--bg);
  -webkit-mask-image: radial-gradient(ellipse 62% 75% at 50% 50%, transparent 25%, #000 95%);
  mask-image: radial-gradient(ellipse 62% 75% at 50% 50%, transparent 25%, #000 95%);
}
/* El texto de la cabecera deja pasar el mouse a las cajas (no tiene links). */
.page-hero.fx-cajas-on > div:not(.fx-cajas):not(.fx-cajas-velo):not(.page-hero-bg) { pointer-events: none; }
@media (hover: none) { .fx-cajas { display: none; } .fx-cajas-velo { display: none; } }