.cj{
  font-family:var(--texto);
  color:var(--tinta);
  background:transparent;
  padding:0;
  margin-top:2rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.cj-wrap{max-width:1080px;margin:0 auto}

.cj h1,.cj h2,.cj h3{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.cj .eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cereza);display:block;margin-bottom:10px;
}
.cj .num{font-variant-numeric:tabular-nums}

/* ---------- riel de métodos ---------- */
.cj-rail{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 28px;
}
.cj-tab{
  font:inherit;cursor:pointer;text-align:center;
  background:transparent;border:1px solid var(--pergamino);border-radius:var(--r);
  padding:14px 6px 12px;color:var(--gris);
  transition:border-color .18s,color .18s,background .18s;
}
.cj-tab svg{display:block;margin:0 auto 8px;width:38px;height:48px}
.cj-tab .cj-tab-n{display:block;font-size:13px;font-weight:700;color:var(--tinta)}
.cj-tab .cj-tab-f{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.cj-tab:hover{border-color:var(--verde)}
.cj-tab[aria-selected="true"]{border-color:var(--selva);background:var(--selva);color:var(--papel)}
.cj-tab[aria-selected="true"] .cj-tab-n,.cj-tab[aria-selected="true"] .cj-tab-f{color:var(--papel)}
html[data-theme="noche"] .cj-tab[aria-selected="true"]{background:var(--mandarina);border-color:var(--mandarina);color:#14211A}
html[data-theme="noche"] .cj-tab[aria-selected="true"] .cj-tab-n,html[data-theme="noche"] .cj-tab[aria-selected="true"] .cj-tab-f{color:#14211A}

/* ---------- tarjeta principal ---------- */
.cj-card{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r-lg);
  box-shadow:var(--sombra);
  display:grid;grid-template-columns:minmax(240px,340px) 1fr;
}
.cj-stage{
  border-right:1px solid var(--linea);
  padding:26px 20px 20px;display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(180deg,var(--tarjeta) 0%,var(--papel) 100%);
  border-radius:var(--r-lg) 0 0 var(--r-lg);
}
.cj-stage svg{width:100%;max-width:210px;height:auto}
.cj-readout{margin-top:16px;text-align:center}
.cj-readout .cj-big{
  font-family:var(--display);font-weight:800;font-size:clamp(40px,7vw,58px);
  line-height:1;display:block;font-variant-numeric:tabular-nums;
}
.cj-readout .cj-big small{font-size:.4em;font-weight:600;margin-left:2px}
.cj-readout .cj-cap{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}

.cj-panel{padding:26px}

.cj-recipe{
  display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--pergamino);border-radius:var(--r);
  overflow:hidden;margin-bottom:22px;
}
.cj-cell{flex:1 1 90px;padding:12px 14px;border-right:1px solid var(--pergamino)}
.cj-cell:last-child{border-right:0}
.cj-cell b{display:block;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.cj-cell span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}

/* controles */
.cj-controls{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:22px;align-items:flex-end}
.cj-field{display:flex;flex-direction:column;gap:6px}
.cj-field>span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.cj-seg{display:inline-flex;border:1px solid var(--pergamino);border-radius:var(--r);overflow:hidden}
.cj-seg button{
  font:inherit;font-size:13px;font-weight:500;cursor:pointer;padding:7px 13px;
  background:var(--tarjeta);border:0;border-right:1px solid var(--linea);color:var(--gris);
}
.cj-seg button:last-child{border-right:0}
.cj-seg button[aria-pressed="true"]{background:var(--tinta);color:#fff;font-weight:700}
.cj-step-btn{
  font:inherit;font-size:15px;width:32px;height:32px;cursor:pointer;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r);color:var(--tinta);
}
.cj-step-btn:hover{border-color:var(--verde)}
.cj-count{min-width:2.2ch;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.cj-qty{display:flex;align-items:center;gap:10px}

/* pasos previos */
.cj-prev{list-style:none;margin:0 0 20px;padding:0;font-size:14px;color:var(--gris)}
.cj-prev li{padding-left:20px;position:relative;margin-bottom:5px}
.cj-prev li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border:1px solid var(--verde);border-radius:50%}

/* línea de tiempo */
.cj-tl{list-style:none;margin:0;padding:0;position:relative}
.cj-tl::before{content:"";position:absolute;left:53px;top:14px;bottom:14px;width:1px;background:var(--pergamino)}
.cj-tl li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:22px;padding:9px 0;cursor:pointer}
.cj-tl .cj-t{
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--gris);
  text-align:right;padding-top:2px;
}
.cj-tl .cj-body{position:relative}
.cj-tl .cj-body::before{
  content:"";position:absolute;left:-27px;top:8px;width:9px;height:9px;border-radius:50%;
  background:var(--papel);border:1px solid var(--pergamino);transition:background .2s,border-color .2s,transform .2s
}
.cj-tl .cj-h{font-weight:700;font-size:15px}
.cj-tl .cj-d{font-size:14px;color:var(--gris)}
.cj-tl .cj-d b{color:var(--cereza);font-variant-numeric:tabular-nums}
.cj-tl li:hover .cj-body::before{border-color:var(--verde)}
.cj-tl li[data-on="1"] .cj-body::before{background:var(--cereza);border-color:var(--cereza);transform:scale(1.35)}
.cj-tl li[data-on="1"] .cj-t{color:var(--tinta)}

.cj-go{
  font:inherit;font-weight:700;font-size:15px;cursor:pointer;margin-top:22px;
  background:var(--mandarina);color:#14211A;border:0;border-radius:999px;padding:14px 26px;
  display:inline-flex;align-items:center;gap:10px;
  transition:background .18s,color .18s;
}
.cj-go:hover{background:var(--cereza);color:var(--papel)}

/* ---------- fila inferior ---------- */
.cj-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.cj-box{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r-lg);padding:22px}
.cj-grind{display:flex;align-items:center;gap:16px}
.cj-grind svg{flex:0 0 88px;border-radius:var(--r);background:#FBF9F4;border:1px solid var(--pergamino)}
.cj-grind b{display:block;font-size:17px}
.cj-grind span{font-size:13px;color:var(--gris)}

.cj-fix{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.cj-fix button{
  font:inherit;font-size:13px;cursor:pointer;padding:7px 14px;border-radius:100px;
  background:var(--tarjeta);border:1px solid var(--linea);color:var(--tinta)
}
.cj-fix button:hover{border-color:var(--verde)}
.cj-fix button[aria-pressed="true"]{background:var(--cereza);border-color:var(--cereza);color:#fff}
.cj-fix-out{font-size:14px;color:var(--gris);min-height:44px}
.cj-fix-out b{color:var(--tinta)}

/* ---------- cierre comercial ---------- */
.cj-sell{
  margin-top:14px;background:var(--selva);color:var(--papel);border-radius:var(--r-lg);
  padding:26px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between
}
.cj-sell h3{font-size:clamp(19px,2.4vw,25px);color:var(--papel);max-width:22ch}
.cj-sell p{font-size:14px;opacity:.72;margin-top:6px;max-width:40ch}
.cj-sell a{
  font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;
  background:var(--mandarina);color:#14211A;border-radius:999px;padding:14px 24px;
}
.cj-sell a:hover{background:var(--cereza);color:var(--papel)}

/* ---------- modo preparación ---------- */
.cj-brew{
  position:fixed;inset:0;z-index:9999;background:var(--tinta);color:var(--papel);
  display:none;flex-direction:column;padding:20px;
}
.cj-brew[data-open="1"]{display:flex}
.cj-brew-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cj-brew-top .cj-eq{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.cj-icon-btn{
  font:inherit;font-size:13px;cursor:pointer;background:transparent;color:var(--papel);
  border:1px solid rgba(247,243,234,.28);border-radius:var(--r);padding:7px 13px;
}
.cj-icon-btn:hover{border-color:var(--papel)}
.cj-brew-mid{
  flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(20px,6vw,72px);
  flex-wrap:wrap;padding:18px 0;
}
.cj-brew-mid svg{width:min(30vw,180px);height:auto}
.cj-brew-txt{max-width:26ch}
.cj-brew-txt .cj-h{font-family:var(--display);font-weight:800;font-size:clamp(26px,4.5vw,42px);line-height:1.05}
.cj-brew-txt .cj-d{font-size:clamp(14px,1.7vw,17px);opacity:.72;margin-top:10px}
.cj-target{
  font-family:var(--display);font-weight:800;font-size:clamp(56px,13vw,120px);
  line-height:.9;font-variant-numeric:tabular-nums;color:#fff;margin-top:22px;
}
.cj-target small{font-size:.28em;font-weight:600;opacity:.6;margin-left:4px}
.cj-target-cap{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.5}
.cj-brew-bot{display:flex;flex-direction:column;gap:10px}
.cj-clock{
  display:flex;justify-content:space-between;align-items:baseline;
  font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;
}
.cj-bar{height:3px;background:rgba(247,243,234,.18);border-radius:2px;position:relative;overflow:hidden}
.cj-bar i{position:absolute;inset:0 auto 0 0;background:var(--cereza);width:0}
.cj-marks{position:relative;height:14px}
.cj-marks span{
  position:absolute;top:0;transform:translateX(-50%);font-size:10px;
  font-variant-numeric:tabular-nums;opacity:.4;
}

/* SVG device styling hooks */
.dv-line{fill:none;stroke:var(--tinta);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.dv-thin{fill:none;stroke:var(--tinta);stroke-width:1.4;opacity:.4}
.dv-water{fill:var(--agua);opacity:.85}
.dv-brew{fill:#5B3A24}
.dv-bed{fill:#7A5233}
.dv-crema{fill:#C79155}
.cj-brew .dv-line{stroke:var(--papel)}
.cj-brew .dv-thin{stroke:var(--papel);opacity:.3}

@media (max-width:820px){
  .cj-card{grid-template-columns:1fr}
  .cj-stage{border-right:0;border-bottom:1px solid var(--pergamino);border-radius:var(--r-lg) var(--r-lg) 0 0}
  .cj-stage svg{max-width:150px}
  .cj-row{grid-template-columns:1fr}
  .cj-rail{grid-template-columns:repeat(2,1fr)}
  .cj-brew-mid{flex-direction:column;gap:18px}
  .cj-brew-mid svg{width:34vw}
}

:where(button,a,[tabindex]):focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:var(--r)}
.cj-brew :where(button,a):focus-visible{outline-color:var(--papel)}

@media (prefers-reduced-motion:reduce){
  html:not(.cj-brew-open) .cj-tab,
  html:not(.cj-brew-open) .cj-tl li .cj-body::before{transition-duration:.01ms !important}
}