/* ==========================================================
   AND Studio de Marcas — Manual de marca interativo (manual.css)
   Página: manual-de-marca.html. Carregado DEPOIS do and.css.
   Moldura AND (navy/creme/vermelho) em volta das "folhas" do cliente,
   que usam a paleta e as fontes de cada manual (variáveis --c-*,
   definidas pelo manual.js a partir de v2/js/manual-data/<marca>.js).
   ========================================================== */

/* ---------- 1. Variáveis da página ---------- */
.mm {
  --rail-w: 0px;
  --bar-h: 48px;
  /* paleta do cliente (valores padrão; o JS troca por marca) */
  --c-papel: #F7F7F7;
  --c-papel2: #EBEBEB;
  --c-nevoa: #EEF8F9;
  --c-tinta: #00205B;
  --c-destaque: #2CD5C4;
  --c-profundo: #00205B;
  --c-profundo-tinta: #FFFFFF;
  --c-fa: Georgia, serif;          /* fonte de títulos/frases do cliente */
  --c-fb: Georgia, serif;          /* fonte de texto do cliente */
  --c-fa-w: 400;
  --c-fa-st: italic;
  --c-linha: color-mix(in srgb, var(--c-tinta) 16%, transparent);
  --c-suave: color-mix(in srgb, var(--c-tinta) 72%, transparent);
}
@media (min-width: 1024px) {
  .mm { --rail-w: 264px; }
}
@media (min-width: 1600px) {
  .mm { --rail-w: 300px; }
}

/* seções que convivem com o trilho lateral */
.mm-framed { margin-left: var(--rail-w); }
.mm-wrap {
  width: 100%;
  max-width: calc(1200px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mm-noscript {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: calc(var(--nav-h) + 1rem) var(--gutter) 1rem;
  background: var(--navy-3);
  color: var(--paper);
}
.mm-noscript a { color: var(--red-hi); text-decoration: underline; }

.arrow--flip { transform: rotate(180deg); }
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.3em;
  margin: 0 0.12em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 0.72em;
  line-height: 1;
  color: var(--paper);
}

/* X fino (fechar) */
.mm-x { position: relative; display: inline-block; width: 14px; height: 14px; }
.mm-x::before, .mm-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: currentColor;
  transform: rotate(45deg);
}
.mm-x::after { transform: rotate(-45deg); }

/* "+" que vira "−" (disclosure) */
.mm-plus { position: relative; display: inline-block; width: 10px; height: 10px; }
.mm-plus::before, .mm-plus::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: currentColor;
  transition: transform 0.6s var(--ease-expo);
}
.mm-plus::after { transform: rotate(90deg); }
[aria-expanded="true"] > .mm-plus::after { transform: rotate(0deg); }

/* ---------- 2. Seletor de marca ---------- */
.mm-brands {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(238, 238, 238, 0.16);
  border-radius: var(--radius-pill);
}
.mm-brands__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 38px;
  padding: 0 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-light);
  transition: color 0.4s, background-color 0.6s var(--ease-expo);
}
.mm-brands__btn::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  transform: scale(0);
  transition: transform 0.6s var(--ease-expo);
}
.mm-brands__btn:hover { color: var(--paper-light); }
.mm-brands__btn[aria-pressed="true"] { background: var(--paper-light); color: var(--navy); }
.mm-brands__btn[aria-pressed="true"]::before { transform: scale(1); }
@media (pointer: coarse) { .mm-brands__btn { min-height: 44px; } }

/* rótulo da cortina na troca de manual */
.mm-curtain__label {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 70px);
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  color: var(--cream);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s, transform 0.7s var(--ease-expo);
}
.mm-curtain__label small {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray-light);
}
.and-curtain.is-active .mm-curtain__label { opacity: 1; transform: none; transition-delay: 0.35s; }
.and-curtain:not(.is-active) .mm-curtain__label:empty { display: none; }

/* ---------- 3. Trilho lateral (desktop) ---------- */
.mm-rail { display: none; }
@media (min-width: 1024px) {
  .mm-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column;
    width: var(--rail-w);
    padding: calc(var(--nav-h) + 1.25rem) 1.75rem 1.5rem;
    background: var(--navy-2);
    border-right: 1px solid var(--line);
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
    transition: transform 1.1s var(--ease-expo), visibility 0s linear 1.1s;
  }
  html.mm-in-chapters .mm-rail {
    transform: none;
    visibility: visible;
    transition: transform 1.1s var(--ease-expo), visibility 0s;
  }
}
.mm-rail__top { display: grid; gap: 0.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.mm-rail__top .mm-brands { display: grid; grid-template-columns: 1fr 1fr; }
.mm-rail__top .mm-brands__btn { justify-content: center; padding: 0 0.5rem; letter-spacing: 0.1em; }
.mm-rail__nav {
  flex: 1;
  min-height: 0;
  margin: 0.75rem -0.5rem 0;
  padding: 0 0.5rem;
  overflow-y: auto;
  scrollbar-width: none;
}
.mm-rail__nav::-webkit-scrollbar { display: none; }
.mm-rail__list { display: grid; }
.mm-rail__link {
  position: relative;
  display: grid;
  grid-template-columns: 1.7rem 0.85rem minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  padding: 0.3rem 0;
  color: var(--gray);
  transition: color 0.4s;
}
.mm-rail__n {
  align-self: start;
  padding-top: 0.2rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.mm-rail__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  transform: scale(0.6);
  transition: transform 0.6s var(--ease-expo), background-color 0.4s, opacity 0.4s;
}
.mm-rail__t {
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.25;
  transition: transform 0.6s var(--ease-expo);
}
.mm-rail__p {
  position: absolute;
  left: 2.55rem;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity 0.5s;
}
.mm-rail__p i {
  display: block;
  height: 100%;
  background: var(--red);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}
.mm-rail__link:hover,
.mm-rail__link:focus-visible { color: var(--paper); }
.mm-rail__link:hover .mm-rail__t { transform: translateX(3px); }
.mm-rail__link.is-active { color: var(--paper-light); }
.mm-rail__link.is-active .mm-rail__dot { background: var(--red); opacity: 1; transform: scale(1); }
.mm-rail__link.is-active .mm-rail__p { opacity: 1; }
.mm-rail__link.is-done .mm-rail__dot { opacity: 0.9; }
.mm-rail__foot {
  display: grid;
  gap: 0.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}
.mm-rail__site { display: inline-flex; align-items: center; min-height: 32px; font-weight: 700; color: var(--red-hi); }
.mm-rail__ig { display: inline-flex; align-items: center; min-height: 32px; color: var(--gray-light); }
.mm-rail__site:hover, .mm-rail__ig:hover { color: var(--paper-light); }
.mm-keys { margin-bottom: 0.4rem; font-size: 0.72rem; color: var(--gray); }
@media (max-height: 820px) and (min-width: 1024px) {
  .mm-rail { padding-top: calc(var(--nav-h) + 0.5rem); }
  .mm-rail__top { gap: 0.5rem; padding-bottom: 0.9rem; }
  .mm-rail__top .label { display: none; }
  .mm-rail__link { min-height: 36px; }
  .mm-rail__t { font-size: 0.92rem; }
  .mm-keys { display: none; }
}

/* ---------- 4. Barra compacta de capítulos (mobile, dentro da nav) ---------- */
.mm-bar { display: none; }
@media (max-width: 1023px) {
  .mm-bar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: var(--bar-h);
    padding: 0 calc(var(--gutter) - 10px) 0 var(--gutter);
    /* opaca: dentro da nav o backdrop-filter não enxerga a página */
    background: #181C29;
    border-bottom: 1px solid rgba(238, 238, 238, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -10px, 0);
    transition: opacity 0.4s, transform 0.8s var(--ease-expo), visibility 0s linear 0.8s;
  }
  html.mm-in-chapters .mm-bar {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.6s, transform 0.8s var(--ease-expo), visibility 0s;
  }
  html.menu-open .mm-bar { opacity: 0; visibility: hidden; }
  /* nos capítulos a barra já mostra o progresso: evita dois filetes vermelhos */
  html.mm-in-chapters .and-progress { opacity: 0; transition: opacity 0.4s; }
}
.mm-bar__cur {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  text-align: left;
  color: var(--paper-light);
}
.mm-bar__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--red-hi);
}
.mm-bar__t {
  min-width: 0;
  overflow: hidden;
  font-size: 0.95rem;
  font-weight: 300;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mm-bar__of { flex: none; font-size: 0.72rem; color: var(--gray); }
.mm-bar__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--paper);
}
.mm-bar__btn .arrow { color: var(--red); }
.mm-bar__btn:disabled { opacity: 0.3; }
.mm-bar__prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.mm-bar__prog i {
  display: block;
  height: 100%;
  background: var(--red);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

/* menu mobile: 10 capítulos + seletor de marca */
.mm-menu__list .and-menu__link { font-size: clamp(1.7rem, 1.1rem + 3.4vw, 3rem); padding: 0.35rem 0; }
.mm-menu__brands { display: grid; gap: 0.6rem; margin-top: 2rem; }
.mm-menu__brands .mm-brands { justify-self: start; }

/* âncoras levam em conta a barra compacta (a fundação soma --anchor-extra ao offset e ao scroll-margin) */
@media (max-width: 1023px) {
  :root { --anchor-extra: 48px; }
}

/* ---------- 5. Capa ---------- */
.mm-cover {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  min-height: 100vh;
  min-height: 100svh;
  /* alinha com a nav centralizada em telas largas */
  padding-inline: max(0px, calc((100% - var(--container-wide) - var(--gutter) * 2) / 2));
  background: var(--navy);
  overflow: hidden;
}
/* pintura na capa inteira; o grão é o da página (um grão local só na coluna do texto desenhava um retângulo)
   e a base se funde ao navy do índice, sem emenda */
.mm-cover__shade {
  background:
    linear-gradient(100deg, rgba(22, 26, 38, 0.95) 0%, rgba(22, 26, 38, 0.84) 38%, rgba(22, 26, 38, 0.6) 66%, rgba(22, 26, 38, 0.5) 100%),
    linear-gradient(to bottom, rgba(22, 26, 38, 0.6) 0%, rgba(22, 26, 38, 0) 22%, rgba(22, 26, 38, 0.4) 62%, var(--navy) 92%);
}
@media (max-width: 1023px) {
  /* no celular o texto fica por cima da pintura: sombra mais densa */
  .mm-cover__shade { background: linear-gradient(to bottom, rgba(22, 26, 38, 0.72) 0%, rgba(22, 26, 38, 0.86) 45%, var(--navy) 92%); }
}
.mm-cover__painting { transition: opacity 1.8s var(--ease-out); }
html.js:not(.no-motion) .mm-cover:not(.is-in) .mm-cover__painting { opacity: 0; transition-duration: 0s; }
html.reduced-motion .mm-cover__painting { transition-duration: 0.5s; }
.mm-cover__and {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 1.5rem;
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) 2rem;
}
.mm-cover__top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mm-cover__and-mark { color: var(--paper-light); font-weight: 700; letter-spacing: 0.3em; }
.mm-cover__title {
  align-self: end;
  margin: 0;
  outline: none;
}
.mm-cover__name {
  display: block;
  padding: 0.08em 0 0.14em;
  margin: -0.08em 0 -0.14em;
  overflow: hidden;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.6rem, 0.6rem + 9.6vw, 11.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--paper-light);
  white-space: nowrap;
}
.mm-cover__name .mm-c { display: inline-block; }
.mm-cover__dot { color: var(--red); }
.mm-cover__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: end;
}
.mm-cover__bar {
  position: relative;
  display: flex;
  justify-content: center;
  width: clamp(30px, 2.8vw, 40px);
  height: clamp(150px, 26vh, 250px);
  padding-top: 10px;
  align-items: flex-start;
  border-radius: 20px 20px 0 0;
  background: var(--red-logo);
  transform-origin: 50% 100%;
}
.mm-cover__laco {
  width: 62%;
  height: auto;
  overflow: visible;
}
.mm-cover__laco path { fill: var(--navy); stroke: var(--navy); stroke-width: 2; stroke-opacity: 0; }
.mm-cover__text { display: grid; gap: 1.25rem; }
.mm-cover__kicker {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper-light);
}
.mm-cover__kicker span { display: block; }
.mm-cover__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin: 0;
}
.mm-cover__meta div { display: grid; gap: 0.2rem; }
.mm-cover__meta dt {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-hi);
}
.mm-cover__meta dd { margin: 0; font-size: 0.9rem; color: var(--paper); }
.mm-cover__meta a { color: var(--paper); }
.mm-cover__switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.mm-cover__cue { justify-self: start; }

.mm-cover__art {
  position: relative;
  z-index: 1; /* acima do grão: a arte do cliente fica limpa */
  margin: calc(var(--nav-h) + 6px) var(--gutter) var(--gutter) 0;
  overflow: hidden;
  background: var(--art-bg, var(--navy-3));
}
.mm-cover__px { position: absolute; inset: -6% 0; }
.mm-cover__artin {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.mm-cover__artin img { display: block; }
.mm-cover__art--logo img { width: min(62%, 460px); height: auto; }
.mm-cover__art--conter img { width: 100%; height: 100%; object-fit: contain; padding: 8% 6%; }
.mm-cover__art--cobrir img { width: 100%; height: 100%; object-fit: cover; }
.mm-cover__art::after {
  /* filete clássico que emoldura a arte */
  content: '';
  position: absolute;
  inset: clamp(12px, 1.6vw, 22px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
.mm-cover__stamp {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 2.6vw, 40px);
  bottom: clamp(20px, 2.4vw, 36px);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 1023px) {
  .mm-cover { grid-template-columns: minmax(0, 1fr); }
  .mm-cover__art { order: -1; height: 42vh; height: 42svh; min-height: 260px; margin: var(--nav-h) var(--gutter) 0; }
  .mm-cover__and { padding-top: 1.75rem; gap: 1.25rem; }
  .mm-cover__name { font-size: clamp(3.4rem, 1rem + 13vw, 7.5rem); }
  /* a fita vermelha acompanha o bloco de texto inteiro (metas longas no celular) */
  .mm-cover__foot { align-items: stretch; }
  .mm-cover__bar { height: auto; min-height: clamp(120px, 18vh, 170px); }
}
@media (max-width: 420px) {
  .mm-cover__meta { gap: 0.6rem 1.25rem; }
}

/* entrada da capa (classe .is-in posta pelo JS; sem JS tudo aparece) */
.mm-cover .mm-c { transition: transform 1.25s var(--ease-quart) calc(0.25s + var(--i, 0) * 0.055s); }
.mm-cover__bar { transition: transform 1.3s var(--ease-in-out) 0.05s; }
.mm-cover__laco path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s var(--ease-in-out) 0.7s, fill-opacity 0.6s var(--ease-out) 1.7s, stroke-opacity 0.6s 1.7s;
}
.mm-cover__kicker span { transition: opacity 1s var(--ease-out), transform 1.3s var(--ease-expo); }
.mm-cover__kicker span:nth-child(1) { transition-delay: 0.55s; }
.mm-cover__kicker span:nth-child(2) { transition-delay: 0.63s; }
.mm-cover__kicker span:nth-child(3) { transition-delay: 0.71s; }
.mm-cover__meta, .mm-cover__switch, .mm-cover__cue, .mm-cover__top { transition: opacity 1.2s var(--ease-out) 0.9s; }
.mm-cover__art { transition: clip-path 1.5s var(--ease-in-out) 0.1s; }
.mm-cover__art img { transition: transform 2.2s var(--ease-expo) 0.2s; }

html.js:not(.no-motion) .mm-cover:not(.is-in) .mm-c { transform: translate3d(0, 110%, 0); }
html.js:not(.no-motion) .mm-cover:not(.is-in) .mm-cover__bar { transform: scaleY(0); }
html.js:not(.no-motion) .mm-cover:not(.is-in) .mm-cover__laco path { stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; }
html.js:not(.no-motion) .mm-cover:not(.is-in) .mm-cover__kicker span { opacity: 0; transform: translate3d(0, 0.6em, 0); }
html.js:not(.no-motion) .mm-cover:not(.is-in) :is(.mm-cover__meta, .mm-cover__switch, .mm-cover__cue, .mm-cover__top) { opacity: 0; }
html.js:not(.no-motion) .mm-cover:not(.is-in) .mm-cover__art { clip-path: inset(0 0 0 100%); }
html.js:not(.no-motion) .mm-cover:not(.is-in) .mm-cover__art img { transform: scale(1.14); }
@media (max-width: 1023px) {
  html.js:not(.no-motion) .mm-cover:not(.is-in) .mm-cover__art { clip-path: inset(0 0 100% 0); }
}
/* movimento reduzido: só opacidade */
html.reduced-motion .mm-cover :is(.mm-c, .mm-cover__bar, .mm-cover__kicker span, .mm-cover__art, .mm-cover__art img) { transform: none !important; clip-path: none !important; }
html.reduced-motion .mm-cover .mm-cover__laco path { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; stroke-opacity: 0 !important; }
html.reduced-motion .mm-cover__and, html.reduced-motion .mm-cover__art { transition: opacity 0.5s var(--ease-out); }
html.js.reduced-motion:not(.no-motion) .mm-cover:not(.is-in) :is(.mm-cover__and, .mm-cover__art) { opacity: 0; }

/* ---------- 6. Índice + apresentação ---------- */
.mm-intro {
  position: relative;
  padding-block: var(--section-y) calc(var(--section-y) * 0.7);
  background: var(--navy);
}
.mm-intro__head { display: grid; gap: 1.25rem; max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.mm-index {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 var(--gap);
  counter-reset: none;
}
.mm-index__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-height: 96px;
  padding: 1.35rem 1rem 1.1rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
}
.mm-index__item::before {
  /* canto em L de baixo, como no PDF */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 7px;
  background: var(--gray);
}
.mm-index__item::after {
  /* canto vermelho de cima */
  content: '';
  position: absolute;
  right: 0;
  top: 1.45rem;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--red);
  border-right: 1px solid var(--red);
  transition: transform 0.6s var(--ease-expo);
}
.mm-index__n {
  flex: none;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 1.6rem + 1.2vw, 2.9rem);
  line-height: 0.9;
  font-variant-numeric: lining-nums;
  color: var(--paper-light);
  transition: color 0.4s;
}
.mm-index__n::after { content: '.'; color: var(--red); }
.mm-index__t {
  padding-top: 0.45rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gray-light);
  transition: color 0.4s, transform 0.6s var(--ease-expo);
}
.mm-index__item:hover .mm-index__n,
.mm-index__item:focus-visible .mm-index__n { font-style: italic; color: var(--red-hi); }
.mm-index__item:hover .mm-index__t { color: var(--paper-light); transform: translateX(3px); }
.mm-index__item:hover::after { transform: translate(3px, -3px); }
@media (max-width: 1279px) { .mm-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .mm-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mm-about {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) var(--gap);
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.mm-about__col h3 { margin-bottom: 1rem; font-size: var(--fs-h3); }
.mm-about__col p { color: var(--gray-light); max-width: 44ch; }
.mm-about__dl { display: grid; align-content: start; justify-items: start; gap: 0.85rem; }
.mm-about__year {
  margin-bottom: 0.25rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--paper-light);
}
.mm-about__year::after { content: '.'; color: var(--red); }
.mm-about__help { display: grid; gap: 0.1rem; margin-top: 0.5rem; }
.mm-about__help a { overflow-wrap: anywhere; }
/* com o trilho lateral, 3 colunas só a partir de 1280px */
@media (max-width: 1279px) {
  .mm-about { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-about__dl { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), max-content)); align-items: center; }
  .mm-about__year { grid-column: 1 / -1; }
  .mm-about__help { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .mm-about { grid-template-columns: minmax(0, 1fr); }
  .mm-about__dl .btn { width: 100%; }
}

/* painel de downloads de SVG */
.mm-dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 1.75rem var(--gap);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  background: var(--navy-2);
}
.mm-dl__group h3 {
  margin-bottom: 0.5rem;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray-light);
}
.mm-dl__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--paper);
  transition: color 0.4s;
}
.mm-dl__item span:first-child { flex: 1; min-width: 0; }
.mm-dl__ext { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--gray); }
.mm-dl__item .arrow { color: var(--red); }
.mm-dl__item:hover, .mm-dl__item:focus-visible { color: var(--red-hi); }
.mm-dl__hint { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; color: var(--gray); }

/* ---------- 7. Capítulo: moldura AND ---------- */
.mm-ch {
  position: relative;
  padding-block: clamp(4.5rem, 3rem + 5vw, 8.5rem) 0;
  background: var(--navy);
}
.mm-ch:last-of-type { padding-bottom: var(--section-y); }
.mm-ch__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 20rem);
  align-items: end;
  gap: 1rem clamp(1.25rem, 3vw, 2.75rem);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.mm-ch__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(4.4rem, 2rem + 7vw, 9rem);
  line-height: 0.74;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(234, 61, 61, 0.8);
}
.mm-ch__titles { display: grid; gap: 0.9rem; }
.mm-ch__title { margin: 0; }
.mm-ch__lede { margin: 0; padding-bottom: 0.35rem; font-size: 0.95rem; color: var(--gray-light); }
@media (max-width: 1279px) {
  .mm-ch__head { grid-template-columns: auto minmax(0, 1fr); }
  .mm-ch__lede { grid-column: 2; }
}
@media (max-width: 559px) {
  .mm-ch__head { grid-template-columns: minmax(0, 1fr); }
  .mm-ch__lede { grid-column: 1; }
  .mm-ch__num { font-size: 4rem; }
}

/* folha do cliente */
.mm-sheet {
  container: sheet / inline-size;
  position: relative;
  margin-bottom: 2.75rem;
  background: var(--c-papel);
  color: var(--c-tinta);
  font-family: var(--sans);
  outline: 1px solid var(--line);
  outline-offset: clamp(6px, 0.8vw, 10px);
  box-shadow: 0 50px 90px -60px rgba(0, 0, 0, 0.8);
  color-scheme: light;
  --accent-text: var(--red-on-light);
}
.mm-sheet:empty { min-height: 40vh; }
.mm-pad { padding: clamp(1.25rem, 3.4vw, 3rem); }
.mm-folio {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + clamp(6px, 0.8vw, 10px) + 0.7rem);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}
.mm-folio b { font-weight: 500; color: var(--gray-light); }

/* rótulos e controles dentro das folhas (voz do AND, cores do cliente) */
.mm-tag {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--c-suave);
}
.mm-tag--up { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.mm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding: 0.9rem clamp(1rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--c-linha);
  background: var(--c-papel);
}
.mm-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--c-linha);
  border-radius: var(--radius-pill);
}
.mm-seg__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 38px;
  padding: 0 0.95rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-tinta);
  transition: background-color 0.5s var(--ease-expo), color 0.4s;
}
.mm-seg__btn:hover { background: color-mix(in srgb, var(--c-tinta) 8%, transparent); }
.mm-seg__btn[aria-pressed="true"] { background: var(--c-tinta); color: var(--c-papel); }
.mm-seg__btn[aria-pressed="true"]::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}
.mm-seg__btn:disabled { opacity: 0.35; cursor: not-allowed; }
@media (pointer: coarse) { .mm-seg__btn { min-height: 44px; } }

.mm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0 1rem 0 0.4rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-tinta);
}
.mm-toggle__sw {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border: 1px solid color-mix(in srgb, var(--c-tinta) 40%, transparent);
  border-radius: 20px;
  transition: background-color 0.5s var(--ease-expo), border-color 0.4s;
}
.mm-toggle__sw::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-tinta);
  transition: transform 0.6s var(--ease-expo), background-color 0.4s;
}
.mm-toggle[aria-pressed="true"] .mm-toggle__sw { background: var(--red); border-color: var(--red); }
.mm-toggle[aria-pressed="true"] .mm-toggle__sw::after { transform: translateX(16px); background: #fff; }
.mm-toggle:disabled { opacity: 0.4; cursor: not-allowed; }

.mm-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--c-suave);
}
.mm-note--warn {
  padding: 0.85rem 1rem;
  border-left: 2px solid var(--red);
  background: color-mix(in srgb, var(--red) 7%, transparent);
  color: var(--c-tinta);
}
.mm-note--warn strong { font-weight: 700; }
.mm-note a, .mm-link { color: var(--red-on-light); text-decoration: underline; text-underline-offset: 3px; }

.mm-btn-ink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0 1.2rem;
  border: 1px solid var(--c-tinta);
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-tinta);
  transition: background-color 0.5s var(--ease-expo), color 0.4s;
}
.mm-btn-ink .arrow { color: var(--red); }
.mm-btn-ink:hover, .mm-btn-ink:focus-visible { background: var(--c-tinta); color: var(--c-papel); }

/* range (sliders) */
.mm-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --fill: 50%;
}
.mm-range::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(var(--c-tinta), var(--c-tinta)) 0 0 / var(--fill) 100% no-repeat, var(--c-linha);
}
.mm-range::-moz-range-track { height: 2px; background: var(--c-linha); }
.mm-range::-moz-range-progress { height: 2px; background: var(--c-tinta); }
.mm-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -10px;
  border: 2px solid var(--c-papel);
  border-radius: 50%;
  background: var(--c-tinta);
  box-shadow: 0 0 0 1px var(--c-tinta);
  transition: transform 0.4s var(--ease-expo);
}
.mm-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--c-papel);
  border-radius: 50%;
  background: var(--c-tinta);
  box-shadow: 0 0 0 1px var(--c-tinta);
}
.mm-range:active::-webkit-slider-thumb { transform: scale(1.2); }
.mm-range:focus-visible { outline: 1px solid var(--red-on-light); outline-offset: 2px; }

/* ---------- 8. 01 Conceito ---------- */
.mm-concept__media { position: relative; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; background: var(--c-profundo); }
.mm-concept__body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 4.4vw, 4rem);
  background: var(--c-profundo);
  color: var(--c-profundo-tinta);
}
.mm-concept__body--solo { grid-template-columns: minmax(0, 1fr); }
.mm-concept__text {
  display: grid;
  gap: 1em;
  font-family: var(--c-fb);
  font-weight: 300;
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.75rem);
  line-height: 1.5;
}
.mm-concept__body--solo .mm-concept__text { max-width: 36em; margin-left: auto; text-align: right; }
.mm-concept__phrase { display: grid; justify-items: center; gap: 1.5rem; text-align: center; }
.mm-concept__phrase::before,
.mm-concept__phrase::after {
  content: '';
  width: min(160px, 60%);
  height: 1px;
  background: var(--red);
}
.mm-concept__phrase p {
  margin: 0;
  font-family: var(--c-fa);
  font-style: var(--c-fa-st);
  font-weight: 900;
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.9rem);
  line-height: 1.1;
  color: var(--c-destaque);
}
@container sheet (max-width: 760px) {
  .mm-concept__body { grid-template-columns: minmax(0, 1fr); }
  .mm-concept__body--solo .mm-concept__text { text-align: left; margin-left: 0; }
}

/* ---------- 9. 02 Construção ---------- */
.mm-build__stage {
  position: relative;
  aspect-ratio: 16 / 8.2;
  overflow: hidden;
  background: var(--stage-bg, var(--c-papel));
  transition: background-color 0.9s var(--ease-out);
}
.mm-build__label {
  position: absolute;
  z-index: 2;
  top: clamp(1rem, 2.4vw, 1.75rem);
  left: clamp(1rem, 2.4vw, 1.75rem);
  display: grid;
  gap: 0.1rem;
  font-size: 0.82rem;
  color: var(--c-tinta);
}
.mm-build__label span:last-child:not(:first-child) { color: var(--c-suave); }
.mm-build__mark {
  position: absolute;
  inset: 12% 8% 8%;
}
.mm-build__mark > svg, .mm-build__mark > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mm-build__mark img { object-fit: contain; padding: 18% 14%; }
.mm-build__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.9rem clamp(1rem, 2.4vw, 1.75rem);
  border-top: 1px solid var(--c-linha);
  font-size: 0.85rem;
}
.mm-build__meta p { margin: 0; }
.mm-build__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--c-linha);
}
.mm-thumb {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.6rem;
  min-height: 150px;
  padding: 1rem;
  background: var(--thumb-bg);
  color: var(--c-tinta);
  text-align: left;
  transition: filter 0.4s;
}
.mm-thumb + .mm-thumb { border-left: 1px solid var(--c-linha); }
.mm-thumb img { width: 62%; max-height: 64px; margin: auto; object-fit: contain; transition: transform 0.9s var(--ease-expo); }
.mm-thumb__t { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
.mm-thumb__t::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color 0.4s, border-color 0.4s;
}
.mm-thumb[aria-pressed="true"] .mm-thumb__t::before { background: var(--red); border-color: var(--red); }
.mm-thumb[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--red);
}
.mm-thumb:hover img { transform: scale(1.06); }
@container sheet (max-width: 560px) {
  .mm-build__stage { aspect-ratio: 4 / 3.4; }
  .mm-thumb { min-height: 110px; padding: 0.75rem; }
  .mm-thumb__t { font-size: 0.68rem; }
}

/* área de proteção (camada SVG sobre a assinatura) */
.mm-area { color: inherit; }
.mm-area__zone { fill: currentColor; fill-opacity: 0.075; opacity: 0; transition: opacity 0.8s var(--ease-out); }
.mm-area__line {
  stroke: currentColor;
  stroke-opacity: 0.42;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  fill: none;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 1.2s var(--ease-in-out) calc(var(--i, 0) * 0.06s);
}
.mm-area__line--h { transform: scaleX(0); }
.mm-area__line--v { transform: scaleY(0); }
.mm-area__ghost {
  fill: currentColor;
  fill-opacity: 0.3;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out) calc(0.45s + var(--i, 0) * 0.1s);
}
.mm-area__text {
  font-family: var(--sans);
  font-weight: 400;
  fill: currentColor;
  fill-opacity: 0.75;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out) 0.7s;
}
.is-area .mm-area__zone,
.is-area .mm-area__ghost,
.is-area .mm-area__text { opacity: 1; }
.is-area .mm-area__line { transform: none; }
@container sheet (max-width: 560px) {
  .mm-area__text { display: none; }
}
html.reduced-motion .mm-area__line { transform: none; opacity: 0; transition: opacity 0.4s; }
html.reduced-motion .is-area .mm-area__line { opacity: 1; }
html.no-motion .mm-area * { transition: none !important; }

/* ---------- 10. 03 Imagens de referência ---------- */
.mm-refs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  height: clamp(460px, 62vw, 860px);
  padding: 4px;
  background: var(--c-papel);
}
.mm-ref {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--c-papel2);
}
.mm-ref--a { grid-area: 1 / 1; }
.mm-ref--b { grid-area: 2 / 1; }
.mm-ref--c { grid-area: 1 / 2 / 3 / 3; }
.mm-ref__in { position: absolute; inset: 0; }
.mm-ref img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-expo), filter 0.8s;
}
.mm-ref:hover img, .mm-ref:focus-visible img { transform: scale(1.045); }
.mm-ref__n {
  position: absolute;
  z-index: 2;
  left: 1rem;
  bottom: 0.8rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.mm-ref__n small {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.5s, transform 0.7s var(--ease-expo);
}
.mm-ref:hover .mm-ref__n small, .mm-ref:focus-visible .mm-ref__n small { opacity: 1; transform: none; }
.mm-ref:focus-visible { outline-offset: -4px; outline-color: #fff; }
@container sheet (max-width: 600px) {
  .mm-refs {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    height: auto;
  }
  .mm-ref--a { grid-area: 1 / 1; aspect-ratio: 1; }
  .mm-ref--b { grid-area: 1 / 2; aspect-ratio: 1; }
  .mm-ref--c { grid-area: 2 / 1 / 3 / 3; aspect-ratio: 4 / 5; }
}

/* lightbox */
.mm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: grid;
  place-items: center;
  padding: clamp(3.5rem, 7vh, 5rem) clamp(1rem, 7vw, 6rem);
  color: var(--paper);
}
.mm-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 21, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mm-lightbox__fig {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}
.mm-lightbox__img {
  max-width: min(100%, 1400px);
  max-height: calc(100vh - 11rem);
  max-height: calc(100svh - 11rem);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.mm-lightbox__cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1rem;
  font-size: 0.85rem;
  color: var(--gray-light);
  text-align: center;
}
.mm-lightbox__cap span:first-child { font-family: var(--serif); font-style: italic; color: var(--red-hi); }
.mm-lightbox__btn {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: 1px solid rgba(238, 238, 238, 0.22);
  border-radius: 50%;
  color: var(--paper-light);
  transition: border-color 0.4s, background-color 0.4s;
}
.mm-lightbox__btn:hover { border-color: var(--red); background: rgba(234, 61, 61, 0.12); }
.mm-lightbox__btn .arrow { color: var(--red); }
.mm-lightbox__btn--prev { left: clamp(0.5rem, 2vw, 2rem); }
.mm-lightbox__btn--next { right: clamp(0.5rem, 2vw, 2rem); }
.mm-lightbox__close {
  position: absolute;
  top: 1rem;
  right: clamp(0.75rem, 2vw, 2rem);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0 0.75rem;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
}
.mm-lightbox__close:hover { color: var(--red-hi); }
.mm-lightbox__hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  margin: 0;
  font-size: 0.72rem;
  color: var(--gray);
  transform: translateX(-50%);
  white-space: nowrap;
}
@media (max-width: 639px) {
  .mm-lightbox__btn { top: auto; bottom: 1rem; margin-top: 0; }
  .mm-lightbox__hint { display: none; }
  .mm-lightbox__img { max-height: calc(100svh - 12rem); }
}
html.mm-lock, html.mm-lock body { overflow: hidden; }

/* ---------- 11. 04 Cores ---------- */
.mm-colors__group + .mm-colors__group { border-top: 1px solid var(--c-linha); }
.mm-colors__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem clamp(1rem, 2.4vw, 1.75rem) 0.9rem;
}
.mm-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mm-swatches--faixa { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.mm-sw {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: clamp(190px, 17vw, 240px);
  padding: 1rem 1.1rem 1.05rem;
  background: var(--sw);
  color: var(--sw-ink);
  text-align: left;
  overflow: hidden;
  isolation: isolate;
}
.mm-sw__vals { display: grid; gap: 0.12rem; font-size: 0.8rem; font-weight: 400; line-height: 1.35; letter-spacing: 0.01em; }
/* valores não escolhidos: peso regular e 90% (≥ 4,5:1 em todas as amostras); o escolhido ganha negrito, ponto e recuo */
.mm-sw__v { position: relative; display: flex; gap: 0.4rem; align-items: baseline; opacity: 0.9; transition: opacity 0.4s, transform 0.6s var(--ease-expo); }
.mm-sw__v b { font-weight: 400; font-size: 0.66rem; letter-spacing: 0.12em; min-width: 3.1em; }
.mm-sw__v.is-sel { opacity: 1; font-weight: 700; transform: translateX(10px); }
.mm-sw__v.is-sel::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: currentColor;
}
.mm-sw__v--none { font-weight: 400; font-style: italic; }
.mm-sw__foot { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mm-ct {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem 0.18rem 0.3rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--sw-ink) 12%, transparent);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sw-ink);
}
.mm-ct i {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  font-style: normal;
  font-weight: 700;
  font-size: 0.72rem;
  background: var(--sw);
}
.mm-ct em { font-style: normal; font-weight: 700; letter-spacing: 0.06em; }
.mm-ct--fail em { text-decoration: line-through; opacity: 0.8; }
.mm-sw__copy {
  position: absolute;
  z-index: 2;
  top: 0.9rem;
  right: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s, transform 0.6s var(--ease-expo);
}
.mm-sw:hover .mm-sw__copy, .mm-sw:focus-visible .mm-sw__copy { opacity: 0.85; transform: none; }
.mm-sw::after {
  /* onda de confirmação ao copiar */
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--sw-ink);
  opacity: 0;
  clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%));
}
.mm-sw.is-copied::after { animation: mm-copied 1.1s var(--ease-expo); }
.mm-sw.is-copied .mm-sw__copy { opacity: 1; transform: none; }
@keyframes mm-copied {
  0% { opacity: 0.18; clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%)); }
  100% { opacity: 0; clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); }
}
.mm-sw:focus-visible { outline: 2px solid var(--sw-ink); outline-offset: -6px; }
/* faixas estreitas (complementares): HEX na vertical, como no PDF */
.mm-swatches--faixa .mm-sw { min-height: clamp(220px, 22vw, 300px); padding: 0.9rem 0.6rem; justify-content: flex-end; }
.mm-swatches--faixa .mm-sw__vals {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: flex-start;
  font-size: 0.78rem;
}
.mm-swatches--faixa .mm-sw__v.is-sel { transform: none; }
.mm-swatches--faixa .mm-sw__v.is-sel::before { display: none; }
.mm-swatches--faixa .mm-sw__foot { display: none; }
.mm-swatches--faixa .mm-sw__v:not(.is-sel) { display: none; }
.mm-swatches--faixa .mm-sw__copy { top: 0.6rem; right: 0.5rem; font-size: 0; }
.mm-swatches--faixa .mm-sw__copy::before { content: '⧉'; font-size: 0.8rem; }
@container sheet (max-width: 820px) {
  .mm-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-swatches--faixa { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mm-swatches--faixa .mm-sw { min-height: 180px; }
}
@container sheet (max-width: 380px) {
  .mm-sw { padding: 0.85rem; }
  .mm-sw__vals { font-size: 0.74rem; }
}
.mm-uso {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 1rem clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2.4vw, 1.75rem);
  border-top: 1px solid var(--c-linha);
  font-size: 0.86rem;
  line-height: 1.55;
}
.mm-uso h3 { font-family: var(--sans); font-size: 0.9rem; font-weight: 700; color: var(--c-tinta); }
.mm-uso p { margin: 0; color: var(--c-suave); }
@container sheet (max-width: 760px) {
  .mm-uso { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 12. 05 Uso em fundos (provador) ---------- */
.mm-try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
.mm-try__side {
  display: grid;
  align-content: start;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2.6vw, 1.9rem);
  background: var(--c-papel);
  border-left: 1px solid var(--c-linha);
}
.mm-try__group { display: grid; gap: 0.7rem; }
.mm-try__swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-chip {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--chip);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-tinta) 16%, transparent);
  transition: transform 0.6s var(--ease-expo);
}
.mm-chip::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--red);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s, transform 0.6s var(--ease-expo);
}
.mm-chip:hover { transform: scale(1.08); }
.mm-chip[aria-pressed="true"]::after { opacity: 1; transform: none; }
.mm-try__free { display: grid; gap: 0.7rem; padding-top: 1.25rem; border-top: 1px solid var(--c-linha); }
.mm-try__freerow { display: flex; align-items: center; gap: 0.6rem; }
.mm-color {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(from 90deg, #f44, #fd4, #4d6, #4cf, #64f, #f4d, #f44);
  cursor: pointer;
  overflow: hidden;
}
.mm-color::-webkit-color-swatch-wrapper { padding: 5px; }
.mm-color::-webkit-color-swatch { border: 0; border-radius: 50%; }
.mm-color::-moz-color-swatch { border: 0; border-radius: 50%; }
.mm-hex {
  width: 7.2rem;
  min-height: 44px;
  padding: 0 0.8rem;
  border: 1px solid var(--c-linha);
  border-radius: 6px;
  background: #fff;
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-tinta);
}
.mm-hex:focus { outline: 1px solid var(--red-on-light); outline-offset: 1px; }
.mm-hex[aria-invalid="true"] { border-color: var(--red-on-light); }
.mm-try__ink { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-try__ink .mm-seg__btn { justify-content: center; padding: 0 0.4rem; letter-spacing: 0.08em; }
.mm-try__ink .mm-seg__btn[aria-pressed="true"]::before { display: none; }
.mm-try__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(360px, 38vw, 520px);
  overflow: hidden;
  background: var(--try-bg, #fff);
  color: var(--try-ink, #000);
  transition: background-color 0.9s var(--ease-out), color 0.6s;
}
.mm-try__piece {
  position: relative;
  display: grid;
  place-items: center;
  width: min(66%, 440px);
}
.mm-try__piece > * { grid-area: 1 / 1; width: 100%; height: auto; }
.mm-try__piece svg { overflow: visible; }
.mm-try__info {
  position: absolute;
  left: clamp(1rem, 2.4vw, 1.5rem);
  right: clamp(1rem, 2.4vw, 1.5rem);
  top: clamp(1rem, 2.4vw, 1.4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mm-status {
  position: absolute;
  left: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: #1b1f2a;
  font-size: 0.84rem;
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.mm-status__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: #1f7a4d;
}
.mm-status--warn .mm-status__ic { background: #9a6200; }
.mm-status--bad .mm-status__ic { background: var(--red-on-light); }
.mm-status--bad { box-shadow: 0 0 0 2px var(--red-on-light), 0 10px 30px rgba(0, 0, 0, 0.12); }
.mm-status p { margin: 0; }
.mm-status strong { font-weight: 700; }
.mm-status button { color: var(--red-on-light); text-decoration: underline; text-underline-offset: 3px; min-height: 24px; }
@container sheet (max-width: 760px) {
  .mm-try { grid-template-columns: minmax(0, 1fr); }
  .mm-try__side { border-left: 0; border-top: 1px solid var(--c-linha); }
  .mm-try__stage { min-height: 420px; place-items: start center; padding-top: 22%; }
  .mm-try__piece { width: min(74%, 380px); }
}

/* sub-marcas (Kongo) */
.mm-subs { padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--subs-bg, #04151F); color: #fff; }
.mm-subs__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.mm-subs__head .mm-tag { color: rgba(255, 255, 255, 0.7); }
.mm-subs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mm-sub {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.5rem 1.25rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  text-align: left;
  transition: background-color 0.6s var(--ease-expo);
}
.mm-sub img { width: 82%; height: auto; transition: transform 0.9s var(--ease-expo); }
.mm-sub:hover { background: rgba(255, 255, 255, 0.07); }
.mm-sub:hover img { transform: translateX(6px) skewX(-4deg); }
.mm-sub__c { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.78); }
.mm-sub__c i { width: 10px; height: 10px; border-radius: 50%; background: var(--sub); }
@container sheet (max-width: 640px) {
  .mm-subs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 13. 06 Positivo / negativo ---------- */
.mm-pn__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: end; }
.mm-pn__title { margin: 0 0 0.35rem; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; color: var(--c-tinta); }
.mm-cmp {
  position: relative;
  aspect-ratio: 16 / 8;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: ew-resize;
  --pos: 50%;
  box-shadow: 0 0 0 1px var(--c-linha);
}
.mm-cmp--tall { aspect-ratio: 16 / 10; }
.mm-cmp__layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9%;
  background: var(--bg);
}
.mm-cmp__layer--neg { clip-path: inset(0 0 0 var(--pos)); }
.mm-cmp__layer img { width: calc(var(--pw) * var(--k, 1)); height: auto; pointer-events: none; -webkit-user-drag: none; }
@container sheet (max-width: 640px) {
  .mm-cmp { --k: 1.55; }
}
.mm-cmp__lab {
  position: absolute;
  top: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mm-cmp__lab--pos { left: 1.1rem; color: #111; }
.mm-cmp__lab--neg { right: 1.1rem; color: #fff; }
.mm-cmp__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 0;
  outline: none;
}
.mm-cmp__handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.5px;
  width: 1px;
  background: var(--red);
}
.mm-cmp__knob {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 2px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s var(--ease-expo);
}
.mm-cmp__knob .arrow { width: 0.9rem; color: #fff; }
.mm-cmp.is-drag .mm-cmp__knob { transform: translate(-50%, -50%) scale(0.9); }
.mm-cmp__handle:focus-visible .mm-cmp__knob { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--red); }
.mm-pn__files {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 2rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.mm-pn__files h3 { grid-column: 1 / -1; font-family: var(--sans); font-size: 0.9rem; font-weight: 700; }
.mm-pn__files p { margin: 0; font-size: 0.84rem; color: var(--c-suave); }
@container sheet (max-width: 640px) {
  .mm-pn__head { grid-template-columns: minmax(0, 1fr); }
  .mm-cmp, .mm-cmp--tall { aspect-ratio: 4 / 4.2; }
  .mm-pn__files { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 14. 07 Tipografia ---------- */
.mm-type { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.mm-type__main {
  display: grid;
  align-content: start;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3.4vw, 3rem);
  min-width: 0;
}
.mm-type__fam {
  margin: 0;
  font-family: var(--f);
  font-size: clamp(2.6rem, 1.4rem + 4vw, 5.2rem);
  font-weight: var(--fw-name, 900);
  font-style: var(--fs-name, normal);
  line-height: 1;
  color: var(--c-tinta);
  overflow-wrap: anywhere;
}
.mm-type__edit {
  min-height: 1.2em;
  margin: 0;
  padding: 0.12em 0 0.2em;
  border-bottom: 1px dashed color-mix(in srgb, var(--c-tinta) 30%, transparent);
  font-family: var(--f);
  font-size: var(--size, 64px);
  font-weight: var(--w, 400);
  font-style: var(--st, normal);
  line-height: 1.08;
  color: var(--c-tinta);
  overflow-wrap: anywhere;
  outline: none;
  cursor: text;
  transition: border-color 0.4s;
}
.mm-type__edit:focus { border-bottom-color: var(--red); border-bottom-style: solid; }
.mm-type__ctrl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem 1rem;
}
.mm-type__ctrl output { min-width: 4.2em; font-size: 0.85rem; font-variant-numeric: tabular-nums; text-align: right; }
.mm-type__glyphs {
  display: grid;
  gap: 0.1em;
  font-family: var(--f);
  font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2.25rem);
  font-weight: var(--w, 400);
  font-style: var(--st, normal);
  line-height: 1.25;
  color: var(--c-tinta);
  overflow-wrap: anywhere;
}
.mm-type__side {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.25rem, 3.4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  background: var(--c-papel2);
  min-width: 0;
}
.mm-weights { display: grid; }
.mm-weight {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 1rem;
  min-height: 56px;
  padding: 0.5rem 0 0.6rem 1.1rem;
  border-bottom: 1px solid var(--c-linha);
  text-align: left;
  color: var(--c-tinta);
}
.mm-weight::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--red);
  transform: scale(0);
  transition: transform 0.6s var(--ease-expo);
}
.mm-weight[aria-pressed="true"]::before { transform: scale(1); }
.mm-type__side { container-type: inline-size; }
.mm-weight__n {
  font-family: var(--f);
  font-weight: var(--w);
  font-style: var(--st);
  font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  /* nomes longos ("UltraBlack Italic") cabem numa linha: o corpo segue a largura do painel (--len = nº de letras) */
  font-size: min(clamp(1.35rem, 1rem + 1.2vw, 2rem), calc((100cqi - 4rem) / (var(--len, 8) * 0.52)));
  line-height: 1.15;
  transition: transform 0.6s var(--ease-expo);
}
.mm-weight:hover .mm-weight__n { transform: translateX(4px); }
.mm-weight__pct { font-size: 0.72rem; color: var(--c-suave); font-variant-numeric: tabular-nums; }
.mm-weight__bar { grid-column: 1 / -1; height: 2px; background: var(--c-linha); }
.mm-weight__bar i {
  display: block;
  height: 100%;
  background: var(--c-tinta);
  transform: scaleX(var(--pct, 0));
  transform-origin: 0 50%;
  transition: transform 1.4s var(--ease-expo) calc(var(--i, 0) * 0.08s);
}
.mm-weights:not(.is-in) .mm-weight__bar i { transform: scaleX(0); }
.mm-scale { display: grid; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--c-linha); }
.mm-scale__row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.5rem 1rem; }
.mm-scale__btn {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.2rem;
  color: var(--c-tinta);
}
.mm-scale__btn span:first-child { font-family: var(--f); font-weight: 900; font-style: italic; line-height: 1; transition: transform 0.6s var(--ease-expo); }
.mm-scale__btn small { font-size: 0.62rem; color: var(--c-suave); white-space: nowrap; }
.mm-scale__btn:hover span:first-child { transform: translateY(-3px); }
.mm-scale__btn[aria-pressed="true"] small { color: var(--red-on-light); font-weight: 700; }
@container sheet (max-width: 820px) {
  .mm-type { grid-template-columns: minmax(0, 1fr); }
  .mm-type__ctrl { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mm-type__ctrl .mm-btn-ink { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- 15. 08 Restrições ---------- */
.mm-rules__area {
  position: relative;
  aspect-ratio: 16 / 6.4;
  overflow: hidden;
  background: var(--rules-area, var(--c-nevoa));
  color: var(--rules-ink, var(--c-tinta));
}
.mm-rules__area .mm-build__mark { inset: 6% 6%; }
.mm-rules__area-txt {
  margin: 0;
  padding: 0.9rem clamp(1rem, 2.4vw, 1.75rem);
  border-top: 1px solid var(--c-linha);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--c-suave);
}
.mm-rules__area-txt strong { color: var(--c-tinta); font-weight: 700; }
.mm-rules__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--rules-bg, #EBEBEB);
}
.mm-dont {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.5rem;
  min-height: clamp(220px, 22vw, 280px);
  padding: 1.2rem 1rem 1rem;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: transparent;
  color: var(--rules-ink, #333);
  text-align: center;
  overflow: hidden;
  transition: background-color 0.5s;
}
.mm-dont:hover { background: rgba(255, 255, 255, 0.35); }
.mm-dont__label { font-size: 0.82rem; color: #2a2e38; }
.mm-dont__stage { position: relative; display: grid; place-items: center; }
.mm-dont__svg { width: 76%; height: auto; overflow: visible; }
.mm-dont__logo, .mm-dont__fx, .mm-move {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 1s var(--ease-expo), color 0.6s, opacity 0.6s;
}
.mm-dont__logo { color: var(--rules-ink); }
.mm-dont__fx { opacity: 0; }
.mm-dont__x {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(58%, 190px);
  height: auto;
  aspect-ratio: 1.35;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}
.mm-dont__x line {
  stroke: var(--red);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.5s var(--ease-in-out);
}
.mm-dont__x line + line { transition-delay: 0s; }
.mm-dont__state {
  position: relative;
  height: 1.2rem;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mm-dont__state span { position: absolute; inset: 0; transition: opacity 0.4s, transform 0.6s var(--ease-expo); }
.mm-dont__ok { color: #1f6b45; }
.mm-dont__no { color: var(--red-on-light); opacity: 0; transform: translateY(6px); }
/* estado "errado": hover (mouse), toque/Enter (aria-pressed) ou "mostrar todos" */
.mm-dont.is-wrong .mm-dont__ok { opacity: 0; transform: translateY(-6px); }
.mm-dont.is-wrong .mm-dont__no { opacity: 1; transform: none; }
.mm-dont.is-wrong .mm-dont__x line { stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s var(--ease-in-out) 0.35s; }
.mm-dont.is-wrong .mm-dont__x line + line { transition-delay: 0.6s; }
.mm-dont.is-wrong[data-tipo="esticar"] .mm-dont__logo,
.mm-dont.is-wrong[data-tipo="comprimir"] .mm-dont__logo { transform: scale(var(--sx, 1), var(--sy, 1)); }
.mm-dont.is-wrong[data-tipo="girar"] .mm-dont__logo { transform: rotate(var(--deg, 0deg)); }
.mm-dont.is-wrong[data-tipo="cor"] .mm-dont__logo { color: var(--bad, #f0f); }
.mm-dont.is-wrong[data-tipo="efeitos"] .mm-dont__fx { opacity: 1; }
.mm-dont.is-wrong[data-tipo="efeitos"] .mm-dont__logo { opacity: 0; }
.mm-dont.is-wrong .mm-move { transform: translate(var(--dx, 0), var(--dy, 0)); }
@media (hover: hover) and (pointer: fine) {
  .mm-rules:not(.is-all) .mm-dont:hover .mm-dont__ok { opacity: 0; transform: translateY(-6px); }
  .mm-rules:not(.is-all) .mm-dont:hover .mm-dont__no { opacity: 1; transform: none; }
  .mm-rules:not(.is-all) .mm-dont:hover .mm-dont__x line { stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s var(--ease-in-out) 0.35s; }
  .mm-rules:not(.is-all) .mm-dont:hover .mm-dont__x line + line { transition-delay: 0.6s; }
  .mm-rules:not(.is-all) .mm-dont:hover[data-tipo="esticar"] .mm-dont__logo,
  .mm-rules:not(.is-all) .mm-dont:hover[data-tipo="comprimir"] .mm-dont__logo { transform: scale(var(--sx, 1), var(--sy, 1)); }
  .mm-rules:not(.is-all) .mm-dont:hover[data-tipo="girar"] .mm-dont__logo { transform: rotate(var(--deg, 0deg)); }
  .mm-rules:not(.is-all) .mm-dont:hover[data-tipo="cor"] .mm-dont__logo { color: var(--bad, #f0f); }
  .mm-rules:not(.is-all) .mm-dont:hover[data-tipo="efeitos"] .mm-dont__fx { opacity: 1; }
  .mm-rules:not(.is-all) .mm-dont:hover[data-tipo="efeitos"] .mm-dont__logo { opacity: 0; }
  .mm-rules:not(.is-all) .mm-dont:hover .mm-move { transform: translate(var(--dx, 0), var(--dy, 0)); }
}
html.reduced-motion .mm-dont :is(.mm-dont__logo, .mm-dont__fx, .mm-move) { transition: opacity 0.3s, color 0.3s; }
@container sheet (max-width: 760px) {
  .mm-rules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-rules__area { aspect-ratio: 4 / 3; }
  .mm-rules__area .mm-build__mark { inset: 4%; }
}
@container sheet (max-width: 400px) {
  .mm-dont { min-height: 200px; padding-inline: 0.6rem; }
  .mm-dont__label { font-size: 0.74rem; }
}

/* ---------- 16. 09 Tamanho mínimo ---------- */
.mm-min { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
.mm-min__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 34vw, 460px);
  padding: 2.5rem 1rem 3.5rem;
  overflow: hidden;
  /* papel milimetrado: 1 mm e 10 mm em tamanho real de CSS */
  background:
    linear-gradient(to right, rgba(20, 30, 50, 0.07) 1px, transparent 1px) 0 0 / 10mm 10mm,
    linear-gradient(to bottom, rgba(20, 30, 50, 0.07) 1px, transparent 1px) 0 0 / 10mm 10mm,
    linear-gradient(to right, rgba(20, 30, 50, 0.028) 1px, transparent 1px) 0 0 / 1mm 1mm,
    linear-gradient(to bottom, rgba(20, 30, 50, 0.028) 1px, transparent 1px) 0 0 / 1mm 1mm,
    #fff;
  color: var(--min-ink, #333F48);
}
.mm-min__grid-note {
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5C606E;
}
.mm-min__fig { display: grid; justify-items: start; gap: 16px; max-width: 100%; }
.mm-min__logo {
  position: relative;
  width: var(--w, 200px);
  max-width: 100%;
  transition: outline-color 0.4s;
  outline: 1px dashed transparent;
  outline-offset: 8px;
}
.mm-min__logo svg { display: block; width: 100%; height: auto; }
.mm-min__ruler {
  position: relative;
  width: var(--w, 200px);
  max-width: 100%;
  height: 12px;
  border: 1px solid currentColor;
  border-top: 0;
  opacity: 0.8;
}
.mm-min__read { display: grid; grid-template-columns: auto auto; gap: 0 1.25rem; align-items: baseline; font-size: 0.95rem; }
.mm-min__read b { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; line-height: 1.25; }
.mm-min__val { font-variant-numeric: tabular-nums; }
.mm-min.is-below .mm-min__logo { outline-color: var(--red-on-light); }
.mm-min.is-below .mm-min__ruler,
.mm-min.is-below .mm-min__read { color: var(--red-on-light); }
.mm-min__flag {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.82rem;
  color: #1f6b45;
}
.mm-min__flag::before {
  content: '✓';
  display: grid;
  place-items: center;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #1f6b45;
  color: #fff;
  font-size: 0.72rem;
}
.mm-min.is-below .mm-min__flag { color: var(--red-on-light); font-weight: 500; }
.mm-min.is-below .mm-min__flag::before { content: '!'; background: var(--red-on-light); }
.mm-min__side {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.8vw, 2rem);
  border-left: 1px solid var(--c-linha);
  background: var(--c-papel);
}
.mm-min__versions { display: grid; }
.mm-minv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 48px;
  padding: 0.4rem 0 0.4rem 1rem;
  border-bottom: 1px solid var(--c-linha);
  text-align: left;
  font-size: 0.88rem;
  color: var(--c-tinta);
  position: relative;
}
.mm-minv small { font-size: 0.72rem; color: var(--c-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mm-minv::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--red);
  transform: scale(0);
  transition: transform 0.6s var(--ease-expo);
}
.mm-minv[aria-pressed="true"]::before { transform: scale(1); }
.mm-minv[aria-pressed="true"] { font-weight: 700; }
.mm-min__rangewrap { position: relative; padding-top: 1.4rem; }
.mm-min__tick {
  position: absolute;
  top: 0;
  left: calc(11px + (100% - 22px) * var(--t, 0));
  transform: translateX(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--red-on-light);
}
.mm-min__tick::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 1.05rem;
  width: 1px;
  height: 14px;
  background: var(--red-on-light);
}
.mm-min__lupa { display: grid; gap: 0.5rem; }
.mm-min__lupa canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--c-linha);
  image-rendering: pixelated;
}
@container sheet (max-width: 780px) {
  .mm-min { grid-template-columns: minmax(0, 1fr); }
  .mm-min__side { border-left: 0; border-top: 1px solid var(--c-linha); }
}
.mm-min__nota { padding: 1rem clamp(1rem, 2.4vw, 1.75rem) 1.25rem; border-top: 1px solid var(--c-linha); }

/* ---------- 17. 10 Avatar e favicon ---------- */
.mm-social { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mm-social__col { display: grid; align-content: start; gap: 1.5rem; padding: clamp(1.25rem, 3.4vw, 3rem); min-width: 0; }
.mm-social__col + .mm-social__col { border-left: 1px solid var(--c-linha); background: var(--c-papel2); }
.mm-profile {
  width: min(100%, 380px);
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 20px;
  background: #fff;
  color: #14161c;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 24px 50px -24px rgba(8, 16, 40, 0.35);
}
.mm-profile__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: 0.9rem; font-weight: 700; }
.mm-profile__top span:last-child { font-size: 0.72rem; font-weight: 400; color: #6b7080; }
.mm-profile__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: center; }
.mm-profile__av {
  position: relative;
  width: 84px;
  height: 84px;
  padding: 3px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #e3e5ea;
}
.mm-profile__av img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; }
.mm-profile__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.mm-profile__stats b { display: block; font-size: 1rem; }
.mm-profile__stats span { font-size: 0.68rem; color: #6b7080; }
.mm-profile__bio { display: grid; gap: 0.1rem; margin-top: 0.9rem; font-size: 0.84rem; line-height: 1.4; }
.mm-profile__bio b { font-size: 0.9rem; }
.mm-profile__bio span:nth-child(2) { color: #6b7080; }
.mm-profile__act { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; }
.mm-profile__act span { display: grid; place-items: center; min-height: 34px; border-radius: 9px; background: #eef0f3; font-size: 0.8rem; font-weight: 600; }
.mm-profile__act span:first-child { background: var(--c-tinta); color: var(--c-papel); }
/* folha estreita (360–390px): os rótulos dos números não se encostam */
@container sheet (max-width: 440px) {
  .mm-profile { padding: 1rem 0.9rem 0.9rem; }
  .mm-profile__row { gap: 0.6rem; }
  .mm-profile__av { width: 58px; height: 58px; }
  .mm-profile__stats b { font-size: 0.9rem; }
  .mm-profile__stats span span { display: block; font-size: 0.6rem; }
}
.mm-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; }
.mm-sizes figure { display: grid; justify-items: center; gap: 0.4rem; margin: 0; }
.mm-sizes img { border-radius: 50%; }
.mm-sizes figcaption { font-size: 0.66rem; color: var(--c-suave); font-variant-numeric: tabular-nums; }
.mm-browser {
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  background: #dfe3e8;
  box-shadow: 0 24px 50px -28px rgba(8, 16, 40, 0.4);
  overflow: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.mm-browser__bar { display: flex; align-items: flex-end; gap: 0.75rem; padding: 0.6rem 0.75rem 0; }
.mm-browser__dots { display: flex; gap: 6px; padding-bottom: 0.7rem; }
.mm-browser__dots i { width: 11px; height: 11px; border-radius: 50%; background: #9ba1ab; }
.mm-browser__tab {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 0 1 260px;
  padding: 0.55rem 0.8rem;
  border-radius: 10px 10px 0 0;
  background: #fff;
  font-size: 0.8rem;
  color: #23262e;
}
.mm-browser__tab img { flex: none; width: 16px; height: 16px; }
.mm-browser__tab span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mm-browser__tab i { font-style: normal; color: #6b7080; }
.mm-browser__body { height: 90px; background: #fff; border-top: 1px solid #eceef2; }
.mm-browser__addr { margin: 0.6rem 0.8rem; height: 26px; border-radius: 13px; background: #f1f3f5; }
.mm-favs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.4rem; }
.mm-favs figure { display: grid; justify-items: center; gap: 0.4rem; margin: 0; }
.mm-favs img { box-shadow: 0 0 0 1px var(--c-linha); }
.mm-favs figcaption { font-size: 0.66rem; color: var(--c-suave); }
.mm-downloads { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mm-social__foot { grid-column: 1 / -1; padding: 1rem clamp(1.25rem, 3.4vw, 3rem) 1.4rem; border-top: 1px solid var(--c-linha); }
@container sheet (max-width: 820px) {
  .mm-social { grid-template-columns: minmax(0, 1fr); }
  .mm-social__col + .mm-social__col { border-left: 0; border-top: 1px solid var(--c-linha); }
}

/* ---------- 18. Contracapa ---------- */
.mm-back { position: relative; background: var(--navy); }
.mm-back__art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 78vh;
  min-height: 78svh;
  overflow: hidden;
  background: var(--back-bg, #000);
}
.mm-back__bg { position: absolute; inset: 0; overflow: hidden; }
.mm-back__sign {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  padding: 2rem var(--gutter);
}
.mm-back__client { width: clamp(160px, 22vw, 300px); color: var(--back-ink, #fff); }
.mm-back__client--simbolo { width: clamp(90px, 10vw, 140px); }
.mm-back__client svg { width: 100%; height: auto; }
.mm-back__by { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--paper); }
.mm-back__and { width: clamp(100px, 10vw, 140px); height: auto; }
.mm-back__talk { padding-block: var(--section-y); }
.mm-back__talk .h1 { max-width: 16ch; margin: 1.25rem 0 2.5rem; }
.mm-back__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.mm-back__mail { font-family: var(--serif); font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); color: var(--paper-light); overflow-wrap: anywhere; }
.mm-back__by { margin-top: 3rem; }
p.mm-back__by { font-family: var(--sans); font-style: normal; font-size: 0.85rem; color: var(--gray); }

/* ---------- 19. Movimento reduzido / sem movimento ---------- */
html.reduced-motion .mm-sw.is-copied::after { animation: none; }
html.reduced-motion .mm-ref img, html.reduced-motion .mm-thumb img, html.reduced-motion .mm-sub img { transition: none; }

/* ---------- 20. Impressão ---------- */
@media print {
  .mm { --rail-w: 0px; }
  .mm-rail, .mm-bar, .mm-lightbox, .mm-cover__switch, .mm-cover__cue, .mm-toolbar, .mm-build__thumbs,
  .mm-try__side, .mm-status, .mm-cmp__handle, .mm-type__ctrl, .mm-scale, .mm-min__side, .mm-min__flag,
  .mm-downloads, .mm-dl, .mm-about__dl button, .mm-back__talk .cluster, .mm-folio { display: none !important; }
  .mm-cover { display: block; min-height: 0; }
  .mm-cover__art { height: 60mm; }
  .mm-cover__name { color: #161A26 !important; font-size: 48pt; }
  .mm-sheet { outline: 0; box-shadow: none; break-inside: auto; border: 1px solid #ccc; }
  .mm-sheet, .mm-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mm-sw, .mm-chip, .mm-try__stage, .mm-build__stage, .mm-cmp__layer, .mm-rules__grid, .mm-subs, .mm-concept__body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mm-cmp__layer--neg { clip-path: inset(0 0 0 50%) !important; }
  .mm-ch { padding-top: 10mm; break-before: page; }
  .mm-back__art { min-height: 0; padding: 20mm 0; }
  /* moldura AND vira papel: fundos brancos e tinta navy */
  .mm-cover, .mm-cover__and, .mm-intro, .mm-ch, .mm-back, .mm-back__talk { background: #fff !important; color: #161A26 !important; }
  .mm-cover__name, .mm-cover__kicker, .mm-cover__meta dd, .mm-cover__meta a, .mm-index__n, .mm-index__t,
  .mm-about__col p, .mm-about__year, .mm-back__mail, .mm-ch__lede { color: #161A26 !important; }
  .mm-cover__title, .mm-cover__foot, .mm-cover .mm-c { transform: none !important; opacity: 1 !important; }
  .mm-cover__art { margin: 6mm 0 0; height: 70mm; }
  .mm-cover__px, .mm-cover__artin { position: static; height: 100%; }
  .mm-ch__num { -webkit-text-stroke-color: #C42B2B; }
  .mm-index__item, .mm-about { border-color: #ccc; }
  .mm-sheet { margin-bottom: 8mm; }
  .mm-cover__and-mark { color: #161A26 !important; }
  /* restrições impressas como no PDF: o erro, com o X */
  .mm-dont__ok { opacity: 0 !important; }
  .mm-dont__no { opacity: 1 !important; transform: none !important; }
  .mm-dont__x line { stroke-dashoffset: 0 !important; }
  .mm-dont:is([data-tipo="esticar"], [data-tipo="comprimir"]) .mm-dont__logo { transform: scale(var(--sx, 1), var(--sy, 1)); }
  .mm-dont[data-tipo="girar"] .mm-dont__logo { transform: rotate(var(--deg, 0deg)); }
  .mm-dont[data-tipo="cor"] .mm-dont__logo { color: var(--bad); }
  .mm-dont[data-tipo="efeitos"] .mm-dont__fx { opacity: 1; }
  .mm-dont[data-tipo="efeitos"] .mm-dont__logo { opacity: 0; }
  .mm-dont .mm-move { transform: translate(var(--dx, 0), var(--dy, 0)); }
  /* folhas escuras do cliente (.mm-concept__body, .mm-subs) levam .print-keep-ink: guardam a tinta clara */
  /* dicas de hover não vão para o papel */
  .mm-sw__copy, .mm-ref__n small { display: none !important; }
}

/* ---------- 21. Grades de uma coluna: trilha explícita (palavras longas não estouram) ---------- */
.mm-type__main, .mm-type__side, .mm-try__side, .mm-try__group, .mm-try__free, .mm-min__side, .mm-social__col,
.mm-concept__text, .mm-about__dl, .mm-cover__text, .mm-ch__titles, .mm-intro__head, .mm-rail__top, .mm-scale, .mm-min__lupa {
  grid-template-columns: minmax(0, 1fr);
}
/* caixas com aspect-ratio: sem min-height (o Chrome transfere a altura mínima para a largura) */
@container sheet (max-width: 900px) {
  .mm-build__stage { aspect-ratio: 16 / 10; }
  .mm-cmp { aspect-ratio: 16 / 10; }
  .mm-rules__area { aspect-ratio: 16 / 9; }
}
@container sheet (max-width: 640px) {
  .mm-build__stage { aspect-ratio: 4 / 3.4; }
  .mm-cmp, .mm-cmp--tall { aspect-ratio: 4 / 4.2; }
  .mm-rules__area { aspect-ratio: 4 / 3; }
}

/* ---------- 22. Alvos de toque ≥ 44px em links de texto (sem mexer no layout) ---------- */
@media screen {
  :is(.mm-link, .mm-note a, .mm-status button, .mm-cover__meta a, .mm-about__help a, .mm-back__mail) { position: relative; }
  :is(.mm-link, .mm-note a, .mm-status button, .mm-cover__meta a, .mm-about__help a, .mm-back__mail)::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}