/* 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_ · Banda de color. Todo bajo .ojn y con prefijo ojn-. */
.ojn{
  --ojn-bg:#1D3BFF; --ojn-fg:#F1ECE1; --ojn-guion:#13110F; --ojn-btn-bg:#13110F; --ojn-btn-fg:#F1ECE1;
  --ojn-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --ojn-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  width:100%;background:var(--ojn-bg);color:var(--ojn-fg);
  font-family:var(--ojn-mono);font-size:16px;line-height:1.4;text-align:left;
  padding:clamp(40px,5vw,80px) clamp(20px,4vw,64px);
}
.ojn *,.ojn *::before,.ojn *::after{box-sizing:border-box}
.ojn h2,.ojn p{margin:0;padding:0}

.ojn .ojn-in{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between}
.ojn .ojn-main{flex:1 1 480px;min-width:0}
.ojn .ojn-eye{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;color:var(--ojn-fg)}
.ojn .ojn-h{
  font-family:var(--ojn-display);font-weight:900;font-stretch:62%;font-variation-settings:'wdth' 62;
  text-transform:uppercase;font-size:clamp(56px,9vw,140px);line-height:.88;color:var(--ojn-fg);overflow-wrap:anywhere;
}
.ojn .ojn-u{color:var(--ojn-guion)}
.ojn .ojn-side{flex:1 1 320px;max-width:460px}
.ojn .ojn-txt{font-size:16px;line-height:1.55;color:var(--ojn-fg)}
.ojn .ojn-btn{
  display:inline-block;margin-top:26px;padding:18px 28px;background:var(--ojn-btn-bg);color:var(--ojn-btn-fg);
  font-family:var(--ojn-mono);font-weight:500;font-size:15px;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;text-decoration:none;
}
.ojn .ojn-txt + .ojn-btn{margin-top:26px}
.ojn a.ojn-btn:hover{opacity:.85}
.ojn a.ojn-btn:visited{color:var(--ojn-btn-fg)}
.ojn a.ojn-btn:focus-visible{outline:3px solid var(--ojn-fg);outline-offset:3px}
