/* ═══════════════════════════════════════════════════════════════════════════
   Minicurso — redesenho. Complemento do course_v2.css.

   A página carrega as DUAS folhas: o `course_v2.css` traz as variáveis, a
   tipografia, as seções, os botões, o FAQ e os cartões de pessoa (escopo
   `.cv2`), e também todo o tema claro desses pedaços. Aqui entra só o que o
   minicurso tem e o curso não: o cartão de inscrição preso ao título, o
   contador regressivo, os chips do que está incluso e a linha do tempo.

   Regra que vale para este arquivo inteiro: **cor vem de variável**
   (`var(--text)`, `var(--muted)`, `var(--line)`, `var(--gold)`), nunca de
   hexadecimal cravado. É o que faz o tema claro funcionar de graça — foi
   justamente por cravar cinzas claros que o `home_v2.css` e o
   `graduacao_v2.css` precisaram de remendo depois. O bloco `.light-mode` no
   fim trata só o que não dá para resolver com variável.
   ═══════════════════════════════════════════════════════════════════════════ */

.mcv2 { --mcv2-cartao: clamp(330px, 32vw, 400px); }

/* ── Tarja do topo ───────────────────────────────────────────────────────
   Era vermelha. Virou dourada sobre preto: a página inteira é preto e ouro, e
   o vermelho entrava como terceiro assunto. O brilho que atravessa devagar é
   o que faz o olho parar nela sem precisar de cor gritada. */
.mcv2-tarja {
  position: relative; overflow: hidden;
  padding: 11px 16px; text-align: center;
  background: linear-gradient(90deg, #15110a, #2a2012 45%, #15110a);
  border-bottom: 1px solid rgba(226,183,114,.25);
}
.mcv2-tarja span {
  position: relative; z-index: 1;
  font-size: .7rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-hi);
}
.mcv2-tarja::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(226,183,114,.22), transparent);
  transform: skewX(-18deg); animation: mcv2Varre 5.5s ease-in-out infinite;
}
@keyframes mcv2Varre { 0%, 60% { left: -40%; } 100% { left: 120%; } }
@media (prefers-reduced-motion: reduce) { .mcv2-tarja::after { animation: none; } }

/* ── Topo ────────────────────────────────────────────────────────────────
   Foto ao fundo em faixa, texto à esquerda e o cartão de inscrição à direita.
   O cartão fica aqui, e não lá embaixo, porque é o motivo da página existir:
   quem chega decidido não deve ter de procurar onde se inscrever. */
.mcv2-topo { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 6vw, 86px) 0 clamp(36px, 5vw, 70px); }
.mcv2-topo-foto { position: absolute; inset: 0; z-index: -1; }
/* A imagem aparece inteira. Quem controla o quanto ela escurece é o painel
   (`mc_mask_color` e `mc_mask_opacity`, que chegam como --masc/--masc-op) —
   são os campos que a equipe já usa quando a arte é clara demais. Numa versão
   anterior eu baixei a opacidade da imagem por conta própria e o fundo
   simplesmente sumiu, ignorando os dois campos. */
/* Desfoque leve, e não opacidade baixa. O conteúdo de `mc_bg_image` varia:
   em alguns minicursos é uma arte limpa, feita para ser fundo (o de IA tem
   uma "-sem-titulo"); em outros é a própria peça de divulgação, com "Minicurso
   Gratuito" em corpo gigante. No segundo caso, sem desfoque, o texto da arte
   compete com o título da página — duas camadas de letra na mesma área.
   O desfoque apaga a leitura e preserva cor, luz e assunto, que é o que o
   fundo precisa entregar. O `scale` existe só para o desfoque não deixar
   borda transparente nos cantos. */
.mcv2-topo-foto img {
  width: 100%; height: 100%; object-fit: cover;
  /* 9px: o meio-termo que o João pediu depois de ver os 16.
     ⚠️ Quando `mc_bg_image` é a peça de divulgação inteira (com "MINICURSO
     GRATUITO" em 200px de altura), 9px deixam a letra insinuada. O remédio
     certo nesse caso NÃO é mais desfoque — é a arte sem título no campo
     `mc_bg_image`, que existe para isso e que alguns minicursos já têm
     (o de IA tem uma "-sem-titulo"). Desfoque é o que se faz quando não se
     sabe o que vem; não substitui a imagem certa. */
  filter: blur(9px) saturate(1.08); transform: scale(1.07);
}
/* Véu em degradê: forte onde fica a manchete, leve do meio para a direita,
   para a arte continuar visível atrás do cartão de inscrição. */
.mcv2-topo-foto::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(var(--masc), calc(var(--masc-op) + .12)) 0%,
      rgba(var(--masc), var(--masc-op)) 42%,
      rgba(var(--masc), calc(var(--masc-op) * .62)) 100%);
}
/* Fio de luz no pé, para a faixa não terminar num corte seco. */
.mcv2-topo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.mcv2-topo-grade { display: grid; gap: clamp(30px, 4vw, 54px); align-items: start; }
@media (min-width: 980px) {
  .mcv2-topo-grade { grid-template-columns: minmax(0, 1fr) var(--mcv2-cartao); gap: clamp(36px, 4.5vw, 72px); }
}

.mcv2-selo { display: inline-block; margin-bottom: 16px; }
.mcv2-h1 { margin: 0; max-width: 17ch; text-wrap: balance; }
.mcv2-resumo { margin: 20px 0 0; max-width: 52ch; }

/* Data, preço e formato: fio em cima, sem moldura. */
.mcv2-fatos { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; }
.mcv2-fato { display: inline-flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--muted); }
.mcv2-fato b { font-weight: 600; color: var(--text); }
.mcv2-fato svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; }

/* ── Contador ───────────────────────────────────────────────────────────
   É a única peça da página que se move sozinha, então ganha o dourado. */
.mcv2-contador { margin-top: 30px; }
.mcv2-contador-rot {
  display: block; margin-bottom: 10px;
  font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
/* Relógio de pás: cada número numa pá escura com o vinco no meio, e o rótulo
   embaixo, fora da pá. É o desenho que o João mandou de referência — e a pá
   continua escura TAMBÉM no tema claro, porque ali ela é um objeto, não uma
   superfície da página; é o contraste com o fundo claro que a faz saltar. */
.mcv2-relogio { display: flex; gap: clamp(8px, 1vw, 12px); }
.mcv2-relogio span { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.mcv2-relogio b {
  position: relative; display: grid; place-items: center;
  min-width: clamp(64px, 6.5vw, 80px); padding: 14px 10px;
  border-radius: 11px; border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, #262a35 0%, #1a1e27 49.6%, #0f1218 50.4%, #171b24 100%);
  box-shadow: 0 14px 28px -14px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07);
  font-size: clamp(1.7rem, 2.4vw, 2.3rem); font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 5px rgba(0,0,0,.55);
}
/* O vinco: a linha onde a pá dobraria. */
.mcv2-relogio b::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(0,0,0,.75); box-shadow: 0 1px 0 rgba(255,255,255,.05);
}
.mcv2-relogio i {
  font-style: normal; font-size: .58rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}

/* ── Cartão de inscrição ─────────────────────────────────────────────── */
.mcv2-cartao {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(22px, 2.3vw, 30px);
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--ink-2);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
}
/* Brilho preso ao alto, não borda acesa em volta de tudo. */
.mcv2-cartao::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(100% 70% at 50% 0%, rgba(226,183,114,.14), transparent 62%);
}
@media (min-width: 980px) { .mcv2-cartao { position: sticky; top: 92px; } }

.mcv2-cartao-h { margin: 0; font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.mcv2-cartao-sub { margin: 7px 0 20px; font-size: .84rem; line-height: 1.5; color: var(--muted); }

/* ⚠️ A caixa não tem respiro próprio e o ícone fica POR CIMA, absoluto.
   Antes o `padding: 0 14px` ficava na caixa e o `<input>` só ocupava o miolo:
   sobravam faixas de 14px de cada lado que pareciam campo, mas não recebiam
   nem o clique nem o cursor — a área de digitar não batia com a borda
   desenhada. Agora o input cobre a caixa inteira e o respiro é dele. */
.mcv2-campo {
  position: relative; display: flex; align-items: center;
  margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--ink-3);
  transition: border-color .25s ease, background .25s ease;
}
.mcv2-campo > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; pointer-events: none;
  color: var(--muted-2); transition: color .25s ease;
}
.mcv2-campo input, .mcv2-campo select {
  flex: 1; min-width: 0; width: 100%;
  padding: 15px 14px 15px 42px; border: 0; border-radius: inherit;
  background: none; outline: none;
  font: 400 .93rem/1.3 var(--font); color: var(--text);
}
/* O seletor de país não tem ícone: o texto encosta na borda esquerda.
   (Regra explícita em vez de `:not(:has(> svg))` — `:has` resolveria, mas
   quem não o suporta ficaria com 42px de recuo e o "BR +55" cortado. Para
   uma regra só, não vale o risco.) */
.mcv2-ddi select { padding-left: 14px; }
.mcv2-campo input::placeholder { color: var(--muted-2); }
.mcv2-campo:focus-within { border-color: rgba(226,183,114,.55); background: var(--ink-2); }
.mcv2-campo:focus-within > svg { color: var(--gold); }
.mcv2-campo.is-ok { border-color: rgba(120,180,140,.45); }
.mcv2-campo.is-invalid { border-color: #e06a5a; box-shadow: 0 0 0 3px rgba(224,106,90,.12); }

/* 96px cortavam o "BR +55" no meio do número. O select também precisa de
   espaço à direita para a setinha que o `appearance: none` obriga a desenhar. */
.mcv2-fone-linha { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; }
.mcv2-ddi select {
  cursor: pointer; appearance: none; padding-right: 26px;
  text-overflow: ellipsis;
}
/* A seta é desenhada aqui porque `appearance: none` apaga a do sistema. */
.mcv2-ddi::after {
  content: ''; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted-2); border-bottom: 1.5px solid var(--muted-2);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
/* A lista do <select> é desenhada pelo sistema e não herda o tema da página. */
.mcv2-ddi select option { background: var(--ink-2); color: var(--text); }

.mcv2-btn { margin-top: 6px; }
.mcv2-nota { margin: 12px 0 0; font-size: .72rem; line-height: 1.5; color: var(--muted-2); text-align: center; }

/* Confirmação: ocupa o lugar do formulário quando o envio dá certo. */
.mcv2-cartao-ok { text-align: center; padding: 18px 4px 10px; }
.mcv2-ok-tique {
  display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 16px;
  border: 1px solid rgba(226,183,114,.45); border-radius: 50%; color: var(--gold);
}
.mcv2-ok-tique svg { width: 24px; height: 24px; }
.mcv2-cartao-ok h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.mcv2-cartao-ok p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }

/* ── O que está incluso ─────────────────────────────────────────────────
   Era uma linha de textinhos cinza centralizados, com o mesmo peso de uma
   legenda — e isto aqui é o que a pessoa precisa saber para decidir: se é ao
   vivo, se é de graça, quando acontece. Virou faixa de células divididas por
   fio, no mesmo truque dos pilares (fundo no container, vãos de 1px): cada
   informação ganha seu espaço e a linha inteira lê como um bloco de fatos.

   `auto-fit` em vez de número fixo de colunas porque a quantidade vem do
   painel — com coluna fixa, item a menos deixaria célula vazia (foi o que
   aconteceu nos pilares). */
/* Empata com `.cv2 .section` (0,2,0), que traz o respiro vertical das seções:
   `.mcv2-sec-chips` sozinho é (0,1,0) e perderia. A faixa não quer respiro —
   ela encosta no topo e no corpo de propósito. */
.mcv2 .section.mcv2-sec-chips { padding: 0; }
/* Fio dourado no topo e superfície própria: a faixa deixa de ser "mais um
   trecho da página" e vira um aviso. É o primeiro bloco depois do topo, e o
   que ela diz — ao vivo, gratuito, quando é — decide a inscrição. */
.mcv2-chips {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: var(--line);
  border-bottom: 1px solid var(--line-2);
  box-shadow: inset 0 2px 0 var(--gold);
}
.mcv2-chip {
  display: flex; align-items: center; gap: 14px;
  padding: clamp(20px, 2.3vw, 28px) clamp(18px, 2vw, 26px);
  background: var(--ink-2);
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: var(--text);
  transition: background .3s ease;
}
.mcv2-chip:hover { background: var(--ink-3); }
.mcv2-chip svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; }

/* ── Duas colunas: cabeçalho à esquerda, texto à direita ─────────────── */
.mcv2-duas { display: grid; gap: clamp(22px, 3vw, 54px); align-items: start; }
@media (min-width: 900px) { .mcv2-duas { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.mcv2-duas .section-head { margin-bottom: 0; }
.mcv2-texto { max-width: 62ch; }
.mcv2-ancora { margin-top: 20px; }
.mcv2-ancora svg { width: 15px; height: 15px; }

/* ── Pilares ────────────────────────────────────────────────────────────
   O `.cv2 .pillars` desenha os fios com um truque: fundo no container e vãos
   de 1px entre as células. Lá são sempre quatro; aqui a quantidade vem do
   painel, e com três itens numa grade de quatro a célula vazia aparecia como
   um retângulo cinza — o fundo do container sem nada por cima. Com `auto-fit`
   a grade tem exatamente o número de itens que existe.
   (Vale em qualquer largura mesmo com as media queries do outro arquivo:
   media query não muda especificidade, e esta folha carrega depois.) */
.mcv2 .pillars { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Ícone dos pilares: traço dourado solto, sem azulejo. */
.mcv2-pilar-ico { display: block; margin-bottom: 14px; color: var(--gold); line-height: 0; }
.mcv2-pilar-ico svg { width: 24px; height: 24px; }

/* ── Programa em linha do tempo ─────────────────────────────────────────
   O fio vertical liga os momentos; o ponto marca cada um. Era uma pilha de
   cartões iguais, que não dizia que havia uma ordem. */
.mcv2-linha { list-style: none; margin: 0; padding: 0; position: relative; }
.mcv2-linha::before {
  content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(180deg, var(--gold), var(--line) 55%, transparent);
}
.mcv2-linha li { position: relative; display: grid; gap: 4px 22px; padding: 0 0 clamp(22px, 2.6vw, 34px) 40px; }
@media (min-width: 760px) { .mcv2-linha li { grid-template-columns: 110px minmax(0, 1fr); } }
.mcv2-linha li::before {
  content: ''; position: absolute; left: 3px; top: 7px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--gold);
}
.mcv2-linha li:last-child { padding-bottom: 0; }
.mcv2-linha-h {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); padding-top: 3px;
}
.mcv2-linha h3 { margin: 0 0 5px; font-size: 1.02rem; font-weight: 600; letter-spacing: -.015em; color: var(--text); }
.mcv2-linha p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--muted); }

/* ── Palestrantes ─────────────────────────────────────────────────────
   Três por linha, em cartão. A primeira tentativa foi empilhar um por linha
   porque o currículo é enorme (mil caracteres é a regra) e em coluna estreita
   virava uma tira de 300px de largura por 800 de altura. Em cartão o problema
   se resolve por outro caminho: o texto nasce contido — resumo em três linhas,
   três credenciais — e quem quiser o resto abre ali mesmo.

   `align-items: start` para o cartão aberto crescer sozinho, sem esticar os
   vizinhos; `max-width` no cartão para um palestrante só não virar uma faixa
   de 1240px. */
.mcv2-gente {
  display: grid; gap: clamp(16px, 1.8vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(282px, 1fr));
  align-items: start; justify-content: center;
}

.mcv2-pessoa {
  display: flex; flex-direction: column;
  width: 100%; max-width: 460px; margin-inline: auto;
  overflow: hidden; border-radius: 14px;
  border: 1px solid var(--line); background: var(--ink-2);
  transition: border-color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.mcv2-pessoa:hover {
  border-color: rgba(226,183,114,.35); transform: translateY(-3px);
  box-shadow: 0 26px 50px -30px rgba(0,0,0,.9);
}

/* Retrato em faixa larga: o rosto fica no terço de cima da foto, então o
   enquadramento sobe (`object-position`) em vez de centralizar e cortar a
   testa. */
.mcv2-pessoa-foto {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--ink-3);
  border-bottom: 1px solid var(--line);
  /* ⚠️ `min-height: 0` é o que faz o `aspect-ratio` valer. Este bloco é item
     de um flex em COLUNA, e item de flex tem altura mínima automática igual à
     do conteúdo: a altura natural da foto ganhava da proporção, e cada cartão
     saía com uma altura (433, 488, 425px medidos). Mesma família da armadilha
     dos cartões de área da home, onde a proporção inflava a LARGURA. */
  min-height: 0;
}
.mcv2-pessoa-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.mcv2-pessoa-foto.is-vazia::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 70% at 50% 35%, rgba(226,183,114,.14), transparent 70%);
}
/* Degradê no pé da foto: encosta a imagem no texto sem corte seco. */
.mcv2-pessoa-foto::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(180deg, transparent, var(--ink-2));
  pointer-events: none;
}

.mcv2-pessoa-txt { padding: clamp(18px, 1.9vw, 24px); min-width: 0; }
.mcv2-pessoa-txt h3 {
  margin: 0; font-size: 1.04rem; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.25; color: var(--text);
}
.mcv2-pessoa-papel {
  margin-top: 6px; font-size: .64rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.mcv2-pessoa-resumo {
  margin: 13px 0 0; font-size: .88rem; line-height: 1.65; color: var(--muted);
  /* Três linhas fechadas: é o que mantém os três cartões na mesma altura
     enquanto ninguém abriu nenhum. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mcv2-pessoa.is-aberta .mcv2-pessoa-resumo { -webkit-line-clamp: unset; overflow: visible; }

/* O currículo: uma credencial por linha, com fio dourado curto no lugar do
   marcador. Marcador redondo pediria recuo e deixaria com cara de formulário;
   o fio alinha com o resto da página. */
.mcv2-cv { list-style: none; margin: 14px 0 0; padding: 0; }
.mcv2-cv li {
  position: relative; padding-left: 18px; margin-top: 8px;
  font-size: .82rem; line-height: 1.55; color: var(--muted-2);
}
.mcv2-cv li::before {
  content: ''; position: absolute; left: 0; top: .7em; width: 9px; height: 1px;
  background: var(--gold); opacity: .8;
}
.mcv2-cv li b { font-weight: 600; color: var(--text); }
/* ⚠️ O corte é por ALTURA, não por número de itens. Contar itens não serve:
   um palestrante tem dez credenciais de uma linha e outro tem três que são
   parágrafos inteiros — limitando a três, os cartões saíam com alturas
   completamente diferentes, que foi o que aconteceu na primeira tentativa.
   Com `max-height` os três fecham na mesma altura, venha o texto como vier.
   A máscara dissolve o fim em vez de cortá-lo numa linha reta. */
.mcv2-cv.is-dobrado {
  max-height: 132px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.mcv2-cv.is-dobrado.is-aberto {
  max-height: none;
  -webkit-mask-image: none; mask-image: none;
}

.mcv2-cv-mais {
  margin-top: 15px; padding: 0 0 3px; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 .72rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid rgba(226,183,114,.35);
  transition: color .25s ease, border-color .25s ease;
}
.mcv2-cv-mais::after {
  content: ''; width: 6px; height: 6px; margin-bottom: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.mcv2-cv-mais[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -2px; }
.mcv2-cv-mais:hover { color: var(--gold-hi); border-color: var(--gold); }


/* ── Depoimentos ────────────────────────────────────────────────────── */
.mcv2-depos { display: grid; gap: clamp(18px, 2.2vw, 28px); }
@media (min-width: 820px) { .mcv2-depos { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.mcv2-depos figure { margin: 0; padding-left: 20px; border-left: 1px solid var(--line); }
.mcv2-depos blockquote { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--text); font-style: italic; }
.mcv2-depos figcaption { margin-top: 14px; font-size: .8rem; color: var(--muted-2); }
.mcv2-depos figcaption b { display: block; font-weight: 600; color: var(--gold); font-style: normal; }

/* ── Chamada final ──────────────────────────────────────────────────── */
.mcv2-fim { text-align: center; }
.mcv2-fim .h2 { max-width: 22ch; margin-inline: auto; }
.mcv2-fim .lede { margin: 16px auto 0; }
/* `.cv2 .btn` nasce com `width: 100%` (lá o botão vive dentro do cartão de
   inscrição, onde isso é certo). Aqui ele está solto no meio da seção e
   precisa encolher — e o seletor tem de empatar em especificidade com o
   original, senão perde: `.mcv2-btn-fim` sozinho é (0,1,0) contra (0,2,0). */
.mcv2 .btn.mcv2-btn-fim { width: auto; margin-top: 30px; padding-inline: 34px; }

@media (prefers-reduced-motion: reduce) {
  .mcv2-campo, .mcv2-campo > svg { transition: none; }
}

/* ═══ Tema claro ══════════════════════════════════════════════════════════
   O `course_v2.css` já reescreve as variáveis de `.cv2` no claro, então quase
   tudo aqui vira legível sozinho. Sobra o que NÃO sai de variável: o véu do
   topo (feito de preto, para texto claro sobre foto) e os brilhos de
   superfície (feitos de branco). Escrito junto com o resto, e não depois.
   ─────────────────────────────────────────────────────────────────────────── */

/* O véu do painel é escuro (serve ao texto branco do tema escuro). No claro o
   título é escuro, então o véu precisa ser CLARO — senão some letra preta
   sobre fundo preto. A força continua vindo do painel. */
.light-mode .mcv2-topo-foto::after {
  background:
    linear-gradient(90deg,
      rgba(246,247,249, calc(var(--masc-op) + .1)) 0%,
      rgba(246,247,249, var(--masc-op)) 42%,
      rgba(246,247,249, calc(var(--masc-op) * .6)) 100%);
}
/* ⚠️ A tarja segue ESCURA nos dois temas — é faixa de aviso, não superfície da
   página. Por isso ela redeclara a paleta escura para o que está dentro dela:
   o texto usa `--gold-hi`, que no claro vira bronze (#6f5426) e sumiria sobre
   o marrom da própria tarja. Mesma armadilha dos cartões de área da home: num
   bloco que não muda de cor, o conteúdo não pode seguir o tema da página. */
.light-mode .mcv2-tarja {
  --gold: #e2b772;
  --gold-hi: #f0d2a0;
  border-bottom-color: rgba(226,183,114,.3);
}

.light-mode .mcv2-cartao {
  background: #fff;
  box-shadow: 0 30px 64px -34px rgba(15,23,42,.3);
}
.light-mode .mcv2-cartao::before {
  background: radial-gradient(100% 70% at 50% 0%, rgba(138,106,51,.1), transparent 62%);
}
.light-mode .mcv2-chip { background: #fff; }
.light-mode .mcv2-chip:hover { background: #f7f8fa; }
.light-mode .mcv2-pessoa-foto { background: #eef0f4; }
.light-mode .mcv2-campo { background: #f7f8fa; }
.light-mode .mcv2-campo:focus-within { background: #fff; border-color: rgba(138,106,51,.5); }
.light-mode .mcv2-ddi select option { background: #fff; color: #0f172a; }
/* (a pá do relógio continua escura no claro — ver comentário lá em cima) */
.light-mode .mcv2-ok-tique { border-color: rgba(138,106,51,.4); }

/* Botão dourado é botão dourado nos dois temas: como superfície com texto
   escuro em cima, o bronze do tema claro apagaria o rótulo. Mesmos valores de
   `.light-mode .cv2 .btn`. */
.light-mode .mcv2-btn {
  background: linear-gradient(180deg, #f2d49c, #dcae63);
  color: #14110a;
}