/* Termo de adesão: uma coluna de leitura, sem barra lateral.
 *
 * A largura é limitada porque isto é TEXTO CORRIDO — uma linha que atravessa um
 * monitor de 1440px faz o olho perder o começo da seguinte, e este documento
 * precisa ser lido, não passado adiante. */

/* CARD sobre o fundo, e não texto solto: `--cor-fundo` é o petróleo escuro que
 * fica ATRÁS dos cards (tokens.css), e a plataforma inteira põe
 * `--cor-superficie` por cima. Sem isto, o termo sai texto escuro sobre fundo
 * escuro — ilegível. Só a captura mostrou. */
.termo {
    max-width: 74ch;
    margin: var(--esp-6) auto;
    padding: var(--esp-8) var(--esp-6) var(--esp-4);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    border-radius: var(--raio-campo);
}

/* ---- Topo --------------------------------------------------------------- */
.termo__topo {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    padding-bottom: var(--esp-5);
    border-bottom: 1px solid var(--cor-borda);
}
.termo__marca {
    width: 40px; height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}
.termo__titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: var(--texto-xl);
    line-height: 1.25;
}
.termo__meta {
    margin: var(--esp-1) 0 0;
    font-size: var(--texto-sm);
    color: var(--cor-texto-medio);
}

.termo__aviso {
    margin: var(--esp-5) 0 0;
    padding: var(--esp-3) var(--esp-4);
    background: var(--status-analise-bg);
    color: var(--status-analise-fg);
    border-radius: var(--raio-campo);
    font-size: var(--texto-base);
}

/* ---- O texto ------------------------------------------------------------ */
.termo__texto {
    margin: var(--esp-6) 0;
    font-size: var(--texto-base);
    line-height: 1.65;

    /* Primeira quebra forçada do projeto, e é medida. O termo é o documento
     * onde colar um endereço é natural — o texto já reserva lugar para o
     * parecer do Comitê de Ética —, e uma URL não tem espaço onde quebrar.
     * Com 250 caracteres sem espaço a página rolava na horizontal nas SETE
     * larguras, inclusive na maior: 87px de excesso em 1440 e 707px em 768.
     * `anywhere` e não `break-word` porque só o primeiro entra na conta da
     * largura mínima do bloco — com `break-word` o parágrafo continua pedindo
     * o tamanho da palavra inteira e empurra o pai do mesmo jeito.
     * Vale para as três telas: o aceite, a versão publicada e a prévia do
     * editor, que reusa esta classe. */
    overflow-wrap: anywhere;
}
/* Quando o texto vem como CARD solto numa tela do shell — a versão publicada, o
 * "meu termo" e a prévia do editor —, e não dentro da moldura `.termo` da tela
 * de aceite, ele precisa da própria largura e do próprio respiro.
 *
 * `.card` (base.css) define fundo, borda e sombra, e nada mais: quem compõe o
 * espaço é sempre uma segunda classe. Sem esta regra o texto encostava na borda
 * do card e a linha ia a **207 caracteres** em 1440px (medido) — o dobro do que
 * se lê sem perder a linha de vista, num documento que a pessoa precisa ler
 * inteiro antes de assinar. A moldura da tela de aceite já resolvia isso com os
 * mesmos 74ch, então o número aqui não é escolha nova: é o que faz as telas
 * mostrarem o mesmo documento. */
.termo__texto.card {
    max-width: 74ch;
    padding: var(--esp-8) var(--esp-6) var(--esp-4);
}

.termo__texto h1 { display: none; }  /* o título já está no cabeçalho */
.termo__texto h2 {
    margin: var(--esp-6) 0 var(--esp-3);
    font-family: var(--fonte-titulo);
    font-size: var(--texto-lg);
}
.termo__texto p  { margin: 0 0 var(--esp-4); }
.termo__texto ul { margin: 0 0 var(--esp-4) var(--esp-5); }
.termo__texto li { margin-bottom: var(--esp-2); }

/* ---- Aceite ------------------------------------------------------------- */
.termo__acoes {
    /* Gruda no rodapé da janela: num texto longo, um botão que só aparece
       depois de rolar tudo faz quem já leu procurar onde assinar. */
    position: sticky;
    bottom: 0;
    padding: var(--esp-5) 0 var(--esp-4);
    background: var(--cor-superficie);
    border-top: 1px solid var(--cor-borda);
}

.termo__aceite {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-3);
    margin-bottom: var(--esp-4);
    font-size: var(--texto-base);
    cursor: pointer;
}
.termo__aceite input {
    /* 20px e não o padrão do navegador: é a caixa que decide se a pessoa passa,
       e alvo pequeno em tela sensível ao toque erra. */
    width: 20px; height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--cor-marca);
}

.termo__botoes { display: flex; gap: var(--esp-3); }
.termo__botoes .botao { min-height: 44px; }

.termo__sair {
    margin-top: var(--esp-5);
    text-align: center;
}
.termo__link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--cor-texto-medio);
    font-size: var(--texto-sm);
    text-decoration: underline;
    cursor: pointer;
}

/* Abaixo de 768px a plataforma rola na horizontal de propósito (ver
 * `tokens.css`) — mas ESTA tela é lida no celular por quem só precisa assinar,
 * e por isso ela respira em qualquer largura. */
@media (max-width: 768px) {
    .termo {
        margin: 0;
        padding: var(--esp-5) var(--esp-4) var(--esp-4);
        border-radius: 0;
    }
    .termo__topo { gap: var(--esp-3); }
}