/* O post do blog no Conecta (class-solex-conecta-blog-post.php), com a base do documento e os tokens da lista
   (solex-conecta-blog.css, que a página também carrega: o divisor e o botão cheio do blog). O desenho é o do post de
   antes: o cabeçalho largo com a capa ao fundo, coberta pelo véu, e o texto branco centrado por cima; o texto do post
   na coluna da lista; o compartilhar em botões redondos; os relacionados em três colunas; e os comentários com o
   formulário. Fora do desenho de antes, só o que a regra pede: os 40px de toque no celular, o contraste do cabeçalho
   sem capa e o parallax sem movimento para quem pede menos movimento. */
.solex-conecta-blog-post-pagina {
    --solex-conecta-blog-post-veu: rgba(0, 0, 0, 0.5);
    --solex-conecta-blog-post-sobre-veu: #ffffff;
    /* O fundo do cabeçalho do post sem capa: o texto da marca escurecido, para o texto branco ter contraste também na
       marca de texto claro. Com a capa, ela e o véu cobrem o fundo. */
    --solex-conecta-blog-post-fundo-sem-capa: color-mix(in srgb, var(--solex-conecta-blog-texto) 25%, #000000);
    --solex-conecta-blog-post-cabecalho-altura: 300px;
    --solex-conecta-blog-post-cabecalho-espaco: 60px;
    --solex-conecta-blog-post-fonte-titulo: 28.8px;
    --solex-conecta-blog-post-linha-titulo: 37.44px;
    --solex-conecta-blog-post-fonte-meta: 12.8px;
    --solex-conecta-blog-post-letra-meta: 0.64px;
    --solex-conecta-blog-post-fonte-secao: 20px;
    --solex-conecta-blog-post-espaco-bloco: 30px;
    --solex-conecta-blog-post-espaco-item: 15px;
    --solex-conecta-blog-post-espaco-campo: 12px;
    /* As cores da marca do topo, com as mesmas reservas da página de produto (solex-conecta-produto.css). */
    --solex-conecta-blog-post-borda: var(--solex-conecta-cabecalho-marca-borda, #d4d4d4);
    --solex-conecta-blog-post-borda-forte: var(--solex-conecta-cabecalho-marca-borda-forte, #8c8c8c);
    --solex-conecta-blog-post-texto-suave: var(--solex-conecta-cabecalho-marca-texto-suave, #4a4a4a);
    /* A legenda e o alinhamento das imagens do texto, como os do tema; o fundo da legenda é o texto da marca bem leve. */
    --solex-conecta-blog-post-legenda-fundo: color-mix(in srgb, var(--solex-conecta-blog-texto) 5%, transparent);
    --solex-conecta-blog-post-legenda-fonte: 0.9em;
    --solex-conecta-blog-post-legenda-espaco: 0.4em;
    --solex-conecta-blog-post-legenda-abaixo: 2em;
    --solex-conecta-blog-post-legenda-raio: 5px;
    --solex-conecta-blog-post-alinhar-espaco: 1.5em;
    /* O texto do post, como o do tema anterior: a linha proporcional à fonte de cada elemento, o espaço embaixo dos
       blocos, dos títulos e dos itens, a escala dos títulos, o recuo das listas e a citação. */
    --solex-conecta-blog-post-linha-proporcional: 1.6;
    --solex-conecta-blog-post-bloco-abaixo: 1.3em;
    --solex-conecta-blog-post-titulo-texto-abaixo: 0.5em;
    --solex-conecta-blog-post-linha-titulo-texto: 1.3;
    --solex-conecta-blog-post-fonte-h1: 1.7em;
    --solex-conecta-blog-post-fonte-h2: 1.6em;
    --solex-conecta-blog-post-fonte-h3: 1.25em;
    --solex-conecta-blog-post-fonte-h4: 1.125em;
    --solex-conecta-blog-post-fonte-h5: 1em;
    --solex-conecta-blog-post-fonte-h6: 0.85em;
    /* A caixa alta do h6 e do cabeçalho da tabela, que o tema anterior dava aos dois na mesma regra. */
    --solex-conecta-blog-post-linha-caixa-alta: 1.05;
    --solex-conecta-blog-post-letra-caixa-alta: 0.05em;
    --solex-conecta-blog-post-opacidade-h6: 0.8;
    --solex-conecta-blog-post-item-abaixo: 0.6em;
    --solex-conecta-blog-post-item-recuo: 1.3em;
    --solex-conecta-blog-post-lista-dentro: 1.5em;
    --solex-conecta-blog-post-lista-dentro-recuo: 3em;
    --solex-conecta-blog-post-citacao-fonte: 1.2em;
    --solex-conecta-blog-post-citacao-abaixo: 1.25em;
    --solex-conecta-blog-post-citacao-lado: 1.25em;
    --solex-conecta-blog-post-citacao-recuo: 1.875em;
    /* A tabela do texto, como a do tema anterior. */
    --solex-conecta-blog-post-tabela-abaixo: 1em;
    --solex-conecta-blog-post-espaco-celula: 0.5em;
    --solex-conecta-blog-post-fonte-celula: 0.9em;
    --solex-conecta-blog-post-linha-celula: 1.3;
    /* O código do texto, como o do tema anterior, com o fundo leve da marca no lugar do cinza dele. */
    --solex-conecta-blog-post-codigo-fundo: color-mix(in srgb, var(--solex-conecta-blog-texto) 5%, transparent);
    --solex-conecta-blog-post-codigo-espaco: 20px;
    --solex-conecta-blog-post-codigo-bloco-vertical: 1rem;
    --solex-conecta-blog-post-codigo-bloco-lado: 1.5rem;
    --solex-conecta-blog-post-codigo-fonte: 0.9em;
    --solex-conecta-blog-post-codigo-raio: 4px;
    --solex-conecta-blog-post-codigo-margem: 0.2rem;
    --solex-conecta-blog-post-codigo-dentro-vertical: 0.2rem;
    --solex-conecta-blog-post-codigo-dentro-lado: 0.5rem;
    /* O divisor e a lista de definições do texto, como os do tema anterior. */
    --solex-conecta-blog-post-divisor-espaco: 15px;
    --solex-conecta-blog-post-divisor-opacidade: 0.1;
    --solex-conecta-blog-post-definicao-fonte: 0.85em;
    --solex-conecta-blog-post-definicao-opacidade: 0.9;
    --solex-conecta-blog-post-definicao-espaco: 5px;
    --solex-conecta-blog-post-icone: 36px;
    --solex-conecta-blog-post-fonte-icone: 16px;
    --solex-conecta-blog-post-raio-campo: 3px;
    --solex-conecta-blog-post-recuo-resposta: 30px;
    --solex-conecta-blog-post-relacionado-capa: 3 / 2;
}

/* Como no post de antes: nenhum link sublinhado, salvo o do parágrafo do texto do post. O botão de bloco do texto fica
   de fora, com a cor que o núcleo dá a ele (estilos_dos_blocos() na página), que esta regra venceria; o :where mantém a
   especificidade do seletor sem a exceção, para as regras dos links da página que vêm depois seguirem vencendo. */
.solex-conecta-blog-post a:where(:not(.wp-element-button, .wp-block-button__link)) {
    color: inherit;
    text-decoration: none;
}

.solex-conecta-blog-post-texto p a {
    text-decoration: underline;
}

/* O cabeçalho largo: a capa ocupa o fundo inteiro, por trás do véu; o parallax a desloca pelo script da página. */
.solex-conecta-blog-post-cabecalho {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--solex-conecta-blog-post-cabecalho-altura);
    padding: var(--solex-conecta-blog-post-cabecalho-espaco) var(--solex-conecta-blog-espaco-lateral);
    overflow: hidden;
    box-sizing: border-box;
    background: var(--solex-conecta-blog-post-fundo-sem-capa);
    color: var(--solex-conecta-blog-post-sobre-veu);
    text-align: center;
}

.solex-conecta-blog-post-fundo {
    position: absolute;
    inset: 0;
}

.solex-conecta-blog-post-capa {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
}

.solex-conecta-blog-post-veu {
    position: absolute;
    inset: 0;
    background: var(--solex-conecta-blog-post-veu);
}

.solex-conecta-blog-post-cabecalho-dentro {
    position: relative;
    max-width: var(--solex-conecta-blog-largura);
}

.solex-conecta-blog-post-categorias,
.solex-conecta-blog-post-data {
    margin: 0;
    font-size: var(--solex-conecta-blog-post-fonte-meta);
    letter-spacing: var(--solex-conecta-blog-post-letra-meta);
    text-transform: uppercase;
}

.solex-conecta-blog-post-titulo {
    margin: var(--solex-conecta-blog-espaco-titulo) 0 0;
    font-size: var(--solex-conecta-blog-post-fonte-titulo);
    line-height: var(--solex-conecta-blog-post-linha-titulo);
    font-weight: var(--solex-conecta-blog-peso-forte);
}

.solex-conecta-blog-post-cabecalho .solex-conecta-blog-divisor {
    margin: var(--solex-conecta-blog-espaco-divisor) auto;
    background: var(--solex-conecta-blog-post-sobre-veu);
}

/* O artigo e os comentários, na coluna da lista do blog. */
.solex-conecta-blog-post-linha {
    width: var(--solex-conecta-blog-coluna);
    max-width: var(--solex-conecta-blog-largura);
    margin: 0 auto;
    padding: var(--solex-conecta-blog-espaco-pagina) var(--solex-conecta-blog-espaco-lateral);
    box-sizing: border-box;
}

/* A linha do texto é proporcional à fonte, como no tema, e não a medida fixa da base da página: cada título e a citação
   ganham a linha da fonte deles. */
.solex-conecta-blog-post-texto {
    overflow-wrap: break-word;
    line-height: var(--solex-conecta-blog-post-linha-proporcional);
}

/* O texto do post, como o do tema, que o desenhava pelos elementos, sem classe: os parágrafos, as listas e as figuras
   com o espaço de baixo e sem o de cima; o parágrafo vazio escondido; a imagem em bloco de linha, alinhada ao meio. */
.solex-conecta-blog-post-texto p,
.solex-conecta-blog-post-texto ul,
.solex-conecta-blog-post-texto ol,
.solex-conecta-blog-post-texto figure {
    margin: 0 0 var(--solex-conecta-blog-post-bloco-abaixo);
}

.solex-conecta-blog-post-texto p:empty {
    display: none;
}

/* O bloco de código e a lista de definições com o espaço de baixo do tema anterior; o de cima fica o do navegador,
   que o tema também não mudava. */
.solex-conecta-blog-post-texto pre,
.solex-conecta-blog-post-texto dl {
    margin-bottom: var(--solex-conecta-blog-post-bloco-abaixo);
}

.solex-conecta-blog-post-texto ul,
.solex-conecta-blog-post-texto ol {
    padding: 0;
}

.solex-conecta-blog-post-texto ul {
    list-style: disc;
}

.solex-conecta-blog-post-texto ol {
    list-style: decimal;
}

.solex-conecta-blog-post-texto li {
    margin: 0 0 var(--solex-conecta-blog-post-item-abaixo) var(--solex-conecta-blog-post-item-recuo);
}

.solex-conecta-blog-post-texto ul ul,
.solex-conecta-blog-post-texto ul ol,
.solex-conecta-blog-post-texto ol ul,
.solex-conecta-blog-post-texto ol ol {
    margin: var(--solex-conecta-blog-post-lista-dentro) 0 var(--solex-conecta-blog-post-lista-dentro) var(--solex-conecta-blog-post-lista-dentro-recuo);
}

/* Os títulos do texto no peso normal, com a escala e o espaço do tema; o h1 e o h2 com a linha mais curta, e o h6 em
   caixa alta, mais claro. */
.solex-conecta-blog-post-texto h1,
.solex-conecta-blog-post-texto h2,
.solex-conecta-blog-post-texto h3,
.solex-conecta-blog-post-texto h4,
.solex-conecta-blog-post-texto h5,
.solex-conecta-blog-post-texto h6 {
    margin: 0 0 var(--solex-conecta-blog-post-titulo-texto-abaixo);
    font-weight: var(--solex-conecta-blog-peso-normal);
}

.solex-conecta-blog-post-texto h1 {
    font-size: var(--solex-conecta-blog-post-fonte-h1);
    line-height: var(--solex-conecta-blog-post-linha-titulo-texto);
}

.solex-conecta-blog-post-texto h2 {
    font-size: var(--solex-conecta-blog-post-fonte-h2);
    line-height: var(--solex-conecta-blog-post-linha-titulo-texto);
}

.solex-conecta-blog-post-texto h3 {
    font-size: var(--solex-conecta-blog-post-fonte-h3);
}

.solex-conecta-blog-post-texto h4 {
    font-size: var(--solex-conecta-blog-post-fonte-h4);
}

.solex-conecta-blog-post-texto h5 {
    font-size: var(--solex-conecta-blog-post-fonte-h5);
}

.solex-conecta-blog-post-texto h6 {
    font-size: var(--solex-conecta-blog-post-fonte-h6);
    line-height: var(--solex-conecta-blog-post-linha-caixa-alta);
    letter-spacing: var(--solex-conecta-blog-post-letra-caixa-alta);
    text-transform: uppercase;
    opacity: var(--solex-conecta-blog-post-opacidade-h6);
}

/* A citação do texto como a do tema, sem a faixa do lado esquerdo dele (borda de um lado só): o recuo, o itálico e a
   fonte maior a separam do texto. */
.solex-conecta-blog-post-texto blockquote {
    margin: 0 0 var(--solex-conecta-blog-post-citacao-abaixo);
    padding: 0 var(--solex-conecta-blog-post-citacao-lado) 0 var(--solex-conecta-blog-post-citacao-recuo);
    color: var(--solex-conecta-blog-post-texto-suave);
    font-size: var(--solex-conecta-blog-post-citacao-fonte);
    font-style: italic;
}

.solex-conecta-blog-post-texto img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* O alinhamento que o editor do WordPress dá à imagem, à tabela e à legenda do texto, como o do tema anterior: só no
   desktop, e o bloco do celular o desfaz. O centrado zera também a margem de cima e de baixo, como no tema. O display:
   inline que o tema dava ao alinhado do lado não entra: com o float, o navegador põe a caixa em bloco de qualquer
   jeito, e sem ele o celular volta ao display do próprio elemento. As regras da legenda vêm depois destas, com a mesma
   especificidade, para a margem dela vencer a do alinhamento, como no tema: a legenda alinhada do lado fica sem o
   espaço do lado, e no celular segue centrada. */
/* audit-css-exception unused-selector: a classe de alinhamento sai do editor do WordPress, gravada no texto do post, e não do código do Conecta. */
.solex-conecta-blog-post-texto .alignleft {
    float: left;
    margin-right: var(--solex-conecta-blog-post-alinhar-espaco);
}

/* audit-css-exception unused-selector: a classe de alinhamento sai do editor do WordPress, gravada no texto do post, e não do código do Conecta. */
.solex-conecta-blog-post-texto .alignright {
    float: right;
    margin-left: var(--solex-conecta-blog-post-alinhar-espaco);
}

/* audit-css-exception unused-selector: a classe de alinhamento sai do editor do WordPress, gravada no texto do post, e não do código do Conecta. */
.solex-conecta-blog-post-texto .aligncenter {
    clear: both;
    display: block;
    margin: 0 auto;
}

/* A legenda da imagem do texto, como a do tema anterior: o bloco centrado, com espaço embaixo; a imagem com os cantos
   de cima arredondados, e o texto da legenda centrado, em itálico, menor, num fundo leve, com os cantos de baixo. */
/* audit-css-exception unused-selector: a classe sai do atalho [caption] do núcleo do WordPress (img_caption_shortcode), que o texto do post renderiza, e não do código do Conecta. */
.solex-conecta-blog-post-texto .wp-caption {
    max-width: 100%;
    margin: 0 auto var(--solex-conecta-blog-post-legenda-abaixo);
}

.solex-conecta-blog-post-texto .wp-caption img {
    border-top-left-radius: var(--solex-conecta-blog-post-legenda-raio);
    border-top-right-radius: var(--solex-conecta-blog-post-legenda-raio);
}

/* audit-css-exception unused-selector: a classe é a do texto da legenda que o atalho [caption] do núcleo do WordPress (img_caption_shortcode) escreve, e não do código do Conecta. */
.solex-conecta-blog-post-texto .wp-caption-text {
    margin: 0;
    padding: var(--solex-conecta-blog-post-legenda-espaco);
    background: var(--solex-conecta-blog-post-legenda-fundo);
    border-bottom-right-radius: var(--solex-conecta-blog-post-legenda-raio);
    border-bottom-left-radius: var(--solex-conecta-blog-post-legenda-raio);
    font-size: var(--solex-conecta-blog-post-legenda-fonte);
    font-style: italic;
    text-align: center;
}

/* audit-css-exception unused-selector: o tamanho e o alinhamento da imagem saem do editor do WordPress, gravados no texto do post, e não do código do Conecta. */
.solex-conecta-blog-post-texto img.size-full.alignnone {
    margin-bottom: var(--solex-conecta-blog-post-legenda-abaixo);
}

/* O vídeo e o quadro incorporados no texto não passam da coluna. */
.solex-conecta-blog-post-texto iframe,
.solex-conecta-blog-post-texto video,
.solex-conecta-blog-post-texto embed,
.solex-conecta-blog-post-texto object {
    max-width: 100%;
}

/* A tabela do texto, como a do tema anterior: a largura da coluna, as linhas separadas pela borda, o texto das células
   mais claro, o cabeçalho em caixa alta e as células das pontas sem o espaço de fora. Cada uma vai na caixa que a
   página põe em volta dela (Solex_Conecta_Blog_Post::texto_do_post()), que no celular a rola por dentro. */
.solex-conecta-blog-post-texto table {
    width: 100%;
    margin: 0 0 var(--solex-conecta-blog-post-tabela-abaixo);
    border-collapse: collapse;
}

.solex-conecta-blog-post-texto th,
.solex-conecta-blog-post-texto td {
    padding: var(--solex-conecta-blog-post-espaco-celula);
    font-size: var(--solex-conecta-blog-post-fonte-celula);
    line-height: var(--solex-conecta-blog-post-linha-celula);
    text-align: left;
    vertical-align: middle;
    border-bottom: var(--solex-conecta-blog-borda-fina) solid var(--solex-conecta-blog-post-borda);
}

.solex-conecta-blog-post-texto td {
    color: var(--solex-conecta-blog-post-texto-suave);
}

/* Depois da regra das células, para a linha da caixa alta vencer a delas, como no tema anterior. */
.solex-conecta-blog-post-texto th {
    line-height: var(--solex-conecta-blog-post-linha-caixa-alta);
    letter-spacing: var(--solex-conecta-blog-post-letra-caixa-alta);
    text-transform: uppercase;
}

.solex-conecta-blog-post-texto th:first-child,
.solex-conecta-blog-post-texto td:first-child {
    padding-left: 0;
}

.solex-conecta-blog-post-texto th:last-child,
.solex-conecta-blog-post-texto td:last-child {
    padding-right: 0;
}

.solex-conecta-blog-post-texto td p,
.solex-conecta-blog-post-texto td dl {
    margin: var(--solex-conecta-blog-post-espaco-celula) 0;
}

/* O código do texto, como o do tema anterior: o bloco na largura da coluna e o trecho na linha, com o fundo leve e a
   borda. A linha longa do bloco quebra, em vez da rolagem para o lado que o tema dava: nenhuma superfície da página
   rola para o lado no desktop, e no celular o bloco cabe do mesmo jeito. */
.solex-conecta-blog-post-texto pre {
    width: 100%;
    padding: var(--solex-conecta-blog-post-codigo-espaco);
    border: var(--solex-conecta-blog-borda-fina) solid var(--solex-conecta-blog-post-borda);
    box-sizing: border-box;
    background: var(--solex-conecta-blog-post-codigo-fundo);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.solex-conecta-blog-post-texto code {
    margin: 0 var(--solex-conecta-blog-post-codigo-margem);
    padding: var(--solex-conecta-blog-post-codigo-dentro-vertical) var(--solex-conecta-blog-post-codigo-dentro-lado);
    border: var(--solex-conecta-blog-borda-fina) solid var(--solex-conecta-blog-post-borda);
    border-radius: var(--solex-conecta-blog-post-codigo-raio);
    background: var(--solex-conecta-blog-post-codigo-fundo);
    font-size: var(--solex-conecta-blog-post-codigo-fonte);
}

.solex-conecta-blog-post-texto pre > code {
    display: block;
    padding: var(--solex-conecta-blog-post-codigo-bloco-vertical) var(--solex-conecta-blog-post-codigo-bloco-lado);
}

/* O divisor do texto, como o do tema anterior: a linha fina de cima, na cor do texto, bem apagada. A borda de um lado só
   é a da divisória entre dois blocos do texto. */
.solex-conecta-blog-post-texto hr {
    margin: var(--solex-conecta-blog-post-divisor-espaco) 0;
    border: 0;
    border-top: var(--solex-conecta-blog-borda-fina) solid;
    opacity: var(--solex-conecta-blog-post-divisor-opacidade);
}

/* A lista de definições do texto, como a do tema anterior: menor, em caixa alta, um pouco apagada, com o termo e a
   definição na mesma linha. */
.solex-conecta-blog-post-texto dl {
    font-size: var(--solex-conecta-blog-post-definicao-fonte);
    text-transform: uppercase;
    opacity: var(--solex-conecta-blog-post-definicao-opacidade);
}

.solex-conecta-blog-post-texto dl dt,
.solex-conecta-blog-post-texto dl dd {
    display: inline-block;
    margin: 0 var(--solex-conecta-blog-post-definicao-espaco) 0 0;
}

.solex-conecta-blog-post-compartilhar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--solex-conecta-blog-post-espaco-item);
    margin-top: var(--solex-conecta-blog-post-espaco-bloco);
}

.solex-conecta-blog-post-compartilhar-rotulo {
    margin: 0;
    font-size: var(--solex-conecta-blog-fonte-texto);
    font-weight: var(--solex-conecta-blog-peso-forte);
}

.solex-conecta-blog-post-compartilhar-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--solex-conecta-blog-espaco-paginas);
    margin: 0;
    padding: 0;
    list-style: none;
}

.solex-conecta-blog-post-compartilhar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--solex-conecta-blog-post-icone);
    height: var(--solex-conecta-blog-post-icone);
    border: var(--solex-conecta-blog-borda-forte) solid currentColor;
    border-radius: var(--solex-conecta-blog-raio-redondo);
    box-sizing: border-box;
    font-size: var(--solex-conecta-blog-post-fonte-icone);
    text-decoration: none;
    transition: opacity var(--solex-conecta-blog-transicao);
}

.solex-conecta-blog-post-secao-titulo {
    margin: 0 0 var(--solex-conecta-blog-post-espaco-item);
    font-size: var(--solex-conecta-blog-post-fonte-secao);
    font-weight: var(--solex-conecta-blog-peso-forte);
}

.solex-conecta-blog-post-relacionados {
    margin-top: var(--solex-conecta-blog-post-espaco-bloco);
}

.solex-conecta-blog-post-relacionados-lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--solex-conecta-blog-post-espaco-item);
    margin: 0;
    padding: 0;
    list-style: none;
}

.solex-conecta-blog-post-relacionado {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-blog-espaco-paginas);
}

.solex-conecta-blog-post-relacionado-capa img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--solex-conecta-blog-post-relacionado-capa);
    object-fit: cover;
}

.solex-conecta-blog-post-relacionado-titulo {
    font-weight: var(--solex-conecta-blog-peso-forte);
    text-decoration: none;
}

.solex-conecta-blog-post-relacionado-data,
.solex-conecta-blog-post-comentario-data {
    color: var(--solex-conecta-blog-post-texto-suave);
    font-size: var(--solex-conecta-blog-post-fonte-meta);
}

/* Os comentários e o formulário. */
.solex-conecta-blog-post-comentarios {
    margin-top: var(--solex-conecta-blog-post-espaco-bloco);
    padding-top: var(--solex-conecta-blog-post-espaco-bloco);
    border-top: var(--solex-conecta-blog-borda-fina) solid var(--solex-conecta-blog-post-borda);
}

.solex-conecta-blog-post-comentarios-estado {
    margin: 0 0 var(--solex-conecta-blog-post-espaco-bloco);
}

.solex-conecta-blog-post-comentarios-lista,
.solex-conecta-blog-post-respostas {
    margin: 0;
    padding: 0;
    list-style: none;
}

.solex-conecta-blog-post-comentario {
    padding: var(--solex-conecta-blog-post-espaco-item) 0;
    border-bottom: var(--solex-conecta-blog-borda-fina) solid var(--solex-conecta-blog-post-borda);
}

.solex-conecta-blog-post-respostas {
    margin-top: var(--solex-conecta-blog-post-espaco-item);
    padding-left: var(--solex-conecta-blog-post-recuo-resposta);
}

.solex-conecta-blog-post-comentario-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--solex-conecta-blog-espaco-cartao);
    margin: 0;
}

.solex-conecta-blog-post-comentario-autor {
    font-weight: var(--solex-conecta-blog-peso-forte);
}

.solex-conecta-blog-post-comentario-texto p {
    margin: var(--solex-conecta-blog-espaco-paginas) 0 0;
}

.solex-conecta-blog-post-comentarios-mais {
    margin: var(--solex-conecta-blog-post-espaco-item) 0 0;
    text-align: center;
}

.solex-conecta-blog-post-form {
    margin-top: var(--solex-conecta-blog-post-espaco-bloco);
}

.solex-conecta-blog-post-form-titulo {
    margin: 0 0 var(--solex-conecta-blog-post-espaco-item);
    font-size: var(--solex-conecta-blog-post-fonte-secao);
}

.solex-conecta-blog-post-form-dupla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--solex-conecta-blog-post-espaco-item);
}

.solex-conecta-blog-post-form-campo {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-blog-espaco-paginas);
    margin-bottom: var(--solex-conecta-blog-post-espaco-campo);
}

.solex-conecta-blog-post-form-rotulo {
    font-weight: var(--solex-conecta-blog-peso-forte);
}

.solex-conecta-blog-post-form-entrada {
    width: 100%;
    min-height: var(--solex-conecta-blog-toque);
    padding: var(--solex-conecta-blog-espaco-numero);
    border: var(--solex-conecta-blog-borda-fina) solid var(--solex-conecta-blog-post-borda);
    border-radius: var(--solex-conecta-blog-post-raio-campo);
    box-sizing: border-box;
    background: var(--solex-conecta-blog-superficie);
    color: var(--solex-conecta-blog-texto);
    font: inherit;
}

.solex-conecta-blog-post-form-entrada:focus-visible,
.solex-conecta-blog-post-compartilhar-link:focus-visible {
    outline: var(--solex-conecta-blog-borda-forte) solid var(--solex-conecta-blog-acao);
    outline-offset: var(--solex-conecta-blog-borda-forte);
}

.solex-conecta-blog-post-form-ajuda {
    margin: 0 0 var(--solex-conecta-blog-post-espaco-campo);
    color: var(--solex-conecta-blog-post-texto-suave);
    font-size: var(--solex-conecta-blog-post-fonte-meta);
}

/* A falha do envio, como a da página de produto: a cor do texto, com a borda inteira mais forte. */
.solex-conecta-blog-post-form-erro {
    margin: 0 0 var(--solex-conecta-blog-post-espaco-campo);
    padding: var(--solex-conecta-blog-post-espaco-campo);
    color: var(--solex-conecta-blog-texto);
    border: var(--solex-conecta-blog-borda-fina) solid var(--solex-conecta-blog-post-borda-forte);
    border-radius: var(--solex-conecta-blog-post-raio-campo);
}

.solex-conecta-blog-post-form-enviar[disabled] {
    opacity: var(--solex-conecta-blog-opacidade-passar);
    cursor: progress;
}

@media (hover: hover) {
    .solex-conecta-blog-post-compartilhar-link:hover,
    .solex-conecta-blog-post-relacionado-titulo:hover {
        opacity: var(--solex-conecta-blog-opacidade-passar);
    }
}

/* Para quem pede menos movimento, a capa fica parada: o script não a desloca. */
@media (prefers-reduced-motion: reduce) {
    .solex-conecta-blog-post-capa {
        will-change: auto;
    }
}

@media (max-width: 949px) {
    /* A escala menor dos títulos do texto no celular, a do tema. */
    .solex-conecta-blog-post-pagina {
        --solex-conecta-blog-post-fonte-h1: 1.4em;
        --solex-conecta-blog-post-fonte-h2: 1.2em;
        --solex-conecta-blog-post-fonte-h3: 1em;
        --solex-conecta-blog-post-fonte-h4: 1em;
    }

    .solex-conecta-blog-post-linha {
        width: 100%;
    }

    /* A tabela que não cabe rola dentro da caixa dela, e a página não ganha rolagem para o lado. */
    .solex-conecta-blog-post-tabela {
        overflow-x: auto;
    }

    /* O alinhamento do editor só vale no desktop, como no tema anterior: no celular nada flutua, nem leva a margem do
       lado. A imagem e a tabela, os elementos em que o editor põe a classe, voltam ao display e à margem delas; a
       legenda, cuja margem vem da própria regra, segue centrada. Noutro elemento, só por HTML escrito à mão, o centrado
       fica com o desenho do desktop: a folha não sabe a margem própria de cada um. */
    .solex-conecta-blog-post-texto .alignleft,
    .solex-conecta-blog-post-texto .alignright {
        float: none;
    }

    .solex-conecta-blog-post-texto .alignleft:not(.wp-caption) {
        margin-right: 0;
    }

    .solex-conecta-blog-post-texto .alignright:not(.wp-caption) {
        margin-left: 0;
    }

    .solex-conecta-blog-post-texto img.aligncenter {
        clear: none;
        display: inline-block;
        margin: 0;
    }

    .solex-conecta-blog-post-texto table.aligncenter {
        clear: none;
        display: table;
        margin: 0 0 var(--solex-conecta-blog-post-tabela-abaixo);
    }

    .solex-conecta-blog-post-relacionados-lista,
    .solex-conecta-blog-post-form-dupla {
        grid-template-columns: minmax(0, 1fr);
    }

    .solex-conecta-blog-post-compartilhar-link {
        width: var(--solex-conecta-blog-toque);
        height: var(--solex-conecta-blog-toque);
    }

    /* Os links pequenos do cabeçalho e o título de cada relacionado, com a altura de toque, como os do cartão da lista. */
    .solex-conecta-blog-post-categorias a,
    .solex-conecta-blog-post-data a,
    .solex-conecta-blog-post-relacionado-titulo {
        display: inline-flex;
        align-items: center;
        min-height: var(--solex-conecta-blog-toque);
    }
}