/* =============================================================================
   pagina.css — paginas estaticas (/v2/pagina/{rota})
   Conteudo vem do admin (HTML livre), entao estilizamos tags dentro
   de .cw-pagina__conteudo para garantir visual consistente.
   ============================================================================= */

.cw-pagina {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--espaco-5) var(--espaco-4) var(--espaco-7);
}

/* ---------- Breadcrumb ---------- */
.cw-pagina__breadcrumb {
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
    margin-bottom: var(--espaco-4);
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-wrap: wrap;
}

.cw-pagina__breadcrumb-link {
    color: var(--cor-marca);
    text-decoration: none;
}

.cw-pagina__breadcrumb-link:hover {
    text-decoration: underline;
}

.cw-pagina__breadcrumb-sep {
    color: var(--cor-texto-fraco);
}

.cw-pagina__breadcrumb-atual {
    color: var(--cor-texto);
    font-weight: 500;
}

/* ---------- Cabecalho ---------- */
.cw-pagina__cabecalho {
    margin-bottom: var(--espaco-6);
    padding-bottom: var(--espaco-4);
    border-bottom: 1px solid var(--cor-borda);
}

.cw-pagina__titulo {
    font-size: var(--texto-2xl);
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-2);
    line-height: 1.2;
}

.cw-pagina__atualizado {
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
    margin: 0;
}

/* ---------- Conteudo do admin ---------- */
.cw-pagina__conteudo {
    font-size: var(--texto-md);
    line-height: 1.7;
    color: var(--cor-texto);
}

.cw-pagina__conteudo > *:first-child {
    margin-top: 0;
}

.cw-pagina__conteudo > *:last-child {
    margin-bottom: 0;
}

.cw-pagina__conteudo p {
    margin: 0 0 var(--espaco-4);
}

.cw-pagina__conteudo h2 {
    font-size: var(--texto-xl);
    color: var(--cor-texto);
    margin: var(--espaco-6) 0 var(--espaco-3);
    line-height: 1.3;
}

.cw-pagina__conteudo h3 {
    font-size: var(--texto-lg);
    color: var(--cor-texto);
    margin: var(--espaco-5) 0 var(--espaco-2);
    line-height: 1.3;
}

.cw-pagina__conteudo h4,
.cw-pagina__conteudo h5,
.cw-pagina__conteudo h6 {
    font-size: var(--texto-md);
    font-weight: 600;
    color: var(--cor-texto);
    margin: var(--espaco-4) 0 var(--espaco-2);
}

.cw-pagina__conteudo a {
    color: var(--cor-marca);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.cw-pagina__conteudo a:hover {
    color: var(--cor-marca-escura);
}

.cw-pagina__conteudo strong,
.cw-pagina__conteudo b {
    font-weight: 600;
    color: var(--cor-texto);
}

.cw-pagina__conteudo em,
.cw-pagina__conteudo i {
    font-style: italic;
}

.cw-pagina__conteudo ul,
.cw-pagina__conteudo ol {
    margin: 0 0 var(--espaco-4);
    padding-left: var(--espaco-6);
}

.cw-pagina__conteudo li {
    margin-bottom: var(--espaco-2);
}

.cw-pagina__conteudo li > ul,
.cw-pagina__conteudo li > ol {
    margin-top: var(--espaco-2);
    margin-bottom: var(--espaco-2);
}

.cw-pagina__conteudo blockquote {
    margin: var(--espaco-5) 0;
    padding: var(--espaco-3) var(--espaco-4);
    border-left: 4px solid var(--cor-marca);
    background: var(--cor-fundo-suave);
    color: var(--cor-texto-suave);
    font-style: italic;
    border-radius: 0 var(--raio-md) var(--raio-md) 0;
}

.cw-pagina__conteudo blockquote p:last-child {
    margin-bottom: 0;
}

.cw-pagina__conteudo code {
    background: var(--cor-fundo-suave);
    padding: 2px 6px;
    border-radius: var(--raio-sm);
    font-size: 0.92em;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--cor-destaque);
}

.cw-pagina__conteudo pre {
    background: var(--cor-fundo-esc);
    color: #f1f5f9;
    padding: var(--espaco-4);
    border-radius: var(--raio-md);
    overflow-x: auto;
    margin: 0 0 var(--espaco-4);
    font-size: var(--texto-sm);
    line-height: 1.5;
}

.cw-pagina__conteudo pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.cw-pagina__conteudo img {
    max-width: 100%;
    height: auto;
    border-radius: var(--raio-md);
    margin: var(--espaco-4) 0;
    display: block;
}

.cw-pagina__conteudo table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--espaco-4);
    font-size: var(--texto-sm);
}

.cw-pagina__conteudo th,
.cw-pagina__conteudo td {
    border: 1px solid var(--cor-borda);
    padding: var(--espaco-2) var(--espaco-3);
    text-align: left;
    vertical-align: top;
}

.cw-pagina__conteudo th {
    background: var(--cor-fundo-suave);
    font-weight: 600;
}

.cw-pagina__conteudo hr {
    border: 0;
    border-top: 1px solid var(--cor-borda);
    margin: var(--espaco-6) 0;
}

.cw-pagina__conteudo iframe,
.cw-pagina__conteudo video {
    max-width: 100%;
    border-radius: var(--raio-md);
    margin: var(--espaco-4) 0;
}

/* ---------- 404 ---------- */
.cw-pagina--404 {
    text-align: center;
    padding-top: var(--espaco-8);
}

.cw-pagina--404 .cw-pagina__texto {
    color: var(--cor-texto-suave);
    margin-bottom: var(--espaco-5);
}

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
    .cw-pagina {
        padding: var(--espaco-7) var(--espaco-5) var(--espaco-8);
    }

    .cw-pagina__titulo {
        font-size: var(--texto-3xl);
    }
}