/* Fuentes: se usan si subes los .woff2 a /wp-content/uploads/oj-fonts/ (ver LEEME). Sin ellas, cae a Helvetica/Arial. */
@font-face{font-family:'Archivo';src:url('/wp-content/uploads/oj-fonts/Archivo-VF.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@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_ · Caso real. Todo bajo .ojs y con prefijo ojs-. */
.ojs{
  --ojs-negro:#13110F; --ojs-azul:#1D3BFF; --ojs-rojo:#D2371C; --ojs-btn-bg:#13110F; --ojs-btn-fg:#F1ECE1;
  --ojs-ph1:#E4E3E0; --ojs-ph2:#CFCECB; --ojs-ph-fg:#5C5B58;
  --ojs-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --ojs-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  width:100%;background:var(--ojs-bg,transparent);color:var(--ojs-negro);
  font-family:var(--ojs-display);font-size:16px;line-height:1.4;text-align:left;
  padding:clamp(48px,6vw,96px) clamp(20px,4vw,64px);
  overflow-x:clip;
}
.ojs,.ojs *,.ojs *::before,.ojs *::after{box-sizing:border-box}
.ojs h2,.ojs p,.ojs figure{margin:0;padding:0}
.ojs .ojs-eye{font:500 13px/1.3 var(--ojs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ojs-rojo);margin-bottom:12px}
.ojs .ojs-h{
  font-family:var(--ojs-display);font-weight:900;font-stretch:62%;font-variation-settings:'wdth' 62;
  text-transform:uppercase;font-size:clamp(44px,7vw,104px);line-height:.9;letter-spacing:-.01em;
  margin-bottom:clamp(24px,3vw,44px);overflow-wrap:anywhere;color:var(--ojs-negro);
}
.ojs .ojs-u{color:var(--ojs-rojo)}
.ojs .ojs-grid{display:flex;flex-wrap:wrap;gap:32px}
.ojs .ojs-col{flex:1 1 var(--ojs-col-min,360px);min-width:0;display:flex;flex-direction:column;gap:28px}
.ojs .ojs-bl{font:500 13px/1.3 var(--ojs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ojs-azul);margin-bottom:6px}
.ojs .ojs-bt{font-size:16px;line-height:1.55;white-space:pre-line}
.ojs .ojs-btn{
  align-self:flex-start;display:inline-block;background:var(--ojs-btn-bg);color:var(--ojs-btn-fg);
  font:500 15px/1 var(--ojs-mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:18px 26px;border:0;border-radius:0;transition:background .15s,color .15s;
}
.ojs a.ojs-btn:visited{color:var(--ojs-btn-fg)}
.ojs a.ojs-btn:hover,.ojs a.ojs-btn:focus{background:var(--ojs-azul);color:#fff;text-decoration:none}
.ojs a.ojs-btn:focus-visible{outline:3px solid var(--ojs-negro);outline-offset:3px}
.ojs .ojs-shots{flex:2 1 var(--ojs-shots-min,520px);min-width:0;display:flex;flex-wrap:wrap;gap:16px;align-content:flex-start}
.ojs .ojs-sh{
  flex:1 1 var(--ojs-thumb-min,240px);height:var(--ojs-h,auto);aspect-ratio:var(--ojs-ar,16 / 9);
  background:var(--ojs-ph1);border:1px solid var(--ojs-negro);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font:400 13px/1.3 var(--ojs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ojs-ph-fg);
}
.ojs .ojs-sh:nth-child(even){background:var(--ojs-ph2)}
.ojs .ojs-sh--main{flex:1 1 100%;height:var(--ojs-h-main,auto)}
.ojs .ojs-sh img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
@media (prefers-reduced-motion:reduce){.ojs .ojs-btn{transition:none}}
.ojs .ojs-sh{position:relative}
.ojs .ojs-cap{position:absolute;left:0;right:0;bottom:0;padding:6px 10px;background:var(--ojs-negro);color:var(--ojs-btn-fg);font:400 12px/1.3 var(--ojs-mono);letter-spacing:.06em;text-transform:none;text-align:left}