/* 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_ · Cartel de la página Creadores. Todo bajo .ojc y con prefijo ojc-. */
.ojc{
  --ojc-crema:#F1ECE1; --ojc-negro:#13110F; --ojc-azul:#1D3BFF; --ojc-rojo:#D2371C; --ojc-btn-fg:#FFFFFF;
  --ojc-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --ojc-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --ojc-gutter:clamp(20px,4vw,64px);
  position:relative;z-index:3;width:100%;
  display:flex;flex-direction:column;
  background:var(--ojc-crema);color:var(--ojc-negro);
  font-family:var(--ojc-display);font-size:16px;line-height:1.4;text-align:left;
  padding:clamp(28px,4vw,56px) var(--ojc-gutter) 0;
  overflow-x:clip;
}
.ojc.ojc--nomicro{padding-bottom:clamp(40px,6vw,88px)}
.ojc *,.ojc *::before,.ojc *::after{box-sizing:border-box}
.ojc h1,.ojc h2,.ojc p,.ojc div{margin:0}

.ojc .ojc-eye{display:flex;align-items:center;gap:10px;font-family:var(--ojc-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ojc-negro)}
.ojc .ojc-sq{width:10px;height:10px;background:var(--ojc-rojo);display:inline-block;flex:none}

.ojc .ojc-h1{
  margin-top:clamp(12px,2vw,28px);
  font-family:var(--ojc-display);font-weight:900;font-stretch:62%;font-variation-settings:'wdth' 62;
  text-transform:uppercase;font-size:clamp(84px,17.5vw,260px);line-height:.82;letter-spacing:-.01em;
  color:var(--ojc-negro);
}
.ojc .ojc-off{
  margin-top:clamp(-30px,-1vw,0px);
  margin-left:var(--ojc-off,clamp(0px,calc((100vw - 560px) * .62),640px));
  font-family:var(--ojc-display);font-weight:900;font-stretch:62%;font-variation-settings:'wdth' 62;
  text-transform:uppercase;font-size:clamp(52px,9vw,136px);line-height:.86;
  color:var(--ojc-azul);
}
/* cada línea ocupa solo lo que mide, para que el script pueda comprobar si cabe */
.ojc .ojc-ln{display:block;width:max-content;max-width:none;white-space:nowrap}
.ojc .ojc-u{color:var(--ojc-rojo)}

.ojc .ojc-rule{height:2px;background:var(--ojc-negro);margin:clamp(24px,3vw,44px) 0 18px}

.ojc .ojc-foot{display:flex;flex-wrap:wrap;gap:24px 64px;align-items:flex-start;justify-content:space-between}
.ojc .ojc-copy{flex:1 1 380px;max-width:640px}
.ojc .ojc-kick{font-family:var(--ojc-mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;color:var(--ojc-negro)}
.ojc .ojc-lead{font-weight:500;font-size:clamp(20px,2vw,28px);line-height:1.25;color:var(--ojc-negro)}
.ojc .ojc-btn{
  display:inline-block;margin-top:26px;padding:18px 28px;
  background:var(--ojc-rojo);color:var(--ojc-btn-fg);
  font-family:var(--ojc-mono);font-weight:500;font-size:15px;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;text-decoration:none;
  border:0;cursor:pointer;transition:background .2s;
}
.ojc a.ojc-btn:hover,.ojc a.ojc-btn:focus-visible{background:var(--ojc-btn-hbg,var(--ojc-negro));color:var(--ojc-btn-hfg,var(--ojc-btn-fg))}
.ojc a.ojc-btn:visited{color:var(--ojc-btn-fg)}
.ojc a.ojc-btn:focus-visible{outline:3px solid var(--ojc-negro);outline-offset:3px}

/* hueco del micro: rompe la retícula y sobresale hacia la sección siguiente */
.ojc .ojc-micro{
  position:relative;z-index:3;flex:0 0 auto;margin-left:auto;
  width:var(--ojc-micro-w,clamp(150px,20vw,280px));height:var(--ojc-micro-h,clamp(230px,30vw,400px));
  margin-top:var(--ojc-micro-top,0px);margin-bottom:calc(var(--ojc-micro-over,110px) * -1);
}
.ojc .ojc-micro--guide{border:2px dashed var(--ojc-rojo);background:rgba(210,55,28,.06);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ojc-rojo);font-family:var(--ojc-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:12px}

@media (max-width:600px){
  .ojc .ojc-foot{flex-direction:column;align-items:stretch}
  .ojc .ojc-copy{flex:0 0 auto}
  .ojc .ojc-micro{align-self:flex-end}
}
@media (prefers-reduced-motion:reduce){.ojc .ojc-btn{transition:none}}