/* ---------- m\0000e1 quinas em 3D (v3): seletor de 3 m\0000e1 quinas, palco e painel das \0000e1 reas ---------- */
.mq-sec{overflow:hidden}
.mq-sec .sec-head{margin-bottom:clamp(22px,2.6vw,34px)}

/* seletor de m\0000e1 quina em cart\0000f5 es */
.mq-tipos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.mq-tipo{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px;border-radius:var(--raio);border:0;background:rgba(255,255,255,.04);color:#fff;text-align:left;font-family:var(--fb);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .25s,box-shadow .25s,transform .25s var(--ease)}
.mq-tipo:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.mq-tipo.on{background:linear-gradient(150deg,rgba(222,31,40,.28),rgba(222,31,40,.06) 70%);box-shadow:inset 0 0 0 1.5px var(--verm-logo),0 14px 34px -18px rgba(222,31,40,.9)}
.mq-ico{flex:none;width:84px;height:45px}
.mq-ico .l{fill:none;stroke:rgba(255,255,255,.72);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mq-ico .m{fill:none;stroke:var(--verm-logo);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mq-tipo.on .mq-ico .l{stroke:#fff}
.mq-tt{display:grid;gap:2px;min-width:0}
.mq-tt b{font-family:var(--fd);font-stretch:108%;font-weight:750;font-size:1.02rem;line-height:1.2}
.mq-tt .mq-ct{display:none}
.mq-tt small{font-size:.8rem;line-height:1.35;color:rgba(255,255,255,.62)}

/* palco + painel */
.mq{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);gap:16px;align-items:stretch}
.mq-palco{position:relative;min-height:560px;border-radius:var(--raio-g);overflow:hidden;background:radial-gradient(ellipse 72% 58% at 50% 62%,#27313e,#10151c 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.mq-palco:active{cursor:grabbing}
#mqCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .35s}
.mq-palco.trocando #mqCanvas{opacity:.15}
.mq-pontos{position:absolute;inset:0;pointer-events:none;transition:opacity .3s}
.mq-palco.trocando .mq-pontos{opacity:0}
.mq-p{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:0;padding:0;background:var(--verm);cursor:pointer;pointer-events:auto;box-shadow:0 0 0 4px rgba(222,31,40,.3),0 6px 16px rgba(0,0,0,.5);transition:opacity .3s,background .2s,box-shadow .2s}
.mq-p::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--verm-logo);animation:mqOnda 2.2s ease-out infinite}
@media (max-width:760px){ .mq-p::before{inset:-3px;animation-name:mqOndaCel} }
@keyframes mqOndaCel{from{transform:scale(.9);opacity:.85}to{transform:scale(1.4);opacity:0}}
.mq-p::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;transition:transform .2s}
.mq-p:hover,.mq-p.on{background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.25),0 6px 16px rgba(0,0,0,.5)}
.mq-p:hover::after,.mq-p.on::after{background:var(--verm);transform:scale(1.15)}
.mq-p.atras{opacity:.35}
.mq-p.oculto,.mq-p.colide{opacity:0;pointer-events:none}
@keyframes mqOnda{from{transform:scale(.9);opacity:.9}to{transform:scale(1.9);opacity:0}}
.mq-carimbo{position:absolute;left:20px;top:18px;display:grid;gap:2px;font-size:.74rem;color:rgba(255,255,255,.55);pointer-events:none;max-width:calc(100% - 270px)}
.mq-carimbo b{font-family:var(--fd);font-stretch:110%;font-size:1rem;color:#fff;line-height:1.25}
.mq-ctrl{position:absolute;right:14px;top:14px;display:flex;gap:8px}
.mq-b{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:0;background:rgba(13,17,23,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-family:var(--fb);font-size:.84rem;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.mq-b svg{width:17px;height:17px}
#mqDentro[aria-pressed="true"]{background:var(--verm);box-shadow:0 0 22px rgba(222,31,40,.6)}
.mq-espera{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--verm-logo);opacity:0;pointer-events:none;transition:opacity .2s}
.mq-palco.trocando .mq-espera{opacity:1;animation:mqGira .8s linear infinite}
@keyframes mqGira{to{transform:rotate(360deg)}}
.mq-semgl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}
.mq-semgl img{width:100%;max-height:70%;object-fit:contain}
.mq-semgl p{max-width:34ch;color:rgba(255,255,255,.72);font-size:.92rem}

.mq-lado{display:flex;flex-direction:column;gap:12px;min-width:0}
.mq-cores{padding:14px 16px;border-radius:var(--raio);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mq-rot{display:block;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:9px}
.mq-chips{display:flex;flex-wrap:wrap;gap:7px}
.mq-cor{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border-radius:999px;border:0;background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);font-family:var(--fb);font-size:.8rem;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mq-cor i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.mq-cor.on{background:#fff;color:var(--tinta)}
.mq-zonas{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mq-z{display:flex;align-items:center;gap:9px;min-height:40px;padding:8px 12px;border-radius:12px;border:0;background:rgba(255,255,255,.04);color:rgba(255,255,255,.82);font-family:var(--fb);font-size:.82rem;font-weight:550;text-align:left;white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .2s,color .2s}
.mq-z::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--verm-logo);box-shadow:0 0 0 3px rgba(238,46,52,.18)}
.mq-z:hover{background:rgba(255,255,255,.09);color:#fff}
.mq-z.on{background:var(--verm);color:#fff;box-shadow:none}
.mq-z.on::before{background:#fff;box-shadow:none}
.mq-card{flex:1;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--raio);background:linear-gradient(160deg,rgba(222,31,40,.18),rgba(255,255,255,.03) 60%);box-shadow:inset 0 0 0 1px rgba(222,31,40,.35)}
.mq-card.troca{animation:mqFade .4s ease}
@keyframes mqFade{from{opacity:0;transform:translateY(6px)}}
.mq-card h3{margin:0;font-size:1.35rem;font-weight:750;line-height:1.25}
.mq-card p{margin:0;font-size:.92rem;color:rgba(255,255,255,.72);line-height:1.55}
.mq-conta{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:4px}
.mq-conta b{font-family:var(--fd);font-stretch:118%;font-weight:800;font-size:2rem;line-height:1}
.mq-conta span{font-size:.84rem;color:rgba(255,255,255,.66)}
.mq-acoes{display:flex;flex-wrap:wrap;gap:8px}
.mq-acoes .btn{flex:1 1 auto;min-height:46px;padding:0 18px}
.mq-sim{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:0 16px;border-radius:12px;border:0;background:rgba(255,255,255,.06);color:#fff;font-family:var(--fb);font-size:.88rem;font-weight:650;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);transition:background .2s}
.mq-sim:hover{background:rgba(255,255,255,.12)}
.mq-sim span{flex:1}
.mq-sim svg{flex:none;width:18px;height:18px}
.mq-sim svg:first-child{color:var(--verm-logo)}

/* calcareadeira (4 op\0000e7 \0000f5 es e uma cor s\0000f3 ): no computador o palco acompanha a altura do painel, como nas colheitadeiras,
   para as colunas terminarem juntas sem v\0000e3 o no cart\0000e3 o */
@media (min-width:1081px){ .mq[data-maq="calc"] .mq-palco{min-height:420px} }
@media (max-width:1080px){
  /* palco em cima e o painel empilhado embaixo: cor, \0000e1 reas e cart\0000e3 o na largura toda (sem coluna sobrando nem v\0000e3 o no cart\0000e3 o) */
  .mq{grid-template-columns:1fr}
  .mq-zonas{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .mq-card{flex:none}
  .mq-conta{margin-top:2px}
}
@media (max-width:860px){
  .mq-tipo{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .mq-ico{width:72px;height:38px}
  .mq-tt small,.mq-tt .mq-lg{display:none}
  .mq-tt .mq-ct{display:block;font-size:.92rem;white-space:nowrap}
}
@media (max-width:760px){
  .mq-palco{min-height:400px}
  .mq-carimbo{display:none}
  .mq-ctrl{left:10px;right:10px;top:10px;justify-content:space-between}
  .mq-lado{display:flex}
  /* \0000e1 reas: uma fileira que corre para o lado, sem quebrar o nome */
  .mq-zonas{display:flex;gap:6px;overflow-x:auto;margin:0 -24px;padding:2px 24px 6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mq-zonas::-webkit-scrollbar{display:none}
  .mq-z{flex:none;scroll-snap-align:start}
  .mq-card{padding:18px}
  .mq-card h3{font-size:1.2rem}
}
@media (max-width:520px){
  .mq-tipos{gap:8px}
  .mq-tipo{align-items:center;text-align:center;padding:10px 4px}
  .mq-ico{width:58px;height:31px}
  .mq-tt .mq-ct{font-size:.8rem;letter-spacing:-.01em}
  .mq-acoes .btn{flex:1 1 100%}
}
@media (max-width:400px){
  .mq-tipos{grid-template-columns:1fr;gap:6px}
  .mq-tipo{flex-direction:row;align-items:center;text-align:left;padding:8px 14px;min-height:50px}
  .mq-ico{width:54px;height:29px}
  .mq-tt .mq-ct{font-size:.92rem}
  .mq-palco{min-height:360px}
}
@media (max-height:500px) and (max-width:950px){
  .mq-palco{min-height:260px}
}
@media (prefers-reduced-motion:reduce){
  .mq-p::before{animation:none}
  .mq-palco.trocando .mq-espera{animation-duration:2.4s}
}