/* ===========================================================
   SENDme LAB — Monte sua camiseta (/monte/)
   Só esta página carrega este arquivo. Classes com prefixo mt-.
   Marca: preto #0E0E10 · amarelo #FFC107 · branco; âmbar #B07F00 para
   amarelo "legível" em fundo claro; Sora (títulos) + Inter (texto).
   =========================================================== */

:root {
  --mt-preto: #0E0E10;
  --mt-amarelo: #FFC107;
  --mt-amarelo-forte: #F2B300;
  --mt-ambar: #B07F00;          /* amarelo legível no branco: ícones, bordas, textos grandes */
  --mt-ambar-texto: #7A5A00;    /* textos pequenos sobre o amarelinho (contraste AA) */
  --mt-ambar-fundo: #FFF4D1;
  --mt-ambar-borda: #F1D27C;
  --mt-suave: #F7F7F5;
  --mt-linha: #E7E6E1;
  --mt-linha-forte: #CFCDC6;
  --mt-texto: #4A4A52;
  --mt-mudo: #66666E;           /* um tom acima do #74747C da marca para passar AA no fundo suave */
  --mt-wa: #25D366;
  --mt-wa-forte: #1EB955;
  --mt-wa-texto: #04331A;
  --mt-erro: #B42318;
  --mt-erro-fundo: #FEF0EF;
  --mt-ok: #067647;
  --mt-ok-fundo: #ECF8F1;
  --mt-fonte-titulo: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mt-fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mt-sombra-sm: 0 1px 2px rgba(14, 14, 16, .06), 0 1px 3px rgba(14, 14, 16, .05);
  --mt-sombra-md: 0 6px 16px rgba(14, 14, 16, .07), 0 2px 4px rgba(14, 14, 16, .04);
  --mt-sombra-lg: 0 22px 48px rgba(14, 14, 16, .09), 0 6px 14px rgba(14, 14, 16, .05);
  --mt-ease: cubic-bezier(.22, 1, .36, 1);
  --mt-topo-h: 58px;
}
@media (min-width: 1024px) { :root { --mt-topo-h: 66px; } }

/* ---------- base (especificidade zero, para os componentes mandarem) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mt-topo-h) + var(--mt-palco-h, 0px) + 12px); }
:where(.mt-corpo) {
  margin: 0;
  font-family: var(--mt-fonte-texto);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mt-texto);
  background: var(--mt-suave);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
:where(.mt-corpo) :where(h1, h2, h3) { margin: 0; font-family: var(--mt-fonte-titulo); color: var(--mt-preto); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
:where(.mt-corpo) :where(p) { margin: 0; text-wrap: pretty; }
:where(.mt-corpo) :where(img, svg) { display: block; max-width: 100%; }
:where(.mt-corpo) :where(button, input, textarea, select) { font: inherit; color: inherit; }
:where(.mt-corpo) :where(button) { cursor: pointer; background: none; border: 0; padding: 0; margin: 0; }
:where(.mt-corpo) :where(a) { color: inherit; }
:where(.mt-corpo) :where(fieldset) { border: 0; margin: 0; padding: 0; min-width: 0; }
:where(.mt-corpo) :where(legend) { padding: 0; }
:where(.mt-corpo) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.mt-corpo) :where(figure) { margin: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--mt-amarelo); outline-offset: 2px; box-shadow: 0 0 0 2px var(--mt-preto); }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--mt-amarelo); color: var(--mt-preto); }

.mt-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mt-pular {
  position: absolute; left: 12px; top: -64px; z-index: 200;
  padding: 10px 16px; border-radius: 999px; background: var(--mt-preto); color: #fff;
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.mt-pular:focus { top: 10px; }
.mt-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .mt-wrap { padding-inline: 24px; } }

/* ===========================================================
   Topo
   =========================================================== */
.mt-topo {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--mt-linha);
}
.mt-topo__in { display: flex; align-items: center; gap: 6px; height: var(--mt-topo-h); }
.mt-marca { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; text-decoration: none; border-radius: 8px; }
.mt-marca img { width: auto; height: 24px; }
.mt-selo-lab {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px 0 11px; border-radius: 999px;
  background: var(--mt-preto); color: var(--mt-amarelo);
  font: 800 .7rem/1 var(--mt-fonte-titulo); letter-spacing: .16em;
}
.mt-voltar {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px; border-radius: 999px;
  font-size: .88rem; font-weight: 600; color: var(--mt-texto); text-decoration: none;
  transition: background-color .2s, color .2s;
}
.mt-voltar:hover { background: var(--mt-suave); color: var(--mt-preto); }
.mt-wa-redondo {
  display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--mt-wa); color: var(--mt-wa-texto); box-shadow: 0 6px 16px rgba(37, 211, 102, .35);
  transition: transform .2s var(--mt-ease), background-color .2s;
}
.mt-wa-redondo:hover { transform: translateY(-2px) scale(1.04); background: var(--mt-wa-forte); }
.mt-progresso { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.mt-progresso i { display: block; width: var(--p, 0%); height: 100%; border-radius: 0 3px 3px 0; background: var(--mt-amarelo); transition: width .6s var(--mt-ease); }
@media (min-width: 640px) { .mt-marca img { height: 28px; } .mt-selo-lab { height: 26px; } }
@media (max-width: 419px) { .mt-some-p { display: none; } .mt-voltar { padding: 0 10px; } }

/* ===========================================================
   Abertura + etapas
   =========================================================== */
.mt-hero {
  padding: 22px 0 22px; text-align: center; border-bottom: 1px solid var(--mt-linha);
  background:
    radial-gradient(55% 90% at 94% 0%, rgba(255, 193, 7, .2), transparent 70%),
    radial-gradient(40% 70% at 0% 100%, rgba(255, 193, 7, .08), transparent 70%),
    #fff;
}
.mt-pilula {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: var(--mt-ambar-fundo); color: var(--mt-ambar-texto);
  font: 700 .72rem/1.2 var(--mt-fonte-texto); letter-spacing: .12em; text-transform: uppercase;
}
.mt-pilula--escura { background: var(--mt-preto); color: var(--mt-amarelo); }
.mt-hero h1 { max-width: 19ch; margin: 12px auto 10px; font-size: clamp(1.65rem, 6vw, 3.1rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.mt-hl {
  padding: 0 .06em;
  background: linear-gradient(to top, rgba(255, 193, 7, .62) 0 34%, transparent 34%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mt-hero p { max-width: 56ch; margin-inline: auto; font-size: clamp(.93rem, 1.7vw, 1.1rem); }

.mt-etapas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 780px; margin: 20px auto 0; }
.mt-etapa { position: relative; }
.mt-etapa:not(:first-child)::before {
  content: ""; position: absolute; top: 15px; right: calc(50% + 18px); width: calc(100% - 36px); height: 2px;
  border-radius: 2px; background: var(--mt-linha-forte); transition: background-color .6s;
}
.mt-etapa.is-feita + .mt-etapa::before { background: var(--mt-preto); }
.mt-etapa button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0 2px; border-radius: 12px; }
.mt-etapa button:disabled { cursor: default; }
.mt-etapa__bola {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--mt-linha-forte); background: #fff; color: #77777F;
  font: 700 .82rem var(--mt-fonte-titulo);
  transition: background-color .4s, border-color .4s, color .4s, box-shadow .4s, transform .4s var(--mt-ease);
}
.mt-etapa__ok { display: none; }
.mt-etapa.is-feita .mt-etapa__bola { background: var(--mt-preto); border-color: var(--mt-preto); color: var(--mt-amarelo); }
.mt-etapa.is-feita .mt-etapa__num { display: none; }
.mt-etapa.is-feita .mt-etapa__ok { display: block; }
.mt-etapa.is-atual .mt-etapa__bola { background: var(--mt-amarelo); border-color: var(--mt-preto); color: var(--mt-preto); box-shadow: 0 0 0 5px rgba(255, 193, 7, .3); transform: scale(1.06); }
.mt-etapa__nome { display: none; font: 600 .72rem/1.2 var(--mt-fonte-titulo); color: var(--mt-mudo); }
.mt-etapa.is-atual .mt-etapa__nome { color: var(--mt-preto); }
.mt-etapa button:not(:disabled):hover .mt-etapa__bola { border-color: var(--mt-preto); transform: scale(1.08); }
@media (min-width: 640px) {
  .mt-etapa__bola { width: 38px; height: 38px; font-size: .9rem; }
  .mt-etapa:not(:first-child)::before { top: 18px; right: calc(50% + 22px); width: calc(100% - 44px); }
  .mt-etapa__nome { display: block; font-size: .78rem; }
}

/* ===========================================================
   Área do configurador
   =========================================================== */
.mt-area { background: var(--mt-suave); }
.mt-app { display: flex; flex-direction: column; gap: 14px; padding-block: 12px 40px; outline: none; }

/* prévia: fixa no topo enquanto escolhe (celular), coluna da direita fixa (computador) */
.mt-palco { position: sticky; top: var(--mt-topo-h); z-index: 30; margin-inline: -16px; padding: 6px 16px 10px; background: var(--mt-suave); }
.mt-app[data-passo="5"] .mt-palco,
.mt-app[data-passo="6"] .mt-palco,
.mt-app[data-estado="falha"] .mt-palco { position: relative; top: auto; }
@media (max-height: 600px) { .mt-palco { position: relative; top: auto; } }
@media (min-width: 640px) { .mt-palco { margin-inline: -24px; padding-inline: 24px; } }

.mt-preview {
  position: relative; padding: 8px 8px 6px; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--mt-linha); box-shadow: var(--mt-sombra-md);
  background: radial-gradient(75% 65% at 50% 42%, #FFFFFF 0%, #F0EFEA 100%);
}
.mt-preview__topo {
  position: absolute; z-index: 2; top: 8px; left: 8px; right: 8px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none;
}
.mt-preview__topo > * { pointer-events: auto; }
.mt-cor-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 58%; min-height: 30px; padding: 4px 11px 4px 6px;
  border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid var(--mt-linha); box-shadow: var(--mt-sombra-sm);
  font-size: .76rem; font-weight: 700; color: var(--mt-preto);
}
.mt-cor-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-cor-chip i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #E6E5E0; box-shadow: inset 0 0 0 1px rgba(14, 14, 16, .2); transition: background-color .45s; }
.mt-cor-chip.is-vazio i { background: repeating-linear-gradient(45deg, #DCDBD5 0 3px, #fff 3px 6px); }
.mt-cor-chip.is-previa span { font-style: italic; }
.mt-vista-tgl { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .94); border: 1px solid var(--mt-linha); box-shadow: var(--mt-sombra-sm); }
.mt-vista-tgl button { min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--mt-texto); transition: background-color .25s, color .25s; }
.mt-vista-tgl button[aria-pressed="true"] { background: var(--mt-preto); color: #fff; }

.mt-vistas { display: grid; grid-template-columns: 1fr; perspective: 900px; }
.mt-vista { display: none; }
.mt-vista.is-ativa { display: block; }
.mt-vista__arte { display: flex; align-items: center; justify-content: center; width: 100%; }
.mt-vista__arte .mt-svg { width: auto; height: clamp(140px, 28vh, 240px); max-width: 100%; }
.mt-vista figcaption { min-height: 1.3em; margin-top: 2px; text-align: center; font-size: .74rem; font-weight: 600; color: var(--mt-mudo); }
.mt-vistas.is-virando .mt-vista.is-ativa { transform: rotateY(90deg); transition: transform .15s ease-in; }
.mt-vista.mt-virou { animation: mtVira .3s var(--mt-ease); }
@keyframes mtVira { from { transform: rotateY(-90deg); } to { transform: none; } }
@media (min-width: 640px) {
  .mt-vista-tgl { display: none; }
  .mt-vistas { grid-template-columns: 1fr 1fr; gap: 4px; }
  .mt-vista, .mt-vista.is-ativa { display: block; }
  .mt-vista__arte .mt-svg { height: clamp(160px, 26vh, 250px); }
}

/* ---------- desenho da camiseta ---------- */
.mt-svg { display: block; overflow: visible; }
.mt-svg__base { fill: var(--mt-cor, #E6E5E0); transition: fill .5s ease; }
.mt-svg__manga { fill: rgba(14, 14, 16, .045); }
.mt-svg__contorno { fill: none; stroke: var(--mt-contorno, rgba(14, 14, 16, .4)); stroke-width: 2.2; stroke-linejoin: round; transition: stroke .5s ease; }
.mt-svg__costura,
.mt-svg__pesponto { fill: none; stroke: var(--mt-costura, rgba(14, 14, 16, .3)); stroke-width: 1.3; stroke-dasharray: 3.4 2.6; stroke-linecap: round; transition: stroke .5s ease; }
.mt-svg__dobra { fill: none; stroke: var(--mt-dobra, rgba(14, 14, 16, .09)); stroke-width: 3.2; stroke-linecap: round; transition: stroke .5s ease; }
.mt-svg__buraco { fill: var(--mt-cor-int, #B9B8B3); stroke: var(--mt-contorno, rgba(14, 14, 16, .4)); stroke-width: 1.4; transition: fill .5s ease, stroke .5s ease; }
.mt-svg__rib-int { fill: var(--mt-cor-rib-int, #C9C8C3); stroke: var(--mt-contorno, rgba(14, 14, 16, .4)); stroke-width: 1.2; stroke-linejoin: round; transition: fill .5s ease, stroke .5s ease; }
.mt-svg__rib { fill: var(--mt-cor-rib, #DCDBD6); stroke: var(--mt-contorno, rgba(14, 14, 16, .4)); stroke-width: 1.6; stroke-linejoin: round; transition: fill .5s ease, stroke .5s ease; }
.mt-svg__rib-textura { fill: none; stroke: var(--mt-dobra, rgba(14, 14, 16, .09)); stroke-width: 6.5; stroke-dasharray: 1 2.2; transition: stroke .5s ease; }
.mt-svg__etiqueta { fill: #FFFFFF; opacity: .92; }
.mt-svg__est { transition: opacity .35s ease; }
.mt-svg__est.is-off { opacity: 0; }
.mt-svg__faixas rect { transition: fill .45s ease; }
.mt-svg__est-area { fill: none; stroke: var(--mt-costura, rgba(14, 14, 16, .3)); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .85; }
.mt-vistas.mt-surge .mt-svg__peca { animation: mtSurge .45s var(--mt-ease); transform-origin: 50% 60%; transform-box: fill-box; }
@keyframes mtSurge { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* desenhos pequenos (cartões) */
.mt-mini { width: 100%; height: 100%; overflow: visible; }
.mt-mini__corpo { fill: #fff; stroke: var(--mt-preto); stroke-width: 9; stroke-linejoin: round; transition: fill .3s; }
.mt-mini__buraco { fill: #D9D8D2; stroke: var(--mt-preto); stroke-width: 6; }
.mt-mini__gola { fill: #fff; stroke: var(--mt-preto); stroke-width: 7; stroke-linejoin: round; transition: fill .3s; }
.mt-mini__est { fill: #E2E1DB; stroke: var(--mt-preto); stroke-width: 8; transition: fill .3s; }

/* ---------- resumo (computador) ---------- */
.mt-resumo { display: none; }
.mt-resumo__t { margin-bottom: 8px; font-size: 1.02rem; }
.mt-resumo__lista { display: grid; gap: 1px; }
.mt-resumo__item {
  display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  width: 100%; padding: 7px 8px; border-radius: 10px; text-align: left; font-size: .86rem;
}
button.mt-resumo__item { transition: background-color .2s; }
button.mt-resumo__item:hover { background: var(--mt-suave); }
.mt-resumo__rot { font-size: .76rem; font-weight: 600; color: var(--mt-mudo); }
.mt-resumo__val { font-weight: 600; line-height: 1.35; color: var(--mt-preto); overflow-wrap: anywhere; }
.mt-resumo__val em { font-style: italic; font-weight: 500; color: var(--mt-mudo); }
.mt-resumo__cor { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(14, 14, 16, .22); vertical-align: -1px; }
.mt-resumo__alerta { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--mt-ambar-fundo); color: var(--mt-ambar-texto); font-size: .68rem; font-weight: 700; vertical-align: 1px; }
.mt-resumo__edit { font-size: .72rem; font-weight: 700; color: var(--mt-ambar-texto); opacity: 0; transition: opacity .2s; }
button.mt-resumo__item:hover .mt-resumo__edit,
button.mt-resumo__item:focus-visible .mt-resumo__edit { opacity: 1; }
@media (hover: none) { .mt-resumo__edit { opacity: 1; } }
.mt-resumo__nota { margin-top: 10px; font-size: .74rem; color: var(--mt-mudo); }

.mt-estimativa { position: relative; margin-top: 12px; padding: 14px 16px; border-radius: 18px; background: var(--mt-preto); color: #fff; }
.mt-estimativa__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mt-estimativa__rot { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .74); }
.mt-badge-exemplo {
  display: inline-flex; padding: 3px 9px; border-radius: 999px;
  background: var(--mt-ambar-fundo); color: var(--mt-ambar-texto); border: 1px solid var(--mt-ambar-borda);
  font-size: .68rem; font-weight: 700; line-height: 1.3;
}
.mt-estimativa__valor { position: relative; display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.mt-estimativa__total { font: 800 clamp(1.6rem, 2.4vw, 2rem)/1.1 var(--mt-fonte-titulo); letter-spacing: -.02em; color: var(--mt-amarelo); font-variant-numeric: tabular-nums; }
.mt-estimativa__unit { margin-top: 2px; font-size: .82rem; color: rgba(255, 255, 255, .82); }
.mt-estimativa[data-modo="sem-tecido"] .mt-estimativa__total,
.mt-estimativa[data-modo="carregando"] .mt-estimativa__total { color: rgba(255, 255, 255, .5); }
.mt-estimativa[data-modo="oculto"] .mt-estimativa__valor,
.mt-estimativa[data-modo="oculto"] .mt-estimativa__unit { display: none; }
.mt-estimativa__oculto { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; font-size: .86rem; color: rgba(255, 255, 255, .84); }
.mt-estimativa__oculto svg { flex: none; margin-top: 2px; color: var(--mt-wa); }
.mt-estimativa__oculto b { display: block; margin-bottom: 2px; font: 700 1.02rem/1.25 var(--mt-fonte-titulo); color: var(--mt-amarelo); }
.mt-calc { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .14); }
.mt-calc summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; border-radius: 6px;
  font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .88); cursor: pointer; list-style: none;
}
.mt-calc summary::-webkit-details-marker { display: none; }
.mt-calc summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.mt-calc[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.mt-calc__linhas { display: grid; gap: 4px; margin-top: 6px; font-size: .8rem; }
.mt-calc__linhas li { display: flex; justify-content: space-between; gap: 12px; }
.mt-calc__linhas li b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-estimativa .mt-calc__linhas li { color: rgba(255, 255, 255, .84); }
.mt-calc__linhas li.is-sub { padding-top: 4px; border-top: 1px dashed rgba(255, 255, 255, .22); }
.mt-calc__linhas li.is-total { font-weight: 700; color: #fff; }
.mt-calc__linhas li.is-desc b { color: #9BE3B4; }

/* bolha "+ R$" quando a estimativa muda */
.mt-delta-ancora { position: relative; display: inline-block; width: 0; height: 0; pointer-events: none; }
.mt-delta {
  position: absolute; left: 0; bottom: 4px; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  font: 700 .74rem/1.2 var(--mt-fonte-texto); animation: mtDelta 1.4s var(--mt-ease) forwards;
}
.mt-delta.is-mais { background: var(--mt-amarelo); color: var(--mt-preto); }
.mt-delta.is-menos { background: #fff; color: var(--mt-preto); box-shadow: inset 0 0 0 1px var(--mt-linha-forte); }
@keyframes mtDelta {
  0% { opacity: 0; transform: translateY(6px) scale(.9); }
  18% { opacity: 1; transform: translateY(-4px) scale(1); }
  75% { opacity: 1; transform: translateY(-12px); }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* ---------- computador: duas colunas ---------- */
@media (min-width: 1024px) {
  .mt-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); gap: 28px; align-items: start; padding-block: 28px 72px; }
  .mt-palco {
    grid-column: 2; grid-row: 1; position: sticky !important; top: calc(var(--mt-topo-h) + 14px) !important;
    margin: -4px; padding: 4px; background: none; z-index: 1;
    max-height: calc(100vh - var(--mt-topo-h) - 24px); overflow-y: auto; scrollbar-width: thin;
  }
  .mt-passos { grid-column: 1; grid-row: 1; }
  .mt-preview { padding: 12px 12px 8px; }
  .mt-preview__topo { top: 12px; left: 12px; right: 12px; }
  .mt-vistas { padding-top: 26px; }
  .mt-vista__arte .mt-svg { width: 100%; height: auto; max-height: none; aspect-ratio: 1; }
  .mt-resumo { display: block; margin-top: 14px; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--mt-linha); box-shadow: var(--mt-sombra-md); }
}

/* ===========================================================
   Etapas
   =========================================================== */
.mt-passos { min-width: 0; }
.mt-passo { padding: 20px 14px 22px; border-radius: 24px; background: #fff; border: 1px solid var(--mt-linha); box-shadow: var(--mt-sombra-lg); }
@media (min-width: 400px) { .mt-passo { padding-inline: 18px; } }
@media (min-width: 640px) { .mt-passo { padding: 28px 28px 30px; } }
.mt-passo__topo { margin-bottom: 18px; }
.mt-passo__n {
  display: inline-flex; padding: 5px 11px; border-radius: 999px; background: var(--mt-preto); color: var(--mt-amarelo);
  font: 700 .68rem/1.2 var(--mt-fonte-texto); letter-spacing: .12em; text-transform: uppercase;
}
.mt-passo h2 { margin: 10px 0 6px; font-size: clamp(1.25rem, 3.2vw, 1.65rem); font-weight: 700; outline: none; box-shadow: none; }
.mt-passo__sub { max-width: 62ch; font-size: .94rem; }
.mt-obrig-nota { display: block; margin-top: 4px; font-size: .8rem; color: var(--mt-mudo); }
.mt-entra-frente { animation: mtEntraFrente .45s var(--mt-ease); }
.mt-entra-tras { animation: mtEntraTras .45s var(--mt-ease); }
@keyframes mtEntraFrente { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes mtEntraTras { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

.mt-passo__aviso { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 11px 14px; border-radius: 14px; font-size: .88rem; font-weight: 600; line-height: 1.45; }
.mt-passo__aviso svg { flex: none; margin-top: 1px; }
.mt-passo__aviso.is-erro { background: var(--mt-erro-fundo); color: var(--mt-erro); }
.mt-passo__aviso.is-info { background: var(--mt-ambar-fundo); color: var(--mt-ambar-texto); }
.mt-passo__aviso.is-ok { background: var(--mt-ok-fundo); color: var(--mt-ok); }
.mt-sacode { animation: mtSacode .5s ease; }
@keyframes mtSacode { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.mt-dica { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--mt-suave); font-size: .86rem; line-height: 1.5; }
.mt-dica svg { flex: none; margin-top: 1px; color: var(--mt-ambar); }
.mt-dica--ok { margin: 0 0 14px; background: var(--mt-ok-fundo); color: var(--mt-ok); font-weight: 600; }
.mt-dica--ok svg { color: var(--mt-ok); }
.mt-vazio { display: flex; gap: 10px; align-items: flex-start; padding: 16px; border-radius: 16px; border: 1.5px dashed var(--mt-linha-forte); font-size: .92rem; }
.mt-vazio svg { flex: none; margin-top: 2px; color: var(--mt-ambar); }
.mt-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1.3; }
.mt-badge--min { margin-top: 8px; background: var(--mt-preto); color: #fff; }
.mt-badge--esp { background: var(--mt-ambar-fundo); color: var(--mt-ambar-texto); border: 1px solid var(--mt-ambar-borda); }

/* ---------- cartões de escolha (rádio) ---------- */
.mt-opcoes { display: grid; gap: 12px; }
@media (min-width: 640px) { .mt-opcoes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mt-opcao { position: relative; display: block; min-width: 0; cursor: pointer; }
.mt-opcao__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.mt-opcao__corpo {
  position: relative; display: flex; gap: 14px; height: 100%; padding: 16px 44px 16px 16px;
  border: 1.5px solid var(--mt-linha); border-radius: 18px; background: #fff;
  transition: border-color .2s, box-shadow .25s, transform .25s var(--mt-ease), background-color .2s;
}
.mt-opcao:hover .mt-opcao__corpo { border-color: var(--mt-linha-forte); box-shadow: var(--mt-sombra-md); transform: translateY(-2px); }
.mt-opcao__input:checked + .mt-opcao__corpo { border-color: var(--mt-preto); background: #FFFDF4; box-shadow: 0 0 0 1px var(--mt-preto), 0 14px 30px rgba(14, 14, 16, .1); }
.mt-opcao__input:focus-visible + .mt-opcao__corpo { outline: 3px solid var(--mt-amarelo); outline-offset: 3px; border-color: var(--mt-preto); }
.mt-opcao__check {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--mt-linha-forte); background: #fff; color: transparent;
  transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--mt-ease);
}
.mt-opcao__input:checked + .mt-opcao__corpo .mt-opcao__check { background: var(--mt-amarelo); border-color: var(--mt-preto); color: var(--mt-preto); transform: scale(1.1); }
.mt-opcao__nome { display: block; font: 700 1.02rem/1.25 var(--mt-fonte-titulo); letter-spacing: -.01em; color: var(--mt-preto); }
.mt-opcao__desc { display: block; margin-top: 3px; font-size: .86rem; line-height: 1.45; }

/* modelagem */
.mt-opcao--mod .mt-opcao__corpo { align-items: flex-start; }
.mt-mod__desenho { flex: none; display: grid; place-items: center; width: 68px; height: 68px; padding: 6px; border-radius: 14px; background: var(--mt-suave); }
.mt-opcao--mod .mt-opcao__input:checked + .mt-opcao__corpo .mt-mini__corpo,
.mt-opcao--mod .mt-opcao__input:checked + .mt-opcao__corpo .mt-mini__gola { fill: var(--mt-amarelo); }
.mt-mod__txt { min-width: 0; }
.mt-mod__det { display: block; }
.mt-tams-lista { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.mt-tams-lista i { min-width: 30px; padding: 3px 7px; border-radius: 8px; border: 1px solid var(--mt-linha); background: var(--mt-suave); font-style: normal; font-size: .72rem; font-weight: 700; color: var(--mt-preto); text-align: center; }
.mt-tams-lista i.is-plus { background: var(--mt-ambar-fundo); border-color: var(--mt-ambar-borda); color: var(--mt-ambar-texto); }
.mt-nota-plus { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: .78rem; font-weight: 600; line-height: 1.4; color: var(--mt-ambar-texto); }
.mt-nota-plus svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }

/* tecido */
.mt-escala { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mt-mudo); }
.mt-escala i { flex: 1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #EDEBE4, var(--mt-preto)); }
.mt-opcao--tec .mt-opcao__corpo { flex-direction: column; gap: 0; }
.mt-tec__topo { display: flex; align-items: flex-end; gap: 8px; min-height: 22px; margin-bottom: 10px; }
.mt-nivel { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.mt-nivel i { width: 7px; height: var(--h); border-radius: 2px; background: var(--mt-linha); }
.mt-nivel i.on { background: var(--mt-preto); }
.mt-opcao__input:checked + .mt-opcao__corpo .mt-nivel i.is-topo { background: var(--mt-amarelo); box-shadow: inset 0 0 0 1.5px var(--mt-preto); }
.mt-tec__nivel { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mt-mudo); }
.mt-tec__det { display: block; }
.mt-tec__ficha { display: block; margin-top: 6px; font-size: .78rem; font-weight: 600; color: var(--mt-mudo); }
.mt-tec__cores { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.mt-tec__bolas { display: inline-flex; align-items: center; }
.mt-tec__bolas i { width: 16px; height: 16px; margin-left: -3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px rgba(14, 14, 16, .2); }
.mt-tec__bolas i:first-child { margin-left: 0; }
.mt-tec__bolas em { margin-left: 5px; font-style: normal; font-size: .7rem; font-weight: 700; color: var(--mt-mudo); }
.mt-tec__cores small { font-size: .76rem; font-weight: 600; color: var(--mt-mudo); }
.mt-tec__preco { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--mt-linha); font-size: .84rem; }
.mt-tec__preco b { font: 800 1.05rem var(--mt-fonte-titulo); color: var(--mt-preto); }

/* ---------- cores ---------- */
.mt-cor-atual { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; padding: 10px 12px; border-radius: 16px; background: var(--mt-suave); border: 1px solid var(--mt-linha); }
.mt-cor-atual__amostra { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(14, 14, 16, .18); }
.mt-cor-atual__amostra.is-vazia { background: repeating-linear-gradient(45deg, #E3E2DC 0 4px, #fff 4px 8px); }
.mt-cor-atual__txt { display: grid; min-width: 0; margin-right: auto; }
.mt-cor-atual__txt small { font-size: .72rem; font-weight: 600; color: var(--mt-mudo); }
.mt-cor-atual__txt b { font: 700 1.05rem/1.2 var(--mt-fonte-titulo); color: var(--mt-preto); }
.mt-cor-atual__extra { font-size: .8rem; font-weight: 700; color: var(--mt-preto); }
.mt-cores__rot { display: block; margin-bottom: 10px; font-size: .86rem; }
.mt-cores__rot b { color: var(--mt-preto); }
.mt-cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px 6px; }
.mt-cor { position: relative; display: block; min-width: 0; text-align: center; cursor: pointer; }
.mt-cor--outra { width: 100%; border-radius: 16px; }
.mt-cor__corpo { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 10px 4px; border: 1.5px solid transparent; border-radius: 16px; transition: background-color .2s, border-color .2s; }
.mt-cor:hover .mt-cor__corpo { background: var(--mt-suave); }
.mt-cor__amostra {
  position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; overflow: hidden;
  background: var(--c); color: var(--tinta);
  box-shadow: inset 0 0 0 1px rgba(14, 14, 16, .12), 0 6px 14px rgba(14, 14, 16, .14);
  transition: transform .3s var(--mt-ease), box-shadow .3s;
}
.mt-cor__amostra::before { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .12)); }
.mt-cor__amostra::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .045) 0 1px, transparent 1px 3px); }
.mt-cor__amostra.is-clara { box-shadow: inset 0 0 0 1px rgba(14, 14, 16, .24), 0 6px 14px rgba(14, 14, 16, .1); }
.mt-cor__amostra svg { position: relative; z-index: 1; width: 22px; height: 22px; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s var(--mt-ease); }
.mt-cor:hover .mt-cor__amostra { transform: translateY(-2px) scale(1.04); }
.mt-opcao__input:checked + .mt-cor__corpo .mt-cor__amostra { transform: scale(1.06); box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--mt-preto), 0 12px 24px rgba(14, 14, 16, .2); }
.mt-opcao__input:checked + .mt-cor__corpo .mt-cor__amostra svg { opacity: 1; transform: none; }
.mt-opcao__input:focus-visible + .mt-cor__corpo { outline: 3px solid var(--mt-amarelo); outline-offset: 1px; border-color: var(--mt-preto); }
.mt-cor__nome { font-size: .8rem; font-weight: 700; line-height: 1.25; color: var(--mt-preto); overflow-wrap: anywhere; }
.mt-opcao__input:checked + .mt-cor__corpo .mt-cor__nome { text-decoration: underline; text-decoration-color: var(--mt-amarelo); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.mt-cor__extra { font-size: .72rem; font-weight: 700; color: var(--mt-texto); white-space: nowrap; }
.mt-cor .mt-badge--esp { justify-content: center; padding: 2px 6px; font-size: .64rem; text-align: center; }
@media (min-width: 640px) { .mt-cores { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px 8px; } .mt-cor__amostra { width: 66px; height: 66px; } }

.mt-outras { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--mt-linha); }
.mt-outras__tgl {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--mt-linha-forte); background: #fff; font-size: .88rem; font-weight: 700; color: var(--mt-preto); text-align: left;
  transition: border-color .2s, background-color .2s;
}
@media (min-width: 640px) { .mt-outras__tgl { display: inline-flex; width: auto; } }
.mt-outras__tgl:hover { border-color: var(--mt-preto); }
.mt-outras__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--mt-amarelo); color: var(--mt-preto); font-size: .72rem; }
@media (min-width: 640px) { .mt-outras__n { margin-left: 2px; } }
.mt-outras__seta { display: inline-flex; transition: transform .25s; }
.mt-outras__tgl[aria-expanded="true"] .mt-outras__seta { transform: rotate(180deg); }
.mt-outras__lista { display: grid; gap: 14px; margin-top: 14px; }
.mt-outras__grupo { padding: 14px 12px 10px; border-radius: 18px; background: var(--mt-suave); border: 1px solid var(--mt-linha); }
.mt-outras__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .92rem; color: var(--mt-preto); }
.mt-outras__cab b { font-family: var(--mt-fonte-titulo); }
.mt-outras__cab span { font-size: .74rem; font-weight: 600; color: var(--mt-mudo); }
.mt-outras__cab .mt-outras__delta { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--mt-linha); color: var(--mt-preto); font-weight: 700; }
.mt-outras__nota { margin: 2px 0 8px; font-size: .78rem; font-weight: 600; color: var(--mt-ambar-texto); }
.mt-cores--outras .mt-cor:hover .mt-cor__corpo { background: #fff; }

/* ---------- estampa ---------- */
.mt-ests { display: grid; gap: 14px; }
.mt-est { overflow: hidden; border: 1.5px solid var(--mt-linha); border-radius: 20px; background: #fff; transition: border-color .25s, box-shadow .25s; }
.mt-est:not(.is-off) { border-color: var(--mt-preto); box-shadow: var(--mt-sombra-md); }
.mt-est__topo { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; }
.mt-est:not(.is-off) .mt-est__topo { background: #FFFDF4; border-bottom: 1px solid var(--mt-linha); }
.mt-est__ico { flex: none; width: 44px; height: 44px; padding: 4px; border-radius: 12px; background: var(--mt-suave); }
.mt-est__tit { display: grid; min-width: 0; margin-right: auto; }
.mt-est__tit b { font: 700 1.05rem/1.2 var(--mt-fonte-titulo); color: var(--mt-preto); }
.mt-est__tit small { font-size: .78rem; font-weight: 600; color: var(--mt-mudo); }
.mt-est__corpo { display: grid; gap: 16px; padding: 14px 12px; }
.mt-est__rot { display: block; margin-bottom: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--mt-preto); }
legend.mt-est__rot { float: left; width: 100%; }
.mt-switch { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; border-radius: 999px; }
.mt-switch__trilho, .mt-troca__trilho { position: relative; display: block; flex: none; width: 48px; height: 28px; border-radius: 999px; background: #8A8983; transition: background-color .25s; }
.mt-switch__trilho span, .mt-troca__trilho span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(14, 14, 16, .25); transition: transform .3s var(--mt-ease), background-color .25s; }
.mt-switch[aria-checked="true"] .mt-switch__trilho { background: var(--mt-preto); }
.mt-switch[aria-checked="true"] .mt-switch__trilho span { transform: translateX(20px); background: var(--mt-amarelo); }

.mt-tams { display: grid; gap: 8px; clear: both; }
.mt-opcao--tam .mt-opcao__corpo { align-items: center; gap: 12px; padding: 10px 42px 10px 10px; }
.mt-opcao--tam .mt-opcao__check { top: 50%; margin-top: -12px; }
.mt-tam__mini { flex: none; width: 48px; height: 48px; }
.mt-opcao--tam .mt-opcao__input:checked + .mt-opcao__corpo .mt-mini__est { fill: var(--mt-amarelo); }
.mt-tam__txt { display: grid; min-width: 0; }
.mt-opcao--tam .mt-opcao__nome { font-size: .95rem; }
.mt-opcao--tam .mt-opcao__desc { margin-top: 1px; font-size: .78rem; line-height: 1.35; }
.mt-tam__info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; }
.mt-tam__medida { padding: 2px 8px; border-radius: 999px; background: var(--mt-suave); font-size: .72rem; font-weight: 700; color: var(--mt-preto); white-space: nowrap; }
.mt-tam__preco { font-size: .8rem; font-weight: 700; color: var(--mt-preto); white-space: nowrap; }
@media (min-width: 560px) {
  .mt-tams { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .mt-opcao--tam .mt-opcao__corpo { flex-direction: column; gap: 4px; padding: 14px 10px 12px; text-align: center; }
  .mt-opcao--tam .mt-opcao__check { top: 10px; right: 10px; margin-top: 0; }
  .mt-tam__mini { width: 58px; height: 58px; }
  .mt-tam__info { justify-content: center; }
}

.mt-est__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mt-contador { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--mt-suave); border: 1px solid var(--mt-linha); }
.mt-contador__b {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--mt-linha-forte);
  font: 700 1.3rem/1 var(--mt-fonte-texto); color: var(--mt-preto);
  transition: background-color .2s, border-color .2s, transform .15s, opacity .2s;
}
.mt-contador__b:hover:not(:disabled) { border-color: var(--mt-preto); }
.mt-contador__b:active:not(:disabled) { transform: scale(.92); }
.mt-contador__b:disabled { opacity: .38; cursor: not-allowed; }
.mt-contador__v { min-width: 74px; text-align: center; font: 700 .95rem var(--mt-fonte-titulo); color: var(--mt-preto); font-variant-numeric: tabular-nums; }
.mt-est__paleta { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.mt-est__paleta i { width: 18px; height: 18px; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(14, 14, 16, .2); animation: mtPop .3s var(--mt-ease) both; }
@keyframes mtPop { from { opacity: 0; transform: scale(.4); } }
.mt-est__preco-cor { display: block; margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--mt-texto); }

/* ---------- quantidade ---------- */
.mt-qtd-bloco { display: grid; gap: 10px; }
.mt-qtd-bloco .mt-est__rot { margin-bottom: 0; }
.mt-qtd { display: flex; align-items: center; gap: 10px; }
.mt-qtd__campo { position: relative; flex: 1; max-width: 230px; }
.mt-qtd__input {
  width: 100%; height: 58px; padding: 0 66px 0 18px; border: 1.5px solid var(--mt-linha-forte); border-radius: 16px; background: #fff;
  font: 800 1.5rem var(--mt-fonte-titulo); color: var(--mt-preto); font-variant-numeric: tabular-nums;
}
.mt-qtd__input:focus { outline: none; border-color: var(--mt-preto); box-shadow: 0 0 0 4px rgba(255, 193, 7, .5); }
.mt-qtd__input[readonly] { background: var(--mt-suave); }
.mt-qtd__un { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: .86rem; font-weight: 600; color: var(--mt-mudo); pointer-events: none; }
.mt-qtd .mt-contador__b { width: 48px; height: 48px; flex: none; }
.mt-qtd__nota { font-size: .8rem; font-weight: 600; color: var(--mt-mudo); }
.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-chip {
  min-width: 58px; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--mt-linha-forte); background: #fff;
  font-size: .92rem; font-weight: 700; color: var(--mt-preto);
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--mt-ease);
}
.mt-chip:hover:not(:disabled) { border-color: var(--mt-preto); transform: translateY(-1px); }
.mt-chip[aria-pressed="true"] { background: var(--mt-preto); border-color: var(--mt-preto); color: var(--mt-amarelo); }
.mt-chip:disabled { opacity: .45; cursor: not-allowed; }
.mt-aviso-min, .mt-faixas { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 14px; font-size: .86rem; line-height: 1.45; }
.mt-aviso-min svg, .mt-faixas svg { flex: none; margin-top: 1px; }
.mt-aviso-min { background: var(--mt-ambar-fundo); color: var(--mt-ambar-texto); border: 1px solid var(--mt-ambar-borda); }
.mt-faixas { background: var(--mt-suave); }
.mt-faixas svg { color: var(--mt-ambar); }
.mt-faixas b, .mt-aviso-min b { color: inherit; }

.mt-grade-bloco { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--mt-linha); }
.mt-troca { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.mt-troca__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.mt-troca__input:checked + .mt-troca__trilho { background: var(--mt-preto); }
.mt-troca__input:checked + .mt-troca__trilho span { transform: translateX(20px); background: var(--mt-amarelo); }
.mt-troca__input:focus-visible + .mt-troca__trilho { outline: 3px solid var(--mt-amarelo); outline-offset: 2px; box-shadow: 0 0 0 2px var(--mt-preto); }
.mt-troca__txt { display: grid; min-width: 0; }
.mt-troca__txt b { font-size: .95rem; color: var(--mt-preto); }
.mt-troca__txt small { font-size: .8rem; color: var(--mt-mudo); }
.mt-grade { margin-top: 14px; }
.mt-grade__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.mt-grade__cel { display: grid; gap: 4px; padding: 8px; border-radius: 14px; border: 1.5px solid var(--mt-linha); background: #fff; text-align: center; cursor: text; }
.mt-grade__cel:focus-within { border-color: var(--mt-preto); box-shadow: 0 0 0 3px rgba(255, 193, 7, .5); }
.mt-grade__cel.is-plus { background: #FFFCF0; border-color: var(--mt-ambar-borda); }
.mt-grade__tam { display: flex; align-items: center; justify-content: center; gap: 4px; font: 700 .9rem var(--mt-fonte-titulo); color: var(--mt-preto); }
.mt-grade__tam i { font: 700 .58rem var(--mt-fonte-texto); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--mt-ambar-texto); }
.mt-grade__cel input { width: 100%; height: 42px; border: 0; border-radius: 10px; background: var(--mt-suave); text-align: center; font: 700 1.05rem var(--mt-fonte-texto); color: var(--mt-preto); }
.mt-grade__cel input:focus { outline: none; background: #fff; }
.mt-grade__cel input::placeholder { color: #75757D; }
.mt-grade__soma { margin-top: 10px; font-size: .88rem; }
.mt-grade__soma b { color: var(--mt-preto); }

/* ---------- seus dados ---------- */
.mt-campos { display: grid; gap: 14px; }
@media (min-width: 640px) { .mt-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mt-campo--largo { grid-column: 1 / -1; } }
.mt-campo { min-width: 0; }
.mt-campo > label, .mt-modalidades > legend { display: block; margin-bottom: 6px; font-size: .86rem; font-weight: 700; color: var(--mt-preto); }
.mt-obrig { color: var(--mt-ambar); font-weight: 800; }
.mt-opcional { font-weight: 500; color: var(--mt-mudo); }
.mt-campo input, .mt-campo textarea {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--mt-linha-forte); border-radius: 14px; background: #fff;
  font: 500 1rem var(--mt-fonte-texto); color: var(--mt-preto); transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.mt-campo input[type="date"] { min-height: 50px; line-height: 1.4; }
.mt-campo input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.mt-campo textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.mt-campo input::placeholder, .mt-campo textarea::placeholder { color: #75757D; }
.mt-campo input:hover, .mt-campo textarea:hover { border-color: #A8A69F; }
.mt-campo input:focus, .mt-campo textarea:focus { outline: none; border-color: var(--mt-preto); box-shadow: 0 0 0 4px rgba(255, 193, 7, .5); }
.mt-campo input[aria-invalid="true"] { border-color: var(--mt-erro); background: #FFF8F7; }
.mt-erro-campo { margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--mt-erro); }
.mt-prazo { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: var(--mt-suave); font-size: .8rem; line-height: 1.45; }
.mt-prazo svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--mt-ambar); }
.mt-prazo b { color: var(--mt-preto); }
.mt-prazo.is-apertado { background: var(--mt-ambar-fundo); color: var(--mt-ambar-texto); }
.mt-prazo.is-apertado svg { color: var(--mt-ambar-texto); }
.mt-modalidades { margin-top: 4px; }
.mt-opcoes--modal { gap: 10px; }
.mt-opcao--modal .mt-opcao__corpo { padding: 14px 42px 14px 14px; }
.mt-modal__txt { display: grid; gap: 3px; }
.mt-opcao--modal .mt-opcao__nome { font-size: .95rem; }
.mt-opcao--modal .mt-opcao__desc { font-size: .82rem; }
.mt-selo-rec { justify-self: start; margin-bottom: 2px; padding: 2px 8px; border-radius: 999px; background: var(--mt-amarelo); color: var(--mt-preto); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mt-lgpd { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .82rem; color: var(--mt-mudo); }
.mt-lgpd svg { flex: none; color: var(--mt-ok); }
.mt-envio-erro { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--mt-erro-fundo); border: 1px solid #F3B8B2; }
.mt-envio-erro p { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; font-weight: 600; color: var(--mt-erro); }
.mt-envio-erro p svg { flex: none; margin-top: 1px; }
.mt-envio-erro__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.mt-mel { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ===========================================================
   Botões
   =========================================================== */
.mt-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent;
  font: 700 .95rem/1.1 var(--mt-fonte-texto); text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--mt-ease), box-shadow .25s, background-color .2s, color .2s, border-color .2s;
}
.mt-btn:hover { transform: translateY(-2px); }
.mt-btn:active { transform: translateY(0); }
.mt-btn:disabled { cursor: not-allowed; opacity: .65; transform: none; }
.mt-btn svg { flex: none; }
.mt-btn--lg { min-height: 58px; padding: 0 28px; font-size: 1.02rem; }
.mt-btn--cta { background: var(--mt-amarelo); color: var(--mt-preto); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; box-shadow: 0 10px 24px rgba(255, 193, 7, .42); }
.mt-btn--cta:hover { background: var(--mt-amarelo-forte); box-shadow: 0 14px 30px rgba(255, 193, 7, .52); }
.mt-btn--cta::after, .mt-btn--wa::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
}
.mt-btn--cta::after { animation: mtBrilho 3.8s ease-in-out infinite; }
.mt-btn--wa:hover::after { transform: translateX(130%); transition: transform .75s var(--mt-ease); }
@keyframes mtBrilho { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }
.mt-setas { display: inline-flex; margin-left: 2px; }
.mt-setas i { width: 8px; height: 8px; margin-right: 3px; border-top: 2.6px solid currentColor; border-right: 2.6px solid currentColor; opacity: .25; transform: rotate(45deg); animation: mtSeta 1.1s ease-in-out infinite; }
.mt-setas i:nth-child(2) { animation-delay: .18s; }
.mt-setas i:nth-child(3) { animation-delay: .36s; }
@keyframes mtSeta { 0%, 100% { opacity: .25; transform: translateX(0) rotate(45deg); } 40% { opacity: 1; transform: translateX(3px) rotate(45deg); } }
.mt-btn--ghost { background: #fff; color: var(--mt-preto); border-color: var(--mt-linha-forte); }
.mt-btn--ghost:hover { border-color: var(--mt-preto); }
.mt-btn--escuro { background: var(--mt-preto); color: #fff; }
.mt-btn--escuro:hover { background: #2A2A30; }
.mt-btn--wa { background: var(--mt-wa); color: var(--mt-wa-texto); box-shadow: 0 10px 24px rgba(37, 211, 102, .35); }
.mt-btn--wa:hover { background: var(--mt-wa-forte); }
.mt-btn.is-enviando .mt-setas { display: none; }
.mt-btn.is-enviando::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: mtGira .7s linear infinite; }
@keyframes mtGira { to { transform: rotate(360deg); } }

.mt-nav { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.mt-nav__proximo { margin-left: auto; }
@media (min-width: 1024px) { .mt-nav { display: flex; } }
@media (max-width: 1023px) {
  .mt-app[data-passo="6"] .mt-nav { display: flex; flex-direction: column-reverse; align-items: stretch; }
  .mt-app[data-passo="6"] .mt-nav .mt-btn { width: 100%; }
  .mt-app[data-passo="6"] .mt-nav__proximo { margin-left: 0; }
}

/* ---------- carregando / falha ---------- */
.mt-carregando { display: grid; gap: 12px; padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--mt-linha); }
.mt-esqueleto { border-radius: 12px; background: linear-gradient(90deg, #EFEEEA 25%, #F8F7F3 50%, #EFEEEA 75%) 0 0 / 300% 100%; animation: mtEsq 1.4s ease-in-out infinite; }
.mt-esqueleto--t { width: 40%; height: 14px; }
.mt-esqueleto--p { width: 75%; height: 26px; }
.mt-esqueleto--c { height: 92px; border-radius: 18px; }
@keyframes mtEsq { from { background-position: 100% 0; } to { background-position: 0 0; } }
.mt-falha { display: grid; justify-items: start; gap: 10px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--mt-linha); box-shadow: var(--mt-sombra-lg); }
.mt-falha__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mt-ambar-fundo); color: var(--mt-ambar-texto); }
.mt-falha h2 { font-size: 1.25rem; }
.mt-falha__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* ===========================================================
   Barra de baixo (celular e tablet)
   =========================================================== */
.mt-folha { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; transition: transform .3s var(--mt-ease); }
.mt-folha__fundo { position: fixed; inset: 0; z-index: -1; background: rgba(14, 14, 16, .38); animation: mtFade .25s ease; }
@keyframes mtFade { from { opacity: 0; } }
.mt-folha__painel { position: relative; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #fff; border-top: 1px solid var(--mt-linha); box-shadow: 0 -14px 34px rgba(14, 14, 16, .12); }
.mt-folha__detalhe { max-height: min(58vh, 520px); overflow-y: auto; margin-bottom: 8px; padding: 8px 4px 12px; border-bottom: 1px solid var(--mt-linha); animation: mtSobe .3s var(--mt-ease); }
@keyframes mtSobe { from { opacity: 0; transform: translateY(12px); } }
.mt-folha__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.mt-folha__cab b { font: 700 1rem var(--mt-fonte-titulo); color: var(--mt-preto); }
.mt-folha .mt-calc__linhas { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--mt-linha); }
.mt-folha .mt-calc__linhas:empty { display: none; }
.mt-folha .mt-calc__linhas li.is-sub { border-top-color: var(--mt-linha); }
.mt-folha .mt-calc__linhas li.is-total { color: var(--mt-preto); }
.mt-folha .mt-calc__linhas li.is-desc b { color: var(--mt-ok); }
.mt-folha__barra { display: flex; align-items: center; gap: 8px; }
.mt-folha__est { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 1px; min-height: 48px; padding: 3px 8px; border-radius: 12px; text-align: left; }
.mt-folha__est:hover { background: var(--mt-suave); }
.mt-folha__rot { display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mt-mudo); }
.mt-folha__seta { transition: transform .25s; }
.mt-folha.is-aberta .mt-folha__seta { transform: rotate(180deg); }
.mt-folha__ex { padding: 1px 6px; border-radius: 999px; background: var(--mt-ambar-fundo); color: var(--mt-ambar-texto); font-size: .62rem; letter-spacing: .02em; text-transform: none; }
.mt-folha__valor { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1.12rem/1.15 var(--mt-fonte-titulo); color: var(--mt-preto); font-variant-numeric: tabular-nums; }
.mt-folha[data-modo="sem-tecido"] .mt-folha__valor, .mt-folha[data-modo="carregando"] .mt-folha__valor { color: var(--mt-mudo); }
.mt-folha__unit { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; color: var(--mt-mudo); }
.mt-folha__voltar { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--mt-linha-forte); background: #fff; color: var(--mt-preto); }
.mt-folha__voltar:hover { border-color: var(--mt-preto); }
.mt-folha__proximo { flex: none; min-height: 48px; padding: 0 16px; font-size: .88rem; gap: 8px; }
.mt-folha .mt-delta-ancora { position: absolute; left: 8px; top: -6px; }
@media (min-width: 1024px) { .mt-folha { display: none !important; } }
@media (max-width: 1023px) {
  .mt-corpo { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .mt-corpo.mt-concluido { padding-bottom: 0; }
}
@media (max-width: 1023px) and (pointer: coarse) { .mt-digitando .mt-folha { transform: translateY(120%); } }
@media (max-width: 399px) {
  .mt-folha__barra { gap: 6px; }
  .mt-folha__est { padding-inline: 4px; }
  .mt-folha__valor { font-size: 1.02rem; }
  .mt-folha__proximo { padding: 0 14px; gap: 6px; }
  .mt-folha__proximo .mt-setas i { width: 6px; height: 6px; margin-right: 2px; }
  .mt-folha__voltar { width: 44px; height: 44px; }
}
@media (max-width: 339px) { .mt-folha__proximo .mt-setas { display: none; } }

/* ===========================================================
   Sucesso
   =========================================================== */
.mt-sucesso { padding: 28px 0 56px; outline: none; background: radial-gradient(60% 50% at 50% 0%, rgba(255, 193, 7, .22), transparent 70%), var(--mt-suave); }
.mt-sucesso__card {
  position: relative; display: grid; justify-items: center; gap: 12px; max-width: 760px; margin: 0 auto; padding: 32px 18px 26px;
  border-radius: 28px; background: #fff; border: 1px solid var(--mt-linha); box-shadow: var(--mt-sombra-lg); text-align: center; overflow: hidden;
}
@media (min-width: 640px) { .mt-sucesso__card { padding: 40px 40px 32px; } }
.mt-sucesso__selo { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--mt-amarelo); color: var(--mt-preto); box-shadow: 0 0 0 8px rgba(255, 193, 7, .22); animation: mtSelo .7s var(--mt-ease) both; }
@keyframes mtSelo { from { opacity: 0; transform: scale(.3) rotate(-30deg); } }
.mt-sucesso h2 { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; outline: none; box-shadow: none; }
.mt-sucesso__sub { max-width: 52ch; }
.mt-sucesso__grade { display: grid; gap: 14px; width: 100%; margin: 6px 0 4px; padding: 14px; border-radius: 20px; background: var(--mt-suave); text-align: left; }
@media (min-width: 640px) { .mt-sucesso__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 18px; } }
.mt-sucesso__previa { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mt-sucesso__previa .mt-svg { width: 100%; height: auto; }
.mt-sucesso__previa figcaption { text-align: center; font-size: .72rem; font-weight: 600; color: var(--mt-mudo); }
.mt-sucesso__lista { display: grid; gap: 6px; }
.mt-sucesso__lista li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; font-size: .86rem; }
.mt-sucesso__lista span { font-size: .78rem; font-weight: 600; color: var(--mt-mudo); }
.mt-sucesso__lista b { font-weight: 600; color: var(--mt-preto); overflow-wrap: anywhere; }
.mt-sucesso__wa, .mt-sucesso__outra { width: 100%; max-width: 420px; }
.mt-sucesso__wa { white-space: normal; }
.mt-sucesso__nota { font-size: .78rem; color: var(--mt-mudo); }
.mt-confete { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mt-confete i { position: absolute; top: -14px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c); box-shadow: 0 0 0 1px rgba(14, 14, 16, .08); opacity: 0; animation: mtConfete var(--t) cubic-bezier(.2, .6, .4, 1) var(--d) forwards; }
@keyframes mtConfete { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), 560px) rotate(calc(var(--r) + 540deg)); } }

/* ===========================================================
   Rodapé
   =========================================================== */
.mt-rodape { padding: 22px 0; background: var(--mt-preto); color: rgba(255, 255, 255, .8); text-align: center; font-size: .82rem; }
.mt-noscript { margin: 20px 0; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--mt-linha); }

/* ===========================================================
   Menos movimento
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  .mt-corpo *, .mt-corpo *::before, .mt-corpo *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .mt-setas i { opacity: 1; }
  .mt-confete { display: none; }
}