/* ==========================================================================
   /metodo v3 · A TRAMA
   Loomty vem de loom, tear. A página inteira é um tecido: as três leituras
   são três fios (interesse, confiança, prontidão) que atravessam a abertura,
   descem pelas colunas da Tríade, se cruzam na matriz e se juntam no fecho.

   Cores dos fios = famílias do DS. Nos fundos claros, o `base`; nos escuros,
   o `light`, porque o base some sobre #0c0c0c. O roxo claro (#9933dd) marca
   3,6:1 no escuro: só entra como grafismo (fio, ponto, numeral grande), nunca
   como texto pequeno.
   ========================================================================== */
:root {
  --m3-i: var(--purple);        /* #6600aa · C base */
  --m3-c: var(--blue-deep);     /* #0044aa · E base */
  --m3-p: var(--green);         /* #007a40 · S base */
  --m3-i-luz: #9933dd;          /* C light */
  --m3-c-luz: var(--blue);      /* #3377ee · E light */
  --m3-p-luz: #00bb60;          /* S light */
  --m3-borda: #eaeaea;          /* gray-100 */
  --m3-borda-escura: rgba(255, 255, 255, .09);
  /* par CLARO de --card-escuro/-hover/-anel (styles.css :root) — mesmos
     valores, direção contrária: fundo sobe de tinta em vez de descer,
     o anel de foco é escuro a 9% em vez de branco a 9%. */
  --card-claro: #ffffff;
  --card-claro-hover: #fafafa;
  --card-claro-anel: inset 0 0 0 1px rgba(12, 12, 12, .09);
}

/* largura base da página: 1440px, não os 1280px que styles.css/topbar.css
   usam nas outras páginas da família. */
body.m3 { --content: 1440px; background: var(--paper-fa); }

/* o desconto pela gaveta da Iara só existe em telas largas — mesma faixa
   de topbar.css (`@media (min-width: 1361px) { body { --content: min(...) } }`).
   Abaixo disso, `--content` fixo não atrapalha: a viewport já é bem menor
   que 1440, e quem dá o respiro lateral é só o padding do `.m3-in`. Repetir
   o `calc(100vw - 2 * var(--gutter))` em QUALQUER largura — o que a v1
   deste arquivo fazia — subtrai o gutter duas vezes no mobile: uma no
   max-width (via `min()`), outra no padding do próprio `.m3-in`. O
   resultado era uma margem lateral em dobro, sem bater com a home. */
@media (min-width: 1361px) {
  body.m3 { --content: min(1440px, calc(100vw - var(--iara-cede, 0px) - 2 * var(--gutter))); }
}

.m3-in {
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.m3-sec { padding: 140px 0; position: relative; }
.m3-sec--claro { background: var(--paper-fa); color: var(--ink); }
.m3-sec--f5 { background: var(--paper-f5); color: var(--ink); }
.m3-sec--escuro { background: var(--ink); color: var(--paper-fa); }

.m3-t2 {
  font-family: var(--display);
  font-weight: normal;
  /* mesma escala de display do resto do site (medida ao vivo em loomty.com:
     .display-54/.hero__title/.cta__title convergem para o mesmo valor,
     sem um degrau maior para título de herói). Antes ia a 56px — maior
     que qualquer título real do site. */
  font-size: clamp(30px, 25px + 1.4vw, 42.948px);
  line-height: 1.04;
  letter-spacing: -.5px;
  margin-top: 16px;
  text-wrap: balance;
}
.m3-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-grey);
  max-width: 560px;
}
.m3-sec--escuro .m3-lede { color: var(--text-grey-a1); }

.m3-cabeca { max-width: 760px; }
.m3-cabeca .m3-lede { margin-top: 24px; }
.m3-cabeca--centro { margin: 0 auto; text-align: center; }
.m3-cabeca--centro .m3-lede { margin-left: auto; margin-right: auto; }
/* pedido do Márcio (26/09): a introdução do bloco Os três eixos em duas
   linhas, não três — largura própria, maior que o .m3-lede padrão. */
#eixos > .m3-in > .m3-cabeca .m3-lede { max-width: 660px; }
.m3-cabeca--dupla {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: end;
}
.m3-cabeca--dupla .m3-lede { margin-top: 0; }

.m3-acoes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.m3-acoes--centro { justify-content: center; }

/* ---------- os fios ---------- */
.m3-fio {
  fill: none;
  stroke-width: 4;              /* border/pillar */
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.m3-fio--i { stroke: var(--m3-i-luz); }
.m3-fio--c { stroke: var(--m3-c-luz); }
.m3-fio--p { stroke: var(--m3-p-luz); }

/* ==========================================================================
   1 · ABERTURA
   ========================================================================== */
.m3-hero {
  position: relative;
  background: var(--ink);
  color: var(--paper-fa);
  padding: 156px 0 0;
  overflow: hidden;
  isolation: isolate;
}
/* A camada dos fios é a faixa do título: mora dentro do H1, sobe e desce
   com ele e só se estica na largura, de borda a borda da tela. Como o
   `preserveAspectRatio="none"` faz o viewBox acompanhar essa faixa, os
   fios cruzam as letras grandes e nunca alcançam a linha de apoio, em
   qualquer largura de viewport — não há altura fixa para desalinhar.
   O `min(100vw, …)` no `left` é porque abaixo de 1361px o --content fica
   fixo em 1440, mais largo que a tela: sem ele a camada andava para a
   direita (+505px em 390, os fios sumiam do celular). */
.m3-fios {
  position: absolute;
  top: -12px;
  left: calc(-1 * ((100vw - min(100vw, var(--content))) / 2 + var(--gutter)));
  width: 100vw;
  /* altura explícita, e não `bottom` + `height: auto`: num elemento
     substituído (o SVG) o `auto` cairia na proporção do viewBox e o
     `bottom` seria ignorado, deixando a faixa alta demais ou baixa
     demais conforme a largura da tela. */
  height: calc(100% + 18px);
  max-width: none;
  pointer-events: none;
}
.m3-fios--atras { z-index: 0; opacity: .9; }
/* as pontas nunca aparecem: o fio nasce e morre fora da tela, e a máscara
   ainda esvai as bordas para ele entrar e sair como luz, não como traço. */
.m3-fios {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
/* paleta da abertura: as cores frias do DS nos tons luz — violeta,
   azul e verde, as mesmas famílias que marcam as três leituras no resto
   da página. Os pontos das perguntas, sobre o chip branco, levam o tom
   base de cada família para não sumirem. */
.m3-hero {
  --m3-h1: var(--m3-i-luz);  /* #9933dd */
  --m3-h2: var(--m3-c-luz);  /* #3377ee */
  --m3-h3: var(--m3-p-luz);  /* #00bb60 */
}
.m3-hero .m3-fio { stroke-width: 3; }
.m3-hero .m3-fio--i { stroke: var(--m3-h1); }
.m3-hero .m3-fio--c { stroke: var(--m3-h2); }
.m3-hero .m3-fio--p { stroke: var(--m3-h3); }

.m3-hero__in {
  position: relative;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 56px;
  align-items: center;
}
.m3-hero__texto { position: relative; }

.m3-hero__t {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-weight: normal;
  /* 2x o tamanho anterior (36.667px → 49.615px): o teto vira 99.23px, o
     dobro exato. O piso não dobra junto porque a 74px "só o começo." não
     cabe numa linha só em telas de 390px — a curva sobe de 60px até o
     dobro, e já bate no teto a partir de ~1280px. */
  font-size: clamp(60px, 42.7px + 4.44vw, 99.23px);
  /* a entrelinha real do título. Cada linha vive dentro de um `.m3-linha`
     com `overflow: hidden` para a entrada deslizante; o recorte é feito
     pelo padding de `.m3-linha`, e não por um line-height apertado, então
     aqui o valor é só ritmo tipográfico. */
  line-height: .95;
  letter-spacing: -.5px;
  /* respiros medidos do glifo, não da caixa: a folga de .16em que
     `.m3-linha` abre em cima e embaixo (para o recorte não encostar nas
     ascendentes e descendentes) é descontada aqui, para que o branco que
     se vê seja 16px da eyebrow ao título e 24px do título à linha de
     apoio — a grade de 8px do bloco. */
  margin-top: calc(16px - .16em);
  margin-bottom: calc(-1 * .16em);
}
/* O padding abre a folga simétrica do recorte; o negativo de -.32em em
   cada linha seguinte devolve a folga das duas linhas vizinhas, de modo
   que o passo entre as linhas seja exatamente o line-height. */
.m3-linha { display: block; overflow: hidden; padding: .16em 0; margin-top: -.32em; }
/* :first-of-type, e não :first-child, porque o primeiro filho do H1 é a
   camada de fios (SVG). */
.m3-linha:first-of-type { margin-top: 0; }
.m3-linha > span { display: inline-block; }

.m3-hero__l {
  position: relative;
  z-index: 3;
  /* 24px: mesma grade de 8px do respiro eyebrow→título (16px). */
  margin-top: 24px;
  max-width: 520px;
  /* 15.2px/1.58, os mesmos do .ip-hero__l em /professores — antes 16px/1.6. */
  font-size: 15.2px;
  line-height: 1.58;
  color: var(--text-grey-a1);
}

/* 32px, fechando a escala 16 / 24 / 32 do bloco de texto do herói. */
.m3-hero .m3-acoes { position: relative; z-index: 3; margin-top: 32px; }

.m3-hero__foto {
  position: relative;
  z-index: 3;
  margin: 0;
  border-radius: var(--radius-16);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 16px 56px rgba(0, 0, 0, .14);
}
.m3-hero__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* foto do jovem à janela (23/09/2026): 27% põe o rosto no terço esquerdo
     do 4:5 e deixa o ar do olhar à direita; 36% mantém o cabelo inteiro no
     16:10 do tablet */
  object-position: 27% 36%;
  transform: scale(1.02);
}
.m3-hero__foto::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 12, 12, 0) 45%, rgba(12, 12, 12, .72) 100%);
  pointer-events: none;
}

.m3-perguntas {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.m3-perguntas li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;                 /* touch-sm */
  padding: 0 16px 0 12px;
  border-radius: var(--radius-8);
  background: var(--paper-fa);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.m3-ponto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fio);
  flex: none;
}
/* no claro o ponto usa o base, que tem contraste sobre #fafafa */
.m3-perguntas li:nth-child(1) .m3-ponto { background: var(--m3-i); }
.m3-perguntas li:nth-child(2) .m3-ponto { background: var(--m3-c); }
.m3-perguntas li:nth-child(3) .m3-ponto { background: var(--m3-p); }

.m3-numeros {
  position: relative;
  z-index: 3;
  max-width: var(--content);
  /* mesmo respiro do .ip-hero__nums em /professores: 64px até a linha,
     32px dela até o conteúdo — antes 100px/48px, quase o dobro. */
  margin: 64px auto 0;
  padding: 32px var(--gutter) 72px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 30px;
}
.m3-numeros::before {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter); top: 0;
  height: 1px;
  background: var(--m3-borda-escura);
}
.m3-numeros dt {
  font-family: var(--display);
  font-size: 31px;
  line-height: 1.06;
  color: var(--paper-fa);
}
.m3-numeros dd {
  margin: 12px 0 0;
  font-size: 13.4px;
  line-height: 1.58;
  color: var(--text-grey-a1);
}

/* ==========================================================================
   2 · PONTO CEGO
   ========================================================================== */
.m3-cego { margin-top: 72px; }

.m3-alterna {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: var(--radius-8);
  background: var(--paper-f2);
}
.m3-alterna__b {
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font: var(--btn-fw) var(--btn-fs)/1 var(--sans);
  letter-spacing: var(--btn-ls);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.m3-alterna__b:hover { color: var(--ink); }
.m3-alterna__b[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper-fa);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

/* os quatro casos são "cards compostos" (ver o bloco CARDS COMPOSTOS, no
   fim da folha): aqui só a grade e o que é próprio do caso. */
.m3-casos { list-style: none; margin-top: 24px; }
/* Respiro maior que o resto do "cards compostos", pedido do Márcio
   (24/09/2026) — a margem da frase (`.m3-caso .m3-composto__t`, abaixo)
   soma com esta para o total frase→barras. */
.m3-caso__leitura { display: flex; flex-direction: column; gap: 8px; margin: 0 0 32px; }

.m3-nivel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  font: 700 10.339px/1 var(--mono);
  letter-spacing: 1.527px;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: opacity .28s ease, transform .28s ease;
}
.m3-nivel::after {
  content: "";
  width: 72px;
  height: 8px;
  border-radius: 999px;
  --cheio: calc(var(--n) * 33.34%);
  background:
    linear-gradient(90deg, var(--fio) 0 var(--cheio), #d4d4d4 var(--cheio) 100%);
}
.m3-nivel--trava { color: var(--ink); }
.m3-nivel--trava::before {
  content: "trava";
  position: absolute;
  right: 80px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper-fa);
  font-size: 9px;
  letter-spacing: 1px;
}
.m3-nivel { position: relative; }
.m3-cego[data-modo="interesse"] .m3-nivel--trava::before { display: none; }
.m3-nivel[data-n="1"] { --n: 1; }
.m3-nivel[data-n="2"] { --n: 2; }
.m3-nivel[data-n="3"] { --n: 3; }

/* Cabe numa linha no tamanho normal do componente (nowrap já vem do
   `.m3-composto__tag` base) — "conhecer o mundo do trabalho" foi
   encurtado para "mundo do trabalho" por isso (24/09/2026): texto mais
   curto, não fonte menor. */
.m3-caso__v.m3-composto__tag { max-width: 100%; color: var(--text-grey); }
.m3-caso__label { color: var(--tom); }
.m3-caso__v b { color: inherit; font-weight: inherit; }

/* os dois modos */
.m3-v--interesse { display: none; }
.m3-cego[data-modo="interesse"] .m3-v--interesse { display: inline; }
.m3-cego[data-modo="interesse"] .m3-v--loomty { display: none; }
.m3-cego[data-modo="interesse"] .m3-nivel--oculto { opacity: .12; transform: translateX(-4px); }

.m3-cego__nota {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-grey);
}
.m3-cego__nota b { color: var(--ink); }

/* ==========================================================================
   3 · TRÍADE
   ========================================================================== */
.m3-triade { margin-top: 72px; }
/* os fios da Tríade (--fio, por eixo) viram o --tom do cartão composto */
.m3-leitura { --tom: var(--fio); }
.m3-facetas {
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.m3-facetas li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: var(--radius-8);
  background: rgba(12, 12, 12, .04);   /* o tom do poço do ícone */
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-secondary);
}

/* ==========================================================================
   4 · CRUZAMENTO
   ========================================================================== */
.m3-cruza {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: center;
}
.m3-cruza__texto .m3-lede { margin-top: 24px; }

.m3-bussola {
  position: relative;
  margin-top: 32px;
  padding: 24px 24px 24px 32px;
  border-radius: var(--radius-8);
  background: var(--card-escuro-hover);
  box-shadow: var(--card-escuro-anel);
}
.m3-bussola__fio {
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--m3-i-luz);
}
.m3-bussola p { font-size: 14.316px; line-height: 1.6; color: var(--text-grey-a1); }
.m3-bussola b { color: var(--paper-fa); }

.m3-cruza__nota {
  margin-top: 32px;
  font-size: 14.316px;
  line-height: 1.6;
  color: var(--text-grey-a1);
}
.m3-cruza__nota b { color: var(--paper-fa); }

.m3-matriz {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  margin: 0 0 40px 40px;
  border-radius: var(--radius-16);
  background: var(--card-escuro-moldura);
  aspect-ratio: 1 / 1;
}
.m3-eixo {
  position: absolute;
  font: 700 10.339px/1 var(--mono);
  letter-spacing: 1.527px;
  text-transform: uppercase;
  color: var(--text-grey-a1);
  white-space: nowrap;
}
.m3-eixo span { color: var(--paper-fa); margin-left: 6px; }
.m3-eixo--x { left: 8px; bottom: -28px; }
.m3-eixo--y {
  left: -28px; bottom: 8px;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  translate: 10px 0;
}

.m3-marcador {
  position: absolute;
  z-index: 2;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--tom-ativo, #00bb60);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 0 32px var(--tom-ativo, #00bb60);
  pointer-events: none;
  left: 0; top: 0;
  opacity: 0;
}

.m3-q {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 24px;
  border: 0;
  border-radius: var(--radius-8);
  background: var(--card-escuro);
  color: var(--paper-fa);
  font: inherit;
  cursor: pointer;
  transition: background-color .22s ease, box-shadow .22s ease;
}
.m3-q:hover,
.m3-q.is-ativo {
  background: var(--card-escuro-hover);
  box-shadow: var(--card-escuro-anel);
}
.m3-q__tag {
  padding-right: 32px;
  font: 700 10.339px/1.3 var(--mono);
  letter-spacing: 1.527px;
  text-transform: uppercase;
  color: var(--tom);
}
.m3-q__n {
  margin-top: 16px;
  font-family: var(--display);
  font-size: 56px;
  line-height: .9;
  color: #292929;               /* gray-800: o retrato em repouso */
  transition: color .22s ease;
}
.m3-q.is-ativo .m3-q__n, .m3-q:hover .m3-q__n { color: var(--tom); }
.m3-q__t {
  margin-top: auto;
  padding-top: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}
.m3-q__d {
  margin-top: 8px;
  font-size: 13.4px;
  line-height: 1.55;
  color: var(--text-grey-a1);
}

/* ==========================================================================
   5 · A PARTIDA
   ========================================================================== */
/* a partida também é um par de cards compostos: a carta é o cartão
   ESCURO (o mesmo par do destaque dos diferenciais), o destino é o claro.
   Seletores dobrados porque o componente genérico vem depois na folha. */
.m3-jogo { margin-top: 72px; }
.m3-jogo.m3-compostos { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.m3-carta.m3-composto { background: var(--card-escuro); color: var(--paper-fa); padding-bottom: 28px; }
.m3-carta.m3-composto:hover { background: var(--card-escuro-hover); box-shadow: var(--card-escuro-anel); }
.m3-carta .m3-composto__icone { background: rgba(255, 255, 255, .04); }
.m3-carta .m3-composto__t {
  font-family: var(--sans);
  font-size: clamp(28px, 2.9vw, 39px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--paper-fa);
  max-width: 560px;
}
/* sem a tag "pergunta de exemplo" (removida), o grupo de respostas é o
   último item — encosta no rodapé com o mesmo padding das laterais */
.m3-carta .m3-respostas { margin-bottom: 0; }
/* no escuro o contorno da tag é a --linha da superfície escura da home */
.m3-carta .m3-composto__tag { box-shadow: inset 0 0 0 1px #262626; }

/* ---------- .m3-resp — layout emprestado do cartão jogável do site
   (index.html/.jogo__resposta): rótulo à esquerda, tecla numerada à
   direita, anel colorido em giro no hover/selecionada. Conteúdo e
   comportamento continuam sendo os do bloco "aonde vai esta resposta". */
.m3-respostas {
  margin: 48px 0 24px;           /* 24 até a tag do cartão composto */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.m3-resp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-height: 46px;
  padding: 11px 14px;
  border: 3px solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(#111111, #111111) padding-box,
    linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)) border-box;
  font: 700 12px/1 var(--sans);
  letter-spacing: -.12px;
  text-align: left;
  white-space: nowrap;
  color: var(--paper-fa);
  cursor: pointer;
  transition: transform .26s cubic-bezier(.22, .8, .26, 1),
              background-color .2s ease, box-shadow .26s ease, color .18s ease;
}
.m3-resp:hover,
.m3-resp[aria-pressed="true"] {
  animation: jogo-anel-gira 5s linear infinite;
  background:
    linear-gradient(#111111, #111111) padding-box,
    conic-gradient(from var(--jogo-anel), #ffc800 0deg, #f2007e 144deg, #129f73 260deg, #ffc800 1turn) border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -8px rgba(0, 0, 0, .5);
}
.m3-resp:hover { transform: translateY(-3px); }
.m3-resp[aria-pressed="true"] {
  background:
    linear-gradient(var(--paper-fa), var(--paper-fa)) padding-box,
    conic-gradient(from var(--jogo-anel), #ffc800 0deg, #f2007e 144deg, #129f73 260deg, #ffc800 1turn) border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -8px rgba(0, 0, 0, .55);
  color: var(--ink);
}
.m3-resp[aria-pressed="true"] .m3-resp__n { border-color: rgba(12, 12, 12, .28); color: rgba(12, 12, 12, .62); }
.m3-resp__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  transition: border-color .18s ease, color .18s ease;
}

/* o painel troca de conteúdo por resposta; o respiro de 24px até a tag
   mora no último texto, como no cartão genérico */
.m3-destino .m3-composto__d { min-height: 0; }
.m3-destino__p .m3-composto__d:last-child { margin-bottom: 24px; }

@property --jogo-anel {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes jogo-anel-gira { to { --jogo-anel: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .m3-resp, .m3-resp:hover, .m3-resp[aria-pressed="true"] { animation: none; }
}

/* ---------- linha do tempo do fluxo ----------
   Componente canônico do site (/professores, /instituicoes): bolinha e
   trilho numa linha do tempo só, trilho de centro a centro dos nós, cada
   trecho perseguindo o nó que acabou de aparecer. Portado 1:1 (classes
   m3-* para ficar no namespace da v3, valores e comportamento idênticos). */
.m3-fluxo {
  position: relative;
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 40px;
  list-style: none;
  padding: 0;
}
/* renomeada de `.m3-linha` para `.m3-fluxo-linha`: o nome colidia com as
   linhas do H1 do herói e o `margin-top: 100px` daqui vencia no cascade,
   abrindo 100px entre cada linha do título. */
.m3-fluxo-linha { position: relative; margin-top: 100px; }
.m3-linha__trilho {
  position: absolute;
  top: 20px;
  left: calc((100% - 120px) / 8);
  right: calc((100% - 120px) / 8);
  height: 3px;
  border-radius: 2px;
  background: var(--espectro);
  transform-origin: left;
}
.m3-passo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.m3-passo__no {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper-fa);
  box-shadow: inset 0 0 0 1.5px rgba(12, 12, 12, .18);
}
.m3-passo__num { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .06em; }
.is-fim .m3-passo__no {
  background: var(--orange);
  box-shadow: inset 0 0 0 1.5px var(--orange);
  animation: m3-anel 2.6s ease-out 1.2s infinite;
}
@keyframes m3-anel {
  0%       { box-shadow: inset 0 0 0 1.5px var(--orange), 0 0 0 0 rgba(204, 51, 0, .38); }
  55%,100% { box-shadow: inset 0 0 0 1.5px var(--orange), 0 0 0 16px rgba(204, 51, 0, 0); }
}
.m3-passo__t { font-family: var(--sans); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); }
.m3-passo__d { margin-top: 6px; font-size: 13px; line-height: 1.62; color: var(--text-secondary); max-width: 26ch; }

@media (prefers-reduced-motion: reduce) {
  .is-fim .m3-passo__no { animation: none; }
  .m3-linha__trilho { transform: scaleX(1); }
}

/* ==========================================================================
   6 · RELATÓRIO
   ========================================================================== */
.m3-rel { overflow: hidden; }
.m3-rel__in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 100px;
  align-items: center;
}
.m3-folhas { position: relative; aspect-ratio: 1200 / 1699; max-width: 460px; }
.m3-folha {
  position: absolute;
  width: 88%;
  height: auto;
  border-radius: var(--radius-8);
  box-shadow: 0 16px 56px rgba(0, 0, 0, .35);
}
.m3-folha--tras { right: 0; top: 0; transform: rotate(5deg); }
.m3-folha--frente { left: -8%; top: 46%; width: 104%; transform: rotate(-3deg); }

.m3-entregas {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 48px;
}
.m3-entregas > div { padding-top: 16px; border-top: 1px solid var(--m3-borda-escura); }
.m3-entregas dt { font-size: 16px; font-weight: 700; color: var(--paper-fa); }
.m3-entregas dd { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-grey-a1); }

/* ==========================================================================
   7 · A BASE, sobre o tear
   ========================================================================== */
.m3-base {
  position: relative;
  padding: 140px 0;
  background: var(--ink);
  color: var(--paper-fa);
  overflow: hidden;
  isolation: isolate;
}
.m3-base__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  z-index: -2;
  opacity: .72;
}
.m3-base::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(12, 12, 12, .55) 28%, rgba(12, 12, 12, .8) 62%, var(--ink) 100%);
}
.m3-base .m3-lede { color: var(--text-grey-a1); }

.m3-autores {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.m3-autor { position: relative; padding-top: 32px; }
.m3-autor::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  border-radius: 4px;
  background: var(--fio);
}
.m3-autor__r {
  font: 700 10.339px/1 var(--mono);
  letter-spacing: 1.527px;
  text-transform: uppercase;
  color: var(--text-grey-a1);
}
.m3-autor__n {
  margin-top: 16px;
  font-family: var(--display);
  font-size: clamp(48px, 5.6vw, 76px);
  line-height: .9;
}
.m3-autor__d { margin-top: 16px; font-size: 14.316px; line-height: 1.6; color: var(--text-grey-a1); }

.m3-declara {
  margin-top: 100px;
  padding: 48px;
  border-radius: var(--radius-16);
  background: var(--card-escuro);
  box-shadow: var(--card-escuro-anel);
}
.m3-declara__grade {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.m3-declara__t { font-size: 16px; font-weight: 700; }
.m3-declara__d { margin-top: 8px; font-size: 13.4px; line-height: 1.6; color: var(--text-grey-a1); }

.m3-refs { margin-top: 32px; }
.m3-refs summary {
  display: inline-flex;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font: 700 10.339px/1 var(--mono);
  letter-spacing: 1.527px;
  text-transform: uppercase;
  color: var(--text-grey-a1);
}
.m3-refs summary::-webkit-details-marker { display: none; }
.m3-refs[open] summary span { rotate: 45deg; }
.m3-refs summary span { display: inline-block; transition: rotate .2s ease; }
.m3-refs ol {
  margin-top: 24px;
  padding-left: 18px;
  list-style: decimal;
  display: grid;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-grey-a1);
}

/* ==========================================================================
   8 · DIFERENCIAIS
   ========================================================================== */
.m3-mosaico { margin-top: 72px; }
/* invisível para o grid: os cartões de dentro contam como filhos diretos
   de `.m3-mosaico` e ocupam a grade normalmente. Só ganha existência
   própria no carrossel de celular (ver RESPONSIVO). */
.m3-mosaico__trilho { display: contents; }
/* 8 cartões em 3 colunas: o destaque ocupa duas, os outros sete fecham
   as 9 casas — 3 fileiras cheias, nenhum buraco. */
@media (min-width: 901px) {
  .m3-mosaico.m3-compostos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m3-peca--destaque { grid-column: span 2; }
}
/* o destaque é o par ESCURO do mesmo cartão (#0C0C0C, poço de luz a 4%,
   hover #111111 + anel), dentro da moldura clara — é o único escuro da
   grade, e é isso que o destaca. Leva os três fios no pé. Seletores
   dobrados porque o cartão genérico (CARDS COMPOSTOS) vem depois na folha. */
.m3-composto.m3-peca--destaque { background: var(--card-escuro); overflow: hidden; }
.m3-composto.m3-peca--destaque:hover { background: var(--card-escuro-hover); box-shadow: var(--card-escuro-anel); }
.m3-peca--destaque .m3-composto__icone { background: rgba(255, 255, 255, .04); }
.m3-peca--destaque .m3-composto__t { font-size: clamp(31px, 2.6vw, 39px); color: var(--paper-fa); }
.m3-peca--destaque .m3-composto__d { color: var(--text-grey-a1); max-width: 520px; }
.m3-peca__fios { display: block; max-width: none; width: calc(100% + 56px); margin: auto -28px -32px; height: 140px; padding-top: 24px; }

/* ==========================================================================
   9 · PARA QUEM
   ========================================================================== */
.m3-quem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.m3-quem__foto { margin: 0; border-radius: var(--radius-16); overflow: hidden; aspect-ratio: 1 / 1; }
.m3-quem__foto img { width: 100%; height: 100%; object-fit: cover; }
.m3-publicos { margin: 48px 0; }
.m3-publicos li {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid #d4d4d4;
}
.m3-publicos li:last-child { border-bottom: 1px solid #d4d4d4; }
.m3-publicos__t { font-family: var(--display); font-size: 25px; line-height: 1.04; }
.m3-publicos__d { font-size: 14.316px; line-height: 1.6; color: var(--text-grey); }

/* ==========================================================================
   10 · PERGUNTAS
   ========================================================================== */
/* Mesmo componente de /preco (.pr-faq*), namespace m3-: card com borda,
   ícone +/− em verde e o painel abrindo por altura animada (ver o script
   no fim do body). Antes era um `.m3-acordeao` de <details>/<summary> com
   layout de duas colunas (cabeça fixa + foto) — trocado porque o pedido
   foi replicar o layout de /preco, que é lista cheia, sem foto ao lado. */
.m3-faq-lista {
  width: 100%;
  max-width: var(--content);
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m3-faq-item {
  border: 1px solid #eaeaea;
  border-radius: var(--radius-8);
  background: var(--paper-fa);
  overflow: hidden;
  transition: background-color .22s ease, border-color .22s ease;
}
.m3-faq-item:hover,
.m3-faq-item.is-aberto { background: var(--paper-f5); border-color: #e0e0e0; }

.m3-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 16.5px;
  line-height: 24px;
  color: var(--ink);
}
.m3-faq-q:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.m3-faq-ic {
  flex: none;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--green), var(--green)) center/13px 1.6px no-repeat,
    linear-gradient(var(--green), var(--green)) center/1.6px 13px no-repeat;
  transition: background-size .28s cubic-bezier(.16, 1, .3, 1);
}
.m3-faq-item.is-aberto .m3-faq-ic { background-size: 13px 1.6px, 1.6px 0; }

.m3-faq-a { height: 0; overflow: hidden; }
.m3-faq-a__in { padding: 0 24px 24px; font-size: 14.5px; line-height: 23px; color: var(--text-grey); }

/* ==========================================================================
   11 · FECHO
   ========================================================================== */
.m3-fecho {
  background: var(--ink);
  color: var(--paper-fa);
  padding: 140px var(--gutter);
  overflow: clip;
}
.m3-fecho__palco { position: relative; max-width: 960px; margin: 0 auto; }
.m3-fecho__in { position: relative; z-index: 1; text-align: center; padding: 72px 0; }
.m3-fecho__t {
  margin-top: 16px;
  font-family: var(--display);
  font-weight: normal;
  /* mesma escala de .cta__title na home (var(--fs-display) lá, medida ao
     vivo em loomty.com): antes ia a 92px, mais que o dobro do maior
     título real do site. */
  font-size: clamp(30px, 25px + 1.4vw, 42.948px);
  line-height: 1.04;
  letter-spacing: -.5px;
  text-wrap: balance;
}
.m3-fecho__l {
  margin: 24px auto 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-grey-a1);
}
.m3-fecho .palco__brilho { opacity: .38; }
.m3-fecho .palco__nucleo { opacity: .34; }

/* ==========================================================================
   CTA · faixas espalhadas pela página
   Cartão escuro com o fio do espectro no topo — o mesmo motivo do
   `.m3-linha__trilho` da seção 5, aqui como assinatura da marca, não como
   medidor de progresso. Sobre fundo claro (as duas seções que as usam),
   funciona como respiro visual e reforça o convite sem repetir o fecho.
   ========================================================================== */
.m3-cta-faixa {
  position: relative;
  margin-top: 96px;
  padding: 40px 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  border-radius: var(--radius-16);
  background: var(--ink);
  color: var(--paper-fa);
}
.m3-cta-faixa__fio {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--espectro);
}
.m3-cta-faixa__t {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  max-width: 32ch;
}
.m3-cta-faixa .btn { position: relative; z-index: 1; flex: none; }

/* ==========================================================================
   CARDS COMPOSTOS
   --------------------------------------------------------------------------
   O componente `.delivers__cards` + `.deliver` da home (#o-que, variante
   `.empilhada`, par `.sup--clara` — assets-home-nova/css/loomty.css), portado
   com outro nome porque esta página carrega styles.css, onde `.deliver` é o
   cartão ESCURO do site antigo com larguras próprias por breakpoint.
   Mesmos valores, medidos a 1440px:

   · moldura: flex, gap 8, padding 8, raio 16, #F2F2F2, até 1440px e centrada (na home é 1280)
   · cartão: coluna, 32×28 (≤720px: 26×22), raio 8, #FAFAFA; sem contorno em
     repouso; hover -4px + #FFFFFF + sombra 0 18 40 a 8%
   · anatomia: poço de ícone 46 → 24 → título Tanker 23 caixa-alta → 10 →
     texto 14,3/1,52 (piso de duas linhas) → 24 → tag no rodapé (mono 10,5,
     contorno inset 1px, margin-top:auto para as tags alinharem)
   · cor por cartão em `--tom` (ícone e tag)

   Usado nos três grupos de cartões da página: os casos do ponto cego, a
   Tríade e o mosaico de diferenciais. A entrada em cascata (e a moldura
   surgindo por trás) mora em como-funciona.js, porta do cards-reveal.js.
   ========================================================================== */
.m3-compostos {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-16);
  background: var(--paper-f2);
}

.m3-composto {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: var(--radius-8);
  background: var(--paper-fa);
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.m3-composto:hover {
  transform: translateY(-4px);
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(12, 12, 12, .08);
}

.m3-composto__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  margin-bottom: 24px;
  border-radius: var(--radius-8);
  background: rgba(12, 12, 12, .04);
}
.m3-composto__icone svg { width: 24px; height: 24px; color: var(--tom); }

.m3-composto__t {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
/* Os quatro casos ("Ama biologia…") são frases inteiras, não títulos: Plus
   Jakarta Sans em caixa normal, pedido do Márcio (24/09/2026). Os títulos
   de verdade dos cartões compostos (Interesse, Confiança…) seguem em Tanker. */
.m3-caso .m3-composto__t {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-transform: none;
  /* Pedido do Márcio (24/09/2026): mais respiro até as barras (32px) do
     que o 10px genérico do resto do "cards compostos". */
  margin-bottom: 32px;
}
.m3-composto__d {
  margin: 0 0 24px;
  min-height: calc(2 * 1.52em);
  font-size: 14.3px;
  line-height: 1.52;
  color: var(--text-grey);
}
/* sem tag no pé (o mosaico), o respiro do texto viraria espaço morto —
   mesma exceção de `.delivers__cards--relatorio` na home */
.m3-composto__d:last-child { margin-bottom: 0; }

.m3-composto__tag {
  order: 9;
  align-self: flex-start;
  margin: auto 0 0;
  padding: 7px 12px;
  border-radius: var(--radius-8);
  box-shadow: inset 0 0 0 1px #d4d4d4;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tom);
}

/* Espaço horizontal só dos 4 casos (não da Tríade nem do mosaico, que
   dividem o mesmo .m3-compostos), e só a partir de onde a faixa é grade
   (≥901px — abaixo disso vira carrossel de celular com sua própria
   largura calc, não mexer): gap e moldura voltaram a 8 em 26/09 (pedido do Márcio: o mesmo padding das outras molduras de cards compostos), cartão 28→36 nas
   laterais — pedido do Márcio (24/09/2026), respiro maior entre as
   frases mais curtas que a troca de fonte deixou. */
@media (min-width: 901px) {
  .m3-casos.m3-compostos { gap: 8px; padding: 8px; }
  .m3-casos > .m3-composto { padding-left: 36px; padding-right: 36px; }
}

/* 4 lado a lado só cabem com folga acima de 1100px; entre 901 e 1100 a
   faixa dos casos vira 2×2, como já era. calc ajustado ao gap de 8px
   (metade do gap = 4px). */
@media (max-width: 1100px) and (min-width: 901px) {
  .m3-casos { flex-wrap: wrap; }
  .m3-casos > .m3-composto { flex: 1 1 calc(50% - 4px); }
}

@media (max-width: 900px) {
  .m3-compostos { flex-direction: column; }
  .m3-mosaico__trilho { display: flex; flex-direction: column; gap: 8px; }
  /* em coluna, a base 0 do `flex: 1 1 0` vira ALTURA zero — o destaque
     (overflow:hidden) sumia numa faixa de 50px */
  .m3-compostos > .m3-composto,
  .m3-mosaico__trilho > .m3-composto { flex: 0 0 auto; }
}
@media (max-width: 720px) {
  .m3-composto { padding: 26px 22px; }
  .m3-peca__fios { width: calc(100% + 44px); margin: auto -22px -26px; }
}

/* carrossel de celular: a moldura É o trilho (padding 8 vira o respiro do
   encaixe), cartão com 100% − 52px para o seguinte espiar pela beirada.
   No mosaico o destaque fica fora — fixo em cima — e o trilho rola por
   dentro da mesma moldura. */
@media (max-width: 768px) {
  .m3-casos,
  .m3-triade,
  .m3-mosaico__trilho {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-inline-start: 8px;
  }
  .m3-casos::-webkit-scrollbar,
  .m3-triade::-webkit-scrollbar,
  .m3-mosaico__trilho::-webkit-scrollbar { display: none; }
  .m3-casos > .m3-composto,
  .m3-triade > .m3-composto,
  .m3-mosaico__trilho > .m3-composto {
    flex: 0 0 calc(100% - 52px);
    width: calc(100% - 52px);
    scroll-snap-align: start;
  }
  .m3-casos + .carrossel-nav,
  .m3-triade + .carrossel-nav,
  .m3-mosaico + .carrossel-nav { margin-top: var(--sp-3); }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1100px) {
  .m3-hero__in { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
  .m3-declara__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .m3-sec, .m3-base, .m3-fecho { padding-top: 100px; padding-bottom: 100px; }
  .m3-hero { padding-top: 128px; }
  .m3-hero__in { grid-template-columns: 1fr; }
  .m3-hero__foto { aspect-ratio: 16 / 10; }
  /* a altura dos fios não é mais fixa por breakpoint: a camada é a faixa
     do título e se ajusta sozinha. */
  .m3-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 72px; }
  .m3-cabeca--dupla { grid-template-columns: 1fr; gap: 24px; }
  .m3-cruza { grid-template-columns: 1fr; gap: 56px; }
  /* Na vertical o trilho não pode ser uma barra só: os passos têm alturas
     diferentes e ela ultrapassaria o último nó. Cada passo carrega o
     próprio segmento, com a fatia do espectro que lhe cabe. */
  .m3-fluxo { grid-template-columns: 1fr; gap: 28px; }
  .m3-linha__trilho { display: none; }
  .m3-passo {
    display: grid; grid-template-columns: 44px 1fr;
    align-items: start; text-align: left; column-gap: 18px; row-gap: 3px;
  }
  .m3-passo__no { grid-row: 1 / span 3; margin-bottom: 0; }
  .m3-passo__d { max-width: none; }
  .m3-passo:not(:last-child)::before {
    content: ""; position: absolute; left: 20.5px; top: 44px; bottom: -28px; width: 3px;
    border-radius: 2px;
  }
  .m3-passo:nth-of-type(1)::before { background: linear-gradient(180deg, #cc3300, #cccc00); }
  .m3-passo:nth-of-type(2)::before { background: linear-gradient(180deg, #cccc00, #007a40); }
  .m3-passo:nth-of-type(3)::before { background: linear-gradient(180deg, #007a40, #6600aa); }
  .m3-rel__in { grid-template-columns: 1fr; gap: 72px; }
  .m3-folhas { max-width: 360px; margin: 0 auto; width: 100%; }
  .m3-autores { grid-template-columns: 1fr; gap: 48px; }
  .m3-quem { grid-template-columns: 1fr; gap: 48px; }
  /* sem isto, de 641 a 1024px o .m3-jogo continua em duas colunas (7fr/5fr)
     e os 4 botões de resposta espremem em grid de 4 dentro da metade mais
     estreita — nunca cabe, o texto corta e as teclas se sobrepõem. A
     mudança de coluna aqui, não só em 640px, cobre a faixa inteira onde
     isso quebra. Seletor dobrado: com uma classe só, a regra perdia para
     `.m3-jogo.m3-compostos` (7fr/5fr) e não valia em largura nenhuma. */
  .m3-jogo.m3-compostos { grid-template-columns: 1fr; }
  .m3-respostas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .m3-sec, .m3-base, .m3-fecho { padding-top: 72px; padding-bottom: 72px; }
  .m3-hero { padding-top: 112px; }
  /* de coluna, texto→botão, com o mesmo respiro dos dois lados (32px) em
     vez do padding 28/24 desencontrado — e o botão de ponta a ponta, como
     todo grupo de CTA do site em celular (.cta .btn, .hero__cta .btn em
     styles.css). */
  .m3-cta-faixa {
    flex-direction: column;
    align-items: stretch;
    margin-top: 56px;
    padding: 32px;
    gap: 20px;
  }
  .m3-cta-faixa__t { max-width: none; }
  .m3-cta-faixa .btn { width: 100%; justify-content: center; }

  /* qualquer grupo de CTA da v3 empilha e vira ponta a ponta em celular —
     do herói ao fecho, inclusive quando é um botão só (Para quem). */
  .m3-acoes { flex-direction: column; align-items: stretch; }
  .m3-acoes .btn,
  #para-quem .btn { width: 100%; justify-content: center; }
  .m3-hero__foto { aspect-ratio: 4 / 5; }
  .m3-numeros { grid-template-columns: 1fr; gap: 24px; padding-bottom: 56px; }
  .m3-numeros dt { font-size: 25px; }
  .m3-cego, .m3-triade, .m3-jogo, .m3-mosaico { margin-top: 48px; }
  .m3-alterna { display: flex; }
  .m3-alterna__b { flex: 1; padding: 0 12px; }
  .m3-q__n { opacity: 1; font-size: 40px; }
  .m3-jogo { grid-template-columns: 1fr; }
  .m3-respostas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m3-entregas { grid-template-columns: 1fr; gap: 24px; }
  .m3-declara { padding: 32px 24px; }
  .m3-declara__grade { grid-template-columns: 1fr; gap: 24px; }
  .m3-publicos li { grid-template-columns: 1fr; gap: 8px; }

  /* ---------- carrossel da matriz: mesmo padrão do resto do site
     (.carrossel em responsive.css/styles.css) — flex-row com
     scroll-snap, sem barra, o cartão seguinte espiando pela beirada. Os
     três grupos de cards compostos (casos, tríade, mosaico) viram
     carrossel já em 768px, no bloco CARDS COMPOSTOS. */
  .m3-matriz {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-inline-start: var(--gutter);
  }
  .m3-matriz::-webkit-scrollbar { display: none; }
  .m3-q {
    flex: 0 0 calc(100% - 52px);
    width: calc(100% - 52px);
    max-width: none;
    scroll-snap-align: start;
  }

  /* a matriz vira trilho: eixos e marcador só existem no layout 2x2 */
  .m3-matriz { margin: 0; aspect-ratio: auto; grid-template-rows: none; }
  .m3-matriz .m3-q[data-q="1"] { order: 1; }
  .m3-matriz .m3-q[data-q="2"] { order: 2; }
  .m3-matriz .m3-q[data-q="3"] { order: 3; }
  .m3-matriz .m3-q[data-q="4"] { order: 4; }
  .m3-eixo, .m3-marcador { display: none; }

  /* barra de setas/contador/pontos: mesmo componente compartilhado
     (.carrossel-nav, definido em responsive.css e já usado por /home,
     /preco etc.), só que montado pelo próprio como-funciona.js — o
     carrossel-v2.js compartilhado tem a lista de seletores presa a
     .iara__stack/.vozes__grade. --nav-tinta por padrão é escura (funciona
     em .m3-sec--claro/--f5); a matriz mora em .m3-sec--escuro e precisa
     do par claro, como as outras seções escuras do site já fazem. */
  .m3-matriz + .carrossel-nav { margin-top: var(--sp-3); }

  .m3-sec--escuro .carrossel-nav {
    --nav-tinta: var(--paper-fa);
    --nav-borda: rgba(255, 255, 255, .18);
    --nav-fraco: rgba(255, 255, 255, .34);
  }
}

@media (prefers-reduced-motion: reduce) {
  .m3-nivel, .m3-composto, .m3-q, .m3-alterna__b, .jogo__resposta { transition: none; }
}