/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 400; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(30px, 4.2vw, 44px); letter-spacing: -0.01em; }
h1 em { font-style: italic; }
h2 { font-size: clamp(23px, 2.6vw, 28px); }
h3 { font-size: 19px; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--terracota); text-underline-offset: 3px; }
a:hover { color: var(--marrom); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.icone { flex: none; vertical-align: middle; }
.num { font-variant-numeric: lining-nums tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.rotulo {
  font-family: var(--fonte-texto);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.nota { font-size: 13.5px; color: var(--texto-2); }
.nota--topo { margin-bottom: 20px; }
.nota--destaque { display: flex; gap: 8px; align-items: center; color: var(--terracota); margin-bottom: 20px; }
.conta { font-size: 12.5px; color: var(--texto-2); line-height: 1.5; }
.vazio {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 18px 20px;
  border: 1px dashed var(--linha);
  border-radius: var(--raio-grande);
  color: var(--texto-2);
  font-size: 14.5px;
}
.vazio .icone { margin-top: 4px; color: var(--terracota); }
.selo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: var(--texto-2);
  white-space: nowrap;
}
.selo--feito { background: var(--marrom); border-color: var(--marrom); color: var(--off-white); }
.selo-provisorio {
  display: inline-block;
  margin-bottom: 16px;
  padding: 2px 10px;
  border: 1px solid var(--terracota);
  border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--terracota);
}
.link {
  padding: 0; border: 0; background: none;
  color: var(--terracota); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; font-size: inherit;
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid var(--marrom);
  border-radius: 999px;
  background: var(--marrom);
  color: var(--off-white);
  font-size: 14.5px; font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.botao:hover { background: #4A3426; color: var(--off-white); }
.botao--contorno { background: transparent; color: var(--marrom); }
.botao--contorno:hover { background: rgb(53 35 23 / 0.06); color: var(--marrom); }
.botao-icone {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--borda-campo);
  border-radius: 999px;
  background: var(--campo);
  color: var(--marrom);
  cursor: pointer;
}
.botao-icone:hover { background: var(--off-white); border-color: var(--marrom); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.acoes--centro { justify-content: center; }

/* ---------- Faixa de protótipo ---------- */

.faixa-teste {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
  padding: 6px 16px;
  background: var(--areia);
  color: var(--marrom);
  font-size: 12.5px;
  text-align: center;
}
.faixa-teste a { color: var(--marrom); font-weight: 500; }

.pular {
  position: absolute; left: 16px; top: -48px; z-index: 20;
  padding: 8px 14px; border-radius: var(--raio);
  background: var(--marrom); color: var(--off-white);
}
.pular:focus { top: 12px; color: var(--off-white); }

/* ---------- Logo em texto ---------- */

.marca { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: var(--marrom); }
.marca--negativa { color: var(--off-white); }
.marca__desenho { width: 118px; height: auto; overflow: visible; }
.marca__letra { font-family: var(--fonte-titulo); font-size: 45px; fill: currentColor; }
.marca__eixo { stroke: currentColor; stroke-width: 1.1; }
.marca__o { fill: none; stroke: currentColor; stroke-width: 1.4; }
.marca__ponto { fill: currentColor; }
.marca__sub { font-size: 10.5px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; margin-right: -0.42em; }
.marca--compacta .marca__desenho { width: 76px; }

/* ---------- Telas de entrada (termos e pesquisa) ---------- */

.foco {
  display: flex; flex-direction: column; align-items: center;
  min-height: calc(100vh - 32px);
  padding: 48px 16px 56px;
}
.foco__marca { margin-bottom: 36px; }
.foco__cartao {
  width: 100%; max-width: 720px;
  padding: clamp(24px, 5vw, 52px);
  background: var(--off-white);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
}
.foco__titulo { margin: 10px 0 12px; }
.foco__intro { color: var(--texto-2); max-width: 56ch; }
.foco__frase { margin-top: 32px; font-family: var(--fonte-titulo); font-style: italic; font-size: 18px; color: var(--texto-2); }

.termos {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 28px;
  padding: 24px 26px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--campo);
}
.termos h2 { font-size: 20px; margin: 18px 0 8px; }
.termos h2:first-of-type { margin-top: 0; }
.termos p + p { margin-top: 8px; }
.termos__versao { margin-top: 10px; font-size: 12.5px; color: var(--texto-2); }
.termos__form { margin-top: 24px; display: grid; gap: 20px; justify-items: start; }

.caixa { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; }
.caixa input { width: 22px; height: 22px; margin: 0; accent-color: var(--marrom); }

.enviado { text-align: center; }
.enviado .foco__intro { margin: 0 auto; }
.enviado__estrela {
  display: inline-grid; place-items: center;
  width: 64px; height: 64px; margin-bottom: 18px;
  border: 1px solid var(--linha); border-radius: 50%;
  color: var(--terracota);
}

/* ---------- Formulário em blocos ---------- */

.blocos { margin-top: 32px; }
.blocos__progresso { display: grid; gap: 10px; margin-bottom: 20px; }
.blocos__titulo { margin-bottom: 8px; }
.blocos__intro { color: var(--texto-2); margin-bottom: 20px; }
.blocos__form { display: grid; gap: 26px; margin-top: 20px; }
.blocos__form .acoes { margin-top: 6px; }

.campo { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.campo__rotulo { font-weight: 500; font-size: 15px; padding: 0; }
.campo__opcional { font-weight: 400; color: var(--texto-2); }
.campo__ajuda { font-size: 13.5px; color: var(--texto-2); margin-top: -4px; }
.campo__erro { font-size: 13.5px; font-weight: 500; color: var(--erro); }
.entrada {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio);
  background: var(--campo);
  font-size: 16px;
}
.entrada:focus-visible { outline-offset: 1px; border-color: var(--terracota); }
.entrada[aria-invalid="true"] { border-color: var(--erro); }
.entrada--longa { min-height: 112px; resize: vertical; line-height: 1.5; }
.entrada--curta { max-width: 180px; }
.entrada--pequena { min-height: 36px; padding: 4px 8px; font-size: 13.5px; width: auto; flex: 1; min-width: 0; }
.entrada-moeda { position: relative; max-width: 260px; }
.entrada-moeda span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--texto-2); font-size: 15px; }
.entrada-moeda .entrada { padding-left: 44px; }

.opcoes { display: flex; flex-wrap: wrap; gap: 10px; }
.opcao { position: relative; display: inline-flex; }
.opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcao span {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 16px;
  border: 1px solid var(--borda-campo);
  border-radius: 999px;
  background: var(--campo);
  font-size: 14.5px;
}
.opcao input:checked + span { background: var(--marrom); border-color: var(--marrom); color: var(--off-white); }
.opcao input[type="checkbox"]:checked + span::before { content: "✓"; font-size: 13px; }
.opcao input:focus-visible + span { outline: 2px solid var(--terracota); outline-offset: 3px; }
.opcao input[aria-invalid="true"] + span { border-color: var(--erro); }
.opcao:hover span { border-color: var(--marrom); }

/* Linha de progresso: traço fino com um ponto na ponta, como os elementos do brandbook. */
.linha-progresso { position: relative; height: 2px; background: var(--linha); border-radius: 2px; }
.linha-progresso span { position: absolute; inset: 0 auto 0 0; background: var(--terracota); border-radius: 2px; }
.linha-progresso span::after {
  content: ""; position: absolute; right: -4px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--terracota);
}
.progresso { display: grid; gap: 8px; }
.progresso__texto { font-size: 13px; color: var(--texto-2); }

/* ---------- Moldura da área ---------- */

.moldura { display: grid; grid-template-columns: var(--largura-menu) minmax(0, 1fr); min-height: calc(100vh - 32px); }
.menu {
  position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 40px;
  height: 100vh;
  padding: 40px 20px 32px;
  background: var(--marrom);
  color: var(--off-white);
}
.menu__marca { display: flex; justify-content: center; text-decoration: none; }
.menu ul { display: grid; gap: 4px; }
.menu nav a {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px;
  border-radius: var(--raio);
  color: var(--bege);
  font-size: 14.5px; font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none;
}
.menu nav a:hover { color: var(--off-white); background: rgb(247 242 232 / 0.06); }
.menu nav a[aria-current="page"] { color: var(--off-white); background: rgb(247 242 232 / 0.1); box-shadow: inset 2px 0 0 var(--off-white); }
.menu nav a:focus-visible { outline-color: var(--off-white); }
.menu__frase { margin-top: auto; font-family: var(--fonte-titulo); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--bege); text-align: center; }
.topo-movel, .menu-inferior { display: none; }

.conteudo { width: 100%; max-width: calc(var(--largura-conteudo) + 128px); padding: 56px clamp(16px, 5vw, 64px) 96px; }

@media (max-width: 959px) {
  .moldura { grid-template-columns: minmax(0, 1fr); }
  .menu { display: none; }
  .topo-movel {
    display: flex; justify-content: center; align-items: center;
    padding: 14px 16px 12px;
    background: var(--marrom);
  }
  .topo-movel a { text-decoration: none; }
  .conteudo { padding: 28px 16px calc(var(--altura-menu-inferior) + 40px); }
  .menu-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--altura-menu-inferior) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--off-white);
    border-top: 1px solid var(--linha);
  }
  .menu-inferior a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--texto-2); text-decoration: none;
    font-size: 10.5px; font-weight: 500;
  }
  .menu-inferior a[aria-current="page"] { color: var(--marrom); font-weight: 600; }
  .menu-inferior a[aria-current="page"] .icone { color: var(--terracota); }
}

/* ---------- Estruturas comuns ---------- */

.cabecalho { display: grid; gap: 10px; margin-bottom: 36px; }
.cabecalho__apoio { color: var(--texto-2); max-width: 64ch; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cabecalho .linha-progresso { max-width: 420px; margin: 6px 0 2px; }
.secao { margin-top: 48px; display: grid; gap: 18px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 820px) { .grade-2 { grid-template-columns: minmax(0, 1fr); } }

.cartao {
  padding: clamp(20px, 3vw, 28px);
  background: var(--off-white);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
}
.cartao__titulo { font-size: 21px; margin-bottom: 18px; }
.cartao--formulario { max-width: 760px; }
.cartao--formulario .blocos { margin-top: 0; }

.painel-escuro {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 36px);
  background: var(--marrom);
  color: var(--off-white);
  border-radius: var(--raio-grande);
}
.painel-escuro .rotulo { color: var(--bege); }
.painel-escuro .conta, .painel-escuro .nota { color: var(--areia); }
.painel-escuro a { color: var(--off-white); }
/* O eixo: linha vertical fina atravessando o painel. */
.painel-escuro::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 56px;
  width: 1px; background: rgb(195 171 145 / 0.22);
  pointer-events: none;
}

.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 20px; font-size: 13.5px; color: var(--texto-2); }

.aviso {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 32px;
  padding: 16px 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  background: var(--off-white);
  color: var(--texto);
  text-decoration: none;
}
.aviso:hover { border-color: var(--terracota); color: var(--texto); }
.aviso__icone {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;
  border: 1px solid var(--linha); border-radius: 50%;
  color: var(--terracota);
}
.aviso__texto { flex: 1; font-size: 14.5px; }
.aviso__acao { display: inline-flex; align-items: center; gap: 4px; color: var(--terracota); font-weight: 600; font-size: 14px; white-space: nowrap; }
.aviso--simples { margin: 16px 0 0; color: var(--texto-2); font-size: 14px; }
@media (max-width: 560px) { .aviso { flex-wrap: wrap; } .aviso__acao { margin-left: 60px; } }

/* ---------- Início (F11) ---------- */

.etapas {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 40px;
}
.etapas::before {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 26px;
  height: 1px; background: var(--linha);
}
.etapa { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.etapa__circulo {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 8px;
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: var(--fundo);
  color: var(--texto-2);
}
.etapa--feita .etapa__circulo { background: var(--marrom); border-color: var(--marrom); color: var(--off-white); }
.etapa--atual .etapa__circulo { border: 1.5px solid var(--terracota); background: var(--off-white); color: var(--terracota); box-shadow: 0 0 0 6px var(--fundo), 0 0 0 7px rgb(110 83 60 / 0.35); }
.etapa__nome { font-family: var(--fonte-titulo); font-size: 19px; line-height: 1.2; }
.etapa--futura .etapa__nome { color: var(--texto-2); }
.etapa__estado { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-2); }
.etapa--atual .etapa__estado { color: var(--terracota); font-weight: 600; }
@media (max-width: 560px) {
  .etapas { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .etapas::before { left: 26px; right: auto; top: 26px; bottom: 26px; width: 1px; height: auto; }
  .etapa { grid-template-columns: 52px 1fr; justify-items: start; text-align: left; column-gap: 16px; row-gap: 0; }
  .etapa__circulo { grid-row: span 2; margin: 0; }
  .etapa__nome { align-self: end; }
}

.proximo-marco h2 { margin: 12px 0 20px; padding-right: 40px; }
.proximo-marco__criterio { display: grid; gap: 4px; color: var(--areia); }
.proximo-marco__termo { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bege); }
.proximo-marco__quem { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgb(195 171 145 / 0.3); font-size: 13.5px; color: var(--areia); }

.marcos { display: grid; }
.marco { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linha); }
.marco:first-child { border-top: 0; padding-top: 0; }
.marco__sinal { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--borda-campo); border-radius: 50%; }
.marco--feito .marco__sinal { background: var(--marrom); border-color: var(--marrom); color: var(--off-white); }
.marco--proximo .marco__sinal { border: 1.5px solid var(--terracota); }
.marco--proximo .marco__sinal::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--terracota); }
.marco__nome { font-size: 15px; }
.marco--proximo .marco__nome { font-weight: 600; }
.marco__estado { font-size: 12.5px; color: var(--texto-2); text-align: right; }
.marco--proximo .marco__estado { color: var(--terracota); font-weight: 600; }

.lista-feitos { display: grid; background: var(--off-white); border: 1px solid var(--linha); border-radius: var(--raio-grande); }
.lista-feitos li { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--linha); }
.lista-feitos li:first-child { border-top: 0; }
.lista-feitos__sinal { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--marrom); color: var(--off-white); }
.lista-feitos strong { font-weight: 500; }
.lista-feitos__etapa { display: block; font-size: 12.5px; color: var(--texto-2); }
.lista-feitos__data { font-size: 13px; color: var(--texto-2); }

/* ---------- Aulas (F7) ---------- */

.capa {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  aspect-ratio: 16 / 9;
  padding: 12px 14px;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 85% 0%, rgb(247 242 232 / 0.12), transparent 60%),
    var(--marrom);
  color: var(--off-white);
}
.capa--terracota { background: radial-gradient(120% 90% at 85% 0%, rgb(247 242 232 / 0.16), transparent 60%), var(--terracota); }
.capa--clara { background: radial-gradient(120% 90% at 85% 0%, rgb(255 255 255 / 0.5), transparent 60%), var(--areia); color: var(--marrom); }
.capa__eixo { position: absolute; top: 0; bottom: 0; right: 28%; width: 1px; background: currentColor; opacity: 0.35; }
.capa__estrela { position: absolute; top: 14%; right: calc(28% - 7px); line-height: 0; }
.capa--grande .capa__estrela { right: calc(28% - 11px); }
.capa__trilha { position: relative; font-size: 9.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.capa__titulo { position: relative; font-family: var(--fonte-titulo); font-style: italic; font-size: 17px; line-height: 1.2; }
.capa--grande { border-radius: var(--raio-grande); padding: clamp(20px, 4vw, 40px); }
.capa--grande .capa__trilha { font-size: 12px; }
.capa--grande .capa__titulo { font-size: clamp(24px, 3.4vw, 38px); max-width: 60%; }

.grade-trilhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.trilha-cartao {
  display: grid; height: 100%;
  background: var(--off-white);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  overflow: hidden;
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.trilha-cartao:hover { border-color: var(--terracota); color: var(--texto); transform: translateY(-2px); }
.trilha-cartao .capa { border-radius: 0; }
.trilha-cartao__corpo { display: grid; gap: 6px; align-content: start; padding: 16px 18px 18px; }
.trilha-cartao__nome { font-family: var(--fonte-titulo); font-size: 21px; }
.trilha-cartao__meta { font-size: 13px; color: var(--texto-2); }
.trilha-cartao .progresso { margin-top: 8px; }

.lista-aulas { display: grid; gap: 12px; }
.aula-item {
  display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 20px; align-items: center;
  padding: 12px;
  background: var(--off-white);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  color: var(--texto);
  text-decoration: none;
}
.aula-item:hover { border-color: var(--terracota); color: var(--texto); }
.aula-item__texto { display: grid; gap: 4px; }
.aula-item__titulo { font-family: var(--fonte-titulo); font-size: 19px; line-height: 1.25; margin-bottom: 2px; }
.aula-item__meta { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--texto-2); }
@media (max-width: 640px) {
  .aula-item { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .aula-item .selo { grid-column: 2; justify-self: start; }
  .aula-item .capa__titulo { font-size: 14px; }
}

.video { position: relative; margin-bottom: 28px; }
.video .capa { aspect-ratio: 16 / 9; }
.video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 76px; height: 76px;
  border: 1px solid rgb(247 242 232 / 0.7); border-radius: 50%;
  color: var(--off-white);
}
.video__aviso {
  position: absolute; top: 16px; left: 16px;
  padding: 4px 12px; border-radius: 999px;
  background: rgb(53 35 23 / 0.55); color: var(--off-white);
  font-size: 12px; font-weight: 500;
}
.aula-cabecalho { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; }
.aula-cabecalho > div:first-child { display: grid; gap: 10px; }
.aula-cabecalho__acao { display: grid; gap: 8px; justify-items: end; }
.aula-cabecalho__nota { font-size: 13px; color: var(--texto-2); }
@media (max-width: 640px) { .aula-cabecalho__acao { justify-items: start; } }
.grade-2--aula { margin-bottom: 32px; }
.capitulos { display: grid; }
.capitulos li { display: flex; gap: 16px; padding: 10px 0; border-top: 1px solid var(--linha); }
.capitulos li:first-child { border-top: 0; padding-top: 0; }
.capitulos__minuto { color: var(--terracota); font-weight: 600; font-size: 14px; min-width: 48px; }
.materiais { display: grid; gap: 10px; margin-bottom: 14px; }
.materiais li { display: flex; align-items: center; gap: 12px; }
.materiais li span:first-of-type { flex: 1; }
.navegacao-aulas { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Calendário (F8) ---------- */

.destaque-encontro h2 { margin: 12px 0 10px; font-size: clamp(28px, 3.6vw, 38px); padding-right: 72px; }
.destaque-encontro__hora { display: flex; gap: 8px; align-items: center; color: var(--areia); }
.destaque-encontro__dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgb(195 171 145 / 0.3); padding-right: 72px; }
.destaque-encontro__dados dt { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bege); }
.destaque-encontro__dados dd { margin-top: 4px; font-family: var(--fonte-titulo); font-size: 19px; }
@media (max-width: 560px) { .destaque-encontro__dados { grid-template-columns: minmax(0, 1fr); padding-right: 0; } .destaque-encontro h2 { padding-right: 0; } }
.baixar-agenda { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.baixar-agenda .nota { max-width: 46ch; }

.encontros { display: grid; background: var(--off-white); border: 1px solid var(--linha); border-radius: var(--raio-grande); }
.encontro { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--linha); }
.encontro:first-child { border-top: 0; }
.encontro__data { display: grid; justify-items: center; line-height: 1.1; }
.encontro__dia { font-family: var(--fonte-titulo); font-size: 28px; }
.encontro__mes { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-2); }
.encontro__texto { display: grid; gap: 2px; }
.encontro__titulo { font-weight: 500; }
.encontro__meta { font-size: 13px; color: var(--texto-2); }
.encontro__estado { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-2); }
.encontro--realizado .encontro__dia, .encontro--realizado .encontro__titulo { color: var(--texto-2); }
.encontro--proximo { background: rgb(215 198 178 / 0.35); }
.encontro--proximo .encontro__estado { color: var(--terracota); }
@media (max-width: 560px) { .encontro { grid-template-columns: 52px minmax(0, 1fr); } .encontro__estado { grid-column: 2; } }

/* ---------- Desafio (F10) ---------- */

.contagem { margin-bottom: 28px; }
.contagem__numeros { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 12px 0 18px; }
.contagem__numeros > div { display: grid; }
.contagem__valor { font-family: var(--fonte-titulo); font-size: clamp(48px, 7vw, 72px); line-height: 1; }
.contagem__unidade { font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bege); margin-top: 6px; }
.contagem__datas { color: var(--areia); padding-right: 72px; }

.abas {
  display: flex; gap: 4px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--linha);
  overflow-x: auto;
  scrollbar-width: none;
}
.abas a {
  flex: none;
  padding: 12px 16px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--texto-2);
  font-size: 14.5px; font-weight: 500;
  text-decoration: none;
}
.abas a:hover { color: var(--marrom); }
.abas a[aria-current="page"] { color: var(--marrom); border-bottom-color: var(--marrom); font-weight: 600; }

.tarefa { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; margin-bottom: 24px; }
.tarefa h2 { margin: 12px 0 8px; }
.tarefa__texto p:not(.rotulo) { color: var(--areia); }
.tarefa__alvo { padding-left: 28px; border-left: 1px solid rgb(195 171 145 / 0.3); display: grid; align-content: start; gap: 8px; padding-right: 48px; }
.tarefa__meta { font-size: 16px; color: var(--areia); }
.tarefa__numero { display: block; font-family: var(--fonte-titulo); font-size: 64px; line-height: 1; color: var(--off-white); }
.tarefa__meta-texto { color: var(--areia); }
@media (max-width: 720px) {
  .tarefa { grid-template-columns: minmax(0, 1fr); }
  .tarefa__alvo { padding: 20px 0 0; border-left: 0; border-top: 1px solid rgb(195 171 145 / 0.3); }
}

.registro { display: grid; gap: 20px; }
.registro__numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.registro .acoes { margin-top: 0; }
.devolutiva { transition: box-shadow 0.3s; }
.devolutiva--nova { box-shadow: 0 0 0 2px var(--terracota); }
.devolutiva__sub { font-family: var(--fonte-texto); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-2); margin: 22px 0 10px; }
.devolutiva__sub:first-of-type { margin-top: 0; }
.devolutiva__proxima { font-size: 15px; }
.devolutiva__proxima .num { font-family: var(--fonte-titulo); font-size: 34px; margin-right: 4px; }
.numeros-registro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.numeros-registro div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio); }
.numeros-registro dt { font-size: 11.5px; color: var(--texto-2); line-height: 1.3; }
.numeros-registro dd { font-family: var(--fonte-titulo); font-size: 24px; }
@media (max-width: 1100px) { .numeros-registro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tabela-rolagem { overflow-x: auto; background: var(--off-white); border: 1px solid var(--linha); border-radius: var(--raio-grande); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { padding: 12px 16px; text-align: left; border-top: 1px solid var(--linha); white-space: nowrap; }
.tabela thead th { border-top: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2); }
.tabela tbody th { font-weight: 500; }
.tabela__num { text-align: right !important; }

.quadro { display: grid; grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 820px) { .quadro { grid-template-columns: minmax(0, 1fr); } }
.coluna { min-height: 160px; padding: 14px; border-radius: var(--raio-grande); background: rgb(215 198 178 / 0.4); }
.coluna--alvo { outline: 2px dashed var(--terracota); outline-offset: -2px; }
.coluna__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.coluna__nome { font-family: var(--fonte-texto); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.coluna__conta { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.coluna__soma { font-family: var(--fonte-titulo); font-size: 22px; margin: -2px 0 12px; }
.coluna__cartoes { display: grid; gap: 10px; }
.coluna__vazia { padding: 18px 10px; text-align: center; font-size: 13px; color: var(--texto-2); border: 1px dashed var(--borda-campo); border-radius: 10px; }
.cartao-quadro {
  display: grid; gap: 6px;
  padding: 12px 14px;
  background: var(--off-white);
  border: 1px solid var(--linha);
  border-radius: 10px;
  cursor: grab;
}
.cartao-quadro--arrastando { opacity: 0.5; }
.cartao-quadro__rotulo { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracota); }
.cartao-quadro__titulo { font-weight: 500; line-height: 1.35; }
.cartao-quadro__texto { font-size: 13px; color: var(--texto-2); }
.cartao-quadro__valor { font-family: var(--fonte-titulo); font-size: 20px; }
.cartao-quadro__acoes { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 4px; }

.resumo-oportunidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.resumo-oportunidades div { padding: 18px 20px; background: var(--off-white); border: 1px solid var(--linha); border-radius: var(--raio-grande); }
.resumo-oportunidades dt { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2); }
.resumo-oportunidades dd { margin-top: 6px; font-family: var(--fonte-titulo); font-size: 30px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.resumo-oportunidades__qtd { font-family: var(--fonte-texto); font-size: 13px; color: var(--texto-2); }
@media (max-width: 560px) { .resumo-oportunidades { grid-template-columns: minmax(0, 1fr); } }
.nova-oportunidade { margin-bottom: 24px; }
.nova-oportunidade .cartao__titulo { margin-bottom: 14px; }
.nova-oportunidade__campos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.nova-oportunidade__campos .botao { margin-top: 32px; }
.nova-oportunidade .entrada-moeda { max-width: none; }
@media (max-width: 720px) { .nova-oportunidade__campos { grid-template-columns: minmax(0, 1fr); } .nova-oportunidade__campos .botao { margin-top: 0; justify-self: start; } }

.meta-escolhida { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; padding: 14px 18px; border: 1px solid var(--terracota); border-radius: var(--raio-grande); background: var(--off-white); color: var(--texto); }
.meta-escolhida .icone { color: var(--terracota); }
.meta-form__campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: end; margin-top: 16px; }
.meta-form .entrada-moeda { max-width: none; }
.meta-form .entrada--curta { max-width: none; }
@media (max-width: 900px) { .meta-form__campos { grid-template-columns: minmax(0, 1fr); } .meta-form .entrada-moeda, .meta-form .entrada--curta { max-width: 320px; } }
.niveis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 960px) { .niveis { grid-template-columns: minmax(0, 1fr); } }
.nivel { display: grid; gap: 10px; align-content: start; padding: 24px; background: var(--off-white); border: 1px solid var(--linha); border-radius: var(--raio-grande); }
.nivel--escolhido { border: 1.5px solid var(--marrom); box-shadow: var(--sombra); }
.nivel__meta { font-family: var(--fonte-titulo); font-size: 32px; line-height: 1.1; }
.nivel__meta span { font-family: var(--fonte-texto); font-size: 13px; color: var(--texto-2); }
.nivel__contas { display: grid; gap: 12px; padding: 14px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.nivel__contas dt { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-2); }
.nivel__contas dd.num { font-size: 18px; font-weight: 600; }
.nivel__dia { font-size: 15px; }
.nivel__dia .num { font-family: var(--fonte-titulo); font-size: 40px; line-height: 1; margin-right: 6px; }
.nivel .botao { margin-top: 8px; }

/* ---------- Diagnóstico (F14) ---------- */

.abertura { max-width: 760px; }
.abertura__blocos { display: grid; gap: 12px; margin-bottom: 20px; }
.abertura__blocos li { display: flex; gap: 14px; align-items: center; font-family: var(--fonte-titulo); font-size: 19px; }
.abertura__numero {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--linha); border-radius: 50%;
  font-family: var(--fonte-texto); font-size: 13px; font-weight: 600; color: var(--terracota);
}

.numeros-grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.numero-grande { display: grid; gap: 8px; align-content: start; padding: 22px 24px; background: var(--off-white); border: 1px solid var(--linha); border-radius: var(--raio-grande); }
.numero-grande__valor { font-family: var(--fonte-titulo); font-size: clamp(30px, 3.4vw, 38px); line-height: 1.1; }
.numero-grande__alerta { font-size: 13px; font-weight: 600; color: var(--terracota); }

.foco-30 { margin-top: 32px; }
.foco-30 h2 { margin: 12px 0 22px; }
.foco-30__lista { display: grid; gap: 14px; padding-right: 72px; }
.foco-30__lista li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: baseline; font-size: 16px; }
.foco-30__lista .icone { color: var(--bege); position: relative; top: 2px; }
.foco-30__lista strong { font-weight: 600; }
@media (max-width: 560px) { .foco-30__lista { padding-right: 0; } }

.respostas { margin-top: 32px; padding: 18px 24px; background: var(--off-white); border: 1px solid var(--linha); border-radius: var(--raio-grande); }
.respostas summary { cursor: pointer; font-weight: 600; }
.respostas h3 { margin: 22px 0 10px; }
.respostas dl { display: grid; gap: 10px; }
.respostas dt { font-size: 13px; color: var(--texto-2); }
.respostas dd { white-space: pre-line; }
.respostas .nota { margin-top: 20px; }