/*
 * Estilo da página pública de assinatura.
 *
 * CSS próprio, sem framework: a página precisa abrir rápido no celular
 * do cliente, muitas vezes em rede ruim, e não depende de build.
 * Cores da marca: azul #0094D9, cinza #929497.
 */
:root {
    --azul: #0094d9;
    --azul-escuro: #006fa3;
    --cinza: #929497;
    --texto: #1f2937;
    --texto-suave: #6b7280;
    --borda: #e5e7eb;
    --fundo: #f6f8fa;
    --verde: #15803d;
    --ambar: #b45309;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

.topo {
    background: #fff;
    border-bottom: 3px solid var(--azul);
    padding: 0.875rem 1rem;
    text-align: center;
}

.topo__logo { height: 42px; }

.conteudo {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2.5rem;
}

.card {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.card--destaque { border-top: 4px solid var(--azul); }
.card--centro { text-align: center; }

.titulo {
    font-size: 1.375rem;
    margin: 0 0 0.5rem;
    color: var(--azul-escuro);
}

.subtitulo {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cinza);
    margin: 0 0 0.75rem;
}

.texto { margin: 0 0 0.75rem; }
.texto--menor { font-size: 0.875rem; color: var(--texto-suave); }

.dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
}

.dados--centro { justify-items: center; }
.dados dt { font-size: 0.75rem; color: var(--texto-suave); }
.dados dd { margin: 0.125rem 0 0; font-weight: 600; }

/* Contrato vindo do IXC: contido para não estourar o layout no celular. */
.contrato {
    border: 1px solid var(--borda);
    border-radius: 0.5rem;
    padding: 1rem;
    max-height: 26rem;
    overflow-y: auto;
    font-size: 0.9375rem;
    background: #fff;
}

.contrato img { max-width: 100%; height: auto; }
.contrato table { width: 100%; border-collapse: collapse; }
.contrato td, .contrato th { padding: 0.25rem; word-break: break-word; }

/* Área de aceite — alvo de toque generoso para uso no celular. */
.concordancia {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.75rem;
    margin-bottom: 0.625rem;
    border: 1px solid var(--borda);
    border-radius: 0.5rem;
    cursor: pointer;
}

.concordancia:hover { border-color: var(--azul); }
.concordancia input { margin-top: 0.2rem; width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

.aviso {
    font-size: 0.8125rem;
    color: var(--texto-suave);
    margin: 0.75rem 0 1rem;
}

.botao {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--azul);
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
}

.botao:hover { background: var(--azul-escuro); }
.botao:disabled { background: var(--cinza); cursor: default; }

.alerta {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.alerta--erro {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.alerta ul { margin: 0; padding-left: 1.125rem; }

.icone {
    width: 3.5rem;
    height: 3.5rem;
    line-height: 3.5rem;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
}

.icone--ok { background: var(--verde); }
.icone--atencao { background: var(--ambar); }
.icone--neutro { background: var(--cinza); }

.rodape {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--texto-suave);
    padding: 1rem;
}

@media (max-width: 480px) {
    .conteudo { padding: 1rem 0.75rem 2rem; }
    .card { padding: 1rem; }
    .titulo { font-size: 1.1875rem; }
}