/* ==========================================================================
   Mentoria individual — estilos das seções da página (prefixo .mi-)
   Depende de site.css (chrome .lt-: tokens, cabeçalho, botões, rótulos,
   rodapé) e de base.css (.faq/.questions/.support-card, motion, cursor).
   Camada institucional: vermelho, rosa, amarelo, preto, branco e cinzas.
   ========================================================================== */

/* Logo da Mentoria no menu (site.css .lt-topbar__product): filete no vermelho do "Mi". */
:root {
  --lt-product-line: var(--red);
}

/* Seções de largura travada — 1 unidade = 1 px acima de 981 */
@media (min-width: 981px) {
  .mi-hero,
  .mi-pains,
  .mi-steps,
  .mi-topics,
  .mi-teacher,
  .mi-format,
  .mi-quotes,
  .mi-notfor,
  .mi-apply,
  .mi-page .faq,
  .lt-footer {
    --lt-u: 1px;
  }
}

/* Títulos de seção: o display da marca, sem teto menor que a coluna. */
.mi-pains h2,
.mi-steps h2,
.mi-topics h2,
.mi-format h2,
.mi-quotes h2,
.mi-notfor h2,
.mi-apply h2,
.mi-page .faq h2 {
  max-width: none;
  color: var(--black);
  font-size: calc(64 * var(--lt-u));
  line-height: 0.92;
}

/* Cabeçalho de seção: rótulo, título e texto de apoio. */
.mi-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--lt-u));
}

.mi-head--center {
  align-items: center;
  text-align: center;
}

.mi-head__lead {
  max-width: calc(620 * var(--lt-u));
  color: var(--gray-600);
  font-size: calc(18 * var(--lt-u));
  line-height: 1.5;
}

.mi-head--center .mi-head__lead {
  max-width: calc(720 * var(--lt-u));
}

/* Em seção de fundo cinza ou escuro o rótulo é branco (nunca cinza sobre cinza). */
.mi-steps .lt-label,
.mi-topics .lt-label,
.mi-quotes .lt-label,
.mi-page .faq .lt-label {
  background: var(--white);
}

/* ==========================================================================
   1. Hero — retrato em tela cheia, conteúdo na largura toda
   ========================================================================== */
/*
 * Tela cheia menos o menu (sticky, ocupa lugar). O conteúdo não tem largura
 * fixa: só 48 de margem de cada lado e, embaixo, o título com a linha de texto
 * + CTA. Sem rótulo no alto: o logo da mentoria já está no menu. O véu escurece
 * de baixo para cima, onde mora o texto; o rosto, no alto da foto, fica limpo.
 */
.mi-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100svh - var(--lt-header-h));
  padding: clamp(32px, 6svh, 64px) calc(48 * var(--lt-u)) clamp(32px, 6svh, 56px);
  overflow: hidden;
  color: var(--white);
  background: #2a2a2a;
}

.mi-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sobe o rosto na moldura para o título, embaixo, não cruzar o queixo. */
  object-position: 62% 58%;
}

.mi-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgb(0 0 0 / 0.84) 0%, rgb(0 0 0 / 0.5) 42%, rgb(0 0 0 / 0) 78%);
}

.mi-hero__copy {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2svh, 20px);
  width: 100%;
}

/* H1 de abertura do site (--lt-h1, site.css); 16svh segura tela baixa (notebook de 13"). */
.mi-hero h1 {
  /* Sempre em duas linhas (fica melhor que numa só): "QUANDO O PRÓXIMO / PASSO PEDE DIREÇÃO": a 2ª linha mede 7,54em, e o teto em em
     acompanha o corpo em qualquer tela. */
  max-width: 8em;
  color: var(--white);
  font-size: min(var(--lt-h1), 16svh);
  line-height: 0.86;
}

/* Última linha: texto (e os três destaques) à esquerda, o CTA à direita. */
.mi-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(48 * var(--lt-u));
}

.mi-hero__text {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--lt-u));
  max-width: calc(620 * var(--lt-u));
}

.mi-hero__lead {
  color: var(--white);
  font-size: calc(19 * var(--lt-u));
  line-height: 1.5;
}

/*
 * CTA com a etiqueta da sessão: quadrado preto com a câmera, a linha pequena
 * "Sessão 1:1 com a Itamara" sobre a ação e a seta. No hover o botão fica
 * vermelho com texto branco; o quadrado preto continua.
 */
.mi-hero__cta {
  flex: 0 0 auto;
  gap: calc(18 * var(--lt-u));
  padding: calc(10 * var(--lt-u)) calc(22 * var(--lt-u)) calc(10 * var(--lt-u)) calc(10 * var(--lt-u));
}

.mi-hero__cta-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: calc(52 * var(--lt-u));
  height: calc(52 * var(--lt-u));
  background: var(--black);
}

.mi-hero__cta-icon img {
  width: calc(24 * var(--lt-u));
  height: calc(24 * var(--lt-u));
}

/* Sobre o fundo escuro o hover preto do lt-btn--accent sumia: aqui ele fica vermelho, texto branco. */
.mi-hero .mi-hero__cta:hover {
  color: var(--white);
  background-color: var(--red);
}

.mi-hero__cta-text {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--lt-u));
  margin-right: auto;
  font-size: calc(18 * var(--lt-u));
}

.mi-hero__cta-text small {
  font-size: calc(11 * var(--lt-u));
  font-weight: 500;
  letter-spacing: 0.04em;
}

.mi-hero__chips,
.mi-apply__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.mi-apply__chips li {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--lt-u));
  padding: calc(10 * var(--lt-u)) calc(14 * var(--lt-u));
  color: var(--black);
  background: var(--white);
  font-size: calc(12 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/*
 * No hero os destaques são texto, não caixas: com fundo branco eles pareciam
 * botões ao lado do CTA. Linha de caixa alta pequena, "+" vermelho.
 */
.mi-hero__chips {
  gap: calc(8 * var(--lt-u)) calc(24 * var(--lt-u));
}

.mi-hero__chips li {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--lt-u));
  color: var(--white);
  font-size: calc(13 * var(--lt-u));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mi-hero__chips li::before {
  content: "+";
  color: var(--red);
  font-weight: 700;
}

/* Entrada da foto: só `transform`, sem mexer na opacidade do maior elemento pintado. */
.motion-enabled .mi-hero__bg {
  transform: scale(1.06);
  transition: transform 1600ms var(--motion-ease-scale);
}

.motion-enabled.motion-loaded .mi-hero__bg {
  transform: scale(1);
}

/* ==========================================================================
   Cartões chapados (dores, formato, "talvez não seja pra você")
   ========================================================================== */
.mi-cards {
  display: grid;
  gap: calc(18 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.mi-cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mi-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--lt-u));
  padding: calc(32 * var(--lt-u));
  overflow: hidden;
  background: var(--gray-100);
}

.mi-card__icon {
  display: grid;
  place-items: center;
  width: calc(48 * var(--lt-u));
  height: calc(48 * var(--lt-u));
  flex: 0 0 auto;
  margin-bottom: calc(22 * var(--lt-u));
}

.mi-card__icon img {
  width: calc(22 * var(--lt-u));
  height: calc(22 * var(--lt-u));
}

.mi-card--pain .mi-card__icon { background: var(--red); }
.mi-card--format .mi-card__icon { background: var(--yellow); }

.mi-card h3 {
  position: relative;
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(20 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
}

/* `pretty`: a última linha nunca fica com uma palavra só (sem órfã/viúva). */
.mi-card p {
  position: relative;
  color: var(--gray-600);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
  text-wrap: pretty;
}

.mi-card p a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mi-card p a:hover {
  text-decoration-color: var(--red);
}

/* ==========================================================================
   8. Talvez não seja pra você se... — bloco vermelho sangrando + casos riscados
   ========================================================================== */
/*
 * O bloco vermelho encosta na borda esquerda da tela, ocupa metade da largura
 * (40% entre 981 e 1279) e a altura inteira da seção; a seção tem a altura do
 * conteúdo (a lista dita). Só a lista leva a margem do contêiner, à direita.
 */
.mi-notfor {
  padding: 0 var(--lt-gutter) 0 0;
  background: var(--white);
}

.mi-notfor .mi-notfor__inner {
  display: grid;
  grid-template-columns: 50vw minmax(0, 1fr);
  gap: 0;
}

/*
 * Treliça diagonal da marca (a do contato) em tom sobre tom: fios vermelho-claro
 * chapados sobre o vermelho, sem transparência. Texto por cima sempre branco.
 */
.mi-notfor__panel {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(48 * var(--lt-u));
  padding: 0;
  background: var(--red) url("./assets/pattern-tile-trelica-vermelha.svg") 0 0 / calc(48 * var(--lt-u)) calc(48 * var(--lt-u)) repeat;
}

/*
 * Título de ponta a ponta: "Talvez não seja" mede 6,17 vezes o corpo, então
 * 16,1cqi faz a 1ª linha tocar as duas bordas (sobra menos de 1%, de folga
 * contra a quebra). Com entrelinha 0,84 a caixa alta encosta também no topo.
 */
.mi-notfor .mi-notfor__panel h2 {
  color: var(--white);
  font-size: 16.1cqi;
  line-height: 0.84;
  text-wrap: wrap;
}

.mi-notfor__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(48 * var(--lt-u));
  margin: 0;
  padding: calc(120 * var(--lt-u)) 0 calc(120 * var(--lt-u)) calc(64 * var(--lt-u));
  list-style: none;
}

/*
 * O × ocupa exatamente a caixa alta do título do caso. Na display (ABC Gravity),
 * com entrelinha 0,9, as maiúsculas medem 0,70 do corpo e começam 0,0355 abaixo
 * do topo da linha (medido: ascendente 0,929, descendente 0,357). Centrar na
 * linha deixava o quadrado 3px abaixo das letras.
 */
.mi-nope {
  --mi-nope-size: calc(56 * var(--lt-u));
  display: grid;
  grid-template-columns: calc(var(--mi-nope-size) * 0.7) minmax(0, 1fr);
  column-gap: calc(18 * var(--lt-u));
  row-gap: calc(14 * var(--lt-u));
  align-items: start;
}

.mi-nope__icon {
  display: grid;
  place-items: center;
  width: calc(var(--mi-nope-size) * 0.7);
  height: calc(var(--mi-nope-size) * 0.7);
  margin-top: calc(var(--mi-nope-size) * 0.0355);
  background: var(--black);
  transition: background-color 240ms ease;
}

.mi-nope__icon img {
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* O caso em letra grande, riscado por uma barra vermelha que corre da esquerda. */
.mi-nope h3 {
  position: relative;
  width: fit-content;
  max-width: 100%;
  color: var(--black);
  font-family: var(--display);
  font-size: var(--mi-nope-size);
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
}

.mi-nope h3::after {
  content: "";
  position: absolute;
  top: 46%;
  right: calc(-8 * var(--lt-u));
  left: calc(-8 * var(--lt-u));
  height: calc(6 * var(--lt-u));
  background: var(--red);
  transform-origin: left center;
  transition: transform 640ms cubic-bezier(0.65, 0, 0.35, 1) var(--mi-risco-delay, 0ms);
}

.motion-enabled .mi-nope:not(.is-riscado) h3::after {
  transform: scaleX(0);
}

.mi-nope p {
  grid-column: 2;
  max-width: calc(560 * var(--lt-u));
  color: var(--ink);
  font-size: calc(17 * var(--lt-u));
  line-height: 1.5;
}

.mi-nope p a {
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .mi-nope:hover .mi-nope__icon {
    background: var(--red);
  }

  .mi-nope:hover .mi-nope__icon img {
    transform: rotate(180deg);
  }
}

/* Hover dos cartões chapados: o filete vermelho engrossa para dentro. */
.motion-enabled .mi-card,
.motion-enabled .mi-quote {
  transition-property: opacity, transform, filter, box-shadow;
  transition-duration: var(--lt-entrada-card), var(--lt-entrada-card), var(--lt-entrada-card), 240ms;
  transition-delay: var(--motion-delay, 0ms), var(--motion-delay, 0ms), var(--motion-delay, 0ms), 0ms;
}

.mi-card:hover,
.mi-quote:hover {
  box-shadow: inset 0 calc(-5 * var(--lt-u)) 0 var(--red);
}

/* ==========================================================================
   2. Tem decisão que a gente não resolve sozinho
   ========================================================================== */
.mi-pains {
  padding-block: calc(120 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background: var(--white);
}

.mi-pains__inner,
.mi-format__inner,
.mi-notfor__inner,
.mi-steps__inner,
.mi-quotes__inner,
.mi-topics__inner {
  display: flex;
  flex-direction: column;
  gap: calc(60 * var(--lt-u));
}

/* ==========================================================================
   6. O formato, sem letra miúda — no desenho de "Para quem é esse curso"
   ========================================================================== */
/*
 * Fundo amarelo, título gigante encostado no topo e nas laterais e os cartões
 * embaixo, meio sobre a faixa de treliça (fios pretos chapados, sem
 * transparência). A seção é o contêiner: o corpo do título sai da largura dela.
 */
.mi-format {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  padding: 0 0 calc(80 * var(--lt-u));
  background: var(--yellow);
}

.mi-format::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(176 * var(--lt-u));
  background:
    repeating-linear-gradient(45deg, transparent 0 calc(22 * var(--lt-u)), var(--black) calc(22 * var(--lt-u)) calc(26 * var(--lt-u))),
    repeating-linear-gradient(-45deg, transparent 0 calc(22 * var(--lt-u)), var(--black) calc(22 * var(--lt-u)) calc(26 * var(--lt-u))),
    var(--yellow);
}

.mi-format .mi-format__inner {
  position: relative;
  gap: calc(144 * var(--lt-u));
}

/*
 * Título em letreiro: uma linha só que corre para a esquerda sem parar (dois
 * grupos iguais; o trilho anda -50% e recomeça sem emenda). Corpo de 15,5cqi da
 * seção. Numa linha só, o que encosta no topo é o acento do "Ú": com entrelinha
 * 0,86 ele sobe 0,116 do corpo acima da caixa da linha, então o respiro de 0,12em
 * o deixa rente ao topo sem ser cortado. No hover desacelera (mentoria.js muda
 * o ritmo da animação aos poucos), sem parar. Sem motion-enabled
 * (reduced motion) volta a ser o título parado em duas linhas.
 */
.mi-format .mi-marquee {
  padding-top: 0.12em;
  overflow: hidden;
  color: var(--black);
  font-size: 15.5cqi;
  line-height: 0.86;
}

.mi-marquee__track,
.mi-marquee__group {
  display: flex;
  width: max-content;
}

.mi-marquee__group + .mi-marquee__group,
.mi-marquee__sep {
  display: none;
}

.mi-marquee__text > span {
  display: block;
  width: max-content;
}

.motion-enabled .mi-marquee__track {
  animation: mi-letreiro 26s linear infinite;
}

.motion-enabled .mi-marquee__group + .mi-marquee__group {
  display: flex;
}

.motion-enabled .mi-marquee__text {
  white-space: nowrap;
}

.motion-enabled .mi-marquee__text > span {
  display: inline;
}

/* Entre as voltas, um quadrado preto pequeno, centrado na caixa alta. */
.motion-enabled .mi-marquee__sep {
  display: block;
  flex: 0 0 auto;
  align-self: flex-start;
  width: 0.24em;
  height: 0.24em;
  margin: 0.25em 0.28em 0;
  background: var(--black);
}

@keyframes mi-letreiro {
  to {
    transform: translateX(-50%);
  }
}

.mi-format .mi-cards {
  position: relative;
  padding-inline: var(--lt-gutter);
}

.mi-card--format {
  background: var(--white);
}

/* ==========================================================================
   3. Da bagunça à direção, em 3 etapas — o "Como funciona" do Festival
   ========================================================================== */
/*
 * Figma 568:888 (Festival) com a paleta institucional: painel preto com trama
 * à esquerda (rótulo, título, texto) e as etapas em faixas sobrepostas à borda
 * dele, com a descrição e o que você leva ao lado. O painel é mais estreito que
 * no Festival para a descrição ganhar largura (e menos linhas). Cada faixa
 * acende na cor da etapa quando a rolagem chega nela (mentoria.js).
 */
.mi-steps {
  padding-block: calc(120 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  color: var(--white);
  background: var(--ink);
}

/* 440 de painel + 120 de sobreposição + 656 de etapas, em 1216. */
.mi-steps .mi-steps__inner {
  display: grid;
  grid-template-columns: minmax(0, 440fr) minmax(0, 120fr) minmax(0, 656fr);
  align-items: center;
  gap: 0;
}

.mi-steps__panel {
  grid-row: 1;
  grid-column: 1 / 3;
  align-self: stretch;
  min-height: calc(600 * var(--lt-u));
  padding: calc(76 * var(--lt-u)) calc(48 * var(--lt-u));
  background: var(--black) url("./assets/pattern-card-black.svg") center / cover no-repeat;
}

/* O texto do painel para 32 antes da sobreposição das faixas (que começa em 440). */
.mi-steps__panel .mi-head {
  max-width: calc((100% + 96 * var(--lt-u)) * 440 / 560 - 80 * var(--lt-u));
}

.mi-steps h2 {
  color: var(--white);
}

.mi-steps .mi-head__lead {
  color: var(--gray-400);
}

.mi-steps__track {
  position: relative;
  z-index: 1;
  grid-row: 1;
  grid-column: 2 / 4;
  padding-block: calc(64 * var(--lt-u));
}

.mi-steps__list {
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.mi-step {
  --mi-etapa: var(--pink-light);
  --mi-etapa-tinta: var(--black);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 300fr) minmax(0, 444fr);
  align-items: center;
  column-gap: calc(40 * var(--lt-u));
}

.mi-step--red { --mi-etapa: var(--red); --mi-etapa-tinta: var(--white); }
.mi-step--yellow { --mi-etapa: var(--yellow); }

/* A faixa: ícone + nome da etapa. */
.mi-step__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: calc(20 * var(--lt-u));
  padding: calc(20 * var(--lt-u));
  color: var(--gray-400);
  background: #333;
  transition: background-color 420ms ease, color 420ms ease;
}

.mi-step__icon {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: calc(64 * var(--lt-u));
  height: calc(64 * var(--lt-u));
  background: var(--ink);
}

.mi-step__icon img {
  width: calc(24 * var(--lt-u));
  height: calc(24 * var(--lt-u));
  filter: brightness(0) invert(1);
}

.mi-step__num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: calc(20 * var(--lt-u));
  height: calc(20 * var(--lt-u));
  color: var(--white);
  background: var(--gray-700);
  font-size: calc(12 * var(--lt-u));
  font-weight: 700;
  line-height: 1;
  transition: background-color 420ms ease, color 420ms ease;
}

.mi-step h3 {
  color: inherit;
  font-family: var(--sans);
  font-size: calc(20 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
}

/* Ao lado da faixa: a descrição e, embaixo, o que você leva da etapa. */
.mi-step__body {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--lt-u));
}

.mi-step__text {
  color: var(--gray-400);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.55;
}

/* O quadradinho acende na cor da etapa junto com a faixa. */
.mi-step__result {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--lt-u));
  color: var(--white);
  font-size: calc(15 * var(--lt-u));
  font-weight: 500;
  line-height: 1.4;
}

.mi-step__result::before {
  content: "";
  flex: 0 0 auto;
  width: calc(10 * var(--lt-u));
  height: calc(10 * var(--lt-u));
  background: var(--gray-700);
  transition: background-color 420ms ease;
}

/* Acesa: a faixa, o número e o quadradinho ganham a cor da etapa. */
.mi-step.is-acesa .mi-step__card {
  color: var(--mi-etapa-tinta);
  background: var(--mi-etapa);
}

.mi-step.is-acesa .mi-step__num {
  color: var(--mi-etapa-tinta);
  background: var(--mi-etapa);
}

.mi-step.is-acesa .mi-step__result::before {
  background: var(--mi-etapa);
}

/* ==========================================================================
   4. Nuvem de temas
   As etiquetas ficam nas posições e giros do Figma (centro de cada uma na
   caixa de 960 x 420). A caixa mede a si mesma (container) e o corpo das
   etiquetas acompanha a largura dela, então a composição escala inteira.
   ========================================================================== */
/* Escuro entre dois brancos (dores e Itamara), para cadenciar a página. */
.mi-topics {
  padding-block: calc(120 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  color: var(--white);
  background: var(--black);
}

.mi-topics .mi-head h2 {
  color: var(--white);
}

.mi-topics .mi-head__lead {
  color: var(--gray-400);
}

.mi-topics .mi-topics__inner {
  gap: 0;
}

/* Duas linhas: o teto de 11,2em cabe "Uma mentoria pra qualquer" (11,04em) e o balance divide. */
.mi-topics .mi-head h2 {
  max-width: 11.2em;
}

.mi-topics__cloud {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: var(--lt-max);
  aspect-ratio: 1216 / 430;
  margin: calc(24 * var(--lt-u)) auto 0;
  padding: 0;
  list-style: none;
  /* As etiquetas caem de cima: o recorte só limita a entrada pelo alto (não passam
     por cima do título); dos lados e embaixo há folga para os giros. */
  clip-path: inset(calc(-64 * var(--lt-u)) -200px -200px -200px);
}

.mi-topic {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  transform: translate(-50%, -50%) rotate(var(--r));
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mi-topic:hover {
  z-index: 2;
  transform: translate(-50%, -50%) rotate(var(--r)) scale(1.05);
}

/*
 * Pílula: exceção à regra dos cantos retos, pedida pelo usuário só para esta
 * nuvem (referência com etiquetas arredondadas que se encaixam).
 */
.mi-topic span {
  display: block;
  padding: 0.62em 1.1em 0.66em;
  border-radius: 999px;
  color: var(--white);
  background: var(--gray-700);
  font-family: var(--sans);
  font-size: 3.2cqi;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.mi-topic--red span { color: var(--white); background: var(--red); }
.mi-topic--yellow span { color: var(--black); background: var(--yellow); }
.mi-topic--pink span { color: var(--black); background: var(--pink-light); }

/*
 * Com física (mentoria.js liga `.is-fisica`): o piso da simulação é a base da
 * caixa, e a caixa encosta na base da seção — as etiquetas caem e se acomodam
 * no chão. O script posiciona cada uma por `transform` a partir do canto; até
 * ser solta, ela fica escondida.
 */
.mi-topics:has(.is-fisica) {
  padding-bottom: 0;
  overflow-x: clip;
}

.mi-topics__cloud.is-fisica {
  display: block;
  aspect-ratio: 1216 / 420;
  margin-top: calc(104 * var(--lt-u));
  margin-bottom: 0;
  /* Corta só embaixo (o piso); no alto e nas laterais o teto e as paredes da física seguram. */
  clip-path: inset(-200px -200px 0 -200px);
  touch-action: pan-y;
}

.mi-topics__cloud.is-fisica .mi-topic {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  visibility: hidden;
  cursor: grab;
  transform: none;
  transition: none;
  animation: none;
  user-select: none;
  will-change: transform;
}

.mi-topics__cloud.is-fisica .mi-topic.is-solta {
  visibility: visible;
  animation: mi-surgir 220ms ease-out;
}

@keyframes mi-surgir {
  from { opacity: 0; }
}

/*
 * A caixa com física mede as duas direções: o corpo da etiqueta acompanha a
 * largura (3,2cqi) mas não passa de 9% da altura da caixa, para a pilha nunca
 * passar do topo quando a caixa fica mais baixa (tablet e celular).
 */
.mi-topics__cloud.is-fisica {
  container-type: size;
}

.mi-topics__cloud.is-fisica .mi-topic span {
  font-size: min(3.2cqi, 9cqb);
}

/*
 * Mãozinha de pegar (cursor do sistema, sem o ponto da marca — `data-cursor-nativo`
 * no cursor.js): aberta sobre a etiqueta, fechada enquanto arrasta. O `!important`
 * vence o `cursor: none` do cursor da marca no base.css.
 */
.mi-topics__cloud.is-fisica .mi-topic,
.mi-topics__cloud.is-fisica .mi-topic span,
html.brand-cursor-active .mi-topics__cloud.is-fisica .mi-topic,
html.brand-cursor-active .mi-topics__cloud.is-fisica .mi-topic span {
  cursor: grab !important;
}

.mi-topics__cloud.is-arrastando,
.mi-topics__cloud.is-arrastando .mi-topic,
.mi-topics__cloud.is-arrastando .mi-topic span,
html.brand-cursor-active .mi-topics__cloud.is-arrastando,
html.brand-cursor-active .mi-topics__cloud.is-arrastando .mi-topic,
html.brand-cursor-active .mi-topics__cloud.is-arrastando .mi-topic span {
  cursor: grabbing !important;
}

/* ==========================================================================
   5. Quem te guia — a seção "Sobre Itamara" da página Sobre
   ========================================================================== */
.mi-teacher {
  position: relative;
  overflow: hidden;
  padding-block: calc(120 * var(--lt-u));
  background: var(--white);
}

/* Painel de listras colado na borda esquerda; a largura acompanha a margem. */
.mi-teacher__stripes {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc((100% - min(100%, var(--lt-max))) / 2 + 318 * var(--lt-u));
  background-image: repeating-linear-gradient(
    -45deg,
    var(--black) 0 calc(0.71 * var(--lt-u)),
    transparent calc(0.71 * var(--lt-u)) calc(7.07 * var(--lt-u))
  );
}

.mi-teacher__inner {
  position: relative;
  display: grid;
  grid-template-columns: calc(590 * var(--lt-u)) minmax(0, 1fr);
  gap: calc(59 * var(--lt-u));
  align-items: stretch;
  width: min(100%, var(--lt-max));
  margin: 0 auto;
  padding-inline: calc(24 * var(--lt-u));
}

.mi-teacher__photo {
  position: relative;
  height: calc(700 * var(--lt-u));
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 0;
  padding: calc(24 * var(--lt-u));
}

.mi-teacher__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--gray-700);
}

.mi-teacher__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% + 1px);
  object-fit: cover;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mi-teacher__photo:hover .mi-teacher__frame img {
  transform: scale(1.04);
}

.mi-teacher__photo figcaption {
  position: relative;
  color: var(--white);
  font-family: var(--display);
  font-size: calc(81 * var(--lt-u));
  font-weight: 400;
  line-height: 0.87;
  text-align: right;
  text-transform: uppercase;
}

.mi-teacher__dots {
  position: absolute;
  bottom: calc(41 * var(--lt-u));
  left: calc(-59 * var(--lt-u));
  width: calc(149 * var(--lt-u));
  height: calc(294 * var(--lt-u));
  background-image: url("./assets/pontos-vermelhos.svg?v=20260917-paleta");
  background-size: calc(59.3 * var(--lt-u)) calc(59.3 * var(--lt-u));
}

.mi-teacher__col {
  display: flex;
  flex-direction: column;
  min-height: calc(700 * var(--lt-u));
  min-width: 0;
  padding-top: calc(48 * var(--lt-u));
}

.mi-teacher__copy {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--lt-u));
}

/* "QUEM TE GUIA NESSA JORNADA" mede 11,1 corpos: 48 cabe numa linha na coluna. */
.mi-teacher h2 {
  max-width: none;
  color: var(--black);
  font-size: calc(48 * var(--lt-u));
  line-height: 1;
}

.mi-teacher__name {
  width: fit-content;
  padding: calc(8 * var(--lt-u)) calc(10 * var(--lt-u));
  color: var(--white);
  background: var(--black);
  font-size: calc(12 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mi-teacher__text {
  display: flex;
  flex-direction: column;
  gap: calc(17 * var(--lt-u));
  max-width: calc(480 * var(--lt-u));
}

.mi-teacher__text p {
  color: var(--ink);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
}

.mi-teacher__quote {
  display: flex;
  align-items: center;
  max-width: calc(480 * var(--lt-u));
  margin: calc(40 * var(--lt-u)) 0 0;
  padding-inline: calc(16 * var(--lt-u));
  color: var(--black);
  font-size: calc(18 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
  border-left: calc(5 * var(--lt-u)) solid var(--red);
}

.mi-teacher__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(26 * var(--lt-u));
  margin: auto 0 0;
  padding: calc(48 * var(--lt-u)) 0 0;
  list-style: none;
}

.mi-teacher__stats li {
  min-height: calc(97 * var(--lt-u));
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--lt-u));
  padding: calc(14 * var(--lt-u)) calc(12 * var(--lt-u));
  background: var(--gray-100);
}

.mi-teacher__stats strong {
  color: var(--red);
  font-size: calc(33 * var(--lt-u));
  font-weight: 700;
  line-height: 1;
}

.mi-teacher__stats span {
  color: var(--ink);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.25;
}

/* ==========================================================================
   7. Depoimentos — modo escuro, em carrossel
   ========================================================================== */
/*
 * Como os depoimentos da home: título à esquerda, setas à direita e a faixa de
 * cartões começando na margem do conteúdo e correndo até a borda da tela. Com
 * cartões de 400u cabem três e a ponta do quarto em 1440 (quase quatro em 1920).
 */
.mi-quotes {
  /* Três inteiros e a ponta do quarto mesmo em 1280: o cartão encolhe até
     caber (margem + dois vãos + 60 de ponta), sem passar de 320 para baixo. */
  --mi-depo-card: min(calc(400 * var(--lt-u)), max(320px, calc((100cqw - var(--lt-gutter) - 48 * var(--lt-u) - 60px) / 3)));
  display: grid;
  grid-template-columns: var(--lt-gutter) minmax(0, 1fr) auto var(--lt-gutter);
  grid-template-areas:
    ".     head  nav   ."
    "track track track track";
  row-gap: calc(80 * var(--lt-u));
  padding-block: calc(160 * var(--lt-u));
  overflow: hidden;
  color: var(--white);
  background: var(--black);
}

.mi-quotes h2 {
  color: var(--white);
}

.mi-quotes__head {
  grid-area: head;
  padding-right: calc(32 * var(--lt-u));
}

.mi-quotes__nav {
  grid-area: nav;
  align-self: end;
}

/* Setas chapadas no grafite, sem contorno (o fundo já separa). */
.mi-quotes__nav button,
.mi-quotes__nav button[disabled]:hover {
  color: var(--white);
  background: var(--ink);
  border: 0;
}

.mi-quotes__nav button:hover {
  color: var(--black);
  background: var(--yellow);
}

.mi-quotes__track {
  grid-area: track;
  container-type: inline-size;
}

.mi-quotes .lt-carousel {
  gap: calc(24 * var(--lt-u));
  margin: 0;
  padding: 0 var(--lt-gutter);
  scroll-padding-inline: var(--lt-gutter);
  list-style: none;
}

.mi-quote {
  flex: 0 0 var(--mi-depo-card);
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--lt-u));
  min-height: calc(440 * var(--lt-u));
  padding: calc(40 * var(--lt-u));
  background: var(--ink);
  border-bottom: calc(5 * var(--lt-u)) solid var(--red);
}

.mi-quote__mark {
  width: calc(32 * var(--lt-u));
  height: calc(32 * var(--lt-u));
}

.mi-quote blockquote {
  margin: 0 0 calc(16 * var(--lt-u));
}

.mi-quote blockquote p {
  color: var(--white);
  font-size: calc(19 * var(--lt-u));
  font-weight: 500;
  line-height: 1.5;
}

.mi-quote__person {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--lt-u));
  margin-top: auto;
}

/*
 * Avatar quadrado (foto de autor é quadrada). PROVISÓRIO: as iniciais num
 * quadrado da paleta seguram o lugar da foto, que entra como <img> do mesmo
 * tamanho quando houver depoimentos reais.
 */
.mi-quote__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: calc(48 * var(--lt-u));
  height: calc(48 * var(--lt-u));
  color: var(--black);
  font-size: calc(16 * var(--lt-u));
  font-weight: 700;
  line-height: 1;
  object-fit: cover;
}

.mi-quote__avatar--rosa { background: var(--pink-light); }
.mi-quote__avatar--amarelo { background: var(--yellow); }
.mi-quote__avatar--vermelho { color: var(--white); background: var(--red); }

.mi-quote__person b,
.mi-quote__person small {
  display: block;
  line-height: 1.5;
}

.mi-quote__person b {
  color: var(--white);
  font-size: calc(16 * var(--lt-u));
  font-weight: 700;
}

.mi-quote__person small {
  color: var(--gray-400);
  font-size: calc(14 * var(--lt-u));
}

/* Tablet e celular: setas embaixo da faixa, um cartão e a ponta do próximo. */
@media (max-width: 980px) {
  .mi-quotes {
    --mi-depo-card: min(340px, calc(100cqw - 2 * var(--lt-gutter) - 48px));
    grid-template-columns: var(--lt-gutter) minmax(0, 1fr) var(--lt-gutter);
    grid-template-areas:
      ".     head  ."
      "track track track"
      ".     nav   .";
    row-gap: 40px;
  }

  .mi-quotes__head {
    padding-right: 0;
  }

  .mi-quotes__nav {
    align-self: start;
  }

  .mi-quotes .lt-carousel {
    gap: 16px;
  }

  .mi-quote {
    min-height: 380px;
  }

  .mi-quote blockquote p {
    font-size: 18px;
  }
}

@media (max-width: 620px) {
  .mi-quotes {
    --mi-depo-card: calc(100cqw - 2 * var(--lt-gutter) - 32px);
  }
}

/* ==========================================================================
   9. Candidate-se — letreiro gigante no fundo, cartão largo com o formulário
   ========================================================================== */
/*
 * Como o preço do curso: o título vira um letreiro sangrado, quase apagado
 * (branco a 10% sobre o preto, em cor chapada), correndo no alto da seção. O
 * cartão grafite, na largura do conteúdo das outras seções, sobe por cima da
 * base das letras — o letreiro fica de fundo. Dentro dele, o texto à esquerda e
 * o formulário num segundo cartão, um nível acima (cinza mais claro).
 */
.mi-apply {
  --mi-apply-display: 13.6vw;
  position: relative;
  overflow: hidden;
  padding-block: 0 calc(120 * var(--lt-u));
  color: var(--white);
  background: var(--black);
}

/*
 * Colado no topo, como no curso. Medido no navegador (canvas + linha de base):
 * com entrelinha 1 a tinta da ABC Gravity começa 0,146em abaixo do topo da
 * linha e tem 0,7246em de altura. A fita sobe 0,0882em, então o topo das letras
 * fica só 0,0125em acima da borda (o corte do Figma do preço), e a caixa do h2
 * (0,712em) termina rente à base das letras.
 */
.mi-apply .mi-apply__display {
  display: flow-root;
  height: 0.712em;
  max-width: none;
  margin: 0;
  color: color-mix(in srgb, var(--white) 10%, var(--black));
  font-size: var(--mi-apply-display);
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  user-select: none;
}

.mi-apply__fita {
  display: flex;
  width: max-content;
  margin-top: -0.0882em;
}

.mi-apply__fila {
  display: flex;
}

/* Espaço no `margin-right` de cada item (não em `gap`), para a emenda fechar. */
.mi-apply__fila i {
  margin-right: 0.28em;
  font-style: normal;
}

.motion-enabled .mi-apply__fita {
  animation: mi-letreiro 60s linear infinite;
}

/*
 * O cartão fica abaixo do letreiro (não por cima). O formulário encosta nas
 * bordas de cima, da direita e de baixo do cartão; só o texto tem respiro, e o
 * topo dele (40) é o mesmo do primeiro campo do formulário — os dois começam
 * na mesma linha.
 */
.mi-apply__panel {
  position: relative;
  width: calc(100% - 2 * var(--lt-gutter));
  margin: calc(40 * var(--lt-u)) auto 0;
  background: var(--ink);
}

.mi-apply__inner {
  display: grid;
  /* Formulário com até 520, e nunca mais da metade (em 1280 o texto apertava). */
  grid-template-columns: minmax(0, 1fr) minmax(0, min(calc(520 * var(--lt-u)), 50%));
  align-items: stretch;
}

.mi-apply__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  --mi-apply-pad-x: calc(64 * var(--lt-u));
  --mi-apply-pad-r: calc(72 * var(--lt-u));
  padding: calc(40 * var(--lt-u)) var(--mi-apply-pad-r) 0 var(--mi-apply-pad-x);
}

/*
 * Pé da coluna: uma faixa baixa da malha de quadradinhos da marca (Figma
 * 293:9390), cinza chapado sobre o grafite, dentro das margens da coluna. Fica
 * presa à base, com o mesmo recuo de baixo (40) que o formulário tem em cima.
 */
.mi-apply__padrao {
  align-self: stretch;
  height: calc(40 * var(--lt-u));
  margin: auto 0 calc(40 * var(--lt-u));
  padding-top: calc(40 * var(--lt-u));
  background: url("./assets/pattern-tile-quadradinhos-cinza.svg") 0 0 / calc(10 * var(--lt-u)) calc(10 * var(--lt-u)) repeat;
  background-origin: content-box;
  background-clip: content-box;
  box-sizing: content-box;
}

.mi-apply__chips li {
  color: var(--white);
  background: var(--gray-700);
}

.mi-apply__chips li:first-child {
  color: var(--black);
  background: var(--yellow);
}

.mi-apply h3 {
  margin-top: calc(28 * var(--lt-u));
  color: var(--white);
  font-size: calc(48 * var(--lt-u));
  line-height: 0.95;
}

.mi-apply__lead {
  max-width: calc(420 * var(--lt-u));
  margin-top: calc(16 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.5;
}

.mi-apply__expect {
  margin-top: calc(32 * var(--lt-u));
  color: var(--white);
  font-size: calc(15 * var(--lt-u));
  font-weight: 500;
  line-height: 1.5;
}

.mi-apply__list {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--lt-u));
  margin: calc(16 * var(--lt-u)) 0 0;
  padding: 0;
  list-style: none;
}

.mi-apply__list li {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
}

.mi-apply__list img {
  width: calc(18 * var(--lt-u));
  height: calc(18 * var(--lt-u));
  flex: 0 0 auto;
  margin-top: calc(2 * var(--lt-u));
}

/* Formulário: cartão cinza (um nível acima do cartão grafite), campos pretos —
   a cor separa, sem contorno. */
.mi-form {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--lt-u));
  min-width: 0;
  padding: calc(40 * var(--lt-u));
  background: var(--gray-700);
}

.mi-field {
  position: relative;
}

.mi-field__icon,
.mi-field__chevron {
  position: absolute;
  top: calc(17 * var(--lt-u));
  width: calc(18 * var(--lt-u));
  height: calc(18 * var(--lt-u));
  pointer-events: none;
}

.mi-field__icon {
  left: calc(16 * var(--lt-u));
}

.mi-field__chevron {
  right: calc(16 * var(--lt-u));
}

.mi-field input,
.mi-field select,
.mi-field textarea {
  display: block;
  width: 100%;
  min-height: calc(52 * var(--lt-u));
  margin: 0;
  padding: calc(14 * var(--lt-u)) calc(16 * var(--lt-u)) calc(14 * var(--lt-u)) calc(46 * var(--lt-u));
  color: var(--white);
  background: var(--black);
  border: 0;
  border-radius: 0;
  font-family: var(--sans);
  font-size: max(16px, calc(15 * var(--lt-u)));
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}

.mi-field select {
  padding-right: calc(46 * var(--lt-u));
  cursor: pointer;
}

/* Sem escolha, o select fica na cor de placeholder. */
.mi-field select:invalid {
  color: var(--gray-400);
}

.mi-field select option {
  color: var(--white);
  background: var(--black);
}

.mi-field textarea {
  min-height: calc(128 * var(--lt-u));
  resize: vertical;
}

/*
 * Lista própria do select (mentoria.js), no estilo dos campos: o select fica
 * embaixo, invisível, só para envio e validação; o botão ocupa o lugar dele e a
 * lista abre logo abaixo, em grafite para se destacar do campo preto que vem
 * depois e do cartão cinza do formulário (sem contorno nem sombra). Opção sob o cursor/teclado num cinza
 * mais claro, texto branco (amarelo confundiria com o botão de envio).
 */
.mi-field.is-lista select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.mi-select__botao {
  display: block;
  width: 100%;
  min-height: calc(52 * var(--lt-u));
  margin: 0;
  padding: calc(14 * var(--lt-u)) calc(46 * var(--lt-u));
  overflow: hidden;
  color: var(--white);
  background: var(--black);
  border: 0;
  border-radius: 0;
  font-family: var(--sans);
  font-size: max(16px, calc(15 * var(--lt-u)));
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.mi-field.is-vazio .mi-select__botao {
  color: var(--gray-400);
}

.mi-select__botao:focus-visible {
  outline: 2px solid var(--lt-focus-on-dark);
  outline-offset: 0;
}

.mi-field.is-invalido .mi-select__botao {
  box-shadow: inset 0 -3px 0 var(--red);
}

.mi-field__chevron {
  transition: transform 200ms ease;
}

.mi-field.is-aberta .mi-field__chevron {
  transform: rotate(180deg);
}

.mi-select__lista {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 5;
  max-height: calc(320 * var(--lt-u));
  margin: 0;
  padding: calc(6 * var(--lt-u)) 0;
  overflow-y: auto;
  list-style: none;
  background: var(--ink);
}

.mi-select__lista[hidden] {
  display: none;
}

.mi-select__opcao {
  padding: calc(11 * var(--lt-u)) calc(16 * var(--lt-u)) calc(11 * var(--lt-u)) calc(46 * var(--lt-u));
  color: var(--white);
  font-size: max(16px, calc(15 * var(--lt-u)));
  line-height: 1.4;
  cursor: pointer;
}

/* Opção escolhida: o quadradinho da marca na coluna do ícone. */
.mi-select__opcao[aria-selected="true"] {
  position: relative;
  font-weight: 700;
}

.mi-select__opcao[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(21 * var(--lt-u));
  width: calc(8 * var(--lt-u));
  height: calc(8 * var(--lt-u));
  background: var(--yellow);
  translate: 0 -50%;
}

/* Cinza um tom acima do fundo da lista: o texto branco mantém contraste (5,7:1). */
.mi-select__opcao.is-ativa {
  background: var(--gray-600);
}

.mi-field ::placeholder {
  color: var(--gray-400);
  opacity: 1;
}

.mi-field input:focus-visible,
.mi-field select:focus-visible,
.mi-field textarea:focus-visible {
  outline: 2px solid var(--lt-focus-on-dark);
  outline-offset: 0;
}

/* Erro depois da interação: filete vermelho embaixo do campo. */
.mi-field input:user-invalid,
.mi-field select:user-invalid,
.mi-field textarea:user-invalid {
  box-shadow: inset 0 -3px 0 var(--red);
}

.mi-check {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--lt-u));
  margin-top: calc(4 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.5;
  cursor: pointer;
}

.mi-check input {
  width: calc(20 * var(--lt-u));
  height: calc(20 * var(--lt-u));
  flex: 0 0 auto;
  margin: calc(1 * var(--lt-u)) 0 0;
  background: var(--black) center / 70% no-repeat;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.mi-check input:checked {
  background-color: var(--yellow);
  background-image: url("./assets/check.svg");
}

.mi-check input:focus-visible {
  outline: 2px solid var(--lt-focus-on-dark);
  outline-offset: 2px;
}

.mi-check input:user-invalid {
  box-shadow: inset 0 -3px 0 var(--red);
}

.mi-form__submit {
  margin-top: calc(12 * var(--lt-u));
}

/* Sobre o cinza o preto sumiria: o destaque vira branco no hover. */
.mi-apply .lt-btn--accent:hover {
  color: var(--black);
  background-color: var(--white);
}

.mi-apply .lt-btn:focus-visible {
  outline-color: var(--lt-focus-on-dark);
}

/* Aviso de dados: o padrão de todos os formulários do site (o da lista de espera do curso). */
.mi-form__note {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--lt-u));
  margin-top: calc(4 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.5;
}

.mi-form__note img {
  width: calc(14 * var(--lt-u));
  height: calc(14 * var(--lt-u));
  flex: 0 0 auto;
  margin-top: calc(4 * var(--lt-u));
}

.mi-form__note strong {
  color: var(--white);
  font-weight: 500;
}

.mi-form__note a {
  color: var(--gray-200);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mi-form__status {
  padding: calc(12 * var(--lt-u)) calc(16 * var(--lt-u));
  color: var(--black);
  background: var(--yellow);
  font-size: calc(14 * var(--lt-u));
  font-weight: 500;
  line-height: 1.5;
}

.mi-form__status[hidden] {
  display: none;
}

/* ==========================================================================
   10. FAQ — o bloco .faq do base.css na camada institucional
   ========================================================================== */
.mi-page .faq {
  width: 100%;
  min-height: 0;
  display: block;
  padding-block: calc(120 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background: var(--gray-100);
}

.mi-page .faq > .content-wide {
  display: block;
  width: 100%;
  max-width: none;
}

.mi-page .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(368 * var(--lt-u));
  gap: calc(64 * var(--lt-u));
  margin-top: calc(56 * var(--lt-u));
}

.mi-page .questions summary {
  height: auto;
  min-height: calc(76 * var(--lt-u));
  gap: calc(24 * var(--lt-u));
  padding: calc(20 * var(--lt-u)) 0;
  font-size: calc(18 * var(--lt-u));
  line-height: 1.4;
}

.mi-page .questions summary:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: 4px;
}

.mi-page .questions summary::after {
  width: calc(22 * var(--lt-u));
  height: calc(22 * var(--lt-u));
  flex-basis: auto;
  background-size: contain;
}

.mi-page .questions details > p {
  max-width: calc(680 * var(--lt-u));
  padding: 0 calc(40 * var(--lt-u)) calc(24 * var(--lt-u)) 0;
  font-size: calc(16 * var(--lt-u));
}

.mi-page .support-card {
  min-height: calc(420 * var(--lt-u));
  padding: calc(32 * var(--lt-u));
  background: var(--white);
}

.mi-page .support-icon {
  width: calc(44 * var(--lt-u));
  height: calc(44 * var(--lt-u));
  background: var(--yellow);
}

.mi-page .support-icon img {
  width: calc(44 * var(--lt-u));
  height: calc(44 * var(--lt-u));
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1279px) {
  /* Etapas: sem largura para a sobreposição, o painel fica em cima e as faixas embaixo. */
  .mi-steps .mi-steps__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .mi-steps__panel {
    grid-column: 1;
    min-height: 0;
  }

  .mi-steps__panel .mi-head {
    max-width: none;
  }

  .mi-steps__track {
    grid-row: 2;
    grid-column: 1;
    padding: 32px 0 0;
  }

  .mi-notfor .mi-notfor__inner {
    grid-template-columns: 40vw minmax(0, 1fr);
  }

  .mi-cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mi-teacher__inner {
    grid-template-columns: calc(480 * var(--lt-u)) minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  /* Etapas no tablet: faixa em cima, descrição embaixo. */
  .mi-step {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  /* Tablet: a pilha precisa de mais altura que a proporção do desktop. */
  .mi-topics__cloud.is-fisica {
    aspect-ratio: 16 / 9;
    margin-top: 72px;
  }

  .mi-format {
    padding-bottom: 56px;
  }

  .mi-format::before {
    height: 128px;
  }

  .mi-format .mi-format__inner {
    gap: 96px;
  }

  /* Empilhado: o bloco vermelho vira faixa de ponta a ponta sobre a lista. */
  .mi-notfor {
    padding: 0;
  }

  .mi-notfor .mi-notfor__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .mi-notfor__list {
    padding: 64px 48px 80px;
  }

  .mi-nope {
    --mi-nope-size: 44px;
  }

  .mi-hero {
    padding-inline: 32px;
  }

  .mi-pains,
  .mi-steps,
  .mi-topics,
  .mi-quotes,
  .mi-page .faq {
    padding-block: 80px;
  }

  .mi-pains h2,
  .mi-steps h2,
  .mi-topics h2,
  .mi-format h2,
  .mi-quotes h2,
  .mi-notfor h2,
  .mi-apply h2,
  .mi-page .faq h2 {
    font-size: clamp(40px, 8.4vw, 64px);
  }

  .mi-hero__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .mi-pains__inner,
  .mi-format__inner,
  .mi-notfor__inner,
  .mi-steps__inner,
  .mi-quotes__inner,
  .mi-topics__inner {
    gap: 40px;
  }

  .mi-cards--3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .mi-cards--4 {
    gap: 16px;
  }

  /* Itamara empilhada: foto em cima, coluna embaixo. */
  .mi-teacher {
    padding-block: 80px;
  }

  .mi-teacher__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-inline: 48px;
  }

  .mi-teacher__stripes {
    width: 120px;
  }

  .mi-teacher__photo {
    height: 520px;
  }

  .mi-teacher__col {
    min-height: 0;
    gap: 28px;
    padding-top: 0;
  }

  .mi-teacher__copy {
    gap: 20px;
  }

  .mi-teacher__text,
  .mi-teacher__quote {
    max-width: none;
  }

  .mi-teacher__quote,
  .mi-teacher__stats {
    margin-top: 0;
    padding-top: 0;
  }

  .mi-apply__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .mi-apply__copy {
    --mi-apply-pad-x: 32px;
    --mi-apply-pad-r: 32px;
    padding: 40px 32px 0;
  }

  .mi-apply__padrao {
    height: 30px;
    margin-bottom: 32px;
  }

  .mi-apply {
    padding-bottom: 80px;
  }

  .mi-apply__lead {
    max-width: none;
  }

  .mi-page .faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 40px;
  }

  .mi-page .support-card {
    min-height: 0;
  }
}

@media (max-width: 620px) {

  .mi-notfor__list {
    padding: 48px 24px 64px;
  }

  .mi-nope {
    --mi-nope-size: 36px;
    column-gap: 12px;
  }

  .mi-nope p {
    font-size: 16px;
  }

  .mi-hero {
    padding-inline: 24px;
  }

  .mi-pains,
  .mi-steps,
  .mi-topics,
  .mi-quotes,
  .mi-page .faq {
    padding-block: 64px;
  }

  .mi-pains h2,
  .mi-steps h2,
  .mi-topics h2,
  .mi-format h2,
  .mi-quotes h2,
  .mi-notfor h2,
  .mi-apply h2,
  .mi-page .faq h2 {
    font-size: clamp(36px, 11.5vw, 48px);
  }

  .mi-head {
    gap: 16px;
  }

  .mi-head__lead {
    font-size: 16px;
  }

  .mi-hero__lead {
    font-size: 16px;
  }

  .mi-hero__cta {
    align-self: stretch;
    justify-content: space-between;
  }

  /* Celular: o título pode ir a três linhas, maior que a regra de borda a borda. */

  .mi-cards--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .mi-card {
    padding: 24px;
  }

  .mi-card__icon {
    margin-bottom: 14px;
  }

  .mi-steps__panel {
    padding: 40px 24px;
  }

  .mi-step__card {
    column-gap: 16px;
    padding: 16px;
  }

  .mi-topics__cloud.is-fisica .mi-topic span {
    font-size: 20px;
  }

  /* Com física no celular: caixa mais alta, para caber a pilha na largura estreita. */
  .mi-topics__cloud.is-fisica {
    aspect-ratio: 4 / 5;
    margin-top: 48px;
  }

  /* Celular: a nuvem vira um monte de etiquetas em fluxo, com giros pequenos. */
  .mi-topics__cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 8px;
    aspect-ratio: auto;
    padding-block: 8px;
  }

  .mi-topic {
    position: static;
    transform: rotate(calc(var(--r) / 3));
  }

  .mi-topic:hover {
    transform: rotate(calc(var(--r) / 3)) scale(1.04);
  }

  .mi-topic span {
    font-size: 20px;
  }

  /* Itamara: listras só numa faixa no topo, como no Sobre. */
  .mi-teacher {
    padding: 16px 16px 60px;
  }

  .mi-teacher__stripes {
    width: 100%;
    height: 220px;
    bottom: auto;
  }

  .mi-teacher__inner {
    gap: 40px;
    margin: 0;
    padding: 0;
  }

  .mi-teacher__photo {
    height: 400px;
    padding: 16px;
  }

  .mi-teacher__photo figcaption {
    font-size: 52px;
  }

  .mi-teacher__dots {
    bottom: 24px;
    left: -24px;
    width: 96px;
    height: 190px;
    background-size: 38px 38px;
  }

  .mi-teacher__col {
    gap: 24px;
  }

  .mi-teacher__copy {
    gap: 16px;
  }

  .mi-teacher h2 {
    font-size: 32px;
  }

  .mi-teacher__text {
    gap: 12px;
  }

  .mi-teacher__text p {
    font-size: 14px;
  }

  .mi-teacher__quote {
    padding-inline: 12px;
    font-size: 15px;
  }

  .mi-teacher__stats {
    gap: 8px;
  }

  .mi-teacher__stats li {
    min-height: 0;
    padding: 12px 8px;
  }

  .mi-teacher__stats strong {
    font-size: 22px;
  }

  .mi-teacher__stats span {
    font-size: 13px;
  }

  .mi-quote {
    padding: 24px;
  }

  .mi-apply h3 {
    font-size: 36px;
  }

  .mi-apply__copy {
    --mi-apply-pad-x: 16px;
    --mi-apply-pad-r: 16px;
    padding: 32px 16px 0;
  }

  .mi-apply {
    padding-bottom: 64px;
  }

  .mi-form {
    padding: 24px 16px;
  }

  .mi-page .questions summary {
    font-size: 16px;
  }

  .mi-page .questions details > p {
    padding-right: 0;
  }

  .mi-page .support-card {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mi-hero__bg,
  .mi-teacher__frame img,
  .mi-topic,
  .mi-nope__icon img {
    transition: none;
  }
}