/* Fuentes: se usan si subes los .woff2 a /wp-content/uploads/oj-fonts/ (ver LEEME). Sin ellas, cae a la fuente monoespaciada del sistema. */
@font-face{font-family:'IBM Plex Mono';src:url('/wp-content/uploads/oj-fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/wp-content/uploads/oj-fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap}

/* Ojkita_ · Micro. Todo bajo .ojm. Sin 3D se ve el póster SVG con el saludo fijo. */
.ojm{
  --ojm-cuerpo:#2A2622; --ojm-crema:#F1ECE1; --ojm-azul:#1D3BFF; --ojm-rojo:#D2371C; --ojm-negro:#13110F;
  --ojm-bub-bg:#F1ECE1; --ojm-bub-fg:#13110F;
  position:relative;display:block;width:var(--ojm-w,280px);height:var(--ojm-h,400px);max-width:100%;
  margin:0 0 0 auto;
  font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
.ojm *,.ojm *::before,.ojm *::after{box-sizing:border-box}
/* ya dentro del hueco del Cartel: ocupa todo el hueco */
.ojm.ojm--slot{width:100%;height:100%;margin:0}

.ojm .ojm-stage{position:absolute;inset:0}
.ojm .ojm-poster{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .25s}
.ojm .ojm-f-cuerpo{fill:var(--ojm-cuerpo)}
.ojm .ojm-f-crema{fill:var(--ojm-crema)}
.ojm .ojm-f-azul{fill:var(--ojm-azul)}
.ojm .ojm-f-rojo{fill:var(--ojm-rojo)}
.ojm .ojm-f-negro{fill:var(--ojm-negro)}
.ojm .ojm-f-line{stroke:var(--ojm-crema)}
.ojm .ojm-s-line{stroke:var(--ojm-crema)}
.ojm .ojm-s-crema{stroke:var(--ojm-crema)}
.ojm .ojm-s-crema-soft{stroke:var(--ojm-crema);stroke-opacity:.35}
.ojm .ojm-blink{animation:ojm-blink 1.06s steps(1,end) 6 both}
@keyframes ojm-blink{0%{opacity:1}50%{opacity:.25}}

.ojm canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .25s;pointer-events:none}
.ojm.oj-3d canvas{opacity:1}
.ojm.oj-3d .ojm-poster{opacity:0}

/* bocadillo: aparece arriba a la derecha del micro, sobre el contenido */
.ojm .ojm-bub{
  position:absolute;right:0;top:0;z-index:5;margin:0;transform:translateY(-70%) translateY(6px);
  width:max-content;max-width:min(260px,80vw);padding:10px 14px;
  background:var(--ojm-bub-bg);color:var(--ojm-bub-fg);
  font-size:14px;font-weight:500;line-height:1.35;letter-spacing:0;text-transform:none;text-align:left;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.ojm .ojm-bub::after{content:"";position:absolute;right:38px;bottom:-8px;width:14px;height:14px;background:var(--ojm-bub-bg);transform:rotate(45deg)}
.ojm .ojm-bub.is-on{opacity:1;transform:translateY(-70%)}

@media (prefers-reduced-motion:reduce){
  .ojm .ojm-poster,.ojm canvas,.ojm .ojm-bub{transition:none}
  .ojm .ojm-blink{animation:none}
}