/* 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_ · Ticket. Todo bajo .ojt y con prefijo ojt-. */
.ojt{
  --ojt-bg:#F1ECE1; --ojt-fg:#13110F; --ojt-ac:#D2371C; --ojt-tooth:10px; --ojt-ar:16 / 9;
  --ojt-rx:0deg; --ojt-ry:0deg; --ojt-rot:0deg; --ojt-step:140ms;
  --ojt-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --ojt-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  width:100%;text-align:left;font-family:var(--ojt-mono);font-size:14px;line-height:1.4;letter-spacing:.03em;
  transform:perspective(900px) rotate(var(--ojt-rot)) rotateX(var(--ojt-rx)) rotateY(var(--ojt-ry));
  transition:transform .3s ease-out;
}
.ojt,.ojt *,.ojt *::before,.ojt *::after{box-sizing:border-box}
.ojt h3,.ojt p,.ojt ul,.ojt li,.ojt figure{margin:0;padding:0;list-style:none}

/* ranura de la impresora */
.ojt .ojt-roll{position:relative;overflow:hidden;padding-top:0}
.ojt .ojt-roll::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--ojt-fg);z-index:3}

.ojt .ojt-paper{
  position:relative;background:var(--ojt-bg);color:var(--ojt-fg);
  padding:28px 24px calc(28px + var(--ojt-tooth));
  clip-path:polygon(0 0, 100% 0, 100% 100%, 91.667% calc(100% - var(--ojt-tooth)), 83.333% 100%, 75% calc(100% - var(--ojt-tooth)), 66.667% 100%, 58.333% calc(100% - var(--ojt-tooth)), 50% 100%, 41.667% calc(100% - var(--ojt-tooth)), 33.333% 100%, 25% calc(100% - var(--ojt-tooth)), 16.667% 100%, 8.333% calc(100% - var(--ojt-tooth)), 0 100%);
}

.ojt .ojt-shot{position:relative;aspect-ratio:var(--ojt-ar);margin-bottom:18px;overflow:hidden;background:rgba(19,17,15,.12)}
.ojt .ojt-shot img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

.ojt .ojt-kick{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ojt-ac)}
.ojt .ojt-title{
  margin-top:4px;font-family:var(--ojt-display);font-weight:900;font-stretch:62%;font-variation-settings:'wdth' 62;
  text-transform:uppercase;font-size:clamp(30px,3.2vw,38px);line-height:1;color:inherit;overflow-wrap:anywhere;
}
.ojt .ojt-u{color:var(--ojt-ac)}
.ojt .ojt-rule{border-top:1px dashed var(--ojt-fg);margin:16px 0}

.ojt .ojt-lines{display:flex;flex-direction:column;gap:10px}
.ojt .ojt-lines li,.ojt .ojt-total{display:flex;justify-content:space-between;gap:12px}
.ojt .ojt-r{text-align:right;min-width:0;overflow-wrap:anywhere}
.ojt .ojt-total{font-weight:500;text-transform:uppercase}

.ojt .ojt-btn{
  display:inline-block;margin-top:18px;padding:14px 18px;background:var(--ojt-fg);color:var(--ojt-bg);
  font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
}
.ojt a.ojt-btn:hover,.ojt a.ojt-btn:focus{background:var(--ojt-ac);color:#fff;text-decoration:none}
.ojt a.ojt-btn:focus-visible{outline:3px solid var(--ojt-ac);outline-offset:3px}

.ojt .ojt-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.ojt .ojt-end .ojt-btn{margin-top:0}
.ojt .ojt-stamp{
  position:relative;margin-left:auto;z-index:2;pointer-events:none;
  padding:6px 10px;border:3px solid var(--ojt-ac);border-radius:4px;color:var(--ojt-ac);
  font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  opacity:.92;transform:rotate(-8deg);
}

/* IMPRESIÓN: solo si el script ha "armado" el ticket (sin JS o con movimiento reducido se ve ya impreso) */
.ojt.ojt--anim.is-armed .ojt-paper{transform:translateY(-102%)}
.ojt.ojt--anim.is-armed.is-on .ojt-paper{transform:none;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ojt.ojt--anim.is-armed .ojt-lines li,
.ojt.ojt--anim.is-armed .ojt-total,
.ojt.ojt--anim.is-armed .ojt-btn{opacity:0;transform:translateY(-6px)}
.ojt.ojt--anim.is-armed.is-on .ojt-lines li,
.ojt.ojt--anim.is-armed.is-on .ojt-total,
.ojt.ojt--anim.is-armed.is-on .ojt-btn{opacity:1;transform:none;transition:opacity .25s ease-out,transform .25s ease-out,background .2s,color .2s;transition-delay:calc(.55s + var(--i,0) * var(--ojt-step))}
.ojt.ojt--anim.is-armed .ojt-stamp{opacity:0;transform:rotate(-8deg) scale(1.8)}
.ojt.ojt--anim.is-armed.is-on .ojt-stamp{opacity:.92;transform:rotate(-8deg) scale(1);transition:opacity .15s ease-out,transform .25s cubic-bezier(.2,1.4,.4,1);transition-delay:calc(.65s + var(--i,0) * var(--ojt-step))}

/* Enganchado al Cartel: en flujo (tablet y móvil) y flotando a la derecha en escritorio */
.ojc > .elementor-widget.ojt-attached{width:var(--ojt-w,340px);max-width:100%;margin:28px 0 0;position:relative;z-index:5}
@media (min-width:1025px){
  .ojc > .elementor-widget.ojt-attached{position:absolute;right:var(--ojc-gutter,clamp(20px,4vw,64px));top:var(--ojt-top,auto);bottom:var(--ojt-bottom,-70px);transform:translateY(var(--ojt-ty,0));margin:0}
}

/* Varios tickets en fila: mismo ancho (se activa en el panel) */
.elementor-widget.ojt-eq-yes{flex:1 1 300px;min-width:0;width:auto;max-width:100%}
.elementor-widget.ojt-eq-yes .ojt{min-width:0}

@media (prefers-reduced-motion:reduce){
  .ojt,.ojt *{transition:none !important}
}