/* ==========================================================================
   CAMPANHA DE MATRÍCULAS 2027 — LAYOUT DE PÁGINA
   Só o que o design system não cobre: cabeçalho do site, hero, passos do
   fluxo, cartões de escolha e a folha do contrato. Nenhum hex solto —
   tudo sai de tokens.css.

   O ALINHAMENTO É UMA GRADE DE 12 COLUNAS
   Formulário e cartões dividem a mesma largura e os mesmos pontos de quebra.
   Toda linha de campos soma 12 (8+4, 4+4+4, 12), então as bordas esquerda e
   direita se repetem descendo a página em vez de dançar conforme o número de
   campos. Os cartões usam contagens fixas (2, 3 ou 4 colunas) pelo mesmo
   motivo: `auto-fit` decide a contagem pela largura do conteúdo e deixa a
   última fileira desalinhada da anterior.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* O rodapé encosta na base mesmo nos passos curtos do fluxo — sem isso sobra
   uma faixa branca embaixo dele nas telas altas. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > footer { flex: none; }

img, svg { max-width: 100%; }

/* ---------- Trilhos de largura ----------
   Uma medida só para a página inteira. Conteúdo que precisa ser estreito
   limita o texto por dentro, nunca encolhendo o contêiner: se o contêiner
   encolhe e recentraliza, a margem esquerda muda de seção para seção e a
   página inteira parece torta. */

.cx-largura {
  width: min(100% - 2 * var(--cx-esp-6), 68rem);
  margin-inline: auto;
}
.cx-medida { max-width: 46rem; }
/* Numa seção centralizada (a 404), a medida centraliza junto. */
.cx-centro .cx-medida { margin-inline: auto; }

/* ---------- Grade de blocos ----------
   Contagem fixa por ponto de quebra: 1 no celular, 2 no tablet, 3 ou 4 no
   desktop. Serve tanto para cartão quanto para opção de escolha. */

.cx-blocos {
  display: grid;
  gap: var(--cx-esp-4);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 40rem) {
  .cx-blocos--2, .cx-blocos--3, .cx-blocos--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .cx-blocos--3 { grid-template-columns: repeat(3, 1fr); }
  .cx-blocos--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Tarja de rascunho ---------- */

.cx-rascunho {
  background: var(--cx-parcial);
  color: var(--cx-neutro-0);
  font-size: var(--cx-txt-xs);
  font-weight: var(--cx-peso-forte);
  text-align: center;
  padding: var(--cx-esp-2) var(--cx-esp-4);
  letter-spacing: .04em;
}

/* ---------- Cabeçalho ---------- */

.cx-cabecalho {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cx-superficie);
  border-bottom: 1px solid var(--cx-borda);
}
.cx-cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cx-esp-4);
  min-height: 4.5rem;
}
.cx-cabecalho__marca { display: flex; align-items: center; }
/* O logo é SVG inline (e não <img>) porque SVG carregado como imagem não
   enxerga a webfont da página — o texto da marca sairia noutra fonte. */
.cx-logo { height: 48px; width: auto; display: block; }
.cx-logo--grande { height: 64px; }
.cx-cabecalho__acoes { display: flex; align-items: center; gap: var(--cx-esp-3); }

/* ---------- Hero ---------- */

.cx-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--cx-roxo-700) 0%, var(--cx-roxo-500) 55%, var(--cx-turquesa-800) 140%);
  color: var(--cx-texto-invertido);
  padding-block: var(--cx-esp-16);
}
/* Os anéis do logo viram fundo — a forma da marca, não uma textura qualquer. */
.cx-hero::before,
.cx-hero::after {
  content: '';
  position: absolute;
  border-radius: var(--cx-raio-full);
  border: 18px solid var(--cx-turquesa-500);
  opacity: .18;
  pointer-events: none;
}
.cx-hero::before { width: 22rem; height: 22rem; right: -6rem; top: -7rem; }
.cx-hero::after  { width: 14rem; height: 14rem; right: 7rem;  bottom: -6rem; border-color: var(--cx-roxo-300); }

/* Sem max-width aqui: o contêiner é o mesmo `.cx-largura` das outras seções,
   e quem limita a medida é o texto lá dentro. Encolher o contêiner o faria
   recentralizar, e o título do hero sairia do prumo do resto da página. */
.cx-hero__conteudo { position: relative; }
.cx-hero__conteudo > h1,
.cx-hero__conteudo > p { max-width: 38rem; }
.cx-hero h1 {
  font-size: var(--cx-txt-3xl);
  line-height: var(--cx-linha-apertada);
  font-weight: var(--cx-peso-forte);
  letter-spacing: -.015em;
  margin: 0 0 var(--cx-esp-4);
}
.cx-hero p { font-size: var(--cx-txt-lg); margin: 0 0 var(--cx-esp-8); opacity: .92; }
.cx-hero .cx-btn--principal {
  background: var(--cx-neutro-0);
  color: var(--cx-acao);
}
.cx-hero .cx-btn--principal:hover:not(:disabled) { background: var(--cx-turquesa-100); }
.cx-hero .cx-btn--secundario { color: var(--cx-neutro-0); border-color: var(--cx-neutro-0); }
.cx-hero .cx-btn--secundario:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }

.cx-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--cx-esp-2);
  background: var(--cx-turquesa-500);
  color: var(--cx-turquesa-950);
  font-size: var(--cx-txt-xs);
  font-weight: var(--cx-peso-forte);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: var(--cx-esp-2) var(--cx-esp-4);
  border-radius: var(--cx-raio-full);
  margin-bottom: var(--cx-esp-6);
}

/* ---------- Seções ---------- */

.cx-secao { padding-block: var(--cx-esp-16); }
.cx-secao--alt { background: var(--cx-fundo-alt); }
.cx-secao__cabecalho { margin-bottom: var(--cx-esp-8); max-width: 46rem; }
.cx-secao__titulo {
  font-size: var(--cx-txt-2xl);
  font-weight: var(--cx-peso-forte);
  line-height: var(--cx-linha-apertada);
  letter-spacing: -.01em;
  margin: 0 0 var(--cx-esp-2);
}
.cx-secao__apoio { color: var(--cx-texto-suave); margin: 0; }

/* Subtítulo de um bloco dentro da seção — um segmento de valores, por exemplo. */
.cx-subtitulo {
  font-size: var(--cx-txt-xl);
  font-weight: var(--cx-peso-forte);
  line-height: var(--cx-linha-apertada);
  margin: 0 0 var(--cx-esp-1);
}
.cx-apoio { color: var(--cx-texto-suave); font-size: var(--cx-txt-sm); margin: 0 0 var(--cx-esp-4); }

/* Etapa da campanha: selo à direita do título, prazo em destaque logo abaixo. */
.cx-fase__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cx-esp-3);
}
.cx-fase__topo .cx-cartao__titulo { margin: 0; }
.cx-fase__topo .cx-selo { flex: none; }
.cx-fase__prazo {
  font-family: var(--cx-fonte-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--cx-txt-xl);
  font-weight: var(--cx-peso-forte);
  color: var(--cx-acao);
  line-height: var(--cx-linha-apertada);
}
.cx-cartao--encerrado { opacity: .55; }

/* Blocos de valores: um por segmento, com o mesmo respiro entre eles. */
.cx-segmentos { display: grid; gap: var(--cx-esp-12); }
.cx-segmento__taxas { margin: var(--cx-esp-4) 0 0; }

/* O número do desconto, na mesma escala do preço. */
.cx-desconto {
  font-family: var(--cx-fonte-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--cx-txt-xl);
  font-weight: var(--cx-peso-forte);
  color: var(--cx-acao);
  line-height: var(--cx-linha-apertada);
}

/* Cartão de passo numerado: o título ocupa duas linhas mesmo quando só usa
   uma, para os parágrafos começarem todos na mesma altura. */
.cx-cartao--passo .cx-cartao__titulo {
  min-height: calc(2 * var(--cx-linha-apertada) * var(--cx-txt-lg));
}
.cx-cartao p { margin: 0; }

/* ---------- Cartão de valores ----------
   A linha do horário absorve a folga e a nota tem altura de duas linhas
   garantida. Assim o preço cai sempre na mesma altura em todos os cartões da
   fileira, tenha o texto de cima uma linha ou duas. */

.cx-preco {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--cx-esp-1);
  height: 100%;
}
.cx-preco__modalidade { font-weight: var(--cx-peso-forte); }
.cx-preco__horario { font-size: var(--cx-txt-xs); color: var(--cx-texto-suave); }
.cx-preco__valor {
  font-family: var(--cx-fonte-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--cx-txt-xl);
  font-weight: var(--cx-peso-forte);
  color: var(--cx-acao);
  align-self: end;
  padding-top: var(--cx-esp-3);
}
.cx-preco__nota {
  font-size: var(--cx-txt-xs);
  color: var(--cx-texto-suave);
  min-height: calc(2 * var(--cx-linha-normal) * var(--cx-txt-xs));
}
.cx-preco__antes {
  font-family: var(--cx-fonte-mono);
  color: var(--cx-texto-suave);
  text-decoration: line-through;
}

/* ---------- Trilha de passos ---------- */

.cx-trilha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cx-esp-2);
  list-style: none;
  margin: 0;
  padding: var(--cx-esp-6) 0;
}
.cx-trilha__item {
  display: flex;
  align-items: center;
  gap: var(--cx-esp-2);
  font-size: var(--cx-txt-xs);
  font-weight: var(--cx-peso-medio);
  color: var(--cx-texto-suave);
  padding: var(--cx-esp-2) var(--cx-esp-3);
  border-radius: var(--cx-raio-full);
  background: var(--cx-fundo-alt);
  white-space: nowrap;
}
.cx-trilha__item[aria-current="step"] {
  background: var(--cx-acao);
  color: var(--cx-texto-invertido);
}
.cx-trilha__item--feito { background: var(--cx-turquesa-100); color: var(--cx-turquesa-900); }
.cx-trilha__num {
  display: inline-grid;
  place-items: center;
  width: 1.35rem; height: 1.35rem;
  border-radius: var(--cx-raio-full);
  background: rgba(0, 0, 0, .08);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ---------- Escolhas (rádio e caixa como cartão) ---------- */

.cx-escolha {
  position: relative;
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: var(--cx-esp-3);
  padding: var(--cx-esp-4);
  border: 1.5px solid var(--cx-borda);
  border-radius: var(--cx-raio-md);
  background: var(--cx-superficie);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.cx-escolha:hover { border-color: var(--cx-borda-forte); }
/* O controle centraliza na primeira linha do título, não no topo da caixa: a
   altura da linha vem do tipo, então a conta acompanha se o tipo mudar. */
.cx-escolha input {
  accent-color: var(--cx-acao);
  width: 1.1rem;
  height: 1.1rem;
  margin: calc((1em * var(--cx-linha-normal) - 1.1rem) / 2) 0 0;
}
.cx-escolha:has(input:checked) { border-color: var(--cx-acao); background: var(--cx-acao-suave); }
.cx-escolha:has(input:focus-visible) { box-shadow: var(--cx-foco); }

.cx-escolha__texto {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--cx-esp-1);
  min-width: 0;
}
.cx-escolha__titulo { font-weight: var(--cx-peso-forte); }
.cx-escolha__apoio { font-size: var(--cx-txt-sm); color: var(--cx-texto-suave); }
/* `1fr` no apoio: o valor desce para a base e todos os preços da fileira ficam
   na mesma linha, mesmo com apoios de tamanhos diferentes. */
.cx-escolha__valor {
  font-family: var(--cx-fonte-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--cx-peso-forte);
  color: var(--cx-acao);
  align-self: end;
  padding-top: var(--cx-esp-2);
}
.cx-escolha__selo {
  position: absolute;
  top: calc(-1 * var(--cx-esp-2));
  right: var(--cx-esp-4);
  background: var(--cx-destaque);
  color: var(--cx-turquesa-950);
  font-size: var(--cx-txt-xs);
  font-weight: var(--cx-peso-forte);
  padding: 2px var(--cx-esp-3);
  border-radius: var(--cx-raio-full);
}

/* ---------- Sugestões da busca ---------- */

.cx-sugestoes { display: grid; gap: var(--cx-esp-2); margin-top: var(--cx-esp-3); }
.cx-sugestoes:empty { margin-top: 0; }
.cx-sugestoes .cx-apoio, .cx-sugestoes .cx-campo__erro { margin: 0; }

.cx-sugestao {
  display: grid;
  gap: 2px;
  text-align: left;
  font-family: inherit;
  font-size: var(--cx-txt-base);
  color: var(--cx-texto);
  background: var(--cx-superficie);
  border: 1.5px solid var(--cx-borda);
  border-radius: var(--cx-raio-md);
  padding: var(--cx-esp-3) var(--cx-esp-4);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.cx-sugestao:hover { border-color: var(--cx-acao); background: var(--cx-acao-suave); }
.cx-sugestao__nome { font-weight: var(--cx-peso-forte); }
.cx-sugestao__apoio { font-size: var(--cx-txt-sm); color: var(--cx-texto-suave); }

/* ---------- Anexo escolhido ---------- */

.cx-anexo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cx-esp-2);
  margin: var(--cx-esp-2) 0 0;
  padding: var(--cx-esp-2) var(--cx-esp-3);
  background: var(--cx-acao-suave);
  border-radius: var(--cx-raio-sm);
  font-size: var(--cx-txt-sm);
}
.cx-anexo__nome {
  font-weight: var(--cx-peso-forte);
  overflow-wrap: anywhere;
  flex: 1 1 12rem;
}
.cx-anexo__peso { color: var(--cx-texto-suave); font-variant-numeric: tabular-nums; }

/* O input de arquivo some da vista mas continua no fluxo do teclado: a moldura
   inteira é o <label>, então clique e Enter caem no mesmo lugar. */
.cx-solta { cursor: pointer; }
.cx-solta:focus-within { box-shadow: var(--cx-foco); }

/* ---------- Formulário: a grade de 12 colunas ---------- */

.cx-campos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--cx-esp-4);
  align-items: start;
}
.cx-campos > * { grid-column: 1 / -1; }

@media (min-width: 44rem) {
  .cx-campos > [data-span="3"] { grid-column: span 3; }
  .cx-campos > [data-span="4"] { grid-column: span 4; }
  .cx-campos > [data-span="6"] { grid-column: span 6; }
  .cx-campos > [data-span="8"] { grid-column: span 8; }
}

/* A mensagem de erro reserva a própria linha o tempo todo: sem isso, tudo que
   está abaixo pula no instante em que o erro aparece. */
.cx-campo__erro { min-height: 1rem; }
.cx-campo__opcional { font-weight: var(--cx-peso-normal); }

/* Um select tem que fechar na mesma altura do input ao lado dele. */
select.cx-campo__controle {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cx-texto-suave) 50%),
                    linear-gradient(135deg, var(--cx-texto-suave) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--cx-esp-8);
}
textarea.cx-campo__controle { resize: vertical; line-height: var(--cx-linha-normal); }

/* ---------- Fluxo e painel de resumo ---------- */

.cx-fluxo {
  display: grid;
  gap: var(--cx-esp-8);
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: var(--cx-esp-16);
  align-items: start;
}
@media (min-width: 62rem) {
  .cx-fluxo--com-resumo { grid-template-columns: minmax(0, 1fr) 20rem; }

  /* Com o resumo ocupando 20rem à direita, a coluna do formulário não comporta
     três cartões sem quebrar os títulos no meio. Duas colunas cabem sempre,
     porque a largura da página é limitada e a do painel é fixa. */
  .cx-fluxo--com-resumo .cx-blocos--3 { grid-template-columns: repeat(2, 1fr); }
}
.cx-resumo { position: sticky; top: 6rem; }
.cx-resumo__lista { margin: 0; }
.cx-resumo__nota { margin: 0; }
.cx-resumo__nota + .cx-resumo__nota { margin-top: var(--cx-esp-2); }
.cx-resumo__linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--cx-esp-4);
  padding-block: var(--cx-esp-2);
  border-bottom: 1px solid var(--cx-borda);
  font-size: var(--cx-txt-sm);
}
.cx-resumo__linha:last-of-type { border-bottom: none; }
.cx-resumo__linha dt { color: var(--cx-texto-suave); flex: 1 1 auto; }
.cx-resumo__linha dd {
  margin: 0;
  flex: 0 1 auto;
  max-width: 62%;
  font-weight: var(--cx-peso-forte);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cx-resumo__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--cx-esp-3);
  margin-top: var(--cx-esp-2);
  padding-top: var(--cx-esp-4);
  border-top: 2px solid var(--cx-acao);
}
.cx-resumo__total strong {
  font-family: var(--cx-fonte-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--cx-txt-xl);
  color: var(--cx-acao);
}

/* ---------- Navegação do fluxo ---------- */

.cx-navegacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cx-esp-3);
  margin-top: var(--cx-esp-4);
  padding-top: var(--cx-esp-6);
  border-top: 1px solid var(--cx-borda);
}

/* ---------- Folha do contrato ---------- */

.cx-contrato {
  background: var(--cx-superficie);
  border: 1px solid var(--cx-borda);
  border-radius: var(--cx-raio-md);
  padding: var(--cx-esp-8);
  max-height: 32rem;
  overflow-y: auto;
  font-size: var(--cx-txt-sm);
  line-height: var(--cx-linha-normal);
}
.cx-contrato h2 {
  font-size: var(--cx-txt-lg);
  text-align: center;
  line-height: var(--cx-linha-apertada);
  margin: 0 0 var(--cx-esp-8);
}
.cx-contrato h2 small { display: block; font-size: var(--cx-txt-sm); color: var(--cx-texto-suave); margin-top: var(--cx-esp-2); }
.cx-contrato h3 {
  font-size: var(--cx-txt-sm);
  color: var(--cx-acao);
  margin: var(--cx-esp-8) 0 var(--cx-esp-3);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.cx-contrato p { margin: 0 0 var(--cx-esp-3); text-align: justify; hyphens: auto; }
.cx-contrato .ct-rotulo { font-weight: var(--cx-peso-forte); margin-bottom: var(--cx-esp-1); text-align: left; }
.cx-contrato .ct-nao-informado { color: var(--cx-texto-suave); font-style: italic; text-align: left; }
.cx-contrato .ct-lista, .cx-contrato .ct-opcoes { margin: 0 0 var(--cx-esp-4); padding-left: var(--cx-esp-6); }
.cx-contrato .ct-lista li { margin-bottom: var(--cx-esp-1); }
.cx-contrato .ct-opcoes { list-style: none; padding-left: 0; }
.cx-contrato .ct-opcoes li {
  font-family: var(--cx-fonte-mono);
  font-size: var(--cx-txt-xs);
  padding-block: 2px;
}
.cx-contrato .ct-marcado { color: var(--cx-acao); font-weight: var(--cx-peso-forte); }
.cx-contrato .ct-quadro {
  width: 100%;
  border-collapse: collapse;
  margin: var(--cx-esp-4) 0;
  font-size: var(--cx-txt-xs);
  table-layout: fixed;
}
.cx-contrato .ct-quadro th,
.cx-contrato .ct-quadro td {
  border: 1px solid var(--cx-borda);
  padding: var(--cx-esp-2) var(--cx-esp-3);
  text-align: left;
  vertical-align: top;
}
.cx-contrato .ct-quadro th {
  background: var(--cx-fundo-alt);
  width: 42%;
  color: var(--cx-texto-suave);
  font-weight: var(--cx-peso-medio);
}
.cx-contrato .ct-quadro td { font-variant-numeric: tabular-nums; }
.cx-contrato .ct-assinaturas { margin-top: var(--cx-esp-16); }
.cx-contrato .ct-linha-assinatura { margin-top: var(--cx-esp-12); max-width: 20rem; }
.cx-contrato .ct-linha-assinatura span { display: block; border-top: 1px solid var(--cx-texto); }
.cx-contrato .ct-linha-assinatura small { color: var(--cx-texto-suave); }

/* A via da escola já sai assinada e carimbada. A assinatura fica encostada na
   linha, como numa folha de papel; o carimbo vem abaixo, deslocado, do jeito
   que um carimbo cai na mão. */
.cx-contrato .ct-linha-assinatura--escola { position: relative; max-width: 22rem; }
.cx-contrato .ct-assinatura-imagem {
  display: block;
  height: 3.2rem;
  width: auto;
  margin-bottom: -0.7rem;
  margin-left: var(--cx-esp-4);
}
.cx-contrato .ct-carimbo {
  display: block;
  height: 3.6rem;
  width: auto;
  margin-top: var(--cx-esp-3);
  margin-left: var(--cx-esp-8);
  opacity: .82;
}
.cx-contrato .ct-nota-assinatura { margin-top: var(--cx-esp-8); font-size: var(--cx-txt-xs); color: var(--cx-texto-suave); text-align: left; }

/* ---------- Rodapé ---------- */

.cx-rodape {
  background: var(--cx-roxo-900);
  color: var(--cx-neutro-200);
  padding-block: var(--cx-esp-12);
  font-size: var(--cx-txt-sm);
}
.cx-rodape a { color: var(--cx-turquesa-300); }
.cx-rodape__grade { display: grid; gap: var(--cx-esp-8); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .cx-rodape__grade { grid-template-columns: repeat(3, 1fr); } }
.cx-rodape h3 { font-size: var(--cx-txt-sm); color: var(--cx-neutro-0); margin: 0 0 var(--cx-esp-3); }
.cx-rodape p { margin: 0 0 var(--cx-esp-2); }
.cx-rodape p:last-child { margin-bottom: 0; }

/* ---------- Página vazia (404) ----------
   Sem conteúdo para empurrar, o bloco fica no meio da tela em vez de grudado
   no topo. */

.cx-vazia {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--cx-esp-6);
  padding-block: var(--cx-esp-16);
  min-height: 60vh;
}

/* ---------- Listas de texto ---------- */

.cx-lista { margin: 0; padding-left: var(--cx-esp-6); display: grid; gap: var(--cx-esp-2); }

/* ---------- Impressão: só o contrato ---------- */

@media print {
  .cx-cabecalho, .cx-rodape, .cx-navegacao, .cx-trilha, .cx-rascunho,
  .cx-resumo, .cx-topo, .cx-nao-imprime { display: none !important; }
  .cx-contrato {
    max-height: none;
    overflow: visible;
    border: none;
    padding: 0;
    font-size: 10.5pt;
  }
  .cx-contrato h3 { break-after: avoid; }
  .cx-contrato .ct-assinaturas { break-inside: avoid; }
  body { background: #fff; }
}

/* ---------- Telas estreitas ----------
   Com 8 passos, a trilha inteira ocupava três linhas no celular. Aqui ela
   vira uma fita de números com o rótulo só do passo atual. */

@media (max-width: 44rem) {
  .cx-largura { width: min(100% - 2 * var(--cx-esp-4), 68rem); }

  #rotulo-aluno { display: none; }
  .cx-logo { height: 40px; }
  .cx-cabecalho__interno { min-height: 3.75rem; }
  /* Com 360px de largura, logo + "Valores" + botão não cabem sem espremer a
     marca e quebrar o botão em duas linhas. O link de âncora sai: a seção de
     valores está logo abaixo, a um rolar de distância. */
  .cx-cabecalho__acoes .cx-btn--texto { display: none; }
  .cx-cabecalho__acoes .cx-btn { white-space: nowrap; }

  .cx-trilha { gap: var(--cx-esp-1); padding-block: var(--cx-esp-4); }
  .cx-trilha__item { padding: var(--cx-esp-1); }
  .cx-trilha__item .cx-trilha__rotulo { display: none; }
  .cx-trilha__item[aria-current="step"] .cx-trilha__rotulo {
    display: inline;
    padding-right: var(--cx-esp-2);
  }

  .cx-hero { padding-block: var(--cx-esp-12); }
  .cx-hero h1 { font-size: var(--cx-txt-2xl); }
  .cx-secao { padding-block: var(--cx-esp-12); }
  .cx-cartao--passo .cx-cartao__titulo { min-height: 0; }

  /* O CONTRATO ROLA COM A PÁGINA, NÃO DENTRO DE SI
     No desktop a caixa com rolagem própria funciona: sobra tela em volta. No
     celular ela virava uma janelinha de 384px com 5.900px de contrato dentro —
     dezesseis telas de rolagem aninhada, no documento que os pais mais
     precisam ler. Aqui a folha ganha altura natural e quem rola é a página. */
  .cx-contrato {
    padding: var(--cx-esp-4);
    max-height: none;
    overflow: visible;
    border-left: none;
    border-right: none;
    border-radius: 0;
    margin-inline: calc(-1 * var(--cx-esp-4));
  }
  .cx-contrato p { text-align: left; }        /* justificado abre buracos em 360px */
  .cx-contrato .ct-quadro th { width: 45%; }

  /* Com o contrato inteiro na página, o aceite fica a 6.000px do topo. A
     navegação gruda no rodapé para a ação continuar ao alcance do polegar. */
  .cx-navegacao {
    position: sticky;
    bottom: 0;
    z-index: 10;
    flex-direction: column-reverse;
    gap: var(--cx-esp-2);
    margin-inline: calc(-1 * var(--cx-esp-4));
    padding: var(--cx-esp-4);
    background: var(--cx-fundo);
    border-top: 1px solid var(--cx-borda);
    box-shadow: 0 -4px 16px rgba(39, 18, 58, .06);
  }
  .cx-navegacao .cx-btn { width: 100%; }
  /* "Voltar" só é botão de verdade quando dá para voltar; desabilitado, some
     do caminho em vez de ocupar meia tela do rodapé. */
  .cx-navegacao .cx-btn:disabled { display: none; }
}

/* ---------- Toque ----------
   44px é o menor alvo que um dedo acerta com confiança. Os botões estavam em
   42px: dois pixels que ninguém vê e a mão sente. Vale para qualquer aparelho
   sem cursor fino, não só para telas estreitas. */
@media (pointer: coarse) {
  .cx-btn { min-height: 44px; }
  /* "remover" também é dedo: some do padrão --pequeno e ganha a mesma altura,
     com o anexo virando duas linhas para o nome do arquivo não se espremer. */
  .cx-btn--pequeno { min-height: 44px; }
  .cx-anexo { flex-wrap: wrap; row-gap: 0; }
  .cx-anexo__nome { flex: 1 1 100%; }
  .cx-sugestao { min-height: 56px; }
}

/* ---------- Utilitários mínimos ---------- */

.cx-oculto { display: none !important; }
.cx-centro { text-align: center; }
.cx-espaco-topo { margin-top: var(--cx-esp-6); }