/*
 * conteudo-html.css
 *
 * Estilos para blocos de conteúdo cadastrados como HTML puro (descrição do
 * produto, modo de usar, informações da marca e descrição longa de categoria).
 * O escopo é sempre .conteudo-html porque o site possui regras globais que
 * quebram o padrão do HTML: `p { margin: 0; padding: 0 }` e
 * `h1..h6 { font-weight: normal }` vindos do style.css. Todos os seletores
 * abaixo têm especificidade de classe, o suficiente para vencer essas regras
 * sem precisar de !important e sem vazar para o restante do site.
 */

.conteudo-html {
    line-height: 1.6;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.conteudo-html > *:first-child {
    margin-top: 0;
}

.conteudo-html > *:last-child {
    margin-bottom: 0;
}

/* Blocos genéricos: div/span herdam o contexto e não estouram o container */

.conteudo-html div,
.conteudo-html section,
.conteudo-html article,
.conteudo-html header,
.conteudo-html footer,
.conteudo-html aside {
    max-width: 100%;
}

.conteudo-html center {
    text-align: center;
}

/* Parágrafos e texto corrido */

.conteudo-html p {
    margin: 0 0 0.5rem;
    padding: 0;
}

/*
 * Editores rich-text (CKEditor/TinyMCE) costumam gravar parágrafos vazios
 * (`<p></p>`, `<p><br></p>`, `<p>&nbsp;</p>`) entre seções. Cada um herdava
 * a margem inferior e abria um "buraco" visual (ex.: acima de Indicação).
 */
.conteudo-html p:empty,
.conteudo-html p:has(> br:only-child),
.conteudo-html p:has(> br:first-child:last-child) {
    display: none;
    margin: 0;
    padding: 0;
    height: 0;
    overflow: hidden;
}

/*
 * Rótulos de seção cadastrados como parágrafo só com negrito
 * (`<p><b>Indicação</b></p>`). Sem isso, a margem do <p> abre um
 * espaço grande antes do texto da seção.
 */
.conteudo-html p:has(> strong:only-child),
.conteudo-html p:has(> b:only-child),
.conteudo-html p:has(> strong:first-child:last-child),
.conteudo-html p:has(> b:first-child:last-child) {
    margin-bottom: 0.15rem;
}

.conteudo-html p:has(> strong:only-child) + p,
.conteudo-html p:has(> b:only-child) + p,
.conteudo-html p:has(> strong:first-child:last-child) + p,
.conteudo-html p:has(> b:first-child:last-child) + p {
    margin-top: 0;
}

.conteudo-html br {
    line-height: inherit;
}

.conteudo-html strong,
.conteudo-html b {
    font-weight: 700;
}

.conteudo-html em,
.conteudo-html i {
    font-style: italic;
}

.conteudo-html u,
.conteudo-html ins {
    text-decoration: underline;
}

.conteudo-html s,
.conteudo-html del,
.conteudo-html strike {
    text-decoration: line-through;
}

.conteudo-html mark {
    background-color: #fff3b0;
    color: inherit;
    padding: 0 0.15em;
}

.conteudo-html small {
    font-size: 0.875em;
}

.conteudo-html sub,
.conteudo-html sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
}

.conteudo-html sup {
    top: -0.5em;
}

.conteudo-html sub {
    bottom: -0.25em;
}

.conteudo-html abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

.conteudo-html a {
    color: #3F84C7;
    text-decoration: underline;
}

.conteudo-html a:hover,
.conteudo-html a:focus {
    color: #2b6ba6;
    text-decoration: none;
}

/* Títulos — hierarquia e respiro (o style.css global zera o peso da fonte) */

.conteudo-html h1,
.conteudo-html h2,
.conteudo-html h3,
.conteudo-html h4,
.conteudo-html h5,
.conteudo-html h6 {
    display: block;
    margin: 0.85em 0 0.25em;
    padding: 0;
    line-height: 1.3;
    font-weight: 700;
}

.conteudo-html h1 + p,
.conteudo-html h2 + p,
.conteudo-html h3 + p,
.conteudo-html h4 + p,
.conteudo-html h5 + p,
.conteudo-html h6 + p {
    margin-top: 0;
}

.conteudo-html h1 {
    font-size: 1.5rem; /* 24px */
}

.conteudo-html h2 {
    font-size: 1.3125rem; /* ~21px */
}

.conteudo-html h3 {
    font-size: 1.125rem; /* 18px */
}

.conteudo-html h4 {
    font-size: 1rem; /* 16px */
}

.conteudo-html h5 {
    font-size: 0.875rem; /* 14px */
}

.conteudo-html h6 {
    font-size: 0.7875rem; /* ~12.6px */
}

/* Listas — restaurar bullets/numeração e o recuo padrão */

.conteudo-html ul,
.conteudo-html ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
    list-style-position: outside;
}

.conteudo-html ul {
    list-style-type: disc;
}

.conteudo-html ol {
    list-style-type: decimal;
}

.conteudo-html li {
    display: list-item;
    margin-bottom: 0.35rem;
}

.conteudo-html ul ul {
    list-style-type: circle;
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
}

.conteudo-html ul ul ul {
    list-style-type: square;
}

.conteudo-html ol ol {
    list-style-type: lower-alpha;
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
}

.conteudo-html ol ol ol {
    list-style-type: lower-roman;
}

.conteudo-html dl {
    margin: 0 0 1rem;
}

.conteudo-html dt {
    font-weight: 700;
}

.conteudo-html dd {
    margin: 0 0 0.5rem 1.5rem;
}

/* Tabelas — rolagem horizontal quando não cabem na tela */

.conteudo-html table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 1rem;
}

.conteudo-html th,
.conteudo-html td {
    border: 1px solid #d7e1e7;
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.conteudo-html th {
    font-weight: 700;
    background: #f5f7f9;
}

.conteudo-html caption {
    caption-side: bottom;
    padding: 0.5rem 0;
    font-size: 0.875em;
    color: #8a9297;
    text-align: left;
}

/* Citação, separador e código */

.conteudo-html blockquote {
    margin: 0 0 1rem;
    padding: 0.5rem 0 0.5rem 1rem;
    border-left: 3px solid #d7e1e7;
    color: inherit;
}

.conteudo-html hr {
    display: block;
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid #d7e1e7;
}

.conteudo-html code,
.conteudo-html kbd,
.conteudo-html samp {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.875em;
    background: #f5f7f9;
    padding: 0.15em 0.35em;
    border-radius: 3px;
}

.conteudo-html pre {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: #f5f7f9;
    border-radius: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
}

.conteudo-html pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

/* Mídia — sempre responsiva e dentro do container */

.conteudo-html img,
.conteudo-html svg,
.conteudo-html video,
.conteudo-html iframe {
    max-width: 100%;
    height: auto;
}

.conteudo-html img {
    vertical-align: middle;
}

.conteudo-html figure {
    margin: 0 0 1rem;
}

.conteudo-html figcaption {
    font-size: 0.875em;
    color: #8a9297;
    margin-top: 0.35rem;
}

/*
 * Ícones de fontes (Font Awesome/Bootstrap Icons/Material Icons) usam <i> ou
 * <span>; sem isso a regra de itálico acima deforma o glifo.
 */

.conteudo-html i[class*="fa-"],
.conteudo-html i[class*="bi-"],
.conteudo-html i[class*="icon"],
.conteudo-html i.material-icons,
.conteudo-html span[class*="fa-"],
.conteudo-html span[class*="bi-"],
.conteudo-html span.material-icons {
    font-style: normal;
}

/* Ícones com título/subtítulo (descrição de categoria) */

.conteudo-html .bloco-icone {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.conteudo-html .bloco-icone img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
}

.conteudo-html .bloco-icone strong {
    display: block;
    margin-bottom: 0.15rem;
}

.conteudo-html .bloco-icone span {
    font-size: 0.9em;
}

/* Quebra forçada de palavras muito longas sem espaço */

.conteudo-html .palavra-longa {
    overflow-wrap: anywhere;
}

/* Mobile/tablet */

@media (max-width: 767.98px) {
    .conteudo-html h1 {
        font-size: 1.25rem;
    }

    .conteudo-html h2 {
        font-size: 1.125rem;
    }

    .conteudo-html h3 {
        font-size: 1rem;
    }

    .conteudo-html ul,
    .conteudo-html ol {
        padding-left: 1.25rem;
    }

    .conteudo-html th,
    .conteudo-html td {
        padding: 0.35rem 0.5rem;
    }
}