/* =========================================================================
   nf-prose — HTML autorado no painel, no desenho do site
   =========================================================================
   Regulamento, descrição e kit são HTML escrito por organizador. Estas regras
   dão a eles a linguagem visual do site — não uma versão re-tingida do desenho
   que o conteúdo trazia.

   O VOCABULÁRIO É O DO TEMPLATE, o mesmo de `.mc-secao` e `.mc-cartao` no
   `novo-front.css`:

     · fio curto de 34×2px em dourado ANTES do título, nunca uma régua cheia
       por baixo dele;
     · título em `--font-body` (Wix Madefor Display), peso 700, entrelinha
       curta e `letter-spacing` negativo;
     · sobretítulo em versalete espaçado, no dourado;
     · caixa = cartão branco, borda de 1px clara e raio de 16px — não barra
       colorida na lateral;
     · fio de apoio de 26×1px em `--color-nf-line-strong`.

   POR QUE UMA FOLHA SOLTA, e não o `novo-front.css`: o mesmo HTML aparece em
   três contextos que carregam CSS diferente — a página do regulamento usa o
   `app.css`, a área do cliente usa o `nf.css`, o funil legado usa o tema do
   painel. As duas builds Tailwind não podem coexistir no mesmo documento: cada
   uma traz o seu Preflight. Uma folha simples entra em qualquer um dos três.

   Os NOMES DE CLASSE do conteúdo (`reg-toc`, `evt-card`, ...) seguem os que já
   estão no HTML publicado das 27 corridas — trocá-los exigiria reescrever o
   conteúdo de todas.

   Antes disto, cada evento carregava o próprio `<style>` no banco: 3 KB no
   regulamento e 6 KB na descrição, byte a byte idênticos em todas as provas.

   Valores literais porque aqui não há build: #70643e (dourado), #e0e0d8 e #ddd
   (fios), #eaeaea (fio claro), #f7f8fa (superfície), #0f0f0f (texto forte).

   O e-mail de confirmação é a exceção e continua com estilo embutido: cliente
   de e-mail não carrega folha externa.
   ========================================================================= */

.nf-prose {
    line-height: 1.7;
    color: #3a3a3a;
    font-family: "Wix Madefor Display", sans-serif;
}
.nf-prose p { margin: 0 0 1em; }
.nf-prose ul, .nf-prose ol { margin: 0 0 1em 1.35em; }
.nf-prose ul { list-style: disc; }
.nf-prose ol { list-style: decimal; }
.nf-prose li { margin: .3em 0; }
.nf-prose strong, .nf-prose b { font-weight: 700; color: #0f0f0f; }
.nf-prose em { font-style: normal; color: #6f6f6f; }
.nf-prose a { color: #70643e; text-decoration: underline; text-underline-offset: 2px; }
.nf-prose img { max-width: 100%; height: auto; margin: .5em 0; }

/* -- Títulos: fio curto em dourado antes, como em `.mc-secao-sobre` --------
   SEM `font-family` de propósito. O `app.css` do protótipo declara
   `h1..h6 { font-family: Montserrat !important }`, e é ele que manda nas
   páginas do site; impor outra fonte aqui seria brigar com o layout em vez de
   segui-lo. Nos outros contextos (área do cliente, funil legado) vale a fonte
   daquele layout, que é o que se quer. */
.nf-prose h1, .nf-prose h2, .nf-prose h3, .nf-prose h4 {
    color: #0f0f0f;
    letter-spacing: -.02em;
    line-height: 1.12;
}
.nf-prose h1 {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 700;
    margin: 0 0 1.4rem;
}
.nf-prose h2 {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 700;
    margin: 2.6rem 0 .9rem;
}
.nf-prose h1::before, .nf-prose h2::before {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    background: #70643e;
    margin-bottom: .85rem;
}
.nf-prose h3 { font-size: 1.05rem; font-weight: 700; margin: 1.8rem 0 .6rem; }
.nf-prose h4 { font-size: .95rem;  font-weight: 700; margin: 1.3rem 0 .5rem; color: #3a3a3a; }

/* -- Tabela: fio claro, cabeçalho em versalete ---------------------------- */
.nf-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .94em; }
.nf-prose th, .nf-prose td { border: 1px solid #eaeaea; padding: .7em .85em; text-align: left; }
.nf-prose th {
    background: #f7f8fa; color: #0f0f0f; font-weight: 700;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}

/* -- Caixas: cartão do site, não barra colorida --------------------------- */
.nf-prose .reg-info-box,
.nf-prose .reg-warn-box,
.nf-prose .reg-contact-info,
.nf-prose .reg-toc,
.nf-prose .evt-card,
.nf-prose .evt-alert,
.nf-prose .evt-pin-card,
.nf-prose .evt-premium {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 1.35rem;
    margin: 1.2rem 0;
}
.nf-prose .reg-info-box > :last-child,
.nf-prose .reg-warn-box > :last-child,
.nf-prose .evt-card > :last-child,
.nf-prose .evt-alert > :last-child { margin-bottom: 0; }

/* O destaque é o fio curto em dourado no topo, não a borda lateral. */
.nf-prose .reg-warn-box,
.nf-prose .evt-alert-warn,
.nf-prose .evt-alert-danger,
.nf-prose .evt-pin-card,
.nf-prose .evt-premium { background: #fcfbf7; }
.nf-prose .reg-warn-box::before,
.nf-prose .evt-alert-warn::before,
.nf-prose .evt-alert-danger::before,
.nf-prose .evt-pin-card::before,
.nf-prose .evt-premium::before {
    content: ""; display: block; width: 34px; height: 2px; background: #70643e; margin-bottom: .85rem;
}

/* -- Sumário do regulamento ------------------------------------------------ */
.nf-prose .reg-toc { background: #f7f8fa; border-color: #eaeaea; margin: 1.6rem 0 2.4rem; }
.nf-prose .reg-toc h3 {
    font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: #70643e; margin: 0 0 1rem; display: flex; align-items: center; gap: .75rem;
}
.nf-prose .reg-toc h3::before { content: ""; width: 34px; height: 2px; background: #70643e; flex-shrink: 0; }
.nf-prose .reg-toc ol { columns: 2; column-gap: 2.5rem; margin: 0; font-size: .9em; }
.nf-prose .reg-toc li { break-inside: avoid; }

/* -- Rodapé e contato do documento ---------------------------------------- */
.nf-prose .reg-footer {
    margin: 2.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid #eaeaea;
    color: #6f6f6f; font-size: .88em; text-align: center;
}
.nf-prose .reg-contact-info { background: #f7f8fa; }

/* -- Seções e grades da descrição ----------------------------------------- */
.nf-prose .reg-100v, .nf-prose .evt-100v { max-width: 880px; margin: 0 auto; }
.nf-prose .evt-section { margin: 2.2rem 0 1.2rem; }
.nf-prose .evt-section-title {
    font-size: 1.15rem; font-weight: 700; color: #0f0f0f; letter-spacing: -.02em; margin: 0 0 .9rem;
}
.nf-prose .evt-section-title::before {
    content: ""; display: block; width: 34px; height: 2px; background: #70643e; margin-bottom: .85rem;
}
.nf-prose .evt-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.nf-prose .evt-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.nf-prose .evt-grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.nf-prose .evt-card { margin: 0; padding: 1.1rem 1.2rem; }
.nf-prose .evt-card-label {
    display: block; font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: #70643e; margin-bottom: .45rem;
}
.nf-prose .evt-card-value { display: block; font-weight: 700; font-size: 1.05rem; color: #0f0f0f; }
.nf-prose .evt-card-sub { display: block; font-size: .88rem; color: #6f6f6f; margin-top: .2rem; }
.nf-prose .evt-alert-title { display: block; font-weight: 700; color: #0f0f0f; margin-bottom: .35rem; }
.nf-prose .evt-list { margin: .7rem 0 .7rem 1.35rem; }
.nf-prose .evt-time-list { list-style: none; margin: 0; padding: 0; }
.nf-prose .evt-time { font-variant-numeric: tabular-nums; font-weight: 700; color: #0f0f0f; }
.nf-prose .evt-premium-header { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.nf-prose .evt-premium-title { font-weight: 700; font-size: 1.05rem; color: #0f0f0f; }
.nf-prose .evt-premium-tag {
    font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    background: #70643e; color: #fff; padding: .2rem .6rem; border-radius: 999px;
}
.nf-prose .evt-premium-benefit { display: block; margin: .35rem 0; }
.nf-prose .evt-pin-card-title { display: block; font-weight: 700; color: #0f0f0f; margin-bottom: .35rem; }
.nf-prose .evt-locations { margin: .7rem 0; }

@media (max-width: 600px) {
    .nf-prose .reg-toc ol { columns: 1; }
    .nf-prose .evt-grid, .nf-prose .evt-grid-2, .nf-prose .evt-grid-3 { grid-template-columns: 1fr; }
}