/* Cafecito · Como funciona uma máquina de espresso */
.mq{--mq-fundo:#0a0a0a;--mq-fundo2:#141414;--mq-linha:#2a2a2a;--mq-tx:#f2f2f0;--mq-mu:#9a9a96;--mq-limao:#C2D500;
  --mq-mono:var(--mono,'GT America Mono',ui-monospace,Menlo,Consolas,monospace);--mq-sans:var(--sans,'GT America',Helvetica,Arial,sans-serif);
  background:var(--mq-fundo);color:var(--mq-tx);font-family:var(--mq-sans);overflow:hidden}
.mq *{box-sizing:border-box}
.mq button{font:inherit;color:inherit}
.mq-in{max-width:1280px;margin:0 auto;padding:0 20px}
.mq-rotulo{display:inline-flex;align-items:center;gap:10px;font-family:var(--mq-mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--mq-limao);margin:0 0 16px}
.mq-rotulo i{width:8px;height:8px;border-radius:50%;background:var(--mq-limao);box-shadow:0 0 0 0 rgba(194,213,0,.6);animation:mq-pulso 2.2s infinite}
@keyframes mq-pulso{70%{box-shadow:0 0 0 10px rgba(194,213,0,0)}100%{box-shadow:0 0 0 0 rgba(194,213,0,0)}}
.mq-h1{font-family:var(--mq-mono);font-weight:500;text-transform:uppercase;font-size:clamp(30px,5.2vw,72px);line-height:.98;letter-spacing:-.02em;margin:0 0 .35em;max-width:14ch}
.mq-h2{font-family:var(--mq-mono);font-weight:500;text-transform:uppercase;font-size:clamp(24px,3.4vw,44px);line-height:1;letter-spacing:-.015em;margin:0 0 .5em}
.mq-lead{font-size:clamp(16px,1.5vw,19px);line-height:1.5;color:#c9c9c5;max-width:600px;margin:0}

/* ---------- abertura ---------- */
.mq-abertura{padding:56px 0 28px}
.mq-abertura .mq-in{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:end}
.mq-ficha-maquina{font-family:var(--mq-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mq-mu);border-top:1px solid var(--mq-linha)}
.mq-ficha-maquina div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--mq-linha)}
.mq-ficha-maquina b{color:var(--mq-tx);font-weight:500;text-align:right}
@media(max-width:860px){.mq-abertura{padding:36px 0 20px}.mq-abertura .mq-in{grid-template-columns:1fr;gap:22px}}

/* ---------- palco 3D ---------- */
.mq-palco{position:relative;height:min(86vh,880px);min-height:560px;background:radial-gradient(120% 80% at 50% 30%,#2b2b29 0%,#141413 52%,#0a0a0a 100%);border-top:1px solid var(--mq-linha);border-bottom:1px solid var(--mq-linha);overflow:hidden;touch-action:none;outline:none}
@media(max-width:860px){.mq-palco{height:calc(100svh - 56px);min-height:520px;max-height:860px}}
.mq-tela{position:absolute;inset:0}
.mq-tela canvas{display:block;width:100%;height:100%;cursor:grab}
.mq-tela canvas:active{cursor:grabbing}
.mq-carregando{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-family:var(--mq-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mq-mu);pointer-events:none;transition:opacity .6s}
.mq-pronto .mq-carregando{opacity:0}
.mq-sem-3d .mq-palco{height:auto;min-height:0}
.mq-sem-3d .mq-carregando{position:static;padding:40px 20px}
.mq-sem-3d .mq-barra,.mq-sem-3d .mq-dica{display:none}

.mq-barra{position:absolute;left:0;right:0;top:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:flex-start;padding:14px;pointer-events:none;z-index:5}
.mq-barra>*{pointer-events:auto}
.mq-abas,.mq-acoes{display:flex;gap:0;background:rgba(10,10,10,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:2px;padding:3px}
.mq-abas button,.mq-acoes button{appearance:none;border:0;background:transparent;font-family:var(--mq-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:9px 12px;cursor:pointer;border-radius:1px;white-space:nowrap;color:#d8d8d4}
.mq-abas button[aria-selected=true],.mq-acoes button[aria-pressed=true]{background:var(--mq-limao);color:#000}
.mq-abas button:focus-visible,.mq-acoes button:focus-visible,.mq-pino:focus-visible,.mq-painel button:focus-visible{outline:2px solid var(--mq-limao);outline-offset:2px}
.mq-faixa{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font-family:var(--mq-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#bdbdb8;background:rgba(10,10,10,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);padding:10px 14px;border-radius:2px;z-index:4;transition:opacity .3s}
.mq-faixa input{appearance:none;-webkit-appearance:none;width:min(220px,34vw);height:2px;background:rgba(255,255,255,.3);outline:none;margin:0}
.mq-faixa input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--mq-limao);border:0;cursor:pointer}
.mq-faixa input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--mq-limao);border:0;cursor:pointer}
.mq-palco[data-modo=processo] .mq-faixa,.mq-palco:has(.mq-painel.aberto) .mq-faixa{opacity:0;pointer-events:none}
.mq-dica{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);text-align:center;font-family:var(--mq-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#a5a5a0;pointer-events:none;transition:opacity .6s;z-index:3}
.mq-dica.some{opacity:0}
.mq-tip{position:absolute;left:0;top:0;pointer-events:none;font-family:var(--mq-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:#000;color:#fff;border:1px solid var(--mq-limao);padding:6px 9px;opacity:0;transition:opacity .15s;z-index:6;white-space:nowrap}
.mq-tip.on{opacity:1}
.mq-cron{position:absolute;right:14px;top:66px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-family:var(--mq-mono);text-transform:uppercase;z-index:4;pointer-events:none}
.mq-cron .t{font-size:clamp(28px,4vw,44px);line-height:1;color:var(--mq-limao);font-variant-numeric:tabular-nums}
.mq-cron .b{font-size:12px;letter-spacing:.08em;color:#cfcfca;font-variant-numeric:tabular-nums}
.mq-cron[hidden]{display:none}

/* pinos numerados */
.mq-pinos{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;z-index:2}
.mq-pinos.on{opacity:1}
.mq-pinos.on .mq-pino{pointer-events:auto}
.mq-pino{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.4);background:#fff;color:#000;font-family:var(--mq-mono);font-size:11px;font-weight:500;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:background .15s,opacity .2s;will-change:transform}
.mq-pino:hover,.mq-pino.sel{background:var(--mq-limao)}
.mq-pino.apagado{opacity:.25}
@media(max-width:860px){.mq-pino{width:22px;height:22px;font-size:10px}}

/* painel de informação */
.mq-painel{position:absolute;z-index:7;background:rgba(12,12,12,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);color:var(--mq-tx);display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.7,.1,1),opacity .3s}
.mq-painel[hidden]{display:none}
@media(min-width:861px){
  .mq-painel{top:70px;right:14px;bottom:14px;width:min(380px,36%);padding:24px 24px 18px;transform:translateX(24px);opacity:0;overflow:auto}
  .mq-painel.aberto{transform:none;opacity:1}
}
@media(max-width:860px){
  .mq-painel{left:0;right:0;bottom:0;max-height:48%;padding:16px 18px 12px;border-width:1px 0 0;transform:translateY(30px);opacity:0;overflow:auto;overscroll-behavior:contain}
  .mq-painel.aberto{transform:none;opacity:1}
}
.mq-pn-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.mq-pn-area{font-family:var(--mq-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--mq-limao)}
.mq-fechar{appearance:none;border:1px solid rgba(255,255,255,.18);background:transparent;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;font-size:18px;line-height:1;padding:0}
.mq-fechar:hover{background:#fff;color:#000}
.mq-pn-nome{font-family:var(--mq-mono);font-weight:500;text-transform:uppercase;font-size:clamp(20px,2.2vw,28px);line-height:1.05;margin:4px 0 12px;letter-spacing:-.01em}
.mq-pn-texto{font-size:15px;line-height:1.55;color:#d6d6d2;margin:0 0 14px}
.mq-pn-ficha{margin:0 0 14px;border-top:1px solid var(--mq-linha)}
.mq-pn-ficha div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--mq-linha);font-size:13px}
.mq-pn-ficha dt{color:var(--mq-mu);font-family:var(--mq-mono);text-transform:uppercase;font-size:11px;letter-spacing:.05em;padding-top:2px}
.mq-pn-ficha dd{margin:0;text-align:right}
.mq-pn-numeros{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 14px}
.mq-pn-numeros:empty{display:none}
.mq-pn-numeros div{border:1px solid var(--mq-linha);padding:10px 12px}
.mq-pn-numeros span{display:block;font-family:var(--mq-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--mq-mu);margin-bottom:4px}
.mq-pn-numeros strong{font-family:var(--mq-mono);font-weight:500;font-size:15px;text-transform:uppercase;color:var(--mq-limao)}
.mq-pn-nav{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px}
.mq-pn-nav button{appearance:none;border:1px solid rgba(255,255,255,.2);background:transparent;height:40px;min-width:44px;padding:0 14px;cursor:pointer;font-family:var(--mq-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;border-radius:2px}
.mq-pn-nav button:hover{background:#fff;color:#000}
.mq-pn-nav .mq-prox{background:var(--mq-limao);border-color:var(--mq-limao);color:#000}
.mq-pn-nav .mq-prox:hover{background:#d6eb00}
.mq-pn-pos{font-family:var(--mq-mono);font-size:12px;color:var(--mq-mu);letter-spacing:.06em}
.mq-repetir{display:none}
.mq-painel[data-tipo=etapa] .mq-repetir{display:inline-block}
@media(max-width:860px){
  .mq-barra{padding:10px}
  .mq-abas button,.mq-acoes button{padding:8px 9px;font-size:11px}
  .mq-pn-texto{font-size:14px;margin-bottom:10px}
  .mq-pn-nome{margin-bottom:8px}
  .mq-cron{top:auto;bottom:calc(48% + 12px)}
  .mq-faixa{bottom:12px;padding:9px 12px}
  .mq-dica{bottom:64px}
}

/* ---------- números do espresso ---------- */
.mq-numeros{padding:72px 0 56px}
.mq-numeros ul{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--mq-linha)}
.mq-numeros li{padding:22px 18px 22px 0;border-bottom:1px solid var(--mq-linha)}
.mq-numeros li+li{padding-left:18px;border-left:1px solid var(--mq-linha)}
.mq-numeros strong{display:block;font-family:var(--mq-mono);font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1;color:var(--mq-limao);margin-bottom:10px}
.mq-numeros span{display:block;font-family:var(--mq-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.mq-numeros p{margin:0;font-size:14px;color:var(--mq-mu);line-height:1.45}
@media(max-width:860px){.mq-numeros{padding:48px 0 36px}.mq-numeros ul{grid-template-columns:1fr 1fr}.mq-numeros li,.mq-numeros li+li{padding:18px 12px 18px 0;border-left:0}.mq-numeros li:nth-child(2n){padding-left:14px;border-left:1px solid var(--mq-linha)}.mq-numeros li:last-child{grid-column:1/-1;border-left:0;padding-left:0}}

/* ---------- caminho da água ---------- */
.mq-caminho{padding:24px 0 64px}
.mq-caminho ol{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;counter-reset:c}
.mq-caminho li{position:relative;padding:18px 16px 0 0;border-top:2px solid #234a5e;counter-increment:c;font-size:14px;line-height:1.45;color:#cfcfca}
.mq-caminho li.cafe{border-top-color:#7a4a24}
.mq-caminho li::before{content:counter(c,decimal-leading-zero);position:absolute;top:-13px;left:0;background:var(--mq-fundo);padding-right:8px;font-family:var(--mq-mono);font-size:12px;color:#5ec8ff}
.mq-caminho li.cafe::before{color:#d08a4a}
.mq-caminho b{display:block;font-family:var(--mq-mono);font-weight:500;text-transform:uppercase;font-size:13px;letter-spacing:.04em;color:var(--mq-tx);margin-bottom:6px}
@media(max-width:860px){.mq-caminho ol{grid-template-columns:1fr 1fr;row-gap:28px}}

/* ---------- guia de peças ---------- */
.mq-guia{padding:64px 0;border-top:1px solid var(--mq-linha)}
.mq-guia-area{font-family:var(--mq-mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--mq-mu);margin:36px 0 12px}
.mq-guia-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--mq-linha);border:1px solid var(--mq-linha)}
.mq-card{appearance:none;border:0;text-align:left;background:var(--mq-fundo);padding:18px 18px 20px;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-height:150px;transition:background .2s;font:inherit;color:inherit}
.mq-card:hover{background:#151515}
.mq-card:focus-visible{outline:2px solid var(--mq-limao);outline-offset:-2px}
.mq-card em{font-style:normal;font-family:var(--mq-mono);font-size:12px;color:var(--mq-limao)}
.mq-card b{font-family:var(--mq-mono);font-weight:500;text-transform:uppercase;font-size:15px;line-height:1.15}
.mq-card span{font-size:13.5px;line-height:1.45;color:var(--mq-mu)}
.mq-card i{margin-top:auto;font-style:normal;font-family:var(--mq-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#d8d8d4}
.mq-card:hover i{color:var(--mq-limao)}
@media(max-width:1000px){.mq-guia-grade{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.mq-card{min-height:0;padding:16px}.mq-card span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}

/* ---------- etapas ---------- */
.mq-etapas{padding:64px 0;border-top:1px solid var(--mq-linha)}
.mq-etapas ol{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--mq-linha)}
.mq-etapa-item{border-bottom:1px solid var(--mq-linha)}
.mq-etapa-item button{appearance:none;border:0;background:transparent;width:100%;text-align:left;display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:baseline;padding:22px 0;cursor:pointer;font:inherit;color:inherit}
.mq-etapa-item em{font-style:normal;font-family:var(--mq-mono);font-size:13px;color:var(--mq-limao)}
.mq-etapa-item b{display:block;font-family:var(--mq-mono);font-weight:500;text-transform:uppercase;font-size:clamp(17px,2vw,22px);margin-bottom:6px}
.mq-etapa-item span{display:block;font-size:15px;line-height:1.5;color:var(--mq-mu);max-width:760px}
.mq-etapa-item i{font-style:normal;font-family:var(--mq-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#d8d8d4;white-space:nowrap}
.mq-etapa-item button:hover i,.mq-etapa-item.ativa i{color:var(--mq-limao)}
.mq-etapa-item button:focus-visible{outline:2px solid var(--mq-limao);outline-offset:2px}
@media(max-width:700px){.mq-etapa-item button{grid-template-columns:40px 1fr;gap:12px}.mq-etapa-item i{grid-column:2}}

/* ---------- fim ---------- */
.mq-fim{padding:72px 0 88px;border-top:1px solid var(--mq-linha)}
.mq-fim .mq-in{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.mq-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;background:var(--mq-limao);color:#000;font-family:var(--mq-mono);font-size:13px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border-radius:2px;white-space:nowrap}
.mq-btn:hover{background:#d6eb00}
.mq-nota{font-size:12px;color:#77776f;margin-top:28px;max-width:760px;line-height:1.5}