/* 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_ · Pasos numerados. Todo bajo .ojp y con prefijo ojp-. */
.ojp{
  --ojp-crema:#F1ECE1; --ojp-negro:#13110F; --ojp-azul:#1D3BFF; --ojp-rojo:#D2371C; --ojp-min:260px;
  --ojp-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --ojp-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  width:100%;background:var(--ojp-crema);color:var(--ojp-negro);
  font-family:var(--ojp-mono);font-size:16px;line-height:1.4;text-align:left;
  padding:0 clamp(20px,4vw,64px) clamp(48px,6vw,96px);
}
.ojp *,.ojp *::before,.ojp *::after{box-sizing:border-box}
.ojp h3,.ojp p,.ojp ol,.ojp li{margin:0;padding:0;list-style:none}

.ojp .ojp-in{border-top:2px solid var(--ojp-negro);padding-top:clamp(28px,4vw,48px)}
.ojp .ojp-eye{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ojp-rojo);margin-bottom:12px}
.ojp .ojp-list{display:flex;flex-wrap:wrap}
.ojp .ojp-it{flex:1 1 var(--ojp-min);min-width:0;padding:0 24px 24px 0}
.ojp .ojp-n{display:block;font-family:var(--ojp-display);font-weight:900;font-stretch:62%;font-variation-settings:'wdth' 62;font-size:88px;line-height:.9;color:var(--ojp-azul)}
.ojp .ojp-t{margin:8px 0;font-family:var(--ojp-display);font-weight:900;font-stretch:62%;font-variation-settings:'wdth' 62;text-transform:uppercase;font-size:40px;line-height:1;color:var(--ojp-negro);overflow-wrap:anywhere}
.ojp .ojp-d{font-size:15px;line-height:1.5;color:var(--ojp-negro)}
